@wordpress/components 39.0.0 → 40.1.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/disabled/index.tsx", "../../../style-runtime/src/index.ts", "../../src/disabled/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport Context from './context';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-expect-error `inert` is not declared in React 18's HTML attribute types.\n      inert: isDisabled ? 'true' : undefined,\n      className: isDisabled ? clsx(styles.disabled, className, 'components-disabled') : undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;", "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(\"bacc423d2b\", \"._556ae8be2a7ddc8e__disabled{pointer-events:none;position:relative}._556ae8be2a7ddc8e__disabled:after{content:\\\"\\\";inset:0;position:absolute}._556ae8be2a7ddc8e__disabled *{pointer-events:none}\");\n}\nexport default {\"disabled\":\"_556ae8be2a7ddc8e__disabled\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport Context from './context';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n  Consumer,\n  Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n  className,\n  children,\n  isDisabled = true,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Provider, {\n    value: isDisabled,\n    children: /*#__PURE__*/_jsx(\"div\", {\n      // @ts-expect-error `inert` is not declared in React 18's HTML attribute types.\n      inert: isDisabled ? 'true' : undefined\n      // Only the disabled styling is conditional. The consumer's own\n      // className has to stick around so the wrapper stays targetable\n      // whether or not it is currently disabled.\n      ,\n      className: clsx(className, isDisabled && [styles.disabled, 'components-disabled']) || undefined,\n      ...props,\n      children: children\n    })\n  });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;", "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(\"bacc423d2b\", \"._556ae8be2a7ddc8e__disabled{pointer-events:none;position:relative}._556ae8be2a7ddc8e__disabled:after{content:\\\"\\\";inset:0;position:absolute}._556ae8be2a7ddc8e__disabled *{pointer-events:none}\");\n}\nexport default {\"disabled\":\"_556ae8be2a7ddc8e__disabled\"};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/draggable/index.tsx", "../../../style-runtime/src/index.ts", "../../src/draggable/style.module.scss"],
-  "sourcesContent": ["import { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { getWpCompatOverlaySlot } from '@wordpress/ui';\nimport styles from './style.module.scss';\n\n// Legacy class names preserved alongside the CSS-module hashed ones for\n// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's\n// CSS-module mock.\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClasses = [styles['invisible-drag-image'], 'components-draggable__invisible-drag-image'].filter(Boolean);\nconst cloneWrapperClasses = [styles.clone, 'components-draggable__clone'].filter(Boolean);\n// Global class — shared with external code (e.g. block-editor keyboard drag).\nconst bodyClass = 'is-dragging-components-draggable';\nconst clonePadding = 0;\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable({\n  children,\n  onDragStart,\n  onDragOver,\n  onDragEnd,\n  appendToOwnerDocument = false,\n  cloneClassname,\n  elementId,\n  transferData,\n  __experimentalTransferDataType: transferDataType = 'text',\n  __experimentalDragComponent: dragComponent\n}) {\n  const dragComponentRef = useRef(null);\n  const cleanupRef = useRef(() => {});\n\n  /**\n   * Removes the element clone, resets cursor, and removes drag listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function end(event) {\n    event.preventDefault();\n    cleanupRef.current();\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  }\n\n  /**\n   * This method does a couple of things:\n   *\n   * - Clones the current element and spawns clone over original element.\n   * - Adds a fake temporary drag image to avoid browser defaults.\n   * - Sets transfer data.\n   * - Adds dragover listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function start(event) {\n    const {\n      ownerDocument\n    } = event.target;\n    // Only use the slot when it lives in the same document as the\n    // dragged element, so coordinate resolution stays in one space.\n    const slot = getWpCompatOverlaySlot();\n    const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;\n    event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n    const cloneWrapper = ownerDocument.createElement('div');\n    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n    cloneWrapper.style.top = '0';\n    cloneWrapper.style.left = '0';\n    const dragImage = ownerDocument.createElement('div');\n\n    // Set a fake drag image to avoid browser defaults. Remove from DOM\n    // right after. event.dataTransfer.setDragImage is not supported yet in\n    // IE, we need to check for its existence first.\n    if ('function' === typeof event.dataTransfer.setDragImage) {\n      dragImage.classList.add(...dragImageClasses);\n      // Invisible — stays at the document body, no slot needed.\n      ownerDocument.body.appendChild(dragImage);\n      event.dataTransfer.setDragImage(dragImage, 0, 0);\n    }\n    cloneWrapper.classList.add(...cloneWrapperClasses);\n    const inSlotClass = styles['is-in-compat-slot'];\n    if (compatSlot && inSlotClass) {\n      cloneWrapper.classList.add(inSlotClass);\n    }\n    if (cloneClassname) {\n      cloneWrapper.classList.add(cloneClassname);\n    }\n    let x = 0;\n    let y = 0;\n    // If a dragComponent is defined, the following logic will clone the\n    // HTML node and inject it into the cloneWrapper.\n    if (dragComponentRef.current) {\n      // Position dragComponent at the same position as the cursor.\n      x = event.clientX;\n      y = event.clientY;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n      const clonedDragComponent = ownerDocument.createElement('div');\n      clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n      cloneWrapper.appendChild(clonedDragComponent);\n      (compatSlot ?? ownerDocument.body).appendChild(cloneWrapper);\n    } else {\n      const element = ownerDocument.getElementById(elementId);\n\n      // Prepare element clone and append to element wrapper.\n      const elementRect = element.getBoundingClientRect();\n      const elementWrapper = element.parentNode;\n      const elementTopOffset = elementRect.top;\n      const elementLeftOffset = elementRect.left;\n      cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n      const clone = element.cloneNode(true);\n      clone.id = `clone-${elementId}`;\n\n      // Position clone right over the original element (20px padding).\n      x = elementLeftOffset - clonePadding;\n      y = elementTopOffset - clonePadding;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n      cloneWrapper.appendChild(clone);\n      if (compatSlot) {\n        compatSlot.appendChild(cloneWrapper);\n      } else if (appendToOwnerDocument) {\n        ownerDocument.body.appendChild(cloneWrapper);\n      } else {\n        elementWrapper?.appendChild(cloneWrapper);\n      }\n    }\n\n    // Mark the current cursor coordinates.\n    let cursorLeft = event.clientX;\n    let cursorTop = event.clientY;\n    function over(e) {\n      // Skip doing any work if mouse has not moved.\n      if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n        return;\n      }\n      const nextX = x + e.clientX - cursorLeft;\n      const nextY = y + e.clientY - cursorTop;\n      cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n      cursorLeft = e.clientX;\n      cursorTop = e.clientY;\n      x = nextX;\n      y = nextY;\n      if (onDragOver) {\n        onDragOver(e);\n      }\n    }\n\n    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n    // note that browsers may throttle raf below 60fps in certain conditions.\n    // @ts-expect-error `throttle` expects a `(...args: unknown[]) => unknown` callback.\n    const throttledDragOver = throttle(over, 16);\n    ownerDocument.addEventListener('dragover', throttledDragOver);\n\n    // Update cursor to 'grabbing', document wide.\n    ownerDocument.body.classList.add(bodyClass);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n    cleanupRef.current = () => {\n      // Remove drag clone.\n      if (cloneWrapper && cloneWrapper.parentNode) {\n        cloneWrapper.parentNode.removeChild(cloneWrapper);\n      }\n      if (dragImage && dragImage.parentNode) {\n        dragImage.parentNode.removeChild(dragImage);\n      }\n\n      // Reset cursor.\n      ownerDocument.body.classList.remove(bodyClass);\n      ownerDocument.removeEventListener('dragover', throttledDragOver);\n    };\n  }\n  useEffect(() => () => {\n    cleanupRef.current();\n  }, []);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children({\n      onDraggableStart: start,\n      onDraggableEnd: end\n    }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-draggable-drag-component-root\",\n      style: {\n        display: 'none'\n      },\n      ref: dragComponentRef,\n      children: dragComponent\n    })]\n  });\n}\nexport default Draggable;", "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(\"e7e88c1781\", \"._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}\");\n}\nexport default {\"invisible-drag-image\":\"_3476c2e530687f96__invisible-drag-image\",\"clone\":\"_6f00e51ab7574306__clone\",\"is-in-compat-slot\":\"_664ecd37377558df__is-in-compat-slot\"};\n"],
+  "sourcesContent": ["import { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { getWpCompatOverlaySlot } from '@wordpress/ui';\nimport styles from './style.module.scss';\n\n// Legacy class names preserved alongside the CSS-module hashed ones for\n// backwards compatibility. `filter(Boolean)` strips `undefined` from the\n// CSS-module mock.\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst dragImageClasses = [styles['invisible-drag-image'], 'components-draggable__invisible-drag-image'].filter(Boolean);\nconst cloneWrapperClasses = [styles.clone, 'components-draggable__clone'].filter(Boolean);\n// Global class — shared with external code (e.g. block-editor keyboard drag).\nconst bodyClass = 'is-dragging-components-draggable';\nconst clonePadding = 0;\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable({\n  children,\n  onDragStart,\n  onDragOver,\n  onDragEnd,\n  appendToOwnerDocument = false,\n  cloneClassname,\n  elementId,\n  transferData,\n  __experimentalTransferDataType: transferDataType = 'text',\n  __experimentalDragComponent: dragComponent\n}) {\n  const dragComponentRef = useRef(null);\n  const cleanupRef = useRef(() => {});\n\n  /**\n   * Removes the element clone, resets cursor, and removes drag listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function end(event) {\n    event.preventDefault();\n    cleanupRef.current();\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  }\n\n  /**\n   * This method does a couple of things:\n   *\n   * - Clones the current element and spawns clone over original element.\n   * - Adds a fake temporary drag image to avoid browser defaults.\n   * - Sets transfer data.\n   * - Adds dragover listener.\n   *\n   * @param event The non-custom DragEvent.\n   */\n  function start(event) {\n    const {\n      ownerDocument\n    } = event.target;\n    // Only use the slot when it lives in the same document as the\n    // dragged element, so coordinate resolution stays in one space.\n    const slot = getWpCompatOverlaySlot();\n    const compatSlot = slot?.ownerDocument === ownerDocument ? slot : null;\n    event.dataTransfer.setData(transferDataType, JSON.stringify(transferData));\n    const cloneWrapper = ownerDocument.createElement('div');\n    // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n    cloneWrapper.style.top = '0';\n    cloneWrapper.style.left = '0';\n    const dragImage = ownerDocument.createElement('div');\n\n    // Set a fake drag image to avoid browser defaults. Remove from DOM\n    // right after. event.dataTransfer.setDragImage is not supported yet in\n    // IE, we need to check for its existence first.\n    if ('function' === typeof event.dataTransfer.setDragImage) {\n      dragImage.classList.add(...dragImageClasses);\n      // Invisible — stays at the document body, no slot needed.\n      ownerDocument.body.appendChild(dragImage);\n      event.dataTransfer.setDragImage(dragImage, 0, 0);\n    }\n    cloneWrapper.classList.add(...cloneWrapperClasses);\n    const inSlotClass = styles['is-in-compat-slot'];\n    if (compatSlot && inSlotClass) {\n      cloneWrapper.classList.add(inSlotClass);\n    }\n    if (cloneClassname) {\n      cloneWrapper.classList.add(cloneClassname);\n    }\n    let x = 0;\n    let y = 0;\n    // If a dragComponent is defined, the following logic will clone the\n    // HTML node and inject it into the cloneWrapper.\n    if (dragComponentRef.current) {\n      // Position dragComponent at the same position as the cursor.\n      x = event.clientX;\n      y = event.clientY;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n      const clonedDragComponent = ownerDocument.createElement('div');\n      clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n      cloneWrapper.appendChild(clonedDragComponent);\n      (compatSlot ?? ownerDocument.body).appendChild(cloneWrapper);\n    } else {\n      const element = ownerDocument.getElementById(elementId);\n\n      // Prepare element clone and append to element wrapper.\n      const elementRect = element.getBoundingClientRect();\n      const elementWrapper = element.parentNode;\n      const elementTopOffset = elementRect.top;\n      const elementLeftOffset = elementRect.left;\n      cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`;\n      const clone = element.cloneNode(true);\n      clone.id = `clone-${elementId}`;\n\n      // Position clone right over the original element (20px padding).\n      x = elementLeftOffset - clonePadding;\n      y = elementTopOffset - clonePadding;\n      cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`;\n\n      // Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n      Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child));\n      cloneWrapper.appendChild(clone);\n      if (compatSlot) {\n        compatSlot.appendChild(cloneWrapper);\n      } else if (appendToOwnerDocument) {\n        ownerDocument.body.appendChild(cloneWrapper);\n      } else {\n        elementWrapper?.appendChild(cloneWrapper);\n      }\n    }\n\n    // Mark the current cursor coordinates.\n    let cursorLeft = event.clientX;\n    let cursorTop = event.clientY;\n    function over(e) {\n      // Skip doing any work if mouse has not moved.\n      if (cursorLeft === e.clientX && cursorTop === e.clientY) {\n        return;\n      }\n      const nextX = x + e.clientX - cursorLeft;\n      const nextY = y + e.clientY - cursorTop;\n      cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`;\n      cursorLeft = e.clientX;\n      cursorTop = e.clientY;\n      x = nextX;\n      y = nextY;\n      if (onDragOver) {\n        onDragOver(e);\n      }\n    }\n\n    // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n    // note that browsers may throttle raf below 60fps in certain conditions.\n    // @ts-expect-error `throttle` expects a `(...args: unknown[]) => unknown` callback.\n    const throttledDragOver = throttle(over, 16);\n    ownerDocument.addEventListener('dragover', throttledDragOver);\n\n    // Update cursor to 'grabbing', document wide.\n    ownerDocument.body.classList.add(bodyClass);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n    cleanupRef.current = () => {\n      // Remove drag clone.\n      if (cloneWrapper && cloneWrapper.parentNode) {\n        cloneWrapper.parentNode.removeChild(cloneWrapper);\n      }\n      if (dragImage && dragImage.parentNode) {\n        dragImage.parentNode.removeChild(dragImage);\n      }\n\n      // Reset cursor.\n      ownerDocument.body.classList.remove(bodyClass);\n      ownerDocument.removeEventListener('dragover', throttledDragOver);\n    };\n  }\n  useEffect(() => () => {\n    cleanupRef.current();\n  }, []);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children({\n      onDraggableStart: start,\n      onDraggableEnd: end\n    }), dragComponent && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-draggable-drag-component-root\",\n      style: {\n        display: 'none'\n      },\n      ref: dragComponentRef,\n      children: dragComponent\n    })]\n  });\n}\nexport default Draggable;", "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(\"e7e88c1781\", \"._3476c2e530687f96__invisible-drag-image{height:50px;left:-1000px;position:fixed;width:50px}._6f00e51ab7574306__clone{background:transparent;padding:0;pointer-events:none;position:fixed}._6f00e51ab7574306__clone:not(._664ecd37377558df__is-in-compat-slot){z-index:1000000000}body.is-dragging-components-draggable{cursor:move;cursor:grabbing!important}\");\n}\nexport default {\"invisible-drag-image\":\"_3476c2e530687f96__invisible-drag-image\",\"clone\":\"_6f00e51ab7574306__clone\",\"is-in-compat-slot\":\"_664ecd37377558df__is-in-compat-slot\"};\n"],
   "mappings": "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",
   "names": []
 }

package/build-module/dropdown/dropdown-content-wrapper.mjs

@@ -1,15 +1,104 @@
 // packages/components/src/dropdown/dropdown-content-wrapper.tsx
+import clsx from "clsx";
 import { contextConnect, useContextSystem } from "../context/index.mjs";
-import { DropdownContentWrapperDiv } from "./styles.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/dropdown/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("7f9bfd3385", ".ab61d20c737fa550__content-wrapper{margin-left:-8px;margin-right:-8px}.ab61d20c737fa550__content-wrapper:first-of-type{margin-top:-8px}.ab61d20c737fa550__content-wrapper:last-of-type{margin-bottom:-8px}.f0a033fae417d720__padding-small{padding:8px}.d83816967399484e__padding-medium{padding:16px}");
+}
+var style_module_default = { "content-wrapper": "ab61d20c737fa550__content-wrapper", "padding-small": "f0a033fae417d720__padding-small", "padding-medium": "d83816967399484e__padding-medium" };
+
+// packages/components/src/dropdown/dropdown-content-wrapper.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedDropdownContentWrapper(props, forwardedRef) {
   const {
     paddingSize = "small",
+    className,
     ...derivedProps
   } = useContextSystem(props, "DropdownContentWrapper");
-  return /* @__PURE__ */ _jsx(DropdownContentWrapperDiv, {
+  return /* @__PURE__ */ _jsx("div", {
     ...derivedProps,
-    paddingSize,
+    className: clsx(style_module_default["content-wrapper"], {
+      [style_module_default["padding-small"]]: paddingSize !== "none" && paddingSize !== "medium",
+      [style_module_default["padding-medium"]]: paddingSize === "medium"
+    }, className),
     ref: forwardedRef
   });
 }

package/build-module/dropdown/dropdown-content-wrapper.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/dropdown/dropdown-content-wrapper.tsx"],
-  "sourcesContent": ["import { contextConnect, useContextSystem } from '../context';\nimport { DropdownContentWrapperDiv } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedDropdownContentWrapper(props, forwardedRef) {\n  const {\n    paddingSize = 'small',\n    ...derivedProps\n  } = useContextSystem(props, 'DropdownContentWrapper');\n  return /*#__PURE__*/_jsx(DropdownContentWrapperDiv, {\n    ...derivedProps,\n    paddingSize: paddingSize,\n    ref: forwardedRef\n  });\n}\n\n/**\n * A convenience wrapper for the `renderContent` when you want to apply\n * different padding. (Default is `paddingSize=\"small\"`).\n *\n * ```jsx\n * import {\n *   Dropdown,\n *   __experimentalDropdownContentWrapper as DropdownContentWrapper,\n * } from '@wordpress/components';\n *\n * <Dropdown\n *   renderContent={ () => (\n *     <DropdownContentWrapper paddingSize=\"medium\">\n *       My dropdown content\n *     </DropdownContentWrapper>\n * ) }\n * />\n * ```\n */\nexport const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');\nexport default DropdownContentWrapper;"],
-  "mappings": ";AAAA,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,iCAAiC;AAC1C,SAAS,OAAO,YAAY;AAC5B,SAAS,kCAAkC,OAAO,cAAc;AAC9D,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,wBAAwB;AACpD,SAAoB,qBAAK,2BAA2B;AAAA,IAClD,GAAG;AAAA,IACH;AAAA,IACA,KAAK;AAAA,EACP,CAAC;AACH;AAqBO,IAAM,yBAAyB,eAAe,mCAAmC,wBAAwB;AAChH,IAAO,mCAAQ;",
+  "sources": ["../../src/dropdown/dropdown-content-wrapper.tsx", "../../../style-runtime/src/index.ts", "../../src/dropdown/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { contextConnect, useContextSystem } from '../context';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedDropdownContentWrapper(props, forwardedRef) {\n  const {\n    paddingSize = 'small',\n    className,\n    ...derivedProps\n  } = useContextSystem(props, 'DropdownContentWrapper');\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...derivedProps,\n    className: clsx(styles['content-wrapper'], {\n      [styles['padding-small']]: paddingSize !== 'none' && paddingSize !== 'medium',\n      [styles['padding-medium']]: paddingSize === 'medium'\n    }, className),\n    ref: forwardedRef\n  });\n}\n\n/**\n * A convenience wrapper for the `renderContent` when you want to apply\n * different padding. (Default is `paddingSize=\"small\"`).\n *\n * ```jsx\n * import {\n *   Dropdown,\n *   __experimentalDropdownContentWrapper as DropdownContentWrapper,\n * } from '@wordpress/components';\n *\n * <Dropdown\n *   renderContent={ () => (\n *     <DropdownContentWrapper paddingSize=\"medium\">\n *       My dropdown content\n *     </DropdownContentWrapper>\n * ) }\n * />\n * ```\n */\nexport const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');\nexport default DropdownContentWrapper;", "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(\"7f9bfd3385\", \".ab61d20c737fa550__content-wrapper{margin-left:-8px;margin-right:-8px}.ab61d20c737fa550__content-wrapper:first-of-type{margin-top:-8px}.ab61d20c737fa550__content-wrapper:last-of-type{margin-bottom:-8px}.f0a033fae417d720__padding-small{padding:8px}.d83816967399484e__padding-medium{padding:16px}\");\n}\nexport default {\"content-wrapper\":\"ab61d20c737fa550__content-wrapper\",\"padding-small\":\"f0a033fae417d720__padding-small\",\"padding-medium\":\"d83816967399484e__padding-medium\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/duotone-picker/custom-duotone-bar.mjs

@@ -13,6 +13,7 @@ function CustomDuotoneBar({
   const controlPoints = getColorStopsFromColors(values);
   return /* @__PURE__ */ _jsx(CustomGradientBar, {
     disableInserter: true,
+    disablePositioning: true,
     background,
     hasGradient,
     value: controlPoints,

package/build-module/duotone-picker/custom-duotone-bar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/duotone-picker/custom-duotone-bar.tsx"],
-  "sourcesContent": ["import CustomGradientBar from '../custom-gradient-picker/gradient-bar';\nimport { getColorStopsFromColors, getGradientFromCSSColors, getColorsFromColorStops } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst PLACEHOLDER_VALUES = ['#333', '#CCC'];\nexport default function CustomDuotoneBar({\n  value,\n  onChange\n}) {\n  const hasGradient = !!value;\n  const values = hasGradient ? value : PLACEHOLDER_VALUES;\n  const background = getGradientFromCSSColors(values);\n  const controlPoints = getColorStopsFromColors(values);\n  return /*#__PURE__*/_jsx(CustomGradientBar, {\n    disableInserter: true,\n    background: background,\n    hasGradient: hasGradient,\n    value: controlPoints,\n    onChange: newColorStops => {\n      const newValue = getColorsFromColorStops(newColorStops);\n      onChange(newValue);\n    }\n  });\n}"],
-  "mappings": ";AAAA,OAAO,uBAAuB;AAC9B,SAAS,yBAAyB,0BAA0B,+BAA+B;AAC3F,SAAS,OAAO,YAAY;AAC5B,IAAM,qBAAqB,CAAC,QAAQ,MAAM;AAC3B,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AACF,GAAG;AACD,QAAM,cAAc,CAAC,CAAC;AACtB,QAAM,SAAS,cAAc,QAAQ;AACrC,QAAM,aAAa,yBAAyB,MAAM;AAClD,QAAM,gBAAgB,wBAAwB,MAAM;AACpD,SAAoB,qBAAK,mBAAmB;AAAA,IAC1C,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,mBAAiB;AACzB,YAAM,WAAW,wBAAwB,aAAa;AACtD,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import CustomGradientBar from '../custom-gradient-picker/gradient-bar';\nimport { getColorStopsFromColors, getGradientFromCSSColors, getColorsFromColorStops } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst PLACEHOLDER_VALUES = ['#333', '#CCC'];\nexport default function CustomDuotoneBar({\n  value,\n  onChange\n}) {\n  const hasGradient = !!value;\n  const values = hasGradient ? value : PLACEHOLDER_VALUES;\n  const background = getGradientFromCSSColors(values);\n  const controlPoints = getColorStopsFromColors(values);\n  return /*#__PURE__*/_jsx(CustomGradientBar, {\n    disableInserter: true,\n    disablePositioning: true,\n    background: background,\n    hasGradient: hasGradient,\n    value: controlPoints,\n    onChange: newColorStops => {\n      const newValue = getColorsFromColorStops(newColorStops);\n      onChange(newValue);\n    }\n  });\n}"],
+  "mappings": ";AAAA,OAAO,uBAAuB;AAC9B,SAAS,yBAAyB,0BAA0B,+BAA+B;AAC3F,SAAS,OAAO,YAAY;AAC5B,IAAM,qBAAqB,CAAC,QAAQ,MAAM;AAC3B,SAAR,iBAAkC;AAAA,EACvC;AAAA,EACA;AACF,GAAG;AACD,QAAM,cAAc,CAAC,CAAC;AACtB,QAAM,SAAS,cAAc,QAAQ;AACrC,QAAM,aAAa,yBAAyB,MAAM;AAClD,QAAM,gBAAgB,wBAAwB,MAAM;AACpD,SAAoB,qBAAK,mBAAmB;AAAA,IAC1C,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,mBAAiB;AACzB,YAAM,WAAW,wBAAwB,aAAa;AACtD,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/build-module/duotone-picker/duotone-picker.mjs

@@ -3,7 +3,7 @@ import fastDeepEqual from "fast-deep-equal/es6/index.js";
 import { useMemo } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import ColorListPicker from "./color-list-picker/index.mjs";
-import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from "../circular-option-picker/index.mjs";
+import CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from "../circular-option-picker/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
 import CustomDuotoneBar from "./custom-duotone-bar.mjs";
 import { getDefaultColors, getGradientFromCSSColors } from "./utils.mjs";
@@ -11,6 +11,7 @@ import { Spacer } from "../spacer/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DuotonePicker({
   asButtons,
+  presentation,
   loop,
   clearable = true,
   unsetable = true,
@@ -19,29 +20,37 @@ function DuotonePicker({
   disableCustomColors,
   disableCustomDuotone,
   value,
+  selectedSlug,
   onChange,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
   ...otherProps
 }) {
+  warnIfCircularOptionPickerAsButtonsIsSet("DuotonePicker", asButtons);
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);
   const isUnset = value === "unset";
+  const isUnsetSelected = resolvedPresentation !== "command-buttons" && isUnset;
   const unsetOptionLabel = __("Unset");
   const unsetOption = /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
     value: "unset",
-    isSelected: isUnset,
+    isSelected: isUnsetSelected,
     tooltipText: unsetOptionLabel,
     "aria-label": unsetOptionLabel,
     className: "components-duotone-picker__color-indicator",
     onClick: () => {
-      onChange(isUnset ? void 0 : "unset");
+      onChange(isUnsetSelected ? void 0 : "unset");
     }
   }, "unset");
   const duotoneOptions = duotonePalette.map(({
     colors,
     slug,
     name
-  }) => {
+  }, index) => {
     const style = {
       background: getGradientFromCSSColors(colors, "135deg"),
       color: "transparent"
@@ -56,22 +65,22 @@ function DuotonePicker({
       __("Duotone: %s"),
       name
     ) : tooltipText;
-    const isSelected = fastDeepEqual(colors, value);
+    const isSelected = resolvedPresentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : fastDeepEqual(colors, value));
     return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
       value: colors,
       isSelected,
       "aria-label": label,
       tooltipText,
       style,
-      onClick: () => {
-        onChange(isSelected ? void 0 : colors);
-      }
+      onClick: (
+        // Deselecting reports no preset, matching
+        // `ColorPalette` and `GradientPicker`. Passing the slug
+        // back would leave a controlled consumer marking the
+        // swatch as selected after its value had been cleared.
+        isSelected ? () => onChange(void 0) : () => onChange(colors, index, slug)
+      )
     }, slug);
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;
   return /* @__PURE__ */ _jsx(CircularOptionPicker, {
     ...otherProps,
@@ -84,14 +93,14 @@ function DuotonePicker({
       disabled: !value,
       children: __("Clear")
     }),
-    children: /* @__PURE__ */ _jsx(Spacer, {
+    children: !disableCustomDuotone && /* @__PURE__ */ _jsx(Spacer, {
       paddingTop: options.length === 0 ? 0 : 4,
       children: /* @__PURE__ */ _jsxs(VStack, {
         spacing: 3,
-        children: [!disableCustomColors && !disableCustomDuotone && /* @__PURE__ */ _jsx(CustomDuotoneBar, {
+        children: [!disableCustomColors && /* @__PURE__ */ _jsx(CustomDuotoneBar, {
           value: isUnset ? void 0 : value,
           onChange
-        }), !disableCustomDuotone && /* @__PURE__ */ _jsx(ColorListPicker, {
+        }), /* @__PURE__ */ _jsx(ColorListPicker, {
           labels: [__("Shadows"), __("Highlights")],
           colors: colorPalette,
           value: isUnset ? void 0 : value,

package/build-module/duotone-picker/duotone-picker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/duotone-picker/duotone-picker.tsx"],
-  "sourcesContent": ["import fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnset,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnset ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name ?? sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    const isSelected = fastDeepEqual(colors, value);\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick: () => {\n        onChange(isSelected ? undefined : colors);\n      }\n    }, slug);\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && !disableCustomDuotone && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), !disableCustomDuotone && /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker({\n  asButtons,\n  presentation,\n  loop,\n  clearable = true,\n  unsetable = true,\n  colorPalette,\n  duotonePalette,\n  disableCustomColors,\n  disableCustomDuotone,\n  value,\n  selectedSlug,\n  onChange,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...otherProps\n}) {\n  warnIfCircularOptionPickerAsButtonsIsSet('DuotonePicker', asButtons);\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);\n  const isUnset = value === 'unset';\n  const isUnsetSelected = resolvedPresentation !== 'command-buttons' && isUnset;\n  const unsetOptionLabel = __('Unset');\n  const unsetOption = /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n    value: \"unset\",\n    isSelected: isUnsetSelected,\n    tooltipText: unsetOptionLabel,\n    \"aria-label\": unsetOptionLabel,\n    className: \"components-duotone-picker__color-indicator\",\n    onClick: () => {\n      onChange(isUnsetSelected ? undefined : 'unset');\n    }\n  }, \"unset\");\n  const duotoneOptions = duotonePalette.map(({\n    colors,\n    slug,\n    name\n  }, index) => {\n    const style = {\n      background: getGradientFromCSSColors(colors, '135deg'),\n      color: 'transparent'\n    };\n    const tooltipText = name ?? sprintf(\n    // translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n    __('Duotone code: %s'), slug);\n    const label = name ? sprintf(\n    // translators: %s: The name of the option e.g: \"Dark grayscale\".\n    __('Duotone: %s'), name) : tooltipText;\n    // When a non-empty selectedSlug is provided, selection is decided\n    // strictly by slug, which keeps two presets holding the same\n    // colors apart. Otherwise selection falls back to matching the\n    // colors themselves.\n    const isSelected = resolvedPresentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : fastDeepEqual(colors, value));\n    return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n      value: colors,\n      isSelected: isSelected,\n      \"aria-label\": label,\n      tooltipText: tooltipText,\n      style: style,\n      onClick:\n      // Deselecting reports no preset, matching\n      // `ColorPalette` and `GradientPicker`. Passing the slug\n      // back would leave a controlled consumer marking the\n      // swatch as selected after its value had been cleared.\n      isSelected ? () => onChange(undefined) : () => onChange(colors, index, slug)\n    }, slug);\n  });\n  const options = unsetable ? [unsetOption, ...duotoneOptions] : duotoneOptions;\n  return /*#__PURE__*/_jsx(CircularOptionPicker, {\n    ...otherProps,\n    ...metaProps,\n    ...labelProps,\n    options: options,\n    actions: !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n      onClick: () => onChange(undefined),\n      accessibleWhenDisabled: true,\n      disabled: !value,\n      children: __('Clear')\n    }),\n    children: !disableCustomDuotone && /*#__PURE__*/_jsx(Spacer, {\n      paddingTop: options.length === 0 ? 0 : 4,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: isUnset ? undefined : value,\n          onChange: onChange\n        }), /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette,\n          value: isUnset ? undefined : value,\n          disableCustomColors: disableCustomColors,\n          enableAlpha: true,\n          onChange: newColors => {\n            if (!newColors[0]) {\n              newColors[0] = defaultDark;\n            }\n            if (!newColors[1]) {\n              newColors[1] = defaultLight;\n            }\n            const newValue = newColors.length >= 2 ? newColors : undefined;\n            // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n            // but it's currently typed as a string[].\n            // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n            onChange(newValue);\n          }\n        })]\n      })\n    })\n  });\n}\nexport default DuotonePicker;"],
+  "mappings": ";AAAA,OAAO,mBAAmB;AAC1B,SAAS,eAAe;AACxB,SAAS,IAAI,eAAe;AAC5B,OAAO,qBAAqB;AAC5B,OAAO,wBAAwB,2CAA2C,gDAAgD;AAC1H,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,kBAAkB,gCAAgC;AAC3D,SAAS,cAAc;AACvB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAkC3C,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,GAAG;AACL,GAAG;AACD,2CAAyC,iBAAiB,SAAS;AACnE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,0CAA0C,WAAW,MAAM,WAAW,gBAAgB,YAAY;AACtG,QAAM,CAAC,aAAa,YAAY,IAAI,QAAQ,MAAM,iBAAiB,YAAY,GAAG,CAAC,YAAY,CAAC;AAChG,QAAM,UAAU,UAAU;AAC1B,QAAM,kBAAkB,yBAAyB,qBAAqB;AACtE,QAAM,mBAAmB,GAAG,OAAO;AACnC,QAAM,cAA2B,qBAAK,qBAAqB,QAAQ;AAAA,IACjE,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS,MAAM;AACb,eAAS,kBAAkB,SAAY,OAAO;AAAA,IAChD;AAAA,EACF,GAAG,OAAO;AACV,QAAM,iBAAiB,eAAe,IAAI,CAAC;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAG,UAAU;AACX,UAAM,QAAQ;AAAA,MACZ,YAAY,yBAAyB,QAAQ,QAAQ;AAAA,MACrD,OAAO;AAAA,IACT;AACA,UAAM,cAAc,QAAQ;AAAA;AAAA,MAE5B,GAAG,kBAAkB;AAAA,MAAG;AAAA,IAAI;AAC5B,UAAM,QAAQ,OAAO;AAAA;AAAA,MAErB,GAAG,aAAa;AAAA,MAAG;AAAA,IAAI,IAAI;AAK3B,UAAM,aAAa,yBAAyB,sBAAsB,eAAe,SAAS,eAAe,cAAc,QAAQ,KAAK;AACpI,WAAoB,qBAAK,qBAAqB,QAAQ;AAAA,MACpD,OAAO;AAAA,MACP;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,aAAa,MAAM,SAAS,MAAS,IAAI,MAAM,SAAS,QAAQ,OAAO,IAAI;AAAA;AAAA,IAC7E,GAAG,IAAI;AAAA,EACT,CAAC;AACD,QAAM,UAAU,YAAY,CAAC,aAAa,GAAG,cAAc,IAAI;AAC/D,SAAoB,qBAAK,sBAAsB;AAAA,IAC7C,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH;AAAA,IACA,SAAS,CAAC,CAAC,aAA0B,qBAAK,qBAAqB,cAAc;AAAA,MAC3E,SAAS,MAAM,SAAS,MAAS;AAAA,MACjC,wBAAwB;AAAA,MACxB,UAAU,CAAC;AAAA,MACX,UAAU,GAAG,OAAO;AAAA,IACtB,CAAC;AAAA,IACD,UAAU,CAAC,wBAAqC,qBAAK,QAAQ;AAAA,MAC3D,YAAY,QAAQ,WAAW,IAAI,IAAI;AAAA,MACvC,UAAuB,sBAAM,QAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAC,CAAC,uBAAoC,qBAAK,kBAAkB;AAAA,UACrE,OAAO,UAAU,SAAY;AAAA,UAC7B;AAAA,QACF,CAAC,GAAgB,qBAAK,iBAAiB;AAAA,UACrC,QAAQ,CAAC,GAAG,SAAS,GAAG,GAAG,YAAY,CAAC;AAAA,UACxC,QAAQ;AAAA,UACR,OAAO,UAAU,SAAY;AAAA,UAC7B;AAAA,UACA,aAAa;AAAA,UACb,UAAU,eAAa;AACrB,gBAAI,CAAC,UAAU,CAAC,GAAG;AACjB,wBAAU,CAAC,IAAI;AAAA,YACjB;AACA,gBAAI,CAAC,UAAU,CAAC,GAAG;AACjB,wBAAU,CAAC,IAAI;AAAA,YACjB;AACA,kBAAM,WAAW,UAAU,UAAU,IAAI,YAAY;AAIrD,qBAAS,QAAQ;AAAA,UACnB;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,yBAAQ;",
   "names": []
 }

package/build-module/focal-point-picker/index.mjs

@@ -155,7 +155,6 @@ function FocalPointPicker({
     top: y !== void 0 ? y * bounds.height : 0.5 * bounds.height
   };
   const classes = clsx("components-focal-point-picker-control", className);
-  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;
   useUpdateEffect(() => {
     setShowGridOverlay(true);
     const timeout = window.setTimeout(() => {
@@ -167,10 +166,13 @@ function FocalPointPicker({
     ...restProps,
     as: "fieldset",
     className: classes,
-    children: [!!label && /* @__PURE__ */ _jsx(Label, {
+    children: [!!label && (hideLabelFromVision ? /* @__PURE__ */ _jsx(VisuallyHidden, {
       as: "legend",
       children: label
-    }), /* @__PURE__ */ _jsx(MediaWrapper, {
+    }) : /* @__PURE__ */ _jsx(StyledLabel, {
+      as: "legend",
+      children: label
+    })), /* @__PURE__ */ _jsx(MediaWrapper, {
       className: "components-focal-point-picker-wrapper",
       children: /* @__PURE__ */ _jsxs(MediaContainer, {
         className: "components-focal-point-picker",

package/build-module/focal-point-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focal-point-picker/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * It addresses two common issues when displaying images in cropped containers. First, large\n * background images can be cropped in undesirable ways, especially on smaller viewports such as\n * mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of\n * highest visual interest. This component allows the selection of the point with the most\n * important visual information and returns it as a pair of numbers between 0 and 1.\n * The output value can be applied to either CSS `background-position` (for elements with\n * `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with\n * `object-fit: cover`).\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`;\n * - Corresponding CSS: `object-position: 50% 10%`;\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.1,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\twidth: '100%',\n * \t\taspectRatio: '16 / 9',\n * \t\tobjectFit: 'cover',\n * \t\tobjectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<img src={ url } alt=\"\" style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  __next40pxDefaultSize: _next40pxDefaultSize,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    const resolvedValue = resolvePoint?.(value) ?? value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && /*#__PURE__*/_jsx(Label, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * It addresses two common issues when displaying images in cropped containers. First, large\n * background images can be cropped in undesirable ways, especially on smaller viewports such as\n * mobile devices. Second, the CSS aspect-ratio property can inadvertently crop out the area of\n * highest visual interest. This component allows the selection of the point with the most\n * important visual information and returns it as a pair of numbers between 0 and 1.\n * The output value can be applied to either CSS `background-position` (for elements with\n * `background-image`) or `object-position` (for `<img>` / `<video>` elements rendered with\n * `object-fit: cover`).\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`;\n * - Corresponding CSS: `object-position: 50% 10%`;\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.1,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\twidth: '100%',\n * \t\taspectRatio: '16 / 9',\n * \t\tobjectFit: 'cover',\n * \t\tobjectPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<img src={ url } alt=\"\" style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  __next40pxDefaultSize: _next40pxDefaultSize,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    const resolvedValue = resolvePoint?.(value) ?? value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && (hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n      as: \"legend\",\n      children: label\n    }) : /*#__PURE__*/_jsx(StyledLabel, {\n      as: \"legend\",\n      children: label\n    })), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/form-token-field/index.mjs

@@ -360,7 +360,7 @@ function FormTokenField(props) {
   }
   function handleUpArrowKey() {
     setSelectedSuggestionIndex((index) => {
-      return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
+      return (index <= 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1;
     });
     setSelectedSuggestionScroll(true);
     return true;