@wordpress/components 39.0.0 → 40.0.0

package/build-module/circular-option-picker/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/index.tsx"],
-  "sourcesContent": ["import CircularOptionPicker from './circular-option-picker';\nexport { Option } from './circular-option-picker-option';\nexport { OptionGroup } from './circular-option-picker-option-group';\nexport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\nexport { getComputeCircularOptionPickerCommonProps } from './utils';\nexport default CircularOptionPicker;"],
-  "mappings": ";AAAA,OAAO,0BAA0B;AACjC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AACjD,SAAS,iDAAiD;AAC1D,IAAO,iCAAQ;",
+  "sourcesContent": ["import CircularOptionPicker from './circular-option-picker';\nexport { Option } from './circular-option-picker-option';\nexport { OptionGroup } from './circular-option-picker-option-group';\nexport { ButtonAction, DropdownLinkAction } from './circular-option-picker-actions';\nexport { getComputeCircularOptionPickerCommonProps, resolveCircularOptionPickerPresentation, warnIfCircularOptionPickerAsButtonsIsSet } from './utils';\nexport default CircularOptionPicker;"],
+  "mappings": ";AAAA,OAAO,0BAA0B;AACjC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,cAAc,0BAA0B;AACjD,SAAS,2CAA2C,yCAAyC,gDAAgD;AAC7I,IAAO,iCAAQ;",
   "names": []
 }

package/build-module/circular-option-picker/utils.mjs

@@ -1,11 +1,26 @@
 // packages/components/src/circular-option-picker/utils.tsx
 import { __ } from "@wordpress/i18n";
-function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby) {
-  const metaProps = asButtons ? {
-    asButtons: true
-  } : {
-    asButtons: false,
+import deprecated from "@wordpress/deprecated";
+function warnIfCircularOptionPickerAsButtonsIsSet(componentName, asButtons) {
+  if (asButtons === void 0) {
+    return;
+  }
+  deprecated(`\`asButtons\` prop in wp.components.${componentName}`, {
+    since: "7.2",
+    alternative: "`presentation`",
+    hint: '`asButtons={ true }` maps to `presentation="toggle-buttons"`. Explicit `presentation` takes precedence.'
+  });
+}
+function resolveCircularOptionPickerPresentation(presentation, asButtons) {
+  return presentation ?? (asButtons ? "toggle-buttons" : "listbox");
+}
+function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation) {
+  const resolvedPresentation = resolveCircularOptionPickerPresentation(presentation, asButtons);
+  const metaProps = resolvedPresentation === "listbox" ? {
+    presentation: "listbox",
     loop
+  } : {
+    presentation: resolvedPresentation
   };
   const labelProps = {
     "aria-labelledby": ariaLabelledby,
@@ -13,10 +28,13 @@ function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, a
   };
   return {
     metaProps,
-    labelProps
+    labelProps,
+    resolvedPresentation
   };
 }
 export {
-  getComputeCircularOptionPickerCommonProps
+  getComputeCircularOptionPickerCommonProps,
+  resolveCircularOptionPickerPresentation,
+  warnIfCircularOptionPickerAsButtonsIsSet
 };
 //# sourceMappingURL=utils.mjs.map

package/build-module/circular-option-picker/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/circular-option-picker/utils.tsx"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\n\n/**\n * Computes the common props for the CircularOptionPicker.\n */\nexport function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby) {\n  const metaProps = asButtons ? {\n    asButtons: true\n  } : {\n    asButtons: false,\n    loop\n  };\n  const labelProps = {\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabelledby ? undefined : ariaLabel || __('Custom color picker')\n  };\n  return {\n    metaProps,\n    labelProps\n  };\n}"],
-  "mappings": ";AAAA,SAAS,UAAU;AAKZ,SAAS,0CAA0C,WAAW,MAAM,WAAW,gBAAgB;AACpG,QAAM,YAAY,YAAY;AAAA,IAC5B,WAAW;AAAA,EACb,IAAI;AAAA,IACF,WAAW;AAAA,IACX;AAAA,EACF;AACA,QAAM,aAAa;AAAA,IACjB,mBAAmB;AAAA,IACnB,cAAc,iBAAiB,SAAY,aAAa,GAAG,qBAAqB;AAAA,EAClF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport deprecated from '@wordpress/deprecated';\nexport function warnIfCircularOptionPickerAsButtonsIsSet(componentName, asButtons) {\n  if (asButtons === undefined) {\n    return;\n  }\n  deprecated(`\\`asButtons\\` prop in wp.components.${componentName}`, {\n    since: '7.2',\n    alternative: '`presentation`',\n    hint: '`asButtons={ true }` maps to `presentation=\"toggle-buttons\"`. Explicit `presentation` takes precedence.'\n  });\n}\nexport function resolveCircularOptionPickerPresentation(presentation, asButtons) {\n  return presentation ?? (asButtons ? 'toggle-buttons' : 'listbox');\n}\n\n/**\n * Computes the common props for the CircularOptionPicker.\n */\nexport function getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation) {\n  const resolvedPresentation = resolveCircularOptionPickerPresentation(presentation, asButtons);\n  const metaProps = resolvedPresentation === 'listbox' ? {\n    presentation: 'listbox',\n    loop\n  } : {\n    presentation: resolvedPresentation\n  };\n  const labelProps = {\n    'aria-labelledby': ariaLabelledby,\n    'aria-label': ariaLabelledby ? undefined : ariaLabel || __('Custom color picker')\n  };\n  return {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  };\n}"],
+  "mappings": ";AAAA,SAAS,UAAU;AACnB,OAAO,gBAAgB;AAChB,SAAS,yCAAyC,eAAe,WAAW;AACjF,MAAI,cAAc,QAAW;AAC3B;AAAA,EACF;AACA,aAAW,uCAAuC,aAAa,IAAI;AAAA,IACjE,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,EACR,CAAC;AACH;AACO,SAAS,wCAAwC,cAAc,WAAW;AAC/E,SAAO,iBAAiB,YAAY,mBAAmB;AACzD;AAKO,SAAS,0CAA0C,WAAW,MAAM,WAAW,gBAAgB,cAAc;AAClH,QAAM,uBAAuB,wCAAwC,cAAc,SAAS;AAC5F,QAAM,YAAY,yBAAyB,YAAY;AAAA,IACrD,cAAc;AAAA,IACd;AAAA,EACF,IAAI;AAAA,IACF,cAAc;AAAA,EAChB;AACA,QAAM,aAAa;AAAA,IACjB,mBAAmB;AAAA,IACnB,cAAc,iBAAiB,SAAY,aAAa,GAAG,qBAAqB;AAAA,EAClF;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -8,11 +8,96 @@ import { __, sprintf } from "@wordpress/i18n";
 import { useCallback, useMemo, useState, forwardRef } from "@wordpress/element";
 import Dropdown from "../dropdown/index.mjs";
 import { ColorPicker } from "../color-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 { Truncate } from "../truncate/index.mjs";
-import { ColorHeading } from "./styles.mjs";
+import { Heading } from "../heading/index.mjs";
 import DropdownContentWrapper from "../dropdown/dropdown-content-wrapper.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/color-palette/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a7b05d56c7", ".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}");
+}
+var style_module_default = { "color-heading": "cf6db1948d5273a8__color-heading" };
+
+// packages/components/src/color-palette/index.tsx
 import { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from "./utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 extend([namesPlugin, a11yPlugin]);
@@ -23,6 +108,7 @@ function SinglePalette({
   onChange,
   value,
   selectedSlug,
+  presentation,
   ...additionalProps
 }) {
   const colorOptions = useMemo(() => {
@@ -32,7 +118,7 @@ function SinglePalette({
       slug
     }, index) => {
       const colordColor = colord(color);
-      const isSelected = selectedSlug ? slug === selectedSlug : value === color;
+      const isSelected = presentation !== "command-buttons" && (selectedSlug ? slug === selectedSlug : value === color);
       return /* @__PURE__ */ _jsx(CircularOptionPicker.Option, {
         isSelected,
         selectedIconProps: isSelected ? {
@@ -47,7 +133,7 @@ function SinglePalette({
         onClick: isSelected ? clearColor : () => onChange(color, index, slug)
       }, slug ?? `${color}-${index}`);
     });
-  }, [colors, value, selectedSlug, onChange, clearColor]);
+  }, [colors, value, selectedSlug, onChange, clearColor, presentation]);
   return /* @__PURE__ */ _jsx(CircularOptionPicker.OptionGroup, {
     className,
     options: colorOptions,
@@ -61,7 +147,8 @@ function MultiplePalettes({
   onChange,
   value,
   selectedSlug,
-  headingLevel
+  headingLevel,
+  presentation
 }) {
   const instanceId = useInstanceId(MultiplePalettes, "color-palette");
   if (colors.length === 0) {
@@ -77,7 +164,8 @@ function MultiplePalettes({
       const id = `${instanceId}-${index}`;
       return /* @__PURE__ */ _jsxs(VStack, {
         spacing: 2,
-        children: [/* @__PURE__ */ _jsx(ColorHeading, {
+        children: [/* @__PURE__ */ _jsx(Heading, {
+          className: style_module_default["color-heading"],
           id,
           level: headingLevel,
           children: name
@@ -87,6 +175,7 @@ function MultiplePalettes({
           onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),
           value,
           selectedSlug,
+          presentation,
           "aria-labelledby": id
         })]
       }, index);
@@ -125,6 +214,7 @@ function CustomColorPickerDropdown({
 function UnforwardedColorPalette(props, forwardedRef) {
   const {
     asButtons,
+    presentation,
     loop,
     clearable = true,
     colors = [],
@@ -139,6 +229,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
     "aria-labelledby": ariaLabelledby,
     ...additionalProps
   } = props;
+  warnIfCircularOptionPickerAsButtonsIsSet("ColorPalette", asButtons);
   const [normalizedColorValue, setNormalizedColorValue] = useState(value);
   const clearColor = useCallback(() => onChange(void 0), [onChange]);
   const customColorPaletteCallbackRef = useCallback((node) => {
@@ -162,11 +253,17 @@ function UnforwardedColorPalette(props, forwardedRef) {
     buttonLabelName,
     displayValue
   ) : __("Custom color picker");
+  const {
+    metaProps,
+    labelProps,
+    resolvedPresentation
+  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);
   const paletteCommonProps = {
     clearColor,
     onChange,
     value,
-    selectedSlug
+    selectedSlug,
+    presentation: resolvedPresentation
   };
   const actions = !!clearable && /* @__PURE__ */ _jsx(CircularOptionPicker.ButtonAction, {
     onClick: clearColor,
@@ -174,10 +271,6 @@ function UnforwardedColorPalette(props, forwardedRef) {
     disabled: !value,
     children: __("Clear")
   });
-  const {
-    metaProps,
-    labelProps
-  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);
   if (disableCustomColors && colors.length === 0 && !actions) {
     return null;
   }

package/build-module/color-palette/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/color-palette/index.tsx"],
-  "sourcesContent": ["import { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug — entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = selectedSlug ? slug === selectedSlug : value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n\n  // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.\n  if (disableCustomColors && colors.length === 0 && !actions) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;"],
-  "mappings": "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",
+  "sources": ["../../src/color-palette/index.tsx", "../../../style-runtime/src/index.ts", "../../src/color-palette/style.module.scss"],
+  "sourcesContent": ["import { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps, warnIfCircularOptionPickerAsButtonsIsSet } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { Heading } from '../heading';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport styles from './style.module.scss';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  presentation,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name,\n      slug\n    }, index) => {\n      const colordColor = colord(color);\n      // When a non-empty selectedSlug is provided, selection is decided\n      // strictly by slug — entries without a slug or with a different slug\n      // are not selected, even when their color value matches `value`.\n      // This correctly handles mixed palettes where some entries have slugs\n      // and others don't. Fall back to color value matching otherwise\n      // (including when selectedSlug is an empty string).\n      const isSelected = presentation !== 'command-buttons' && (selectedSlug ? slug === selectedSlug : value === color);\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index, slug)\n      }, slug ?? `${color}-${index}`);\n    });\n  }, [colors, value, selectedSlug, onChange, clearColor, presentation]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  selectedSlug,\n  headingLevel,\n  presentation\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(Heading, {\n          className: styles['color-heading'],\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: (newColor, _colorIndex, slug) => onChange(newColor, index, slug),\n          value: value,\n          selectedSlug: selectedSlug,\n          presentation: presentation,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    presentation,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    selectedSlug,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  warnIfCircularOptionPickerAsButtonsIsSet('ColorPalette', asButtons);\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins, selectedSlug), [value, colors, hasMultipleColorOrigins, selectedSlug]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const {\n    metaProps,\n    labelProps,\n    resolvedPresentation\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby, presentation);\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value,\n    selectedSlug,\n    presentation: resolvedPresentation\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n\n  // If disableCustomColors is true and colors.length is 0, return null to avoid rendering an empty palette wrapper.\n  if (disableCustomColors && colors.length === 0 && !actions) {\n    return null;\n  }\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nColorPalette.displayName = 'ColorPalette';\nexport default ColorPalette;", "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(\"a7b05d56c7\", \".cf6db1948d5273a8__color-heading{text-transform:uppercase}.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading.cf6db1948d5273a8__color-heading{font-size:11px;line-height:24px;margin-bottom:0}\");\n}\nexport default {\"color-heading\":\"cf6db1948d5273a8__color-heading\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/combobox-control/index.mjs

@@ -6,16 +6,100 @@ import { useInstanceId } from "@wordpress/compose";
 import { speak } from "@wordpress/a11y";
 import { closeSmall } from "@wordpress/icons";
 import { withIgnoreIMEEvents } from "@wordpress/keycodes";
-import { InputWrapperFlex } from "./styles.mjs";
 import TokenInput from "../form-token-field/token-input.mjs";
 import SuggestionsList from "../form-token-field/suggestions-list.mjs";
 import BaseControl from "../base-control/index.mjs";
 import Button from "../button/index.mjs";
-import { FlexBlock } from "../flex/index.mjs";
+import { Flex, FlexBlock } from "../flex/index.mjs";
 import withFocusOutside from "../higher-order/with-focus-outside/index.mjs";
 import { useControlledValue } from "../utils/hooks/index.mjs";
 import { normalizeTextString } from "../utils/strings.mjs";
 import Spinner from "../spinner/index.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/combobox-control/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("5e90aa62ab", "._52e80c14d3dae324__input-wrapper{height:38px;padding-inline:8px}");
+}
+var style_module_default = { "input-wrapper": "_52e80c14d3dae324__input-wrapper" };
+
+// packages/components/src/combobox-control/index.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var noop = () => {
 };
@@ -188,7 +272,8 @@ function ComboboxControl(props) {
         className: "components-combobox-control__suggestions-container",
         tabIndex: -1,
         onKeyDown,
-        children: [/* @__PURE__ */ _jsxs(InputWrapperFlex, {
+        children: [/* @__PURE__ */ _jsxs(Flex, {
+          className: style_module_default["input-wrapper"],
           children: [/* @__PURE__ */ _jsx(FlexBlock, {
             children: /* @__PURE__ */ _jsx(TokenInput, {
               className: "components-combobox-control__input",

package/build-module/combobox-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/combobox-control/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport { InputWrapperFlex } from './styles';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport Spinner from '../spinner';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  const {\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = props;\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = currentOption?.label ?? '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(InputWrapperFlex, {\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange,\n              \"aria-describedby\": help ?\n              // TODO: Refactor `TokenInput` to not use hardcoded IDs.\n              `components-form-token-input-${instanceId}__help` : undefined\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;"],
-  "mappings": "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",
+  "sources": ["../../src/combobox-control/index.tsx", "../../../style-runtime/src/index.ts", "../../src/combobox-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Component, useState, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\nimport { closeSmall } from '@wordpress/icons';\nimport { withIgnoreIMEEvents } from '@wordpress/keycodes';\nimport TokenInput from '../form-token-field/token-input';\nimport SuggestionsList from '../form-token-field/suggestions-list';\nimport BaseControl from '../base-control';\nimport Button from '../button';\nimport { Flex, FlexBlock } from '../flex';\nimport withFocusOutside from '../higher-order/with-focus-outside';\nimport { useControlledValue } from '../utils/hooks';\nimport { normalizeTextString } from '../utils/strings';\nimport Spinner from '../spinner';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nconst DetectOutside = withFocusOutside(class DetectOutsideComponent extends Component {\n  handleFocusOutside(event) {\n    this.props.onFocusOutside(event);\n  }\n  render() {\n    return this.props.children;\n  }\n});\nconst getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion);\n\n/**\n * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of\n * being able to search for options using a search input.\n *\n * ```jsx\n * import { ComboboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const options = [\n * \t{\n * \t\tvalue: 'small',\n * \t\tlabel: 'Small',\n * \t},\n * \t{\n * \t\tvalue: 'normal',\n * \t\tlabel: 'Normal',\n * \t\tdisabled: true,\n * \t},\n * \t{\n * \t\tvalue: 'large',\n * \t\tlabel: 'Large',\n * \t\tdisabled: false,\n * \t},\n * ];\n *\n * function MyComboboxControl() {\n * \tconst [ fontSize, setFontSize ] = useState();\n * \tconst [ filteredOptions, setFilteredOptions ] = useState( options );\n * \treturn (\n * \t\t<ComboboxControl\n * \t\t\tlabel=\"Font Size\"\n * \t\t\tvalue={ fontSize }\n * \t\t\tonChange={ setFontSize }\n * \t\t\toptions={ filteredOptions }\n * \t\t\tonFilterValueChange={ ( inputValue ) =>\n * \t\t\t\tsetFilteredOptions(\n * \t\t\t\t\toptions.filter( ( option ) =>\n * \t\t\t\t\t\toption.label\n * \t\t\t\t\t\t\t.toLowerCase()\n * \t\t\t\t\t\t\t.startsWith( inputValue.toLowerCase() )\n * \t\t\t\t\t)\n * \t\t\t\t)\n * \t\t\t}\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction ComboboxControl(props) {\n  const {\n    value: valueProp,\n    label,\n    options,\n    onChange: onChangeProp,\n    onFilterValueChange = noop,\n    hideLabelFromVision,\n    help,\n    allowReset = true,\n    className,\n    isLoading = false,\n    messages = {\n      selected: __('Item selected.')\n    },\n    __experimentalRenderItem,\n    expandOnFocus = true,\n    placeholder\n  } = props;\n  const [value, setValue] = useControlledValue({\n    value: valueProp,\n    onChange: onChangeProp\n  });\n  const currentOption = options.find(option => option.value === value);\n  const currentLabel = currentOption?.label ?? '';\n  // Use a custom prefix when generating the `instanceId` to avoid having\n  // duplicate input IDs when rendering this component and `FormTokenField`\n  // in the same page (see https://github.com/WordPress/gutenberg/issues/42112).\n  const instanceId = useInstanceId(ComboboxControl, 'combobox-control');\n  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputHasFocus, setInputHasFocus] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const inputContainer = useRef(null);\n  const matchingSuggestions = useMemo(() => {\n    const startsWithMatch = [];\n    const containsMatch = [];\n    const match = normalizeTextString(inputValue);\n    options.forEach(option => {\n      const index = normalizeTextString(option.label).indexOf(match);\n      if (index === 0) {\n        startsWithMatch.push(option);\n      } else if (index > 0) {\n        containsMatch.push(option);\n      }\n    });\n    return startsWithMatch.concat(containsMatch);\n  }, [inputValue, options]);\n  const onSuggestionSelected = newSelectedSuggestion => {\n    if (newSelectedSuggestion.disabled) {\n      return;\n    }\n    setValue(newSelectedSuggestion.value);\n    speak(messages.selected, 'assertive');\n    setSelectedSuggestion(newSelectedSuggestion);\n    setInputValue('');\n    setIsExpanded(false);\n  };\n  const handleArrowNavigation = (offset = 1) => {\n    const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions);\n    let nextIndex = index + offset;\n    if (nextIndex < 0) {\n      nextIndex = matchingSuggestions.length - 1;\n    } else if (nextIndex >= matchingSuggestions.length) {\n      nextIndex = 0;\n    }\n    setSelectedSuggestion(matchingSuggestions[nextIndex]);\n    setIsExpanded(true);\n  };\n  const onKeyDown = withIgnoreIMEEvents(event => {\n    let preventDefault = false;\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.code) {\n      case 'Enter':\n        if (selectedSuggestion) {\n          onSuggestionSelected(selectedSuggestion);\n          preventDefault = true;\n        }\n        break;\n      case 'ArrowUp':\n        handleArrowNavigation(-1);\n        preventDefault = true;\n        break;\n      case 'ArrowDown':\n        handleArrowNavigation(1);\n        preventDefault = true;\n        break;\n      case 'Escape':\n        setIsExpanded(false);\n        setSelectedSuggestion(null);\n        preventDefault = true;\n        break;\n      default:\n        break;\n    }\n    if (preventDefault) {\n      event.preventDefault();\n    }\n  });\n  const onBlur = () => {\n    setInputHasFocus(false);\n  };\n  const onFocus = () => {\n    setInputHasFocus(true);\n    if (expandOnFocus) {\n      setIsExpanded(true);\n    }\n    onFilterValueChange('');\n    setInputValue('');\n  };\n  const onClick = () => {\n    setIsExpanded(true);\n  };\n  const onFocusOutside = () => {\n    setIsExpanded(false);\n  };\n  const onInputChange = event => {\n    const text = event.value;\n    setInputValue(text);\n    onFilterValueChange(text);\n    if (inputHasFocus) {\n      setIsExpanded(true);\n    }\n  };\n  const handleOnReset = () => {\n    setValue(null);\n    inputContainer.current?.focus();\n  };\n\n  // Stop propagation of the keydown event when pressing Enter on the Reset\n  // button to prevent calling the onKeydown callback on the container div\n  // element which actually sets the selected suggestion.\n  const handleResetStopPropagation = event => {\n    event.stopPropagation();\n  };\n\n  // Update current selections when the filter input changes.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0;\n    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {\n      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.\n      setSelectedSuggestion(matchingSuggestions[0]);\n    }\n  }, [matchingSuggestions, selectedSuggestion]);\n\n  // Announcements.\n  useEffect(() => {\n    const hasMatchingSuggestions = matchingSuggestions.length > 0;\n    if (isExpanded) {\n      const message = hasMatchingSuggestions ? sprintf(/* translators: %d: number of results. */\n      _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');\n      speak(message, 'polite');\n    }\n  }, [matchingSuggestions, isExpanded]);\n\n  // Disable reason: There is no appropriate role which describes the\n  // input container intended accessible usability.\n  // TODO: Refactor click detection to use blur to stop propagation.\n  /* eslint-disable jsx-a11y/no-static-element-interactions */\n  return /*#__PURE__*/_jsx(DetectOutside, {\n    onFocusOutside: onFocusOutside,\n    children: /*#__PURE__*/_jsx(BaseControl, {\n      className: clsx(className, 'components-combobox-control'),\n      label: label,\n      id: `components-form-token-input-${instanceId}`,\n      hideLabelFromVision: hideLabelFromVision,\n      help: help,\n      children: /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-combobox-control__suggestions-container\",\n        tabIndex: -1,\n        onKeyDown: onKeyDown,\n        children: [/*#__PURE__*/_jsxs(Flex, {\n          className: styles['input-wrapper'],\n          children: [/*#__PURE__*/_jsx(FlexBlock, {\n            children: /*#__PURE__*/_jsx(TokenInput, {\n              className: \"components-combobox-control__input\",\n              instanceId: instanceId,\n              ref: inputContainer,\n              placeholder: placeholder,\n              value: isExpanded ? inputValue : currentLabel,\n              onFocus: onFocus,\n              onBlur: onBlur,\n              onClick: onClick,\n              isExpanded: isExpanded,\n              selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n              onChange: onInputChange,\n              \"aria-describedby\": help ?\n              // TODO: Refactor `TokenInput` to not use hardcoded IDs.\n              `components-form-token-input-${instanceId}__help` : undefined\n            })\n          }), isLoading && /*#__PURE__*/_jsx(Spinner, {}), allowReset && Boolean(value) && !isExpanded && /*#__PURE__*/_jsx(Button, {\n            size: \"small\",\n            icon: closeSmall,\n            onClick: handleOnReset,\n            onKeyDown: handleResetStopPropagation,\n            label: __('Reset')\n          })]\n        }), isExpanded && !isLoading && /*#__PURE__*/_jsx(SuggestionsList, {\n          instanceId: instanceId\n          // The empty string for `value` here is not actually used, but is\n          // just a quick way to satisfy the TypeScript requirements of SuggestionsList.\n          // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330\n          ,\n          match: {\n            label: inputValue,\n            value: ''\n          },\n          displayTransform: suggestion => suggestion.label,\n          suggestions: matchingSuggestions,\n          selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions),\n          onHover: setSelectedSuggestion,\n          onSelect: onSuggestionSelected,\n          scrollIntoView: true,\n          __experimentalRenderItem: __experimentalRenderItem\n        })]\n      })\n    })\n  });\n  /* eslint-enable jsx-a11y/no-static-element-interactions */\n}\nexport default ComboboxControl;", "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(\"5e90aa62ab\", \"._52e80c14d3dae324__input-wrapper{height:38px;padding-inline:8px}\");\n}\nexport default {\"input-wrapper\":\"_52e80c14d3dae324__input-wrapper\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/confirm-dialog/component.mjs

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