@wordpress/components 28.5.0 → 28.7.0

package/build/circular-option-picker/circular-option-picker-option.js

@@ -11,7 +11,7 @@ var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _button = _interopRequireDefault(require("../button"));
-var _v = require("../composite/v2");
+var _composite = require("../composite");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -42,21 +42,27 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
-    compositeStore,
     ...additionalProps
   } = props;
-  const activeId = compositeStore.useState('activeId');
-  if (isSelected && !activeId) {
-    compositeStore.setActiveId(id);
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_v.CompositeItem, {
+  const {
+    setActiveId,
+    activeId
+  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
+  (0, _element.useEffect)(() => {
+    if (isSelected && !activeId) {
+      // The setTimeout call is necessary to make sure that this update
+      // doesn't get overridden by `Composite`'s internal logic, which picks
+      // an initial active item if one is not specifically set.
+      window.setTimeout(() => setActiveId?.(id), 0);
+    }
+  }, [isSelected, setActiveId, activeId, id]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Item, {
     render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
       ...additionalProps,
       role: "option",
       "aria-selected": !!isSelected,
       ref: forwardedRef
     }),
-    store: compositeStore,
     id: id
   });
 }
@@ -70,7 +76,7 @@ function Option({
 }) {
   const {
     baseId,
-    compositeStore
+    setActiveId
   } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
   const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
   const commonProps = {
@@ -78,9 +84,9 @@ function Option({
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = compositeStore ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
+  const isListbox = setActiveId !== undefined;
+  const optionControl = isListbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
     ...commonProps,
-    compositeStore: compositeStore,
     isSelected: isSelected
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsButton, {
     ...commonProps,

package/build/circular-option-picker/circular-option-picker-option.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_v","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","CompositeItem","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","isListbox","undefined","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, setActiveId } = useContext( CircularOptionPickerContext );\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/circular-option-picker/circular-option-picker.js

@@ -8,8 +8,9 @@ exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
-var _v = require("../composite/v2");
+var _composite = require("../composite");
 var _circularOptionPickerOption = require("./circular-option-picker-option");
 var _circularOptionPickerOptionGroup = require("./circular-option-picker-option-group");
 var _circularOptionPickerActions = require("./circular-option-picker-actions");
@@ -80,23 +81,24 @@ var _jsxRuntime = require("react/jsx-runtime");
     children,
     ...additionalProps
   } = props;
-  const compositeStore = (0, _v.useCompositeStore)({
-    focusLoop: loop,
-    rtl: (0, _i18n.isRTL)()
-  });
-  const compositeContext = {
+  const [activeId, setActiveId] = (0, _element.useState)(undefined);
+  const contextValue = (0, _element.useMemo)(() => ({
     baseId,
-    compositeStore
-  };
+    activeId,
+    setActiveId
+  }), [baseId, activeId, setActiveId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: className,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
-      value: compositeContext,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_v.Composite, {
+      value: contextValue,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite, {
         ...additionalProps,
         id: baseId,
-        store: compositeStore,
+        focusLoop: loop,
+        rtl: (0, _i18n.isRTL)(),
         role: "listbox",
+        activeId: activeId,
+        setActiveId: setActiveId,
         children: options
       }), children, actions]
     })
@@ -110,13 +112,14 @@ function ButtonsCircularOptionPicker(props) {
     baseId,
     ...additionalProps
   } = props;
+  const contextValue = (0, _element.useMemo)(() => ({
+    baseId
+  }), [baseId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...additionalProps,
     id: baseId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
-      value: {
-        baseId
-      },
+      value: contextValue,
       children: [options, children, actions]
     })
   });

package/build/circular-option-picker/circular-option-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_v","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","undefined","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeStore } from '../composite/v2';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst compositeStore = useCompositeStore( {\n\t\tfocusLoop: loop,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst compositeContext = {\n\t\tbaseId,\n\t\tcompositeStore,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tstore={ compositeStore }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ { baseId } }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_element","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","useState","undefined","contextValue","useMemo","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","focusLoop","rtl","isRTL","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ clsx( 'components-circular-option-picker', className ) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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","ignoreList":[]}

package/build/circular-option-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\nimport type { CompositeStore } from '../composite/v2';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeStore = CompositeStore;\nexport type CircularOptionPickerContextProps = {\n\tbaseId?: string;\n\tcompositeStore?: CircularOptionPickerCompositeStore;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerContextProps = {\n\tbaseId?: string;\n\tactiveId?: string | null | undefined;\n\tsetActiveId?: ( newId: string | null | undefined ) => void;\n};\n"],"mappings":"","ignoreList":[]}

package/build/clipboard-button/index.js

@@ -36,19 +36,19 @@ function ClipboardButton({
     since: '5.8',
     alternative: 'wp.compose.useCopyToClipboard'
   });
-  const timeoutId = (0, _element.useRef)();
+  const timeoutIdRef = (0, _element.useRef)();
   const ref = (0, _compose.useCopyToClipboard)(text, () => {
     onCopy();
-    if (timeoutId.current) {
-      clearTimeout(timeoutId.current);
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
     }
     if (onFinishCopy) {
-      timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
+      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);
     }
   });
   (0, _element.useEffect)(() => {
-    if (timeoutId.current) {
-      clearTimeout(timeoutId.current);
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
     }
   }, []);
   const classes = (0, _clsx.default)('components-clipboard-button', className);

package/build/clipboard-button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_deprecated","_button","_jsxRuntime","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutId","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","clsx","focusOnCopyEventTarget","event","target","focus","jsx","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = clsx( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA+B,IAAAK,WAAA,GAAAL,OAAA;AAf/B;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMM,OAAO,GAAG,IAAI;AAEL,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrE,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAmB,CAAC;EAC5C,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAER,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKO,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;IAEA,IAAKV,YAAY,EAAG;MACnBM,SAAS,CAACI,OAAO,GAAGE,UAAU,CAAE,MAAMZ,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEH,IAAAkB,kBAAS,EAAE,MAAM;IAChB,IAAKP,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,OAAO,GAAG,IAAAC,aAAI,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEhE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,oBACC,IAAAzB,WAAA,CAAA0B,GAAA,EAAC3B,OAAA,CAAA4B,OAAM;IAAA,GACDnB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB,sBAAwB;IAAAlB,QAAA,EAE/BA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_deprecated","_button","_jsxRuntime","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutIdRef","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","clsx","focusOnCopyEventTarget","event","target","focus","jsx","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutIdRef = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutIdRef.current ) {\n\t\t\tclearTimeout( timeoutIdRef.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutIdRef.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutIdRef.current ) {\n\t\t\tclearTimeout( timeoutIdRef.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = clsx( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA+B,IAAAK,WAAA,GAAAL,OAAA;AAf/B;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMM,OAAO,GAAG,IAAI;AAEL,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrE,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAAmB,CAAC;EAC/C,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAER,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKO,YAAY,CAACI,OAAO,EAAG;MAC3BC,YAAY,CAAEL,YAAY,CAACI,OAAQ,CAAC;IACrC;IAEA,IAAKV,YAAY,EAAG;MACnBM,YAAY,CAACI,OAAO,GAAGE,UAAU,CAAE,MAAMZ,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IACnE;EACD,CAAE,CAAC;EAEH,IAAAkB,kBAAS,EAAE,MAAM;IAChB,IAAKP,YAAY,CAACI,OAAO,EAAG;MAC3BC,YAAY,CAAEL,YAAY,CAACI,OAAQ,CAAC;IACrC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,OAAO,GAAG,IAAAC,aAAI,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEhE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,oBACC,IAAAzB,WAAA,CAAA0B,GAAA,EAAC3B,OAAA,CAAA4B,OAAM;IAAA,GACDnB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB,sBAAwB;IAAAlB,QAAA,EAE/BA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}

package/build/color-palette/utils.js

@@ -22,12 +22,24 @@ var _i18n = require("@wordpress/i18n");
  */
 
 (0, _colord.extend)([_names.default, _a11y.default]);
+
+/**
+ * Checks if a color value is a simple CSS color.
+ *
+ * @param value The color value to check.
+ * @return A boolean indicating whether the color value is a simple CSS color.
+ */
+const isSimpleCSSColor = value => {
+  const valueIsCssVariable = /var\(/.test(value !== null && value !== void 0 ? value : '');
+  const valueIsColorMix = /color-mix\(/.test(value !== null && value !== void 0 ? value : '');
+  return !valueIsCssVariable && !valueIsColorMix;
+};
 const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
   if (!currentValue) {
     return '';
   }
-  const currentValueIsCssVariable = /^var\(/.test(currentValue);
-  const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : (0, _colord.colord)(currentValue).toHex();
+  const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;
+  const normalizedCurrentValue = currentValueIsSimpleColor ? (0, _colord.colord)(currentValue).toHex() : currentValue;
 
   // Normalize format of `colors` to simplify the following loop
 
@@ -41,7 +53,7 @@ const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultipl
       name: colorName,
       color: colorValue
     } of paletteColors) {
-      const normalizedColorValue = currentValueIsCssVariable ? colorValue : (0, _colord.colord)(colorValue).toHex();
+      const normalizedColorValue = currentValueIsSimpleColor ? (0, _colord.colord)(colorValue).toHex() : colorValue;
       if (normalizedCurrentValue === normalizedColorValue) {
         return colorName;
       }
@@ -70,8 +82,7 @@ const isMultiplePaletteArray = arr => {
  */
 exports.isMultiplePaletteArray = isMultiplePaletteArray;
 const normalizeColorValue = (value, element) => {
-  const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');
-  if (!currentValueIsCssVariable || element === null) {
+  if (!value || !element || isSimpleCSSColor(value)) {
     return value;
   }
   const {

package/build/color-palette/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_i18n","extend","namesPlugin","a11yPlugin","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","colord","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","__","exports","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","value","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"sources":["@wordpress/components/src/color-palette/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tconst currentValueIsCssVariable = /^var\\(/.test( value ?? '' );\n\n\tif ( ! currentValueIsCssVariable || element === null ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAD,sBAAA,CAAAF,OAAA;AAKA,IAAAI,KAAA,GAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,IAAAK,cAAM,EAAE,CAAEC,cAAW,EAAEC,aAAU,CAAG,CAAC;AAE9B,MAAMC,gCAAgC,GAAGA,CAC/CC,YAA2C,EAC3CC,MAAqC,GAAG,EAAE,EAC1CC,oBAA6B,GAAG,KAAK,KACjC;EACJ,IAAK,CAAEF,YAAY,EAAG;IACrB,OAAO,EAAE;EACV;EAEA,MAAMG,yBAAyB,GAAG,QAAQ,CAACC,IAAI,CAAEJ,YAAa,CAAC;EAC/D,MAAMK,sBAAsB,GAAGF,yBAAyB,GACrDH,YAAY,GACZ,IAAAM,cAAM,EAAEN,YAAa,CAAC,CAACO,KAAK,CAAC,CAAC;;EAEjC;;EAEA,MAAMC,aAAwC,GAAGN,oBAAoB,GAChED,MAAM,GACR,CAAE;IAAEA,MAAM,EAAEA;EAAwB,CAAC,CAAE;EAC1C,KAAM,MAAM;IAAEA,MAAM,EAAEQ;EAAc,CAAC,IAAID,aAAa,EAAG;IACxD,KAAM,MAAM;MAAEE,IAAI,EAAEC,SAAS;MAAEC,KAAK,EAAEC;IAAW,CAAC,IAAIJ,aAAa,EAAG;MACrE,MAAMK,oBAAoB,GAAGX,yBAAyB,GACnDU,UAAU,GACV,IAAAP,cAAM,EAAEO,UAAW,CAAC,CAACN,KAAK,CAAC,CAAC;MAE/B,IAAKF,sBAAsB,KAAKS,oBAAoB,EAAG;QACtD,OAAOH,SAAS;MACjB;IACD;EACD;;EAEA;EACA,OAAO,IAAAI,QAAE,EAAE,QAAS,CAAC;AACtB,CAAC;;AAED;AACA;AAAAC,OAAA,CAAAjB,gCAAA,GAAAA,gCAAA;AACO,MAAMkB,uBAAuB,GACnCC,GAAgC,IAEhCC,KAAK,CAACC,OAAO,CAAIF,GAAG,CAAoBjB,MAAO,CAAC,IAAI,EAAI,OAAO,IAAIiB,GAAG,CAAE;AAACF,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAEnE,MAAMI,sBAAsB,GAClCC,GAAsC,IACV;EAC5B,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,QAAQ,IAAMR,uBAAuB,CAAEQ,QAAS,CAAE,CAAC;AAElE,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AANAT,OAAA,CAAAK,sBAAA,GAAAA,sBAAA;AAOO,MAAMK,mBAAmB,GAAGA,CAClCC,KAAyB,EACzBC,OAA2B,KACvB;EACJ,MAAMzB,yBAAyB,GAAG,QAAQ,CAACC,IAAI,CAAEuB,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG,CAAC;EAE9D,IAAK,CAAExB,yBAAyB,IAAIyB,OAAO,KAAK,IAAI,EAAG;IACtD,OAAOD,KAAK;EACb;EAEA,MAAM;IAAEE;EAAc,CAAC,GAAGD,OAAO;EACjC,MAAM;IAAEE;EAAY,CAAC,GAAGD,aAAa;EACrC,MAAME,uBAAuB,GAC5BD,WAAW,EAAEE,gBAAgB,CAAEJ,OAAQ,CAAC,CAACK,eAAe;EAEzD,OAAOF,uBAAuB,GAC3B,IAAAzB,cAAM,EAAEyB,uBAAwB,CAAC,CAACxB,KAAK,CAAC,CAAC,GACzCoB,KAAK;AACT,CAAC;AAACX,OAAA,CAAAU,mBAAA,GAAAA,mBAAA","ignoreList":[]}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_i18n","extend","namesPlugin","a11yPlugin","isSimpleCSSColor","value","valueIsCssVariable","test","valueIsColorMix","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsSimpleColor","normalizedCurrentValue","colord","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","__","exports","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"sources":["@wordpress/components/src/color-palette/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = ( value: string ): boolean => {\n\tconst valueIsCssVariable = /var\\(/.test( value ?? '' );\n\tconst valueIsColorMix = /color-mix\\(/.test( value ?? '' );\n\treturn ! valueIsCssVariable && ! valueIsColorMix;\n};\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\tconst currentValueIsSimpleColor = currentValue\n\t\t? isSimpleCSSColor( currentValue )\n\t\t: false;\n\tconst normalizedCurrentValue = currentValueIsSimpleColor\n\t\t? colord( currentValue ).toHex()\n\t\t: currentValue;\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsSimpleColor\n\t\t\t\t? colord( colorValue ).toHex()\n\t\t\t\t: colorValue;\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tif ( ! value || ! element || isSimpleCSSColor( value ) ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"],"mappings":"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","ignoreList":[]}

package/build/color-picker/color-copy-button.js

@@ -26,7 +26,7 @@ const ColorCopyButton = props => {
     colorType
   } = props;
   const [copiedColor, setCopiedColor] = (0, _element.useState)(null);
-  const copyTimer = (0, _element.useRef)();
+  const copyTimerRef = (0, _element.useRef)();
   const copyRef = (0, _compose.useCopyToClipboard)(() => {
     switch (colorType) {
       case 'hsl':
@@ -44,20 +44,20 @@ const ColorCopyButton = props => {
         }
     }
   }, () => {
-    if (copyTimer.current) {
-      clearTimeout(copyTimer.current);
+    if (copyTimerRef.current) {
+      clearTimeout(copyTimerRef.current);
     }
     setCopiedColor(color.toHex());
-    copyTimer.current = setTimeout(() => {
+    copyTimerRef.current = setTimeout(() => {
       setCopiedColor(null);
-      copyTimer.current = undefined;
+      copyTimerRef.current = undefined;
     }, 3000);
   });
   (0, _element.useEffect)(() => {
-    // Clear copyTimer on component unmount.
+    // Clear copyTimerRef on component unmount.
     return () => {
-      if (copyTimer.current) {
-        clearTimeout(copyTimer.current);
+      if (copyTimerRef.current) {
+        clearTimeout(copyTimerRef.current);
       }
     };
   }, []);

package/build/color-picker/color-copy-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_icons","_i18n","_styles","_tooltip","_interopRequireDefault","_jsxRuntime","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","useState","copyTimer","useRef","copyRef","useCopyToClipboard","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","useEffect","jsx","default","delay","hideOnClick","text","__","children","CopyButton","size","ref","icon","copy","showTooltip","exports"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport Tooltip from '../tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tdelay={ 0 }\n\t\t\thideOnClick={ false }\n\t\t\ttext={\n\t\t\t\tcopiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )\n\t\t\t}\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tsize=\"small\"\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAiC,IAAAO,WAAA,GAAAP,OAAA;AAZjC;AACA;AACA;;AAMA;AACA;AACA;;AAMO,MAAMQ,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAmB,IAAK,CAAC;EACzE,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAgD,CAAC;EACzE,MAAMC,OAAO,GAAG,IAAAC,2BAAkB,EACjC,MAAM;IACL,QAASP,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACS,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAOT,KAAK,CAACU,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOV,KAAK,CAACW,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKN,SAAS,CAACO,OAAO,EAAG;MACxBC,YAAY,CAAER,SAAS,CAACO,OAAQ,CAAC;IAClC;IACAT,cAAc,CAAEH,KAAK,CAACW,KAAK,CAAC,CAAE,CAAC;IAC/BN,SAAS,CAACO,OAAO,GAAGE,UAAU,CAAE,MAAM;MACrCX,cAAc,CAAE,IAAK,CAAC;MACtBE,SAAS,CAACO,OAAO,GAAGG,SAAS;IAC9B,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACD,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKX,SAAS,CAACO,OAAO,EAAG;QACxBC,YAAY,CAAER,SAAS,CAACO,OAAQ,CAAC;MAClC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,oBACC,IAAAf,WAAA,CAAAoB,GAAA,EAACtB,QAAA,CAAAuB,OAAO;IACPC,KAAK,EAAG,CAAG;IACXC,WAAW,EAAG,KAAO;IACrBC,IAAI,EACHnB,WAAW,KAAKF,KAAK,CAACW,KAAK,CAAC,CAAC,GAAG,IAAAW,QAAE,EAAE,SAAU,CAAC,GAAG,IAAAA,QAAE,EAAE,MAAO,CAC7D;IAAAC,QAAA,eAED,IAAA1B,WAAA,CAAAoB,GAAA,EAACvB,OAAA,CAAA8B,UAAU;MACVC,IAAI,EAAC,OAAO;MACZC,GAAG,EAAGnB,OAAS;MACfoB,IAAI,EAAGC,WAAM;MACbC,WAAW,EAAG;IAAO,CACrB;EAAC,CACM,CAAC;AAEZ,CAAC;AAACC,OAAA,CAAAhC,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_icons","_i18n","_styles","_tooltip","_interopRequireDefault","_jsxRuntime","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","useState","copyTimerRef","useRef","copyRef","useCopyToClipboard","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","useEffect","jsx","default","delay","hideOnClick","text","__","children","CopyButton","size","ref","icon","copy","showTooltip","exports"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CopyButton } from './styles';\nimport Tooltip from '../tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimerRef = useRef<\n\t\tReturnType< typeof setTimeout > | undefined\n\t>();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimerRef.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimerRef.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimerRef on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<Tooltip\n\t\t\tdelay={ 0 }\n\t\t\thideOnClick={ false }\n\t\t\ttext={\n\t\t\t\tcopiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )\n\t\t\t}\n\t\t>\n\t\t\t<CopyButton\n\t\t\t\tsize=\"small\"\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAKA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAC,sBAAA,CAAAN,OAAA;AAAiC,IAAAO,WAAA,GAAAP,OAAA;AAZjC;AACA;AACA;;AAMA;AACA;AACA;;AAMO,MAAMQ,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAmB,IAAK,CAAC;EACzE,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAEzB,CAAC;EACH,MAAMC,OAAO,GAAG,IAAAC,2BAAkB,EACjC,MAAM;IACL,QAASP,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACS,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAOT,KAAK,CAACU,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOV,KAAK,CAACW,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKN,YAAY,CAACO,OAAO,EAAG;MAC3BC,YAAY,CAAER,YAAY,CAACO,OAAQ,CAAC;IACrC;IACAT,cAAc,CAAEH,KAAK,CAACW,KAAK,CAAC,CAAE,CAAC;IAC/BN,YAAY,CAACO,OAAO,GAAGE,UAAU,CAAE,MAAM;MACxCX,cAAc,CAAE,IAAK,CAAC;MACtBE,YAAY,CAACO,OAAO,GAAGG,SAAS;IACjC,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACD,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKX,YAAY,CAACO,OAAO,EAAG;QAC3BC,YAAY,CAAER,YAAY,CAACO,OAAQ,CAAC;MACrC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,oBACC,IAAAf,WAAA,CAAAoB,GAAA,EAACtB,QAAA,CAAAuB,OAAO;IACPC,KAAK,EAAG,CAAG;IACXC,WAAW,EAAG,KAAO;IACrBC,IAAI,EACHnB,WAAW,KAAKF,KAAK,CAACW,KAAK,CAAC,CAAC,GAAG,IAAAW,QAAE,EAAE,SAAU,CAAC,GAAG,IAAAA,QAAE,EAAE,MAAO,CAC7D;IAAAC,QAAA,eAED,IAAA1B,WAAA,CAAAoB,GAAA,EAACvB,OAAA,CAAA8B,UAAU;MACVC,IAAI,EAAC,OAAO;MACZC,GAAG,EAAGnB,OAAS;MACfoB,IAAI,EAAGC,WAAM;MACbC,WAAW,EAAG;IAAO,CACrB;EAAC,CACM,CAAC;AAEZ,CAAC;AAACC,OAAA,CAAAhC,eAAA,GAAAA,eAAA","ignoreList":[]}

package/build/color-picker/hex-input.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,9 +9,8 @@ var _colord = require("colord");
 var _i18n = require("@wordpress/i18n");
 var _inputControl = require("../input-control");
 var _text = require("../text");
-var _spacer = require("../spacer");
-var _space = require("../utils/space");
 var _colorsValues = require("../utils/colors-values");
+var _inputPrefixWrapper = _interopRequireDefault(require("../input-control/input-prefix-wrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -50,12 +50,12 @@ const HexInput = ({
     };
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.InputControl, {
-    prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
-      as: _text.Text,
-      marginLeft: (0, _space.space)(4),
-      color: _colorsValues.COLORS.theme.accent,
-      lineHeight: 1,
-      children: "#"
+    prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPrefixWrapper.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
+        color: _colorsValues.COLORS.theme.accent,
+        lineHeight: 1,
+        children: "#"
+      })
     }),
     value: color.toHex().slice(1).toUpperCase(),
     onChange: handleChange,

package/build/color-picker/hex-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_i18n","_inputControl","_text","_spacer","_space","_colorsValues","_jsxRuntime","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","colord","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","jsx","InputControl","prefix","Spacer","as","Text","marginLeft","space","COLORS","theme","accent","lineHeight","children","toHex","maxLength","label","__","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth","exports"],"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AAAgD,IAAAO,WAAA,GAAAP,OAAA;AAjBhD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AASO,MAAMQ,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;MAClB;IACD;IACA,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAE,IAAAM,cAAM,EAAEF,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAMG,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAET,UAAU,CAAE,GAAI,CAAC,GACzCG,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,oBACC,IAAAjB,WAAA,CAAAoB,GAAA,EAACzB,aAAA,CAAA0B,YAAY;IACZC,MAAM,eACL,IAAAtB,WAAA,CAAAoB,GAAA,EAACvB,OAAA,CAAA0B,MAAM;MACNC,EAAE,EAAGC,UAAM;MACXC,UAAU,EAAG,IAAAC,YAAK,EAAE,CAAE,CAAG;MACzBzB,KAAK,EAAG0B,oBAAM,CAACC,KAAK,CAACC,MAAQ;MAC7BC,UAAU,EAAG,CAAG;MAAAC,QAAA,EAChB;IAED,CAAQ,CACR;IACDf,KAAK,EAAGf,KAAK,CAAC+B,KAAK,CAAC,CAAC,CAACf,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDhB,QAAQ,EAAGE,YAAc;IACzB6B,SAAS,EAAG9B,WAAW,GAAG,CAAC,GAAG,CAAG;IACjC+B,KAAK,EAAG,IAAAC,QAAE,EAAE,WAAY,CAAG;IAC3BC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAG7B,YAAc;IACvC8B,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC;AAACC,OAAA,CAAAxC,QAAA,GAAAA,QAAA","ignoreList":[]}
+{"version":3,"names":["_colord","require","_i18n","_inputControl","_text","_colorsValues","_inputPrefixWrapper","_interopRequireDefault","_jsxRuntime","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","colord","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","jsx","InputControl","prefix","default","children","Text","COLORS","theme","accent","lineHeight","toHex","maxLength","label","__","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth","exports"],"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper>\n\t\t\t\t\t<Text color={ COLORS.theme.accent } lineHeight={ 1 }>\n\t\t\t\t\t\t#\n\t\t\t\t\t</Text>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAGA,IAAAK,mBAAA,GAAAC,sBAAA,CAAAN,OAAA;AAA8E,IAAAO,WAAA,GAAAP,OAAA;AAlB9E;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,MAAMQ,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;MAClB;IACD;IACA,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAE,IAAAM,cAAM,EAAEF,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAMG,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAET,UAAU,CAAE,GAAI,CAAC,GACzCG,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,oBACC,IAAAjB,WAAA,CAAAoB,GAAA,EAACzB,aAAA,CAAA0B,YAAY;IACZC,MAAM,eACL,IAAAtB,WAAA,CAAAoB,GAAA,EAACtB,mBAAA,CAAAyB,OAAyB;MAAAC,QAAA,eACzB,IAAAxB,WAAA,CAAAoB,GAAA,EAACxB,KAAA,CAAA6B,IAAI;QAACvB,KAAK,EAAGwB,oBAAM,CAACC,KAAK,CAACC,MAAQ;QAACC,UAAU,EAAG,CAAG;QAAAL,QAAA,EAAC;MAErD,CAAM;IAAC,CACmB,CAC3B;IACDP,KAAK,EAAGf,KAAK,CAAC4B,KAAK,CAAC,CAAC,CAACZ,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDhB,QAAQ,EAAGE,YAAc;IACzB0B,SAAS,EAAG3B,WAAW,GAAG,CAAC,GAAG,CAAG;IACjC4B,KAAK,EAAG,IAAAC,QAAE,EAAE,WAAY,CAAG;IAC3BC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAG1B,YAAc;IACvC2B,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC;AAACC,OAAA,CAAArC,QAAA,GAAAA,QAAA","ignoreList":[]}

package/build/color-picker/input-with-slider.js

@@ -1,15 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputWithSlider = void 0;
 var _hStack = require("../h-stack");
 var _text = require("../text");
-var _spacer = require("../spacer");
-var _space = require("../utils/space");
 var _styles = require("./styles");
 var _colorsValues = require("../utils/colors-values");
+var _inputPrefixWrapper = _interopRequireDefault(require("../input-control/input-prefix-wrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
@@ -43,17 +43,18 @@ const InputWithSlider = ({
       hideLabelFromVision: true,
       value: value,
       onChange: onNumberControlChange,
-      prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacer.Spacer, {
-        as: _text.Text,
-        paddingLeft: (0, _space.space)(4),
-        color: _colorsValues.COLORS.theme.accent,
-        lineHeight: 1,
-        children: abbreviation
+      prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPrefixWrapper.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
+          color: _colorsValues.COLORS.theme.accent,
+          lineHeight: 1,
+          children: abbreviation
+        })
       }),
       spinControls: "none",
       size: "__unstable-large"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RangeControl, {
       __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: true,
       label: label,
       hideLabelFromVision: true,
       min: min,

package/build/color-picker/input-with-slider.js.map

@@ -1 +1 @@
-{"version":3,"names":["_hStack","require","_text","_spacer","_space","_styles","_colorsValues","_jsxRuntime","InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","jsxs","HStack","spacing","children","jsx","NumberControlWrapper","hideLabelFromVision","prefix","Spacer","as","Text","paddingLeft","space","color","COLORS","theme","accent","lineHeight","spinControls","size","RangeControl","__nextHasNoMarginBottom","withInputField","exports"],"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { InputWithSliderProps } from './types';\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.theme.accent }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"],"mappings":";;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAAgD,IAAAM,WAAA,GAAAN,OAAA;AARhD;AACA;AACA;;AASO,MAAMO,eAAe,GAAGA,CAAE;EAChCC,GAAG;EACHC,GAAG;EACHC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACqB,CAAC,KAAM;EAC5B,MAAMC,qBAAqB,GAAKC,QAA0B,IAAM;IAC/D,IAAK,CAAEA,QAAQ,EAAG;MACjBH,QAAQ,CAAE,CAAE,CAAC;MACb;IACD;IACA,IAAK,OAAOG,QAAQ,KAAK,QAAQ,EAAG;MACnCH,QAAQ,CAAEI,QAAQ,CAAED,QAAQ,EAAE,EAAG,CAAE,CAAC;MACpC;IACD;IACAH,QAAQ,CAAEG,QAAS,CAAC;EACrB,CAAC;EAED,oBACC,IAAAT,WAAA,CAAAW,IAAA,EAAClB,OAAA,CAAAmB,MAAM;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpB,IAAAd,WAAA,CAAAe,GAAA,EAACjB,OAAA,CAAAkB,oBAAoB;MACpBd,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXC,KAAK,EAAGA,KAAO;MACfa,mBAAmB;MACnBV,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGE,qBAAuB;MAClCU,MAAM,eACL,IAAAlB,WAAA,CAAAe,GAAA,EAACnB,OAAA,CAAAuB,MAAM;QACNC,EAAE,EAAGC,UAAM;QACXC,WAAW,EAAG,IAAAC,YAAK,EAAE,CAAE,CAAG;QAC1BC,KAAK,EAAGC,oBAAM,CAACC,KAAK,CAACC,MAAQ;QAC7BC,UAAU,EAAG,CAAG;QAAAd,QAAA,EAEdT;MAAY,CACP,CACR;MACDwB,YAAY,EAAC,MAAM;MACnBC,IAAI,EAAC;IAAkB,CACvB,CAAC,eACF,IAAA9B,WAAA,CAAAe,GAAA,EAACjB,OAAA,CAAAiC,YAAY;MACZC,uBAAuB;MACvB5B,KAAK,EAAGA,KAAO;MACfa,mBAAmB;MACnBf,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXI,KAAK,EAAGA;MACR;MACA;MAAA;MACAD,QAAQ,EAAGA,QAAU;MACrB2B,cAAc,EAAG;IAAO,CACxB,CAAC;EAAA,CACK,CAAC;AAEX,CAAC;AAACC,OAAA,CAAAjC,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_hStack","require","_text","_styles","_colorsValues","_inputPrefixWrapper","_interopRequireDefault","_jsxRuntime","InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","jsxs","HStack","spacing","children","jsx","NumberControlWrapper","hideLabelFromVision","prefix","default","Text","color","COLORS","theme","accent","lineHeight","spinControls","size","RangeControl","__nextHasNoMarginBottom","__next40pxDefaultSize","withInputField","exports"],"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { InputWithSliderProps } from './types';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<InputControlPrefixWrapper>\n\t\t\t\t\t\t<Text color={ COLORS.theme.accent } lineHeight={ 1 }>\n\t\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAEA,IAAAI,mBAAA,GAAAC,sBAAA,CAAAL,OAAA;AAA8E,IAAAM,WAAA,GAAAN,OAAA;AAR9E;AACA;AACA;;AAQO,MAAMO,eAAe,GAAGA,CAAE;EAChCC,GAAG;EACHC,GAAG;EACHC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACqB,CAAC,KAAM;EAC5B,MAAMC,qBAAqB,GAAKC,QAA0B,IAAM;IAC/D,IAAK,CAAEA,QAAQ,EAAG;MACjBH,QAAQ,CAAE,CAAE,CAAC;MACb;IACD;IACA,IAAK,OAAOG,QAAQ,KAAK,QAAQ,EAAG;MACnCH,QAAQ,CAAEI,QAAQ,CAAED,QAAQ,EAAE,EAAG,CAAE,CAAC;MACpC;IACD;IACAH,QAAQ,CAAEG,QAAS,CAAC;EACrB,CAAC;EAED,oBACC,IAAAT,WAAA,CAAAW,IAAA,EAAClB,OAAA,CAAAmB,MAAM;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpB,IAAAd,WAAA,CAAAe,GAAA,EAACnB,OAAA,CAAAoB,oBAAoB;MACpBd,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXC,KAAK,EAAGA,KAAO;MACfa,mBAAmB;MACnBV,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGE,qBAAuB;MAClCU,MAAM,eACL,IAAAlB,WAAA,CAAAe,GAAA,EAACjB,mBAAA,CAAAqB,OAAyB;QAAAL,QAAA,eACzB,IAAAd,WAAA,CAAAe,GAAA,EAACpB,KAAA,CAAAyB,IAAI;UAACC,KAAK,EAAGC,oBAAM,CAACC,KAAK,CAACC,MAAQ;UAACC,UAAU,EAAG,CAAG;UAAAX,QAAA,EACjDT;QAAY,CACT;MAAC,CACmB,CAC3B;MACDqB,YAAY,EAAC,MAAM;MACnBC,IAAI,EAAC;IAAkB,CACvB,CAAC,eACF,IAAA3B,WAAA,CAAAe,GAAA,EAACnB,OAAA,CAAAgC,YAAY;MACZC,uBAAuB;MACvBC,qBAAqB;MACrB1B,KAAK,EAAGA,KAAO;MACfa,mBAAmB;MACnBf,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXI,KAAK,EAAGA;MACR;MACA;MAAA;MACAD,QAAQ,EAAGA,QAAU;MACrByB,cAAc,EAAG;IAAO,CACxB,CAAC;EAAA,CACK,CAAC;AAEX,CAAC;AAACC,OAAA,CAAA/B,eAAA,GAAAA,eAAA","ignoreList":[]}