@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

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

@@ -1,56 +1,50 @@
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Tooltip from '../tooltip';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';
-import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';
-import Button from '../button';
+import { useInstanceId } from "@wordpress/compose";
+import { __ } from "@wordpress/i18n";
+import { useState } from "@wordpress/element";
+import { settings } from "@wordpress/icons";
+import Tooltip from "../tooltip";
+import { parseQuantityAndUnitFromRawValue } from "../unit-control/utils";
+import { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from "./utils";
+import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from "./styles/box-control-styles";
+import Button from "../button";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const noop = () => {};
+const noop = () => {
+};
 function getSidesToModify(side, sides, isAlt) {
   const allowedSides = getAllowedSides(sides);
   let modifiedSides = [];
   switch (side) {
-    case 'all':
-      modifiedSides = ['top', 'bottom', 'left', 'right'];
+    case "all":
+      modifiedSides = ["top", "bottom", "left", "right"];
       break;
-    case 'horizontal':
-      modifiedSides = ['left', 'right'];
+    case "horizontal":
+      modifiedSides = ["left", "right"];
       break;
-    case 'vertical':
-      modifiedSides = ['top', 'bottom'];
+    case "vertical":
+      modifiedSides = ["top", "bottom"];
       break;
     default:
       modifiedSides = [side];
   }
   if (isAlt) {
     switch (side) {
-      case 'top':
-        modifiedSides.push('bottom');
+      case "top":
+        modifiedSides.push("bottom");
         break;
-      case 'bottom':
-        modifiedSides.push('top');
+      case "bottom":
+        modifiedSides.push("top");
         break;
-      case 'left':
-        modifiedSides.push('left');
+      case "left":
+        modifiedSides.push("left");
         break;
-      case 'right':
-        modifiedSides.push('right');
+      case "right":
+        modifiedSides.push("right");
         break;
     }
   }
-  return modifiedSides.filter(s => allowedSides.has(s));
+  return modifiedSides.filter((s) => allowedSides.has(s));
 }
-export default function BoxInputControl({
+function BoxInputControl({
   __next40pxDefaultSize,
   onChange = noop,
   onFocus = noop,
@@ -66,19 +60,19 @@ export default function BoxInputControl({
 }) {
   var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
   const defaultValuesToModify = getSidesToModify(side, sides);
-  const handleOnFocus = event => {
+  const handleOnFocus = (event) => {
     onFocus(event, {
       side
     });
   };
-  const handleOnChange = nextValues => {
+  const handleOnChange = (nextValues) => {
     onChange(nextValues);
   };
-  const handleRawOnValueChange = next => {
+  const handleRawOnValueChange = (next) => {
     const nextValues = {
       ...values
     };
-    defaultValuesToModify.forEach(modifiedSide => {
+    defaultValuesToModify.forEach((modifiedSide) => {
       nextValues[modifiedSide] = next;
     });
     handleOnChange(nextValues);
@@ -87,27 +81,30 @@ export default function BoxInputControl({
     const nextValues = {
       ...values
     };
-    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
-    const nextValue = isNumeric ? next : undefined;
-    const modifiedSides = getSidesToModify(side, sides,
-    /**
-     * 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?
-    !!extra?.event.altKey);
-    modifiedSides.forEach(modifiedSide => {
+    const isNumeric = next !== void 0 && !isNaN(parseFloat(next));
+    const nextValue = isNumeric ? next : void 0;
+    const modifiedSides = getSidesToModify(
+      side,
+      sides,
+      /**
+       * 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?
+      !!extra?.event.altKey
+    );
+    modifiedSides.forEach((modifiedSide) => {
       nextValues[modifiedSide] = nextValue;
     });
     handleOnChange(nextValues);
   };
-  const handleOnUnitChange = next => {
+  const handleOnUnitChange = (next) => {
     const newUnits = {
       ...selectedUnits
     };
-    defaultValuesToModify.forEach(modifiedSide => {
+    defaultValuesToModify.forEach((modifiedSide) => {
       newUnits[modifiedSide] = next;
     });
     setSelectedUnits(newUnits);
@@ -117,41 +114,41 @@ export default function BoxInputControl({
   const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);
   const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);
   const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];
-  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');
-  const inputId = [generatedId, side].join('-');
-  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);
-  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
-  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;
+  const generatedId = useInstanceId(BoxInputControl, "box-control-input");
+  const inputId = [generatedId, side].join("-");
+  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === void 0 && defaultValuesToModify.some((s) => selectedUnits[s] !== computedUnit);
+  const usedValue = mergedValue === void 0 && computedUnit ? computedUnit : mergedValue;
+  const mixedPlaceholder = isMixed || isMixedUnit ? __("Mixed") : void 0;
   const hasPresets = presets && presets.length > 0 && presetKey;
-  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);
-  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);
-  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;
+  const hasPresetValue = hasPresets && mergedValue !== void 0 && !isMixed && isValuePreset(mergedValue, presetKey);
+  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== void 0);
+  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : void 0;
   const marks = hasPresets ? [{
     value: 0,
-    label: '',
-    tooltip: __('None')
+    label: "",
+    tooltip: __("None")
   }, ...presets.map((preset, index) => {
     var _preset$name;
     return {
       value: index + 1,
-      label: '',
+      label: "",
       tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug
     };
   })] : [];
-  return /*#__PURE__*/_jsxs(InputWrapper, {
+  return /* @__PURE__ */ _jsxs(InputWrapper, {
     expanded: true,
-    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {
-      side: side,
-      sides: sides
-    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/* @__PURE__ */ _jsx(FlexedBoxControlIcon, {
+      side,
+      sides
+    }), showCustomValueControl && /* @__PURE__ */ _jsxs(_Fragment, {
+      children: [/* @__PURE__ */ _jsx(Tooltip, {
         placement: "top-end",
         text: LABELS[side],
-        children: /*#__PURE__*/_jsx(StyledUnitControl, {
+        children: /* @__PURE__ */ _jsx(StyledUnitControl, {
           ...props,
-          min: min,
+          min,
           __shouldNotWarnDeprecated36pxSize: true,
-          __next40pxDefaultSize: __next40pxDefaultSize,
+          __next40pxDefaultSize,
           className: "component-box-control__unit-control",
           id: inputId,
           isPressEnterToChange: true,
@@ -164,42 +161,42 @@ export default function BoxInputControl({
           placeholder: mixedPlaceholder,
           hideLabelFromVision: true
         })
-      }), /*#__PURE__*/_jsx(FlexedRangeControl, {
+      }), /* @__PURE__ */ _jsx(FlexedRangeControl, {
         __nextHasNoMarginBottom: true,
-        __next40pxDefaultSize: __next40pxDefaultSize,
+        __next40pxDefaultSize,
         __shouldNotWarnDeprecated36pxSize: true,
         "aria-controls": inputId,
         label: LABELS[side],
         hideLabelFromVision: true,
-        onChange: newValue => {
-          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
+        onChange: (newValue) => {
+          handleOnValueChange(newValue !== void 0 ? [newValue, computedUnit].join("") : void 0);
         },
         min: isFinite(min) ? 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,
+        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
       })]
-    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {
+    }), hasPresets && !showCustomValueControl && /* @__PURE__ */ _jsx(FlexedRangeControl, {
       __next40pxDefaultSize: true,
       className: "spacing-sizes-control__range-control",
-      value: presetIndex !== undefined ? presetIndex + 1 : 0,
-      onChange: newIndex => {
-        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);
+      value: presetIndex !== void 0 ? presetIndex + 1 : 0,
+      onChange: (newIndex) => {
+        const newValue = newIndex === 0 || newIndex === void 0 ? void 0 : getPresetValueFromIndex(newIndex - 1, presetKey, presets);
         handleRawOnValueChange(newValue);
       },
       withInputField: false,
-      "aria-valuenow": presetIndex !== undefined ? presetIndex + 1 : 0,
-      "aria-valuetext": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,
-      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,
+      "aria-valuenow": presetIndex !== void 0 ? presetIndex + 1 : 0,
+      "aria-valuetext": marks[presetIndex !== void 0 ? presetIndex + 1 : 0].tooltip,
+      renderTooltipContent: (index) => marks[!index ? 0 : index].tooltip,
       min: 0,
       max: marks.length - 1,
-      marks: marks,
+      marks,
       label: LABELS[side],
       hideLabelFromVision: true,
       __nextHasNoMarginBottom: true
-    }), hasPresets && /*#__PURE__*/_jsx(Button, {
-      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),
+    }), hasPresets && /* @__PURE__ */ _jsx(Button, {
+      label: showCustomValueControl ? __("Use size preset") : __("Set custom size"),
       icon: settings,
       onClick: () => {
         setShowCustomValueControl(!showCustomValueControl);
@@ -210,4 +207,7 @@ export default function BoxInputControl({
     })]
   }, `box-control-${side}`);
 }
-//# sourceMappingURL=input-control.js.map
+export {
+  BoxInputControl as default
+};
+//# sourceMappingURL=input-control.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["useInstanceId","__","useState","settings","Tooltip","parseQuantityAndUnitFromRawValue","CUSTOM_VALUE_SETTINGS","getMergedValue","getAllowedSides","getPresetIndexFromValue","getPresetValueFromIndex","isValuePreset","isValuesDefined","isValueMixed","LABELS","FlexedBoxControlIcon","FlexedRangeControl","InputWrapper","StyledUnitControl","Button","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","noop","getSidesToModify","side","sides","isAlt","allowedSides","modifiedSides","push","filter","s","has","BoxInputControl","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","min","presets","presetKey","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","defaultValuesToModify","handleOnFocus","event","handleOnChange","nextValues","handleRawOnValueChange","next","forEach","modifiedSide","handleOnValueChange","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","handleOnUnitChange","newUnits","mergedValue","hasValues","isMixed","length","parsedQuantity","parsedUnit","computedUnit","generatedId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","hasPresets","hasPresetValue","showCustomValueControl","setShowCustomValueControl","presetIndex","marks","value","label","tooltip","map","preset","index","_preset$name","name","slug","expanded","children","placement","text","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","onUnitChange","placeholder","hideLabelFromVision","__nextHasNoMarginBottom","newValue","isFinite","max","step","withInputField","newIndex","renderTooltipContent","icon","onClick","isPressed","size","iconSize"],"sources":["@wordpress/components/src/box-control/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tCUSTOM_VALUE_SETTINGS,\n\tgetMergedValue,\n\tgetAllowedSides,\n\tgetPresetIndexFromValue,\n\tgetPresetValueFromIndex,\n\tisValuePreset,\n\tisValuesDefined,\n\tisValueMixed,\n\tLABELS,\n} from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\nimport Button from '../button';\n\nconst noop = () => {};\n\nfunction getSidesToModify(\n\tside: BoxControlInputControlProps[ 'side' ],\n\tsides: BoxControlInputControlProps[ 'sides' ],\n\tisAlt?: boolean\n) {\n\tconst allowedSides = getAllowedSides( sides );\n\n\tlet modifiedSides: ( keyof BoxControlValue )[] = [];\n\tswitch ( side ) {\n\t\tcase 'all':\n\t\t\tmodifiedSides = [ 'top', 'bottom', 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'horizontal':\n\t\t\tmodifiedSides = [ 'left', 'right' ];\n\t\t\tbreak;\n\t\tcase 'vertical':\n\t\t\tmodifiedSides = [ 'top', 'bottom' ];\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tmodifiedSides = [ side ];\n\t}\n\n\tif ( isAlt ) {\n\t\tswitch ( side ) {\n\t\t\tcase 'top':\n\t\t\t\tmodifiedSides.push( 'bottom' );\n\t\t\t\tbreak;\n\t\t\tcase 'bottom':\n\t\t\t\tmodifiedSides.push( 'top' );\n\t\t\t\tbreak;\n\t\t\tcase 'left':\n\t\t\t\tmodifiedSides.push( 'left' );\n\t\t\t\tbreak;\n\t\t\tcase 'right':\n\t\t\t\tmodifiedSides.push( 'right' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn modifiedSides.filter( ( s ) => allowedSides.has( s ) );\n}\n\nexport default function BoxInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\tside,\n\tmin = 0,\n\tpresets,\n\tpresetKey,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst defaultValuesToModify = getSidesToModify( side, sides );\n\n\tconst handleOnFocus = ( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleRawOnValueChange = ( next?: string ) => {\n\t\tconst nextValues = { ...values };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = next;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\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\t\tconst modifiedSides = getSidesToModify(\n\t\t\tside,\n\t\t\tsides,\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\t!! extra?.event.altKey\n\t\t);\n\n\t\tmodifiedSides.forEach( ( modifiedSide ) => {\n\t\t\tnextValues[ modifiedSide ] = nextValue;\n\t\t} );\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst handleOnUnitChange = ( next?: string ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\t\tdefaultValuesToModify.forEach( ( modifiedSide ) => {\n\t\t\tnewUnits[ modifiedSide ] = next;\n\t\t} );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst mergedValue = getMergedValue( values, defaultValuesToModify );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed =\n\t\thasValues &&\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tisValueMixed( values, defaultValuesToModify );\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( mergedValue );\n\tconst computedUnit = hasValues\n\t\t? parsedUnit\n\t\t: selectedUnits[ defaultValuesToModify[ 0 ] ];\n\tconst generatedId = useInstanceId( BoxInputControl, 'box-control-input' );\n\tconst inputId = [ generatedId, side ].join( '-' );\n\tconst isMixedUnit =\n\t\tdefaultValuesToModify.length > 1 &&\n\t\tmergedValue === undefined &&\n\t\tdefaultValuesToModify.some(\n\t\t\t( s ) => selectedUnits[ s ] !== computedUnit\n\t\t);\n\tconst usedValue =\n\t\tmergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n\tconst mixedPlaceholder = isMixed || isMixedUnit ? __( 'Mixed' ) : undefined;\n\tconst hasPresets = presets && presets.length > 0 && presetKey;\n\tconst hasPresetValue =\n\t\thasPresets &&\n\t\tmergedValue !== undefined &&\n\t\t! isMixed &&\n\t\tisValuePreset( mergedValue, presetKey );\n\tconst [ showCustomValueControl, setShowCustomValueControl ] = useState(\n\t\t! hasPresets ||\n\t\t\t( ! hasPresetValue && ! isMixed && mergedValue !== undefined )\n\t);\n\tconst presetIndex = hasPresetValue\n\t\t? getPresetIndexFromValue( mergedValue, presetKey, presets )\n\t\t: undefined;\n\tconst marks: Array< {\n\t\tvalue: number;\n\t\tlabel: string;\n\t\ttooltip: string;\n\t} > = hasPresets\n\t\t? [\n\t\t\t\t{\n\t\t\t\t\tvalue: 0,\n\t\t\t\t\tlabel: '',\n\t\t\t\t\ttooltip: __( 'None' ),\n\t\t\t\t},\n\t\t\t\t...presets.map( ( preset, index ) => ( {\n\t\t\t\t\tvalue: index + 1,\n\t\t\t\t\tlabel: '',\n\t\t\t\t\ttooltip: preset.name ?? preset.slug,\n\t\t\t\t} ) ),\n\t\t  ]\n\t\t: [];\n\n\treturn (\n\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t{ showCustomValueControl && (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tmin={ min }\n\t\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\tdisableUnits={ isMixed || isMixedUnit }\n\t\t\t\t\t\t\tvalue={ usedValue }\n\t\t\t\t\t\t\tonChange={ handleOnValueChange }\n\t\t\t\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tplaceholder={ mixedPlaceholder }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmin={ isFinite( min ) ? min : 0 }\n\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\n\t\t\t{ hasPresets && ! showCustomValueControl && (\n\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"spacing-sizes-control__range-control\"\n\t\t\t\t\tvalue={ presetIndex !== undefined ? presetIndex + 1 : 0 }\n\t\t\t\t\tonChange={ ( newIndex ) => {\n\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\tnewIndex === 0 || newIndex === undefined\n\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t: getPresetValueFromIndex(\n\t\t\t\t\t\t\t\t\t\tnewIndex - 1,\n\t\t\t\t\t\t\t\t\t\tpresetKey,\n\t\t\t\t\t\t\t\t\t\tpresets\n\t\t\t\t\t\t\t\t  );\n\t\t\t\t\t\thandleRawOnValueChange( newValue );\n\t\t\t\t\t} }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\taria-valuenow={\n\t\t\t\t\t\tpresetIndex !== undefined ? presetIndex + 1 : 0\n\t\t\t\t\t}\n\t\t\t\t\taria-valuetext={\n\t\t\t\t\t\tmarks[ presetIndex !== undefined ? presetIndex + 1 : 0 ]\n\t\t\t\t\t\t\t.tooltip\n\t\t\t\t\t}\n\t\t\t\t\trenderTooltipContent={ ( index ) =>\n\t\t\t\t\t\tmarks[ ! index ? 0 : index ].tooltip\n\t\t\t\t\t}\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ marks.length - 1 }\n\t\t\t\t\tmarks={ marks }\n\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ hasPresets && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={\n\t\t\t\t\t\tshowCustomValueControl\n\t\t\t\t\t\t\t? __( 'Use size preset' )\n\t\t\t\t\t\t\t: __( 'Set custom size' )\n\t\t\t\t\t}\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetShowCustomValueControl( ! showCustomValueControl );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ showCustomValueControl }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</InputWrapper>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/box-control/input-control.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('left');\n        break;\n      case 'right':\n        modifiedSides.push('right');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  __next40pxDefaultSize,\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  ...props\n}) {\n  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => {\n    var _preset$name;\n    return {\n      value: index + 1,\n      label: '',\n      tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug\n    };\n  })] : [];\n  return /*#__PURE__*/_jsxs(InputWrapper, {\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(StyledUnitControl, {\n          ...props,\n          min: min,\n          __shouldNotWarnDeprecated36pxSize: true,\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          className: \"component-box-control__unit-control\",\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n        __nextHasNoMarginBottom: true,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        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,\n        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,\n        value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n      __next40pxDefaultSize: true,\n      className: \"spacing-sizes-control__range-control\",\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true,\n      __nextHasNoMarginBottom: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/box-control/linked-button.js

@@ -1,26 +1,22 @@
-/**
- * WordPress dependencies
- */
-import { link, linkOff } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
+import { link, linkOff } from "@wordpress/icons";
+import { __ } from "@wordpress/i18n";
+import Button from "../button";
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function LinkedButton({
+function LinkedButton({
   isLinked,
   ...props
 }) {
-  const label = isLinked ? __('Unlink sides') : __('Link sides');
-  return /*#__PURE__*/_jsx(Button, {
+  const label = isLinked ? __("Unlink sides") : __("Link sides");
+  return /* @__PURE__ */ _jsx(Button, {
     ...props,
     className: "component-box-control__linked-button",
     size: "small",
     icon: isLinked ? link : linkOff,
     iconSize: 24,
-    label: label
+    label
   });
 }
-//# sourceMappingURL=linked-button.js.map
+export {
+  LinkedButton as default
+};
+//# sourceMappingURL=linked-button.js.map

package/build-module/box-control/linked-button.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["link","linkOff","__","Button","jsx","_jsx","LinkedButton","isLinked","props","label","className","size","icon","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,OAAO,QAAQ,kBAAkB;AAChD,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/B,eAAe,SAASC,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAGL,EAAE,CAAE,cAAe,CAAC,GAAGA,EAAE,CAAE,YAAa,CAAC;EAElE,oBACCG,IAAA,CAACF,MAAM;IAAA,GACDK,KAAK;IACVE,SAAS,EAAC,sCAAsC;IAChDC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGL,QAAQ,GAAGP,IAAI,GAAGC,OAAS;IAClCY,QAAQ,EAAG,EAAI;IACfJ,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/box-control/linked-button.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function LinkedButton({\n  isLinked,\n  ...props\n}) {\n  const label = isLinked ? __('Unlink sides') : __('Link sides');\n  return /*#__PURE__*/_jsx(Button, {\n    ...props,\n    className: \"component-box-control__linked-button\",\n    size: \"small\",\n    icon: isLinked ? link : linkOff,\n    iconSize: 24,\n    label: label\n  });\n}"],
+  "mappings": "AAGA,SAAS,MAAM,eAAe;AAC9B,SAAS,UAAU;AAKnB,OAAO,YAAY;AACnB,SAAS,OAAO,YAAY;AACb,SAAR,aAA8B;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,QAAQ,WAAW,GAAG,cAAc,IAAI,GAAG,YAAY;AAC7D,SAAoB,qBAAK,QAAQ;AAAA,IAC/B,GAAG;AAAA,IACH,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM,WAAW,OAAO;AAAA,IACxB,UAAU;AAAA,IACV;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}