@wordpress/components 16.0.1-next.5df0cd52b7.0 → 19.0.1

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

@@ -1,241 +1,214 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import classnames from 'classnames';
-import { isEmpty, kebabCase } from 'lodash';
+import kebabCase from 'lodash';
 /**
  * WordPress dependencies
  */
 
-import { __, sprintf } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { edit, close, chevronDown, chevronUp, plus } from '@wordpress/icons';
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { lineSolid, moreVertical, plus } from '@wordpress/icons';
+import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 
-import Dropdown from '../dropdown';
-import CircularOptionPicker from '../circular-option-picker';
-import ColorPicker from '../color-picker';
 import Button from '../button';
-import TextControl from '../text-control';
-import BaseControl from '../base-control';
+import { ColorPicker } from '../color-picker';
+import { FlexItem } from '../flex';
+import { HStack } from '../h-stack';
+import { ItemGroup } from '../item-group';
+import { VStack } from '../v-stack';
+import ColorPalette from '../color-palette';
+import DropdownMenu from '../dropdown-menu';
+import Popover from '../popover';
+import { ColorActionsContainer, ColorEditStyles, ColorHeading, ColorHStackHeader, ColorIndicatorStyled, ColorItem, ColorNameContainer, ColorNameInputControl, DoneButton, RemoveButton } from './styles';
+import { NavigableMenu } from '../navigable-container';
 
-function DropdownOpenOnMount({
-  shouldOpen,
-  isOpen,
-  onToggle
+function ColorNameInput({
+  value,
+  onChange
 }) {
-  useEffect(() => {
-    if (shouldOpen && !isOpen) {
-      onToggle();
-    }
-  }, []);
-  return null;
+  return createElement(ColorNameInputControl, {
+    label: __('Color name'),
+    hideLabelFromVision: true,
+    value: value,
+    onChange: onChange
+  });
 }
 
 function ColorOption({
   color,
-  name,
-  slug,
   onChange,
+  isEditing,
+  onStartEditing,
   onRemove,
-  onConfirm,
-  confirmLabel = __('OK'),
-  isEditingNameOnMount = false,
-  isEditingColorOnMount = false,
-  onCancel,
-  immutableColorSlugs = []
+  onStopEditing
 }) {
-  const [isHover, setIsHover] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isEditingName, setIsEditingName] = useState(isEditingNameOnMount);
-  const [isShowingAdvancedPanel, setIsShowingAdvancedPanel] = useState(false);
-  const isShowingControls = (isHover || isFocused || isEditingName || isShowingAdvancedPanel) && !immutableColorSlugs.includes(slug);
-  return createElement("div", {
-    tabIndex: 0,
-    className: classnames('components-color-edit__color-option', {
-      'is-hover': isHover && !isEditingName && !isShowingAdvancedPanel
-    }),
-    onMouseEnter: () => setIsHover(true),
-    onMouseLeave: () => setIsHover(false),
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".
-    sprintf(__('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".
-    sprintf(__('Color code: %s'), color)
-  }, createElement("div", {
-    className: "components-color-edit__color-option-main-area"
-  }, createElement(Dropdown, {
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => createElement(Fragment, null, createElement(DropdownOpenOnMount, {
-      shouldOpen: isEditingColorOnMount,
-      isOpen: isOpen,
-      onToggle: onToggle
-    }), createElement(CircularOptionPicker.Option, {
-      style: {
-        backgroundColor: color,
-        color
-      },
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      "aria-label": __('Edit color value')
-    })),
-    renderContent: () => createElement(ColorPicker, {
-      color: color,
-      onChangeComplete: newColor => onChange({
-        color: newColor.hex,
-        slug,
-        name
-      }),
-      disableAlpha: true
+  const focusOutsideProps = useFocusOutside(onStopEditing);
+  return createElement(ColorItem, _extends({
+    as: "div",
+    onClick: onStartEditing
+  }, isEditing ? focusOutsideProps : {}), createElement(HStack, {
+    justify: "flex-start"
+  }, createElement(FlexItem, null, createElement(ColorIndicatorStyled, {
+    colorValue: color.color
+  })), createElement(FlexItem, null, isEditing ? createElement(ColorNameInput, {
+    value: color.name,
+    onChange: nextName => onChange({ ...color,
+      name: nextName,
+      slug: kebabCase(nextName)
     })
-  }), !isEditingName && createElement("div", {
-    className: "components-color-edit__color-option-color-name"
-  }, name), isEditingName && createElement(Fragment, null, createElement(TextControl, {
-    className: "components-color-edit__color-option-color-name-input",
-    hideLabelFromVision: true,
-    onChange: newColorName => onChange({
-      color,
-      slug: kebabCase(newColorName),
-      name: newColorName
-    }),
-    label: __('Color name'),
-    placeholder: __('Name'),
-    value: name
-  }), createElement(Button, {
-    onClick: () => {
-      setIsEditingName(false);
-      setIsFocused(false);
-
-      if (onConfirm) {
-        onConfirm();
-      }
-    },
-    variant: "primary"
-  }, confirmLabel)), !isEditingName && createElement(Fragment, null, createElement(Button, {
-    className: classnames({
-      'components-color-edit__hidden-control': !isShowingControls
-    }),
-    icon: edit,
-    label: __('Edit color name'),
-    onClick: () => setIsEditingName(true)
-  }), createElement(Button, {
-    className: classnames({
-      'components-color-edit__hidden-control': !isShowingControls
-    }),
-    icon: close,
+  }) : createElement(ColorNameContainer, null, color.name)), isEditing && createElement(FlexItem, null, createElement(RemoveButton, {
+    isSmall: true,
+    icon: lineSolid,
     label: __('Remove color'),
     onClick: onRemove
-  })), createElement(Button, {
-    className: classnames({
-      'components-color-edit__hidden-control': !isShowingControls
-    }),
-    icon: isShowingAdvancedPanel ? chevronUp : chevronDown,
-    label: __('Additional color settings'),
-    onClick: () => {
-      if (isShowingAdvancedPanel) {
-        setIsFocused(false);
-      }
-
-      setIsShowingAdvancedPanel(!isShowingAdvancedPanel);
-    },
-    "aria-expanded": isShowingAdvancedPanel
-  })), onCancel && createElement(Button, {
-    className: "components-color-edit__cancel-button",
-    onClick: onCancel
-  }, __('Cancel')), isShowingAdvancedPanel && createElement(TextControl, {
-    className: "components-color-edit__slug-input",
-    onChange: newSlug => onChange({
-      color,
-      slug: newSlug,
-      name
-    }),
-    label: __('Slug'),
-    value: slug
-  }));
-}
-
-function ColorInserter({
-  onInsert,
-  onCancel
-}) {
-  const [color, setColor] = useState({
-    color: '#fff',
-    name: '',
-    slug: ''
-  });
-  return createElement(ColorOption, {
+  }))), isEditing && createElement(Popover, {
+    position: "bottom left",
+    className: "components-color-edit__color-popover"
+  }, createElement(ColorPicker, {
     color: color.color,
-    name: color.name,
-    slug: color.slug,
-    onChange: setColor,
-    confirmLabel: __('Save'),
-    onConfirm: () => onInsert(color),
-    isEditingNameOnMount: true,
-    isEditingColorOnMount: true,
-    onCancel: onCancel
-  });
+    onChange: newColor => onChange({ ...color,
+      color: newColor
+    })
+  })));
 }
 
-export default function ColorEdit({
+function ColorPaletteEditListView({
   colors,
   onChange,
-  emptyUI,
-  immutableColorSlugs,
-  canReset = true
+  editingColor,
+  setEditingColor
 }) {
-  const [isInsertingColor, setIsInsertingColor] = useState(false);
-  return createElement(BaseControl, null, createElement("fieldset", null, createElement("div", {
-    className: "components-color-edit__label-and-insert-container"
-  }, createElement("legend", null, createElement("div", null, createElement(BaseControl.VisualLabel, null, __('Color palette')))), !isInsertingColor && createElement(Button, {
-    onClick: () => {
-      setIsInsertingColor(true);
+  // When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.
+  const colorReference = useRef();
+  useEffect(() => {
+    colorReference.current = colors;
+  }, [colors]);
+  useEffect(() => {
+    return () => {
+      if (colorReference.current.some(({
+        slug
+      }) => !slug)) {
+        const newColors = colorReference.current.filter(({
+          slug
+        }) => slug);
+        onChange(newColors.length ? newColors : undefined);
+      }
+    };
+  }, []);
+  return createElement(VStack, {
+    spacing: 3
+  }, createElement(ItemGroup, {
+    isBordered: true,
+    isSeparated: true
+  }, colors.map((color, index) => createElement(ColorOption, {
+    key: index,
+    color: color,
+    onStartEditing: () => {
+      if (editingColor !== index) {
+        setEditingColor(index);
+      }
     },
-    className: "components-color-edit__insert-button",
-    icon: plus
-  })), createElement("div", null, !isEmpty(colors) && colors.map((color, index) => {
-    return createElement(ColorOption, {
-      key: index,
-      color: color.color,
-      name: color.name,
-      slug: color.slug,
-      immutableColorSlugs: immutableColorSlugs,
-      onChange: newColor => {
-        onChange(colors.map((currentColor, currentIndex) => {
-          if (currentIndex === index) {
-            return newColor;
-          }
+    onChange: newColor => {
+      onChange(colors.map((currentColor, currentIndex) => {
+        if (currentIndex === index) {
+          return newColor;
+        }
 
-          return currentColor;
-        }));
-      },
-      onRemove: () => {
-        onChange(colors.filter((_currentColor, currentIndex) => {
-          if (currentIndex === index) {
-            return false;
-          }
+        return currentColor;
+      }));
+    },
+    onRemove: () => {
+      setEditingColor(null);
+      const newColors = colors.filter((_currentColor, currentIndex) => {
+        if (currentIndex === index) {
+          return false;
+        }
 
-          return true;
-        }));
-      }
-    });
-  }), isInsertingColor && createElement(ColorInserter, {
-    onInsert: newColor => {
-      setIsInsertingColor(false);
-      onChange([...(colors || []), newColor]);
+        return true;
+      });
+      onChange(newColors.length ? newColors : undefined);
     },
-    onCancel: () => setIsInsertingColor(false)
-  }), !isInsertingColor && isEmpty(colors) && emptyUI), !!canReset && createElement(Button, {
+    isEditing: index === editingColor,
+    onStopEditing: () => {
+      if (index === editingColor) {
+        setEditingColor(null);
+      }
+    }
+  }))));
+}
+
+const EMPTY_ARRAY = [];
+export default function ColorEdit({
+  colors = EMPTY_ARRAY,
+  onChange
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingColor, setEditingColor] = useState(null);
+  const isAdding = isEditing && editingColor && colors[editingColor] && !colors[editingColor].slug;
+  const hasColors = colors.length > 0;
+  return createElement(ColorEditStyles, null, createElement(ColorHStackHeader, null, createElement(ColorHeading, null, __('Custom')), createElement(ColorActionsContainer, null, isEditing && createElement(DoneButton, {
+    isSmall: true,
+    onClick: () => {
+      setIsEditing(false);
+      setEditingColor(null);
+    }
+  }, __('Done')), createElement(Button, {
+    isSmall: true,
+    isPressed: isAdding,
+    icon: plus,
+    label: __('Add custom color'),
+    onClick: () => {
+      onChange([...colors, {
+        color: '#000',
+        name: '',
+        slug: ''
+      }]);
+      setIsEditing(true);
+      setEditingColor(colors.length);
+    }
+  }), !isEditing && createElement(Button, {
+    disabled: !hasColors,
     isSmall: true,
-    variant: "secondary",
-    className: "components-color-edit__reset-button",
-    onClick: () => onChange()
-  }, __('Reset'))));
+    icon: moreVertical,
+    label: __('Edit colors'),
+    onClick: () => {
+      setIsEditing(true);
+    }
+  }), isEditing && createElement(DropdownMenu, {
+    icon: moreVertical,
+    label: __('Custom color options'),
+    toggleProps: {
+      isSmall: true
+    }
+  }, ({
+    onClose
+  }) => createElement(Fragment, null, createElement(NavigableMenu, {
+    role: "menu"
+  }, createElement(Button, {
+    variant: "tertiary",
+    onClick: () => {
+      setEditingColor(null);
+      setIsEditing(false);
+      onChange();
+      onClose();
+    }
+  }, __('Remove all custom colors'))))))), hasColors && createElement(Fragment, null, isEditing && createElement(ColorPaletteEditListView, {
+    colors: colors,
+    onChange: onChange,
+    editingColor: editingColor,
+    setEditingColor: setEditingColor
+  }), !isEditing && createElement(ColorPalette, {
+    colors: colors,
+    onChange: () => {},
+    clearable: false,
+    disableCustomColors: true
+  })), !hasColors && __('Custom colors are empty! Add some colors to create your own color palette.'));
 }
 //# sourceMappingURL=index.js.map

package/build-module/color-edit/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-edit/index.js"],"names":["classnames","isEmpty","kebabCase","__","sprintf","useEffect","useState","edit","close","chevronDown","chevronUp","plus","Dropdown","CircularOptionPicker","ColorPicker","Button","TextControl","BaseControl","DropdownOpenOnMount","shouldOpen","isOpen","onToggle","ColorOption","color","name","slug","onChange","onRemove","onConfirm","confirmLabel","isEditingNameOnMount","isEditingColorOnMount","onCancel","immutableColorSlugs","isHover","setIsHover","isFocused","setIsFocused","isEditingName","setIsEditingName","isShowingAdvancedPanel","setIsShowingAdvancedPanel","isShowingControls","includes","backgroundColor","newColor","hex","newColorName","newSlug","ColorInserter","onInsert","setColor","ColorEdit","colors","emptyUI","canReset","isInsertingColor","setIsInsertingColor","map","index","currentColor","currentIndex","filter","_currentColor"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,OAAT,EAAkBC,SAAlB,QAAmC,QAAnC;AAEA;AACA;AACA;;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,oBAApC;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,WAAtB,EAAmCC,SAAnC,EAA8CC,IAA9C,QAA0D,kBAA1D;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,oBAAP,MAAiC,2BAAjC;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AACA,OAAOC,WAAP,MAAwB,iBAAxB;;AAEA,SAASC,mBAAT,CAA8B;AAAEC,EAAAA,UAAF;AAAcC,EAAAA,MAAd;AAAsBC,EAAAA;AAAtB,CAA9B,EAAiE;AAChEhB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKc,UAAU,IAAI,CAAEC,MAArB,EAA8B;AAC7BC,MAAAA,QAAQ;AACR;AACD,GAJQ,EAIN,EAJM,CAAT;AAKA,SAAO,IAAP;AACA;;AAED,SAASC,WAAT,CAAsB;AACrBC,EAAAA,KADqB;AAErBC,EAAAA,IAFqB;AAGrBC,EAAAA,IAHqB;AAIrBC,EAAAA,QAJqB;AAKrBC,EAAAA,QALqB;AAMrBC,EAAAA,SANqB;AAOrBC,EAAAA,YAAY,GAAG1B,EAAE,CAAE,IAAF,CAPI;AAQrB2B,EAAAA,oBAAoB,GAAG,KARF;AASrBC,EAAAA,qBAAqB,GAAG,KATH;AAUrBC,EAAAA,QAVqB;AAWrBC,EAAAA,mBAAmB,GAAG;AAXD,CAAtB,EAYI;AACH,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B7B,QAAQ,CAAE,KAAF,CAAxC;AACA,QAAM,CAAE8B,SAAF,EAAaC,YAAb,IAA8B/B,QAAQ,CAAE,KAAF,CAA5C;AACA,QAAM,CAAEgC,aAAF,EAAiBC,gBAAjB,IAAsCjC,QAAQ,CACnDwB,oBADmD,CAApD;AAGA,QAAM,CAAEU,sBAAF,EAA0BC,yBAA1B,IAAwDnC,QAAQ,CACrE,KADqE,CAAtE;AAIA,QAAMoC,iBAAiB,GACtB,CAAER,OAAO,IAAIE,SAAX,IAAwBE,aAAxB,IAAyCE,sBAA3C,KACA,CAAEP,mBAAmB,CAACU,QAApB,CAA8BlB,IAA9B,CAFH;AAIA,SACC;AACC,IAAA,QAAQ,EAAG,CADZ;AAEC,IAAA,SAAS,EAAGzB,UAAU,CAAE,qCAAF,EAAyC;AAC9D,kBACCkC,OAAO,IAAI,CAAEI,aAAb,IAA8B,CAAEE;AAF6B,KAAzC,CAFvB;AAMC,IAAA,YAAY,EAAG,MAAML,UAAU,CAAE,IAAF,CANhC;AAOC,IAAA,YAAY,EAAG,MAAMA,UAAU,CAAE,KAAF,CAPhC;AAQC,IAAA,OAAO,EAAG,MAAME,YAAY,CAAE,IAAF,CAR7B;AASC,IAAA,MAAM,EAAG,MAAMA,YAAY,CAAE,KAAF,CAT5B;AAUC,kBACCb,IAAI,GACD;AACApB,IAAAA,OAAO,CAAED,EAAE,CAAE,WAAF,CAAJ,EAAqBqB,IAArB,CAFN,GAGD;AACApB,IAAAA,OAAO,CAAED,EAAE,CAAE,gBAAF,CAAJ,EAA0BoB,KAA1B;AAfZ,KAkBC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,QAAD;AACC,IAAA,YAAY,EAAG,CAAE;AAAEH,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KACd,8BACC,cAAC,mBAAD;AACC,MAAA,UAAU,EAAGU,qBADd;AAEC,MAAA,MAAM,EAAGX,MAFV;AAGC,MAAA,QAAQ,EAAGC;AAHZ,MADD,EAMC,cAAC,oBAAD,CAAsB,MAAtB;AACC,MAAA,KAAK,EAAG;AAAEuB,QAAAA,eAAe,EAAErB,KAAnB;AAA0BA,QAAAA;AAA1B,OADT;AAEC,uBAAgBH,MAFjB;AAGC,uBAAc,MAHf;AAIC,MAAA,OAAO,EAAGC,QAJX;AAKC,oBAAalB,EAAE,CAAE,kBAAF;AALhB,MAND,CAFF;AAiBC,IAAA,aAAa,EAAG,MACf,cAAC,WAAD;AACC,MAAA,KAAK,EAAGoB,KADT;AAEC,MAAA,gBAAgB,EAAKsB,QAAF,IAClBnB,QAAQ,CAAE;AACTH,QAAAA,KAAK,EAAEsB,QAAQ,CAACC,GADP;AAETrB,QAAAA,IAFS;AAGTD,QAAAA;AAHS,OAAF,CAHV;AASC,MAAA,YAAY;AATb;AAlBF,IADD,EAgCG,CAAEc,aAAF,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACGd,IADH,CAjCF,EAqCGc,aAAa,IACd,8BACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,sDADX;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,QAAQ,EAAKS,YAAF,IACVrB,QAAQ,CAAE;AACTH,MAAAA,KADS;AAETE,MAAAA,IAAI,EAAEvB,SAAS,CAAE6C,YAAF,CAFN;AAGTvB,MAAAA,IAAI,EAAEuB;AAHG,KAAF,CAJV;AAUC,IAAA,KAAK,EAAG5C,EAAE,CAAE,YAAF,CAVX;AAWC,IAAA,WAAW,EAAGA,EAAE,CAAE,MAAF,CAXjB;AAYC,IAAA,KAAK,EAAGqB;AAZT,IADD,EAeC,cAAC,MAAD;AACC,IAAA,OAAO,EAAG,MAAM;AACfe,MAAAA,gBAAgB,CAAE,KAAF,CAAhB;AACAF,MAAAA,YAAY,CAAE,KAAF,CAAZ;;AACA,UAAKT,SAAL,EAAiB;AAChBA,QAAAA,SAAS;AACT;AACD,KAPF;AAQC,IAAA,OAAO,EAAC;AART,KAUGC,YAVH,CAfD,CAtCF,EAmEG,CAAES,aAAF,IACD,8BACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGtC,UAAU,CAAE;AACvB,+CAAyC,CAAE0C;AADpB,KAAF,CADvB;AAIC,IAAA,IAAI,EAAGnC,IAJR;AAKC,IAAA,KAAK,EAAGJ,EAAE,CAAE,iBAAF,CALX;AAMC,IAAA,OAAO,EAAG,MAAMoC,gBAAgB,CAAE,IAAF;AANjC,IADD,EASC,cAAC,MAAD;AACC,IAAA,SAAS,EAAGvC,UAAU,CAAE;AACvB,+CAAyC,CAAE0C;AADpB,KAAF,CADvB;AAIC,IAAA,IAAI,EAAGlC,KAJR;AAKC,IAAA,KAAK,EAAGL,EAAE,CAAE,cAAF,CALX;AAMC,IAAA,OAAO,EAAGwB;AANX,IATD,CApEF,EAuFC,cAAC,MAAD;AACC,IAAA,SAAS,EAAG3B,UAAU,CAAE;AACvB,+CAAyC,CAAE0C;AADpB,KAAF,CADvB;AAIC,IAAA,IAAI,EAAGF,sBAAsB,GAAG9B,SAAH,GAAeD,WAJ7C;AAKC,IAAA,KAAK,EAAGN,EAAE,CAAE,2BAAF,CALX;AAMC,IAAA,OAAO,EAAG,MAAM;AACf,UAAKqC,sBAAL,EAA8B;AAC7BH,QAAAA,YAAY,CAAE,KAAF,CAAZ;AACA;;AACDI,MAAAA,yBAAyB,CAAE,CAAED,sBAAJ,CAAzB;AACA,KAXF;AAYC,qBAAgBA;AAZjB,IAvFD,CAlBD,EAwHGR,QAAQ,IACT,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,sCADX;AAEC,IAAA,OAAO,EAAGA;AAFX,KAIG7B,EAAE,CAAE,QAAF,CAJL,CAzHF,EAgIGqC,sBAAsB,IACvB,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,mCADX;AAEC,IAAA,QAAQ,EAAKQ,OAAF,IACVtB,QAAQ,CAAE;AACTH,MAAAA,KADS;AAETE,MAAAA,IAAI,EAAEuB,OAFG;AAGTxB,MAAAA;AAHS,KAAF,CAHV;AASC,IAAA,KAAK,EAAGrB,EAAE,CAAE,MAAF,CATX;AAUC,IAAA,KAAK,EAAGsB;AAVT,IAjIF,CADD;AAiJA;;AAED,SAASwB,aAAT,CAAwB;AAAEC,EAAAA,QAAF;AAAYlB,EAAAA;AAAZ,CAAxB,EAAiD;AAChD,QAAM,CAAET,KAAF,EAAS4B,QAAT,IAAsB7C,QAAQ,CAAE;AACrCiB,IAAAA,KAAK,EAAE,MAD8B;AAErCC,IAAAA,IAAI,EAAE,EAF+B;AAGrCC,IAAAA,IAAI,EAAE;AAH+B,GAAF,CAApC;AAKA,SACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGF,KAAK,CAACA,KADf;AAEC,IAAA,IAAI,EAAGA,KAAK,CAACC,IAFd;AAGC,IAAA,IAAI,EAAGD,KAAK,CAACE,IAHd;AAIC,IAAA,QAAQ,EAAG0B,QAJZ;AAKC,IAAA,YAAY,EAAGhD,EAAE,CAAE,MAAF,CALlB;AAMC,IAAA,SAAS,EAAG,MAAM+C,QAAQ,CAAE3B,KAAF,CAN3B;AAOC,IAAA,oBAAoB,MAPrB;AAQC,IAAA,qBAAqB,MARtB;AASC,IAAA,QAAQ,EAAGS;AATZ,IADD;AAaA;;AAED,eAAe,SAASoB,SAAT,CAAoB;AAClCC,EAAAA,MADkC;AAElC3B,EAAAA,QAFkC;AAGlC4B,EAAAA,OAHkC;AAIlCrB,EAAAA,mBAJkC;AAKlCsB,EAAAA,QAAQ,GAAG;AALuB,CAApB,EAMX;AACH,QAAM,CAAEC,gBAAF,EAAoBC,mBAApB,IAA4CnD,QAAQ,CAAE,KAAF,CAA1D;AACA,SACC,cAAC,WAAD,QACC,gCACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,8BACC,2BACC,cAAC,WAAD,CAAa,WAAb,QACGH,EAAE,CAAE,eAAF,CADL,CADD,CADD,CADD,EAQG,CAAEqD,gBAAF,IACD,cAAC,MAAD;AACC,IAAA,OAAO,EAAG,MAAM;AACfC,MAAAA,mBAAmB,CAAE,IAAF,CAAnB;AACA,KAHF;AAIC,IAAA,SAAS,EAAC,sCAJX;AAKC,IAAA,IAAI,EAAG9C;AALR,IATF,CADD,EAmBC,2BACG,CAAEV,OAAO,CAAEoD,MAAF,CAAT,IACDA,MAAM,CAACK,GAAP,CAAY,CAAEnC,KAAF,EAASoC,KAAT,KAAoB;AAC/B,WACC,cAAC,WAAD;AACC,MAAA,GAAG,EAAGA,KADP;AAEC,MAAA,KAAK,EAAGpC,KAAK,CAACA,KAFf;AAGC,MAAA,IAAI,EAAGA,KAAK,CAACC,IAHd;AAIC,MAAA,IAAI,EAAGD,KAAK,CAACE,IAJd;AAKC,MAAA,mBAAmB,EAAGQ,mBALvB;AAMC,MAAA,QAAQ,EAAKY,QAAF,IAAgB;AAC1BnB,QAAAA,QAAQ,CACP2B,MAAM,CAACK,GAAP,CACC,CACCE,YADD,EAECC,YAFD,KAGK;AACJ,cACCA,YAAY,KAAKF,KADlB,EAEE;AACD,mBAAOd,QAAP;AACA;;AACD,iBAAOe,YAAP;AACA,SAXF,CADO,CAAR;AAeA,OAtBF;AAuBC,MAAA,QAAQ,EAAG,MAAM;AAChBlC,QAAAA,QAAQ,CACP2B,MAAM,CAACS,MAAP,CACC,CACCC,aADD,EAECF,YAFD,KAGK;AACJ,cACCA,YAAY,KAAKF,KADlB,EAEE;AACD,mBAAO,KAAP;AACA;;AACD,iBAAO,IAAP;AACA,SAXF,CADO,CAAR;AAeA;AAvCF,MADD;AA2CA,GA5CD,CAFF,EA+CGH,gBAAgB,IACjB,cAAC,aAAD;AACC,IAAA,QAAQ,EAAKX,QAAF,IAAgB;AAC1BY,MAAAA,mBAAmB,CAAE,KAAF,CAAnB;AACA/B,MAAAA,QAAQ,CAAE,CAAE,IAAK2B,MAAM,IAAI,EAAf,CAAF,EAAuBR,QAAvB,CAAF,CAAR;AACA,KAJF;AAKC,IAAA,QAAQ,EAAG,MAAMY,mBAAmB,CAAE,KAAF;AALrC,IAhDF,EAwDG,CAAED,gBAAF,IAAsBvD,OAAO,CAAEoD,MAAF,CAA7B,IAA2CC,OAxD9C,CAnBD,EA6EG,CAAC,CAAEC,QAAH,IACD,cAAC,MAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAC,WAFT;AAGC,IAAA,SAAS,EAAC,qCAHX;AAIC,IAAA,OAAO,EAAG,MAAM7B,QAAQ;AAJzB,KAMGvB,EAAE,CAAE,OAAF,CANL,CA9EF,CADD,CADD;AA4FA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isEmpty, kebabCase } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useEffect, useState } from '@wordpress/element';\nimport { edit, close, chevronDown, chevronUp, plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport CircularOptionPicker from '../circular-option-picker';\nimport ColorPicker from '../color-picker';\nimport Button from '../button';\nimport TextControl from '../text-control';\nimport BaseControl from '../base-control';\n\nfunction DropdownOpenOnMount( { shouldOpen, isOpen, onToggle } ) {\n\tuseEffect( () => {\n\t\tif ( shouldOpen && ! isOpen ) {\n\t\t\tonToggle();\n\t\t}\n\t}, [] );\n\treturn null;\n}\n\nfunction ColorOption( {\n\tcolor,\n\tname,\n\tslug,\n\tonChange,\n\tonRemove,\n\tonConfirm,\n\tconfirmLabel = __( 'OK' ),\n\tisEditingNameOnMount = false,\n\tisEditingColorOnMount = false,\n\tonCancel,\n\timmutableColorSlugs = [],\n} ) {\n\tconst [ isHover, setIsHover ] = useState( false );\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst [ isEditingName, setIsEditingName ] = useState(\n\t\tisEditingNameOnMount\n\t);\n\tconst [ isShowingAdvancedPanel, setIsShowingAdvancedPanel ] = useState(\n\t\tfalse\n\t);\n\n\tconst isShowingControls =\n\t\t( isHover || isFocused || isEditingName || isShowingAdvancedPanel ) &&\n\t\t! immutableColorSlugs.includes( slug );\n\n\treturn (\n\t\t<div\n\t\t\ttabIndex={ 0 }\n\t\t\tclassName={ classnames( 'components-color-edit__color-option', {\n\t\t\t\t'is-hover':\n\t\t\t\t\tisHover && ! isEditingName && ! isShowingAdvancedPanel,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ () => setIsHover( true ) }\n\t\t\tonMouseLeave={ () => setIsHover( false ) }\n\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t\taria-label={\n\t\t\t\tname\n\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t}\n\t\t>\n\t\t\t<div className=\"components-color-edit__color-option-main-area\">\n\t\t\t\t<Dropdown\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DropdownOpenOnMount\n\t\t\t\t\t\t\t\tshouldOpen={ isEditingColorOnMount }\n\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\tonToggle={ onToggle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ __( 'Edit color value' ) }\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\trenderContent={ () => (\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\t\tonChangeComplete={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolor: newColor.hex,\n\t\t\t\t\t\t\t\t\tslug,\n\t\t\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisableAlpha\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t{ ! isEditingName && (\n\t\t\t\t\t<div className=\"components-color-edit__color-option-color-name\">\n\t\t\t\t\t\t{ name }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ isEditingName && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\tclassName=\"components-color-edit__color-option-color-name-input\"\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newColorName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\tcolor,\n\t\t\t\t\t\t\t\t\tslug: kebabCase( newColorName ),\n\t\t\t\t\t\t\t\t\tname: newColorName,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tlabel={ __( 'Color name' ) }\n\t\t\t\t\t\t\tplaceholder={ __( 'Name' ) }\n\t\t\t\t\t\t\tvalue={ name }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditingName( false );\n\t\t\t\t\t\t\t\tsetIsFocused( false );\n\t\t\t\t\t\t\t\tif ( onConfirm ) {\n\t\t\t\t\t\t\t\t\tonConfirm();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t\t{ ! isEditingName && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t\t\t'components-color-edit__hidden-control': ! isShowingControls,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\t\tlabel={ __( 'Edit color name' ) }\n\t\t\t\t\t\t\tonClick={ () => setIsEditingName( true ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t\t\t'components-color-edit__hidden-control': ! isShowingControls,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\ticon={ close }\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</>\n\t\t\t\t) }\n\t\t\t\t<Button\n\t\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t\t'components-color-edit__hidden-control': ! isShowingControls,\n\t\t\t\t\t} ) }\n\t\t\t\t\ticon={ isShowingAdvancedPanel ? chevronUp : chevronDown }\n\t\t\t\t\tlabel={ __( 'Additional color settings' ) }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isShowingAdvancedPanel ) {\n\t\t\t\t\t\t\tsetIsFocused( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsetIsShowingAdvancedPanel( ! isShowingAdvancedPanel );\n\t\t\t\t\t} }\n\t\t\t\t\taria-expanded={ isShowingAdvancedPanel }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{ onCancel && (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-color-edit__cancel-button\"\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ isShowingAdvancedPanel && (\n\t\t\t\t<TextControl\n\t\t\t\t\tclassName=\"components-color-edit__slug-input\"\n\t\t\t\t\tonChange={ ( newSlug ) =>\n\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\tcolor,\n\t\t\t\t\t\t\tslug: newSlug,\n\t\t\t\t\t\t\tname,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tlabel={ __( 'Slug' ) }\n\t\t\t\t\tvalue={ slug }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction ColorInserter( { onInsert, onCancel } ) {\n\tconst [ color, setColor ] = useState( {\n\t\tcolor: '#fff',\n\t\tname: '',\n\t\tslug: '',\n\t} );\n\treturn (\n\t\t<ColorOption\n\t\t\tcolor={ color.color }\n\t\t\tname={ color.name }\n\t\t\tslug={ color.slug }\n\t\t\tonChange={ setColor }\n\t\t\tconfirmLabel={ __( 'Save' ) }\n\t\t\tonConfirm={ () => onInsert( color ) }\n\t\t\tisEditingNameOnMount\n\t\t\tisEditingColorOnMount\n\t\t\tonCancel={ onCancel }\n\t\t/>\n\t);\n}\n\nexport default function ColorEdit( {\n\tcolors,\n\tonChange,\n\temptyUI,\n\timmutableColorSlugs,\n\tcanReset = true,\n} ) {\n\tconst [ isInsertingColor, setIsInsertingColor ] = useState( false );\n\treturn (\n\t\t<BaseControl>\n\t\t\t<fieldset>\n\t\t\t\t<div className=\"components-color-edit__label-and-insert-container\">\n\t\t\t\t\t<legend>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t{ __( 'Color palette' ) }\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{ ! isInsertingColor && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsInsertingColor( true );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tclassName=\"components-color-edit__insert-button\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t{ ! isEmpty( colors ) &&\n\t\t\t\t\t\tcolors.map( ( color, index ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ColorOption\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tcolor={ color.color }\n\t\t\t\t\t\t\t\t\tname={ color.name }\n\t\t\t\t\t\t\t\t\tslug={ color.slug }\n\t\t\t\t\t\t\t\t\timmutableColorSlugs={ immutableColorSlugs }\n\t\t\t\t\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tcolors.map(\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\tcurrentColor,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex\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\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === index\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\t\treturn newColor;\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\treturn currentColor;\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)\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\tonRemove={ () => {\n\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\tcolors.filter(\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_currentColor,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex\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\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === index\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\t\treturn false;\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\treturn true;\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)\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} ) }\n\t\t\t\t\t{ isInsertingColor && (\n\t\t\t\t\t\t<ColorInserter\n\t\t\t\t\t\t\tonInsert={ ( newColor ) => {\n\t\t\t\t\t\t\t\tsetIsInsertingColor( false );\n\t\t\t\t\t\t\t\tonChange( [ ...( colors || [] ), newColor ] );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCancel={ () => setIsInsertingColor( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isInsertingColor && isEmpty( colors ) && emptyUI }\n\t\t\t\t</div>\n\t\t\t\t{ !! canReset && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tclassName=\"components-color-edit__reset-button\"\n\t\t\t\t\t\tonClick={ () => onChange() }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-edit/index.js"],"names":["kebabCase","useState","useRef","useEffect","__","lineSolid","moreVertical","plus","__experimentalUseFocusOutside","useFocusOutside","Button","ColorPicker","FlexItem","HStack","ItemGroup","VStack","ColorPalette","DropdownMenu","Popover","ColorActionsContainer","ColorEditStyles","ColorHeading","ColorHStackHeader","ColorIndicatorStyled","ColorItem","ColorNameContainer","ColorNameInputControl","DoneButton","RemoveButton","NavigableMenu","ColorNameInput","value","onChange","ColorOption","color","isEditing","onStartEditing","onRemove","onStopEditing","focusOutsideProps","name","nextName","slug","newColor","ColorPaletteEditListView","colors","editingColor","setEditingColor","colorReference","current","some","newColors","filter","length","undefined","map","index","currentColor","currentIndex","_currentColor","EMPTY_ARRAY","ColorEdit","setIsEditing","isAdding","hasColors","isSmall","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport kebabCase from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { __experimentalUseFocusOutside as useFocusOutside } 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 ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport {\n\tColorActionsContainer,\n\tColorEditStyles,\n\tColorHeading,\n\tColorHStackHeader,\n\tColorIndicatorStyled,\n\tColorItem,\n\tColorNameContainer,\n\tColorNameInputControl,\n\tDoneButton,\n\tRemoveButton,\n} from './styles';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction ColorNameInput( { value, onChange } ) {\n\treturn (\n\t\t<ColorNameInputControl\n\t\t\tlabel={ __( 'Color name' ) }\n\t\t\thideLabelFromVision\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t/>\n\t);\n}\n\nfunction ColorOption( {\n\tcolor,\n\tonChange,\n\tisEditing,\n\tonStartEditing,\n\tonRemove,\n\tonStopEditing,\n} ) {\n\tconst focusOutsideProps = useFocusOutside( onStopEditing );\n\treturn (\n\t\t<ColorItem\n\t\t\tas=\"div\"\n\t\t\tonClick={ onStartEditing }\n\t\t\t{ ...( isEditing ? focusOutsideProps : {} ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<ColorIndicatorStyled colorValue={ color.color } />\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>\n\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t<ColorNameInput\n\t\t\t\t\t\t\tvalue={ color.name }\n\t\t\t\t\t\t\tonChange={ ( nextName ) =>\n\t\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\t\tname: nextName,\n\t\t\t\t\t\t\t\t\tslug: kebabCase( 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<ColorNameContainer>{ color.name }</ColorNameContainer>\n\t\t\t\t\t) }\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isEditing && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<RemoveButton\n\t\t\t\t\t\t\tisSmall\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<Popover\n\t\t\t\t\tposition=\"bottom left\"\n\t\t\t\t\tclassName=\"components-color-edit__color-popover\"\n\t\t\t\t>\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tcolor={ color.color }\n\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\tonChange( {\n\t\t\t\t\t\t\t\t...color,\n\t\t\t\t\t\t\t\tcolor: newColor,\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</Popover>\n\t\t\t) }\n\t\t</ColorItem>\n\t);\n}\n\nfunction ColorPaletteEditListView( {\n\tcolors,\n\tonChange,\n\teditingColor,\n\tsetEditingColor,\n} ) {\n\t// When unmounting the component if there are empty colors (the user did not complete the insertion) clean them.\n\tconst colorReference = useRef();\n\tuseEffect( () => {\n\t\tcolorReference.current = colors;\n\t}, [ colors ] );\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( colorReference.current.some( ( { slug } ) => ! slug ) ) {\n\t\t\t\tconst newColors = colorReference.current.filter(\n\t\t\t\t\t( { slug } ) => slug\n\t\t\t\t);\n\t\t\t\tonChange( newColors.length ? newColors : undefined );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ colors.map( ( color, index ) => (\n\t\t\t\t\t<ColorOption\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tcolor={ color }\n\t\t\t\t\t\tonStartEditing={ () => {\n\t\t\t\t\t\t\tif ( editingColor !== index ) {\n\t\t\t\t\t\t\t\tsetEditingColor( index );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tcolors.map( ( currentColor, currentIndex ) => {\n\t\t\t\t\t\t\t\t\tif ( currentIndex === index ) {\n\t\t\t\t\t\t\t\t\t\treturn newColor;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\treturn currentColor;\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\tsetEditingColor( null );\n\t\t\t\t\t\t\tconst newColors = colors.filter(\n\t\t\t\t\t\t\t\t( _currentColor, 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\tnewColors.length ? newColors : undefined\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisEditing={ index === editingColor }\n\t\t\t\t\t\tonStopEditing={ () => {\n\t\t\t\t\t\t\tif ( index === editingColor ) {\n\t\t\t\t\t\t\t\tsetEditingColor( null );\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) ) }\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nconst EMPTY_ARRAY = [];\n\nexport default function ColorEdit( { colors = EMPTY_ARRAY, onChange } ) {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingColor, setEditingColor ] = useState( null );\n\tconst isAdding =\n\t\tisEditing &&\n\t\teditingColor &&\n\t\tcolors[ editingColor ] &&\n\t\t! colors[ editingColor ].slug;\n\n\tconst hasColors = colors.length > 0;\n\n\treturn (\n\t\t<ColorEditStyles>\n\t\t\t<ColorHStackHeader>\n\t\t\t\t<ColorHeading>{ __( 'Custom' ) }</ColorHeading>\n\t\t\t\t<ColorActionsContainer>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<DoneButton\n\t\t\t\t\t\t\tisSmall\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\tsetEditingColor( 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<Button\n\t\t\t\t\t\tisSmall\n\t\t\t\t\t\tisPressed={ isAdding }\n\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\tlabel={ __( 'Add custom color' ) }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChange( [\n\t\t\t\t\t\t\t\t...colors,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tcolor: '#000',\n\t\t\t\t\t\t\t\t\tname: '',\n\t\t\t\t\t\t\t\t\tslug: '',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t] );\n\t\t\t\t\t\t\tsetIsEditing( true );\n\t\t\t\t\t\t\tsetEditingColor( colors.length );\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<Button\n\t\t\t\t\t\t\tdisabled={ ! hasColors }\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Edit colors' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tsetIsEditing( true );\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{ isEditing && (\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\tlabel={ __( 'Custom color options' ) }\n\t\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<NavigableMenu role=\"menu\">\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetEditingColor( null );\n\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\tonChange();\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Remove all custom colors' ) }\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t) }\n\t\t\t\t</ColorActionsContainer>\n\t\t\t</ColorHStackHeader>\n\t\t\t{ hasColors && (\n\t\t\t\t<>\n\t\t\t\t\t{ isEditing && (\n\t\t\t\t\t\t<ColorPaletteEditListView\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\teditingColor={ editingColor }\n\t\t\t\t\t\t\tsetEditingColor={ setEditingColor }\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<ColorPalette\n\t\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\t\tonChange={ () => {} }\n\t\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\t\tdisableCustomColors={ true }\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{ ! hasColors &&\n\t\t\t\t__(\n\t\t\t\t\t'Custom colors are empty! Add some colors to create your own color palette.'\n\t\t\t\t) }\n\t\t</ColorEditStyles>\n\t);\n}\n"]}