fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,201 @@
import { createElement } from "react";
// @ts-nocheck
/**
* External dependencies
*/
import { useSelect } from 'downshift';
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { Icon, check } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { useCallback, useState } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
import { VisuallyHidden } from '../visually-hidden';
import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
import SelectControlChevronDown from '../select-control/chevron-down';
import { InputBaseWithBackCompatMinWidth } from './styles';
import { StyledLabel } from '../base-control/styles/base-control-styles';
import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
const itemToString = item => item?.name;
// This is needed so that in Windows, where
// the menu does not necessarily open on
// key up/down, you can still switch between
// options with the menu closed.
const stateReducer = ({
selectedItem
}, {
type,
changes,
props: {
items
}
}) => {
switch (type) {
case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
// If we already have a selected item, try to select the next one,
// without circular navigation. Otherwise, select the first item.
return {
selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0]
};
case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
// If we already have a selected item, try to select the previous one,
// without circular navigation. Otherwise, select the last item.
return {
selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1]
};
default:
return changes;
}
};
export default function CustomSelectControl(props) {
const {
/** Start opting into the larger default height that will become the default size in a future version. */
__next40pxDefaultSize = false,
/** Start opting into the unconstrained width that will become the default in a future version. */
__nextUnconstrainedWidth = false,
className,
hideLabelFromVision,
label,
describedBy,
options: items,
onChange: onSelectedItemChange,
/** @type {import('../select-control/types').SelectControlProps.size} */
size = 'default',
value: _selectedItem,
onMouseOver,
onMouseOut,
onFocus,
onBlur,
__experimentalShowSelectedHint = false
} = useDeprecated36pxDefaultSizeProp(props, 'wp.components.CustomSelectControl', '6.4');
const {
getLabelProps,
getToggleButtonProps,
getMenuProps,
getItemProps,
isOpen,
highlightedIndex,
selectedItem
} = useSelect({
initialSelectedItem: items[0],
items,
itemToString,
onSelectedItemChange,
...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? {
selectedItem: _selectedItem
} : undefined),
stateReducer
});
const [isFocused, setIsFocused] = useState(false);
function handleOnFocus(e) {
setIsFocused(true);
onFocus?.(e);
}
function handleOnBlur(e) {
setIsFocused(false);
onBlur?.(e);
}
if (!__nextUnconstrainedWidth) {
deprecated('Constrained width styles for wp.components.CustomSelectControl', {
since: '6.1',
version: '6.4',
hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version'
});
}
function getDescribedBy() {
if (describedBy) {
return describedBy;
}
if (!selectedItem) {
return __('No selection');
}
// translators: %s: The selected option.
return sprintf(__('Currently selected: %s'), selectedItem.name);
}
const menuProps = getMenuProps({
className: 'components-custom-select-control__menu',
'aria-hidden': !isOpen
});
const onKeyDownHandler = useCallback(e => {
e.stopPropagation();
menuProps?.onKeyDown?.(e);
}, [menuProps]);
// We need this here, because the null active descendant is not fully ARIA compliant.
if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) {
delete menuProps['aria-activedescendant'];
}
return createElement("div", {
className: classnames('components-custom-select-control', className)
}, hideLabelFromVision ? createElement(VisuallyHidden, {
as: "label",
...getLabelProps()
}, label) : /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
createElement(StyledLabel, {
...getLabelProps({
className: 'components-custom-select-control__label'
})
}, label), createElement(InputBaseWithBackCompatMinWidth, {
__next40pxDefaultSize: __next40pxDefaultSize,
__nextUnconstrainedWidth: __nextUnconstrainedWidth,
isFocused: isOpen || isFocused,
__unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto',
labelPosition: __nextUnconstrainedWidth ? undefined : 'top',
size: size,
suffix: createElement(SelectControlChevronDown, null)
}, createElement(SelectControlSelect, {
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
as: "button",
onFocus: handleOnFocus,
onBlur: handleOnBlur,
selectSize: size,
__next40pxDefaultSize: __next40pxDefaultSize,
...getToggleButtonProps({
// This is needed because some speech recognition software don't support `aria-labelledby`.
'aria-label': label,
'aria-labelledby': undefined,
className: 'components-custom-select-control__button',
describedBy: getDescribedBy()
})
}, itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && createElement("span", {
className: "components-custom-select-control__hint"
}, selectedItem.__experimentalHint))), createElement("ul", {
...menuProps,
onKeyDown: onKeyDownHandler
}, isOpen && items.map((item, index) =>
// eslint-disable-next-line react/jsx-key
createElement("li", {
...getItemProps({
item,
index,
key: item.key,
className: classnames(item.className, 'components-custom-select-control__item', {
'is-highlighted': index === highlightedIndex,
'has-hint': !!item.__experimentalHint,
'is-next-40px-default-size': __next40pxDefaultSize
}),
style: item.style
})
}, item.name, item.__experimentalHint && createElement("span", {
className: "components-custom-select-control__item-hint"
}, item.__experimentalHint), item === selectedItem && createElement(Icon, {
icon: check,
className: "components-custom-select-control__item-icon"
})))));
}
export function StableCustomSelectControl(props) {
return createElement(CustomSelectControl, {
...props,
__experimentalShowSelectedHint: false
});
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,18 @@
import _styled from "@emotion/styled/base";
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import InputBase from '../input-control/input-base';
import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/css(InputControlContainer, "{min-width:130px;}" + (process.env.NODE_ENV === "production" ? "" : ";label:backCompatMinWidth;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQk8iLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jdXN0b20tc2VsZWN0LWNvbnRyb2wvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRCYXNlIGZyb20gJy4uL2lucHV0LWNvbnRyb2wvaW5wdXQtYmFzZSc7XG5pbXBvcnQgeyBDb250YWluZXIgYXMgSW5wdXRDb250cm9sQ29udGFpbmVyIH0gZnJvbSAnLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuXG50eXBlIEJhY2tDb21wYXRNaW5XaWR0aFByb3BzID0ge1xuXHRfX25leHRVbmNvbnN0cmFpbmVkV2lkdGg6IGJvb2xlYW47XG59O1xuXG5jb25zdCBiYWNrQ29tcGF0TWluV2lkdGggPSAoIHByb3BzOiBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyApID0+XG5cdCEgcHJvcHMuX19uZXh0VW5jb25zdHJhaW5lZFdpZHRoXG5cdFx0PyBjc3NgXG5cdFx0XHRcdCR7IElucHV0Q29udHJvbENvbnRhaW5lciB9IHtcblx0XHRcdFx0XHRtaW4td2lkdGg6IDEzMHB4O1xuXHRcdFx0XHR9XG5cdFx0ICBgXG5cdFx0OiAnJztcblxuZXhwb3J0IGNvbnN0IElucHV0QmFzZVdpdGhCYWNrQ29tcGF0TWluV2lkdGggPSBzdHlsZWQoIElucHV0QmFzZSApYFxuXHQkeyBiYWNrQ29tcGF0TWluV2lkdGggfVxuYDtcbiJdfQ== */") : '';
export const InputBaseWithBackCompatMinWidth = /*#__PURE__*/_styled(InputBase, process.env.NODE_ENV === "production" ? {
target: "eswuck60"
} : {
target: "eswuck60",
label: "InputBaseWithBackCompatMinWidth"
})(backCompatMinWidth, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmtFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0QmFzZSBmcm9tICcuLi9pbnB1dC1jb250cm9sL2lucHV0LWJhc2UnO1xuaW1wb3J0IHsgQ29udGFpbmVyIGFzIElucHV0Q29udHJvbENvbnRhaW5lciB9IGZyb20gJy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcblxudHlwZSBCYWNrQ29tcGF0TWluV2lkdGhQcm9wcyA9IHtcblx0X19uZXh0VW5jb25zdHJhaW5lZFdpZHRoOiBib29sZWFuO1xufTtcblxuY29uc3QgYmFja0NvbXBhdE1pbldpZHRoID0gKCBwcm9wczogQmFja0NvbXBhdE1pbldpZHRoUHJvcHMgKSA9PlxuXHQhIHByb3BzLl9fbmV4dFVuY29uc3RyYWluZWRXaWR0aFxuXHRcdD8gY3NzYFxuXHRcdFx0XHQkeyBJbnB1dENvbnRyb2xDb250YWluZXIgfSB7XG5cdFx0XHRcdFx0bWluLXdpZHRoOiAxMzBweDtcblx0XHRcdFx0fVxuXHRcdCAgYFxuXHRcdDogJyc7XG5cbmV4cG9ydCBjb25zdCBJbnB1dEJhc2VXaXRoQmFja0NvbXBhdE1pbldpZHRoID0gc3R5bGVkKCBJbnB1dEJhc2UgKWBcblx0JHsgYmFja0NvbXBhdE1pbldpZHRoIH1cbmA7XG4iXX0= */"));
//# sourceMappingURL=styles.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","InputBase","Container","InputControlContainer","backCompatMinWidth","props","__nextUnconstrainedWidth","process","env","NODE_ENV","InputBaseWithBackCompatMinWidth","_styled","target","label"],"sources":["@wordpress/components/src/custom-select-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputBase from '../input-control/input-base';\nimport { Container as InputControlContainer } from '../input-control/styles/input-control-styles';\n\ntype BackCompatMinWidthProps = {\n\t__nextUnconstrainedWidth: boolean;\n};\n\nconst backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>\n\t! props.__nextUnconstrainedWidth\n\t\t? css`\n\t\t\t\t${ InputControlContainer } {\n\t\t\t\t\tmin-width: 130px;\n\t\t\t\t}\n\t\t `\n\t\t: '';\n\nexport const InputBaseWithBackCompatMinWidth = styled( InputBase )`\n\t${ backCompatMinWidth }\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,OAAOC,SAAS,MAAM,6BAA6B;AACnD,SAASC,SAAS,IAAIC,qBAAqB,QAAQ,8CAA8C;AAMjG,MAAMC,kBAAkB,GAAKC,KAA8B,IAC1D,CAAEA,KAAK,CAACC,wBAAwB,gBAC7BN,GAAG,CACAG,qBAAqB,0BAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,wDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,0xCAIxB,EAAE;AAEN,OAAO,MAAMC,+BAA+B,GAAG,aAAAC,OAAA,CAAQV,SAAS,EAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAC9DT,kBAAkB,SAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,wxCACrB"}