@wordpress/components 25.9.0 → 25.10.0

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_i18n","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","rtl","isRTL","compositeState","useCompositeState","setBaseId","setLoop","setRTL","useEffect","compositeContext","isComposite","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","id","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeState } 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\tconst rtl = isRTL();\n\n\tconst compositeState = useCompositeState( { baseId, loop, rtl } );\n\tconst { setBaseId, setLoop, setRTL } = compositeState;\n\n\t// These are necessary as `useCompositeState` is sealed after\n\t// the first render, so although unlikely to happen, if a state\n\t// property should change, we need to process it accordingly.\n\n\tuseEffect( () => {\n\t\tsetBaseId( baseId );\n\t}, [ setBaseId, baseId ] );\n\n\tuseEffect( () => {\n\t\tsetLoop( loop );\n\t}, [ setLoop, loop ] );\n\n\tuseEffect( () => {\n\t\tsetRTL( rtl );\n\t}, [ setRTL, rtl ] );\n\n\tconst compositeContext = {\n\t\tisComposite: true,\n\t\t...compositeState,\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\t{ ...compositeState }\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 }>\n\t\t\t<CircularOptionPickerContext.Provider\n\t\t\t\tvalue={ { isComposite: false, baseId } }\n\t\t\t>\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={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\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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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_v","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\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={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\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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"}

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 { CompositeState } from '../composite';\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 CircularOptionPickerCompositeState = CompositeState;\nexport type CircularOptionPickerContextProps =\n\t| { isComposite?: false; baseId?: string }\n\t| ( { isComposite: true } & CircularOptionPickerCompositeState );\n"],"mappings":""}
+{"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":""}

package/build/color-palette/index.js

@@ -121,6 +121,10 @@ function CustomColorPickerDropdown({
 }) {
   const popoverProps = (0, _element.useMemo)(() => ({
     shift: true,
+    // Disabling resize as it would otherwise cause the popover to show
+    // scrollbars while dragging the color picker's handle close to the
+    // popover edge.
+    resize: false,
     ...(isRenderedInSidebar ? {
       // When in the sidebar: open to the left (stacking),
       // leaving the same gap as the parent popover.
@@ -233,13 +237,14 @@ function UnforwardedColorPalette(props, forwardedRef) {
       "aria-label": customColorAccessibleLabel,
       style: {
         background: value
-      }
+      },
+      type: "button"
     }), (0, _react.createElement)(_vStack.VStack, {
       className: "components-color-palette__custom-color-text-wrapper",
       spacing: 0.5
     }, (0, _react.createElement)(_truncate.Truncate, {
       className: "components-color-palette__custom-color-name"
-    }, value ? buttonLabelName : 'No color selected'), (0, _react.createElement)(_truncate.Truncate, {
+    }, value ? buttonLabelName : (0, _i18n.__)('No color selected')), (0, _react.createElement)(_truncate.Truncate, {
       className: (0, _classnames.default)('components-color-palette__custom-color-value', {
         'components-color-palette__custom-color-value--is-hex': isHex
       })

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

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","Truncate","classnames","ColorPalette","forwardRef","exports","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\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<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","classnames","ColorPalette","forwardRef","exports","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\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\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}

package/build/color-picker/component.js

@@ -47,8 +47,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
     onChange,
     defaultValue = '#fff',
     copyFormat,
+    // Context
+    onPickerDragStart,
+    onPickerDragEnd,
     ...divProps
   } = (0, _context.useContextSystem)(props, 'ColorPicker');
+  const [containerEl, setContainerEl] = (0, _element.useState)(null);
+  const containerRef = node => {
+    setContainerEl(node);
+  };
 
   // Use a safe default value for the color and remove the possibility of `undefined`.
   const [color, setColor] = (0, _hooks.useControlledValue)({
@@ -65,12 +72,15 @@ const UnconnectedColorPicker = (props, forwardedRef) => {
   }, [debouncedSetColor]);
   const [colorType, setColorType] = (0, _element.useState)(copyFormat || 'hex');
   return (0, _react.createElement)(_styles.ColorfulWrapper, {
-    ref: forwardedRef,
+    ref: (0, _compose.useMergeRefs)([containerRef, forwardedRef]),
     ...divProps
   }, (0, _react.createElement)(_picker.Picker, {
+    containerEl: containerEl,
     onChange: handleChange,
     color: safeColordColor,
-    enableAlpha: enableAlpha
+    enableAlpha: enableAlpha,
+    onDragStart: onPickerDragStart,
+    onDragEnd: onPickerDragEnd
   }), (0, _react.createElement)(_styles.AuxiliaryColorArtefactWrapper, null, (0, _react.createElement)(_styles.AuxiliaryColorArtefactHStackHeader, {
     justify: "space-between"
   }, (0, _react.createElement)(_styles.SelectControl, {

package/build/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","extend","namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","useContextSystem","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","useState","_react","createElement","ColorfulWrapper","ref","Picker","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","SelectControl","__nextHasNoMarginBottom","nextColorType","__","hideLabelFromVision","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","extend","namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","onPickerDragStart","onPickerDragEnd","divProps","useContextSystem","containerEl","setContainerEl","useState","containerRef","node","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","_react","createElement","ColorfulWrapper","ref","useMergeRefs","Picker","onDragStart","onDragEnd","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","SelectControl","__nextHasNoMarginBottom","nextColorType","__","hideLabelFromVision","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\n\t\t// Context\n\t\tonPickerDragStart,\n\t\tonPickerDragEnd,\n\t\t...divProps\n\t} = useContextSystem<\n\t\tColorPickerProps & {\n\t\t\tonPickerDragStart?: ( event: MouseEvent ) => void;\n\t\t\tonPickerDragEnd?: ( event: MouseEvent ) => void;\n\t\t}\n\t>( props, 'ColorPicker' );\n\n\tconst [ containerEl, setContainerEl ] = useState< HTMLElement | null >(\n\t\tnull\n\t);\n\tconst containerRef = ( node: HTMLElement | null ) => {\n\t\tsetContainerEl( node );\n\t};\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper\n\t\t\tref={ useMergeRefs( [ containerRef, forwardedRef ] ) }\n\t\t\t{ ...divProps }\n\t\t>\n\t\t\t<Picker\n\t\t\t\tcontainerEl={ containerEl }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\tonDragStart={ onPickerDragStart }\n\t\t\t\tonDragEnd={ onPickerDragEnd }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/build/color-picker/picker.js

@@ -16,13 +16,89 @@ var _element = require("@wordpress/element");
  * WordPress dependencies
  */
 
+/**
+ * Track the start and the end of drag pointer events related to controlling
+ * the picker's saturation / hue / alpha, and fire the corresponding callbacks.
+ * This is particularly useful to implement synergies like the one with the
+ * `Popover` component, where a pointer events "trap" is rendered while
+ * the user is dragging the pointer to avoid potential interference with iframe
+ * elements.
+ *
+ * @param props
+ * @param props.containerEl
+ * @param props.onDragStart
+ * @param props.onDragEnd
+ */
+const useOnPickerDrag = ({
+  containerEl,
+  onDragStart,
+  onDragEnd
+}) => {
+  const isDragging = (0, _element.useRef)(false);
+  const leftWhileDragging = (0, _element.useRef)(false);
+  (0, _element.useEffect)(() => {
+    if (!containerEl || !onDragStart && !onDragEnd) {
+      return;
+    }
+    const interactiveElements = [containerEl.querySelector('.react-colorful__saturation'), containerEl.querySelector('.react-colorful__hue'), containerEl.querySelector('.react-colorful__alpha')].filter(el => !!el);
+    if (interactiveElements.length === 0) {
+      return;
+    }
+    const doc = containerEl.ownerDocument;
+    const onPointerUp = event => {
+      isDragging.current = false;
+      leftWhileDragging.current = false;
+      onDragEnd?.(event);
+    };
+    const onPointerDown = event => {
+      isDragging.current = true;
+      onDragStart?.(event);
+    };
+    const onPointerLeave = () => {
+      leftWhileDragging.current = isDragging.current;
+    };
+
+    // Try to detect if the user released the pointer while away from the
+    // current window. If the check is successfull, the dragEnd callback will
+    // called as soon as the pointer re-enters the window (better late than never)
+    const onPointerEnter = event => {
+      const noPointerButtonsArePressed = event.buttons === 0;
+      if (leftWhileDragging.current && noPointerButtonsArePressed) {
+        onPointerUp(event);
+      }
+    };
+
+    // The pointerdown event is added on the interactive elements,
+    // while the remaining events are added on the document object since
+    // the pointer wouldn't necessarily be hovering the initial interactive
+    // element at that point.
+    interactiveElements.forEach(el => el.addEventListener('pointerdown', onPointerDown));
+    doc.addEventListener('pointerup', onPointerUp);
+    doc.addEventListener('pointerenter', onPointerEnter);
+    doc.addEventListener('pointerleave', onPointerLeave);
+    return () => {
+      interactiveElements.forEach(el => el.removeEventListener('pointerdown', onPointerDown));
+      doc.removeEventListener('pointerup', onPointerUp);
+      doc.removeEventListener('pointerenter', onPointerEnter);
+      doc.removeEventListener('pointerleave', onPointerUp);
+    };
+  }, [onDragStart, onDragEnd, containerEl]);
+};
 const Picker = ({
   color,
   enableAlpha,
-  onChange
+  onChange,
+  onDragStart,
+  onDragEnd,
+  containerEl
 }) => {
   const Component = enableAlpha ? _reactColorful.RgbaStringColorPicker : _reactColorful.RgbStringColorPicker;
   const rgbColor = (0, _element.useMemo)(() => color.toRgbString(), [color]);
+  useOnPickerDrag({
+    containerEl,
+    onDragStart,
+    onDragEnd
+  });
   return (0, _react.createElement)(Component, {
     color: rgbColor,
     onChange: nextColor => {

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

@@ -1 +1 @@
-{"version":3,"names":["_reactColorful","require","_colord","_element","Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","useMemo","toRgbString","_react","createElement","nextColor","colord","exports"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAOO,MAAMG,MAAM,GAAGA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAsB,CAAC,KAAM;EAC1E,MAAMC,SAAS,GAAGF,WAAW,GAC1BG,oCAAqB,GACrBC,mCAAoB;EACvB,MAAMC,QAAQ,GAAG,IAAAC,gBAAO,EAAE,MAAMP,KAAK,CAACQ,WAAW,CAAC,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEhE,OACC,IAAAS,MAAA,CAAAC,aAAA,EAACP,SAAS;IACTH,KAAK,EAAGM,QAAU;IAClBJ,QAAQ,EAAKS,SAAS,IAAM;MAC3BT,QAAQ,CAAE,IAAAU,cAAM,EAAED,SAAU,CAAE,CAAC;IAChC;EAAG,CACH,CAAC;AAEJ,CAAC;AAACE,OAAA,CAAAd,MAAA,GAAAA,MAAA"}
+{"version":3,"names":["_reactColorful","require","_colord","_element","useOnPickerDrag","containerEl","onDragStart","onDragEnd","isDragging","useRef","leftWhileDragging","useEffect","interactiveElements","querySelector","filter","el","length","doc","ownerDocument","onPointerUp","event","current","onPointerDown","onPointerLeave","onPointerEnter","noPointerButtonsArePressed","buttons","forEach","addEventListener","removeEventListener","Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","useMemo","toRgbString","_react","createElement","nextColor","colord","exports"],"sources":["@wordpress/components/src/color-picker/picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useEffect, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\n/**\n * Track the start and the end of drag pointer events related to controlling\n * the picker's saturation / hue / alpha, and fire the corresponding callbacks.\n * This is particularly useful to implement synergies like the one with the\n * `Popover` component, where a pointer events \"trap\" is rendered while\n * the user is dragging the pointer to avoid potential interference with iframe\n * elements.\n *\n * @param props\n * @param props.containerEl\n * @param props.onDragStart\n * @param props.onDragEnd\n */\nconst useOnPickerDrag = ( {\n\tcontainerEl,\n\tonDragStart,\n\tonDragEnd,\n}: Pick< PickerProps, 'containerEl' | 'onDragStart' | 'onDragEnd' > ) => {\n\tconst isDragging = useRef( false );\n\tconst leftWhileDragging = useRef( false );\n\tuseEffect( () => {\n\t\tif ( ! containerEl || ( ! onDragStart && ! onDragEnd ) ) {\n\t\t\treturn;\n\t\t}\n\t\tconst interactiveElements = [\n\t\t\tcontainerEl.querySelector( '.react-colorful__saturation' ),\n\t\t\tcontainerEl.querySelector( '.react-colorful__hue' ),\n\t\t\tcontainerEl.querySelector( '.react-colorful__alpha' ),\n\t\t].filter( ( el ) => !! el ) as Element[];\n\n\t\tif ( interactiveElements.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst doc = containerEl.ownerDocument;\n\n\t\tconst onPointerUp: EventListener = ( event ) => {\n\t\t\tisDragging.current = false;\n\t\t\tleftWhileDragging.current = false;\n\t\t\tonDragEnd?.( event as MouseEvent );\n\t\t};\n\n\t\tconst onPointerDown: EventListener = ( event ) => {\n\t\t\tisDragging.current = true;\n\t\t\tonDragStart?.( event as MouseEvent );\n\t\t};\n\n\t\tconst onPointerLeave: EventListener = () => {\n\t\t\tleftWhileDragging.current = isDragging.current;\n\t\t};\n\n\t\t// Try to detect if the user released the pointer while away from the\n\t\t// current window. If the check is successfull, the dragEnd callback will\n\t\t// called as soon as the pointer re-enters the window (better late than never)\n\t\tconst onPointerEnter: EventListener = ( event ) => {\n\t\t\tconst noPointerButtonsArePressed =\n\t\t\t\t( event as PointerEvent ).buttons === 0;\n\n\t\t\tif ( leftWhileDragging.current && noPointerButtonsArePressed ) {\n\t\t\t\tonPointerUp( event );\n\t\t\t}\n\t\t};\n\n\t\t// The pointerdown event is added on the interactive elements,\n\t\t// while the remaining events are added on the document object since\n\t\t// the pointer wouldn't necessarily be hovering the initial interactive\n\t\t// element at that point.\n\t\tinteractiveElements.forEach( ( el ) =>\n\t\t\tel.addEventListener( 'pointerdown', onPointerDown )\n\t\t);\n\t\tdoc.addEventListener( 'pointerup', onPointerUp );\n\t\tdoc.addEventListener( 'pointerenter', onPointerEnter );\n\t\tdoc.addEventListener( 'pointerleave', onPointerLeave );\n\n\t\treturn () => {\n\t\t\tinteractiveElements.forEach( ( el ) =>\n\t\t\t\tel.removeEventListener( 'pointerdown', onPointerDown )\n\t\t\t);\n\t\t\tdoc.removeEventListener( 'pointerup', onPointerUp );\n\t\t\tdoc.removeEventListener( 'pointerenter', onPointerEnter );\n\t\t\tdoc.removeEventListener( 'pointerleave', onPointerUp );\n\t\t};\n\t}, [ onDragStart, onDragEnd, containerEl ] );\n};\n\nexport const Picker = ( {\n\tcolor,\n\tenableAlpha,\n\tonChange,\n\tonDragStart,\n\tonDragEnd,\n\tcontainerEl,\n}: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\tuseOnPickerDrag( { containerEl, onDragStart, onDragEnd } );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"],"mappings":"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"}