@wordpress/components 39.0.0 → 40.1.0

package/build/composite/context.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/composite/context.tsx"],
-  "sourcesContent": ["import { createContext, useContext } from '@wordpress/element';\nexport const CompositeContext = createContext({});\nCompositeContext.displayName = 'CompositeContext';\nexport const useCompositeContext = () => useContext(CompositeContext);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA0C;AACnC,IAAM,uBAAmB,8BAAc,CAAC,CAAC;AAChD,iBAAiB,cAAc;AACxB,IAAM,sBAAsB,UAAM,2BAAW,gBAAgB;",
+  "sourcesContent": ["import { createContext, useContext } from '@wordpress/element';\nexport const CompositeContext = createContext({});\nCompositeContext.displayName = 'CompositeContext';\nexport const useCompositeContext = () => useContext(CompositeContext);\nexport const CompositeGroupContext = createContext(false);\nCompositeGroupContext.displayName = 'CompositeGroupContext';\nexport const useCompositeGroupContext = () => useContext(CompositeGroupContext);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA0C;AACnC,IAAM,uBAAmB,8BAAc,CAAC,CAAC;AAChD,iBAAiB,cAAc;AACxB,IAAM,sBAAsB,UAAM,2BAAW,gBAAgB;AAC7D,IAAM,4BAAwB,8BAAc,KAAK;AACxD,sBAAsB,cAAc;AAC7B,IAAM,2BAA2B,UAAM,2BAAW,qBAAqB;",
   "names": []
 }

package/build/composite/group-label.cjs

@@ -39,6 +39,10 @@ var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeGroupLabel2 = (0, import_element.forwardRef)(function CompositeGroupLabel3(props, ref) {
   const context = (0, import_context.useCompositeContext)();
+  const isWithinGroup = (0, import_context.useCompositeGroupContext)();
+  if (!isWithinGroup) {
+    throw new Error("Composite.GroupLabel can only be rendered inside Composite.Group.");
+  }
   const store = props.store ?? context.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeGroupLabel, {
     store,

package/build/composite/group-label.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/composite/group-label.tsx"],
-  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { forwardRef } from '@wordpress/element';\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroupLabel = forwardRef(function CompositeGroupLabel(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeGroupLabel, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAA2B;AAC3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,2BAAsB,2BAAW,SAASA,qBAAoB,OAAO,KAAK;AACrF,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,6BAAqB;AAAA,IACpD;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { forwardRef } from '@wordpress/element';\nimport { useCompositeContext, useCompositeGroupContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroupLabel = forwardRef(function CompositeGroupLabel(props, ref) {\n  const context = useCompositeContext();\n  const isWithinGroup = useCompositeGroupContext();\n  if (!isWithinGroup) {\n    throw new Error('Composite.GroupLabel can only be rendered inside Composite.Group.');\n  }\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeGroupLabel, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,6BAAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAA2B;AAC3B,qBAA8D;AAC9D,yBAA4B;AACrB,IAAMA,2BAAsB,2BAAW,SAASA,qBAAoB,OAAO,KAAK;AACrF,QAAM,cAAU,oCAAoB;AACpC,QAAM,oBAAgB,yCAAyB;AAC/C,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,mEAAmE;AAAA,EACrF;AAKA,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,6BAAqB;AAAA,IACpD;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
   "names": ["CompositeGroupLabel", "_jsx"]
 }

package/build/composite/group.cjs

@@ -39,11 +39,19 @@ var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeGroup2 = (0, import_element.forwardRef)(function CompositeGroup3(props, ref) {
   const context = (0, import_context.useCompositeContext)();
+  const {
+    children,
+    ...restProps
+  } = props;
   const store = props.store ?? context.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeGroup, {
     store,
-    ...props,
-    ref
+    ...restProps,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.CompositeGroupContext.Provider, {
+      value: true,
+      children
+    })
   });
 });
 // Annotate the CommonJS export names for ESM import in node:

package/build/composite/group.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/composite/group.tsx"],
-  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { forwardRef } from '@wordpress/element';\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroup = forwardRef(function CompositeGroup(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeGroup, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAA2B;AAC3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,sBAAiB,2BAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { forwardRef } from '@wordpress/element';\nimport { CompositeGroupContext, useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeGroup = forwardRef(function CompositeGroup(props, ref) {\n  const context = useCompositeContext();\n  const {\n    children,\n    ...restProps\n  } = props;\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeGroup, {\n    store: store,\n    ...restProps,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(CompositeGroupContext.Provider, {\n      value: true,\n      children: children\n    })\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAA2B;AAC3B,qBAA2D;AAC3D,yBAA4B;AACrB,IAAMA,sBAAiB,2BAAW,SAASA,gBAAe,OAAO,KAAK;AAC3E,QAAM,cAAU,oCAAoB;AACpC,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAKJ,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,wBAAgB;AAAA,IAC/C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,IACA,UAAuB,uCAAAA,KAAK,qCAAsB,UAAU;AAAA,MAC1D,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH,CAAC;",
   "names": ["CompositeGroup", "_jsx"]
 }

package/build/composite/item.cjs

@@ -35,11 +35,15 @@ __export(item_exports, {
 module.exports = __toCommonJS(item_exports);
 var Ariakit = __toESM(require("@ariakit/react"));
 var import_element = require("@wordpress/element");
+var import_warning = __toESM(require("@wordpress/warning"));
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var CompositeItem2 = (0, import_element.forwardRef)(function CompositeItem3(props, ref) {
   const context = (0, import_context.useCompositeContext)();
   const store = props.store ?? context.store;
+  if (!store) {
+    globalThis.SCRIPT_DEBUG === true ? (0, import_warning.default)("Composite.Item: Missing composite state. Render inside Composite to enable composite keyboard behavior.") : void 0;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ariakit.CompositeItem, {
     store,
     ...props,

package/build/composite/item.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/composite/item.tsx"],
-  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { forwardRef } from '@wordpress/element';\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeItem = forwardRef(function CompositeItem(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,uBAAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAA2B;AAC3B,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,qBAAgB,2BAAW,SAASA,eAAc,OAAO,KAAK;AACzE,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,SAAoB,uCAAAC,KAAa,uBAAe;AAAA,IAC9C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
-  "names": ["CompositeItem", "_jsx"]
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { forwardRef } from '@wordpress/element';\nimport warning from '@wordpress/warning';\nimport { useCompositeContext } from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const CompositeItem = forwardRef(function CompositeItem(props, ref) {\n  const context = useCompositeContext();\n\n  // @ts-expect-error The store prop is undocumented and only used by the\n  // legacy compat layer. The `store` prop is documented, but its type is\n  // obfuscated to discourage its use outside of the component's internals.\n  const store = props.store ?? context.store;\n  if (!store) {\n    globalThis.SCRIPT_DEBUG === true ? warning('Composite.Item: Missing composite state. Render inside Composite to enable composite keyboard behavior.') : void 0;\n  }\n  return /*#__PURE__*/_jsx(Ariakit.CompositeItem, {\n    store: store,\n    ...props,\n    ref: ref\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,uBAAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,qBAA2B;AAC3B,qBAAoB;AACpB,qBAAoC;AACpC,yBAA4B;AACrB,IAAMA,qBAAgB,2BAAW,SAASA,eAAc,OAAO,KAAK;AACzE,QAAM,cAAU,oCAAoB;AAKpC,QAAM,QAAQ,MAAM,SAAS,QAAQ;AACrC,MAAI,CAAC,OAAO;AACV,eAAW,iBAAiB,WAAO,eAAAC,SAAQ,yGAAyG,IAAI;AAAA,EAC1J;AACA,SAAoB,uCAAAC,KAAa,uBAAe;AAAA,IAC9C;AAAA,IACA,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AACH,CAAC;",
+  "names": ["CompositeItem", "warning", "_jsx"]
 }

package/build/confirm-dialog/component.cjs

@@ -137,6 +137,8 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
     confirmButtonText,
     cancelButtonText,
     isBusy,
+    title,
+    __experimentalHideHeader = true,
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "ConfirmDialog");
   const wrapperClassName = style_module_default.wrapper;
@@ -171,7 +173,9 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
       isDismissible: true,
       ref: forwardedRef,
       overlayClassName: wrapperClassName,
-      __experimentalHideHeader: true,
+      title,
+      contentLabel: __experimentalHideHeader ? title : void 0,
+      __experimentalHideHeader,
       ...otherProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
         spacing: 8,

package/build/confirm-dialog/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/confirm-dialog/component.tsx", "../../../style-runtime/src/index.ts", "../../src/confirm-dialog/style.module.scss"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const wrapperClassName = styles.wrapper;\n  const cancelButtonRef = useRef(null);\n  const confirmButtonRef = useRef(null);\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built on top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n *\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e. the overlay).\n *\n * `ConfirmDialog` has two main modes: controlled and uncontrolled.\n *\n * ### Uncontrolled mode\n *\n * Allows the component to be used standalone, just by declaring it as part of another React\n * component's render method:\n *\n * - It will be automatically open (displayed) upon mounting.\n * - It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC`\n *   key, or by clicking outside the dialog focus (i.e. the overlay).\n * - `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be\n *   able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop\n * in this case is the `onConfirm` callback. The message is passed as the `children`.\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( 'Confirmed!' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n * ### Controlled mode\n *\n * Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n *\n * - It will not be automatically closed. You need to let it know when to open/close by\n *   updating the value of the `isOpen` prop.\n * - Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode.\n * - You'll want to update the state that controls `isOpen` from the `onCancel` and\n *   `onConfirm` callbacks.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"af7a0f28df\", \".f8c6ba0dd016e6c1__wrapper.f8c6ba0dd016e6c1__wrapper{z-index:1000001}\");\n}\nexport default {\"wrapper\":\"f8c6ba0dd016e6c1__wrapper\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    title,\n    __experimentalHideHeader = true,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const wrapperClassName = styles.wrapper;\n  const cancelButtonRef = useRef(null);\n  const confirmButtonRef = useRef(null);\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      title: title,\n      contentLabel: __experimentalHideHeader ? title : undefined,\n      __experimentalHideHeader: __experimentalHideHeader,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built on top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n *\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e. the overlay).\n *\n * `ConfirmDialog` has two main modes: controlled and uncontrolled.\n *\n * ### Uncontrolled mode\n *\n * Allows the component to be used standalone, just by declaring it as part of another React\n * component's render method:\n *\n * - It will be automatically open (displayed) upon mounting.\n * - It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC`\n *   key, or by clicking outside the dialog focus (i.e. the overlay).\n * - `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be\n *   able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop\n * in this case is the `onConfirm` callback. The message is passed as the `children`.\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( 'Confirmed!' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n * ### Controlled mode\n *\n * Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n *\n * - It will not be automatically closed. You need to let it know when to open/close by\n *   updating the value of the `isOpen` prop.\n * - Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode.\n * - You'll want to update the state that controls `isOpen` from the `onCancel` and\n *   `onConfirm` callbacks.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"af7a0f28df\", \".f8c6ba0dd016e6c1__wrapper.f8c6ba0dd016e6c1__wrapper{z-index:1000001}\");\n}\nexport default {\"wrapper\":\"f8c6ba0dd016e6c1__wrapper\"};\n"],
+  "mappings": "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",
   "names": ["_jsx", "_Fragment", "Modal", "_jsxs", "Button"]
 }

package/build/content-editable-control/index.cjs

@@ -119,7 +119,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/content-editable-control/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("87e5397cb4", "._0f130cee1a924516__editable{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid #949494;border-radius:2px;box-shadow:0 0 0 transparent;color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:normal;padding:6px 8px;width:100%}@media not (prefers-reduced-motion){._0f130cee1a924516__editable{transition:box-shadow .1s linear}}@media (min-width:600px){._0f130cee1a924516__editable{font-size:13px;line-height:normal}}._0f130cee1a924516__editable:focus{border-color:var(--wp-admin-theme-color);box-shadow:0 0 0 .5px var(--wp-admin-theme-color);outline:2px solid transparent}._0f130cee1a924516__editable::placeholder{color:rgba(30,30,30,.62)}._0f130cee1a924516__editable{border-color:var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}._0f130cee1a924516__editable[aria-placeholder]:empty:before{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%);content:attr(aria-placeholder)}._0f130cee1a924516__editable{min-height:40px;padding:12px}._0f130cee1a924516__editable[aria-disabled=true]{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb));color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:default}");
+  registerStyle("3558237a49", "._0f130cee1a924516__editable{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-interactive-neutral,#8d8d8d);border-radius:var(--wpds-border-radius-sm,2px);color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:normal;padding:6px 8px;width:100%}@media (min-width:600px){._0f130cee1a924516__editable{font-size:13px;line-height:normal}}._0f130cee1a924516__editable:hover:not(:disabled,[aria-disabled=true],[type=checkbox]){border-color:var(--wpds-color-stroke-interactive-neutral-active,#6e6e6e)}._0f130cee1a924516__editable:focus{border-color:var(--wpds-color-stroke-interactive-neutral,#8d8d8d);box-shadow:none;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}._0f130cee1a924516__editable::placeholder{color:rgba(30,30,30,.62)}._0f130cee1a924516__editable[aria-placeholder]:empty:before{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%);content:attr(aria-placeholder)}._0f130cee1a924516__editable{min-height:40px;padding:12px}._0f130cee1a924516__editable[aria-disabled=true]{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb));color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:default}");
 }
 var style_module_default = { "editable": "_0f130cee1a924516__editable" };
 

package/build/content-editable-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/content-editable-control/index.tsx", "../../../style-runtime/src/index.ts", "../../src/content-editable-control/style.module.scss"],
-  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport BaseControl from '../base-control';\nimport { useBaseControlProps } from '../base-control/hooks';\nimport { VisuallyHidden } from '../visually-hidden';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedContentEditableControl({\n  label,\n  id,\n  className,\n  help,\n  hideLabelFromVision,\n  disabled,\n  required,\n  placeholder,\n  ...additionalProps\n}, forwardedRef) {\n  // The label is not passed through to `BaseControl`: it would render a\n  // `<label for>` pointing at the `contentEditable` `div`, which is not a\n  // labelable element, making the association invalid. The label is instead\n  // rendered here without `for` and wired up via `aria-labelledby`.\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    className,\n    help\n  });\n  const labelId = `${controlProps.id}__label`;\n  const editableRef = useRef(null);\n  const mergedRefs = useMergeRefs([editableRef, forwardedRef]);\n  return /*#__PURE__*/_jsxs(BaseControl, {\n    ...baseControlProps,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: labelId,\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: labelId\n      // Focus the field on label click, like `<label for>` would.\n      ,\n      onClick: () => editableRef.current?.focus(),\n      children: label\n    }), /*#__PURE__*/_jsx(\"div\", {\n      className: styles.editable,\n      role: \"textbox\",\n      \"aria-multiline\": true,\n      \"aria-labelledby\": labelId,\n      \"aria-placeholder\": placeholder || undefined,\n      \"aria-disabled\": disabled || undefined,\n      \"aria-required\": required || undefined,\n      ref: mergedRefs\n      // A disabled field is not `contentEditable`, which also\n      // removes it from the tab order.\n      ,\n      contentEditable: !disabled,\n      suppressContentEditableWarning: true,\n      ...additionalProps,\n      ...controlProps\n    })]\n  });\n}\n\n/**\n * A presentational `contentEditable` form control: a labeled editable element\n * rendered with the chrome (`BaseControl` + label) shared by the other form\n * controls in the package.\n *\n * Unlike the in-canvas `RichText` from `@wordpress/block-editor`, this control\n * is intended for standalone form fields (DataForms, sidebar inputs, etc.).\n * It is deliberately **presentational only** and has no `@wordpress/rich-text`\n * dependency: the editable behavior (value, formatting, keyboard shortcuts)\n * and any focus/selection tracking are owned by the consumer, which wires them\n * through the forwarded ref and native event props (see the richtext DataForm\n * control in `@wordpress/dataviews` for the canonical assembly).\n *\n * ```jsx\n * // The rich-text \"assembly\" lives in the consumer.\n * <ContentEditableControl\n *     label=\"Caption\"\n *     ref={ mergedRef }\n *     onFocus={ onEditableFocus }\n *     onBlur={ onEditableBlur }\n * />\n * ```\n */\nexport const ContentEditableControl = forwardRef(UnforwardedContentEditableControl);\nexport default ContentEditableControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"87e5397cb4\", \"._0f130cee1a924516__editable{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid #949494;border-radius:2px;box-shadow:0 0 0 transparent;color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:normal;padding:6px 8px;width:100%}@media not (prefers-reduced-motion){._0f130cee1a924516__editable{transition:box-shadow .1s linear}}@media (min-width:600px){._0f130cee1a924516__editable{font-size:13px;line-height:normal}}._0f130cee1a924516__editable:focus{border-color:var(--wp-admin-theme-color);box-shadow:0 0 0 .5px var(--wp-admin-theme-color);outline:2px solid transparent}._0f130cee1a924516__editable::placeholder{color:rgba(30,30,30,.62)}._0f130cee1a924516__editable{border-color:var(--wp-components-color-gray-600,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}._0f130cee1a924516__editable[aria-placeholder]:empty:before{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%);content:attr(aria-placeholder)}._0f130cee1a924516__editable{min-height:40px;padding:12px}._0f130cee1a924516__editable[aria-disabled=true]{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb));color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:default}\");\n}\nexport default {\"editable\":\"_0f130cee1a924516__editable\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport BaseControl from '../base-control';\nimport { useBaseControlProps } from '../base-control/hooks';\nimport { VisuallyHidden } from '../visually-hidden';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedContentEditableControl({\n  label,\n  id,\n  className,\n  help,\n  hideLabelFromVision,\n  disabled,\n  required,\n  placeholder,\n  ...additionalProps\n}, forwardedRef) {\n  // The label is not passed through to `BaseControl`: it would render a\n  // `<label for>` pointing at the `contentEditable` `div`, which is not a\n  // labelable element, making the association invalid. The label is instead\n  // rendered here without `for` and wired up via `aria-labelledby`.\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    className,\n    help\n  });\n  const labelId = `${controlProps.id}__label`;\n  const editableRef = useRef(null);\n  const mergedRefs = useMergeRefs([editableRef, forwardedRef]);\n  return /*#__PURE__*/_jsxs(BaseControl, {\n    ...baseControlProps,\n    children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: labelId,\n      children: label\n    }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: labelId\n      // Focus the field on label click, like `<label for>` would.\n      ,\n      onClick: () => editableRef.current?.focus(),\n      children: label\n    }), /*#__PURE__*/_jsx(\"div\", {\n      className: styles.editable,\n      role: \"textbox\",\n      \"aria-multiline\": true,\n      \"aria-labelledby\": labelId,\n      \"aria-placeholder\": placeholder || undefined,\n      \"aria-disabled\": disabled || undefined,\n      \"aria-required\": required || undefined,\n      ref: mergedRefs\n      // A disabled field is not `contentEditable`, which also\n      // removes it from the tab order.\n      ,\n      contentEditable: !disabled,\n      suppressContentEditableWarning: true,\n      ...additionalProps,\n      ...controlProps\n    })]\n  });\n}\n\n/**\n * A presentational `contentEditable` form control: a labeled editable element\n * rendered with the chrome (`BaseControl` + label) shared by the other form\n * controls in the package.\n *\n * Unlike the in-canvas `RichText` from `@wordpress/block-editor`, this control\n * is intended for standalone form fields (DataForms, sidebar inputs, etc.).\n * It is deliberately **presentational only** and has no `@wordpress/rich-text`\n * dependency: the editable behavior (value, formatting, keyboard shortcuts)\n * and any focus/selection tracking are owned by the consumer, which wires them\n * through the forwarded ref and native event props (see the richtext DataForm\n * control in `@wordpress/dataviews` for the canonical assembly).\n *\n * ```jsx\n * // The rich-text \"assembly\" lives in the consumer.\n * <ContentEditableControl\n *     label=\"Caption\"\n *     ref={ mergedRef }\n *     onFocus={ onEditableFocus }\n *     onBlur={ onEditableBlur }\n * />\n * ```\n */\nexport const ContentEditableControl = forwardRef(UnforwardedContentEditableControl);\nexport default ContentEditableControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"3558237a49\", \"._0f130cee1a924516__editable{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-interactive-neutral,#8d8d8d);border-radius:var(--wpds-border-radius-sm,2px);color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-family:-apple-system,system-ui,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:16px;line-height:normal;padding:6px 8px;width:100%}@media (min-width:600px){._0f130cee1a924516__editable{font-size:13px;line-height:normal}}._0f130cee1a924516__editable:hover:not(:disabled,[aria-disabled=true],[type=checkbox]){border-color:var(--wpds-color-stroke-interactive-neutral-active,#6e6e6e)}._0f130cee1a924516__editable:focus{border-color:var(--wpds-color-stroke-interactive-neutral,#8d8d8d);box-shadow:none;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}._0f130cee1a924516__editable::placeholder{color:rgba(30,30,30,.62)}._0f130cee1a924516__editable[aria-placeholder]:empty:before{color:color-mix(in srgb,var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e)),transparent 38%);content:attr(aria-placeholder)}._0f130cee1a924516__editable{min-height:40px;padding:12px}._0f130cee1a924516__editable[aria-disabled=true]{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb));color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:default}\");\n}\nexport default {\"editable\":\"_0f130cee1a924516__editable\"};\n"],
+  "mappings": "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",
   "names": ["_jsxs", "BaseControl", "_jsx"]
 }

package/build/context/context-system-provider.cjs

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/components/src/context/context-system-provider.js
+// packages/components/src/context/context-system-provider.tsx
 var context_system_provider_exports = {};
 __export(context_system_provider_exports, {
   ComponentsContext: () => ComponentsContext,
@@ -42,10 +42,7 @@ var import_element = require("@wordpress/element");
 var import_warning = __toESM(require("@wordpress/warning"));
 var import_utils = require("../utils/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ComponentsContext = (0, import_element.createContext)(
-  /** @type {Record<string, any>} */
-  {}
-);
+var ComponentsContext = (0, import_element.createContext)({});
 ComponentsContext.displayName = "ComponentsContext";
 var useComponentsContext = () => (0, import_element.useContext)(ComponentsContext);
 function useContextSystemBridge({

package/build/context/context-system-provider.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/context/context-system-provider.js"],
-  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n// @ts-expect-error https://github.com/jonschlinkert/is-plain-object/pull/47\nimport { isPlainObject } from 'is-plain-object';\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext(/** @type {Record<string, any>} */{});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext ?? {}, value ?? {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}          options\n * @param {React.ReactNode} options.children Children to render.\n * @param {T}               options.value    Props to render into connected components.\n * @return {React.JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,iBAA0B;AAE1B,6BAA8B;AAC9B,qBAAiE;AACjE,qBAAiB;AACjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB;AAAA;AAAA,EAAgD,CAAC;AAAC;AACnF,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,iBAAiB,CAAC,GAAG,SAAS,CAAC,GAAG;AAAA,MACjD,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
+  "sources": ["../../src/context/context-system-provider.tsx"],
+  "sourcesContent": ["import deepmerge from 'deepmerge';\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { isPlainObject } from 'is-plain-object';\nimport { createContext, useContext, useRef, useMemo, memo } from '@wordpress/element';\nimport warn from '@wordpress/warning';\nimport { useUpdateEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ComponentsContext = createContext({});\nComponentsContext.displayName = 'ComponentsContext';\nexport const useComponentsContext = () => useContext(ComponentsContext);\n\n/**\n * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.\n *\n * Note: This function will warn if it detects an un-memoized `value`\n *\n * @param {Object}              props\n * @param {Record<string, any>} props.value\n * @return {Record<string, any>} The consolidated value.\n */\nfunction useContextSystemBridge({\n  value\n}) {\n  const parentContext = useComponentsContext();\n  const valueRef = useRef(value);\n  useUpdateEffect(() => {\n    if (\n    // Objects are equivalent.\n    fastDeepEqual(valueRef.current, value) &&\n    // But not the same reference.\n    valueRef.current !== value) {\n      globalThis.SCRIPT_DEBUG === true ? warn(`Please memoize your context: ${JSON.stringify(value)}`) : void 0;\n    }\n  }, [value]);\n\n  // `parentContext` will always be memoized (i.e., the result of this hook itself)\n  // or the default value from when the `ComponentsContext` was originally\n  // initialized (which will never change, it's a static variable)\n  // so this memoization will prevent `deepmerge()` from rerunning unless\n  // the references to `value` change OR the `parentContext` has an actual material change\n  // (because again, it's guaranteed to be memoized or a static reference to the empty object\n  // so we know that the only changes for `parentContext` are material ones... i.e., why we\n  // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only\n  // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are\n  // correctly warning when the `value` isn't being properly memoized. All of that to say\n  // that this should be super safe to assume that `useMemo` will only run on actual\n  // changes to the two dependencies, therefore saving us calls to `deepmerge()`!\n  const config = useMemo(() => {\n    // Deep clone `parentContext` to avoid mutating it later.\n    return deepmerge(parentContext ?? {}, value ?? {}, {\n      isMergeableObject: isPlainObject\n    });\n  }, [parentContext, value]);\n  return config;\n}\n\n/**\n * A Provider component that can modify props for connected components within\n * the Context system.\n *\n * @example\n * ```jsx\n * <ContextSystemProvider value={{ Button: { size: 'small' }}}>\n *   <Button>...</Button>\n * </ContextSystemProvider>\n * ```\n *\n * @template {Record<string, any>} T\n * @param {Object}          options\n * @param {React.ReactNode} options.children Children to render.\n * @param {T}               options.value    Props to render into connected components.\n * @return {React.JSX.Element} A Provider wrapped component.\n */\nconst BaseContextSystemProvider = ({\n  children,\n  value\n}) => {\n  const contextValue = useContextSystemBridge({\n    value\n  });\n  return /*#__PURE__*/_jsx(ComponentsContext.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\nexport const ContextSystemProvider = memo(BaseContextSystemProvider);"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,iBAA0B;AAC1B,6BAA8B;AAC9B,qBAAiE;AACjE,qBAAiB;AACjB,mBAAgC;AAChC,yBAA4B;AACrB,IAAM,wBAAoB,8BAAc,CAAC,CAAC;AACjD,kBAAkB,cAAc;AACzB,IAAM,uBAAuB,UAAM,2BAAW,iBAAiB;AAWtE,SAAS,uBAAuB;AAAA,EAC9B;AACF,GAAG;AACD,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,eAAW,uBAAO,KAAK;AAC7B,oCAAgB,MAAM;AACpB;AAAA;AAAA,UAEA,WAAAA,SAAc,SAAS,SAAS,KAAK;AAAA,MAErC,SAAS,YAAY;AAAA,MAAO;AAC1B,iBAAW,iBAAiB,WAAO,eAAAC,SAAK,gCAAgC,KAAK,UAAU,KAAK,CAAC,EAAE,IAAI;AAAA,IACrG;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAcV,QAAM,aAAS,wBAAQ,MAAM;AAE3B,eAAO,iBAAAC,SAAU,iBAAiB,CAAC,GAAG,SAAS,CAAC,GAAG;AAAA,MACjD,mBAAmB;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,KAAK,CAAC;AACzB,SAAO;AACT;AAmBA,IAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,uBAAuB;AAAA,IAC1C;AAAA,EACF,CAAC;AACD,SAAoB,uCAAAC,KAAK,kBAAkB,UAAU;AAAA,IACnD,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACH;AACO,IAAM,4BAAwB,qBAAK,yBAAyB;",
   "names": ["fastDeepEqual", "warn", "deepmerge", "_jsx"]
 }

package/build/context/use-context-system.cjs

@@ -49,13 +49,18 @@ function useContextSystem(props, namespace) {
     ...(0, import_utils.getNamespace)(namespace)
   };
   const {
-    _overrides: overrideProps,
+    _overrides,
     ...otherContextProps
   } = contextProps;
+  const overrideProps = (
+    /** @type {Record<string, unknown>} */
+    _overrides
+  );
   const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
+  const propsWithChildren = initialMergedProps;
   const cx = (0, import_use_cx.useCx)();
   const classes = cx((0, import_get_styled_class_name_from_key.getStyledClassNameFromKey)(namespace), props.className);
-  const rendered = typeof initialMergedProps.renderChildren === "function" ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
+  const rendered = typeof propsWithChildren.renderChildren === "function" ? propsWithChildren.renderChildren(initialMergedProps) : propsWithChildren.children;
   for (const key in initialMergedProps) {
     finalComponentProps[key] = initialMergedProps[key];
   }

package/build/context/use-context-system.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/context/use-context-system.js"],
-  "sourcesContent": ["import warn from '@wordpress/warning';\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem(props, namespace) {\n  const contextSystemProps = useComponentsContext();\n  if (typeof namespace === 'undefined') {\n    globalThis.SCRIPT_DEBUG === true ? warn('useContextSystem: Please provide a namespace') : void 0;\n  }\n  const contextProps = contextSystemProps?.[namespace] || {};\n\n  /** @type {ConnectedProps<P>} */\n  // @ts-expect-error The initial object cannot satisfy the generic `P`, whose props are copied in below.\n  const finalComponentProps = {\n    ...getConnectedNamespace(),\n    ...getNamespace(namespace)\n  };\n  const {\n    _overrides: overrideProps,\n    ...otherContextProps\n  } = contextProps;\n  const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;\n  const cx = useCx();\n  const classes = cx(getStyledClassNameFromKey(namespace), props.className);\n\n  // Provides the ability to customize the render of the component.\n  const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;\n  for (const key in initialMergedProps) {\n    // @ts-expect-error A string key cannot index the merged props type.\n    finalComponentProps[key] = initialMergedProps[key];\n  }\n  for (const key in overrideProps) {\n    // @ts-expect-error A string key cannot index the merged props type.\n    finalComponentProps[key] = overrideProps[key];\n  }\n\n  // Setting an `undefined` explicitly can cause unintended overwrites\n  // when a `cloneElement()` is involved.\n  if (rendered !== undefined) {\n    // @ts-expect-error `children` does not exist on `ConnectedProps<P>`.\n    finalComponentProps.children = rendered;\n  }\n  finalComponentProps.className = classes;\n  return finalComponentProps;\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAiB;AACjB,qCAAqC;AACrC,mBAAoD;AACpD,4CAA0C;AAC1C,oBAAsB;AAgBf,SAAS,iBAAiB,OAAO,WAAW;AACjD,QAAM,yBAAqB,qDAAqB;AAChD,MAAI,OAAO,cAAc,aAAa;AACpC,eAAW,iBAAiB,WAAO,eAAAA,SAAK,8CAA8C,IAAI;AAAA,EAC5F;AACA,QAAM,eAAe,qBAAqB,SAAS,KAAK,CAAC;AAIzD,QAAM,sBAAsB;AAAA,IAC1B,OAAG,oCAAsB;AAAA,IACzB,OAAG,2BAAa,SAAS;AAAA,EAC3B;AACA,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAqB,OAAO,QAAQ,iBAAiB,EAAE,SAAS,OAAO,OAAO,CAAC,GAAG,mBAAmB,KAAK,IAAI;AACpH,QAAM,SAAK,qBAAM;AACjB,QAAM,UAAU,OAAG,iEAA0B,SAAS,GAAG,MAAM,SAAS;AAGxE,QAAM,WAAW,OAAO,mBAAmB,mBAAmB,aAAa,mBAAmB,eAAe,kBAAkB,IAAI,mBAAmB;AACtJ,aAAW,OAAO,oBAAoB;AAEpC,wBAAoB,GAAG,IAAI,mBAAmB,GAAG;AAAA,EACnD;AACA,aAAW,OAAO,eAAe;AAE/B,wBAAoB,GAAG,IAAI,cAAc,GAAG;AAAA,EAC9C;AAIA,MAAI,aAAa,QAAW;AAE1B,wBAAoB,WAAW;AAAA,EACjC;AACA,sBAAoB,YAAY;AAChC,SAAO;AACT;",
+  "sourcesContent": ["import warn from '@wordpress/warning';\nimport { useComponentsContext } from './context-system-provider';\nimport { getNamespace, getConnectedNamespace } from './utils';\nimport { getStyledClassNameFromKey } from './get-styled-class-name-from-key';\nimport { useCx } from '../utils/hooks/use-cx';\n\n/**\n * @template TProps\n * @typedef {TProps & { className: string }} ConnectedProps\n */\n\n/**\n * Custom hook that derives registered props from the Context system.\n * These derived props are then consolidated with incoming component props.\n *\n * @template {{ className?: string }} P\n * @param {P}      props     Incoming props from the component.\n * @param {string} namespace The namespace to register and to derive context props from.\n * @return {ConnectedProps<P>} The connected props.\n */\nexport function useContextSystem(props, namespace) {\n  const contextSystemProps = useComponentsContext();\n  if (typeof namespace === 'undefined') {\n    globalThis.SCRIPT_DEBUG === true ? warn('useContextSystem: Please provide a namespace') : void 0;\n  }\n  const contextProps = contextSystemProps?.[namespace] || {};\n\n  /** @type {ConnectedProps<P>} */\n  // @ts-expect-error The initial object cannot satisfy the generic `P`, whose props are copied in below.\n  const finalComponentProps = {\n    ...getConnectedNamespace(),\n    ...getNamespace(namespace)\n  };\n  const {\n    _overrides,\n    ...otherContextProps\n  } = contextProps;\n  /** @type {Record<string, unknown>} */\n  const overrideProps = /** @type {Record<string, unknown>} */_overrides;\n  const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;\n  /**\n   * @type {P & {\n   *   children?: React.ReactNode,\n   *   renderChildren?: (props: P) => React.ReactNode\n   * }}\n   */\n  const propsWithChildren = initialMergedProps;\n  const cx = useCx();\n  const classes = cx(getStyledClassNameFromKey(namespace), props.className);\n\n  // Provides the ability to customize the render of the component.\n  const rendered = typeof propsWithChildren.renderChildren === 'function' ? propsWithChildren.renderChildren(initialMergedProps) : propsWithChildren.children;\n  for (const key in initialMergedProps) {\n    // @ts-expect-error A string key cannot index the merged props type.\n    finalComponentProps[key] = initialMergedProps[key];\n  }\n  for (const key in overrideProps) {\n    // @ts-expect-error A string key cannot index the merged props type.\n    finalComponentProps[key] = overrideProps[key];\n  }\n\n  // Setting an `undefined` explicitly can cause unintended overwrites\n  // when a `cloneElement()` is involved.\n  if (rendered !== undefined) {\n    // @ts-expect-error `children` does not exist on `ConnectedProps<P>`.\n    finalComponentProps.children = rendered;\n  }\n  finalComponentProps.className = classes;\n  return finalComponentProps;\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAiB;AACjB,qCAAqC;AACrC,mBAAoD;AACpD,4CAA0C;AAC1C,oBAAsB;AAgBf,SAAS,iBAAiB,OAAO,WAAW;AACjD,QAAM,yBAAqB,qDAAqB;AAChD,MAAI,OAAO,cAAc,aAAa;AACpC,eAAW,iBAAiB,WAAO,eAAAA,SAAK,8CAA8C,IAAI;AAAA,EAC5F;AACA,QAAM,eAAe,qBAAqB,SAAS,KAAK,CAAC;AAIzD,QAAM,sBAAsB;AAAA,IAC1B,OAAG,oCAAsB;AAAA,IACzB,OAAG,2BAAa,SAAS;AAAA,EAC3B;AACA,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM;AAAA;AAAA,IAAsD;AAAA;AAC5D,QAAM,qBAAqB,OAAO,QAAQ,iBAAiB,EAAE,SAAS,OAAO,OAAO,CAAC,GAAG,mBAAmB,KAAK,IAAI;AAOpH,QAAM,oBAAoB;AAC1B,QAAM,SAAK,qBAAM;AACjB,QAAM,UAAU,OAAG,iEAA0B,SAAS,GAAG,MAAM,SAAS;AAGxE,QAAM,WAAW,OAAO,kBAAkB,mBAAmB,aAAa,kBAAkB,eAAe,kBAAkB,IAAI,kBAAkB;AACnJ,aAAW,OAAO,oBAAoB;AAEpC,wBAAoB,GAAG,IAAI,mBAAmB,GAAG;AAAA,EACnD;AACA,aAAW,OAAO,eAAe;AAE/B,wBAAoB,GAAG,IAAI,cAAc,GAAG;AAAA,EAC9C;AAIA,MAAI,aAAa,QAAW;AAE1B,wBAAoB,WAAW;AAAA,EACjC;AACA,sBAAoB,YAAY;AAChC,SAAO;AACT;",
   "names": ["warn"]
 }

package/build/custom-gradient-picker/gradient-bar/control-points.cjs

@@ -52,6 +52,7 @@ function ControlPointButton({
   isOpen,
   position,
   color,
+  disablePositioning,
   ...additionalProps
 }) {
   const instanceId = (0, import_compose.useInstanceId)(ControlPointButton);
@@ -74,7 +75,7 @@ function ControlPointButton({
       ...additionalProps
     }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
       id: descriptionId,
-      children: (0, import_i18n.__)("Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.")
+      children: disablePositioning ? (0, import_i18n.__)("Press the button to change the color.") : (0, import_i18n.__)("Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.")
     })]
   });
 }
@@ -102,6 +103,7 @@ function GradientColorPickerDropdown({
 function ControlPoints({
   disableRemove,
   disableAlpha,
+  disablePositioning,
   gradientPickerDomRef,
   ignoreMarkerPosition,
   value: controlPoints,
@@ -163,6 +165,9 @@ function ControlPoints({
             onToggle();
           },
           onMouseDown: () => {
+            if (disablePositioning) {
+              return;
+            }
             if (window && window.addEventListener) {
               controlPointMoveStateRef.current = {
                 initialPosition,
@@ -176,6 +181,12 @@ function ControlPoints({
             }
           },
           onKeyDown: (event) => {
+            if (disablePositioning) {
+              if (event.code === "ArrowLeft" || event.code === "ArrowRight") {
+                event.stopPropagation();
+              }
+              return;
+            }
             if (event.code === "ArrowLeft") {
               event.stopPropagation();
               onChange((0, import_utils.updateControlPointPosition)(controlPoints, index, (0, import_utils.clampPercent)(point.position - import_constants.KEYBOARD_CONTROL_POINT_VARIATION)));
@@ -186,7 +197,8 @@ function ControlPoints({
           },
           isOpen,
           position: point.position,
-          color: point.color
+          color: point.color,
+          disablePositioning
         }, index),
         renderContent: ({
           onClose

package/build/custom-gradient-picker/gradient-bar/control-points.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/custom-gradient-picker/gradient-bar/control-points.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { colord } from 'colord';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\nimport { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ControlPointButton({\n  isOpen,\n  position,\n  color,\n  ...additionalProps\n}) {\n  const instanceId = useInstanceId(ControlPointButton);\n  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Button, {\n      \"aria-label\": sprintf(\n      // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),\n      \"aria-describedby\": descriptionId,\n      \"aria-haspopup\": \"true\",\n      \"aria-expanded\": isOpen,\n      __next40pxDefaultSize: true,\n      className: clsx('components-custom-gradient-picker__control-point-button', {\n        'is-active': isOpen\n      }),\n      ...additionalProps\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: descriptionId,\n      children: __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')\n    })]\n  });\n}\nfunction GradientColorPickerDropdown({\n  isRenderedInSidebar,\n  className,\n  ...props\n}) {\n  // Open the popover below the gradient control/insertion point\n  const popoverProps = useMemo(() => ({\n    placement: 'bottom',\n    offset: 8,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false\n  }), []);\n  const mergedClassName = clsx('components-custom-gradient-picker__control-point-dropdown', className);\n  return /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n    isRenderedInSidebar: isRenderedInSidebar,\n    popoverProps: popoverProps,\n    className: mergedClassName,\n    ...props\n  });\n}\nfunction ControlPoints({\n  disableRemove,\n  disableAlpha,\n  gradientPickerDomRef,\n  ignoreMarkerPosition,\n  value: controlPoints,\n  onChange,\n  onStartControlPointChange,\n  onStopControlPointChange,\n  __experimentalIsRenderedInSidebar\n}) {\n  const controlPointMoveStateRef = useRef(undefined);\n  const onMouseMove = event => {\n    if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {\n      return;\n    }\n    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);\n    const {\n      initialPosition,\n      index,\n      significantMoveHappened\n    } = controlPointMoveStateRef.current;\n    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {\n      controlPointMoveStateRef.current.significantMoveHappened = true;\n    }\n    onChange(updateControlPointPosition(controlPoints, index, relativePosition));\n  };\n  const cleanEventListeners = () => {\n    if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', cleanEventListeners);\n      onStopControlPointChange();\n      controlPointMoveStateRef.current.listenersActivated = false;\n    }\n  };\n\n  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n  // This memoization would prevent the event listeners from being properly cleaned.\n  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n  const cleanEventListenersRef = useRef(undefined);\n  cleanEventListenersRef.current = cleanEventListeners;\n  useEffect(() => {\n    return () => {\n      cleanEventListenersRef.current?.();\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: controlPoints.map((point, index) => {\n      const initialPosition = point?.position;\n      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n        isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        onClose: onStopControlPointChange,\n        renderToggle: ({\n          isOpen,\n          onToggle\n        }) => /*#__PURE__*/_jsx(ControlPointButton, {\n          onClick: () => {\n            if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {\n              return;\n            }\n            if (isOpen) {\n              onStopControlPointChange();\n            } else {\n              onStartControlPointChange();\n            }\n            onToggle();\n          },\n          onMouseDown: () => {\n            if (window && window.addEventListener) {\n              controlPointMoveStateRef.current = {\n                initialPosition,\n                index,\n                significantMoveHappened: false,\n                listenersActivated: true\n              };\n              onStartControlPointChange();\n              window.addEventListener('mousemove', onMouseMove);\n              window.addEventListener('mouseup', cleanEventListeners);\n            }\n          },\n          onKeyDown: event => {\n            if (event.code === 'ArrowLeft') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));\n            } else if (event.code === 'ArrowRight') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));\n            }\n          },\n          isOpen: isOpen,\n          position: point.position,\n          color: point.color\n        }, index),\n        renderContent: ({\n          onClose\n        }) => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n          paddingSize: \"none\",\n          children: [/*#__PURE__*/_jsx(ColorPicker, {\n            enableAlpha: !disableAlpha,\n            color: point.color,\n            onChange: color => {\n              onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));\n            }\n          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/_jsx(HStack, {\n            className: \"components-custom-gradient-picker__remove-control-point-wrapper\",\n            alignment: \"center\",\n            children: /*#__PURE__*/_jsx(Button, {\n              onClick: () => {\n                onChange(removeControlPoint(controlPoints, index));\n                onClose();\n              },\n              variant: \"link\",\n              children: __('Remove Control Point')\n            })\n          })]\n        }),\n        style: {\n          left: `${point.position}%`,\n          transform: 'translateX( -50% )'\n        }\n      }, index);\n    })\n  });\n}\nfunction InsertPoint({\n  value: controlPoints,\n  onChange,\n  onOpenInserter,\n  onCloseInserter,\n  insertPosition,\n  disableAlpha,\n  __experimentalIsRenderedInSidebar\n}) {\n  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);\n  return /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n    isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n    className: \"components-custom-gradient-picker__inserter\",\n    onClose: () => {\n      onCloseInserter();\n    },\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"true\",\n      onClick: () => {\n        if (isOpen) {\n          onCloseInserter();\n        } else {\n          setAlreadyInsertedPoint(false);\n          onOpenInserter();\n        }\n        onToggle();\n      },\n      className: \"components-custom-gradient-picker__insert-point-dropdown\",\n      icon: plus\n    }),\n    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n      paddingSize: \"none\",\n      children: /*#__PURE__*/_jsx(ColorPicker, {\n        enableAlpha: !disableAlpha,\n        onChange: color => {\n          if (!alreadyInsertedPoint) {\n            onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));\n            setAlreadyInsertedPoint(true);\n          } else {\n            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));\n          }\n        }\n      })\n    }),\n    style: insertPosition !== null ? {\n      left: `${insertPosition}%`,\n      transform: 'translateX( -50% )'\n    } : undefined\n  });\n}\nControlPoints.InsertPoint = InsertPoint;\nexport default ControlPoints;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { colord } from 'colord';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\nimport { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';\nimport DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction ControlPointButton({\n  isOpen,\n  position,\n  color,\n  disablePositioning,\n  ...additionalProps\n}) {\n  const instanceId = useInstanceId(ControlPointButton);\n  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Button, {\n      \"aria-label\": sprintf(\n      // translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).\n      __('Gradient control point at position %1$d%% with color code %2$s.'), position, color),\n      \"aria-describedby\": descriptionId,\n      \"aria-haspopup\": \"true\",\n      \"aria-expanded\": isOpen,\n      __next40pxDefaultSize: true,\n      className: clsx('components-custom-gradient-picker__control-point-button', {\n        'is-active': isOpen\n      }),\n      ...additionalProps\n    }), /*#__PURE__*/_jsx(VisuallyHidden, {\n      id: descriptionId,\n      children: disablePositioning ? __('Press the button to change the color.') : __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')\n    })]\n  });\n}\nfunction GradientColorPickerDropdown({\n  isRenderedInSidebar,\n  className,\n  ...props\n}) {\n  // Open the popover below the gradient control/insertion point\n  const popoverProps = useMemo(() => ({\n    placement: 'bottom',\n    offset: 8,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false\n  }), []);\n  const mergedClassName = clsx('components-custom-gradient-picker__control-point-dropdown', className);\n  return /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n    isRenderedInSidebar: isRenderedInSidebar,\n    popoverProps: popoverProps,\n    className: mergedClassName,\n    ...props\n  });\n}\nfunction ControlPoints({\n  disableRemove,\n  disableAlpha,\n  disablePositioning,\n  gradientPickerDomRef,\n  ignoreMarkerPosition,\n  value: controlPoints,\n  onChange,\n  onStartControlPointChange,\n  onStopControlPointChange,\n  __experimentalIsRenderedInSidebar\n}) {\n  const controlPointMoveStateRef = useRef(undefined);\n  const onMouseMove = event => {\n    if (controlPointMoveStateRef.current === undefined || gradientPickerDomRef.current === null) {\n      return;\n    }\n    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);\n    const {\n      initialPosition,\n      index,\n      significantMoveHappened\n    } = controlPointMoveStateRef.current;\n    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {\n      controlPointMoveStateRef.current.significantMoveHappened = true;\n    }\n    onChange(updateControlPointPosition(controlPoints, index, relativePosition));\n  };\n  const cleanEventListeners = () => {\n    if (window && window.removeEventListener && controlPointMoveStateRef.current && controlPointMoveStateRef.current.listenersActivated) {\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', cleanEventListeners);\n      onStopControlPointChange();\n      controlPointMoveStateRef.current.listenersActivated = false;\n    }\n  };\n\n  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n  // This memoization would prevent the event listeners from being properly cleaned.\n  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n  const cleanEventListenersRef = useRef(undefined);\n  cleanEventListenersRef.current = cleanEventListeners;\n  useEffect(() => {\n    return () => {\n      cleanEventListenersRef.current?.();\n    };\n  }, []);\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: controlPoints.map((point, index) => {\n      const initialPosition = point?.position;\n      return ignoreMarkerPosition !== initialPosition && /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n        isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n        onClose: onStopControlPointChange,\n        renderToggle: ({\n          isOpen,\n          onToggle\n        }) => /*#__PURE__*/_jsx(ControlPointButton, {\n          onClick: () => {\n            if (controlPointMoveStateRef.current && controlPointMoveStateRef.current.significantMoveHappened) {\n              return;\n            }\n            if (isOpen) {\n              onStopControlPointChange();\n            } else {\n              onStartControlPointChange();\n            }\n            onToggle();\n          },\n          onMouseDown: () => {\n            if (disablePositioning) {\n              return;\n            }\n            if (window && window.addEventListener) {\n              controlPointMoveStateRef.current = {\n                initialPosition,\n                index,\n                significantMoveHappened: false,\n                listenersActivated: true\n              };\n              onStartControlPointChange();\n              window.addEventListener('mousemove', onMouseMove);\n              window.addEventListener('mouseup', cleanEventListeners);\n            }\n          },\n          onKeyDown: event => {\n            if (disablePositioning) {\n              // The point cannot move, but the\n              // arrow keys are still consumed so\n              // they do not bubble away and move\n              // focus to another editor area.\n              if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {\n                event.stopPropagation();\n              }\n              return;\n            }\n            if (event.code === 'ArrowLeft') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));\n            } else if (event.code === 'ArrowRight') {\n              // Stop propagation of the key press event to avoid focus moving\n              // to another editor area.\n              event.stopPropagation();\n              onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));\n            }\n          },\n          isOpen: isOpen,\n          position: point.position,\n          color: point.color,\n          disablePositioning: disablePositioning\n        }, index),\n        renderContent: ({\n          onClose\n        }) => /*#__PURE__*/_jsxs(DropdownContentWrapper, {\n          paddingSize: \"none\",\n          children: [/*#__PURE__*/_jsx(ColorPicker, {\n            enableAlpha: !disableAlpha,\n            color: point.color,\n            onChange: color => {\n              onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));\n            }\n          }), !disableRemove && controlPoints.length > 2 && /*#__PURE__*/_jsx(HStack, {\n            className: \"components-custom-gradient-picker__remove-control-point-wrapper\",\n            alignment: \"center\",\n            children: /*#__PURE__*/_jsx(Button, {\n              onClick: () => {\n                onChange(removeControlPoint(controlPoints, index));\n                onClose();\n              },\n              variant: \"link\",\n              children: __('Remove Control Point')\n            })\n          })]\n        }),\n        style: {\n          left: `${point.position}%`,\n          transform: 'translateX( -50% )'\n        }\n      }, index);\n    })\n  });\n}\nfunction InsertPoint({\n  value: controlPoints,\n  onChange,\n  onOpenInserter,\n  onCloseInserter,\n  insertPosition,\n  disableAlpha,\n  __experimentalIsRenderedInSidebar\n}) {\n  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);\n  return /*#__PURE__*/_jsx(GradientColorPickerDropdown, {\n    isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n    className: \"components-custom-gradient-picker__inserter\",\n    onClose: () => {\n      onCloseInserter();\n    },\n    renderToggle: ({\n      isOpen,\n      onToggle\n    }) => /*#__PURE__*/_jsx(Button, {\n      __next40pxDefaultSize: true,\n      \"aria-expanded\": isOpen,\n      \"aria-haspopup\": \"true\",\n      onClick: () => {\n        if (isOpen) {\n          onCloseInserter();\n        } else {\n          setAlreadyInsertedPoint(false);\n          onOpenInserter();\n        }\n        onToggle();\n      },\n      className: \"components-custom-gradient-picker__insert-point-dropdown\",\n      icon: plus\n    }),\n    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n      paddingSize: \"none\",\n      children: /*#__PURE__*/_jsx(ColorPicker, {\n        enableAlpha: !disableAlpha,\n        onChange: color => {\n          if (!alreadyInsertedPoint) {\n            onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));\n            setAlreadyInsertedPoint(true);\n          } else {\n            onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));\n          }\n        }\n      })\n    }),\n    style: insertPosition !== null ? {\n      left: `${insertPosition}%`,\n      transform: 'translateX( -50% )'\n    } : undefined\n  });\n}\nControlPoints.InsertPoint = InsertPoint;\nexport default ControlPoints;"],
+  "mappings": "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",
   "names": ["_jsxs", "_Fragment", "_jsx", "Button", "clsx", "DropdownContentWrapper"]
 }

package/build/custom-gradient-picker/gradient-bar/index.cjs

@@ -98,6 +98,7 @@ function CustomGradientBar({
   onChange,
   disableInserter = false,
   disableAlpha = false,
+  disablePositioning = false,
   __experimentalIsRenderedInSidebar = false
 }) {
   const gradientMarkersContainerDomRef = (0, import_element.useRef)(null);
@@ -167,6 +168,7 @@ function CustomGradientBar({
         __experimentalIsRenderedInSidebar,
         disableAlpha,
         disableRemove: disableInserter,
+        disablePositioning,
         gradientPickerDomRef: gradientMarkersContainerDomRef,
         ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : void 0,
         value: controlPoints,