@wordpress/components 28.14.1-next.cd6172eb0.0 → 29.0.0

package/build-module/box-control/axial-input-controls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useInstanceId","parseQuantityAndUnitFromRawValue","Tooltip","CUSTOM_VALUE_SETTINGS","LABELS","FlexedBoxControlIcon","FlexedRangeControl","InputWrapper","StyledUnitControl","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","createElement","_createElement","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","selectedUnit","inputId","join","placement","text","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","key","__nextHasNoMarginBottom","min","max","step","withInputField"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport Tooltip from '../tooltip';\nimport { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\t__next40pxDefaultSize,\n\tonChange,\n\tonFocus,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId(\n\t\tAxialInputControls,\n\t\t`box-control-input`\n\t);\n\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnValueChange = ( side: GroupedSide, next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ side }>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange( side, newValue )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t\t\t  ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/box-control/input-controls.js

@@ -1,124 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import Tooltip from '../tooltip';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
-import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const noop = () => {};
-export default function BoxInputControls({
-  __next40pxDefaultSize,
-  onChange = noop,
-  onFocus = noop,
-  values,
-  selectedUnits,
-  setSelectedUnits,
-  sides,
-  ...props
-}) {
-  const generatedId = useInstanceId(BoxInputControls, 'box-control-input');
-  const createHandleOnFocus = side => event => {
-    onFocus(event, {
-      side
-    });
-  };
-  const handleOnChange = nextValues => {
-    onChange(nextValues);
-  };
-  const handleOnValueChange = (side, next, extra) => {
-    const nextValues = {
-      ...values
-    };
-    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
-    const nextValue = isNumeric ? next : undefined;
-    nextValues[side] = nextValue;
-
-    /**
-     * Supports changing pair sides. For example, holding the ALT key
-     * when changing the TOP will also update BOTTOM.
-     */
-    // @ts-expect-error - TODO: event.altKey is only present when the change event was
-    // triggered by a keyboard event. Should this feature be implemented differently so
-    // it also works with drag events?
-    if (extra?.event.altKey) {
-      switch (side) {
-        case 'top':
-          nextValues.bottom = nextValue;
-          break;
-        case 'bottom':
-          nextValues.top = nextValue;
-          break;
-        case 'left':
-          nextValues.right = nextValue;
-          break;
-        case 'right':
-          nextValues.left = nextValue;
-          break;
-      }
-    }
-    handleOnChange(nextValues);
-  };
-  const createHandleOnUnitChange = side => next => {
-    const newUnits = {
-      ...selectedUnits
-    };
-    newUnits[side] = next;
-    setSelectedUnits(newUnits);
-  };
-
-  // Filter sides if custom configuration provided, maintaining default order.
-  const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: filteredSides.map(side => {
-      var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
-      const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
-      const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
-      const inputId = [generatedId, side].join('-');
-      return /*#__PURE__*/_jsxs(InputWrapper, {
-        expanded: true,
-        children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {
-          side: side,
-          sides: sides
-        }), /*#__PURE__*/_jsx(Tooltip, {
-          placement: "top-end",
-          text: LABELS[side],
-          children: /*#__PURE__*/_jsx(StyledUnitControl, {
-            ...props,
-            __shouldNotWarnDeprecated36pxSize: true,
-            __next40pxDefaultSize: __next40pxDefaultSize,
-            className: "component-box-control__unit-control",
-            id: inputId,
-            isPressEnterToChange: true,
-            value: [parsedQuantity, computedUnit].join(''),
-            onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra),
-            onUnitChange: createHandleOnUnitChange(side),
-            onFocus: createHandleOnFocus(side),
-            label: LABELS[side],
-            hideLabelFromVision: true
-          })
-        }), /*#__PURE__*/_jsx(FlexedRangeControl, {
-          __nextHasNoMarginBottom: true,
-          __next40pxDefaultSize: __next40pxDefaultSize,
-          __shouldNotWarnDeprecated36pxSize: true,
-          "aria-controls": inputId,
-          label: LABELS[side],
-          hideLabelFromVision: true,
-          onChange: newValue => {
-            handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
-          },
-          min: 0,
-          max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
-          step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
-          value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
-          withInputField: false
-        })]
-      }, `box-control-${side}`);
-    })
-  });
-}
-//# sourceMappingURL=input-controls.js.map

package/build-module/box-control/input-controls.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useInstanceId","Tooltip","parseQuantityAndUnitFromRawValue","ALL_SIDES","CUSTOM_VALUE_SETTINGS","LABELS","FlexedBoxControlIcon","FlexedRangeControl","InputWrapper","StyledUnitControl","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","children","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","computedUnit","inputId","join","expanded","placement","text","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","__nextHasNoMarginBottom","newValue","min","max","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId( BoxInputControls, 'box-control-input' );\n\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tside: keyof BoxControlValue,\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\t) => {\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tnextValues[ side ] = nextValue;\n\n\t\t/**\n\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t// it also works with drag events?\n\t\tif ( extra?.event.altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( nextValue, extra ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\t\tnextValue,\n\t\t\t\t\t\t\t\t\t\textra\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-types/box-control/all-input-control.d.ts

@@ -1,3 +0,0 @@
-import type { BoxControlInputControlProps } from './types';
-export default function AllInputControl({ __next40pxDefaultSize, onChange, onFocus, values, sides, selectedUnits, setSelectedUnits, ...props }: BoxControlInputControlProps): import("react").JSX.Element;
-//# sourceMappingURL=all-input-control.d.ts.map

package/build-types/box-control/all-input-control.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"all-input-control.d.ts","sourceRoot":"","sources":["../../src/box-control/all-input-control.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAa3D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,qBAAqB,EACrB,QAAe,EACf,OAAc,EACd,MAAM,EACN,KAAK,EACL,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACR,EAAE,2BAA2B,+BA2E7B"}

package/build-types/box-control/axial-input-controls.d.ts

@@ -1,3 +0,0 @@
-import type { BoxControlInputControlProps } from './types';
-export default function AxialInputControls({ __next40pxDefaultSize, onChange, onFocus, values, selectedUnits, setSelectedUnits, sides, ...props }: BoxControlInputControlProps): import("react").JSX.Element;
-//# sourceMappingURL=axial-input-controls.d.ts.map

package/build-types/box-control/axial-input-controls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"axial-input-controls.d.ts","sourceRoot":"","sources":["../../src/box-control/axial-input-controls.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAK3D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAE,EAC3C,qBAAqB,EACrB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,2BAA2B,+BAsI7B"}

package/build-types/box-control/input-controls.d.ts

@@ -1,3 +0,0 @@
-import type { BoxControlInputControlProps } from './types';
-export default function BoxInputControls({ __next40pxDefaultSize, onChange, onFocus, values, selectedUnits, setSelectedUnits, sides, ...props }: BoxControlInputControlProps): import("react").JSX.Element;
-//# sourceMappingURL=input-controls.d.ts.map

package/build-types/box-control/input-controls.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-controls.d.ts","sourceRoot":"","sources":["../../src/box-control/input-controls.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,2BAA2B,EAAmB,MAAM,SAAS,CAAC;AAI5E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAE,EACzC,qBAAqB,EACrB,QAAe,EACf,OAAc,EACd,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,2BAA2B,+BAyI7B"}

package/src/box-control/all-input-control.tsx

@@ -1,110 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import type { UnitControlProps } from '../unit-control/types';
-import {
-	FlexedRangeControl,
-	StyledUnitControl,
-} from './styles/box-control-styles';
-import type { BoxControlInputControlProps } from './types';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
-import {
-	LABELS,
-	applyValueToSides,
-	getAllValue,
-	isValuesMixed,
-	isValuesDefined,
-	CUSTOM_VALUE_SETTINGS,
-} from './utils';
-
-const noop = () => {};
-
-export default function AllInputControl( {
-	__next40pxDefaultSize,
-	onChange = noop,
-	onFocus = noop,
-	values,
-	sides,
-	selectedUnits,
-	setSelectedUnits,
-	...props
-}: BoxControlInputControlProps ) {
-	const inputId = useInstanceId( AllInputControl, 'box-control-input-all' );
-
-	const allValue = getAllValue( values, selectedUnits, sides );
-	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
-	const allPlaceholder = isMixed ? LABELS.mixed : undefined;
-
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( allValue );
-
-	const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (
-		event
-	) => {
-		onFocus( event, { side: 'all' } );
-	};
-
-	const onValueChange = ( next?: string ) => {
-		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-		const nextValues = applyValueToSides( values, nextValue, sides );
-
-		onChange( nextValues );
-	};
-
-	const sliderOnChange = ( next?: number ) => {
-		onValueChange(
-			next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined
-		);
-	};
-
-	// Set selected unit so it can be used as fallback by unlinked controls
-	// when individual sides do not have a value containing a unit.
-	const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {
-		const newUnits = applyValueToSides( selectedUnits, unit, sides );
-		setSelectedUnits( newUnits );
-	};
-
-	return (
-		<>
-			<StyledUnitControl
-				{ ...props }
-				__shouldNotWarnDeprecated36pxSize
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				className="component-box-control__unit-control"
-				disableUnits={ isMixed }
-				id={ inputId }
-				isPressEnterToChange
-				value={ allValue }
-				onChange={ onValueChange }
-				onUnitChange={ handleOnUnitChange }
-				onFocus={ handleOnFocus }
-				placeholder={ allPlaceholder }
-				label={ LABELS.all }
-				hideLabelFromVision
-			/>
-
-			<FlexedRangeControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
-				aria-controls={ inputId }
-				label={ LABELS.all }
-				hideLabelFromVision
-				onChange={ sliderOnChange }
-				min={ 0 }
-				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }
-				step={
-					CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-				}
-				value={ parsedQuantity ?? 0 }
-				withInputField={ false }
-			/>
-		</>
-	);
-}

package/src/box-control/axial-input-controls.tsx

@@ -1,165 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import Tooltip from '../tooltip';
-import { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
-import {
-	FlexedBoxControlIcon,
-	FlexedRangeControl,
-	InputWrapper,
-	StyledUnitControl,
-} from './styles/box-control-styles';
-import type { BoxControlInputControlProps } from './types';
-
-const groupedSides = [ 'vertical', 'horizontal' ] as const;
-type GroupedSide = ( typeof groupedSides )[ number ];
-
-export default function AxialInputControls( {
-	__next40pxDefaultSize,
-	onChange,
-	onFocus,
-	values,
-	selectedUnits,
-	setSelectedUnits,
-	sides,
-	...props
-}: BoxControlInputControlProps ) {
-	const generatedId = useInstanceId(
-		AxialInputControls,
-		`box-control-input`
-	);
-
-	const createHandleOnFocus =
-		( side: GroupedSide ) =>
-		( event: React.FocusEvent< HTMLInputElement > ) => {
-			if ( ! onFocus ) {
-				return;
-			}
-			onFocus( event, { side } );
-		};
-
-	const handleOnValueChange = ( side: GroupedSide, next?: string ) => {
-		if ( ! onChange ) {
-			return;
-		}
-		const nextValues = { ...values };
-		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-
-		if ( side === 'vertical' ) {
-			nextValues.top = nextValue;
-			nextValues.bottom = nextValue;
-		}
-
-		if ( side === 'horizontal' ) {
-			nextValues.left = nextValue;
-			nextValues.right = nextValue;
-		}
-
-		onChange( nextValues );
-	};
-
-	const createHandleOnUnitChange =
-		( side: GroupedSide ) => ( next?: string ) => {
-			const newUnits = { ...selectedUnits };
-
-			if ( side === 'vertical' ) {
-				newUnits.top = next;
-				newUnits.bottom = next;
-			}
-
-			if ( side === 'horizontal' ) {
-				newUnits.left = next;
-				newUnits.right = next;
-			}
-
-			setSelectedUnits( newUnits );
-		};
-
-	// Filter sides if custom configuration provided, maintaining default order.
-	const filteredSides = sides?.length
-		? groupedSides.filter( ( side ) => sides.includes( side ) )
-		: groupedSides;
-
-	return (
-		<>
-			{ filteredSides.map( ( side ) => {
-				const [ parsedQuantity, parsedUnit ] =
-					parseQuantityAndUnitFromRawValue(
-						side === 'vertical' ? values.top : values.left
-					);
-				const selectedUnit =
-					side === 'vertical'
-						? selectedUnits.top
-						: selectedUnits.left;
-
-				const inputId = [ generatedId, side ].join( '-' );
-
-				return (
-					<InputWrapper key={ side }>
-						<FlexedBoxControlIcon side={ side } sides={ sides } />
-						<Tooltip placement="top-end" text={ LABELS[ side ] }>
-							<StyledUnitControl
-								{ ...props }
-								__shouldNotWarnDeprecated36pxSize
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								className="component-box-control__unit-control"
-								id={ inputId }
-								isPressEnterToChange
-								value={ [
-									parsedQuantity,
-									selectedUnit ?? parsedUnit,
-								].join( '' ) }
-								onChange={ ( newValue ) =>
-									handleOnValueChange( side, newValue )
-								}
-								onUnitChange={ createHandleOnUnitChange(
-									side
-								) }
-								onFocus={ createHandleOnFocus( side ) }
-								label={ LABELS[ side ] }
-								hideLabelFromVision
-								key={ side }
-							/>
-						</Tooltip>
-						<FlexedRangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize={ __next40pxDefaultSize }
-							__shouldNotWarnDeprecated36pxSize
-							aria-controls={ inputId }
-							label={ LABELS[ side ] }
-							hideLabelFromVision
-							onChange={ ( newValue ) =>
-								handleOnValueChange(
-									side,
-									newValue !== undefined
-										? [
-												newValue,
-												selectedUnit ?? parsedUnit,
-										  ].join( '' )
-										: undefined
-								)
-							}
-							min={ 0 }
-							max={
-								CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]
-									?.max ?? 10
-							}
-							step={
-								CUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]
-									?.step ?? 0.1
-							}
-							value={ parsedQuantity ?? 0 }
-							withInputField={ false }
-						/>
-					</InputWrapper>
-				);
-			} ) }
-		</>
-	);
-}

package/src/box-control/input-controls.tsx

@@ -1,167 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import Tooltip from '../tooltip';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
-import {
-	FlexedBoxControlIcon,
-	FlexedRangeControl,
-	InputWrapper,
-	StyledUnitControl,
-} from './styles/box-control-styles';
-import type { BoxControlInputControlProps, BoxControlValue } from './types';
-
-const noop = () => {};
-
-export default function BoxInputControls( {
-	__next40pxDefaultSize,
-	onChange = noop,
-	onFocus = noop,
-	values,
-	selectedUnits,
-	setSelectedUnits,
-	sides,
-	...props
-}: BoxControlInputControlProps ) {
-	const generatedId = useInstanceId( BoxInputControls, 'box-control-input' );
-
-	const createHandleOnFocus =
-		( side: keyof BoxControlValue ) =>
-		( event: React.FocusEvent< HTMLInputElement > ) => {
-			onFocus( event, { side } );
-		};
-
-	const handleOnChange = ( nextValues: BoxControlValue ) => {
-		onChange( nextValues );
-	};
-
-	const handleOnValueChange = (
-		side: keyof BoxControlValue,
-		next?: string,
-		extra?: { event: React.SyntheticEvent< Element, Event > }
-	) => {
-		const nextValues = { ...values };
-		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
-
-		nextValues[ side ] = nextValue;
-
-		/**
-		 * Supports changing pair sides. For example, holding the ALT key
-		 * when changing the TOP will also update BOTTOM.
-		 */
-		// @ts-expect-error - TODO: event.altKey is only present when the change event was
-		// triggered by a keyboard event. Should this feature be implemented differently so
-		// it also works with drag events?
-		if ( extra?.event.altKey ) {
-			switch ( side ) {
-				case 'top':
-					nextValues.bottom = nextValue;
-					break;
-				case 'bottom':
-					nextValues.top = nextValue;
-					break;
-				case 'left':
-					nextValues.right = nextValue;
-					break;
-				case 'right':
-					nextValues.left = nextValue;
-					break;
-			}
-		}
-
-		handleOnChange( nextValues );
-	};
-
-	const createHandleOnUnitChange =
-		( side: keyof BoxControlValue ) => ( next?: string ) => {
-			const newUnits = { ...selectedUnits };
-			newUnits[ side ] = next;
-			setSelectedUnits( newUnits );
-		};
-
-	// Filter sides if custom configuration provided, maintaining default order.
-	const filteredSides = sides?.length
-		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
-		: ALL_SIDES;
-
-	return (
-		<>
-			{ filteredSides.map( ( side ) => {
-				const [ parsedQuantity, parsedUnit ] =
-					parseQuantityAndUnitFromRawValue( values[ side ] );
-
-				const computedUnit = values[ side ]
-					? parsedUnit
-					: selectedUnits[ side ];
-
-				const inputId = [ generatedId, side ].join( '-' );
-
-				return (
-					<InputWrapper key={ `box-control-${ side }` } expanded>
-						<FlexedBoxControlIcon side={ side } sides={ sides } />
-						<Tooltip placement="top-end" text={ LABELS[ side ] }>
-							<StyledUnitControl
-								{ ...props }
-								__shouldNotWarnDeprecated36pxSize
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								className="component-box-control__unit-control"
-								id={ inputId }
-								isPressEnterToChange
-								value={ [ parsedQuantity, computedUnit ].join(
-									''
-								) }
-								onChange={ ( nextValue, extra ) =>
-									handleOnValueChange(
-										side,
-										nextValue,
-										extra
-									)
-								}
-								onUnitChange={ createHandleOnUnitChange(
-									side
-								) }
-								onFocus={ createHandleOnFocus( side ) }
-								label={ LABELS[ side ] }
-								hideLabelFromVision
-							/>
-						</Tooltip>
-
-						<FlexedRangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize={ __next40pxDefaultSize }
-							__shouldNotWarnDeprecated36pxSize
-							aria-controls={ inputId }
-							label={ LABELS[ side ] }
-							hideLabelFromVision
-							onChange={ ( newValue ) => {
-								handleOnValueChange(
-									side,
-									newValue !== undefined
-										? [ newValue, computedUnit ].join( '' )
-										: undefined
-								);
-							} }
-							min={ 0 }
-							max={
-								CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
-									?.max ?? 10
-							}
-							step={
-								CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
-									?.step ?? 0.1
-							}
-							value={ parsedQuantity ?? 0 }
-							withInputField={ false }
-						/>
-					</InputWrapper>
-				);
-			} ) }
-		</>
-	);
-}