@wordpress/components 21.3.0 → 22.1.0

package/build/number-control/index.js

@@ -15,6 +15,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _i18n = require("@wordpress/i18n");
 
+var _icons = require("@wordpress/icons");
+
+var _compose = require("@wordpress/compose");
+
+var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+
 var _numberControlStyles = require("./styles/number-control-styles");
 
 var inputControlActionTypes = _interopRequireWildcard(require("../input-control/reducer/actions"));
@@ -23,6 +29,10 @@ var _math = require("../utils/math");
 
 var _values = require("../utils/values");
 
+var _hStack = require("../h-stack");
+
+var _spacer = require("../spacer");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -38,12 +48,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
-function UnforwardedNumberControl(_ref, ref) {
+const noop = () => {};
+
+function UnforwardedNumberControl(_ref, forwardedRef) {
   let {
     __unstableStateReducer: stateReducerProp,
     className,
     dragDirection = 'n',
     hideHTMLArrows = false,
+    spinControls = 'native',
     isDragEnabled = true,
     isShiftStepEnabled = true,
     label,
@@ -54,8 +67,23 @@ function UnforwardedNumberControl(_ref, ref) {
     step = 1,
     type: typeProp = 'number',
     value: valueProp,
+    size = 'default',
+    suffix,
+    onChange = noop,
     ...props
   } = _ref;
+
+  if (hideHTMLArrows) {
+    (0, _deprecated.default)('hideHTMLArrows', {
+      alternative: 'spinControls="none"',
+      since: '6.2',
+      version: '6.3'
+    });
+    spinControls = 'none';
+  }
+
+  const inputRef = (0, _element.useRef)();
+  const mergedRef = (0, _compose.useMergeRefs)([inputRef, forwardedRef]);
   const isStepAny = step === 'any';
   const baseStep = isStepAny ? 1 : (0, _values.ensureNumber)(step);
   const baseValue = (0, _math.roundClamp)(0, min, max, baseStep);
@@ -67,6 +95,21 @@ function UnforwardedNumberControl(_ref, ref) {
 
   const autoComplete = typeProp === 'number' ? 'off' : undefined;
   const classes = (0, _classnames.default)('components-number-control', className);
+
+  const spinValue = (value, direction, event) => {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    const shift = (event === null || event === void 0 ? void 0 : event.shiftKey) && isShiftStepEnabled;
+    const delta = shift ? (0, _values.ensureNumber)(shiftStep) * baseStep : baseStep;
+    let nextValue = (0, _values.isValueEmpty)(value) ? baseValue : value;
+
+    if (direction === 'up') {
+      nextValue = (0, _math.add)(nextValue, delta);
+    } else if (direction === 'down') {
+      nextValue = (0, _math.subtract)(nextValue, delta);
+    }
+
+    return constrainValue(nextValue, shift ? delta : undefined);
+  };
   /**
    * "Middleware" function that intercepts updates from InputControl.
    * This allows us to tap into actions to transform the (next) state for
@@ -75,6 +118,7 @@ function UnforwardedNumberControl(_ref, ref) {
    * @return The updated state to apply to InputControl
    */
 
+
   const numberControlStateReducer = (state, action) => {
     const nextState = { ...state
     };
@@ -89,24 +133,8 @@ function UnforwardedNumberControl(_ref, ref) {
      */
 
     if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
-      const enableShift = (event === null || event === void 0 ? void 0 : event.shiftKey) && isShiftStepEnabled;
-      const incrementalValue = enableShift ? (0, _values.ensureNumber)(shiftStep) * baseStep : baseStep;
-      let nextValue = (0, _values.isValueEmpty)(currentValue) ? baseValue : currentValue;
-
-      if (event !== null && event !== void 0 && event.preventDefault) {
-        event.preventDefault();
-      }
-
-      if (type === inputControlActionTypes.PRESS_UP) {
-        nextValue = (0, _math.add)(nextValue, incrementalValue);
-      }
-
-      if (type === inputControlActionTypes.PRESS_DOWN) {
-        nextValue = (0, _math.subtract)(nextValue, incrementalValue);
-      } // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
-
-
-      nextState.value = constrainValue(nextValue, enableShift ? incrementalValue : undefined);
+      // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
+      nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? 'up' : 'down', event);
     }
     /**
      * Handles drag to update events
@@ -167,18 +195,26 @@ function UnforwardedNumberControl(_ref, ref) {
     return nextState;
   };
 
+  const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {
+    // Set event.target to the <input> so that consumers can use
+    // e.g. event.target.validity.
+    event: { ...event,
+      target: inputRef.current
+    }
+  });
+
   return (0, _element.createElement)(_numberControlStyles.Input, (0, _extends2.default)({
     autoComplete: autoComplete,
     inputMode: "numeric"
   }, props, {
     className: classes,
     dragDirection: dragDirection,
-    hideHTMLArrows: hideHTMLArrows,
+    hideHTMLArrows: spinControls !== 'native',
     isDragEnabled: isDragEnabled,
     label: label,
     max: max,
     min: min,
-    ref: ref,
+    ref: mergedRef,
     required: required,
     step: step,
     type: typeProp // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
@@ -189,7 +225,31 @@ function UnforwardedNumberControl(_ref, ref) {
 
       const baseState = numberControlStateReducer(state, action);
       return (_stateReducerProp = stateReducerProp === null || stateReducerProp === void 0 ? void 0 : stateReducerProp(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;
-    }
+    },
+    size: size,
+    suffix: spinControls === 'custom' ? (0, _element.createElement)(_element.Fragment, null, suffix, (0, _element.createElement)(_spacer.Spacer, {
+      marginBottom: 0,
+      marginRight: 2
+    }, (0, _element.createElement)(_hStack.HStack, {
+      spacing: 1
+    }, (0, _element.createElement)(_numberControlStyles.SpinButton, {
+      icon: _icons.plus,
+      isSmall: true,
+      "aria-hidden": "true",
+      "aria-label": (0, _i18n.__)('Increment'),
+      tabIndex: -1,
+      onClick: buildSpinButtonClickHandler('up'),
+      size: size
+    }), (0, _element.createElement)(_numberControlStyles.SpinButton, {
+      icon: _icons.reset,
+      isSmall: true,
+      "aria-hidden": "true",
+      "aria-label": (0, _i18n.__)('Decrement'),
+      tabIndex: -1,
+      onClick: buildSpinButtonClickHandler('down'),
+      size: size
+    })))) : suffix,
+    onChange: onChange
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/number-control/index.tsx"],"names":["UnforwardedNumberControl","ref","__unstableStateReducer","stateReducerProp","className","dragDirection","hideHTMLArrows","isDragEnabled","isShiftStepEnabled","label","max","Infinity","min","required","shiftStep","step","type","typeProp","value","valueProp","props","isStepAny","baseStep","baseValue","constrainValue","stepOverride","Math","autoComplete","undefined","classes","numberControlStateReducer","state","action","nextState","payload","event","currentValue","inputControlActionTypes","PRESS_UP","PRESS_DOWN","enableShift","shiftKey","incrementalValue","nextValue","preventDefault","DRAG","x","y","delta","modifier","directionModifier","ceil","abs","sign","distance","PRESS_ENTER","COMMIT","applyEmptyValue","baseState","NumberControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Input } from './styles/number-control-styles';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { add, subtract, roundClamp } from '../utils/math';\nimport { ensureNumber, isValueEmpty } from '../utils/values';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { NumberControlProps } from './types';\n\nfunction UnforwardedNumberControl(\n\t{\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tclassName,\n\t\tdragDirection = 'n',\n\t\thideHTMLArrows = false,\n\t\tisDragEnabled = true,\n\t\tisShiftStepEnabled = true,\n\t\tlabel,\n\t\tmax = Infinity,\n\t\tmin = -Infinity,\n\t\trequired = false,\n\t\tshiftStep = 10,\n\t\tstep = 1,\n\t\ttype: typeProp = 'number',\n\t\tvalue: valueProp,\n\t\t...props\n\t}: WordPressComponentProps< NumberControlProps, 'input', false >,\n\tref: ForwardedRef< any >\n) {\n\tconst isStepAny = step === 'any';\n\tconst baseStep = isStepAny ? 1 : ensureNumber( step );\n\tconst baseValue = roundClamp( 0, min, max, baseStep );\n\tconst constrainValue = (\n\t\tvalue: number | string,\n\t\tstepOverride?: number\n\t) => {\n\t\t// When step is \"any\" clamp the value, otherwise round and clamp it.\n\t\treturn isStepAny\n\t\t\t? Math.min( max, Math.max( min, ensureNumber( value ) ) )\n\t\t\t: roundClamp( value, min, max, stepOverride ?? baseStep );\n\t};\n\n\tconst autoComplete = typeProp === 'number' ? 'off' : undefined;\n\tconst classes = classNames( 'components-number-control', className );\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst numberControlStateReducer: NumberControlProps[ '__unstableStateReducer' ] =\n\t\t( state, action ) => {\n\t\t\tconst nextState = { ...state };\n\n\t\t\tconst { type, payload } = action;\n\t\t\tconst event = payload.event;\n\t\t\tconst currentValue = nextState.value;\n\n\t\t\t/**\n\t\t\t * Handles custom UP and DOWN Keyboard events\n\t\t\t */\n\t\t\tif (\n\t\t\t\ttype === inputControlActionTypes.PRESS_UP ||\n\t\t\t\ttype === inputControlActionTypes.PRESS_DOWN\n\t\t\t) {\n\t\t\t\tconst enableShift =\n\t\t\t\t\t( event as KeyboardEvent | undefined )?.shiftKey &&\n\t\t\t\t\tisShiftStepEnabled;\n\n\t\t\t\tconst incrementalValue = enableShift\n\t\t\t\t\t? ensureNumber( shiftStep ) * baseStep\n\t\t\t\t\t: baseStep;\n\t\t\t\tlet nextValue = isValueEmpty( currentValue )\n\t\t\t\t\t? baseValue\n\t\t\t\t\t: currentValue;\n\n\t\t\t\tif ( event?.preventDefault ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\n\t\t\t\tif ( type === inputControlActionTypes.PRESS_UP ) {\n\t\t\t\t\tnextValue = add( nextValue, incrementalValue );\n\t\t\t\t}\n\n\t\t\t\tif ( type === inputControlActionTypes.PRESS_DOWN ) {\n\t\t\t\t\tnextValue = subtract( nextValue, incrementalValue );\n\t\t\t\t}\n\n\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\t\tnextState.value = constrainValue(\n\t\t\t\t\tnextValue,\n\t\t\t\t\tenableShift ? incrementalValue : undefined\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Handles drag to update events\n\t\t\t */\n\t\t\tif ( type === inputControlActionTypes.DRAG && isDragEnabled ) {\n\t\t\t\t// @ts-expect-error TODO: See if reducer actions can be typed better\n\t\t\t\tconst [ x, y ] = payload.delta;\n\t\t\t\t// @ts-expect-error TODO: See if reducer actions can be typed better\n\t\t\t\tconst enableShift = payload.shiftKey && isShiftStepEnabled;\n\t\t\t\tconst modifier = enableShift\n\t\t\t\t\t? ensureNumber( shiftStep ) * baseStep\n\t\t\t\t\t: baseStep;\n\n\t\t\t\tlet directionModifier;\n\t\t\t\tlet delta;\n\n\t\t\t\tswitch ( dragDirection ) {\n\t\t\t\t\tcase 'n':\n\t\t\t\t\t\tdelta = y;\n\t\t\t\t\t\tdirectionModifier = -1;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase 'e':\n\t\t\t\t\t\tdelta = x;\n\t\t\t\t\t\tdirectionModifier = isRTL() ? -1 : 1;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase 's':\n\t\t\t\t\t\tdelta = y;\n\t\t\t\t\t\tdirectionModifier = 1;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase 'w':\n\t\t\t\t\t\tdelta = x;\n\t\t\t\t\t\tdirectionModifier = isRTL() ? 1 : -1;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif ( delta !== 0 ) {\n\t\t\t\t\tdelta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );\n\t\t\t\t\tconst distance = delta * modifier * directionModifier;\n\n\t\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\t\t\tnextState.value = constrainValue(\n\t\t\t\t\t\t// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n\t\t\t\t\t\tadd( currentValue, distance ),\n\t\t\t\t\t\tenableShift ? modifier : undefined\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Handles commit (ENTER key press or blur)\n\t\t\t */\n\t\t\tif (\n\t\t\t\ttype === inputControlActionTypes.PRESS_ENTER ||\n\t\t\t\ttype === inputControlActionTypes.COMMIT\n\t\t\t) {\n\t\t\t\tconst applyEmptyValue =\n\t\t\t\t\trequired === false && currentValue === '';\n\n\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\t\tnextState.value = applyEmptyValue\n\t\t\t\t\t? currentValue\n\t\t\t\t\t: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n\t\t\t\t\t  constrainValue( currentValue );\n\t\t\t}\n\n\t\t\treturn nextState;\n\t\t};\n\n\treturn (\n\t\t<Input\n\t\t\tautoComplete={ autoComplete }\n\t\t\tinputMode=\"numeric\"\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdragDirection={ dragDirection }\n\t\t\thideHTMLArrows={ hideHTMLArrows }\n\t\t\tisDragEnabled={ isDragEnabled }\n\t\t\tlabel={ label }\n\t\t\tmax={ max }\n\t\t\tmin={ min }\n\t\t\tref={ ref }\n\t\t\trequired={ required }\n\t\t\tstep={ step }\n\t\t\ttype={ typeProp }\n\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\tvalue={ valueProp }\n\t\t\t__unstableStateReducer={ ( state, action ) => {\n\t\t\t\tconst baseState = numberControlStateReducer( state, action );\n\t\t\t\treturn stateReducerProp?.( baseState, action ) ?? baseState;\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport const NumberControl = forwardRef( UnforwardedNumberControl );\n\nexport default NumberControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/number-control/index.tsx"],"names":["noop","UnforwardedNumberControl","forwardedRef","__unstableStateReducer","stateReducerProp","className","dragDirection","hideHTMLArrows","spinControls","isDragEnabled","isShiftStepEnabled","label","max","Infinity","min","required","shiftStep","step","type","typeProp","value","valueProp","size","suffix","onChange","props","alternative","since","version","inputRef","mergedRef","isStepAny","baseStep","baseValue","constrainValue","stepOverride","Math","autoComplete","undefined","classes","spinValue","direction","event","preventDefault","shift","shiftKey","delta","nextValue","numberControlStateReducer","state","action","nextState","payload","currentValue","inputControlActionTypes","PRESS_UP","PRESS_DOWN","DRAG","x","y","enableShift","modifier","directionModifier","ceil","abs","sign","distance","PRESS_ENTER","COMMIT","applyEmptyValue","buildSpinButtonClickHandler","String","target","current","baseState","plusIcon","resetIcon","NumberControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classNames from 'classnames';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Input, SpinButton } from './styles/number-control-styles';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { add, subtract, roundClamp } from '../utils/math';\nimport { ensureNumber, isValueEmpty } from '../utils/values';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\nimport type { NumberControlProps } from './types';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\n\nconst noop = () => {};\n\nfunction UnforwardedNumberControl(\n\t{\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tclassName,\n\t\tdragDirection = 'n',\n\t\thideHTMLArrows = false,\n\t\tspinControls = 'native',\n\t\tisDragEnabled = true,\n\t\tisShiftStepEnabled = true,\n\t\tlabel,\n\t\tmax = Infinity,\n\t\tmin = -Infinity,\n\t\trequired = false,\n\t\tshiftStep = 10,\n\t\tstep = 1,\n\t\ttype: typeProp = 'number',\n\t\tvalue: valueProp,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\tonChange = noop,\n\t\t...props\n\t}: WordPressComponentProps< NumberControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tif ( hideHTMLArrows ) {\n\t\tdeprecated( 'hideHTMLArrows', {\n\t\t\talternative: 'spinControls=\"none\"',\n\t\t\tsince: '6.2',\n\t\t\tversion: '6.3',\n\t\t} );\n\t\tspinControls = 'none';\n\t}\n\n\tconst inputRef = useRef< HTMLInputElement >();\n\tconst mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );\n\n\tconst isStepAny = step === 'any';\n\tconst baseStep = isStepAny ? 1 : ensureNumber( step );\n\tconst baseValue = roundClamp( 0, min, max, baseStep );\n\tconst constrainValue = (\n\t\tvalue: number | string,\n\t\tstepOverride?: number\n\t) => {\n\t\t// When step is \"any\" clamp the value, otherwise round and clamp it.\n\t\treturn isStepAny\n\t\t\t? Math.min( max, Math.max( min, ensureNumber( value ) ) )\n\t\t\t: roundClamp( value, min, max, stepOverride ?? baseStep );\n\t};\n\n\tconst autoComplete = typeProp === 'number' ? 'off' : undefined;\n\tconst classes = classNames( 'components-number-control', className );\n\n\tconst spinValue = (\n\t\tvalue: string | number | undefined,\n\t\tdirection: 'up' | 'down',\n\t\tevent: KeyboardEvent | MouseEvent | undefined\n\t) => {\n\t\tevent?.preventDefault();\n\t\tconst shift = event?.shiftKey && isShiftStepEnabled;\n\t\tconst delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;\n\t\tlet nextValue = isValueEmpty( value ) ? baseValue : value;\n\t\tif ( direction === 'up' ) {\n\t\t\tnextValue = add( nextValue, delta );\n\t\t} else if ( direction === 'down' ) {\n\t\t\tnextValue = subtract( nextValue, delta );\n\t\t}\n\t\treturn constrainValue( nextValue, shift ? delta : undefined );\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst numberControlStateReducer: NumberControlProps[ '__unstableStateReducer' ] =\n\t\t( state, action ) => {\n\t\t\tconst nextState = { ...state };\n\n\t\t\tconst { type, payload } = action;\n\t\t\tconst event = payload.event;\n\t\t\tconst currentValue = nextState.value;\n\n\t\t\t/**\n\t\t\t * Handles custom UP and DOWN Keyboard events\n\t\t\t */\n\t\t\tif (\n\t\t\t\ttype === inputControlActionTypes.PRESS_UP ||\n\t\t\t\ttype === inputControlActionTypes.PRESS_DOWN\n\t\t\t) {\n\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\t\tnextState.value = spinValue(\n\t\t\t\t\tcurrentValue,\n\t\t\t\t\ttype === inputControlActionTypes.PRESS_UP ? 'up' : 'down',\n\t\t\t\t\tevent as KeyboardEvent | undefined\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Handles drag to update events\n\t\t\t */\n\t\t\tif ( type === inputControlActionTypes.DRAG && isDragEnabled ) {\n\t\t\t\t// @ts-expect-error TODO: See if reducer actions can be typed better\n\t\t\t\tconst [ x, y ] = payload.delta;\n\t\t\t\t// @ts-expect-error TODO: See if reducer actions can be typed better\n\t\t\t\tconst enableShift = payload.shiftKey && isShiftStepEnabled;\n\t\t\t\tconst modifier = enableShift\n\t\t\t\t\t? ensureNumber( shiftStep ) * baseStep\n\t\t\t\t\t: baseStep;\n\n\t\t\t\tlet directionModifier;\n\t\t\t\tlet delta;\n\n\t\t\t\tswitch ( dragDirection ) {\n\t\t\t\t\tcase 'n':\n\t\t\t\t\t\tdelta = y;\n\t\t\t\t\t\tdirectionModifier = -1;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase 'e':\n\t\t\t\t\t\tdelta = x;\n\t\t\t\t\t\tdirectionModifier = isRTL() ? -1 : 1;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase 's':\n\t\t\t\t\t\tdelta = y;\n\t\t\t\t\t\tdirectionModifier = 1;\n\t\t\t\t\t\tbreak;\n\n\t\t\t\t\tcase 'w':\n\t\t\t\t\t\tdelta = x;\n\t\t\t\t\t\tdirectionModifier = isRTL() ? 1 : -1;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tif ( delta !== 0 ) {\n\t\t\t\t\tdelta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );\n\t\t\t\t\tconst distance = delta * modifier * directionModifier;\n\n\t\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\t\t\tnextState.value = constrainValue(\n\t\t\t\t\t\t// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n\t\t\t\t\t\tadd( currentValue, distance ),\n\t\t\t\t\t\tenableShift ? modifier : undefined\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Handles commit (ENTER key press or blur)\n\t\t\t */\n\t\t\tif (\n\t\t\t\ttype === inputControlActionTypes.PRESS_ENTER ||\n\t\t\t\ttype === inputControlActionTypes.COMMIT\n\t\t\t) {\n\t\t\t\tconst applyEmptyValue =\n\t\t\t\t\trequired === false && currentValue === '';\n\n\t\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\t\tnextState.value = applyEmptyValue\n\t\t\t\t\t? currentValue\n\t\t\t\t\t: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n\t\t\t\t\t  constrainValue( currentValue );\n\t\t\t}\n\n\t\t\treturn nextState;\n\t\t};\n\n\tconst buildSpinButtonClickHandler =\n\t\t( direction: 'up' | 'down' ) =>\n\t\t( event: MouseEvent< HTMLButtonElement > ) =>\n\t\t\tonChange( String( spinValue( valueProp, direction, event ) ), {\n\t\t\t\t// Set event.target to the <input> so that consumers can use\n\t\t\t\t// e.g. event.target.validity.\n\t\t\t\tevent: {\n\t\t\t\t\t...event,\n\t\t\t\t\ttarget: inputRef.current!,\n\t\t\t\t},\n\t\t\t} );\n\n\treturn (\n\t\t<Input\n\t\t\tautoComplete={ autoComplete }\n\t\t\tinputMode=\"numeric\"\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdragDirection={ dragDirection }\n\t\t\thideHTMLArrows={ spinControls !== 'native' }\n\t\t\tisDragEnabled={ isDragEnabled }\n\t\t\tlabel={ label }\n\t\t\tmax={ max }\n\t\t\tmin={ min }\n\t\t\tref={ mergedRef }\n\t\t\trequired={ required }\n\t\t\tstep={ step }\n\t\t\ttype={ typeProp }\n\t\t\t// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n\t\t\tvalue={ valueProp }\n\t\t\t__unstableStateReducer={ ( state, action ) => {\n\t\t\t\tconst baseState = numberControlStateReducer( state, action );\n\t\t\t\treturn stateReducerProp?.( baseState, action ) ?? baseState;\n\t\t\t} }\n\t\t\tsize={ size }\n\t\t\tsuffix={\n\t\t\t\tspinControls === 'custom' ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t\t<Spacer marginBottom={ 0 } marginRight={ 2 }>\n\t\t\t\t\t\t\t<HStack spacing={ 1 }>\n\t\t\t\t\t\t\t\t<SpinButton\n\t\t\t\t\t\t\t\t\ticon={ plusIcon }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Increment' ) }\n\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\tonClick={ buildSpinButtonClickHandler(\n\t\t\t\t\t\t\t\t\t\t'up'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SpinButton\n\t\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Decrement' ) }\n\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\tonClick={ buildSpinButtonClickHandler(\n\t\t\t\t\t\t\t\t\t\t'down'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\tsuffix\n\t\t\t\t)\n\t\t\t}\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nexport const NumberControl = forwardRef( UnforwardedNumberControl );\n\nexport default NumberControl;\n"]}

package/build/number-control/styles/number-control-styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = void 0;
+exports.SpinButton = exports.Input = void 0;
 
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 
@@ -13,6 +13,12 @@ var _react = require("@emotion/react");
 
 var _inputControl = _interopRequireDefault(require("../../input-control"));
 
+var _utils = require("../../utils");
+
+var _button = _interopRequireDefault(require("../../button"));
+
+var _space = require("../../ui/utils/space");
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -21,7 +27,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "jl4rev-htmlArrowStyles",
   styles: "input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}input[type='number']{-moz-appearance:textfield;};label:htmlArrowStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL251bWJlci1jb250cm9sL3N0eWxlcy9udW1iZXItY29udHJvbC1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBAdHMtbm9jaGVja1xuLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHJldHVybiBgYDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQlciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9udW1iZXItY29udHJvbC9zdHlsZXMvbnVtYmVyLWNvbnRyb2wtc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQHRzLW5vY2hlY2tcbi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5jb25zdCBodG1sQXJyb3dTdHlsZXMgPSAoIHsgaGlkZUhUTUxBcnJvd3MgfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG5cbmNvbnN0IHNwaW5CdXR0b25TaXplU3R5bGVzID0gKCB7IHNpemUgfSApID0+IHtcblx0aWYgKCBzaXplICE9PSAnc21hbGwnICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRtaW4td2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRoZWlnaHQ6ICR7IHNwYWNlKCA1ICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBTcGluQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHQkeyBzcGluQnV0dG9uU2l6ZVN0eWxlcyB9XG5cdH1cbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -29,15 +35,39 @@ const htmlArrowStyles = _ref2 => {
   let {
     hideHTMLArrows
   } = _ref2;
-  if (!hideHTMLArrows) return ``;
+
+  if (!hideHTMLArrows) {
+    return ``;
+  }
+
   return _ref;
 };
 
 const Input = ( /*#__PURE__*/0, _base.default)(_inputControl.default, process.env.NODE_ENV === "production" ? {
-  target: "ep48uk90"
+  target: "ep48uk91"
 } : {
-  target: "ep48uk90",
+  target: "ep48uk91",
   label: "Input"
-})(htmlArrowStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQjJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEB0cy1ub2NoZWNrXG4vKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgSW5wdXRDb250cm9sIGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wnO1xuXG5jb25zdCBodG1sQXJyb3dTdHlsZXMgPSAoIHsgaGlkZUhUTUxBcnJvd3MgfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkgcmV0dXJuIGBgO1xuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG4iXX0= */"));
+})(htmlArrowStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQzJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEB0cy1ub2NoZWNrXG4vKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uL2J1dHRvbic7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuXG5jb25zdCBzcGluQnV0dG9uU2l6ZVN0eWxlcyA9ICggeyBzaXplIH0gKSA9PiB7XG5cdGlmICggc2l6ZSAhPT0gJ3NtYWxsJyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdHdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0bWluLXdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNSApIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgU3BpbkJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uIClgXG5cdCYmJiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdFx0JHsgc3BpbkJ1dHRvblNpemVTdHlsZXMgfVxuXHR9XG5gO1xuIl19 */"));
 exports.Input = Input;
+
+const spinButtonSizeStyles = _ref3 => {
+  let {
+    size
+  } = _ref3;
+
+  if (size !== 'small') {
+    return ``;
+  }
+
+  return /*#__PURE__*/(0, _react.css)("width:", (0, _space.space)(5), ";min-width:", (0, _space.space)(5), ";height:", (0, _space.space)(5), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:spinButtonSizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ1ciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9udW1iZXItY29udHJvbC9zdHlsZXMvbnVtYmVyLWNvbnRyb2wtc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQHRzLW5vY2hlY2tcbi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IElucHV0Q29udHJvbCBmcm9tICcuLi8uLi9pbnB1dC1jb250cm9sJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG5jb25zdCBodG1sQXJyb3dTdHlsZXMgPSAoIHsgaGlkZUhUTUxBcnJvd3MgfSApID0+IHtcblx0aWYgKCAhIGhpZGVIVE1MQXJyb3dzICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24sXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ106Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0LXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRtYXJnaW46IDAgIWltcG9ydGFudDtcblx0XHR9XG5cblx0XHRpbnB1dFt0eXBlPSdudW1iZXInXSB7XG5cdFx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblx0XHR9XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgSW5wdXQgPSBzdHlsZWQoIElucHV0Q29udHJvbCApYFxuXHQkeyBodG1sQXJyb3dTdHlsZXMgfTtcbmA7XG5cbmNvbnN0IHNwaW5CdXR0b25TaXplU3R5bGVzID0gKCB7IHNpemUgfSApID0+IHtcblx0aWYgKCBzaXplICE9PSAnc21hbGwnICkge1xuXHRcdHJldHVybiBgYDtcblx0fVxuXG5cdHJldHVybiBjc3NgXG5cdFx0d2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRtaW4td2lkdGg6ICR7IHNwYWNlKCA1ICkgfTtcblx0XHRoZWlnaHQ6ICR7IHNwYWNlKCA1ICkgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBTcGluQnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0JiYmJiYge1xuXHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHQkeyBzcGluQnV0dG9uU2l6ZVN0eWxlcyB9XG5cdH1cbmA7XG4iXX0= */");
+};
+
+const SpinButton = ( /*#__PURE__*/0, _base.default)(_button.default, process.env.NODE_ENV === "production" ? {
+  target: "ep48uk90"
+} : {
+  target: "ep48uk90",
+  label: "SpinButton"
+})("&&&&&{color:", _utils.COLORS.ui.theme, ";", spinButtonSizeStyles, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRDBDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbnVtYmVyLWNvbnRyb2wvc3R5bGVzL251bWJlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8vIEB0cy1ub2NoZWNrXG4vKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBJbnB1dENvbnRyb2wgZnJvbSAnLi4vLi4vaW5wdXQtY29udHJvbCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgQnV0dG9uIGZyb20gJy4uLy4uL2J1dHRvbic7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcblxuY29uc3QgaHRtbEFycm93U3R5bGVzID0gKCB7IGhpZGVIVE1MQXJyb3dzIH0gKSA9PiB7XG5cdGlmICggISBoaWRlSFRNTEFycm93cyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LW91dGVyLXNwaW4tYnV0dG9uLFxuXHRcdGlucHV0W3R5cGU9J251bWJlciddOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uIHtcblx0XHRcdC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZSAhaW1wb3J0YW50O1xuXHRcdFx0bWFyZ2luOiAwICFpbXBvcnRhbnQ7XG5cdFx0fVxuXG5cdFx0aW5wdXRbdHlwZT0nbnVtYmVyJ10ge1xuXHRcdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IElucHV0ID0gc3R5bGVkKCBJbnB1dENvbnRyb2wgKWBcblx0JHsgaHRtbEFycm93U3R5bGVzIH07XG5gO1xuXG5jb25zdCBzcGluQnV0dG9uU2l6ZVN0eWxlcyA9ICggeyBzaXplIH0gKSA9PiB7XG5cdGlmICggc2l6ZSAhPT0gJ3NtYWxsJyApIHtcblx0XHRyZXR1cm4gYGA7XG5cdH1cblxuXHRyZXR1cm4gY3NzYFxuXHRcdHdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0bWluLXdpZHRoOiAkeyBzcGFjZSggNSApIH07XG5cdFx0aGVpZ2h0OiAkeyBzcGFjZSggNSApIH07XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgU3BpbkJ1dHRvbiA9IHN0eWxlZCggQnV0dG9uIClgXG5cdCYmJiYmIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdFx0JHsgc3BpbkJ1dHRvblNpemVTdHlsZXMgfVxuXHR9XG5gO1xuIl19 */"));
+exports.SpinButton = SpinButton;
 //# sourceMappingURL=number-control-styles.js.map

package/build/number-control/styles/number-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/number-control/styles/number-control-styles.js"],"names":["htmlArrowStyles","hideHTMLArrows","Input","InputControl"],"mappings":";;;;;;;;;;;AAIA;;AAKA;;;;;;;;;;;;;;AAEA,MAAMA,eAAe,GAAG,SAA0B;AAAA,MAAxB;AAAEC,IAAAA;AAAF,GAAwB;AACjD,MAAK,CAAEA,cAAP,EAAwB,OAAQ,EAAR;AAExB;AAWA,CAdD;;AAgBO,MAAMC,KAAK,GAAG,iCAAQC,qBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACdH,eADc,yzCAAX","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport InputControl from '../../input-control';\n\nconst htmlArrowStyles = ( { hideHTMLArrows } ) => {\n\tif ( ! hideHTMLArrows ) return ``;\n\n\treturn css`\n\t\tinput[type='number']::-webkit-outer-spin-button,\n\t\tinput[type='number']::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none !important;\n\t\t\tmargin: 0 !important;\n\t\t}\n\n\t\tinput[type='number'] {\n\t\t\t-moz-appearance: textfield;\n\t\t}\n\t`;\n};\n\nexport const Input = styled( InputControl )`\n\t${ htmlArrowStyles };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/number-control/styles/number-control-styles.js"],"names":["htmlArrowStyles","hideHTMLArrows","Input","InputControl","spinButtonSizeStyles","size","css","SpinButton","Button","COLORS","ui","theme"],"mappings":";;;;;;;;;;;AAIA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,MAAMA,eAAe,GAAG,SAA0B;AAAA,MAAxB;AAAEC,IAAAA;AAAF,GAAwB;;AACjD,MAAK,CAAEA,cAAP,EAAwB;AACvB,WAAQ,EAAR;AACA;;AAED;AAWA,CAhBD;;AAkBO,MAAMC,KAAK,GAAG,iCAAQC,qBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACdH,eADc,i8DAAX;;;AAIP,MAAMI,oBAAoB,GAAG,SAAgB;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;;AAC5C,MAAKA,IAAI,KAAK,OAAd,EAAwB;AACvB,WAAQ,EAAR;AACA;;AAED,0BAAOC,UAAP,YACW,kBAAO,CAAP,CADX,iBAEe,kBAAO,CAAP,CAFf,cAGY,kBAAO,CAAP,CAHZ;AAKA,CAVD;;AAYO,MAAMC,UAAU,GAAG,iCAAQC,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,iBAEXC,cAAOC,EAAP,CAAUC,KAFC,OAGlBP,oBAHkB,k8DAAhB","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport InputControl from '../../input-control';\nimport { COLORS } from '../../utils';\nimport Button from '../../button';\nimport { space } from '../../ui/utils/space';\n\nconst htmlArrowStyles = ( { hideHTMLArrows } ) => {\n\tif ( ! hideHTMLArrows ) {\n\t\treturn ``;\n\t}\n\n\treturn css`\n\t\tinput[type='number']::-webkit-outer-spin-button,\n\t\tinput[type='number']::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none !important;\n\t\t\tmargin: 0 !important;\n\t\t}\n\n\t\tinput[type='number'] {\n\t\t\t-moz-appearance: textfield;\n\t\t}\n\t`;\n};\n\nexport const Input = styled( InputControl )`\n\t${ htmlArrowStyles };\n`;\n\nconst spinButtonSizeStyles = ( { size } ) => {\n\tif ( size !== 'small' ) {\n\t\treturn ``;\n\t}\n\n\treturn css`\n\t\twidth: ${ space( 5 ) };\n\t\tmin-width: ${ space( 5 ) };\n\t\theight: ${ space( 5 ) };\n\t`;\n};\n\nexport const SpinButton = styled( Button )`\n\t&&&&& {\n\t\tcolor: ${ COLORS.ui.theme };\n\t\t${ spinButtonSizeStyles }\n\t}\n`;\n"]}

package/build/palette-edit/index.js

@@ -204,7 +204,9 @@ function PaletteEditListView(_ref4) {
         const newElements = elementsReference.current.filter(element => !isTemporaryElement(slugPrefix, element));
         onChange(newElements.length ? newElements : undefined);
       }
-    };
+    }; // Disable reason: adding the missing dependency here would cause breaking changes that will require
+    // a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const debounceOnChange = (0, _compose.useDebounce)(onChange, 100);
   return (0, _element.createElement)(_vStack.VStack, {

package/build/palette-edit/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/palette-edit/index.js"],"names":["DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","Option","canOnlyChangeValues","element","isEditing","onStartEditing","onRemove","onStopEditing","isGradient","focusOutsideProps","gradient","color","undefined","style","cursor","background","name","nextName","lineSolid","newColor","newGradient","isTemporaryElement","regex","test","DEFAULT_GRADIENT","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","index","newElements","filter","length","debounceOnChange","map","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","plus","tempOptionName","moreVertical","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label } ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param {string} elements   An array of color palette items.\n * @param {string} slugPrefix The slug prefix used to match the element slug.\n *\n * @return {string} A unique name for a palette item.\n */\nexport function getNameForPosition( elements, slugPrefix ) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction Option( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t  } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 20 }\n\t\t\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isGradient && (\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isGradient && (\n\t\t\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newGradient ) =>\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement( slugPrefix, { slug, color, gradient } ) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current.some( ( element, index ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element, index )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading>{ paletteLabel }</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...elements,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t...( isGradient\n\t\t\t\t\t\t\t\t\t\t\t? { gradient: DEFAULT_GRADIENT }\n\t\t\t\t\t\t\t\t\t\t\t: { color: DEFAULT_COLOR } ),\n\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Edit gradients' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Edit colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/palette-edit/index.js"],"names":["DEFAULT_COLOR","NameInput","value","onChange","label","getNameForPosition","elements","slugPrefix","temporaryNameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","Option","canOnlyChangeValues","element","isEditing","onStartEditing","onRemove","onStopEditing","isGradient","focusOutsideProps","gradient","color","undefined","style","cursor","background","name","nextName","lineSolid","newColor","newGradient","isTemporaryElement","regex","test","DEFAULT_GRADIENT","PaletteEditListView","editingElement","setEditingElement","elementsReference","current","some","index","newElements","filter","length","debounceOnChange","map","newElement","currentElement","currentIndex","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","plus","tempOptionName","moreVertical","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tPaletteHStackHeader,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label } ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/**\n * Returns a temporary name for a palette item in the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs for temporary names.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param {string} elements   An array of color palette items.\n * @param {string} slugPrefix The slug prefix used to match the element slug.\n *\n * @return {string} A unique name for a palette item.\n */\nexport function getNameForPosition( elements, slugPrefix ) {\n\tconst temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( temporaryNameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn sprintf(\n\t\t/* translators: %s: is a temporary id for a custom color */\n\t\t__( 'Color %s' ),\n\t\tposition\n\t);\n}\n\nfunction Option( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing\n\t\t\t\t? { ...focusOutsideProps }\n\t\t\t\t: {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t},\n\t\t\t\t  } ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<IndicatorStyled\n\t\t\t\t\t\tstyle={ { background: value, color: 'transparent' } }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: slugPrefix + kebabCase( nextName ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>{ element.name }</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 20 }\n\t\t\t\t\tclassName=\"components-palette-edit__popover\"\n\t\t\t\t>\n\t\t\t\t\t{ ! isGradient && (\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tcolor={ value }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tcolor: newColor,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isGradient && (\n\t\t\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ ( newGradient ) =>\n\t\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction isTemporaryElement( slugPrefix, { slug, color, gradient } ) {\n\tconst regex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\treturn (\n\t\tregex.test( slug ) &&\n\t\t( ( !! color && color === DEFAULT_COLOR ) ||\n\t\t\t( !! gradient && gradient === DEFAULT_GRADIENT ) )\n\t);\n}\n\nfunction PaletteEditListView( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n} ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif (\n\t\t\t\telementsReference.current.some( ( element, index ) =>\n\t\t\t\t\tisTemporaryElement( slugPrefix, element, index )\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tconst newElements = elementsReference.current.filter(\n\t\t\t\t\t( element ) => ! isTemporaryElement( slugPrefix, element )\n\t\t\t\t);\n\t\t\t\tonChange( newElements.length ? newElements : undefined );\n\t\t\t}\n\t\t};\n\t\t// Disable reason: adding the missing dependency here would cause breaking changes that will require\n\t\t// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n} ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<PaletteHStackHeader>\n\t\t\t\t<PaletteHeading>{ paletteLabel }</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst tempOptionName = getNameForPosition(\n\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t...elements,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t...( isGradient\n\t\t\t\t\t\t\t\t\t\t\t? { gradient: DEFAULT_GRADIENT }\n\t\t\t\t\t\t\t\t\t\t\t: { color: DEFAULT_COLOR } ),\n\t\t\t\t\t\t\t\t\t\tname: tempOptionName,\n\t\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\t\tkebabCase( tempOptionName ),\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing ||\n\t\t\t\t\t\t\t! canOnlyChangeValues ||\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Edit gradients' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Edit colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</PaletteHStackHeader>\n\t\t\t{ hasElements && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\t__nextHasNoMargin\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage }\n\t\t</PaletteEditStyles>\n\t);\n}\n"]}