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,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _inputControlStyles = require("./styles/input-control-styles");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function Backdrop({
disabled = false,
isFocused = false
}) {
return (0, _react.createElement)(_inputControlStyles.BackdropUI, {
"aria-hidden": "true",
className: "components-input-control__backdrop",
disabled: disabled,
isFocused: isFocused
});
}
const MemoizedBackdrop = (0, _element.memo)(Backdrop);
var _default = MemoizedBackdrop;
exports.default = _default;
//# sourceMappingURL=backdrop.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_inputControlStyles","Backdrop","disabled","isFocused","_react","createElement","BackdropUI","className","MemoizedBackdrop","memo","_default","exports","default"],"sources":["@wordpress/components/src/input-control/backdrop.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { BackdropUI } from './styles/input-control-styles';\n\nfunction Backdrop( { disabled = false, isFocused = false } ) {\n\treturn (\n\t\t<BackdropUI\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"components-input-control__backdrop\"\n\t\t\tdisabled={ disabled }\n\t\t\tisFocused={ isFocused }\n\t\t/>\n\t);\n}\n\nconst MemoizedBackdrop = memo( Backdrop );\n\nexport default MemoizedBackdrop;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,mBAAA,GAAAD,OAAA;AAPA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,SAASE,QAAQA,CAAE;EAAEC,QAAQ,GAAG,KAAK;EAAEC,SAAS,GAAG;AAAM,CAAC,EAAG;EAC5D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACL,mBAAA,CAAAM,UAAU;IACV,eAAY,MAAM;IAClBC,SAAS,EAAC,oCAAoC;IAC9CL,QAAQ,EAAGA,QAAU;IACrBC,SAAS,EAAGA;EAAW,CACvB,CAAC;AAEJ;AAEA,MAAMK,gBAAgB,GAAG,IAAAC,aAAI,EAAER,QAAS,CAAC;AAAC,IAAAS,QAAA,GAE3BF,gBAAgB;AAAAG,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,140 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InputControl = void 0;
exports.UnforwardedInputControl = UnforwardedInputControl;
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _inputBase = _interopRequireDefault(require("./input-base"));
var _inputField = _interopRequireDefault(require("./input-field"));
var _space = require("../utils/space");
var _utils = require("./utils");
var _baseControl = _interopRequireDefault(require("../base-control"));
var _useDeprecatedProps = require("../utils/use-deprecated-props");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const noop = () => {};
function useUniqueId(idProp) {
const instanceId = (0, _compose.useInstanceId)(InputControl);
const id = `inspector-input-control-${instanceId}`;
return idProp || id;
}
function UnforwardedInputControl(props, ref) {
const {
__next40pxDefaultSize,
__unstableStateReducer: stateReducer = state => state,
__unstableInputWidth,
className,
disabled = false,
help,
hideLabelFromVision = false,
id: idProp,
isPressEnterToChange = false,
label,
labelPosition = 'top',
onChange = noop,
onValidate = noop,
onKeyDown = noop,
prefix,
size = 'default',
style,
suffix,
value,
...restProps
} = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props, 'wp.components.InputControl', '6.4');
const [isFocused, setIsFocused] = (0, _element.useState)(false);
const id = useUniqueId(idProp);
const classes = (0, _classnames.default)('components-input-control', className);
const draftHookProps = (0, _utils.useDraft)({
value,
onBlur: restProps.onBlur,
onChange
});
// ARIA descriptions can only contain plain text, so fall back to aria-details if not.
const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details';
const helpProp = !!help ? {
[helpPropName]: `${id}__help`
} : {};
return (0, _react.createElement)(_baseControl.default, {
className: classes,
help: help,
id: id,
__nextHasNoMarginBottom: true
}, (0, _react.createElement)(_inputBase.default, {
__next40pxDefaultSize: __next40pxDefaultSize,
__unstableInputWidth: __unstableInputWidth,
disabled: disabled,
gap: 3,
hideLabelFromVision: hideLabelFromVision,
id: id,
isFocused: isFocused,
justify: "left",
label: label,
labelPosition: labelPosition,
prefix: prefix,
size: size,
style: style,
suffix: suffix
}, (0, _react.createElement)(_inputField.default, {
...restProps,
...helpProp,
__next40pxDefaultSize: __next40pxDefaultSize,
className: "components-input-control__input",
disabled: disabled,
id: id,
isFocused: isFocused,
isPressEnterToChange: isPressEnterToChange,
onKeyDown: onKeyDown,
onValidate: onValidate,
paddingInlineStart: prefix ? (0, _space.space)(2) : undefined,
paddingInlineEnd: suffix ? (0, _space.space)(2) : undefined,
ref: ref,
setIsFocused: setIsFocused,
size: size,
stateReducer: stateReducer,
...draftHookProps
})));
}
/**
* InputControl components let users enter and edit text. This is an experimental component
* intended to (in time) merge with or replace `TextControl`.
*
* ```jsx
* import { __experimentalInputControl as InputControl } from '@wordpress/components';
* import { useState } from '@wordpress/compose';
*
* const Example = () => {
* const [ value, setValue ] = useState( '' );
*
* return (
* <InputControl
* value={ value }
* onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
* />
* );
* };
* ```
*/
const InputControl = (0, _element.forwardRef)(UnforwardedInputControl);
exports.InputControl = InputControl;
var _default = InputControl;
exports.default = _default;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,126 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InputBase = InputBase;
exports.default = void 0;
var _react = require("react");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _backdrop = _interopRequireDefault(require("./backdrop"));
var _label = _interopRequireDefault(require("./label"));
var _inputControlStyles = require("./styles/input-control-styles");
var _context = require("../context");
var _useDeprecatedProps = require("../utils/use-deprecated-props");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function useUniqueId(idProp) {
const instanceId = (0, _compose.useInstanceId)(InputBase);
const id = `input-base-control-${instanceId}`;
return idProp || id;
}
// Adapter to map props for the new ui/flex component.
function getUIFlexProps(labelPosition) {
const props = {};
switch (labelPosition) {
case 'top':
props.direction = 'column';
props.expanded = false;
props.gap = 0;
break;
case 'bottom':
props.direction = 'column-reverse';
props.expanded = false;
props.gap = 0;
break;
case 'edge':
props.justify = 'space-between';
break;
}
return props;
}
function InputBase(props, ref) {
const {
__next40pxDefaultSize,
__unstableInputWidth,
children,
className,
disabled = false,
hideLabelFromVision = false,
labelPosition,
id: idProp,
isFocused = false,
label,
prefix,
size = 'default',
suffix,
...restProps
} = (0, _useDeprecatedProps.useDeprecated36pxDefaultSizeProp)(props, 'wp.components.InputBase', '6.4');
const id = useUniqueId(idProp);
const hideLabel = hideLabelFromVision || !label;
const {
paddingLeft,
paddingRight
} = (0, _inputControlStyles.getSizeConfig)({
inputSize: size,
__next40pxDefaultSize
});
const prefixSuffixContextValue = (0, _element.useMemo)(() => {
return {
InputControlPrefixWrapper: {
paddingLeft
},
InputControlSuffixWrapper: {
paddingRight
}
};
}, [paddingLeft, paddingRight]);
return (
// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
(0, _react.createElement)(_inputControlStyles.Root, {
...restProps,
...getUIFlexProps(labelPosition),
className: className,
gap: 2,
isFocused: isFocused,
labelPosition: labelPosition,
ref: ref
}, (0, _react.createElement)(_label.default, {
className: "components-input-control__label",
hideLabelFromVision: hideLabelFromVision,
labelPosition: labelPosition,
htmlFor: id
}, label), (0, _react.createElement)(_inputControlStyles.Container, {
__unstableInputWidth: __unstableInputWidth,
className: "components-input-control__container",
disabled: disabled,
hideLabel: hideLabel,
labelPosition: labelPosition
}, (0, _react.createElement)(_context.ContextSystemProvider, {
value: prefixSuffixContextValue
}, prefix && (0, _react.createElement)(_inputControlStyles.Prefix, {
className: "components-input-control__prefix"
}, prefix), children, suffix && (0, _react.createElement)(_inputControlStyles.Suffix, {
className: "components-input-control__suffix"
}, suffix)), (0, _react.createElement)(_backdrop.default, {
disabled: disabled,
isFocused: isFocused
})))
);
}
var _default = (0, _element.forwardRef)(InputBase);
exports.default = _default;
//# sourceMappingURL=input-base.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,211 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _react2 = require("@use-gesture/react");
var _element = require("@wordpress/element");
var _utils = require("./utils");
var _inputControlStyles = require("./styles/input-control-styles");
var _reducer = require("./reducer/reducer");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const noop = () => {};
function InputField({
disabled = false,
dragDirection = 'n',
dragThreshold = 10,
id,
isDragEnabled = false,
isFocused,
isPressEnterToChange = false,
onBlur = noop,
onChange = noop,
onDrag = noop,
onDragEnd = noop,
onDragStart = noop,
onFocus = noop,
onKeyDown = noop,
onValidate = noop,
size = 'default',
setIsFocused,
stateReducer = state => state,
value: valueProp,
type,
...props
}, ref) {
const {
// State.
state,
// Actions.
change,
commit,
drag,
dragEnd,
dragStart,
invalidate,
pressDown,
pressEnter,
pressUp,
reset
} = (0, _reducer.useInputControlStateReducer)(stateReducer, {
isDragEnabled,
value: valueProp,
isPressEnterToChange
}, onChange);
const {
value,
isDragging,
isDirty
} = state;
const wasDirtyOnBlur = (0, _element.useRef)(false);
const dragCursor = (0, _utils.useDragCursor)(isDragging, dragDirection);
const handleOnBlur = event => {
onBlur(event);
setIsFocused?.(false);
/**
* If isPressEnterToChange is set, this commits the value to
* the onChange callback.
*/
if (isDirty || !event.target.validity.valid) {
wasDirtyOnBlur.current = true;
handleOnCommit(event);
}
};
const handleOnFocus = event => {
onFocus(event);
setIsFocused?.(true);
};
const handleOnChange = event => {
const nextValue = event.target.value;
change(nextValue, event);
};
const handleOnCommit = event => {
const nextValue = event.currentTarget.value;
try {
onValidate(nextValue);
commit(nextValue, event);
} catch (err) {
invalidate(err, event);
}
};
const handleOnKeyDown = event => {
const {
key
} = event;
onKeyDown(event);
switch (key) {
case 'ArrowUp':
pressUp(event);
break;
case 'ArrowDown':
pressDown(event);
break;
case 'Enter':
pressEnter(event);
if (isPressEnterToChange) {
event.preventDefault();
handleOnCommit(event);
}
break;
case 'Escape':
if (isPressEnterToChange && isDirty) {
event.preventDefault();
reset(valueProp, event);
}
break;
}
};
const dragGestureProps = (0, _react2.useDrag)(dragProps => {
const {
distance,
dragging,
event,
target
} = dragProps;
// The `target` prop always references the `input` element while, by
// default, the `dragProps.event.target` property would reference the real
// event target (i.e. any DOM element that the pointer is hovering while
// dragging). Ensuring that the `target` is always the `input` element
// allows consumers of `InputControl` (or any higher-level control) to
// check the input's validity by accessing `event.target.validity.valid`.
dragProps.event = {
...dragProps.event,
target
};
if (!distance) return;
event.stopPropagation();
/**
* Quick return if no longer dragging.
* This prevents unnecessary value calculations.
*/
if (!dragging) {
onDragEnd(dragProps);
dragEnd(dragProps);
return;
}
onDrag(dragProps);
drag(dragProps);
if (!isDragging) {
onDragStart(dragProps);
dragStart(dragProps);
}
}, {
axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',
threshold: dragThreshold,
enabled: isDragEnabled,
pointer: {
capture: false
}
});
const dragProps = isDragEnabled ? dragGestureProps() : {};
/*
* Works around the odd UA (e.g. Firefox) that does not focus inputs of
* type=number when their spinner arrows are pressed.
*/
let handleOnMouseDown;
if (type === 'number') {
handleOnMouseDown = event => {
props.onMouseDown?.(event);
if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) {
event.currentTarget.focus();
}
};
}
return (0, _react.createElement)(_inputControlStyles.Input, {
...props,
...dragProps,
className: "components-input-control__input",
disabled: disabled,
dragCursor: dragCursor,
isDragging: isDragging,
id: id,
onBlur: handleOnBlur,
onChange: handleOnChange,
onFocus: handleOnFocus,
onKeyDown: handleOnKeyDown,
onMouseDown: handleOnMouseDown,
ref: ref,
inputSize: size
// Fallback to `''` to avoid "uncontrolled to controlled" warning.
// See https://github.com/WordPress/gutenberg/pull/47250 for details.
,
value: value !== null && value !== void 0 ? value : '',
type: type
});
}
const ForwardedComponent = (0, _element.forwardRef)(InputField);
var _default = ForwardedComponent;
exports.default = _default;
//# sourceMappingURL=input-field.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,46 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.InputControlPrefixWrapper = void 0;
var _react = require("react");
var _spacer = require("../spacer");
var _context = require("../context");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function UnconnectedInputControlPrefixWrapper(props, forwardedRef) {
const derivedProps = (0, _context.useContextSystem)(props, 'InputControlPrefixWrapper');
return (0, _react.createElement)(_spacer.Spacer, {
marginBottom: 0,
...derivedProps,
ref: forwardedRef
});
}
/**
* A convenience wrapper for the `prefix` when you want to apply
* standard padding in accordance with the size variant.
*
* ```jsx
* import {
* __experimentalInputControl as InputControl,
* __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
* } from '@wordpress/components';
*
* <InputControl
* prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
* />
* ```
*/
const InputControlPrefixWrapper = (0, _context.contextConnect)(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper');
exports.InputControlPrefixWrapper = InputControlPrefixWrapper;
var _default = InputControlPrefixWrapper;
exports.default = _default;
//# sourceMappingURL=input-prefix-wrapper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_spacer","require","_context","UnconnectedInputControlPrefixWrapper","props","forwardedRef","derivedProps","useContextSystem","_react","createElement","Spacer","marginBottom","ref","InputControlPrefixWrapper","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/input-control/input-prefix-wrapper.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { Spacer } from '../spacer';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect, useContextSystem } from '../context';\nimport type { InputControlPrefixWrapperProps } from './types';\n\nfunction UnconnectedInputControlPrefixWrapper(\n\tprops: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );\n\n\treturn (\n\t\t<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />\n\t);\n}\n\n/**\n * A convenience wrapper for the `prefix` when you want to apply\n * standard padding in accordance with the size variant.\n *\n * ```jsx\n * import {\n * __experimentalInputControl as InputControl,\n * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n * } from '@wordpress/components';\n *\n * <InputControl\n * prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}\n * />\n * ```\n */\nexport const InputControlPrefixWrapper = contextConnect(\n\tUnconnectedInputControlPrefixWrapper,\n\t'InputControlPrefixWrapper'\n);\n\nexport default InputControlPrefixWrapper;\n"],"mappings":";;;;;;;AAQA,IAAAA,OAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASE,oCAAoCA,CAC5CC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAMC,YAAY,GAAG,IAAAC,yBAAgB,EAAEH,KAAK,EAAE,2BAA4B,CAAC;EAE3E,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,MAAM;IAACC,YAAY,EAAG,CAAG;IAAA,GAAML,YAAY;IAAGM,GAAG,EAAGP;EAAc,CAAE,CAAC;AAExE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,yBAAyB,GAAG,IAAAC,uBAAc,EACtDX,oCAAoC,EACpC,2BACD,CAAC;AAACY,OAAA,CAAAF,yBAAA,GAAAA,yBAAA;AAAA,IAAAG,QAAA,GAEaH,yBAAyB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,46 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.InputControlSuffixWrapper = void 0;
var _react = require("react");
var _spacer = require("../spacer");
var _context = require("../context");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function UnconnectedInputControlSuffixWrapper(props, forwardedRef) {
const derivedProps = (0, _context.useContextSystem)(props, 'InputControlSuffixWrapper');
return (0, _react.createElement)(_spacer.Spacer, {
marginBottom: 0,
...derivedProps,
ref: forwardedRef
});
}
/**
* A convenience wrapper for the `suffix` when you want to apply
* standard padding in accordance with the size variant.
*
* ```jsx
* import {
* __experimentalInputControl as InputControl,
* __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
* } from '@wordpress/components';
*
* <InputControl
* suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
* />
* ```
*/
const InputControlSuffixWrapper = (0, _context.contextConnect)(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper');
exports.InputControlSuffixWrapper = InputControlSuffixWrapper;
var _default = InputControlSuffixWrapper;
exports.default = _default;
//# sourceMappingURL=input-suffix-wrapper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_spacer","require","_context","UnconnectedInputControlSuffixWrapper","props","forwardedRef","derivedProps","useContextSystem","_react","createElement","Spacer","marginBottom","ref","InputControlSuffixWrapper","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/input-control/input-suffix-wrapper.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { Spacer } from '../spacer';\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect, useContextSystem } from '../context';\nimport type { InputControlSuffixWrapperProps } from './types';\n\nfunction UnconnectedInputControlSuffixWrapper(\n\tprops: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );\n\n\treturn (\n\t\t<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />\n\t);\n}\n\n/**\n * A convenience wrapper for the `suffix` when you want to apply\n * standard padding in accordance with the size variant.\n *\n * ```jsx\n * import {\n * __experimentalInputControl as InputControl,\n * __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n * } from '@wordpress/components';\n *\n * <InputControl\n * suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}\n * />\n * ```\n */\nexport const InputControlSuffixWrapper = contextConnect(\n\tUnconnectedInputControlSuffixWrapper,\n\t'InputControlSuffixWrapper'\n);\n\nexport default InputControlSuffixWrapper;\n"],"mappings":";;;;;;;AAQA,IAAAA,OAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAMA,SAASE,oCAAoCA,CAC5CC,KAAuE,EACvEC,YAAiC,EAChC;EACD,MAAMC,YAAY,GAAG,IAAAC,yBAAgB,EAAEH,KAAK,EAAE,2BAA4B,CAAC;EAE3E,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,MAAM;IAACC,YAAY,EAAG,CAAG;IAAA,GAAML,YAAY;IAAGM,GAAG,EAAGP;EAAc,CAAE,CAAC;AAExE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,yBAAyB,GAAG,IAAAC,uBAAc,EACtDX,oCAAoC,EACpC,2BACD,CAAC;AAACY,OAAA,CAAAF,yBAAA,GAAAA,yBAAA;AAAA,IAAAG,QAAA,GAEaH,yBAAyB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = Label;
var _react = require("react");
var _visuallyHidden = require("../visually-hidden");
var _inputControlStyles = require("./styles/input-control-styles");
/**
* Internal dependencies
*/
function Label({
children,
hideLabelFromVision,
htmlFor,
...props
}) {
if (!children) return null;
if (hideLabelFromVision) {
return (0, _react.createElement)(_visuallyHidden.VisuallyHidden, {
as: "label",
htmlFor: htmlFor
}, children);
}
return (0, _react.createElement)(_inputControlStyles.LabelWrapper, null, (0, _react.createElement)(_inputControlStyles.Label, {
htmlFor: htmlFor,
...props
}, children));
}
//# sourceMappingURL=label.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_visuallyHidden","require","_inputControlStyles","Label","children","hideLabelFromVision","htmlFor","props","_react","createElement","VisuallyHidden","as","LabelWrapper"],"sources":["@wordpress/components/src/input-control/label.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tLabel as BaseLabel,\n\tLabelWrapper,\n} from './styles/input-control-styles';\nimport type { WordPressComponentProps } from '../context';\nimport type { InputControlLabelProps } from './types';\n\nexport default function Label( {\n\tchildren,\n\thideLabelFromVision,\n\thtmlFor,\n\t...props\n}: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {\n\tif ( ! children ) return null;\n\n\tif ( hideLabelFromVision ) {\n\t\treturn (\n\t\t\t<VisuallyHidden as=\"label\" htmlFor={ htmlFor }>\n\t\t\t\t{ children }\n\t\t\t</VisuallyHidden>\n\t\t);\n\t}\n\n\treturn (\n\t\t<LabelWrapper>\n\t\t\t<BaseLabel htmlFor={ htmlFor } { ...props }>\n\t\t\t\t{ children }\n\t\t\t</BaseLabel>\n\t\t</LabelWrapper>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AASe,SAASE,KAAKA,CAAE;EAC9BC,QAAQ;EACRC,mBAAmB;EACnBC,OAAO;EACP,GAAGC;AAC+D,CAAC,EAAG;EACtE,IAAK,CAAEH,QAAQ,EAAG,OAAO,IAAI;EAE7B,IAAKC,mBAAmB,EAAG;IAC1B,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACT,eAAA,CAAAU,cAAc;MAACC,EAAE,EAAC,OAAO;MAACL,OAAO,EAAGA;IAAS,GAC3CF,QACa,CAAC;EAEnB;EAEA,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACP,mBAAA,CAAAU,YAAY,QACZ,IAAAJ,MAAA,CAAAC,aAAA,EAACP,mBAAA,CAAAC,KAAS;IAACG,OAAO,EAAGA,OAAS;IAAA,GAAMC;EAAK,GACtCH,QACQ,CACE,CAAC;AAEjB"}

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RESET = exports.PRESS_UP = exports.PRESS_ENTER = exports.PRESS_DOWN = exports.INVALIDATE = exports.DRAG_START = exports.DRAG_END = exports.DRAG = exports.CONTROL = exports.COMMIT = exports.CHANGE = void 0;
/**
* External dependencies
*/
/**
* Internal dependencies
*/
const CHANGE = 'CHANGE';
exports.CHANGE = CHANGE;
const COMMIT = 'COMMIT';
exports.COMMIT = COMMIT;
const CONTROL = 'CONTROL';
exports.CONTROL = CONTROL;
const DRAG_END = 'DRAG_END';
exports.DRAG_END = DRAG_END;
const DRAG_START = 'DRAG_START';
exports.DRAG_START = DRAG_START;
const DRAG = 'DRAG';
exports.DRAG = DRAG;
const INVALIDATE = 'INVALIDATE';
exports.INVALIDATE = INVALIDATE;
const PRESS_DOWN = 'PRESS_DOWN';
exports.PRESS_DOWN = PRESS_DOWN;
const PRESS_ENTER = 'PRESS_ENTER';
exports.PRESS_ENTER = PRESS_ENTER;
const PRESS_UP = 'PRESS_UP';
exports.PRESS_UP = PRESS_UP;
const RESET = 'RESET';
exports.RESET = RESET;
//# sourceMappingURL=actions.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["CHANGE","exports","COMMIT","CONTROL","DRAG_END","DRAG_START","DRAG","INVALIDATE","PRESS_DOWN","PRESS_ENTER","PRESS_UP","RESET"],"sources":["@wordpress/components/src/input-control/reducer/actions.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DragProps } from '../types';\n\nexport const CHANGE = 'CHANGE';\nexport const COMMIT = 'COMMIT';\nexport const CONTROL = 'CONTROL';\nexport const DRAG_END = 'DRAG_END';\nexport const DRAG_START = 'DRAG_START';\nexport const DRAG = 'DRAG';\nexport const INVALIDATE = 'INVALIDATE';\nexport const PRESS_DOWN = 'PRESS_DOWN';\nexport const PRESS_ENTER = 'PRESS_ENTER';\nexport const PRESS_UP = 'PRESS_UP';\nexport const RESET = 'RESET';\n\ninterface EventPayload {\n\tevent?: SyntheticEvent;\n}\n\nexport interface Action< Type = string, ExtraPayload = {} > {\n\ttype: Type;\n\tpayload: EventPayload & ExtraPayload;\n}\n\ninterface ValuePayload {\n\tvalue: string;\n}\n\nexport type ChangeAction = Action< typeof CHANGE, ValuePayload >;\nexport type CommitAction = Action< typeof COMMIT, ValuePayload >;\nexport type ControlAction = Action< typeof CONTROL, ValuePayload >;\nexport type PressUpAction = Action< typeof PRESS_UP >;\nexport type PressDownAction = Action< typeof PRESS_DOWN >;\nexport type PressEnterAction = Action< typeof PRESS_ENTER >;\nexport type DragStartAction = Action< typeof DRAG_START, DragProps >;\nexport type DragEndAction = Action< typeof DRAG_END, DragProps >;\nexport type DragAction = Action< typeof DRAG, DragProps >;\nexport type ResetAction = Action< typeof RESET, Partial< ValuePayload > >;\nexport type InvalidateAction = Action< typeof INVALIDATE, { error: unknown } >;\n\nexport type ChangeEventAction = ChangeAction | ResetAction | CommitAction;\n\nexport type DragEventAction = DragStartAction | DragEndAction | DragAction;\n\nexport type KeyEventAction = PressDownAction | PressUpAction | PressEnterAction;\n\nexport type InputAction =\n\t| ChangeEventAction\n\t| KeyEventAction\n\t| DragEventAction\n\t| InvalidateAction;\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,MAAMA,MAAM,GAAG,QAAQ;AAACC,OAAA,CAAAD,MAAA,GAAAA,MAAA;AACxB,MAAME,MAAM,GAAG,QAAQ;AAACD,OAAA,CAAAC,MAAA,GAAAA,MAAA;AACxB,MAAMC,OAAO,GAAG,SAAS;AAACF,OAAA,CAAAE,OAAA,GAAAA,OAAA;AAC1B,MAAMC,QAAQ,GAAG,UAAU;AAACH,OAAA,CAAAG,QAAA,GAAAA,QAAA;AAC5B,MAAMC,UAAU,GAAG,YAAY;AAACJ,OAAA,CAAAI,UAAA,GAAAA,UAAA;AAChC,MAAMC,IAAI,GAAG,MAAM;AAACL,OAAA,CAAAK,IAAA,GAAAA,IAAA;AACpB,MAAMC,UAAU,GAAG,YAAY;AAACN,OAAA,CAAAM,UAAA,GAAAA,UAAA;AAChC,MAAMC,UAAU,GAAG,YAAY;AAACP,OAAA,CAAAO,UAAA,GAAAA,UAAA;AAChC,MAAMC,WAAW,GAAG,aAAa;AAACR,OAAA,CAAAQ,WAAA,GAAAA,WAAA;AAClC,MAAMC,QAAQ,GAAG,UAAU;AAACT,OAAA,CAAAS,QAAA,GAAAA,QAAA;AAC5B,MAAMC,KAAK,GAAG,OAAO;AAACV,OAAA,CAAAU,KAAA,GAAAA,KAAA"}

View File

@@ -0,0 +1,234 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useInputControlStateReducer = useInputControlStateReducer;
var _element = require("@wordpress/element");
var _state = require("./state");
var actions = _interopRequireWildcard(require("./actions"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Prepares initialState for the reducer.
*
* @param initialState The initial state.
* @return Prepared initialState for the reducer
*/
function mergeInitialState(initialState = _state.initialInputControlState) {
const {
value
} = initialState;
return {
..._state.initialInputControlState,
...initialState,
initialValue: value
};
}
/**
* Creates the base reducer which may be coupled to a specializing reducer.
* As its final step, for all actions other than CONTROL, the base reducer
* passes the state and action on through the specializing reducer. The
* exception for CONTROL actions is because they represent controlled updates
* from props and no case has yet presented for their specialization.
*
* @param composedStateReducers A reducer to specialize state changes.
* @return The reducer.
*/
function inputControlStateReducer(composedStateReducers) {
return (state, action) => {
const nextState = {
...state
};
switch (action.type) {
/*
* Controlled updates
*/
case actions.CONTROL:
nextState.value = action.payload.value;
nextState.isDirty = false;
nextState._event = undefined;
// Returns immediately to avoid invoking additional reducers.
return nextState;
/**
* Keyboard events
*/
case actions.PRESS_UP:
nextState.isDirty = false;
break;
case actions.PRESS_DOWN:
nextState.isDirty = false;
break;
/**
* Drag events
*/
case actions.DRAG_START:
nextState.isDragging = true;
break;
case actions.DRAG_END:
nextState.isDragging = false;
break;
/**
* Input events
*/
case actions.CHANGE:
nextState.error = null;
nextState.value = action.payload.value;
if (state.isPressEnterToChange) {
nextState.isDirty = true;
}
break;
case actions.COMMIT:
nextState.value = action.payload.value;
nextState.isDirty = false;
break;
case actions.RESET:
nextState.error = null;
nextState.isDirty = false;
nextState.value = action.payload.value || state.initialValue;
break;
/**
* Validation
*/
case actions.INVALIDATE:
nextState.error = action.payload.error;
break;
}
nextState._event = action.payload.event;
/**
* Send the nextState + action to the composedReducers via
* this "bridge" mechanism. This allows external stateReducers
* to hook into actions, and modify state if needed.
*/
return composedStateReducers(nextState, action);
};
}
/**
* A custom hook that connects and external stateReducer with an internal
* reducer. This hook manages the internal state of InputControl.
* However, by connecting an external stateReducer function, other
* components can react to actions as well as modify state before it is
* applied.
*
* This technique uses the "stateReducer" design pattern:
* https://kentcdodds.com/blog/the-state-reducer-pattern/
*
* @param stateReducer An external state reducer.
* @param initialState The initial state for the reducer.
* @param onChangeHandler A handler for the onChange event.
* @return State, dispatch, and a collection of actions.
*/
function useInputControlStateReducer(stateReducer = _state.initialStateReducer, initialState = _state.initialInputControlState, onChangeHandler) {
const [state, dispatch] = (0, _element.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState));
const createChangeEvent = type => (nextValue, event) => {
dispatch({
type,
payload: {
value: nextValue,
event
}
});
};
const createKeyEvent = type => event => {
dispatch({
type,
payload: {
event
}
});
};
const createDragEvent = type => payload => {
dispatch({
type,
payload
});
};
/**
* Actions for the reducer
*/
const change = createChangeEvent(actions.CHANGE);
const invalidate = (error, event) => dispatch({
type: actions.INVALIDATE,
payload: {
error,
event
}
});
const reset = createChangeEvent(actions.RESET);
const commit = createChangeEvent(actions.COMMIT);
const dragStart = createDragEvent(actions.DRAG_START);
const drag = createDragEvent(actions.DRAG);
const dragEnd = createDragEvent(actions.DRAG_END);
const pressUp = createKeyEvent(actions.PRESS_UP);
const pressDown = createKeyEvent(actions.PRESS_DOWN);
const pressEnter = createKeyEvent(actions.PRESS_ENTER);
const currentState = (0, _element.useRef)(state);
const refProps = (0, _element.useRef)({
value: initialState.value,
onChangeHandler
});
// Freshens refs to props and state so that subsequent effects have access
// to their latest values without their changes causing effect runs.
(0, _element.useLayoutEffect)(() => {
currentState.current = state;
refProps.current = {
value: initialState.value,
onChangeHandler
};
});
// Propagates the latest state through onChange.
(0, _element.useLayoutEffect)(() => {
if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
var _state$value;
refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
event: currentState.current._event
});
}
}, [state.value, state.isDirty]);
// Updates the state from props.
(0, _element.useLayoutEffect)(() => {
if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
var _initialState$value;
dispatch({
type: actions.CONTROL,
payload: {
value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''
}
});
}
}, [initialState.value]);
return {
change,
commit,
dispatch,
drag,
dragEnd,
dragStart,
invalidate,
pressDown,
pressEnter,
pressUp,
reset,
state
};
}
//# sourceMappingURL=reducer.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.initialStateReducer = exports.initialInputControlState = void 0;
/**
* External dependencies
*/
/**
* Internal dependencies
*/
const initialStateReducer = state => state;
exports.initialStateReducer = initialStateReducer;
const initialInputControlState = {
error: null,
initialValue: '',
isDirty: false,
isDragEnabled: false,
isDragging: false,
isPressEnterToChange: false,
value: ''
};
exports.initialInputControlState = initialInputControlState;
//# sourceMappingURL=state.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["initialStateReducer","state","exports","initialInputControlState","error","initialValue","isDirty","isDragEnabled","isDragging","isPressEnterToChange","value"],"sources":["@wordpress/components/src/input-control/reducer/state.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { Reducer, SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { Action, InputAction } from './actions';\n\nexport interface InputState {\n\t_event?: SyntheticEvent;\n\terror: unknown;\n\tinitialValue?: string;\n\tisDirty: boolean;\n\tisDragEnabled: boolean;\n\tisDragging: boolean;\n\tisPressEnterToChange: boolean;\n\tvalue?: string;\n}\n\nexport type StateReducer< SpecializedAction = {} > = Reducer<\n\tInputState,\n\tSpecializedAction extends Action\n\t\t? InputAction | SpecializedAction\n\t\t: InputAction\n>;\n\nexport const initialStateReducer: StateReducer = ( state: InputState ) => state;\n\nexport const initialInputControlState: InputState = {\n\terror: null,\n\tinitialValue: '',\n\tisDirty: false,\n\tisDragEnabled: false,\n\tisDragging: false,\n\tisPressEnterToChange: false,\n\tvalue: '',\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAqBO,MAAMA,mBAAiC,GAAKC,KAAiB,IAAMA,KAAK;AAACC,OAAA,CAAAF,mBAAA,GAAAA,mBAAA;AAEzE,MAAMG,wBAAoC,GAAG;EACnDC,KAAK,EAAE,IAAI;EACXC,YAAY,EAAE,EAAE;EAChBC,OAAO,EAAE,KAAK;EACdC,aAAa,EAAE,KAAK;EACpBC,UAAU,EAAE,KAAK;EACjBC,oBAAoB,EAAE,KAAK;EAC3BC,KAAK,EAAE;AACR,CAAC;AAACR,OAAA,CAAAC,wBAAA,GAAAA,wBAAA"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,95 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getDragCursor = getDragCursor;
exports.useDraft = useDraft;
exports.useDragCursor = useDragCursor;
var _element = require("@wordpress/element");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Gets a CSS cursor value based on a drag direction.
*
* @param dragDirection The drag direction.
* @return The CSS cursor value.
*/
function getDragCursor(dragDirection) {
let dragCursor = 'ns-resize';
switch (dragDirection) {
case 'n':
case 's':
dragCursor = 'ns-resize';
break;
case 'e':
case 'w':
dragCursor = 'ew-resize';
break;
}
return dragCursor;
}
/**
* Custom hook that renders a drag cursor when dragging.
*
* @param {boolean} isDragging The dragging state.
* @param {string} dragDirection The drag direction.
*
* @return {string} The CSS cursor value.
*/
function useDragCursor(isDragging, dragDirection) {
const dragCursor = getDragCursor(dragDirection);
(0, _element.useEffect)(() => {
if (isDragging) {
document.documentElement.style.cursor = dragCursor;
} else {
// @ts-expect-error
document.documentElement.style.cursor = null;
}
}, [isDragging, dragCursor]);
return dragCursor;
}
function useDraft(props) {
const refPreviousValue = (0, _element.useRef)(props.value);
const [draft, setDraft] = (0, _element.useState)({});
const value = draft.value !== undefined ? draft.value : props.value;
// Determines when to discard the draft value to restore controlled status.
// To do so, it tracks the previous value and marks the draft value as stale
// after each render.
(0, _element.useLayoutEffect)(() => {
const {
current: previousValue
} = refPreviousValue;
refPreviousValue.current = props.value;
if (draft.value !== undefined && !draft.isStale) setDraft({
...draft,
isStale: true
});else if (draft.isStale && props.value !== previousValue) setDraft({});
}, [props.value, draft]);
const onChange = (nextValue, extra) => {
// Mutates the draft value to avoid an extra effect run.
setDraft(current => Object.assign(current, {
value: nextValue,
isStale: false
}));
props.onChange(nextValue, extra);
};
const onBlur = event => {
setDraft({});
props.onBlur?.(event);
};
return {
value,
onBlur,
onChange
};
}
//# sourceMappingURL=utils.js.map

File diff suppressed because one or more lines are too long