@wordpress/components 39.0.0 → 40.0.0

package/build-module/modal/index.mjs

@@ -127,6 +127,7 @@ function UnforwardedModal(props, forwardedRef) {
   function handleEscapeKeyDown(event) {
     if (shouldCloseOnEsc && (event.code === "Escape" || event.key === "Escape") && !event.defaultPrevented) {
       event.preventDefault();
+      event.stopPropagation();
       closeModal().then(() => onRequestClose(event));
     }
   }

package/build-module/modal/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/modal/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, useContext } from '@wordpress/element';\nimport { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport { Spacer } from '../spacer';\nimport { useModalExitAnimation } from './use-modal-exit-animation';\nimport { ModalContext } from './context';\n\n// Used to track body class names applied while modals are open.\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst bodyOpenClasses = new Map();\nfunction UnforwardedModal(props, forwardedRef) {\n  const {\n    bodyOpenClassName = 'modal-open',\n    role = 'dialog',\n    title = null,\n    focusOnMount = true,\n    shouldCloseOnEsc = true,\n    shouldCloseOnClickOutside = true,\n    isDismissible = true,\n    /* Accessibility. */\n    aria = {\n      labelledby: undefined,\n      describedby: undefined\n    },\n    onRequestClose,\n    icon,\n    closeButtonLabel,\n    children,\n    style,\n    overlayClassName: overlayClassnameProp,\n    className,\n    contentLabel,\n    onKeyDown,\n    isFullScreen = false,\n    size,\n    headerActions = null,\n    __experimentalHideHeader = false\n  } = props;\n  const ref = useRef(null);\n  const instanceId = useInstanceId(Modal);\n  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;\n\n  // The focus hook does not support 'firstContentElement' but this is a valid\n  // value for the Modal's focusOnMount prop. The following code ensures the focus\n  // hook will focus the first focusable node within the element to which it is applied.\n  // When `firstContentElement` is passed as the value of the focusOnMount prop,\n  // the focus hook is applied to the Modal's content element.\n  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n  // focus hook will focus the first element in the Modal's **content** when\n  // `firstContentElement` is passed.\n  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);\n  const constrainedTabbingRef = useConstrainedTabbing();\n  const focusReturnRef = useFocusReturn();\n  const contentRef = useRef(null);\n  const childrenContainerRef = useRef(null);\n  const [hasScrolledContent, setHasScrolledContent] = useState(false);\n  const [hasScrollableContent, setHasScrollableContent] = useState(false);\n  let sizeClass;\n  if (isFullScreen || size === 'fill') {\n    sizeClass = 'is-full-screen';\n  } else if (size) {\n    sizeClass = `has-size-${size}`;\n  }\n\n  // Determines whether the Modal content is scrollable and updates the state.\n  const isContentScrollable = useCallback(() => {\n    if (!contentRef.current) {\n      return;\n    }\n    const closestScrollContainer = getScrollContainer(contentRef.current);\n    if (contentRef.current === closestScrollContainer) {\n      setHasScrollableContent(true);\n    } else {\n      setHasScrollableContent(false);\n    }\n  }, [contentRef]);\n\n  // Accessibly isolates/unisolates the modal.\n  useEffect(() => {\n    ariaHelper.modalize(ref.current);\n    return () => ariaHelper.unmodalize();\n  }, []);\n\n  // Keeps a fresh ref for the subsequent effect.\n  const onRequestCloseRef = useRef(undefined);\n  useEffect(() => {\n    onRequestCloseRef.current = onRequestClose;\n  }, [onRequestClose]);\n\n  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n  // one should remain open at a time and the list enables closing prior ones.\n  const dismissers = useContext(ModalContext);\n  // Used for the tracking and dismissing any nested modals.\n  const [nestedDismissers] = useState(() => new Set());\n\n  // Updates the stack tracking open modals at this level and calls\n  // onRequestClose for any prior and/or nested modals as applicable.\n  useEffect(() => {\n    // add this modal instance to the dismissers set\n    dismissers.add(onRequestCloseRef);\n    // request that all the other modals close themselves\n    for (const dismisser of dismissers) {\n      if (dismisser !== onRequestCloseRef) {\n        dismisser.current?.();\n      }\n    }\n    return () => {\n      // request that all the nested modals close themselves\n      for (const dismisser of nestedDismissers) {\n        dismisser.current?.();\n      }\n      // remove this modal instance from the dismissers set\n      dismissers.delete(onRequestCloseRef);\n    };\n  }, [dismissers, nestedDismissers]);\n\n  // Adds/removes the value of bodyOpenClassName to body element.\n  useEffect(() => {\n    const theClass = bodyOpenClassName;\n    const oneMore = 1 + (bodyOpenClasses.get(theClass) ?? 0);\n    bodyOpenClasses.set(theClass, oneMore);\n    document.body.classList.add(bodyOpenClassName);\n    return () => {\n      const oneLess = bodyOpenClasses.get(theClass) - 1;\n      if (oneLess === 0) {\n        document.body.classList.remove(theClass);\n        bodyOpenClasses.delete(theClass);\n      } else {\n        bodyOpenClasses.set(theClass, oneLess);\n      }\n    };\n  }, [bodyOpenClassName]);\n  const {\n    closeModal,\n    frameRef,\n    overlayClassname\n  } = useModalExitAnimation();\n\n  // Calls the isContentScrollable callback when the Modal children container resizes.\n  useLayoutEffect(() => {\n    if (!window.ResizeObserver || !childrenContainerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(isContentScrollable);\n    resizeObserver.observe(childrenContainerRef.current);\n    isContentScrollable();\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [isContentScrollable, childrenContainerRef]);\n  function handleEscapeKeyDown(event) {\n    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {\n      event.preventDefault();\n      closeModal().then(() => onRequestClose(event));\n    }\n  }\n  const onContentContainerScroll = useCallback(e => {\n    const scrollY = e?.currentTarget?.scrollTop ?? -1;\n    if (!hasScrolledContent && scrollY > 0) {\n      setHasScrolledContent(true);\n    } else if (hasScrolledContent && scrollY <= 0) {\n      setHasScrolledContent(false);\n    }\n  }, [hasScrolledContent]);\n  let pressTarget = null;\n  const overlayPressHandlers = {\n    onPointerDown: event => {\n      if (event.target === event.currentTarget) {\n        pressTarget = event.target;\n        // Avoids focus changing so that focus return works as expected.\n        event.preventDefault();\n      }\n    },\n    // Closes the modal with two exceptions. 1. Opening the context menu on\n    // the overlay. 2. Pressing on the overlay then dragging the pointer\n    // over the modal and releasing. Due to the modal being a child of the\n    // overlay, such a gesture is a `click` on the overlay and cannot be\n    // excepted by a `click` handler. Thus the tactic of handling\n    // `pointerup` and comparing its target to that of the `pointerdown`.\n    onPointerUp: ({\n      target,\n      button\n    }) => {\n      const isSameTarget = target === pressTarget;\n      pressTarget = null;\n      if (button === 0 && isSameTarget) {\n        closeModal().then(() => onRequestClose());\n      }\n    }\n  };\n  const modal =\n  /*#__PURE__*/\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  _jsx(\"div\", {\n    ref: useMergeRefs([ref, forwardedRef]),\n    className: clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),\n    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),\n    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),\n    children: /*#__PURE__*/_jsx(StyleProvider, {\n      document: document,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: clsx('components-modal__frame', sizeClass, className),\n        style: style,\n        ref: useMergeRefs([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),\n        role: role,\n        \"aria-label\": contentLabel,\n        \"aria-labelledby\": contentLabel ? undefined : headingId,\n        \"aria-describedby\": aria.describedby,\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: /*#__PURE__*/_jsxs(\"div\", {\n          className: clsx('components-modal__content', {\n            'hide-header': __experimentalHideHeader,\n            'is-scrollable': hasScrollableContent,\n            'has-scrolled-content': hasScrolledContent\n          }),\n          role: \"document\",\n          onScroll: onContentContainerScroll,\n          ref: contentRef,\n          \"aria-label\": hasScrollableContent ? __('Scrollable section') : undefined,\n          tabIndex: hasScrollableContent ? 0 : undefined,\n          children: [!__experimentalHideHeader && /*#__PURE__*/_jsxs(\"div\", {\n            className: \"components-modal__header\",\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: \"components-modal__header-heading-container\",\n              children: [icon && /*#__PURE__*/_jsx(\"span\", {\n                className: \"components-modal__icon-container\",\n                \"aria-hidden\": true,\n                children: icon\n              }), title && /*#__PURE__*/_jsx(\"h1\", {\n                id: headingId,\n                className: \"components-modal__header-heading\",\n                children: title\n              })]\n            }), headerActions, isDismissible && /*#__PURE__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Spacer, {\n                marginBottom: 0,\n                marginLeft: 2\n              }), /*#__PURE__*/_jsx(Button, {\n                size: \"compact\",\n                onClick: event => closeModal().then(() => onRequestClose(event)),\n                icon: close,\n                label: closeButtonLabel || __('Close')\n              })]\n            })]\n          }), /*#__PURE__*/_jsx(\"div\", {\n            ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),\n            className: \"components-modal__children-container\",\n            children: children\n          })]\n        })\n      })\n    })\n  });\n  return createPortal(/*#__PURE__*/_jsx(ModalContext.Provider, {\n    value: nestedDismissers,\n    children: modal\n  }), document.body);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef(UnforwardedModal);\nModal.displayName = 'Modal';\nexport default Modal;"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,cAAc,aAAa,WAAW,QAAQ,UAAU,YAAY,iBAAiB,kBAAkB;AAChH,SAAS,eAAe,gBAAgB,iBAAiB,uBAAuB,oBAAoB;AACpG,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,YAAY,gBAAgB;AAC5B,OAAO,YAAY;AACnB,OAAO,mBAAmB;AAC1B,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAG7B,SAAS,OAAO,MAAM,QAAQ,OAAO,YAAY,iBAAiB;AAClE,IAAM,kBAAkB,oBAAI,IAAI;AAChC,SAAS,iBAAiB,OAAO,cAAc;AAC7C,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,4BAA4B;AAAA,IAC5B,gBAAgB;AAAA;AAAA,IAEhB,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,aAAa;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,gBAAgB;AAAA,IAChB,2BAA2B;AAAA,EAC7B,IAAI;AACJ,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,YAAY,QAAQ,2BAA2B,UAAU,KAAK,KAAK;AAUzE,QAAM,kBAAkB,gBAAgB,iBAAiB,wBAAwB,iBAAiB,YAAY;AAC9G,QAAM,wBAAwB,sBAAsB;AACpD,QAAM,iBAAiB,eAAe;AACtC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,uBAAuB,OAAO,IAAI;AACxC,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AACtE,MAAI;AACJ,MAAI,gBAAgB,SAAS,QAAQ;AACnC,gBAAY;AAAA,EACd,WAAW,MAAM;AACf,gBAAY,YAAY,IAAI;AAAA,EAC9B;AAGA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,CAAC,WAAW,SAAS;AACvB;AAAA,IACF;AACA,UAAM,yBAAyB,mBAAmB,WAAW,OAAO;AACpE,QAAI,WAAW,YAAY,wBAAwB;AACjD,8BAAwB,IAAI;AAAA,IAC9B,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAGf,YAAU,MAAM;AACd,IAAW,oBAAS,IAAI,OAAO;AAC/B,WAAO,MAAiB,sBAAW;AAAA,EACrC,GAAG,CAAC,CAAC;AAGL,QAAM,oBAAoB,OAAO,MAAS;AAC1C,YAAU,MAAM;AACd,sBAAkB,UAAU;AAAA,EAC9B,GAAG,CAAC,cAAc,CAAC;AAInB,QAAM,aAAa,WAAW,YAAY;AAE1C,QAAM,CAAC,gBAAgB,IAAI,SAAS,MAAM,oBAAI,IAAI,CAAC;AAInD,YAAU,MAAM;AAEd,eAAW,IAAI,iBAAiB;AAEhC,eAAW,aAAa,YAAY;AAClC,UAAI,cAAc,mBAAmB;AACnC,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF;AACA,WAAO,MAAM;AAEX,iBAAW,aAAa,kBAAkB;AACxC,kBAAU,UAAU;AAAA,MACtB;AAEA,iBAAW,OAAO,iBAAiB;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,YAAY,gBAAgB,CAAC;AAGjC,YAAU,MAAM;AACd,UAAM,WAAW;AACjB,UAAM,UAAU,KAAK,gBAAgB,IAAI,QAAQ,KAAK;AACtD,oBAAgB,IAAI,UAAU,OAAO;AACrC,aAAS,KAAK,UAAU,IAAI,iBAAiB;AAC7C,WAAO,MAAM;AACX,YAAM,UAAU,gBAAgB,IAAI,QAAQ,IAAI;AAChD,UAAI,YAAY,GAAG;AACjB,iBAAS,KAAK,UAAU,OAAO,QAAQ;AACvC,wBAAgB,OAAO,QAAQ;AAAA,MACjC,OAAO;AACL,wBAAgB,IAAI,UAAU,OAAO;AAAA,MACvC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,CAAC;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAG1B,kBAAgB,MAAM;AACpB,QAAI,CAAC,OAAO,kBAAkB,CAAC,qBAAqB,SAAS;AAC3D;AAAA,IACF;AACA,UAAM,iBAAiB,IAAI,eAAe,mBAAmB;AAC7D,mBAAe,QAAQ,qBAAqB,OAAO;AACnD,wBAAoB;AACpB,WAAO,MAAM;AACX,qBAAe,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,qBAAqB,oBAAoB,CAAC;AAC9C,WAAS,oBAAoB,OAAO;AAClC,QAAI,qBAAqB,MAAM,SAAS,YAAY,MAAM,QAAQ,aAAa,CAAC,MAAM,kBAAkB;AACtG,YAAM,eAAe;AACrB,iBAAW,EAAE,KAAK,MAAM,eAAe,KAAK,CAAC;AAAA,IAC/C;AAAA,EACF;AACA,QAAM,2BAA2B,YAAY,OAAK;AAChD,UAAM,UAAU,GAAG,eAAe,aAAa;AAC/C,QAAI,CAAC,sBAAsB,UAAU,GAAG;AACtC,4BAAsB,IAAI;AAAA,IAC5B,WAAW,sBAAsB,WAAW,GAAG;AAC7C,4BAAsB,KAAK;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AACvB,MAAI,cAAc;AAClB,QAAM,uBAAuB;AAAA,IAC3B,eAAe,WAAS;AACtB,UAAI,MAAM,WAAW,MAAM,eAAe;AACxC,sBAAc,MAAM;AAEpB,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAa,CAAC;AAAA,MACZ;AAAA,MACA;AAAA,IACF,MAAM;AACJ,YAAM,eAAe,WAAW;AAChC,oBAAc;AACd,UAAI,WAAW,KAAK,cAAc;AAChC,mBAAW,EAAE,KAAK,MAAM,eAAe,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AACA,QAAM;AAAA;AAAA,IAGN,qBAAK,OAAO;AAAA,MACV,KAAK,aAAa,CAAC,KAAK,YAAY,CAAC;AAAA,MACrC,WAAW,KAAK,oCAAoC,kBAAkB,oBAAoB;AAAA,MAC1F,WAAW,oBAAoB,mBAAmB;AAAA,MAClD,GAAI,4BAA4B,uBAAuB,CAAC;AAAA,MACxD,UAAuB,qBAAK,eAAe;AAAA,QACzC;AAAA,QACA,UAAuB,qBAAK,OAAO;AAAA,UACjC,WAAW,KAAK,2BAA2B,WAAW,SAAS;AAAA,UAC/D;AAAA,UACA,KAAK,aAAa,CAAC,UAAU,uBAAuB,gBAAgB,iBAAiB,wBAAwB,kBAAkB,IAAI,CAAC;AAAA,UACpI;AAAA,UACA,cAAc;AAAA,UACd,mBAAmB,eAAe,SAAY;AAAA,UAC9C,oBAAoB,KAAK;AAAA,UACzB,UAAU;AAAA,UACV;AAAA,UACA,UAAuB,sBAAM,OAAO;AAAA,YAClC,WAAW,KAAK,6BAA6B;AAAA,cAC3C,eAAe;AAAA,cACf,iBAAiB;AAAA,cACjB,wBAAwB;AAAA,YAC1B,CAAC;AAAA,YACD,MAAM;AAAA,YACN,UAAU;AAAA,YACV,KAAK;AAAA,YACL,cAAc,uBAAuB,GAAG,oBAAoB,IAAI;AAAA,YAChE,UAAU,uBAAuB,IAAI;AAAA,YACrC,UAAU,CAAC,CAAC,4BAAyC,sBAAM,OAAO;AAAA,cAChE,WAAW;AAAA,cACX,UAAU,CAAc,sBAAM,OAAO;AAAA,gBACnC,WAAW;AAAA,gBACX,UAAU,CAAC,QAAqB,qBAAK,QAAQ;AAAA,kBAC3C,WAAW;AAAA,kBACX,eAAe;AAAA,kBACf,UAAU;AAAA,gBACZ,CAAC,GAAG,SAAsB,qBAAK,MAAM;AAAA,kBACnC,IAAI;AAAA,kBACJ,WAAW;AAAA,kBACX,UAAU;AAAA,gBACZ,CAAC,CAAC;AAAA,cACJ,CAAC,GAAG,eAAe,iBAA8B,sBAAM,WAAW;AAAA,gBAChE,UAAU,CAAc,qBAAK,QAAQ;AAAA,kBACnC,cAAc;AAAA,kBACd,YAAY;AAAA,gBACd,CAAC,GAAgB,qBAAK,QAAQ;AAAA,kBAC5B,MAAM;AAAA,kBACN,SAAS,WAAS,WAAW,EAAE,KAAK,MAAM,eAAe,KAAK,CAAC;AAAA,kBAC/D,MAAM;AAAA,kBACN,OAAO,oBAAoB,GAAG,OAAO;AAAA,gBACvC,CAAC,CAAC;AAAA,cACJ,CAAC,CAAC;AAAA,YACJ,CAAC,GAAgB,qBAAK,OAAO;AAAA,cAC3B,KAAK,aAAa,CAAC,sBAAsB,iBAAiB,wBAAwB,kBAAkB,IAAI,CAAC;AAAA,cACzG,WAAW;AAAA,cACX;AAAA,YACF,CAAC,CAAC;AAAA,UACJ,CAAC;AAAA,QACH,CAAC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAAA;AACD,SAAO,aAA0B,qBAAK,aAAa,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC,GAAG,SAAS,IAAI;AACnB;AAiCO,IAAM,QAAQ,WAAW,gBAAgB;AAChD,MAAM,cAAc;AACpB,IAAO,gBAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { createPortal, useCallback, useEffect, useRef, useState, forwardRef, useLayoutEffect, useContext } from '@wordpress/element';\nimport { useInstanceId, useFocusReturn, useFocusOnMount, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport { Spacer } from '../spacer';\nimport { useModalExitAnimation } from './use-modal-exit-animation';\nimport { ModalContext } from './context';\n\n// Used to track body class names applied while modals are open.\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst bodyOpenClasses = new Map();\nfunction UnforwardedModal(props, forwardedRef) {\n  const {\n    bodyOpenClassName = 'modal-open',\n    role = 'dialog',\n    title = null,\n    focusOnMount = true,\n    shouldCloseOnEsc = true,\n    shouldCloseOnClickOutside = true,\n    isDismissible = true,\n    /* Accessibility. */\n    aria = {\n      labelledby: undefined,\n      describedby: undefined\n    },\n    onRequestClose,\n    icon,\n    closeButtonLabel,\n    children,\n    style,\n    overlayClassName: overlayClassnameProp,\n    className,\n    contentLabel,\n    onKeyDown,\n    isFullScreen = false,\n    size,\n    headerActions = null,\n    __experimentalHideHeader = false\n  } = props;\n  const ref = useRef(null);\n  const instanceId = useInstanceId(Modal);\n  const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby;\n\n  // The focus hook does not support 'firstContentElement' but this is a valid\n  // value for the Modal's focusOnMount prop. The following code ensures the focus\n  // hook will focus the first focusable node within the element to which it is applied.\n  // When `firstContentElement` is passed as the value of the focusOnMount prop,\n  // the focus hook is applied to the Modal's content element.\n  // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the\n  // focus hook will focus the first element in the Modal's **content** when\n  // `firstContentElement` is passed.\n  const focusOnMountRef = useFocusOnMount(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount);\n  const constrainedTabbingRef = useConstrainedTabbing();\n  const focusReturnRef = useFocusReturn();\n  const contentRef = useRef(null);\n  const childrenContainerRef = useRef(null);\n  const [hasScrolledContent, setHasScrolledContent] = useState(false);\n  const [hasScrollableContent, setHasScrollableContent] = useState(false);\n  let sizeClass;\n  if (isFullScreen || size === 'fill') {\n    sizeClass = 'is-full-screen';\n  } else if (size) {\n    sizeClass = `has-size-${size}`;\n  }\n\n  // Determines whether the Modal content is scrollable and updates the state.\n  const isContentScrollable = useCallback(() => {\n    if (!contentRef.current) {\n      return;\n    }\n    const closestScrollContainer = getScrollContainer(contentRef.current);\n    if (contentRef.current === closestScrollContainer) {\n      setHasScrollableContent(true);\n    } else {\n      setHasScrollableContent(false);\n    }\n  }, [contentRef]);\n\n  // Accessibly isolates/unisolates the modal.\n  useEffect(() => {\n    ariaHelper.modalize(ref.current);\n    return () => ariaHelper.unmodalize();\n  }, []);\n\n  // Keeps a fresh ref for the subsequent effect.\n  const onRequestCloseRef = useRef(undefined);\n  useEffect(() => {\n    onRequestCloseRef.current = onRequestClose;\n  }, [onRequestClose]);\n\n  // The list of `onRequestClose` callbacks of open (non-nested) Modals. Only\n  // one should remain open at a time and the list enables closing prior ones.\n  const dismissers = useContext(ModalContext);\n  // Used for the tracking and dismissing any nested modals.\n  const [nestedDismissers] = useState(() => new Set());\n\n  // Updates the stack tracking open modals at this level and calls\n  // onRequestClose for any prior and/or nested modals as applicable.\n  useEffect(() => {\n    // add this modal instance to the dismissers set\n    dismissers.add(onRequestCloseRef);\n    // request that all the other modals close themselves\n    for (const dismisser of dismissers) {\n      if (dismisser !== onRequestCloseRef) {\n        dismisser.current?.();\n      }\n    }\n    return () => {\n      // request that all the nested modals close themselves\n      for (const dismisser of nestedDismissers) {\n        dismisser.current?.();\n      }\n      // remove this modal instance from the dismissers set\n      dismissers.delete(onRequestCloseRef);\n    };\n  }, [dismissers, nestedDismissers]);\n\n  // Adds/removes the value of bodyOpenClassName to body element.\n  useEffect(() => {\n    const theClass = bodyOpenClassName;\n    const oneMore = 1 + (bodyOpenClasses.get(theClass) ?? 0);\n    bodyOpenClasses.set(theClass, oneMore);\n    document.body.classList.add(bodyOpenClassName);\n    return () => {\n      const oneLess = bodyOpenClasses.get(theClass) - 1;\n      if (oneLess === 0) {\n        document.body.classList.remove(theClass);\n        bodyOpenClasses.delete(theClass);\n      } else {\n        bodyOpenClasses.set(theClass, oneLess);\n      }\n    };\n  }, [bodyOpenClassName]);\n  const {\n    closeModal,\n    frameRef,\n    overlayClassname\n  } = useModalExitAnimation();\n\n  // Calls the isContentScrollable callback when the Modal children container resizes.\n  useLayoutEffect(() => {\n    if (!window.ResizeObserver || !childrenContainerRef.current) {\n      return;\n    }\n    const resizeObserver = new ResizeObserver(isContentScrollable);\n    resizeObserver.observe(childrenContainerRef.current);\n    isContentScrollable();\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [isContentScrollable, childrenContainerRef]);\n  function handleEscapeKeyDown(event) {\n    if (shouldCloseOnEsc && (event.code === 'Escape' || event.key === 'Escape') && !event.defaultPrevented) {\n      event.preventDefault();\n      event.stopPropagation();\n      closeModal().then(() => onRequestClose(event));\n    }\n  }\n  const onContentContainerScroll = useCallback(e => {\n    const scrollY = e?.currentTarget?.scrollTop ?? -1;\n    if (!hasScrolledContent && scrollY > 0) {\n      setHasScrolledContent(true);\n    } else if (hasScrolledContent && scrollY <= 0) {\n      setHasScrolledContent(false);\n    }\n  }, [hasScrolledContent]);\n  let pressTarget = null;\n  const overlayPressHandlers = {\n    onPointerDown: event => {\n      if (event.target === event.currentTarget) {\n        pressTarget = event.target;\n        // Avoids focus changing so that focus return works as expected.\n        event.preventDefault();\n      }\n    },\n    // Closes the modal with two exceptions. 1. Opening the context menu on\n    // the overlay. 2. Pressing on the overlay then dragging the pointer\n    // over the modal and releasing. Due to the modal being a child of the\n    // overlay, such a gesture is a `click` on the overlay and cannot be\n    // excepted by a `click` handler. Thus the tactic of handling\n    // `pointerup` and comparing its target to that of the `pointerdown`.\n    onPointerUp: ({\n      target,\n      button\n    }) => {\n      const isSameTarget = target === pressTarget;\n      pressTarget = null;\n      if (button === 0 && isSameTarget) {\n        closeModal().then(() => onRequestClose());\n      }\n    }\n  };\n  const modal =\n  /*#__PURE__*/\n  // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n  _jsx(\"div\", {\n    ref: useMergeRefs([ref, forwardedRef]),\n    className: clsx('components-modal__screen-overlay', overlayClassname, overlayClassnameProp),\n    onKeyDown: withIgnoreIMEEvents(handleEscapeKeyDown),\n    ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}),\n    children: /*#__PURE__*/_jsx(StyleProvider, {\n      document: document,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        className: clsx('components-modal__frame', sizeClass, className),\n        style: style,\n        ref: useMergeRefs([frameRef, constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),\n        role: role,\n        \"aria-label\": contentLabel,\n        \"aria-labelledby\": contentLabel ? undefined : headingId,\n        \"aria-describedby\": aria.describedby,\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: /*#__PURE__*/_jsxs(\"div\", {\n          className: clsx('components-modal__content', {\n            'hide-header': __experimentalHideHeader,\n            'is-scrollable': hasScrollableContent,\n            'has-scrolled-content': hasScrolledContent\n          }),\n          role: \"document\",\n          onScroll: onContentContainerScroll,\n          ref: contentRef,\n          \"aria-label\": hasScrollableContent ? __('Scrollable section') : undefined,\n          tabIndex: hasScrollableContent ? 0 : undefined,\n          children: [!__experimentalHideHeader && /*#__PURE__*/_jsxs(\"div\", {\n            className: \"components-modal__header\",\n            children: [/*#__PURE__*/_jsxs(\"div\", {\n              className: \"components-modal__header-heading-container\",\n              children: [icon && /*#__PURE__*/_jsx(\"span\", {\n                className: \"components-modal__icon-container\",\n                \"aria-hidden\": true,\n                children: icon\n              }), title && /*#__PURE__*/_jsx(\"h1\", {\n                id: headingId,\n                className: \"components-modal__header-heading\",\n                children: title\n              })]\n            }), headerActions, isDismissible && /*#__PURE__*/_jsxs(_Fragment, {\n              children: [/*#__PURE__*/_jsx(Spacer, {\n                marginBottom: 0,\n                marginLeft: 2\n              }), /*#__PURE__*/_jsx(Button, {\n                size: \"compact\",\n                onClick: event => closeModal().then(() => onRequestClose(event)),\n                icon: close,\n                label: closeButtonLabel || __('Close')\n              })]\n            })]\n          }), /*#__PURE__*/_jsx(\"div\", {\n            ref: useMergeRefs([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]),\n            className: \"components-modal__children-container\",\n            children: children\n          })]\n        })\n      })\n    })\n  });\n  return createPortal(/*#__PURE__*/_jsx(ModalContext.Provider, {\n    value: nestedDismissers,\n    children: modal\n  }), document.body);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n *   const [ isOpen, setOpen ] = useState( false );\n *   const openModal = () => setOpen( true );\n *   const closeModal = () => setOpen( false );\n *\n *   return (\n *     <>\n *       <Button variant=\"secondary\" onClick={ openModal }>\n *         Open Modal\n *       </Button>\n *       { isOpen && (\n *         <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n *           <Button variant=\"secondary\" onClick={ closeModal }>\n *             My custom close button\n *           </Button>\n *         </Modal>\n *       ) }\n *     </>\n *   );\n * };\n * ```\n */\nexport const Modal = forwardRef(UnforwardedModal);\nModal.displayName = 'Modal';\nexport default Modal;"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,9 +1,11 @@
 // packages/components/src/palette-edit/index.tsx
 import clsx from "clsx";
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
 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 { useDebounce, useInstanceId } from "@wordpress/compose";
 import { kebabCase } from "@wordpress/kebab-case";
 import Button from "../button/index.mjs";
 import { ColorPicker } from "../color-picker/index.mjs";
@@ -13,6 +15,10 @@ import { Item, ItemGroup } from "../item-group/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
 import GradientPicker from "../gradient-picker/index.mjs";
 import ColorPalette from "../color-palette/index.mjs";
+import { DuotonePicker } from "../duotone-picker/index.mjs";
+import ColorListPicker from "../duotone-picker/color-list-picker/index.mjs";
+import CustomDuotoneBar from "../duotone-picker/custom-duotone-bar.mjs";
+import { getDefaultColors, getGradientFromCSSColors } from "../duotone-picker/utils.mjs";
 import DropdownMenu from "../dropdown-menu/index.mjs";
 import Popover from "../popover/index.mjs";
 import { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from "./styles.mjs";
@@ -20,7 +26,96 @@ import { NavigableMenu } from "../navigable-container/index.mjs";
 import { DEFAULT_GRADIENT } from "../custom-gradient-picker/constants.mjs";
 import CustomGradientPicker from "../custom-gradient-picker/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+extend([namesPlugin]);
 var DEFAULT_COLOR = "#000";
+function getUsableDuotoneColors(colorPalette = []) {
+  return colorPalette.flatMap((paletteColor) => {
+    if (typeof paletteColor.color !== "string") {
+      return [];
+    }
+    const parsed = colord(paletteColor.color);
+    return parsed.isValid() ? [{
+      ...paletteColor,
+      color: parsed.toHex()
+    }] : [];
+  });
+}
+function getDuotoneColors(element) {
+  const colors = element?.colors;
+  return Array.isArray(colors) ? colors : [];
+}
+function getElementValue(element, variant) {
+  if (!element) {
+    return void 0;
+  }
+  switch (variant) {
+    case "duotone":
+      return getGradientFromCSSColors(getDuotoneColors(element), "135deg");
+    case "gradient":
+      return element.gradient;
+    default:
+      return element.color;
+  }
+}
+function getNameInputLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Duotone name");
+    case "gradient":
+      return __("Gradient name");
+    default:
+      return __("Color name");
+  }
+}
+function getRemoveLabelFormat(variant) {
+  return variant === "duotone" ? (
+    /* translators: %s is a duotone name, e.g. "Purple and yellow". */
+    __("Remove duotone: %s")
+  ) : (
+    /* translators: %s is a color or gradient name, e.g. "Red". */
+    __("Remove color: %s")
+  );
+}
+function getAddLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Add duotone");
+    case "gradient":
+      return __("Add gradient");
+    default:
+      return __("Add color");
+  }
+}
+function getOptionsLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Duotone options");
+    case "gradient":
+      return __("Gradient options");
+    default:
+      return __("Color options");
+  }
+}
+function getRemoveAllLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Remove all duotones");
+    case "gradient":
+      return __("Remove all gradients");
+    default:
+      return __("Remove all colors");
+  }
+}
+function getResetLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Reset duotones");
+    case "gradient":
+      return __("Reset gradient");
+    default:
+      return __("Reset colors");
+  }
+}
 function NameInput({
   value,
   onChange,
@@ -51,8 +146,9 @@ function deduplicateElementSlugs(elements) {
     };
   });
 }
-function getNameAndSlugForPosition(elements, slugPrefix) {
-  const nameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
+function getNameAndSlugForPosition(elements, slugPrefix, variant = "color") {
+  const stem = variant === "duotone" ? "duotone" : "color";
+  const nameRegex = new RegExp(`^${slugPrefix}${stem}-([\\d]+)$`);
   const position = elements.reduce((previousValue, currentValue) => {
     if (typeof currentValue?.slug === "string") {
       const matches = currentValue?.slug.match(nameRegex);
@@ -66,16 +162,21 @@ function getNameAndSlugForPosition(elements, slugPrefix) {
     return previousValue;
   }, 1);
   return {
-    name: sprintf(
+    name: variant === "duotone" ? sprintf(
+      /* translators: %d: is an id for a custom duotone */
+      __("Duotone %d"),
+      position
+    ) : sprintf(
       /* translators: %d: is an id for a custom color */
       __("Color %d"),
       position
     ),
-    slug: `${slugPrefix}color-${position}`
+    slug: `${slugPrefix}${stem}-${position}`
   };
 }
 function ColorPickerPopover({
-  isGradient,
+  variant,
+  colorPalette,
   element,
   onChange,
   popoverProps: receivedPopoverProps,
@@ -96,7 +197,7 @@ function ColorPickerPopover({
   return /* @__PURE__ */ _jsxs(Popover, {
     ...popoverProps,
     onClose,
-    children: [!isGradient && /* @__PURE__ */ _jsx(ColorPicker, {
+    children: [variant === "color" && /* @__PURE__ */ _jsx(ColorPicker, {
       color: element.color,
       enableAlpha: true,
       onChange: (newColor) => {
@@ -105,7 +206,7 @@ function ColorPickerPopover({
           color: newColor
         });
       }
-    }), isGradient && /* @__PURE__ */ _jsx("div", {
+    }), variant === "gradient" && /* @__PURE__ */ _jsx("div", {
       className: "components-palette-edit__popover-gradient-picker",
       children: /* @__PURE__ */ _jsx(CustomGradientPicker, {
         __experimentalIsRenderedInSidebar: true,
@@ -117,6 +218,41 @@ function ColorPickerPopover({
           });
         }
       })
+    }), variant === "duotone" && /* @__PURE__ */ _jsx("div", {
+      className: "components-palette-edit__popover-duotone-picker",
+      children: /* @__PURE__ */ _jsxs(VStack, {
+        spacing: 3,
+        children: [/* @__PURE__ */ _jsx(CustomDuotoneBar, {
+          value: getDuotoneColors(element),
+          onChange: (newColors) => {
+            if (!newColors?.length) {
+              return;
+            }
+            onChange({
+              ...element,
+              colors: newColors
+            });
+          }
+        }), /* @__PURE__ */ _jsx(ColorListPicker, {
+          labels: [__("Shadows"), __("Highlights")],
+          colors: colorPalette ?? [],
+          value: getDuotoneColors(element),
+          enableAlpha: true,
+          onChange: (newColors) => {
+            const [defaultDark, defaultLight] = getDefaultColors(colorPalette ?? []);
+            onChange({
+              ...element,
+              colors: [
+                // Falsy rather than nullish, to match
+                // how `DuotonePicker` fills a cleared
+                // shadow or highlight.
+                newColors[0] || defaultDark,
+                newColors[1] || defaultLight
+              ]
+            });
+          }
+        })]
+      })
     })]
   });
 }
@@ -127,9 +263,10 @@ function Option({
   onRemove,
   popoverProps: receivedPopoverProps,
   slugPrefix,
-  isGradient
+  variant,
+  colorPalette
 }) {
-  const value = isGradient ? element.gradient : element.color;
+  const value = getElementValue(element, variant);
   const [isEditingColor, setIsEditingColor] = useState(false);
   const [popoverAnchor, setPopoverAnchor] = useState(null);
   const popoverProps = useMemo(() => ({
@@ -148,7 +285,7 @@ function Option({
           setIsEditingColor(true);
         },
         "aria-label": sprintf(
-          // translators: %s is a color or gradient name, e.g. "Red".
+          // translators: %s is a color, gradient or duotone name, e.g. "Red".
           __("Edit: %s"),
           element.name.trim().length ? element.name : value || ""
         ),
@@ -160,7 +297,7 @@ function Option({
         })
       }), /* @__PURE__ */ _jsx(FlexBlock, {
         children: !canOnlyChangeValues ? /* @__PURE__ */ _jsx(NameInput, {
-          label: isGradient ? __("Gradient name") : __("Color name"),
+          label: getNameInputLabel(variant),
           value: element.name,
           onChange: (nextName) => onChange({
             ...element,
@@ -177,16 +314,13 @@ function Option({
         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 || ""
-          ),
+          label: sprintf(getRemoveLabelFormat(variant), element.name.trim().length ? element.name : value || ""),
           onClick: onRemove
         })
       })]
     }), isEditingColor && /* @__PURE__ */ _jsx(ColorPickerPopover, {
-      isGradient,
+      variant,
+      colorPalette,
       onChange,
       element,
       popoverProps,
@@ -199,7 +333,8 @@ function PaletteEditListView({
   onChange,
   canOnlyChangeValues,
   slugPrefix,
-  isGradient,
+  variant,
+  colorPalette,
   popoverProps,
   addColorRef
 }) {
@@ -215,7 +350,8 @@ function PaletteEditListView({
       isBordered: true,
       isSeparated: true,
       children: elements.map((element, index) => /* @__PURE__ */ _jsx(Option, {
-        isGradient,
+        variant,
+        colorPalette,
         canOnlyChangeValues,
         element,
         onChange: (newElement) => {
@@ -245,7 +381,9 @@ function PaletteEditListView({
 var EMPTY_ARRAY = [];
 function PaletteEdit({
   gradients,
+  duotones,
   colors = EMPTY_ARRAY,
+  colorPalette,
   onChange,
   paletteLabel,
   paletteLabelHeadingLevel = 2,
@@ -255,8 +393,14 @@ function PaletteEdit({
   slugPrefix = "",
   popoverProps
 }) {
-  const isGradient = !!gradients;
-  const elements = isGradient ? gradients : colors;
+  let variant = "color";
+  if (gradients) {
+    variant = "gradient";
+  } else if (duotones) {
+    variant = "duotone";
+  }
+  const elements = gradients ?? duotones ?? colors;
+  const duotoneColorPalette = useMemo(() => getUsableDuotoneColors(colorPalette), [colorPalette]);
   const [isEditing, setIsEditing] = useState(false);
   const [editingElement, setEditingElement] = useState(null);
   const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;
@@ -265,17 +409,26 @@ function PaletteEdit({
   const debounceOnChange = useDebounce(onChange, 100);
   const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {
     const selectedElement = newEditingElementIndex === void 0 ? void 0 : elements[newEditingElementIndex];
-    const key = isGradient ? "gradient" : "color";
+    const key = variant === "gradient" ? "gradient" : "color";
     if (!!selectedElement && selectedElement[key] === value) {
       setEditingElement(newEditingElementIndex);
     } else {
       setIsEditing(true);
     }
-  }, [isGradient, elements]);
+  }, [variant, elements]);
+  const onSelectDuotoneItem = useCallback((value, newEditingElementIndex) => {
+    if (newEditingElementIndex !== void 0 && (duotones ?? [])[newEditingElementIndex]) {
+      setEditingElement(newEditingElementIndex);
+    } else {
+      setIsEditing(true);
+    }
+  }, [duotones]);
   const addColorRef = useRef(null);
+  const paletteLabelId = useInstanceId(PaletteEdit, "components-palette-edit__heading");
   return /* @__PURE__ */ _jsxs(PaletteEditStyles, {
     children: [/* @__PURE__ */ _jsxs(HStack, {
       children: [/* @__PURE__ */ _jsx(PaletteHeading, {
+        id: paletteLabelId,
         level: paletteLabelHeadingLevel,
         children: paletteLabel
       }), /* @__PURE__ */ _jsxs(PaletteActionsContainer, {
@@ -291,18 +444,24 @@ function PaletteEdit({
           size: "small",
           isPressed: isAdding,
           icon: plus,
-          label: isGradient ? __("Add gradient") : __("Add color"),
+          label: getAddLabel(variant),
           onClick: () => {
             const {
               name,
               slug
-            } = getNameAndSlugForPosition(elements, slugPrefix);
+            } = getNameAndSlugForPosition(elements, slugPrefix, variant);
             if (!!gradients) {
               onChange([...gradients, {
                 gradient: DEFAULT_GRADIENT,
                 name,
                 slug
               }]);
+            } else if (!!duotones) {
+              onChange([...duotones, {
+                colors: getDefaultColors(duotoneColorPalette),
+                name,
+                slug
+              }]);
             } else {
               onChange([...colors, {
                 color: DEFAULT_COLOR,
@@ -315,7 +474,7 @@ function PaletteEdit({
           }
         }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /* @__PURE__ */ _jsx(DropdownMenu, {
           icon: moreVertical,
-          label: isGradient ? __("Gradient options") : __("Color options"),
+          label: getOptionsLabel(variant),
           toggleProps: {
             size: "small"
           },
@@ -343,7 +502,7 @@ function PaletteEdit({
                   onClose();
                 },
                 className: "components-palette-edit__menu-button",
-                children: isGradient ? __("Remove all gradients") : __("Remove all colors")
+                children: getRemoveAllLabel(variant)
               }), canReset && /* @__PURE__ */ _jsx(Button, {
                 __next40pxDefaultSize: true,
                 className: "components-palette-edit__menu-button",
@@ -353,7 +512,7 @@ function PaletteEdit({
                   onChange();
                   onClose();
                 },
-                children: isGradient ? __("Reset gradient") : __("Reset colors")
+                children: getResetLabel(variant)
               })]
             })
           })
@@ -365,11 +524,13 @@ function PaletteEdit({
         elements,
         onChange,
         slugPrefix,
-        isGradient,
+        variant,
+        colorPalette: duotoneColorPalette,
         popoverProps,
         addColorRef
       }), !isEditing && editingElement !== null && /* @__PURE__ */ _jsx(ColorPickerPopover, {
-        isGradient,
+        variant,
+        colorPalette: duotoneColorPalette,
         onClose: () => setEditingElement(null),
         onChange: (newElement) => {
           debounceOnChange(
@@ -384,17 +545,31 @@ function PaletteEdit({
         },
         element: elements[editingElement ?? -1],
         popoverProps
-      }), !isEditing && (isGradient ? /* @__PURE__ */ _jsx(GradientPicker, {
+      }), !isEditing && variant === "gradient" && /* @__PURE__ */ _jsx(GradientPicker, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
         gradients,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomGradients: true
-      }) : /* @__PURE__ */ _jsx(ColorPalette, {
+      }), !isEditing && variant === "duotone" && /* @__PURE__ */ _jsx(DuotonePicker, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
+        duotonePalette: duotones ?? [],
+        colorPalette: duotoneColorPalette,
+        onChange: onSelectDuotoneItem,
+        clearable: false,
+        unsetable: false,
+        disableCustomDuotone: true,
+        disableCustomColors: true
+      }), !isEditing && variant === "color" && /* @__PURE__ */ _jsx(ColorPalette, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
         colors,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomColors: true
-      }))]
+      })]
     }), !hasElements && emptyMessage && /* @__PURE__ */ _jsx(PaletteEditContents, {
       children: emptyMessage
     })]