@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

package/build/border-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'\n> & {\n\t/**\n\t * This toggles the ability to choose custom colors.\n\t */\n\tdisableCustomColors?: boolean;\n};\n\nexport type LabelProps = {\n\t/**\n\t * Provides control over whether the label will only be visible to\n\t * screen readers.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * If provided, a label will be generated using this as the content.\n\t */\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/**\n\t\t * This controls whether unit selection should be disabled.\n\t\t */\n\t\tdisableUnits?: boolean;\n\t\t/**\n\t\t * This controls whether to support border style selection.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tenableStyle?: boolean;\n\t\t/**\n\t\t * This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t */\n\t\tisCompact?: boolean;\n\t\t/**\n\t\t * A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t */\n\t\tonChange: ( value?: Border ) => void;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/**\n\t\t * Whether or not to show the header for the border color and style\n\t\t * picker dropdown. The header includes a label for the color picker\n\t\t * and a close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t\t/**\n\t\t * Size of the control.\n\t\t *\n\t\t * @default 'default'\n\t\t */\n\t\tsize?: 'default' | '__unstable-large';\n\t\t/**\n\t\t * An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t */\n\t\tvalue?: Border;\n\t\t/**\n\t\t * Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t */\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/**\n\t\t * Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t */\n\t\twithSlider?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' | 'size' > & {\n\t\t/**\n\t\t * An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t */\n\t\tborder?: Border;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * A callback invoked when the border color or style selections change.\n\t\t */\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/**\n\t\t * Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t */\n\t\tpreviousStyleSelection?: string;\n\t\t/**\n\t\t * Whether or not to render a header for the border color and style picker\n\t\t * dropdown. The header includes a label for the color picker and a\n\t\t * close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = LabelProps & {\n\t/**\n\t * A callback function invoked when a border style is selected or cleared.\n\t */\n\tonChange: ( style?: string ) => void;\n\t/**\n\t * The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'\n> & {\n\t/**\n\t * This toggles the ability to choose custom colors.\n\t */\n\tdisableCustomColors?: boolean;\n};\n\nexport type LabelProps = {\n\t/**\n\t * Provides control over whether the label will only be visible to\n\t * screen readers.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * If provided, a label will be generated using this as the content.\n\t */\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/**\n\t\t * This controls whether unit selection should be disabled.\n\t\t */\n\t\tdisableUnits?: boolean;\n\t\t/**\n\t\t * This controls whether to support border style selection.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tenableStyle?: boolean;\n\t\t/**\n\t\t * This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t */\n\t\tisCompact?: boolean;\n\t\t/**\n\t\t * A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t */\n\t\tonChange: ( value?: Border ) => void;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/**\n\t\t * Whether or not to show the header for the border color and style\n\t\t * picker dropdown. The header includes a label for the color picker\n\t\t * and a close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t\t/**\n\t\t * Size of the control.\n\t\t *\n\t\t * @default 'default'\n\t\t */\n\t\tsize?: 'default' | '__unstable-large';\n\t\t/**\n\t\t * An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t */\n\t\tvalue?: Border;\n\t\t/**\n\t\t * Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t */\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/**\n\t\t * Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t */\n\t\twithSlider?: boolean;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' | 'size' > & {\n\t\t/**\n\t\t * An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t */\n\t\tborder?: Border;\n\t\t/**\n\t\t * Whether a border style can be set, based on the border sanitization settings.\n\t\t */\n\t\tisStyleSettable: boolean;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * A callback invoked when the border color or style selections change.\n\t\t */\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/**\n\t\t * Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t */\n\t\tpreviousStyleSelection?: string;\n\t\t/**\n\t\t * Whether or not to render a header for the border color and style picker\n\t\t * dropdown. The header includes a label for the color picker and a\n\t\t * close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' | 'onChange' | 'children'\n> & {\n\t/**\n\t * A callback function invoked when a border style is selected or cleared.\n\t */\n\tonChange: ( style?: string ) => void;\n\t/**\n\t * The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":""}

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

@@ -1,44 +1,51 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AllInputControl;
 var _react = require("react");
-var _unitControl = _interopRequireDefault(require("./unit-control"));
+var _compose = require("@wordpress/compose");
+var _boxControlStyles = require("./styles/box-control-styles");
+var _hStack = require("../h-stack");
+var _unitControl = require("../unit-control");
 var _utils = require("./utils");
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
 
 const noop = () => {};
 function AllInputControl({
+  __next40pxDefaultSize,
   onChange = noop,
   onFocus = noop,
-  onHoverOn = noop,
-  onHoverOff = noop,
   values,
   sides,
   selectedUnits,
   setSelectedUnits,
   ...props
 }) {
+  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
+  const inputId = (0, _compose.useInstanceId)(AllInputControl, 'box-control-input-all');
   const allValue = (0, _utils.getAllValue)(values, selectedUnits, sides);
   const hasValues = (0, _utils.isValuesDefined)(values);
   const isMixed = hasValues && (0, _utils.isValuesMixed)(values, selectedUnits, sides);
   const allPlaceholder = isMixed ? _utils.LABELS.mixed : undefined;
+  const [parsedQuantity, parsedUnit] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(allValue);
   const handleOnFocus = event => {
     onFocus(event, {
       side: 'all'
     });
   };
-  const handleOnChange = next => {
+  const onValueChange = next => {
     const isNumeric = next !== undefined && !isNaN(parseFloat(next));
     const nextValue = isNumeric ? next : undefined;
     const nextValues = (0, _utils.applyValueToSides)(values, nextValue, sides);
     onChange(nextValues);
   };
+  const sliderOnChange = next => {
+    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.
@@ -46,33 +53,32 @@ function AllInputControl({
     const newUnits = (0, _utils.applyValueToSides)(selectedUnits, unit, sides);
     setSelectedUnits(newUnits);
   };
-  const handleOnHoverOn = () => {
-    onHoverOn({
-      top: true,
-      bottom: true,
-      left: true,
-      right: true
-    });
-  };
-  const handleOnHoverOff = () => {
-    onHoverOff({
-      top: false,
-      bottom: false,
-      left: false,
-      right: false
-    });
-  };
-  return (0, _react.createElement)(_unitControl.default, {
+  return (0, _react.createElement)(_hStack.HStack, null, (0, _react.createElement)(_boxControlStyles.StyledUnitControl, {
     ...props,
+    __next40pxDefaultSize: __next40pxDefaultSize,
+    className: "component-box-control__unit-control",
     disableUnits: isMixed,
-    isOnly: true,
+    id: inputId,
+    isPressEnterToChange: true,
     value: allValue,
-    onChange: handleOnChange,
+    onChange: onValueChange,
     onUnitChange: handleOnUnitChange,
     onFocus: handleOnFocus,
-    onHoverOn: handleOnHoverOn,
-    onHoverOff: handleOnHoverOff,
-    placeholder: allPlaceholder
-  });
+    placeholder: allPlaceholder,
+    label: _utils.LABELS.all,
+    hideLabelFromVision: true
+  }), (0, _react.createElement)(_boxControlStyles.FlexedRangeControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize,
+    "aria-controls": inputId,
+    label: _utils.LABELS.all,
+    hideLabelFromVision: true,
+    onChange: sliderOnChange,
+    min: 0,
+    max: (_CUSTOM_VALUE_SETTING = _utils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+    step: (_CUSTOM_VALUE_SETTING2 = _utils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+    value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+    withInputField: false
+  }));
 }
 //# sourceMappingURL=all-input-control.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_unitControl","_interopRequireDefault","require","_utils","noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff","_react","createElement","default","disableUnits","isOnly","value","onUnitChange","placeholder"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAKA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AANA;AACA;AACA;;AAYA,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,eAAeA,CAAE;EACxCC,QAAQ,GAAGF,IAAI;EACfG,OAAO,GAAGH,IAAI;EACdI,SAAS,GAAGJ,IAAI;EAChBK,UAAU,GAAGL,IAAI;EACjBM,MAAM;EACNC,KAAK;EACLC,aAAa;EACbC,gBAAgB;EAChB,GAAGC;AACyB,CAAC,EAAG;EAChC,MAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAAEN,MAAM,EAAEE,aAAa,EAAED,KAAM,CAAC;EAC5D,MAAMM,SAAS,GAAG,IAAAC,sBAAe,EAAER,MAAO,CAAC;EAC3C,MAAMS,OAAO,GAAGF,SAAS,IAAI,IAAAG,oBAAa,EAAEV,MAAM,EAAEE,aAAa,EAAED,KAAM,CAAC;EAC1E,MAAMU,cAAc,GAAGF,OAAO,GAAGG,aAAM,CAACC,KAAK,GAAGC,SAAS;EAEzD,MAAMC,aAA0D,GAC/DC,KAAK,IACD;IACJnB,OAAO,CAAEmB,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAE,CAAC;EAClC,CAAC;EAED,MAAMC,cAA8C,GAAKC,IAAI,IAAM;IAClE,MAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAS,IAAI,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IACrE,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGL,SAAS;IAC9C,MAAMU,UAAU,GAAG,IAAAC,wBAAiB,EAAEzB,MAAM,EAAEuB,SAAS,EAAEtB,KAAM,CAAC;IAEhEL,QAAQ,CAAE4B,UAAW,CAAC;EACvB,CAAC;;EAED;EACA;EACA,MAAME,kBAAsD,GAAKC,IAAI,IAAM;IAC1E,MAAMC,QAAQ,GAAG,IAAAH,wBAAiB,EAAEvB,aAAa,EAAEyB,IAAI,EAAE1B,KAAM,CAAC;IAChEE,gBAAgB,CAAEyB,QAAS,CAAC;EAC7B,CAAC;EAED,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC7B/B,SAAS,CAAE;MACVgC,GAAG,EAAE,IAAI;MACTC,MAAM,EAAE,IAAI;MACZC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ,CAAC;EAED,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC9BnC,UAAU,CAAE;MACX+B,GAAG,EAAE,KAAK;MACVC,MAAM,EAAE,KAAK;MACbC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ,CAAC;EAED,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAC9C,YAAA,CAAA+C,OAAW;IAAA,GACNjC,KAAK;IACVkC,YAAY,EAAG7B,OAAS;IACxB8B,MAAM;IACNC,KAAK,EAAGnC,QAAU;IAClBT,QAAQ,EAAGsB,cAAgB;IAC3BuB,YAAY,EAAGf,kBAAoB;IACnC7B,OAAO,EAAGkB,aAAe;IACzBjB,SAAS,EAAG+B,eAAiB;IAC7B9B,UAAU,EAAGmC,gBAAkB;IAC/BQ,WAAW,EAAG/B;EAAgB,CAC9B,CAAC;AAEJ"}
+{"version":3,"names":["_compose","require","_boxControlStyles","_hStack","_unitControl","_utils","noop","AllInputControl","__next40pxDefaultSize","onChange","onFocus","values","sides","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","inputId","useInstanceId","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","handleOnFocus","event","side","onValueChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","sliderOnChange","join","handleOnUnitChange","unit","newUnits","_react","createElement","HStack","StyledUnitControl","className","disableUnits","id","isPressEnterToChange","value","onUnitChange","placeholder","label","all","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport {\n\tFlexedRangeControl,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport { HStack } from '../h-stack';\nimport type { BoxControlInputControlProps } from './types';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n\tCUSTOM_VALUE_SETTINGS,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst inputId = useInstanceId( AllInputControl, 'box-control-input-all' );\n\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( allValue );\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst onValueChange = ( next?: string ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst sliderOnChange = ( next?: number ) => {\n\t\tonValueChange(\n\t\t\tnext !== undefined ? [ next, parsedUnit ].join( '' ) : undefined\n\t\t);\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\treturn (\n\t\t<HStack>\n\t\t\t<StyledUnitControl\n\t\t\t\t{ ...props }\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\tdisableUnits={ isMixed }\n\t\t\t\tid={ inputId }\n\t\t\t\tisPressEnterToChange\n\t\t\t\tvalue={ allValue }\n\t\t\t\tonChange={ onValueChange }\n\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\tplaceholder={ allPlaceholder }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t/>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS.all }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ sliderOnChange }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1\n\t\t\t\t}\n\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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"}

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

@@ -6,26 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = AxialInputControls;
 var _react = require("react");
+var _compose = require("@wordpress/compose");
 var _utils = require("../unit-control/utils");
-var _unitControl = _interopRequireDefault(require("./unit-control"));
+var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _utils2 = require("./utils");
 var _boxControlStyles = require("./styles/box-control-styles");
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
 const groupedSides = ['vertical', 'horizontal'];
 function AxialInputControls({
+  __next40pxDefaultSize,
   onChange,
   onFocus,
-  onHoverOn,
-  onHoverOff,
   values,
   selectedUnits,
   setSelectedUnits,
   sides,
   ...props
 }) {
+  const generatedId = (0, _compose.useInstanceId)(AxialInputControls, `box-control-input`);
   const createHandleOnFocus = side => event => {
     if (!onFocus) {
       return;
@@ -34,41 +39,7 @@ function AxialInputControls({
       side
     });
   };
-  const createHandleOnHoverOn = side => () => {
-    if (!onHoverOn) {
-      return;
-    }
-    if (side === 'vertical') {
-      onHoverOn({
-        top: true,
-        bottom: true
-      });
-    }
-    if (side === 'horizontal') {
-      onHoverOn({
-        left: true,
-        right: true
-      });
-    }
-  };
-  const createHandleOnHoverOff = side => () => {
-    if (!onHoverOff) {
-      return;
-    }
-    if (side === 'vertical') {
-      onHoverOff({
-        top: false,
-        bottom: false
-      });
-    }
-    if (side === 'horizontal') {
-      onHoverOff({
-        left: false,
-        right: false
-      });
-    }
-  };
-  const createHandleOnChange = side => next => {
+  const handleOnValueChange = (side, next) => {
     if (!onChange) {
       return;
     }
@@ -104,30 +75,45 @@ function AxialInputControls({
 
   // Filter sides if custom configuration provided, maintaining default order.
   const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
-  const first = filteredSides[0];
-  const last = filteredSides[filteredSides.length - 1];
-  const only = first === last && first;
-  return (0, _react.createElement)(_boxControlStyles.Layout, {
-    gap: 0,
-    align: "top",
-    className: "component-box-control__vertical-horizontal-input-controls"
-  }, filteredSides.map(side => {
+  return (0, _react.createElement)(_react.Fragment, null, filteredSides.map(side => {
+    var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
     const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(side === 'vertical' ? values.top : values.left);
     const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
-    return (0, _react.createElement)(_unitControl.default, {
+    const inputId = [generatedId, side].join('-');
+    return (0, _react.createElement)(_boxControlStyles.InputWrapper, {
+      key: side
+    }, (0, _react.createElement)(_boxControlStyles.FlexedBoxControlIcon, {
+      side: side,
+      sides: sides
+    }), (0, _react.createElement)(_tooltip.default, {
+      placement: "top-end",
+      text: _utils2.LABELS[side]
+    }, (0, _react.createElement)(_boxControlStyles.StyledUnitControl, {
       ...props,
-      isFirst: first === side,
-      isLast: last === side,
-      isOnly: only === side,
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      className: "component-box-control__unit-control",
+      id: inputId,
+      isPressEnterToChange: true,
       value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
-      onChange: createHandleOnChange(side),
+      onChange: newValue => handleOnValueChange(side, newValue),
       onUnitChange: createHandleOnUnitChange(side),
       onFocus: createHandleOnFocus(side),
-      onHoverOn: createHandleOnHoverOn(side),
-      onHoverOff: createHandleOnHoverOff(side),
       label: _utils2.LABELS[side],
+      hideLabelFromVision: true,
       key: side
-    });
+    })), (0, _react.createElement)(_boxControlStyles.FlexedRangeControl, {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      "aria-controls": inputId,
+      label: _utils2.LABELS[side],
+      hideLabelFromVision: true,
+      onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined),
+      min: 0,
+      max: (_CUSTOM_VALUE_SETTING = _utils2.CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+      step: (_CUSTOM_VALUE_SETTING2 = _utils2.CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+      withInputField: false
+    }));
   }));
 }
 //# sourceMappingURL=axial-input-controls.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","_unitControl","_interopRequireDefault","_utils2","_boxControlStyles","groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","_react","createElement","Layout","gap","align","className","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } 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\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\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 createHandleOnHoverOn = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( 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\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\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\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_utils","_tooltip","_interopRequireDefault","_utils2","_boxControlStyles","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","_react","createElement","Fragment","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","inputId","join","InputWrapper","key","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","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__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\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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"}

package/build/box-control/index.js

@@ -16,13 +16,11 @@ var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _baseControl = require("../base-control");
-var _button = _interopRequireDefault(require("../button"));
-var _flex = require("../flex");
 var _allInputControl = _interopRequireDefault(require("./all-input-control"));
 var _inputControls = _interopRequireDefault(require("./input-controls"));
 var _axialInputControls = _interopRequireDefault(require("./axial-input-controls"));
-var _icon = _interopRequireDefault(require("./icon"));
 var _linkedButton = _interopRequireDefault(require("./linked-button"));
+var _grid = require("../grid");
 var _boxControlStyles = require("./styles/box-control-styles");
 var _utils = require("../unit-control/utils");
 var _utils2 = require("./utils");
@@ -70,6 +68,7 @@ function useUniqueId(idProp) {
  * ```
  */
 function BoxControl({
+  __next40pxDefaultSize = false,
   id: idProp,
   inputProps = defaultInputProps,
   onChange = noop,
@@ -135,39 +134,36 @@ function BoxControl({
     sides,
     values: inputValues,
     onMouseOver,
-    onMouseOut
+    onMouseOut,
+    __next40pxDefaultSize
   };
-  return (0, _react.createElement)(_boxControlStyles.Root, {
+  return (0, _react.createElement)(_grid.Grid, {
     id: id,
+    columns: 3,
+    templateColumns: "1fr min-content min-content",
     role: "group",
     "aria-labelledby": headingId
-  }, (0, _react.createElement)(_boxControlStyles.Header, {
-    className: "component-box-control__header"
-  }, (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_baseControl.BaseControl.VisualLabel, {
+  }, (0, _react.createElement)(_baseControl.BaseControl.VisualLabel, {
     id: headingId
-  }, label)), allowReset && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_button.default, {
-    className: "component-box-control__reset-button",
-    variant: "secondary",
-    size: "small",
-    onClick: handleOnReset,
-    disabled: !isDirty
-  }, (0, _i18n.__)('Reset')))), (0, _react.createElement)(_boxControlStyles.HeaderControlWrapper, {
-    className: "component-box-control__header-control-wrapper"
-  }, (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_icon.default, {
+  }, label), isLinked && (0, _react.createElement)(_boxControlStyles.InputWrapper, null, (0, _react.createElement)(_boxControlStyles.FlexedBoxControlIcon, {
     side: side,
     sides: sides
-  })), isLinked && (0, _react.createElement)(_flex.FlexBlock, null, (0, _react.createElement)(_allInputControl.default, {
-    "aria-label": label,
-    ...inputControlProps
-  })), !isLinked && splitOnAxis && (0, _react.createElement)(_flex.FlexBlock, null, (0, _react.createElement)(_axialInputControls.default, {
+  }), (0, _react.createElement)(_allInputControl.default, {
     ...inputControlProps
-  })), !hasOneSide && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_linkedButton.default, {
+  })), !hasOneSide && (0, _react.createElement)(_boxControlStyles.LinkedButtonWrapper, null, (0, _react.createElement)(_linkedButton.default, {
     onClick: toggleLinked,
     isLinked: isLinked
-  }))), !isLinked && !splitOnAxis && (0, _react.createElement)(_inputControls.default, {
+  })), !isLinked && splitOnAxis && (0, _react.createElement)(_axialInputControls.default, {
     ...inputControlProps
-  }));
+  }), !isLinked && !splitOnAxis && (0, _react.createElement)(_inputControls.default, {
+    ...inputControlProps
+  }), allowReset && (0, _react.createElement)(_boxControlStyles.ResetButton, {
+    className: "component-box-control__reset-button",
+    variant: "secondary",
+    size: "small",
+    onClick: handleOnReset,
+    disabled: !isDirty
+  }, (0, _i18n.__)('Reset')));
 }
-var _default = BoxControl;
-exports.default = _default;
+var _default = exports.default = BoxControl;
 //# sourceMappingURL=index.js.map

package/build/box-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_button","_interopRequireDefault","_flex","_allInputControl","_inputControls","_axialInputControls","_icon","_linkedButton","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","_react","createElement","Root","role","Header","className","FlexItem","BaseControl","VisualLabel","default","variant","size","onClick","disabled","HeaderControlWrapper","FlexBlock","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_allInputControl","_interopRequireDefault","_inputControls","_axialInputControls","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","_react","createElement","Grid","columns","templateColumns","role","BaseControl","VisualLabel","InputWrapper","FlexedBoxControlIcon","default","LinkedButtonWrapper","onClick","ResetButton","className","variant","size","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tFlexedBoxControlIcon,\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t__next40pxDefaultSize,\n\t};\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t<AllInputControl { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}