@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.1-next.b8c8708f3.0

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

@@ -1,56 +1,41 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { lineSolid, moreVertical, plus } from '@wordpress/icons';
-import { useDebounce } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { ColorPicker } from '../color-picker';
-import { FlexBlock, FlexItem } from '../flex';
-import { HStack } from '../h-stack';
-import { Item, ItemGroup } from '../item-group';
-import { VStack } from '../v-stack';
-import GradientPicker from '../gradient-picker';
-import ColorPalette from '../color-palette';
-import DropdownMenu from '../dropdown-menu';
-import Popover from '../popover';
-import { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from './styles';
-import { NavigableMenu } from '../navigable-container';
-import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
-import CustomGradientPicker from '../custom-gradient-picker';
-import { kebabCase } from '../utils/strings';
+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 { useDebounce } from "@wordpress/compose";
+import Button from "../button";
+import { ColorPicker } from "../color-picker";
+import { FlexBlock, FlexItem } from "../flex";
+import { HStack } from "../h-stack";
+import { Item, ItemGroup } from "../item-group";
+import { VStack } from "../v-stack";
+import GradientPicker from "../gradient-picker";
+import ColorPalette from "../color-palette";
+import DropdownMenu from "../dropdown-menu";
+import Popover from "../popover";
+import { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from "./styles";
+import { NavigableMenu } from "../navigable-container";
+import { DEFAULT_GRADIENT } from "../custom-gradient-picker/constants";
+import CustomGradientPicker from "../custom-gradient-picker";
+import { kebabCase } from "../utils/strings";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const DEFAULT_COLOR = '#000';
+const DEFAULT_COLOR = "#000";
 function NameInput({
   value,
   onChange,
   label
 }) {
-  return /*#__PURE__*/_jsx(NameInputControl, {
+  return /* @__PURE__ */ _jsx(NameInputControl, {
     size: "compact",
-    label: label,
+    label,
     hideLabelFromVision: true,
-    value: value,
-    onChange: onChange
+    value,
+    onChange
   });
 }
-
-/*
- * Deduplicates the slugs of the provided elements.
- */
-export function deduplicateElementSlugs(elements) {
+function deduplicateElementSlugs(elements) {
   const slugCounts = {};
-  return elements.map(element => {
+  return elements.map((element) => {
     var _newSlug;
     let newSlug;
     const {
@@ -66,22 +51,10 @@ export function deduplicateElementSlugs(elements) {
     };
   });
 }
-
-/**
- * Returns a name and slug for a palette item. The name takes the format "Color + id".
- * To ensure there are no duplicate ids, this function checks all slugs.
- * It expects slugs to be in the format: slugPrefix + color- + number.
- * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
- *
- * @param elements   An array of color palette items.
- * @param slugPrefix The slug prefix used to match the element slug.
- *
- * @return A name and slug for the new palette item.
- */
-export function getNameAndSlugForPosition(elements, slugPrefix) {
+function getNameAndSlugForPosition(elements, slugPrefix) {
   const nameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
   const position = elements.reduce((previousValue, currentValue) => {
-    if (typeof currentValue?.slug === 'string') {
+    if (typeof currentValue?.slug === "string") {
       const matches = currentValue?.slug.match(nameRegex);
       if (matches) {
         const id = parseInt(matches[1], 10);
@@ -93,8 +66,11 @@ export function getNameAndSlugForPosition(elements, slugPrefix) {
     return previousValue;
   }, 1);
   return {
-    name: sprintf(/* translators: %d: is an id for a custom color */
-    __('Color %d'), position),
+    name: sprintf(
+      /* translators: %d: is an id for a custom color */
+      __("Color %d"),
+      position
+    ),
     slug: `${slugPrefix}color-${position}`
   };
 }
@@ -103,7 +79,8 @@ function ColorPickerPopover({
   element,
   onChange,
   popoverProps: receivedPopoverProps,
-  onClose = () => {}
+  onClose = () => {
+  }
 }) {
   const popoverProps = useMemo(() => ({
     shift: true,
@@ -112,28 +89,28 @@ function ColorPickerPopover({
     // scrollbars while dragging the color picker's handle close to the
     // popover edge.
     resize: false,
-    placement: 'left-start',
+    placement: "left-start",
     ...receivedPopoverProps,
-    className: clsx('components-palette-edit__popover', receivedPopoverProps?.className)
+    className: clsx("components-palette-edit__popover", receivedPopoverProps?.className)
   }), [receivedPopoverProps]);
-  return /*#__PURE__*/_jsxs(Popover, {
+  return /* @__PURE__ */ _jsxs(Popover, {
     ...popoverProps,
-    onClose: onClose,
-    children: [!isGradient && /*#__PURE__*/_jsx(ColorPicker, {
+    onClose,
+    children: [!isGradient && /* @__PURE__ */ _jsx(ColorPicker, {
       color: element.color,
       enableAlpha: true,
-      onChange: newColor => {
+      onChange: (newColor) => {
         onChange({
           ...element,
           color: newColor
         });
       }
-    }), isGradient && /*#__PURE__*/_jsx("div", {
+    }), isGradient && /* @__PURE__ */ _jsx("div", {
       className: "components-palette-edit__popover-gradient-picker",
-      children: /*#__PURE__*/_jsx(CustomGradientPicker, {
+      children: /* @__PURE__ */ _jsx(CustomGradientPicker, {
         __experimentalIsRenderedInSidebar: true,
         value: element.gradient,
-        onChange: newGradient => {
+        onChange: (newGradient) => {
           onChange({
             ...element,
             gradient: newGradient
@@ -154,62 +131,65 @@ function Option({
 }) {
   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.
   const [popoverAnchor, setPopoverAnchor] = useState(null);
   const popoverProps = useMemo(() => ({
     ...receivedPopoverProps,
     // Use the custom palette color item as the popover anchor.
     anchor: popoverAnchor
   }), [popoverAnchor, receivedPopoverProps]);
-  return /*#__PURE__*/_jsxs(Item, {
+  return /* @__PURE__ */ _jsxs(Item, {
     ref: setPopoverAnchor,
     size: "small",
-    children: [/*#__PURE__*/_jsxs(HStack, {
+    children: [/* @__PURE__ */ _jsxs(HStack, {
       justify: "flex-start",
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [/* @__PURE__ */ _jsx(Button, {
         size: "small",
         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 || ''),
+          // 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, {
+        children: /* @__PURE__ */ _jsx(IndicatorStyled, {
           colorValue: value
         })
-      }), /*#__PURE__*/_jsx(FlexBlock, {
-        children: !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {
-          label: isGradient ? __('Gradient name') : __('Color name'),
+      }), /* @__PURE__ */ _jsx(FlexBlock, {
+        children: !canOnlyChangeValues ? /* @__PURE__ */ _jsx(NameInput, {
+          label: isGradient ? __("Gradient name") : __("Color name"),
           value: element.name,
-          onChange: nextName => onChange({
+          onChange: (nextName) => onChange({
             ...element,
             name: nextName,
-            slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : '')
+            slug: slugPrefix + kebabCase(nextName !== null && nextName !== void 0 ? nextName : "")
           })
-        }) : /*#__PURE__*/_jsx(NameContainer, {
-          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */
-          '\u00A0'
+        }) : /* @__PURE__ */ _jsx(NameContainer, {
+          children: element.name.trim().length ? element.name : (
+            /* Fall back to non-breaking space to maintain height */
+            "\xA0"
+          )
         })
-      }), !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {
-        children: /*#__PURE__*/_jsx(RemoveButton, {
+      }), !canOnlyChangeValues && /* @__PURE__ */ _jsx(FlexItem, {
+        children: /* @__PURE__ */ _jsx(RemoveButton, {
           size: "small",
           icon: lineSolid,
           label: sprintf(
-          // translators: %s is a color or gradient name, e.g. "Red".
-          __('Remove color: %s'), element.name.trim().length ? element.name : value || ''),
+            // translators: %s is a color or gradient name, e.g. "Red".
+            __("Remove color: %s"),
+            element.name.trim().length ? element.name : value || ""
+          ),
           onClick: onRemove
         })
       })]
-    }), isEditingColor && /*#__PURE__*/_jsx(ColorPickerPopover, {
-      isGradient: isGradient,
-      onChange: onChange,
-      element: element,
-      popoverProps: popoverProps,
+    }), isEditingColor && /* @__PURE__ */ _jsx(ColorPickerPopover, {
+      isGradient,
+      onChange,
+      element,
+      popoverProps,
       onClose: () => setIsEditingColor(false)
     })]
   });
@@ -223,23 +203,22 @@ function PaletteEditListView({
   popoverProps,
   addColorRef
 }) {
-  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
   const elementsReferenceRef = useRef();
   useEffect(() => {
     elementsReferenceRef.current = elements;
   }, [elements]);
-  const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);
-  return /*#__PURE__*/_jsx(VStack, {
+  const debounceOnChange = useDebounce((updatedElements) => onChange(deduplicateElementSlugs(updatedElements)), 100);
+  return /* @__PURE__ */ _jsx(VStack, {
     spacing: 3,
-    children: /*#__PURE__*/_jsx(ItemGroup, {
+    children: /* @__PURE__ */ _jsx(ItemGroup, {
       isRounded: true,
       isBordered: true,
       isSeparated: true,
-      children: elements.map((element, index) => /*#__PURE__*/_jsx(Option, {
-        isGradient: isGradient,
-        canOnlyChangeValues: canOnlyChangeValues,
-        element: element,
-        onChange: newElement => {
+      children: elements.map((element, index) => /* @__PURE__ */ _jsx(Option, {
+        isGradient,
+        canOnlyChangeValues,
+        element,
+        onChange: (newElement) => {
           debounceOnChange(elements.map((currentElement, currentIndex) => {
             if (currentIndex === index) {
               return newElement;
@@ -254,38 +233,17 @@ function PaletteEditListView({
             }
             return true;
           });
-          onChange(newElements.length ? newElements : undefined);
+          onChange(newElements.length ? newElements : void 0);
           addColorRef.current?.focus();
         },
-        slugPrefix: slugPrefix,
-        popoverProps: popoverProps
+        slugPrefix,
+        popoverProps
       }, index))
     })
   });
 }
 const EMPTY_ARRAY = [];
-
-/**
- * Allows editing a palette of colors or gradients.
- *
- * ```jsx
- * import { PaletteEdit } from '@wordpress/components';
- * const MyPaletteEdit = () => {
- *   const [ controlledColors, setControlledColors ] = useState( colors );
- *
- *   return (
- *     <PaletteEdit
- *       colors={ controlledColors }
- *       onChange={ ( newColors?: Color[] ) => {
- *         setControlledColors( newColors );
- *       } }
- *       paletteLabel="Here is a label"
- *     />
- *   );
- * };
- * ```
- */
-export function PaletteEdit({
+function PaletteEdit({
   gradients,
   colors = EMPTY_ARRAY,
   onChange,
@@ -294,7 +252,7 @@ export function PaletteEdit({
   emptyMessage,
   canOnlyChangeValues,
   canReset,
-  slugPrefix = '',
+  slugPrefix = "",
   popoverProps
 }) {
   const isGradient = !!gradients;
@@ -306,9 +264,8 @@ export function PaletteEdit({
   const hasElements = elementsLength > 0;
   const debounceOnChange = useDebounce(onChange, 100);
   const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {
-    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];
-    const key = isGradient ? 'gradient' : 'color';
-    // Ensures that the index returned matches a known element value.
+    const selectedElement = newEditingElementIndex === void 0 ? void 0 : elements[newEditingElementIndex];
+    const key = isGradient ? "gradient" : "color";
     if (!!selectedElement && selectedElement[key] === value) {
       setEditingElement(newEditingElementIndex);
     } else {
@@ -316,25 +273,25 @@ export function PaletteEdit({
     }
   }, [isGradient, elements]);
   const addColorRef = useRef(null);
-  return /*#__PURE__*/_jsxs(PaletteEditStyles, {
-    children: [/*#__PURE__*/_jsxs(HStack, {
-      children: [/*#__PURE__*/_jsx(PaletteHeading, {
+  return /* @__PURE__ */ _jsxs(PaletteEditStyles, {
+    children: [/* @__PURE__ */ _jsxs(HStack, {
+      children: [/* @__PURE__ */ _jsx(PaletteHeading, {
         level: paletteLabelHeadingLevel,
         children: paletteLabel
-      }), /*#__PURE__*/_jsxs(PaletteActionsContainer, {
-        children: [hasElements && isEditing && /*#__PURE__*/_jsx(DoneButton, {
+      }), /* @__PURE__ */ _jsxs(PaletteActionsContainer, {
+        children: [hasElements && isEditing && /* @__PURE__ */ _jsx(DoneButton, {
           size: "small",
           onClick: () => {
             setIsEditing(false);
             setEditingElement(null);
           },
-          children: __('Done')
-        }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {
+          children: __("Done")
+        }), !canOnlyChangeValues && /* @__PURE__ */ _jsx(Button, {
           ref: addColorRef,
           size: "small",
           isPressed: isAdding,
           icon: plus,
-          label: isGradient ? __('Add gradient') : __('Add color'),
+          label: isGradient ? __("Add gradient") : __("Add color"),
           onClick: () => {
             const {
               name,
@@ -356,18 +313,18 @@ export function PaletteEdit({
             setIsEditing(true);
             setEditingElement(elements.length);
           }
-        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/_jsx(DropdownMenu, {
+        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /* @__PURE__ */ _jsx(DropdownMenu, {
           icon: moreVertical,
-          label: isGradient ? __('Gradient options') : __('Color options'),
+          label: isGradient ? __("Gradient options") : __("Color options"),
           toggleProps: {
-            size: 'small'
+            size: "small"
           },
           children: ({
             onClose
-          }) => /*#__PURE__*/_jsx(_Fragment, {
-            children: /*#__PURE__*/_jsxs(NavigableMenu, {
+          }) => /* @__PURE__ */ _jsx(_Fragment, {
+            children: /* @__PURE__ */ _jsxs(NavigableMenu, {
               role: "menu",
-              children: [!isEditing && /*#__PURE__*/_jsx(Button, {
+              children: [!isEditing && /* @__PURE__ */ _jsx(Button, {
                 __next40pxDefaultSize: true,
                 variant: "tertiary",
                 onClick: () => {
@@ -375,8 +332,8 @@ export function PaletteEdit({
                   onClose();
                 },
                 className: "components-palette-edit__menu-button",
-                children: __('Show details')
-              }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {
+                children: __("Show details")
+              }), !canOnlyChangeValues && /* @__PURE__ */ _jsx(Button, {
                 __next40pxDefaultSize: true,
                 variant: "tertiary",
                 onClick: () => {
@@ -386,8 +343,8 @@ export function PaletteEdit({
                   onClose();
                 },
                 className: "components-palette-edit__menu-button",
-                children: isGradient ? __('Remove all gradients') : __('Remove all colors')
-              }), canReset && /*#__PURE__*/_jsx(Button, {
+                children: isGradient ? __("Remove all gradients") : __("Remove all colors")
+              }), canReset && /* @__PURE__ */ _jsx(Button, {
                 __next40pxDefaultSize: true,
                 className: "components-palette-edit__menu-button",
                 variant: "tertiary",
@@ -396,53 +353,58 @@ export function PaletteEdit({
                   onChange();
                   onClose();
                 },
-                children: isGradient ? __('Reset gradient') : __('Reset colors')
+                children: isGradient ? __("Reset gradient") : __("Reset colors")
               })]
             })
           })
         })]
       })]
-    }), hasElements && /*#__PURE__*/_jsxs(PaletteEditContents, {
-      children: [isEditing && /*#__PURE__*/_jsx(PaletteEditListView, {
-        canOnlyChangeValues: canOnlyChangeValues,
-        elements: elements
-        // @ts-expect-error TODO: Don't know how to resolve
-        ,
-        onChange: onChange,
-        slugPrefix: slugPrefix,
-        isGradient: isGradient,
-        popoverProps: popoverProps,
-        addColorRef: addColorRef
-      }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {
-        isGradient: isGradient,
+    }), hasElements && /* @__PURE__ */ _jsxs(PaletteEditContents, {
+      children: [isEditing && /* @__PURE__ */ _jsx(PaletteEditListView, {
+        canOnlyChangeValues,
+        elements,
+        onChange,
+        slugPrefix,
+        isGradient,
+        popoverProps,
+        addColorRef
+      }), !isEditing && editingElement !== null && /* @__PURE__ */ _jsx(ColorPickerPopover, {
+        isGradient,
         onClose: () => setEditingElement(null),
-        onChange: newElement => {
+        onChange: (newElement) => {
           debounceOnChange(
-          // @ts-expect-error TODO: Don't know how to resolve
-          elements.map((currentElement, currentIndex) => {
-            if (currentIndex === editingElement) {
-              return newElement;
-            }
-            return currentElement;
-          }));
+            // @ts-expect-error TODO: Don't know how to resolve
+            elements.map((currentElement, currentIndex) => {
+              if (currentIndex === editingElement) {
+                return newElement;
+              }
+              return currentElement;
+            })
+          );
         },
         element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1],
-        popoverProps: popoverProps
-      }), !isEditing && (isGradient ? /*#__PURE__*/_jsx(GradientPicker, {
-        gradients: gradients,
+        popoverProps
+      }), !isEditing && (isGradient ? /* @__PURE__ */ _jsx(GradientPicker, {
+        gradients,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomGradients: true
-      }) : /*#__PURE__*/_jsx(ColorPalette, {
-        colors: colors,
+      }) : /* @__PURE__ */ _jsx(ColorPalette, {
+        colors,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomColors: true
       }))]
-    }), !hasElements && emptyMessage && /*#__PURE__*/_jsx(PaletteEditContents, {
+    }), !hasElements && emptyMessage && /* @__PURE__ */ _jsx(PaletteEditContents, {
       children: emptyMessage
     })]
   });
 }
-export default PaletteEdit;
-//# sourceMappingURL=index.js.map
+var palette_edit_default = PaletteEdit;
+export {
+  PaletteEdit,
+  deduplicateElementSlugs,
+  palette_edit_default as default,
+  getNameAndSlugForPosition
+};
+//# sourceMappingURL=index.js.map