@wordpress/components 29.0.0 → 29.1.0

package/CHANGELOG.md

@@ -2,6 +2,42 @@
 
 ## Unreleased
 
+## 29.1.0 (2025-01-02)
+
+### Enhancements
+
+-   `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)).
+-   `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)).
+-   `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
+-   `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
+
+### Deprecations
+
+-   `TreeSelect`: Deprecate 36px default size ([#67855](https://github.com/WordPress/gutenberg/pull/67855)).
+-   `SelectControl`: Deprecate 36px default size ([#66898](https://github.com/WordPress/gutenberg/pull/66898)).
+-   `InputControl`: Deprecate 36px default size ([#66897](https://github.com/WordPress/gutenberg/pull/66897)).
+-   `RadioGroup`: Log deprecation warning ([#68067](https://github.com/WordPress/gutenberg/pull/68067)).
+-   Soft deprecate `ButtonGroup` component. Use `ToggleGroupControl` instead ([#65429](https://github.com/WordPress/gutenberg/pull/65429)).
+-   `Navigation`: Log deprecation warning for removal in WP 7.1. Use `Navigator` instead ([#68158](https://github.com/WordPress/gutenberg/pull/68158)).
+
+### Bug Fixes
+
+-   `BoxControl`: Better respect for the `min` prop in the Range Slider ([#67819](https://github.com/WordPress/gutenberg/pull/67819)).
+-   `FontSizePicker`: Add `display:contents` rule to fix overflowing text in the custom size select. ([#68280](https://github.com/WordPress/gutenberg/pull/68280)).
+-   `BoxControl`: Fix aria-valuetext value ([#68362](https://github.com/WordPress/gutenberg/pull/68362)).
+
+### Experimental
+
+-   Add new `Badge` component ([#66555](https://github.com/WordPress/gutenberg/pull/66555)).
+-   `Menu`: refactor to more granular sub-components ([#67422](https://github.com/WordPress/gutenberg/pull/67422)).
+-   `Badge`: Support text truncation ([#68107](https://github.com/WordPress/gutenberg/pull/68107)).
+
+### Internal
+
+-   `SlotFill`: rewrite the non-portal version to use `observableMap` ([#67400](https://github.com/WordPress/gutenberg/pull/67400)).
+-   `DatePicker`: Prepare day buttons for 40px default size ([#68156](https://github.com/WordPress/gutenberg/pull/68156)).
+-   `SlotFill`: register slots in a layout effect ([#68176](https://github.com/WordPress/gutenberg/pull/68176)).
+
 ## 29.0.0 (2024-12-11)
 
 ### Breaking Changes
@@ -15,12 +51,13 @@
 -   `Menu`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
 -   `Navigation` (deprecated): Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
 -   `ToggleGroupControl`: Replace hardcoded white color with theme-ready variable ([#67649](https://github.com/WordPress/gutenberg/pull/67649)).
--   `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611))
+-   `RangeControl`: Update the design of the range control marks ([#67611](https://github.com/WordPress/gutenberg/pull/67611)).
 -   `BorderBoxControl`: Reduce gap value when unlinked ([#67049](https://github.com/WordPress/gutenberg/pull/67049)).
 -   `DropdownMenu`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
 -   `MenuItem`: Increase height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
 -   `MenuItemsChoice`: Increase option height to 40px ([#67435](https://github.com/WordPress/gutenberg/pull/67435)).
 -   `Navigation`: Fix active item hover color ([#67732](https://github.com/WordPress/gutenberg/pull/67732)).
+-   `Button`: Adjust `secondary` variant hover style. ([#67325](https://github.com/WordPress/gutenberg/pull/67325)).
 
 ### Deprecations
 
@@ -48,6 +85,7 @@
 
 -   `ResizableBox`: Make drag handles focusable ([#67305](https://github.com/WordPress/gutenberg/pull/67305)).
 -   `CustomSelectControl`: Update correctly when `showSelectedHint` is enabled ([#67733](https://github.com/WordPress/gutenberg/pull/67733)).
+-   `CustomSelectControl`: Use `useStoreState` to get `currentValue` and avoid stale values ([#67815](https://github.com/WordPress/gutenberg/pull/67815)).
 
 ## 28.13.0 (2024-11-27)
 

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2024 by the contributors
+    Copyright 2016-2025 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/build/badge/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _icons = require("@wordpress/icons");
+var _icon = _interopRequireDefault(require("../icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function Badge({
+  className,
+  intent = 'default',
+  children,
+  ...props
+}) {
+  /**
+   * Returns an icon based on the badge context.
+   *
+   * @return The corresponding icon for the provided context.
+   */
+  function contextBasedIcon() {
+    switch (intent) {
+      case 'info':
+        return _icons.info;
+      case 'success':
+        return _icons.published;
+      case 'warning':
+        return _icons.caution;
+      case 'error':
+        return _icons.error;
+      default:
+        return null;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: (0, _clsx.default)('components-badge', `is-${intent}`, intent !== 'default' && 'has-icon', className),
+    ...props,
+    children: [intent !== 'default' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+      icon: contextBasedIcon(),
+      size: 16,
+      fill: "currentColor",
+      className: "components-badge__icon"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "components-badge__content",
+      children: children
+    })]
+  });
+}
+var _default = exports.default = Badge;
+//# sourceMappingURL=index.js.map

package/build/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_jsxRuntime","Badge","className","intent","children","props","contextBasedIcon","info","published","caution","error","jsxs","clsx","jsx","default","icon","size","fill","_default","exports"],"sources":["@wordpress/components/src/badge/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { info, caution, error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { BadgeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\n\nfunction Badge( {\n\tclassName,\n\tintent = 'default',\n\tchildren,\n\t...props\n}: WordPressComponentProps< BadgeProps, 'span', false > ) {\n\t/**\n\t * Returns an icon based on the badge context.\n\t *\n\t * @return The corresponding icon for the provided context.\n\t */\n\tfunction contextBasedIcon() {\n\t\tswitch ( intent ) {\n\t\t\tcase 'info':\n\t\t\t\treturn info;\n\t\t\tcase 'success':\n\t\t\t\treturn published;\n\t\t\tcase 'warning':\n\t\t\t\treturn caution;\n\t\t\tcase 'error':\n\t\t\t\treturn error;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-badge',\n\t\t\t\t`is-${ intent }`,\n\t\t\t\tintent !== 'default' && 'has-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ intent !== 'default' && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ contextBasedIcon() }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclassName=\"components-badge__icon\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"components-badge__content\">{ children }</span>\n\t\t</span>\n\t);\n}\n\nexport default Badge;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAOA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA2B,IAAAG,WAAA,GAAAH,OAAA;AAf3B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASI,KAAKA,CAAE;EACfC,SAAS;EACTC,MAAM,GAAG,SAAS;EAClBC,QAAQ;EACR,GAAGC;AACkD,CAAC,EAAG;EACzD;AACD;AACA;AACA;AACA;EACC,SAASC,gBAAgBA,CAAA,EAAG;IAC3B,QAASH,MAAM;MACd,KAAK,MAAM;QACV,OAAOI,WAAI;MACZ,KAAK,SAAS;QACb,OAAOC,gBAAS;MACjB,KAAK,SAAS;QACb,OAAOC,cAAO;MACf,KAAK,OAAO;QACX,OAAOC,YAAK;MACb;QACC,OAAO,IAAI;IACb;EACD;EAEA,oBACC,IAAAV,WAAA,CAAAW,IAAA;IACCT,SAAS,EAAG,IAAAU,aAAI,EACf,kBAAkB,EAClB,MAAOT,MAAM,EAAG,EAChBA,MAAM,KAAK,SAAS,IAAI,UAAU,EAClCD,SACD,CAAG;IAAA,GACEG,KAAK;IAAAD,QAAA,GAERD,MAAM,KAAK,SAAS,iBACrB,IAAAH,WAAA,CAAAa,GAAA,EAACd,KAAA,CAAAe,OAAI;MACJC,IAAI,EAAGT,gBAAgB,CAAC,CAAG;MAC3BU,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC,cAAc;MACnBf,SAAS,EAAC;IAAwB,CAClC,CACD,eACD,IAAAF,WAAA,CAAAa,GAAA;MAAMX,SAAS,EAAC,2BAA2B;MAAAE,QAAA,EAAGA;IAAQ,CAAQ,CAAC;EAAA,CAC1D,CAAC;AAET;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEcb,KAAK","ignoreList":[]}

package/build/badge/types.js

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

package/build/badge/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/badge/types.ts"],"sourcesContent":["export type BadgeProps = {\n\t/**\n\t * Badge variant.\n\t *\n\t * @default 'default'\n\t */\n\tintent?: 'default' | 'info' | 'success' | 'warning' | 'error';\n\t/**\n\t * Text to display inside the badge.\n\t */\n\tchildren: string;\n};\n"],"mappings":"","ignoreList":[]}

package/build/box-control/index.js

@@ -80,6 +80,8 @@ function BoxControl({
   splitOnAxis = false,
   allowReset = true,
   resetValues = _utils2.DEFAULT_VALUES,
+  presets,
+  presetKey,
   onMouseOver,
   onMouseOut
 }) {
@@ -136,7 +138,9 @@ function BoxControl({
     setSelectedUnits,
     sides,
     values: inputValues,
-    __next40pxDefaultSize
+    __next40pxDefaultSize,
+    presets,
+    presetKey
   };
   (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
     componentName: 'BoxControl',

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_inputControl","_interopRequireDefault","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","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","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","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 InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\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\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\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 * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\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 || ! isValueMixed( 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\tonMouseOver,\n\t\tonMouseOut,\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\t__next40pxDefaultSize,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\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<InputControl side=\"all\" { ...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 &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\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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","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_inputControl","_interopRequireDefault","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","presets","presetKey","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","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 InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\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\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\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 * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\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\tpresets,\n\tpresetKey,\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 || ! isValueMixed( 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\tonMouseOver,\n\t\tonMouseOut,\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\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\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<InputControl side=\"all\" { ...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 &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\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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","ignoreList":[]}

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

@@ -8,10 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = BoxInputControl;
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _icons = require("@wordpress/icons");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _utils = require("../unit-control/utils");
 var _utils2 = require("./utils");
 var _boxControlStyles = require("./styles/box-control-styles");
+var _button = _interopRequireDefault(require("../button"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -65,6 +68,9 @@ function BoxInputControl({
   setSelectedUnits,
   sides,
   side,
+  min = 0,
+  presets,
+  presetKey,
   ...props
 }) {
   var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
@@ -77,6 +83,15 @@ function BoxInputControl({
   const handleOnChange = nextValues => {
     onChange(nextValues);
   };
+  const handleRawOnValueChange = next => {
+    const nextValues = {
+      ...values
+    };
+    defaultValuesToModify.forEach(modifiedSide => {
+      nextValues[modifiedSide] = next;
+    });
+    handleOnChange(nextValues);
+  };
   const handleOnValueChange = (next, extra) => {
     const nextValues = {
       ...values
@@ -116,45 +131,91 @@ function BoxInputControl({
   const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);
   const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;
   const mixedPlaceholder = isMixed || isMixedUnit ? (0, _i18n.__)('Mixed') : undefined;
+  const hasPresets = presets && presets.length > 0 && presetKey;
+  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && (0, _utils2.isValuePreset)(mergedValue, presetKey);
+  const [showCustomValueControl, setShowCustomValueControl] = (0, _element.useState)(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);
+  const presetIndex = hasPresetValue ? (0, _utils2.getPresetIndexFromValue)(mergedValue, presetKey, presets) : undefined;
+  const marks = hasPresets ? [{
+    value: 0,
+    label: '',
+    tooltip: (0, _i18n.__)('None')
+  }].concat(presets.map((preset, index) => {
+    var _preset$name;
+    return {
+      value: index + 1,
+      label: '',
+      tooltip: (_preset$name = preset.name) !== null && _preset$name !== void 0 ? _preset$name : preset.slug
+    };
+  })) : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_boxControlStyles.InputWrapper, {
     expanded: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedBoxControlIcon, {
       side: side,
       sides: sides
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-      placement: "top-end",
-      text: _utils2.LABELS[side],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.StyledUnitControl, {
-        ...props,
-        __shouldNotWarnDeprecated36pxSize: true,
+    }), showCustomValueControl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+        placement: "top-end",
+        text: _utils2.LABELS[side],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.StyledUnitControl, {
+          ...props,
+          min: min,
+          __shouldNotWarnDeprecated36pxSize: true,
+          __next40pxDefaultSize: __next40pxDefaultSize,
+          className: "component-box-control__unit-control",
+          id: inputId,
+          isPressEnterToChange: true,
+          disableUnits: isMixed || isMixedUnit,
+          value: usedValue,
+          onChange: handleOnValueChange,
+          onUnitChange: handleOnUnitChange,
+          onFocus: handleOnFocus,
+          label: _utils2.LABELS[side],
+          placeholder: mixedPlaceholder,
+          hideLabelFromVision: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
+        __nextHasNoMarginBottom: true,
         __next40pxDefaultSize: __next40pxDefaultSize,
-        className: "component-box-control__unit-control",
-        id: inputId,
-        isPressEnterToChange: true,
-        disableUnits: isMixed || isMixedUnit,
-        value: usedValue,
-        onChange: handleOnValueChange,
-        onUnitChange: handleOnUnitChange,
-        onFocus: handleOnFocus,
+        __shouldNotWarnDeprecated36pxSize: true,
+        "aria-controls": inputId,
         label: _utils2.LABELS[side],
-        placeholder: mixedPlaceholder,
-        hideLabelFromVision: true
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
-      __nextHasNoMarginBottom: true,
-      __next40pxDefaultSize: __next40pxDefaultSize,
-      __shouldNotWarnDeprecated36pxSize: true,
-      "aria-controls": inputId,
+        hideLabelFromVision: true,
+        onChange: newValue => {
+          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
+        },
+        min: isFinite(min) ? min : 0,
+        max: (_CUSTOM_VALUE_SETTING = _utils2.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 = _utils2.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__*/(0, _jsxRuntime.jsx)(_boxControlStyles.FlexedRangeControl, {
+      __next40pxDefaultSize: true,
+      className: "spacing-sizes-control__range-control",
+      value: presetIndex !== undefined ? presetIndex + 1 : 0,
+      onChange: newIndex => {
+        const newValue = newIndex === 0 || newIndex === undefined ? undefined : (0, _utils2.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,
+      min: 0,
+      max: marks.length - 1,
+      marks: marks,
       label: _utils2.LABELS[side],
       hideLabelFromVision: true,
-      onChange: newValue => {
-        handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
+      __nextHasNoMarginBottom: true
+    }), hasPresets && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      label: showCustomValueControl ? (0, _i18n.__)('Use size preset') : (0, _i18n.__)('Set custom size'),
+      icon: _icons.settings,
+      onClick: () => {
+        setShowCustomValueControl(!showCustomValueControl);
       },
-      min: 0,
-      max: (_CUSTOM_VALUE_SETTING = _utils2.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 = _utils2.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
+      isPressed: showCustomValueControl,
+      size: "small",
+      iconSize: 24
     })]
   }, `box-control-${side}`);
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_i18n","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_jsxRuntime","noop","getSidesToModify","side","sides","isAlt","allowedSides","getAllowedSides","modifiedSides","push","filter","s","has","BoxInputControl","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","props","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","defaultValuesToModify","handleOnFocus","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","forEach","modifiedSide","handleOnUnitChange","newUnits","mergedValue","getMergedValue","hasValues","isValuesDefined","isMixed","length","isValueMixed","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","generatedId","useInstanceId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","__","jsxs","InputWrapper","expanded","children","jsx","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","value","onUnitChange","label","placeholder","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-control.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tCUSTOM_VALUE_SETTINGS,\n\tgetAllowedSides,\n\tgetMergedValue,\n\tisValueMixed,\n\tisValuesDefined,\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';\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\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 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\n\treturn (\n\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\n\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t<StyledUnitControl\n\t\t\t\t\t{ ...props }\n\t\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\tid={ inputId }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tdisableUnits={ isMixed || isMixedUnit }\n\t\t\t\t\tvalue={ usedValue }\n\t\t\t\t\tonChange={ handleOnValueChange }\n\t\t\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\t\t\tonFocus={ handleOnFocus }\n\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\tplaceholder={ mixedPlaceholder }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\n\t\t\t<FlexedRangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\t\taria-controls={ inputId }\n\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\thideLabelFromVision\n\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t? [ newValue, computedUnit ].join( '' )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.max ?? 10 }\n\t\t\t\tstep={\n\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ computedUnit ?? '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</InputWrapper>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_compose","require","_i18n","_element","_icons","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","_button","_jsxRuntime","noop","getSidesToModify","side","sides","isAlt","allowedSides","getAllowedSides","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","getMergedValue","hasValues","isValuesDefined","isMixed","length","isValueMixed","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","generatedId","useInstanceId","inputId","join","isMixedUnit","some","usedValue","mixedPlaceholder","__","hasPresets","hasPresetValue","isValuePreset","showCustomValueControl","setShowCustomValueControl","useState","presetIndex","getPresetIndexFromValue","marks","value","label","tooltip","concat","map","preset","index","_preset$name","name","slug","jsxs","InputWrapper","expanded","children","jsx","FlexedBoxControlIcon","Fragment","default","placement","text","LABELS","StyledUnitControl","__shouldNotWarnDeprecated36pxSize","className","id","isPressEnterToChange","disableUnits","onUnitChange","placeholder","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","isFinite","max","CUSTOM_VALUE_SETTINGS","step","withInputField","newIndex","getPresetValueFromIndex","renderTooltipContent","icon","settings","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 = hasPresets\n\t\t? [ { value: 0, label: '', tooltip: __( 'None' ) } ].concat(\n\t\t\t\tpresets.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":[]}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\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 BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\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\t/**\n\t\t * Available presets to pick from.\n\t\t */\n\t\tpresets?: Preset[];\n\t\t/**\n\t\t * The key of the preset to apply.\n\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t */\n\t\tpresetKey?: string;\n\t};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}

package/build/box-control/utils.js

@@ -11,7 +11,10 @@ exports.getAllUnitFallback = getAllUnitFallback;
 exports.getAllowedSides = getAllowedSides;
 exports.getInitialSide = getInitialSide;
 exports.getMergedValue = getMergedValue;
+exports.getPresetIndexFromValue = getPresetIndexFromValue;
+exports.getPresetValueFromIndex = getPresetValueFromIndex;
 exports.isValueMixed = isValueMixed;
+exports.isValuePreset = isValuePreset;
 exports.isValuesDefined = isValuesDefined;
 exports.normalizeSides = normalizeSides;
 var _i18n = require("@wordpress/i18n");
@@ -323,4 +326,51 @@ function getAllowedSides(sides) {
   });
   return allowedSides;
 }
+
+/**
+ * Checks if a value is a preset value.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @return Whether the value is a preset value.
+ */
+function isValuePreset(value, presetKey) {
+  return value.startsWith(`var:preset|${presetKey}|`);
+}
+
+/**
+ * Returns the index of the preset value in the presets array.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The index of the preset value in the presets array.
+ */
+function getPresetIndexFromValue(value, presetKey, presets) {
+  if (!isValuePreset(value, presetKey)) {
+    return undefined;
+  }
+  const match = value.match(new RegExp(`^var:preset\\|${presetKey}\\|(.+)$`));
+  if (!match) {
+    return undefined;
+  }
+  const slug = match[1];
+  const index = presets.findIndex(preset => {
+    return preset.slug === slug;
+  });
+  return index !== -1 ? index : undefined;
+}
+
+/**
+ * Returns the preset value from the index.
+ *
+ * @param index     The index of the preset value in the presets array.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The preset value from the index.
+ */
+function getPresetValueFromIndex(index, presetKey, presets) {
+  const preset = presets[index];
+  return `var:preset|${presetKey}|${preset.slug}`;
+}
 //# sourceMappingURL=utils.js.map