npm - @wordpress/components - Versions diffs - 28.0.2 → 28.0.3 - Mend

@wordpress/components 28.0.2 → 28.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +1 -0
package/build/palette-edit/index.js +30 -38
package/build/palette-edit/index.js.map +1 -1
package/build/palette-edit/types.js.map +1 -1
package/build-module/palette-edit/index.js +31 -39
package/build-module/palette-edit/index.js.map +1 -1
package/build-module/palette-edit/types.js.map +1 -1
package/build-types/palette-edit/index.d.ts.map +1 -1
package/build-types/palette-edit/types.d.ts +1 -3
package/build-types/palette-edit/types.d.ts.map +1 -1
package/package.json +3 -3
package/src/palette-edit/index.tsx +33 -45
package/src/palette-edit/test/index.tsx +2 -4
package/src/palette-edit/types.ts +1 -3
package/tsconfig.tsbuildinfo +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,7 @@
 ### Enhancements
 - Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233))
+- `__experimentalPaletteEdit`: improve the accessibility. ([#62753](https://github.com/WordPress/gutenberg/pull/62753))
 ### Bug Fixes

package/build/palette-edit/index.js CHANGED Viewed

@@ -134,16 +134,13 @@ function Option({
   canOnlyChangeValues,
   element,
   onChange,
-  isEditing,
-  onStartEditing,
   onRemove,
-  onStopEditing,
   popoverProps: receivedPopoverProps,
   slugPrefix,
   isGradient
 }) {
-  const focusOutsideProps = (0, _compose.__experimentalUseFocusOutside)(onStopEditing);
   const value = isGradient ? element.gradient : element.color;
+  const [isEditingColor, setIsEditingColor] = (0, _element.useState)(false);
   // Use internal state instead of a ref to make sure that the component
   // re-renders when the popover's anchor updates.
@@ -154,22 +151,25 @@ function Option({
     anchor: popoverAnchor
   }), [popoverAnchor, receivedPopoverProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaletteItem, {
-    className: isEditing ? 'is-selected' : undefined,
-    as: isEditing ? 'div' : 'button',
-    onClick: onStartEditing,
-    "aria-label": isEditing ? undefined : (0, _i18n.sprintf)(
-    // translators: %s is a color or gradient name, e.g. "Red".
-    (0, _i18n.__)('Edit: %s'), element.name.trim().length ? element.name : value),
     ref: setPopoverAnchor,
-    ...(isEditing ? {
-      ...focusOutsideProps
-    } : {}),
+    as: "div",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
       justify: "flex-start",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IndicatorStyled, {
-        colorValue: value
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+        onClick: () => {
+          setIsEditingColor(true);
+        },
+        "aria-label": (0, _i18n.sprintf)(
+        // translators: %s is a color or gradient name, e.g. "Red".
+        (0, _i18n.__)('Edit: %s'), element.name.trim().length ? element.name : value),
+        style: {
+          padding: 0
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IndicatorStyled, {
+          colorValue: value
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
-        children: isEditing && !canOnlyChangeValues ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NameInput, {
+        children: !canOnlyChangeValues ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NameInput, {
           label: isGradient ? (0, _i18n.__)('Gradient name') : (0, _i18n.__)('Color name'),
           value: element.name,
           onChange: nextName => onChange({
@@ -181,31 +181,33 @@ function Option({
           children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
           '\u00A0'
         })
-      }), isEditing && !canOnlyChangeValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
+      }), !canOnlyChangeValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_flex.FlexItem, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RemoveButton, {
           size: "small",
           icon: _icons.lineSolid,
-          label: (0, _i18n.__)('Remove color'),
+          label: (0, _i18n.sprintf)(
+          // translators: %s is a color or gradient name, e.g. "Red".
+          (0, _i18n.__)('Remove color: %s'), element.name.trim().length ? element.name : value),
           onClick: onRemove
         })
       })]
-    }), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPickerPopover, {
+    }), isEditingColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPickerPopover, {
       isGradient: isGradient,
       onChange: onChange,
       element: element,
-      popoverProps: popoverProps
+      popoverProps: popoverProps,
+      onClose: () => setIsEditingColor(false)
     })]
   });
 }
 function PaletteEditListView({
   elements,
   onChange,
-  editingElement,
-  setEditingElement,
   canOnlyChangeValues,
   slugPrefix,
   isGradient,
-  popoverProps
+  popoverProps,
+  addColorRef
 }) {
   // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
   const elementsReference = (0, _element.useRef)();
@@ -221,11 +223,6 @@ function PaletteEditListView({
         isGradient: isGradient,
         canOnlyChangeValues: canOnlyChangeValues,
         element: element,
-        onStartEditing: () => {
-          if (editingElement !== index) {
-            setEditingElement(index);
-          }
-        },
         onChange: newElement => {
           debounceOnChange(elements.map((currentElement, currentIndex) => {
             if (currentIndex === index) {
@@ -235,7 +232,6 @@ function PaletteEditListView({
           }));
         },
         onRemove: () => {
-          setEditingElement(null);
           const newElements = elements.filter((_currentElement, currentIndex) => {
             if (currentIndex === index) {
               return false;
@@ -243,12 +239,7 @@ function PaletteEditListView({
             return true;
           });
           onChange(newElements.length ? newElements : undefined);
-        },
-        isEditing: index === editingElement,
-        onStopEditing: () => {
-          if (index === editingElement) {
-            setEditingElement(null);
-          }
+          addColorRef.current?.focus();
         },
         slugPrefix: slugPrefix,
         popoverProps: popoverProps
@@ -308,6 +299,7 @@ function PaletteEdit({
       setIsEditing(true);
     }
   }, [isGradient, elements]);
+  const addColorRef = (0, _element.useRef)(null);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.PaletteEditStyles, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.PaletteHeading, {
@@ -322,6 +314,7 @@ function PaletteEdit({
           },
           children: (0, _i18n.__)('Done')
         }), !canOnlyChangeValues && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+          ref: addColorRef,
           size: "small",
           isPressed: isAdding,
           icon: _icons.plus,
@@ -396,11 +389,10 @@ function PaletteEdit({
         // @ts-expect-error TODO: Don't know how to resolve
         ,
         onChange: onChange,
-        editingElement: editingElement,
-        setEditingElement: setEditingElement,
         slugPrefix: slugPrefix,
         isGradient: isGradient,
-        popoverProps: popoverProps
+        popoverProps: popoverProps,
+        addColorRef: addColorRef
       }), !isEditing && editingElement !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPickerPopover, {
         isGradient: isGradient,
         onClose: () => setEditingElement(null),

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_icons","_compose","_button","_colorPicker","_flex","_hStack","_itemGroup","_vStack","_gradientPicker","_colorPalette","_dropdownMenu","_popover","_styles","_navigableContainer","_constants","_customGradientPicker","_strings","_jsxRuntime","DEFAULT_COLOR","NameInput","value","onChange","label","jsx","NameInputControl","hideLabelFromVision","getNameAndSlugForPosition","elements","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","name","sprintf","__","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","useMemo","shift","offset","resize","placement","className","clsx","jsxs","default","children","ColorPicker","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","useFocusOutside","popoverAnchor","setPopoverAnchor","useState","anchor","PaletteItem","undefined","as","onClick","trim","length","ref","HStack","justify","IndicatorStyled","colorValue","FlexItem","nextName","kebabCase","NameContainer","RemoveButton","size","icon","lineSolid","PaletteEditListView","editingElement","setEditingElement","elementsReference","useRef","useEffect","current","debounceOnChange","useDebounce","VStack","spacing","ItemGroup","isRounded","map","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","setIsEditing","isAdding","elementsLength","hasElements","onSelectPaletteItem","useCallback","newEditingElementIndex","selectedElement","key","PaletteEditStyles","PaletteHeading","level","PaletteActionsContainer","DoneButton","isPressed","plus","DEFAULT_GRADIENT","moreVertical","toggleProps","Fragment","NavigableMenu","role","variant","PaletteEditContents","clearable","disableCustomGradients","disableCustomColors","_default","exports"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport {\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseDebounce,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/\n Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n \n @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n \n @return A name and slug for the new palette item.\n /\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn {\n\t\tname: sprintf(\n\t\t\t/ translators: %s: is an id for a custom color /\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends Color \| Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: clsx(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\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\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color \| Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\tconst value = isGradient ? element.gradient : element.color;\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem\n\t\t\tclassName={ isEditing ? 'is-selected' : undefined }\n\t\t\tas={ isEditing ? 'div' : 'button' }\n\t\t\tonClick={ onStartEditing }\n\t\t\taria-label={\n\t\t\t\tisEditing\n\t\t\t\t\t? undefined\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t )\n\t\t\t}\n\t\t\tref={ setPopoverAnchor }\n\t\t\t{ ...( isEditing ? { ...focusOutsideProps } : {} ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing && ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: / Fall back to non-breaking space to maintain height /\n\t\t\t\t\t\t\t\t '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ __( 'Remove color' ) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditing && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends Color \| Gradient >( {\n\telements,\n\tonChange,\n\teditingElement,\n\tsetEditingElement,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingElement !== index ) {\n\t\t\t\t\t\t\t\tsetEditingElement( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingElement }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingElement ) {\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/\n Allows editing a palette of colors or gradients.\n \n ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n \n return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber \| null \| undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing \|\|\n\t\t\t\t\t\t\t! canOnlyChangeValues \|\|\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingElement={ editingElement }\n\t\t\t\t\t\t\tsetEditingElement={ setEditingElement }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\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} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_icons","_compose","_button","_colorPicker","_flex","_hStack","_itemGroup","_vStack","_gradientPicker","_colorPalette","_dropdownMenu","_popover","_styles","_navigableContainer","_constants","_customGradientPicker","_strings","_jsxRuntime","DEFAULT_COLOR","NameInput","value","onChange","label","jsx","NameInputControl","hideLabelFromVision","getNameAndSlugForPosition","elements","slugPrefix","nameRegex","RegExp","position","reduce","previousValue","currentValue","slug","matches","match","id","parseInt","name","sprintf","__","ColorPickerPopover","isGradient","element","popoverProps","receivedPopoverProps","onClose","useMemo","shift","offset","resize","placement","className","clsx","jsxs","default","children","ColorPicker","color","enableAlpha","newColor","__experimentalIsRenderedInSidebar","gradient","newGradient","Option","canOnlyChangeValues","onRemove","isEditingColor","setIsEditingColor","useState","popoverAnchor","setPopoverAnchor","anchor","PaletteItem","ref","as","HStack","justify","onClick","trim","length","style","padding","IndicatorStyled","colorValue","FlexItem","nextName","kebabCase","NameContainer","RemoveButton","size","icon","lineSolid","PaletteEditListView","addColorRef","elementsReference","useRef","useEffect","current","debounceOnChange","useDebounce","VStack","spacing","ItemGroup","isRounded","map","index","newElement","currentElement","currentIndex","newElements","filter","_currentElement","undefined","focus","EMPTY_ARRAY","PaletteEdit","gradients","colors","paletteLabel","paletteLabelHeadingLevel","emptyMessage","canReset","isEditing","setIsEditing","editingElement","setEditingElement","isAdding","elementsLength","hasElements","onSelectPaletteItem","useCallback","newEditingElementIndex","selectedElement","key","PaletteEditStyles","PaletteHeading","level","PaletteActionsContainer","DoneButton","isPressed","plus","DEFAULT_GRADIENT","moreVertical","toggleProps","Fragment","NavigableMenu","role","variant","PaletteEditContents","clearable","disableCustomGradients","disableCustomColors","_default","exports"],"sources":["@wordpress/components/src/palette-edit/index.tsx"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport {\n\tuseState,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n\tuseMemo,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tPaletteActionsContainer,\n\tPaletteEditStyles,\n\tPaletteHeading,\n\tIndicatorStyled,\n\tPaletteItem,\n\tNameContainer,\n\tNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n\tPaletteEditContents,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { kebabCase } from '../utils/strings';\nimport type {\n\tColor,\n\tColorPickerPopoverProps,\n\tGradient,\n\tNameInputProps,\n\tOptionProps,\n\tPaletteEditListViewProps,\n\tPaletteEditProps,\n\tPaletteElement,\n} from './types';\n\nconst DEFAULT_COLOR = '#000';\n\nfunction NameInput( { value, onChange, label }: NameInputProps ) {\n\treturn (\n\t\t<NameInputControl\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\n/\n Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n \n @param elements An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n \n @return A name and slug for the new palette item.\n /\nexport function getNameAndSlugForPosition(\n\telements: PaletteElement[],\n\tslugPrefix: string\n) {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }color-([\\\\d]+)$` );\n\tconst position = elements.reduce( ( previousValue, currentValue ) => {\n\t\tif ( typeof currentValue?.slug === 'string' ) {\n\t\t\tconst matches = currentValue?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id >= previousValue ) {\n\t\t\t\t\treturn id + 1;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn previousValue;\n\t}, 1 );\n\n\treturn {\n\t\tname: sprintf(\n\t\t\t/ translators: %s: is an id for a custom color /\n\t\t\t__( 'Color %s' ),\n\t\t\tposition\n\t\t),\n\t\tslug: `${ slugPrefix }color-${ position }`,\n\t};\n}\n\nfunction ColorPickerPopover< T extends Color \| Gradient >( {\n\tisGradient,\n\telement,\n\tonChange,\n\tpopoverProps: receivedPopoverProps,\n\tonClose = () => {},\n}: ColorPickerPopoverProps< T > ) {\n\tconst popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =\n\t\tuseMemo(\n\t\t\t() => ( {\n\t\t\t\tshift: true,\n\t\t\t\toffset: 20,\n\t\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t\t// popover edge.\n\t\t\t\tresize: false,\n\t\t\t\tplacement: 'left-start',\n\t\t\t\t...receivedPopoverProps,\n\t\t\t\tclassName: clsx(\n\t\t\t\t\t'components-palette-edit__popover',\n\t\t\t\t\treceivedPopoverProps?.className\n\t\t\t\t),\n\t\t\t} ),\n\t\t\t[ receivedPopoverProps ]\n\t\t);\n\n\treturn (\n\t\t<Popover { ...popoverProps } onClose={ onClose }>\n\t\t\t{ ! isGradient && (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tcolor={ element.color }\n\t\t\t\t\tenableAlpha\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\tcolor: newColor,\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\t{ isGradient && (\n\t\t\t\t<div className=\"components-palette-edit__popover-gradient-picker\">\n\t\t\t\t\t<CustomGradientPicker\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tvalue={ element.gradient }\n\t\t\t\t\t\tonChange={ ( newGradient ) => {\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\tgradient: newGradient,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Popover>\n\t);\n}\n\nfunction Option< T extends Color \| Gradient >( {\n\tcanOnlyChangeValues,\n\telement,\n\tonChange,\n\tonRemove,\n\tpopoverProps: receivedPopoverProps,\n\tslugPrefix,\n\tisGradient,\n}: OptionProps< T > ) {\n\tconst value = isGradient ? element.gradient : element.color;\n\tconst [ isEditingColor, setIsEditingColor ] = useState( false );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\t...receivedPopoverProps,\n\t\t\t// Use the custom palette color item as the popover anchor.\n\t\t\tanchor: popoverAnchor,\n\t\t} ),\n\t\t[ popoverAnchor, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<PaletteItem ref={ setPopoverAnchor } as=\"div\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsEditingColor( true );\n\t\t\t\t\t} }\n\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t__( 'Edit: %s' ),\n\t\t\t\t\t\telement.name.trim().length ? element.name : value\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ { padding: 0 } }\n\t\t\t\t>\n\t\t\t\t\t<IndicatorStyled colorValue={ value } />\n\t\t\t\t</Button>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ ! canOnlyChangeValues ? (\n\t\t\t\t\t\t<NameInput\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Gradient name' )\n\t\t\t\t\t\t\t\t\t: __( 'Color name' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ element.name }\n\t\t\t\t\t\t\tonChange={ ( nextName?: string ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...element,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug:\n\t\t\t\t\t\t\t\t\t\tslugPrefix +\n\t\t\t\t\t\t\t\t\t\tkebabCase( nextName ?? '' ),\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<NameContainer>\n\t\t\t\t\t\t\t{ element.name.trim().length\n\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t: / Fall back to non-breaking space to maintain height /\n\t\t\t\t\t\t\t\t '\\u00A0' }\n\t\t\t\t\t\t</NameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ lineSolid }\n\t\t\t\t\t\t\tlabel={ sprintf(\n\t\t\t\t\t\t\t\t// translators: %s is a color or gradient name, e.g. \"Red\".\n\t\t\t\t\t\t\t\t__( 'Remove color: %s' ),\n\t\t\t\t\t\t\t\telement.name.trim().length\n\t\t\t\t\t\t\t\t\t? element.name\n\t\t\t\t\t\t\t\t\t: value\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ onRemove }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isEditingColor && (\n\t\t\t\t<ColorPickerPopover\n\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\telement={ element }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonClose={ () => setIsEditingColor( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</PaletteItem>\n\t);\n}\n\nfunction PaletteEditListView< T extends Color \| Gradient >( {\n\telements,\n\tonChange,\n\tcanOnlyChangeValues,\n\tslugPrefix,\n\tisGradient,\n\tpopoverProps,\n\taddColorRef,\n}: PaletteEditListViewProps< T > ) {\n\t// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n\tconst elementsReference = useRef< typeof elements >();\n\tuseEffect( () => {\n\t\telementsReference.current = elements;\n\t}, [ elements ] );\n\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isRounded>\n\t\t\t\t{ elements.map( ( element, index ) => (\n\t\t\t\t\t<Option\n\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\telement={ element }\n\t\t\t\t\t\tonChange={ ( newElement ) => {\n\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t( currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\treturn currentElement;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tconst newElements = elements.filter(\n\t\t\t\t\t\t\t\t( _currentElement, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tnewElements.length ? newElements : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\taddColorRef.current?.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY: Color[] = [];\n\n/\n Allows editing a palette of colors or gradients.\n \n ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n * const [ controlledColors, setControlledColors ] = useState( colors );\n \n return (\n * <PaletteEdit\n * colors={ controlledColors }\n * onChange={ ( newColors?: Color[] ) => {\n * setControlledColors( newColors );\n * } }\n * paletteLabel=\"Here is a label\"\n * />\n * );\n * };\n * ```\n */\nexport function PaletteEdit( {\n\tgradients,\n\tcolors = EMPTY_ARRAY,\n\tonChange,\n\tpaletteLabel,\n\tpaletteLabelHeadingLevel = 2,\n\temptyMessage,\n\tcanOnlyChangeValues,\n\tcanReset,\n\tslugPrefix = '',\n\tpopoverProps,\n}: PaletteEditProps ) {\n\tconst isGradient = !! gradients;\n\tconst elements = isGradient ? gradients : colors;\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingElement, setEditingElement ] = useState<\n\t\tnumber \| null \| undefined\n\t>( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\t!! editingElement &&\n\t\telements[ editingElement ] &&\n\t\t! elements[ editingElement ].slug;\n\tconst elementsLength = elements.length;\n\tconst hasElements = elementsLength > 0;\n\tconst debounceOnChange = useDebounce( onChange, 100 );\n\tconst onSelectPaletteItem = useCallback(\n\t\t(\n\t\t\tvalue?: PaletteElement[ keyof PaletteElement ],\n\t\t\tnewEditingElementIndex?: number\n\t\t) => {\n\t\t\tconst selectedElement =\n\t\t\t\tnewEditingElementIndex === undefined\n\t\t\t\t\t? undefined\n\t\t\t\t\t: elements[ newEditingElementIndex ];\n\t\t\tconst key = isGradient ? 'gradient' : 'color';\n\t\t\t// Ensures that the index returned matches a known element value.\n\t\t\tif ( !! selectedElement && selectedElement[ key ] === value ) {\n\t\t\t\tsetEditingElement( newEditingElementIndex );\n\t\t\t} else {\n\t\t\t\tsetIsEditing( true );\n\t\t\t}\n\t\t},\n\t\t[ isGradient, elements ]\n\t);\n\n\tconst addColorRef = useRef< HTMLButtonElement \| null >( null );\n\n\treturn (\n\t\t<PaletteEditStyles>\n\t\t\t<HStack>\n\t\t\t\t<PaletteHeading level={ paletteLabelHeadingLevel }>\n\t\t\t\t\t{ paletteLabel }\n\t\t\t\t</PaletteHeading>\n\t\t\t\t<PaletteActionsContainer>\n\t\t\t\t\t{ hasElements && isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\tsetEditingElement( null );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Done' ) }\n\t\t\t\t\t\t</DoneButton>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tref={ addColorRef }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t? __( 'Add gradient' )\n\t\t\t\t\t\t\t\t\t: __( 'Add color' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst { name, slug } =\n\t\t\t\t\t\t\t\t\tgetNameAndSlugForPosition(\n\t\t\t\t\t\t\t\t\t\telements,\n\t\t\t\t\t\t\t\t\t\tslugPrefix\n\t\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\tif ( !! gradients ) {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...gradients,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tgradient: DEFAULT_GRADIENT,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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} else {\n\t\t\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tcolor: DEFAULT_COLOR,\n\t\t\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t\t\t\tslug,\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\tsetIsEditing( true );\n\t\t\t\t\t\t\t\tsetEditingElement( elements.length );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ hasElements &&\n\t\t\t\t\t\t( ! isEditing \|\|\n\t\t\t\t\t\t\t! canOnlyChangeValues \|\|\n\t\t\t\t\t\t\tcanReset ) && (\n\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisGradient\n\t\t\t\t\t\t\t\t\t\t? __( 'Gradient options' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Color options' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ ( { onClose }: { onClose: () => void } ) => (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t\t{ ! isEditing && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Show details' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ ! canOnlyChangeValues && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-palette-edit__menu-button\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all gradients'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove all colors'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t{ canReset && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetEditingElement(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnull\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ isGradient\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Reset gradient' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Reset colors' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t) }\n\t\t\t\t</PaletteActionsContainer>\n\t\t\t</HStack>\n\t\t\t{ hasElements && (\n\t\t\t\t<PaletteEditContents>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<PaletteEditListView< ( typeof elements )[ number ] >\n\t\t\t\t\t\t\tcanOnlyChangeValues={ canOnlyChangeValues }\n\t\t\t\t\t\t\telements={ elements }\n\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tslugPrefix={ slugPrefix }\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\taddColorRef={ addColorRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing && editingElement !== null && (\n\t\t\t\t\t\t<ColorPickerPopover\n\t\t\t\t\t\t\tisGradient={ isGradient }\n\t\t\t\t\t\t\tonClose={ () => setEditingElement( null ) }\n\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\tnewElement: ( typeof elements )[ number ]\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tdebounceOnChange(\n\t\t\t\t\t\t\t\t\t// @ts-expect-error TODO: Don't know how to resolve\n\t\t\t\t\t\t\t\t\telements.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcurrentElement: ( typeof elements )[ number ],\n\t\t\t\t\t\t\t\t\t\t\tcurrentIndex: number\n\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === editingElement\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn newElement;\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\treturn currentElement;\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} }\n\t\t\t\t\t\t\telement={ elements[ editingElement ?? -1 ] }\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isEditing &&\n\t\t\t\t\t\t( isGradient ? (\n\t\t\t\t\t\t\t<GradientPicker\n\t\t\t\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomGradients\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\t\tonChange={ onSelectPaletteItem }\n\t\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) ) }\n\t\t\t\t</PaletteEditContents>\n\t\t\t) }\n\t\t\t{ ! hasElements && emptyMessage && (\n\t\t\t\t<PaletteEditContents>{ emptyMessage }</PaletteEditContents>\n\t\t\t) }\n\t\t</PaletteEditStyles>\n\t);\n}\n\nexport default PaletteEdit;\n"],"mappings":"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","ignoreList":[]}

package/build/palette-edit/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/palette-edit/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { Key, MouseEventHandler } from 'react';\n\n/\n Internal dependencies\n /\nimport type Popover from '../popover';\nimport type { HeadingSize } from '../heading/types';\n\nexport type Color = {\n\tcolor: string;\n\tname: string;\n\tslug: string;\n\tgradient?: never;\n};\n\nexport type Gradient = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n\tcolor?: never;\n};\n\nexport type PaletteElement = Color \| Gradient;\n\nexport type BasePaletteEdit = {\n\t/\n\t Whether the user can only change the color or gradient values.\n\t * If true, they cannot change names or delete values.\n\t \n\t @default false\n\t /\n\tcanOnlyChangeValues?: boolean;\n\t/\n\t Whether the user can reset the editor.\n\t \n\t @default false\n\t /\n\tcanReset?: boolean;\n\t/\n\t A message to show if there's nothing to edit.\n\t /\n\temptyMessage?: string;\n\t/\n\t A heading label for the palette.\n\t /\n\tpaletteLabel: string;\n\t/\n\t The label's heading level.\n\t \n\t @default 2\n\t /\n\tpaletteLabelHeadingLevel?: HeadingSize;\n\t/\n\t The prefix for the element slug.\n\t \n\t @default ''\n\t /\n\tslugPrefix?: string;\n\t/\n\t Props to pass through to the underlying Popover component.\n\t /\n\tpopoverProps?: Omit<\n\t\tReact.ComponentPropsWithoutRef< typeof Popover >,\n\t\t'children'\n\t>;\n};\n\ntype PaletteEditColors = {\n\t/\n\t The colors in the palette.\n\t /\n\tcolors?: Color[];\n\t/\n\t Runs on changing the value.\n\t /\n\tonChange: ( values?: Color[] ) => void;\n\tgradients?: never;\n};\n\ntype PaletteEditGradients = {\n\t/\n\t The gradients in the palette.\n\t /\n\tgradients: Gradient[];\n\t/\n\t Runs on changing the value.\n\t */\n\tonChange: ( values?: Gradient[] ) => void;\n\tcolors?: never;\n};\n\nexport type PaletteEditProps = BasePaletteEdit &\n\t( PaletteEditColors \| PaletteEditGradients );\n\ntype EditingElement = number \| null;\n\nexport type ColorPickerPopoverProps< T extends Color \| Gradient > = {\n\telement: T;\n\tonChange: ( newElement: T ) => void;\n\tisGradient?: T extends Gradient ? true : false;\n\tonClose?: () => void;\n\tpopoverProps?: PaletteEditProps[ 'popoverProps' ];\n};\n\nexport type NameInputProps = {\n\tlabel: string;\n\tonChange: ( nextName?: PaletteElement[ 'name' ] ) => void;\n\tvalue: PaletteElement[ 'name' ];\n};\n\nexport type OptionProps< T extends Color \| Gradient > = {\n\telement: T;\n\tonChange: ( newElement: T ) => void;\n\tisGradient: T extends Gradient ? true : false;\n\tcanOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];\n\~~tisEditing: boolean;\n\~~tkey: Key;\n\tonRemove: MouseEventHandler< HTMLButtonElement >;\n\~~tonStartEditing: () => void;\n\tonStopEditing: () => void;\n\~~tpopoverProps?: PaletteEditProps[ 'popoverProps' ];\n\tslugPrefix: string;\n};\n\nexport type PaletteEditListViewProps< T extends Color \| Gradient > = {\n\telements: T[];\n\tonChange: ( newElements?: T[] ) => void;\n\tisGradient: T extends Gradient ? true : false;\n\tcanOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];\n\teditingElement?: EditingElement;\n\tpopoverProps?: PaletteEditProps[ 'popoverProps' ];\n\tsetEditingElement: ( newEditingElement?: EditingElement ) => void;\n\tslugPrefix: string;\n};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/palette-edit/types.ts"],"sourcesContent":["/*\n External dependencies\n /\nimport type { Key, MouseEventHandler } from 'react';\n\n/\n Internal dependencies\n /\nimport type Popover from '../popover';\nimport type { HeadingSize } from '../heading/types';\n\nexport type Color = {\n\tcolor: string;\n\tname: string;\n\tslug: string;\n\tgradient?: never;\n};\n\nexport type Gradient = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n\tcolor?: never;\n};\n\nexport type PaletteElement = Color \| Gradient;\n\nexport type BasePaletteEdit = {\n\t/\n\t Whether the user can only change the color or gradient values.\n\t * If true, they cannot change names or delete values.\n\t \n\t @default false\n\t /\n\tcanOnlyChangeValues?: boolean;\n\t/\n\t Whether the user can reset the editor.\n\t \n\t @default false\n\t /\n\tcanReset?: boolean;\n\t/\n\t A message to show if there's nothing to edit.\n\t /\n\temptyMessage?: string;\n\t/\n\t A heading label for the palette.\n\t /\n\tpaletteLabel: string;\n\t/\n\t The label's heading level.\n\t \n\t @default 2\n\t /\n\tpaletteLabelHeadingLevel?: HeadingSize;\n\t/\n\t The prefix for the element slug.\n\t \n\t @default ''\n\t /\n\tslugPrefix?: string;\n\t/\n\t Props to pass through to the underlying Popover component.\n\t /\n\tpopoverProps?: Omit<\n\t\tReact.ComponentPropsWithoutRef< typeof Popover >,\n\t\t'children'\n\t>;\n};\n\ntype PaletteEditColors = {\n\t/\n\t The colors in the palette.\n\t /\n\tcolors?: Color[];\n\t/\n\t Runs on changing the value.\n\t /\n\tonChange: ( values?: Color[] ) => void;\n\tgradients?: never;\n};\n\ntype PaletteEditGradients = {\n\t/\n\t The gradients in the palette.\n\t /\n\tgradients: Gradient[];\n\t/\n\t Runs on changing the value.\n\t */\n\tonChange: ( values?: Gradient[] ) => void;\n\tcolors?: never;\n};\n\nexport type PaletteEditProps = BasePaletteEdit &\n\t( PaletteEditColors \| PaletteEditGradients );\n\ntype EditingElement = number \| null;\n\nexport type ColorPickerPopoverProps< T extends Color \| Gradient > = {\n\telement: T;\n\tonChange: ( newElement: T ) => void;\n\tisGradient?: T extends Gradient ? true : false;\n\tonClose?: () => void;\n\tpopoverProps?: PaletteEditProps[ 'popoverProps' ];\n};\n\nexport type NameInputProps = {\n\tlabel: string;\n\tonChange: ( nextName?: PaletteElement[ 'name' ] ) => void;\n\tvalue: PaletteElement[ 'name' ];\n};\n\nexport type OptionProps< T extends Color \| Gradient > = {\n\telement: T;\n\tonChange: ( newElement: T ) => void;\n\tisGradient: T extends Gradient ? true : false;\n\tcanOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];\n\tkey: Key;\n\tonRemove: MouseEventHandler< HTMLButtonElement >;\n\tpopoverProps?: PaletteEditProps[ 'popoverProps' ];\n\tslugPrefix: string;\n};\n\nexport type PaletteEditListViewProps< T extends Color \| Gradient > = {\n\telements: T[];\n\tonChange: ( newElements?: T[] ) => void;\n\tisGradient: T extends Gradient ? true : false;\n\tcanOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];\n\taddColorRef: React.RefObject< HTMLButtonElement >;\n\teditingElement?: EditingElement;\n\tpopoverProps?: PaletteEditProps[ 'popoverProps' ];\n\tsetEditingElement: ( newEditingElement?: EditingElement ) => void;\n\tslugPrefix: string;\n};\n"],"mappings":"","ignoreList":[]}

package/build-module/palette-edit/index.js CHANGED Viewed

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
-import { __experimentalUseFocusOutside as useFocusOutside, useDebounce } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -126,16 +126,13 @@ function Option({
   canOnlyChangeValues,
   element,
   onChange,
-  isEditing,
-  onStartEditing,
   onRemove,
-  onStopEditing,
   popoverProps: receivedPopoverProps,
   slugPrefix,
   isGradient
 }) {
-  const focusOutsideProps = useFocusOutside(onStopEditing);
   const value = isGradient ? element.gradient : element.color;
+  const [isEditingColor, setIsEditingColor] = useState(false);
   // Use internal state instead of a ref to make sure that the component
   // re-renders when the popover's anchor updates.
@@ -146,22 +143,25 @@ function Option({
     anchor: popoverAnchor
   }), [popoverAnchor, receivedPopoverProps]);
   return /*#__PURE__*/_jsxs(PaletteItem, {
-    className: isEditing ? 'is-selected' : undefined,
-    as: isEditing ? 'div' : 'button',
-    onClick: onStartEditing,
-    "aria-label": isEditing ? undefined : sprintf(
-    // translators: %s is a color or gradient name, e.g. "Red".
-    __('Edit: %s'), element.name.trim().length ? element.name : value),
     ref: setPopoverAnchor,
-    ...(isEditing ? {
-      ...focusOutsideProps
-    } : {}),
+    as: "div",
     children: [/*#__PURE__*/_jsxs(HStack, {
       justify: "flex-start",
-      children: [/*#__PURE__*/_jsx(IndicatorStyled, {
-        colorValue: value
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => {
+          setIsEditingColor(true);
+        },
+        "aria-label": sprintf(
+        // translators: %s is a color or gradient name, e.g. "Red".
+        __('Edit: %s'), element.name.trim().length ? element.name : value),
+        style: {
+          padding: 0
+        },
+        children: /*#__PURE__*/_jsx(IndicatorStyled, {
+          colorValue: value
+        })
       }), /*#__PURE__*/_jsx(FlexItem, {
-        children: isEditing && !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {
+        children: !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {
           label: isGradient ? __('Gradient name') : __('Color name'),
           value: element.name,
           onChange: nextName => onChange({
@@ -173,31 +173,33 @@ function Option({
           children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
           '\u00A0'
         })
-      }), isEditing && !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {
+      }), !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {
         children: /*#__PURE__*/_jsx(RemoveButton, {
           size: "small",
           icon: lineSolid,
-          label: __('Remove color'),
+          label: sprintf(
+          // translators: %s is a color or gradient name, e.g. "Red".
+          __('Remove color: %s'), element.name.trim().length ? element.name : value),
           onClick: onRemove
         })
       })]
-    }), isEditing && /*#__PURE__*/_jsx(ColorPickerPopover, {
+    }), isEditingColor && /*#__PURE__*/_jsx(ColorPickerPopover, {
       isGradient: isGradient,
       onChange: onChange,
       element: element,
-      popoverProps: popoverProps
+      popoverProps: popoverProps,
+      onClose: () => setIsEditingColor(false)
     })]
   });
 }
 function PaletteEditListView({
   elements,
   onChange,
-  editingElement,
-  setEditingElement,
   canOnlyChangeValues,
   slugPrefix,
   isGradient,
-  popoverProps
+  popoverProps,
+  addColorRef
 }) {
   // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
   const elementsReference = useRef();
@@ -213,11 +215,6 @@ function PaletteEditListView({
         isGradient: isGradient,
         canOnlyChangeValues: canOnlyChangeValues,
         element: element,
-        onStartEditing: () => {
-          if (editingElement !== index) {
-            setEditingElement(index);
-          }
-        },
         onChange: newElement => {
           debounceOnChange(elements.map((currentElement, currentIndex) => {
             if (currentIndex === index) {
@@ -227,7 +224,6 @@ function PaletteEditListView({
           }));
         },
         onRemove: () => {
-          setEditingElement(null);
           const newElements = elements.filter((_currentElement, currentIndex) => {
             if (currentIndex === index) {
               return false;
@@ -235,12 +231,7 @@ function PaletteEditListView({
             return true;
           });
           onChange(newElements.length ? newElements : undefined);
-        },
-        isEditing: index === editingElement,
-        onStopEditing: () => {
-          if (index === editingElement) {
-            setEditingElement(null);
-          }
+          addColorRef.current?.focus();
         },
         slugPrefix: slugPrefix,
         popoverProps: popoverProps
@@ -300,6 +291,7 @@ export function PaletteEdit({
       setIsEditing(true);
     }
   }, [isGradient, elements]);
+  const addColorRef = useRef(null);
   return /*#__PURE__*/_jsxs(PaletteEditStyles, {
     children: [/*#__PURE__*/_jsxs(HStack, {
       children: [/*#__PURE__*/_jsx(PaletteHeading, {
@@ -314,6 +306,7 @@ export function PaletteEdit({
           },
           children: __('Done')
         }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {
+          ref: addColorRef,
           size: "small",
           isPressed: isAdding,
           icon: plus,
@@ -388,11 +381,10 @@ export function PaletteEdit({
         // @ts-expect-error TODO: Don't know how to resolve
         ,
         onChange: onChange,
-        editingElement: editingElement,
-        setEditingElement: setEditingElement,
         slugPrefix: slugPrefix,
         isGradient: isGradient,
-        popoverProps: popoverProps
+        popoverProps: popoverProps,
+        addColorRef: addColorRef
       }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {
         isGradient: isGradient,
         onClose: () => setEditingElement(null),