@wordpress/components 28.1.0 → 28.2.0

package/build/custom-select-control-v2/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control-v2/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type * as Ariakit from '@ariakit/react';\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\nexport type CustomSelectStore = {\n\t/**\n\t * The store object returned by Ariakit's `useSelectStore` hook.\n\t */\n\tstore: Ariakit.SelectStore;\n};\n\nexport type CustomSelectContext = CustomSelectStore | undefined;\n\ntype CustomSelectSize< Size = 'compact' | 'default' > = {\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: Size;\n};\n\nexport type CustomSelectButtonSize = CustomSelectSize<\n\t'compact' | 'default' | 'small'\n>;\n\nexport type CustomSelectButtonProps = {\n\t/**\n\t * An optional default value for the control when used in uncontrolled mode.\n\t * If left `undefined`, the first non-disabled item will be used.\n\t */\n\tdefaultValue?: string | string[];\n\t/**\n\t * A function that receives the new value of the input.\n\t */\n\tonChange?: ( newValue: string | string[] ) => void;\n\t/**\n\t * Can be used to render select UI with custom styled values.\n\t */\n\trenderSelectedValue?: (\n\t\tselectedValue: string | string[]\n\t) => React.ReactNode;\n\t/**\n\t * The value of the control when used in uncontrolled mode.\n\t */\n\tvalue?: string | string[];\n};\n\nexport type _CustomSelectProps = CustomSelectButtonProps & {\n\t/**\n\t * The child elements. This should be composed of `CustomSelectItem` components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Accessible label for the control.\n\t */\n\tlabel: string;\n};\n\nexport type CustomSelectProps = _CustomSelectProps &\n\tCustomSelectButtonProps &\n\tCustomSelectSize;\n\n/**\n * The legacy object structure for the options array.\n */\ntype LegacyOption = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\t__experimentalHint?: string;\n};\n\n/**\n * The legacy object returned from the onChange event.\n */\ntype LegacyOnChangeObject = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: LegacyOption;\n};\n\nexport type LegacyCustomSelectProps = {\n\t/**\n\t * Optional classname for the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Pass in a description that will be shown to screen readers associated with the\n\t * select trigger button. If no value is passed, the text \"Currently selected:\n\t * selectedItem.name\" will be used fully translated.\n\t */\n\tdescribedBy?: string;\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t */\n\tonChange?: ( newValue: LegacyOnChangeObject ) => void;\n\t/**\n\t * A handler for `onBlur` events.\n\t *\n\t * @ignore\n\t */\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onFocus` events.\n\t *\n\t * @ignore\n\t */\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onMouseOver` events.\n\t *\n\t * @ignore\n\t */\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onMouseOut` events.\n\t *\n\t * @ignore\n\t */\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * The options that can be chosen from.\n\t */\n\toptions: Array< LegacyOption >;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small' | '__unstable-large';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: LegacyOption;\n\t/**\n\t * Legacy way to add additional text to the right of each option.\n\t *\n\t * @default false\n\t */\n\t__experimentalShowSelectedHint?: boolean;\n\t/**\n\t * Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t *\n\t * @deprecated\n\t * @ignore\n\t */\n\t__nextUnconstrainedWidth?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type CustomSelectItemProps = {\n\t/**\n\t * The value of the select item. This will be used as the children if\n\t * children are left `undefined`.\n\t */\n\tvalue: string;\n\t/**\n\t * The children to display for each select item. The `value` will be\n\t * used if left `undefined`.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * If true, the item will be disabled.\n\t *\n\t * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control-v2/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type * as Ariakit from '@ariakit/react';\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\nexport type CustomSelectStore = {\n\t/**\n\t * The store object returned by Ariakit's `useSelectStore` hook.\n\t */\n\tstore: Ariakit.SelectStore;\n};\n\nexport type CustomSelectContext = CustomSelectStore | undefined;\n\ntype CustomSelectSize< Size = 'compact' | 'default' > = {\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: Size;\n};\n\nexport type CustomSelectButtonSize = CustomSelectSize<\n\t'compact' | 'default' | 'small'\n>;\n\nexport type CustomSelectButtonProps = {\n\t/**\n\t * An optional default value for the control when used in uncontrolled mode.\n\t * If left `undefined`, the first non-disabled item will be used.\n\t */\n\tdefaultValue?: string | string[];\n\t/**\n\t * A function that receives the new value of the input.\n\t */\n\tonChange?: ( newValue: string | string[] ) => void;\n\t/**\n\t * Can be used to render select UI with custom styled values.\n\t */\n\trenderSelectedValue?: (\n\t\tselectedValue: string | string[]\n\t) => React.ReactNode;\n\t/**\n\t * The value of the control when used in uncontrolled mode.\n\t */\n\tvalue?: string | string[];\n};\n\nexport type _CustomSelectProps = CustomSelectButtonProps & {\n\t/**\n\t * The child elements. This should be composed of `CustomSelectItem` components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t * @default false\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Accessible label for the control.\n\t */\n\tlabel: string;\n};\n\nexport type CustomSelectProps = _CustomSelectProps &\n\tCustomSelectButtonProps &\n\tCustomSelectSize;\n\n/**\n * The legacy object structure for the options array.\n */\ntype LegacyOption = {\n\tkey: string;\n\tname: string;\n\tstyle?: React.CSSProperties;\n\tclassName?: string;\n\t__experimentalHint?: string;\n\t[ key: string ]: any;\n};\n\n/**\n * The legacy object returned from the onChange event.\n */\ntype LegacyOnChangeObject = {\n\thighlightedIndex?: number;\n\tinputValue?: string;\n\tisOpen?: boolean;\n\ttype?: string;\n\tselectedItem: LegacyOption;\n};\n\nexport type LegacyCustomSelectProps = {\n\t/**\n\t * Optional classname for the component.\n\t */\n\tclassName?: string;\n\t/**\n\t * Used to visually hide the label. It will always be visible to screen readers.\n\t *\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * Pass in a description that will be shown to screen readers associated with the\n\t * select trigger button. If no value is passed, the text \"Currently selected:\n\t * selectedItem.name\" will be used fully translated.\n\t */\n\tdescribedBy?: string;\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * Function called with the control's internal state changes. The `selectedItem`\n\t * property contains the next selected item.\n\t */\n\tonChange?: ( newValue: LegacyOnChangeObject ) => void;\n\t/**\n\t * A handler for `onBlur` events.\n\t *\n\t * @ignore\n\t */\n\tonBlur?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onFocus` events.\n\t *\n\t * @ignore\n\t */\n\tonFocus?: FocusEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onMouseOver` events.\n\t *\n\t * @ignore\n\t */\n\tonMouseOut?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * A handler for `onMouseOut` events.\n\t *\n\t * @ignore\n\t */\n\tonMouseOver?: MouseEventHandler< HTMLButtonElement >;\n\t/**\n\t * The options that can be chosen from.\n\t */\n\toptions: Array< LegacyOption >;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small' | '__unstable-large';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: LegacyOption;\n\t/**\n\t * Legacy way to add additional text to the right of each option.\n\t *\n\t * @default false\n\t */\n\t__experimentalShowSelectedHint?: boolean;\n\t/**\n\t * Opt-in prop for an unconstrained width style which became the default in\n\t * WordPress 6.5. The prop is no longer needed and can be safely removed.\n\t *\n\t * @deprecated\n\t * @ignore\n\t */\n\t__nextUnconstrainedWidth?: boolean;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type CustomSelectItemProps = {\n\t/**\n\t * The value of the select item. This will be used as the children if\n\t * children are left `undefined`.\n\t */\n\tvalue: string;\n\t/**\n\t * The children to display for each select item. The `value` will be\n\t * used if left `undefined`.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * If true, the item will be disabled.\n\t *\n\t * You will need to add your own styles (e.g. reduced opacity) to visually show that they are disabled.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/build/drop-zone/index.js

@@ -12,7 +12,6 @@ var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _dom = require("@wordpress/dom");
 var _compose = require("@wordpress/compose");
-var _animation = require("../animation");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -26,80 +25,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-const backdrop = {
-  hidden: {
-    opacity: 0
-  },
-  show: {
-    opacity: 1,
-    transition: {
-      type: 'tween',
-      duration: 0.2,
-      delay: 0,
-      delayChildren: 0.1
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.2,
-      delayChildren: 0
-    }
-  }
-};
-const foreground = {
-  hidden: {
-    opacity: 0,
-    scale: 0.9
-  },
-  show: {
-    opacity: 1,
-    scale: 1,
-    transition: {
-      duration: 0.1
-    }
-  },
-  exit: {
-    opacity: 0,
-    scale: 0.9
-  }
-};
-function DropIndicator({
-  label
-}) {
-  const disableMotion = (0, _compose.useReducedMotion)();
-  const children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation.__unstableMotion.div, {
-    variants: backdrop,
-    initial: disableMotion ? 'show' : 'hidden',
-    animate: "show",
-    exit: disableMotion ? 'show' : 'exit',
-    className: "components-drop-zone__content"
-    // Without this, when this div is shown,
-    // Safari calls a onDropZoneLeave causing a loop because of this bug
-    // https://bugs.webkit.org/show_bug.cgi?id=66547
-    ,
-    style: {
-      pointerEvents: 'none'
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_animation.__unstableMotion.div, {
-      variants: foreground,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: _icons.upload,
-        className: "components-drop-zone__content-icon"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "components-drop-zone__content-text",
-        children: label ? label : (0, _i18n.__)('Drop files to upload')
-      })]
-    })
-  });
-  if (disableMotion) {
-    return children;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation.__unstableAnimatePresence, {
-    children: children
-  });
-}
-
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
  *
@@ -141,7 +66,7 @@ function DropZoneComponent({
 
       /**
        * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-       * The order of the checks is important to recognise the HTML drop.
+       * The order of the checks is important to recognize the HTML drop.
        */
       if (html && onHTMLDrop) {
         onHTMLDrop(html);
@@ -157,7 +82,7 @@ function DropZoneComponent({
 
       /**
        * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
-       * The order of the checks is important to recognise the HTML drop.
+       * The order of the checks is important to recognize the HTML drop.
        */
       if (event.dataTransfer?.types.includes('text/html')) {
         _type = 'html';
@@ -182,6 +107,8 @@ function DropZoneComponent({
   });
   const classes = (0, _clsx.default)('components-drop-zone', className, {
     'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop),
+    'has-dragged-out': !isDraggingOverElement,
+    // Keeping the following classnames for legacy purposes
     'is-dragging-over-document': isDraggingOverDocument,
     'is-dragging-over-element': isDraggingOverElement,
     [`is-dragging-${type}`]: !!type
@@ -190,8 +117,18 @@ function DropZoneComponent({
     ...restProps,
     ref: ref,
     className: classes,
-    children: isDraggingOverElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropIndicator, {
-      label: label
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "components-drop-zone__content",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "components-drop-zone__content-inner",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: _icons.upload,
+          className: "components-drop-zone__content-icon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "components-drop-zone__content-text",
+          children: label ? label : (0, _i18n.__)('Drop files to upload')
+        })]
+      })
     })
   });
 }

package/build/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_animation","_jsxRuntime","backdrop","hidden","opacity","show","transition","type","duration","delay","delayChildren","exit","foreground","scale","DropIndicator","label","disableMotion","useReducedMotion","children","jsx","__unstableMotion","div","variants","initial","animate","className","style","pointerEvents","jsxs","Icon","icon","upload","__","__unstableAnimatePresence","DropZoneComponent","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport {\n\t__experimentalUseDropZone as useDropZone,\n\tuseReducedMotion,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst backdrop = {\n\thidden: { opacity: 0 },\n\tshow: {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\ttype: 'tween',\n\t\t\tduration: 0.2,\n\t\t\tdelay: 0,\n\t\t\tdelayChildren: 0.1,\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.2,\n\t\t\tdelayChildren: 0,\n\t\t},\n\t},\n};\n\nconst foreground = {\n\thidden: { opacity: 0, scale: 0.9 },\n\tshow: {\n\t\topacity: 1,\n\t\tscale: 1,\n\t\ttransition: {\n\t\t\tduration: 0.1,\n\t\t},\n\t},\n\texit: { opacity: 0, scale: 0.9 },\n};\n\nfunction DropIndicator( { label }: { label?: string } ) {\n\tconst disableMotion = useReducedMotion();\n\tconst children = (\n\t\t<motion.div\n\t\t\tvariants={ backdrop }\n\t\t\tinitial={ disableMotion ? 'show' : 'hidden' }\n\t\t\tanimate=\"show\"\n\t\t\texit={ disableMotion ? 'show' : 'exit' }\n\t\t\tclassName=\"components-drop-zone__content\"\n\t\t\t// Without this, when this div is shown,\n\t\t\t// Safari calls a onDropZoneLeave causing a loop because of this bug\n\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\t\t\tstyle={ { pointerEvents: 'none' } }\n\t\t>\n\t\t\t<motion.div variants={ foreground }>\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ upload }\n\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t/>\n\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t</span>\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n\n\tif ( disableMotion ) {\n\t\treturn children;\n\t}\n\n\treturn <AnimatePresence>{ children }</AnimatePresence>;\n}\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n *   const [ hasDropped, setHasDropped ] = useState( false );\n *\n *   return (\n *     <div>\n *       { hasDropped ? 'Dropped!' : 'Drop something here' }\n *       <DropZone\n *         onFilesDrop={ () => setHasDropped( true ) }\n *         onHTMLDrop={ () => setHasDropped( true ) }\n *         onDrop={ () => setHasDropped( true ) }\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognise the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognise the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t{ isDraggingOverElement && <DropIndicator label={ label } /> }\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_element","_icons","_dom","_compose","_jsxRuntime","DropZoneComponent","className","label","onFilesDrop","onHTMLDrop","onDrop","restProps","isDraggingOverDocument","setIsDraggingOverDocument","useState","isDraggingOverElement","setIsDraggingOverElement","type","setType","ref","useDropZone","event","files","dataTransfer","getFilesFromDataTransfer","html","getData","length","onDragStart","_type","types","includes","onDragEnd","undefined","onDragEnter","onDragLeave","classes","clsx","jsx","children","jsxs","Icon","icon","upload","__","_default","exports","default"],"sources":["@wordpress/components/src/drop-zone/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { upload, Icon } from '@wordpress/icons';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\nimport { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { DropType, DropZoneProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.\n *\n * ```jsx\n * import { DropZone } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDropZone = () => {\n *   const [ hasDropped, setHasDropped ] = useState( false );\n *\n *   return (\n *     <div>\n *       { hasDropped ? 'Dropped!' : 'Drop something here' }\n *       <DropZone\n *         onFilesDrop={ () => setHasDropped( true ) }\n *         onHTMLDrop={ () => setHasDropped( true ) }\n *         onDrop={ () => setHasDropped( true ) }\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function DropZoneComponent( {\n\tclassName,\n\tlabel,\n\tonFilesDrop,\n\tonHTMLDrop,\n\tonDrop,\n\t...restProps\n}: WordPressComponentProps< DropZoneProps, 'div', false > ) {\n\tconst [ isDraggingOverDocument, setIsDraggingOverDocument ] =\n\t\tuseState< boolean >();\n\tconst [ isDraggingOverElement, setIsDraggingOverElement ] =\n\t\tuseState< boolean >();\n\tconst [ type, setType ] = useState< DropType >();\n\tconst ref = useDropZone( {\n\t\tonDrop( event ) {\n\t\t\tconst files = event.dataTransfer\n\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t: [];\n\t\t\tconst html = event.dataTransfer?.getData( 'text/html' );\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( html && onHTMLDrop ) {\n\t\t\t\tonHTMLDrop( html );\n\t\t\t} else if ( files.length && onFilesDrop ) {\n\t\t\t\tonFilesDrop( files );\n\t\t\t} else if ( onDrop ) {\n\t\t\t\tonDrop( event );\n\t\t\t}\n\t\t},\n\t\tonDragStart( event ) {\n\t\t\tsetIsDraggingOverDocument( true );\n\n\t\t\tlet _type: DropType = 'default';\n\n\t\t\t/**\n\t\t\t * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.\n\t\t\t * The order of the checks is important to recognize the HTML drop.\n\t\t\t */\n\t\t\tif ( event.dataTransfer?.types.includes( 'text/html' ) ) {\n\t\t\t\t_type = 'html';\n\t\t\t} else if (\n\t\t\t\t// Check for the types because sometimes the files themselves\n\t\t\t\t// are only available on drop.\n\t\t\t\tevent.dataTransfer?.types.includes( 'Files' ) ||\n\t\t\t\t( event.dataTransfer\n\t\t\t\t\t? getFilesFromDataTransfer( event.dataTransfer )\n\t\t\t\t\t: []\n\t\t\t\t).length > 0\n\t\t\t) {\n\t\t\t\t_type = 'file';\n\t\t\t}\n\n\t\t\tsetType( _type );\n\t\t},\n\t\tonDragEnd() {\n\t\t\tsetIsDraggingOverDocument( false );\n\t\t\tsetType( undefined );\n\t\t},\n\t\tonDragEnter() {\n\t\t\tsetIsDraggingOverElement( true );\n\t\t},\n\t\tonDragLeave() {\n\t\t\tsetIsDraggingOverElement( false );\n\t\t},\n\t} );\n\n\tconst classes = clsx( 'components-drop-zone', className, {\n\t\t'is-active':\n\t\t\t( isDraggingOverDocument || isDraggingOverElement ) &&\n\t\t\t( ( type === 'file' && onFilesDrop ) ||\n\t\t\t\t( type === 'html' && onHTMLDrop ) ||\n\t\t\t\t( type === 'default' && onDrop ) ),\n\t\t'has-dragged-out': ! isDraggingOverElement,\n\t\t// Keeping the following classnames for legacy purposes\n\t\t'is-dragging-over-document': isDraggingOverDocument,\n\t\t'is-dragging-over-element': isDraggingOverElement,\n\t\t[ `is-dragging-${ type }` ]: !! type,\n\t} );\n\n\treturn (\n\t\t<div { ...restProps } ref={ ref } className={ classes }>\n\t\t\t<div className=\"components-drop-zone__content\">\n\t\t\t\t<div className=\"components-drop-zone__content-inner\">\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\tclassName=\"components-drop-zone__content-icon\"\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"components-drop-zone__content-text\">\n\t\t\t\t\t\t{ label ? label : __( 'Drop files to upload' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default DropZoneComponent;\n"],"mappings":"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","ignoreList":[]}

package/build/lock-unlock.js

@@ -12,7 +12,7 @@ var _privateApis = require("@wordpress/private-apis");
 const {
   lock,
   unlock
-} = (0, _privateApis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/components');
+} = (0, _privateApis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', '@wordpress/components');
 exports.unlock = unlock;
 exports.lock = lock;
 //# sourceMappingURL=lock-unlock.js.map

package/build/lock-unlock.js.map

@@ -1 +1 @@
-{"version":3,"names":["_privateApis","require","lock","unlock","__dangerousOptInToUnstableAPIsOnlyForCoreModules","exports"],"sources":["@wordpress/components/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',\n\t\t'@wordpress/components'\n\t);\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5B,IAAAC,6DAAgD,EAC/C,iHAAiH,EACjH,uBACD,CAAC;AAACC,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAAE,OAAA,CAAAH,IAAA,GAAAA,IAAA","ignoreList":[]}
+{"version":3,"names":["_privateApis","require","lock","unlock","__dangerousOptInToUnstableAPIsOnlyForCoreModules","exports"],"sources":["@wordpress/components/src/lock-unlock.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/components'\n\t);\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAM;EAAEC,IAAI;EAAEC;AAAO,CAAC,GAC5B,IAAAC,6DAAgD,EAC/C,+HAA+H,EAC/H,uBACD,CAAC;AAACC,OAAA,CAAAF,MAAA,GAAAA,MAAA;AAAAE,OAAA,CAAAH,IAAA,GAAAA,IAAA","ignoreList":[]}

package/build/palette-edit/index.js

@@ -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

@@ -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":[]}
+{"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

@@ -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":[]}
+{"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/custom-select-control-v2/custom-select.js

@@ -46,9 +46,7 @@ const CustomSelectButton = ({
     // move selection rather than open the popover
     ,
     showOnKeyDown: false,
-    children: /*#__PURE__*/_jsx("div", {
-      children: computedRenderSelectedValue(currentValue)
-    })
+    children: computedRenderSelectedValue(currentValue)
   });
 };
 function _CustomSelect(props) {