@wordpress/components 39.0.0 → 40.1.0

package/build-module/toggle-group-control/toggle-group-control/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/toggle-group-control/toggle-group-control/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { contextConnect, useContextSystem } from '../../context';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport styles from './style.module.scss';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __nextHasNoMarginBottom: _,\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const classes = clsx(styles['toggle-group-control'], {\n    [styles['is-block']]: isBlock,\n    [styles['has-border']]: isBlock && !isDeselectable,\n    [styles['has-enclosing-borders']]: !isDeselectable\n  }, className);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      value: value,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;", "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(\"ac15433bd4\", \".f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:\\\"\\\";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}\");\n}\nexport default {\"toggle-group-control\":\"f3fd102dd2f0e90e__toggle-group-control\",\"has-border\":\"_1344586004ce6119__has-border\",\"has-enclosing-borders\":\"aa98fad5b5d333be__has-enclosing-borders\",\"is-block\":\"_4068eff8d72c19b3__is-block\"};\n"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,wBAAwB;AACjD,OAAO,eAAe,2BAA2B;;;ACJjD,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,o4DAAs4D;AACn6D;AACA,IAAO,uBAAQ,EAAC,wBAAuB,0CAAyC,cAAa,iCAAgC,yBAAwB,2CAA0C,YAAW,8BAA6B;;;AFEvO,SAAS,sCAAsC;AAC/C,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,OAAO,YAAY;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AACrD,QAAM,OAAO,aAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,eAAe,0BAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,wBAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,UAAU,KAAK,qBAAO,sBAAsB,GAAG;AAAA,IACnD,CAAC,qBAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAAC,qBAAO,YAAY,CAAC,GAAG,WAAW,CAAC;AAAA,IACpC,CAAC,qBAAO,uBAAuB,CAAC,GAAG,CAAC;AAAA,EACtC,GAAG,SAAS;AACZ,QAAM,cAAc,iBAAiB,kCAAkC;AACvE,SAAoB,qBAAK,aAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,qBAAK,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAIA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAmCO,IAAM,qBAAqB,eAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { contextConnect, useContextSystem } from '../../context';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport styles from './style.module.scss';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __nextHasNoMarginBottom: _,\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    disabled = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const classes = clsx(styles['toggle-group-control'], {\n    [styles['is-block']]: isBlock,\n    [styles['has-border']]: isBlock && !isDeselectable,\n    [styles['has-enclosing-borders']]: !isDeselectable\n  }, className);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      value: value,\n      disabled: disabled,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;", "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(\"86a73788d7\", \".f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:\\\"\\\";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}.f3fd102dd2f0e90e__toggle-group-control[aria-disabled=true]:before{opacity:calc(min(1, max(0, var(--selected-width, 0), var(--selected-height, 0))) * .4)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover:not([aria-disabled=true]){border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}\");\n}\nexport default {\"toggle-group-control\":\"f3fd102dd2f0e90e__toggle-group-control\",\"has-border\":\"_1344586004ce6119__has-border\",\"has-enclosing-borders\":\"aa98fad5b5d333be__has-enclosing-borders\",\"is-block\":\"_4068eff8d72c19b3__is-block\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,wBAAwB;AACjD,OAAO,eAAe,2BAA2B;;;ACJjD,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,u7DAAy7D;AACt9D;AACA,IAAO,uBAAQ,EAAC,wBAAuB,0CAAyC,cAAa,iCAAgC,yBAAwB,2CAA0C,YAAW,8BAA6B;;;AFEvO,SAAS,sCAAsC;AAC/C,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,OAAO,YAAY;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AACrD,QAAM,OAAO,aAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,eAAe,0BAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,wBAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,UAAU,KAAK,qBAAO,sBAAsB,GAAG;AAAA,IACnD,CAAC,qBAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAAC,qBAAO,YAAY,CAAC,GAAG,WAAW,CAAC;AAAA,IACpC,CAAC,qBAAO,uBAAuB,CAAC,GAAG,CAAC;AAAA,EACtC,GAAG,SAAS;AACZ,QAAM,cAAc,iBAAiB,kCAAkC;AACvE,SAAoB,qBAAK,aAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,qBAAK,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAIA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAmCO,IAAM,qBAAqB,eAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option/component.mjs

@@ -1,8 +1,10 @@
 // packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
 import { forwardRef } from "@wordpress/element";
 import { ToggleGroupControlOptionBase } from "../toggle-group-control-option-base/index.mjs";
+import { useToggleGroupControlContext } from "../context.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlOption(props, ref) {
+  useToggleGroupControlContext("ToggleGroupControlOption");
   const {
     label,
     ...restProps

package/build-module/toggle-group-control/toggle-group-control-option/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nToggleGroupControlOption.displayName = 'ToggleGroupControlOption';\nexport default ToggleGroupControlOption;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA0BO,IAAM,2BAA2B,WAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { useToggleGroupControlContext } from '../context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  useToggleGroupControlContext('ToggleGroupControlOption');\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nToggleGroupControlOption.displayName = 'ToggleGroupControlOption';\nexport default ToggleGroupControlOption;"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,+BAA6B,0BAA0B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA0BO,IAAM,2BAA2B,WAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option-base/component.mjs

@@ -85,7 +85,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/toggle-group-control/toggle-group-control-option-base/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("a044fd0bb7", "._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}");
+  registerStyle("94533a674c", "._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}");
 }
 var style_module_default = { "label": "_1dec843460a3c9d5__label", "label-block": "_50ddec5669c9d4a6__label-block", "button": "_1563c8aa5e21d063__button", "is-deselectable": "e1b6a1f76b7eb2bb__is-deselectable", "is-icon": "_407216dd3e301287__is-icon", "is-pressed": "_617c0f0a1c161590__is-pressed", "button-content": "_2850882d974e5419__button-content" };
 
@@ -128,6 +128,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     disabled,
     ...otherButtonProps
   } = buttonProps;
+  const isOptionDisabled = Boolean(toggleGroupControlContext.disabled || disabled);
   const isPressed = toggleGroupControlContext.value === value;
   const labelClasses = clsx(style_module_default.label, isBlock && style_module_default["label-block"]);
   const itemClasses = clsx(style_module_default.button, {
@@ -162,7 +163,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       text: otherButtonProps["aria-label"],
       children: isDeselectable ? /* @__PURE__ */ _jsx("button", {
         ...commonProps,
-        disabled,
+        disabled: isOptionDisabled,
         "aria-pressed": isPressed,
         type: "button",
         onClick: buttonOnClick,

package/build-module/toggle-group-control/toggle-group-control-option-base/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/toggle-group-control/toggle-group-control-option-base/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport styles from './style.module.scss';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst WithToolTip = ({\n  showTooltip,\n  text,\n  children\n}) => {\n  if (showTooltip && text) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: text,\n      placement: \"top\",\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n  const toggleGroupControlContext = useToggleGroupControlContext();\n  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n  const buttonProps = useContextSystem({\n    ...props,\n    id\n  }, 'ToggleGroupControlOptionBase');\n  const {\n    isBlock = false,\n    isDeselectable = false\n  } = toggleGroupControlContext;\n  const {\n    className,\n    isIcon = false,\n    value,\n    children,\n    showTooltip = false,\n    disabled,\n    ...otherButtonProps\n  } = buttonProps;\n  const isPressed = toggleGroupControlContext.value === value;\n  const labelClasses = clsx(styles.label, isBlock && styles['label-block']);\n  const itemClasses = clsx(styles.button, {\n    [styles['is-deselectable']]: isDeselectable,\n    [styles['is-icon']]: isIcon,\n    [styles['is-pressed']]: isPressed\n  }, className);\n  const buttonOnClick = () => {\n    if (isDeselectable && isPressed) {\n      toggleGroupControlContext.setValue(undefined);\n    } else {\n      toggleGroupControlContext.setValue(value);\n    }\n  };\n  const commonProps = {\n    ...otherButtonProps,\n    className: itemClasses,\n    'data-value': value,\n    ref: forwardedRef\n  };\n  const labelRef = useRef(null);\n  useLayoutEffect(() => {\n    if (isPressed && labelRef.current) {\n      toggleGroupControlContext.setSelectedElement(labelRef.current);\n    }\n  }, [isPressed, toggleGroupControlContext]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: labelRef,\n    className: labelClasses,\n    children: /*#__PURE__*/_jsx(WithToolTip, {\n      showTooltip: showTooltip,\n      text: otherButtonProps['aria-label'],\n      children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n        ...commonProps,\n        disabled: disabled,\n        \"aria-pressed\": isPressed,\n        type: \"button\",\n        onClick: buttonOnClick,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n        disabled: disabled,\n        onFocusVisible: () => {\n          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n          // Conditions ensure that the first visible focus to a radio group\n          // without a selected option will not automatically select the option.\n          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n            toggleGroupControlContext.setValue(value);\n          }\n        },\n        render: /*#__PURE__*/_jsx(\"button\", {\n          type: \"button\",\n          ...commonProps\n        }),\n        value: value,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      })\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;", "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(\"a044fd0bb7\", \"._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{--focus-color:var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color);outline-color:var(--wp-components-color-accent,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}\");\n}\nexport default {\"label\":\"_1dec843460a3c9d5__label\",\"label-block\":\"_50ddec5669c9d4a6__label-block\",\"button\":\"_1563c8aa5e21d063__button\",\"is-deselectable\":\"e1b6a1f76b7eb2bb__is-deselectable\",\"is-icon\":\"_407216dd3e301287__is-icon\",\"is-pressed\":\"_617c0f0a1c161590__is-pressed\",\"button-content\":\"_2850882d974e5419__button-content\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport styles from './style.module.scss';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst WithToolTip = ({\n  showTooltip,\n  text,\n  children\n}) => {\n  if (showTooltip && text) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: text,\n      placement: \"top\",\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n  const toggleGroupControlContext = useToggleGroupControlContext();\n  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n  const buttonProps = useContextSystem({\n    ...props,\n    id\n  }, 'ToggleGroupControlOptionBase');\n  const {\n    isBlock = false,\n    isDeselectable = false\n  } = toggleGroupControlContext;\n  const {\n    className,\n    isIcon = false,\n    value,\n    children,\n    showTooltip = false,\n    disabled,\n    ...otherButtonProps\n  } = buttonProps;\n  const isOptionDisabled = Boolean(toggleGroupControlContext.disabled || disabled);\n  const isPressed = toggleGroupControlContext.value === value;\n  const labelClasses = clsx(styles.label, isBlock && styles['label-block']);\n  const itemClasses = clsx(styles.button, {\n    [styles['is-deselectable']]: isDeselectable,\n    [styles['is-icon']]: isIcon,\n    [styles['is-pressed']]: isPressed\n  }, className);\n  const buttonOnClick = () => {\n    if (isDeselectable && isPressed) {\n      toggleGroupControlContext.setValue(undefined);\n    } else {\n      toggleGroupControlContext.setValue(value);\n    }\n  };\n  const commonProps = {\n    ...otherButtonProps,\n    className: itemClasses,\n    'data-value': value,\n    ref: forwardedRef\n  };\n  const labelRef = useRef(null);\n  useLayoutEffect(() => {\n    if (isPressed && labelRef.current) {\n      toggleGroupControlContext.setSelectedElement(labelRef.current);\n    }\n  }, [isPressed, toggleGroupControlContext]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: labelRef,\n    className: labelClasses,\n    children: /*#__PURE__*/_jsx(WithToolTip, {\n      showTooltip: showTooltip,\n      text: otherButtonProps['aria-label'],\n      children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n        ...commonProps,\n        disabled: isOptionDisabled,\n        \"aria-pressed\": isPressed,\n        type: \"button\",\n        onClick: buttonOnClick,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n        disabled: disabled,\n        onFocusVisible: () => {\n          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n          // Conditions ensure that the first visible focus to a radio group\n          // without a selected option will not automatically select the option.\n          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n            toggleGroupControlContext.setValue(value);\n          }\n        },\n        render: /*#__PURE__*/_jsx(\"button\", {\n          type: \"button\",\n          ...commonProps\n        }),\n        value: value,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      })\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;", "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(\"94533a674c\", \"._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}\");\n}\nexport default {\"label\":\"_1dec843460a3c9d5__label\",\"label-block\":\"_50ddec5669c9d4a6__label-block\",\"button\":\"_1563c8aa5e21d063__button\",\"is-deselectable\":\"e1b6a1f76b7eb2bb__is-deselectable\",\"is-icon\":\"_407216dd3e301287__is-icon\",\"is-pressed\":\"_617c0f0a1c161590__is-pressed\",\"button-content\":\"_2850882d974e5419__button-content\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option-icon/component.mjs

@@ -1,9 +1,11 @@
 // packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
 import { forwardRef } from "@wordpress/element";
 import { ToggleGroupControlOptionBase } from "../toggle-group-control-option-base/index.mjs";
+import { useToggleGroupControlContext } from "../context.mjs";
 import Icon from "../../icon/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlOptionIcon(props, ref) {
+  useToggleGroupControlContext("ToggleGroupControlOptionIcon");
   const {
     icon,
     label,

package/build-module/toggle-group-control/toggle-group-control-option-icon/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOptionIcon(props, ref) {\n  const {\n    icon,\n    label,\n    ...restProps\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    isIcon: true,\n    \"aria-label\": label,\n    showTooltip: true,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *  return (\n *    <ToggleGroupControl>\n *      <ToggleGroupControlOptionIcon\n *        value=\"uppercase\"\n *        label=\"Uppercase\"\n *        icon={ formatUppercase }\n *      />\n *      <ToggleGroupControlOptionIcon\n *        value=\"lowercase\"\n *        label=\"Lowercase\"\n *        icon={ formatLowercase }\n *      />\n *    </ToggleGroupControl>\n *  );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);\nToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';\nexport default ToggleGroupControlOptionIcon;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,qBAAK,MAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,+BAA+B,WAAW,uCAAuC;AAC9F,6BAA6B,cAAc;AAC3C,IAAO,oBAAQ;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { useToggleGroupControlContext } from '../context';\nimport Icon from '../../icon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOptionIcon(props, ref) {\n  useToggleGroupControlContext('ToggleGroupControlOptionIcon');\n  const {\n    icon,\n    label,\n    ...restProps\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    isIcon: true,\n    \"aria-label\": label,\n    showTooltip: true,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *  return (\n *    <ToggleGroupControl>\n *      <ToggleGroupControlOptionIcon\n *        value=\"uppercase\"\n *        label=\"Uppercase\"\n *        icon={ formatUppercase }\n *      />\n *      <ToggleGroupControlOptionIcon\n *        value=\"lowercase\"\n *        label=\"Lowercase\"\n *        icon={ formatLowercase }\n *      />\n *    </ToggleGroupControl>\n *  );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);\nToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';\nexport default ToggleGroupControlOptionIcon;"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,+BAA6B,8BAA8B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,qBAAK,MAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,+BAA+B,WAAW,uCAAuC;AAC9F,6BAA6B,cAAc;AAC3C,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/tools-panel/tools-panel/hook.mjs

@@ -1,6 +1,6 @@
 // packages/components/src/tools-panel/tools-panel/hook.ts
 import clsx from "clsx";
-import { useCallback, useEffect, useMemo, useReducer, useRef } from "@wordpress/element";
+import { useCallback, useEffect, useMemo, useReducer, useState } from "@wordpress/element";
 
 // packages/style-runtime/src/index.ts
 var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
@@ -87,62 +87,20 @@ var style_module_default = { "tools-panel": "_62d714739f4dc308__tools-panel", "t
 
 // packages/components/src/tools-panel/tools-panel/hook.ts
 import { useContextSystem } from "../../context/index.mjs";
-function emptyMenuItems() {
-  return {
-    default: {},
-    optional: {}
-  };
-}
 function emptyState() {
   return {
     panelItems: [],
     menuItemOrder: [],
-    menuItems: emptyMenuItems()
+    menuItemValues: {}
   };
 }
-var generateMenuItems = ({
-  panelItems,
-  shouldReset,
-  currentMenuItems,
-  menuItemOrder
-}) => {
-  const newMenuItems = emptyMenuItems();
-  const menuItems = emptyMenuItems();
-  panelItems.forEach(({
-    hasValue,
-    isShownByDefault,
-    label
-  }) => {
-    const group = isShownByDefault ? "default" : "optional";
-    const existingItemValue = currentMenuItems?.[group]?.[label];
-    const value = existingItemValue ? existingItemValue : hasValue();
-    newMenuItems[group][label] = shouldReset ? false : value;
-  });
-  menuItemOrder.forEach((key) => {
-    if (newMenuItems.default.hasOwnProperty(key)) {
-      menuItems.default[key] = newMenuItems.default[key];
-    }
-    if (newMenuItems.optional.hasOwnProperty(key)) {
-      menuItems.optional[key] = newMenuItems.optional[key];
-    }
-  });
-  Object.keys(newMenuItems.default).forEach((key) => {
-    if (!menuItems.default.hasOwnProperty(key)) {
-      menuItems.default[key] = newMenuItems.default[key];
-    }
-  });
-  Object.keys(newMenuItems.optional).forEach((key) => {
-    if (!menuItems.optional.hasOwnProperty(key)) {
-      menuItems.optional[key] = newMenuItems.optional[key];
-    }
-  });
-  return menuItems;
-};
+var getSeedValue = (item) => item.hasValue() || !item.isShownByDefault && !!item.defaultShown;
+var getMenuGroup = (item) => item.isShownByDefault ? "default" : "optional";
 function panelItemsReducer(panelItems, action) {
   switch (action.type) {
     case "REGISTER_PANEL": {
+      const existingIndex = panelItems.findIndex((item) => item.label === action.item.label);
       const newItems = [...panelItems];
-      const existingIndex = newItems.findIndex((oldItem) => oldItem.label === action.item.label);
       if (existingIndex !== -1) {
         newItems.splice(existingIndex, 1);
       }
@@ -151,12 +109,15 @@ function panelItemsReducer(panelItems, action) {
     }
     case "UNREGISTER_PANEL": {
       const index = panelItems.findIndex((item) => item.label === action.label);
-      if (index !== -1) {
-        const newItems = [...panelItems];
-        newItems.splice(index, 1);
-        return newItems;
+      if (index === -1) {
+        return panelItems;
       }
-      return panelItems;
+      if (action.item && panelItems[index] !== action.item) {
+        return panelItems;
+      }
+      const newItems = [...panelItems];
+      newItems.splice(index, 1);
+      return newItems;
     }
     default:
       return panelItems;
@@ -174,66 +135,74 @@ function menuItemOrderReducer(menuItemOrder, action) {
       return menuItemOrder;
   }
 }
-function menuItemsReducer(state, action) {
+function menuItemValuesReducer(state, action) {
+  const values = state.menuItemValues;
   switch (action.type) {
-    case "REGISTER_PANEL":
-    case "UNREGISTER_PANEL":
-      return generateMenuItems({
-        currentMenuItems: state.menuItems,
-        panelItems: state.panelItems,
-        menuItemOrder: state.menuItemOrder,
-        shouldReset: false
-      });
-    case "RESET_ALL":
-      return generateMenuItems({
-        panelItems: state.panelItems,
-        menuItemOrder: state.menuItemOrder,
-        shouldReset: true
-      });
+    case "REGISTER_PANEL": {
+      if (!values.hasOwnProperty(action.item.label)) {
+        return values;
+      }
+      const {
+        [action.item.label]: unusedValue,
+        ...rest
+      } = values;
+      return rest;
+    }
     case "UPDATE_VALUE": {
-      const oldValue = state.menuItems[action.group][action.label];
-      if (action.value === oldValue) {
-        return state.menuItems;
+      if (values[action.label] === action.value) {
+        return values;
       }
       return {
-        ...state.menuItems,
-        [action.group]: {
-          ...state.menuItems[action.group],
-          [action.label]: action.value
-        }
+        ...values,
+        [action.label]: action.value
       };
     }
     case "TOGGLE_VALUE": {
-      const currentItem = state.panelItems.find((item) => item.label === action.label);
-      if (!currentItem) {
-        return state.menuItems;
+      const item = state.panelItems.find(({
+        label
+      }) => label === action.label);
+      if (!item) {
+        return values;
+      }
+      const current = values[action.label] ?? getSeedValue(item);
+      return {
+        ...values,
+        [action.label]: !current
+      };
+    }
+    case "RESET_ALL": {
+      const hidden = state.panelItems.filter((item) => !item.isShownByDefault && values[item.label] !== false);
+      if (!hidden.length) {
+        return values;
       }
-      const menuGroup = currentItem.isShownByDefault ? "default" : "optional";
-      const newMenuItems = {
-        ...state.menuItems,
-        [menuGroup]: {
-          ...state.menuItems[menuGroup],
-          [action.label]: !state.menuItems[menuGroup][action.label]
-        }
+      const next = {
+        ...values
       };
-      return newMenuItems;
+      hidden.forEach(({
+        label
+      }) => {
+        next[label] = false;
+      });
+      return next;
     }
     default:
-      return state.menuItems;
+      return values;
   }
 }
 function panelReducer(state, action) {
   const panelItems = panelItemsReducer(state.panelItems, action);
   const menuItemOrder = menuItemOrderReducer(state.menuItemOrder, action);
-  const menuItems = menuItemsReducer({
-    panelItems,
-    menuItemOrder,
-    menuItems: state.menuItems
+  const menuItemValues = menuItemValuesReducer({
+    ...state,
+    panelItems
   }, action);
+  if (panelItems === state.panelItems && menuItemOrder === state.menuItemOrder && menuItemValues === state.menuItemValues) {
+    return state;
+  }
   return {
     panelItems,
     menuItemOrder,
-    menuItems
+    menuItemValues
   };
 }
 function resetAllFiltersReducer(filters, action) {
@@ -259,28 +228,29 @@ function useToolsPanel(props) {
     __experimentalLastVisibleItemClass,
     ...otherProps
   } = useContextSystem(props, "ToolsPanel");
-  const isResettingRef = useRef(false);
-  const wasResetting = isResettingRef.current;
+  const [isResetting, setIsResetting] = useState(false);
   useEffect(() => {
-    if (wasResetting) {
-      isResettingRef.current = false;
+    if (isResetting) {
+      setIsResetting(false);
     }
-  }, [wasResetting]);
+  }, [isResetting]);
   const [{
     panelItems,
-    menuItems
+    menuItemOrder,
+    menuItemValues
   }, panelDispatch] = useReducer(panelReducer, void 0, emptyState);
-  const [resetAllFilters, dispatchResetAllFilters] = useReducer(resetAllFiltersReducer, []);
+  const [externalResetAllFilters, dispatchResetAllFilters] = useReducer(resetAllFiltersReducer, []);
   const registerPanelItem = useCallback((item) => {
     panelDispatch({
       type: "REGISTER_PANEL",
       item
     });
   }, []);
-  const deregisterPanelItem = useCallback((label) => {
+  const deregisterPanelItem = useCallback((label, item) => {
     panelDispatch({
       type: "UNREGISTER_PANEL",
-      label
+      label,
+      item
     });
   }, []);
   const registerResetAllFilter = useCallback((filter) => {
@@ -295,27 +265,53 @@ function useToolsPanel(props) {
       filter
     });
   }, []);
-  const flagItemCustomization = useCallback((value, label, group = "default") => {
+  const flagItemCustomization = useCallback((value, label) => {
     panelDispatch({
       type: "UPDATE_VALUE",
-      group,
       label,
       value
     });
   }, []);
+  const menuItems = useMemo(() => {
+    const result = {
+      default: {},
+      optional: {}
+    };
+    const byLabel = new Map(panelItems.map((item) => [item.label, item]));
+    menuItemOrder.forEach((label) => {
+      const item = byLabel.get(label);
+      if (!item) {
+        return;
+      }
+      result[getMenuGroup(item)][label] = menuItemValues[label] ?? getSeedValue(item);
+    });
+    return result;
+  }, [panelItems, menuItemOrder, menuItemValues]);
   const areAllOptionalControlsHidden = useMemo(() => {
     return isMenuItemTypeEmpty(menuItems.default) && !isMenuItemTypeEmpty(menuItems.optional) && Object.values(menuItems.optional).every((isSelected) => !isSelected);
   }, [menuItems]);
   const classes = clsx(style_module_default["tools-panel"], hasInnerWrapper && style_module_default["tools-panel-with-inner-wrapper"], areAllOptionalControlsHidden && style_module_default["tools-panel-hidden-inner-wrapper"], className);
   const toggleItem = useCallback((label) => {
+    const currentItem = panelItems.find((item) => item.label === label);
+    if (!currentItem) {
+      return;
+    }
     panelDispatch({
       type: "TOGGLE_VALUE",
       label
     });
-  }, []);
+    if (currentItem.isShownByDefault) {
+      return;
+    }
+    currentItem.onShownChange?.(!menuItems.optional[label]);
+  }, [menuItems, panelItems]);
+  const resetAllFilters = useMemo(() => {
+    const itemFilters = panelItems.map((item) => item.resetAllFilter).filter((filter) => !!filter);
+    return [...itemFilters, ...externalResetAllFilters];
+  }, [panelItems, externalResetAllFilters]);
   const resetAllItems = useCallback(() => {
     if (typeof resetAll === "function") {
-      isResettingRef.current = true;
+      setIsResetting(true);
       resetAll(resetAllFilters);
     }
     panelDispatch({
@@ -337,7 +333,7 @@ function useToolsPanel(props) {
     firstDisplayedItem,
     flagItemCustomization,
     hasMenuItems,
-    isResetting: isResettingRef.current,
+    isResetting,
     lastDisplayedItem,
     menuItems,
     panelId,
@@ -346,7 +342,7 @@ function useToolsPanel(props) {
     shouldRenderPlaceholderItems,
     __experimentalFirstVisibleItemClass,
     __experimentalLastVisibleItemClass
-  }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, hasMenuItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
+  }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, isResetting, lastDisplayedItem, menuItems, panelId, hasMenuItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]);
   return {
     ...otherProps,
     headingLevel,