npm - @wordpress/components - Versions diffs - 32.2.1-next.v.202602111440.0 → 32.2.1 - Mend

@wordpress/components 32.2.1-next.v.202602111440.0 → 32.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (588) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,10 +2,47 @@
 ## Unreleased
-## 32.2.0-next.0 (2026-02-11)
+### Bug Fixes
+-   `ControlWithError`: Connect validation error messages to controls via `aria-describedby` ([#76742](https://github.com/WordPress/gutenberg/pull/76742)).
+-   `Autocomplete`: Fix value comparison to avoid resetting block inserter in RTC ([#76980](https://github.com/WordPress/gutenberg/pull/76980)).
+### Enhancements
+-   `Sandbox`: Add `allowSameOrigin` prop to opt in to `allow-same-origin` on the iframe sandbox. The default is now `false`, removing same-origin access for user-controlled content like the Custom HTML block ([#77212](https://github.com/WordPress/gutenberg/pull/77212)).
+## 32.4.0 (2026-03-18)
+### Bug Fixes
+-   Revert `word-break: break-word` addition ([#76230](https://github.com/WordPress/gutenberg/pull/76230)).
+-   `VisuallyHidden`: Add `word-break: normal` to prevent text wrapping issues in screen reader content ([#75539](https://github.com/WordPress/gutenberg/pull/75539)).
+-   `DateTimePicker`: Fix error that occurs when selecting a day outside the valid days for a month (e.g. February 30) ([#76400](https://github.com/WordPress/gutenberg/pull/76400)).
+-   `Button`: fix focus styles in High Contrast (forced colors) mode ([#76719](https://github.com/WordPress/gutenberg/pull/76719)).
+### Enhancements
+-   `DateCalendar`, `DateRangeCalendar`: Add `showOutsideDays` and `fixedWeeks` props and style outside-month days ([#76199](https://github.com/WordPress/gutenberg/pull/76199)).
+### Internal
+-   Remove `Avatar` and `AvatarGroup` from private APIs, moved to `@wordpress/editor` ([#75652](https://github.com/WordPress/gutenberg/pull/75652)).
+-   `SnackbarList`: Fix scaling distortion when a snackbar's content is updated in place via a shared notice ID ([#75709](https://github.com/WordPress/gutenberg/pull/75709)).
+-   `ToggleGroupControl`: Fix hover styles on disabled items ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).
+-   `FormTokenField`: Fixed incorrect height of input field when rendered on pages using WordPress 7.0 form styles ([#75880](https://github.com/WordPress/gutenberg/pull/75880)).
+-   `SelectControl`: Fixed misalignment of option label on some variants when rendered on pages using WordPress 7.0 form styles ([#75880](https://github.com/WordPress/gutenberg/pull/75880)).
+### Enhancements
+-   `ToggleGroupControl`: Make unselected item color consistent across all variants ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).
+## 32.2.0 (2026-02-18)
 ### Bug Fixes
+-   `Tabs`: Set explicit `font-family` on tab buttons to prevent inheriting unintended fonts ([#75537](https://github.com/WordPress/gutenberg/pull/75537)).
+-   `ExternalLink`: Add `wp-exclude-emoji` class to prevent Twemoji from replacing the arrow icon ([#75538](https://github.com/WordPress/gutenberg/pull/75538)).
 -   `TimePicker`: Fix date parsing for years below 1000 by implementing ISO 8601 compliant year formatting with zero-padding ([#75343](https://github.com/WordPress/gutenberg/pull/75343)).
 -   `Text`: Remove `text-wrap: balance` fallback. Only `text-wrap: pretty` is now used ([#75089](https://github.com/WordPress/gutenberg/pull/75089)).
 -   `RangeControl`: support forced-colors mode ([#75165](https://github.com/WordPress/gutenberg/pull/75165)).
@@ -16,12 +53,20 @@
 ### Enhancements
 -   Improve visual emphasis of the selected item in the ToggleGroupControl component ([#75138](https://github.com/WordPress/gutenberg/pull/75138)).
+-   `DateCalendar`, `DateRangeCalendar`: use lighter gray for disabled dates ([#75683](https://github.com/WordPress/gutenberg/pull/75683)).
 ### Internal
+-   Add `Avatar` and `AvatarGroup` components as private APIs ([#75595](https://github.com/WordPress/gutenberg/pull/75595)).
+-   Remove `Picker` from private APIs ([#75394](https://github.com/WordPress/gutenberg/pull/75394)).
 -   Expose `useDrag` from `@use-gesture/react` package via private API's ([#66735](https://github.com/WordPress/gutenberg/pull/66735)).
 -   `Disabled`, `Modal`, `Popover`, `Tooltip`: Move context code to separate files to help docgen prop extraction ([#75316](https://github.com/WordPress/gutenberg/pull/75316)).
 -   Update Emotion dependencies to ensure compatibility with React 19 ([#75324](https://github.com/WordPress/gutenberg/pull/75324)).
+-   Update Testing Library packages used in unit tests ([#75340](https://github.com/WordPress/gutenberg/pull/75340)).
+-   Clean up type declarations using the `React` namespace ([#75499](https://github.com/WordPress/gutenberg/pull/75499) and ([#75508](https://github.com/WordPress/gutenberg/pull/75508))).
+-   Always specify initial values for `useRef` calls ([#75513](https://github.com/WordPress/gutenberg/pull/75513)).
+-   Update `RefObject` type usage for React 19 compatibility ([#75567](https://github.com/WordPress/gutenberg/pull/75567)).
+-   Upgraded `@ariakit/react` (v0.4.21) and `@ariakit/test` (v0.4.13) ([#75620](https://github.com/WordPress/gutenberg/pull/75620)).
 ## 32.1.0 (2026-01-29)

package/CLAUDE.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ @AGENTS.md

package/build/alignment-matrix-control/cell.cjs CHANGED Viewed

@@ -40,9 +40,9 @@ var import_visually_hidden = require("../visually-hidden/index.cjs");
 var import_utils = require("./utils.cjs");
 // packages/components/src/alignment-matrix-control/style.module.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='4c2e860238']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "0584b48070");
+  style.setAttribute("data-wp-hash", "4c2e860238");
   style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
   document.head.appendChild(style);
 }

package/build/alignment-matrix-control/cell.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/cell.tsx", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='4c2e860238']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4c2e860238\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADWhL,yBAA2C;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,MAAM,6BAAgB,KAAK;AAAA,IAC3B,UAAuB,uCAAAC,MAAM,2BAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,uCAAAF,KAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,eAAW,YAAAG,SAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,uCAAAH,KAAK,uCAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": ["_jsx", "Tooltip", "_jsxs", "clsx"]
 }

package/build/alignment-matrix-control/index.cjs CHANGED Viewed

@@ -44,9 +44,9 @@ var import_icon = __toESM(require("./icon.cjs"));
 var import_utils = require("./utils.cjs");
 // packages/components/src/alignment-matrix-control/style.module.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='4c2e860238']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "0584b48070");
+  style.setAttribute("data-wp-hash", "4c2e860238");
   style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
   document.head.appendChild(style);
 }

package/build/alignment-matrix-control/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/index.tsx", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='4c2e860238']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4c2e860238\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,qBAA8B;AAC9B,qBAA4B;AAK5B,kBAAiB;AACjB,uBAA0B;AAC1B,kBAAuC;AACvC,mBAA8C;;;AClB9C,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADchL,yBAA4B;AAC5B,SAAS,kCAAkC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,YAAQ,gBAAG,0BAA0B;AAAA,EACrC,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,QAAM,aAAS,8BAAc,mCAAmC,4BAA4B,EAAE;AAC9F,QAAM,kBAAc,4BAAY,kBAAgB;AAC9C,UAAM,gBAAY,2BAAa,QAAQ,YAAY;AACnD,QAAI,WAAW;AACb,iBAAW,SAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AACrB,QAAM,cAAU,YAAAA,SAAK,sCAAsC,qBAAO,gBAAgB,GAAG,SAAS;AAC9F,SAAoB,uCAAAC,KAAK,4BAAW;AAAA,IAClC,qBAAiB,wBAAU,QAAQ,YAAY;AAAA,IAC/C,cAAU,wBAAU,QAAQ,KAAK;AAAA,IACjC;AAAA,IACA,SAAK,mBAAM;AAAA,IACX,QAAqB,uCAAAA,KAAK,OAAO;AAAA,MAC/B,GAAG;AAAA,MACH,WAAW;AAAA,MACX,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,IACD,UAAU,kBAAK,IAAI,CAAC,OAAO,UAAuB,uCAAAA,KAAK,2BAAU,KAAK;AAAA,MACpE,QAAqB,uCAAAA,KAAK,OAAO;AAAA,QAC/B,WAAW,qBAAO,UAAU;AAAA,QAC5B,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,MAAM,IAAI,UAAqB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,QAClD,QAAI,wBAAU,QAAQ,IAAI;AAAA,QAC1B,OAAO;AAAA,MACT,GAAG,IAAI,CAAC;AAAA,IACV,GAAG,KAAK,CAAC;AAAA,EACX,CAAC;AACH;AAqBO,IAAM,yBAAyB,OAAO,OAAO,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrF,MAAM,OAAO,OAAO,YAAAC,SAA4B;AAAA,IAC9C,aAAa;AAAA,EACf,CAAC;AACH,CAAC;AACD,IAAO,mCAAQ;",
   "names": ["clsx", "_jsx", "Cell", "AlignmentMatrixControlIcon"]
 }

package/build/angle-picker-control/angle-circle.cjs CHANGED Viewed

@@ -38,9 +38,9 @@ var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
 // packages/components/src/angle-picker-control/style.module.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='a61a1d6ad7']")) {
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='f35cc94692']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "a61a1d6ad7");
+  style.setAttribute("data-wp-hash", "f35cc94692");
   style.appendChild(document.createTextNode("._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}"));
   document.head.appendChild(style);
 }
@@ -55,8 +55,8 @@ function AngleCircle({
   ...props
 }) {
   const angleCircleRef = (0, import_element.useRef)(null);
-  const angleCircleCenterRef = (0, import_element.useRef)();
-  const previousCursorValueRef = (0, import_element.useRef)();
+  const angleCircleCenterRef = (0, import_element.useRef)(void 0);
+  const previousCursorValueRef = (0, import_element.useRef)(void 0);
   const setAngleCircleCenter = () => {
     if (angleCircleRef.current === null) {
       return;

package/build/angle-picker-control/angle-circle.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/angle-picker-control/angle-circle.tsx", "../../src/angle-picker-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef();\n  const previousCursorValueRef = useRef();\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='a61a1d6ad7']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a61a1d6ad7\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef(undefined);\n  const previousCursorValueRef = useRef(undefined);\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='f35cc94692']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f35cc94692\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
+  "mappings": "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",
   "names": ["useDragging", "_jsx", "clsx"]
 }

package/build/autocomplete/index.cjs CHANGED Viewed

@@ -32,7 +32,8 @@ var autocomplete_exports = {};
 __export(autocomplete_exports, {
   default: () => Autocomplete,
   useAutocomplete: () => useAutocomplete,
-  useAutocompleteProps: () => useAutocompleteProps
+  useAutocompleteProps: () => useAutocompleteProps,
+  useLastDifferentValue: () => useLastDifferentValue
 });
 module.exports = __toCommonJS(autocomplete_exports);
 var import_remove_accents = __toESM(require("remove-accents"));
@@ -255,17 +256,23 @@ function useAutocomplete({
     })
   };
 }
+function recordValuesMatch(a, b) {
+  return a.text === b.text && a.start === b.start && a.end === b.end;
+}
 function useLastDifferentValue(value) {
-  const history = (0, import_element.useRef)(/* @__PURE__ */ new Set());
-  history.current.add(value);
-  if (history.current.size > 2) {
-    history.current.delete(Array.from(history.current)[0]);
+  const history = (0, import_element.useRef)([]);
+  const lastEntry = history.current[history.current.length - 1];
+  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {
+    history.current.push(value);
+  }
+  if (history.current.length > 2) {
+    history.current.shift();
   }
-  return Array.from(history.current)[0];
+  return history.current[0];
 }
 function useAutocompleteProps(options) {
   const ref = (0, import_element.useRef)(null);
-  const onKeyDownRef = (0, import_element.useRef)();
+  const onKeyDownRef = (0, import_element.useRef)(void 0);
   const {
     record
   } = options;
@@ -319,6 +326,7 @@ function Autocomplete({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useAutocomplete,
-  useAutocompleteProps
+  useAutocompleteProps,
+  useLastDifferentValue
 });
 //# sourceMappingURL=index.cjs.map

package/build/autocomplete/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/autocomplete/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useState, useRef, useMemo } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [filteredOptions, setFilteredOptions] = useState(EMPTY_FILTERED_OPTIONS);\n  const [filterValue, setFilterValue] = useState('');\n  const [autocompleter, setAutocompleter] = useState(null);\n  const [AutocompleterUI, setAutocompleterUI] = useState(null);\n  const backspacingRef = useRef(false);\n  function insertCompletion(replacement) {\n    if (autocompleter === null) {\n      return;\n    }\n    const end = record.start;\n    const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n    const toInsert = create({\n      html: renderToString(replacement)\n    });\n    onChange(insert(record, toInsert, start, end));\n  }\n  function select(option) {\n    const {\n      getOptionCompletion\n    } = autocompleter || {};\n    if (option.isDisabled) {\n      return;\n    }\n    if (getOptionCompletion) {\n      const completion = getOptionCompletion(option.value, filterValue);\n      const isCompletionObject = obj => {\n        return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined;\n      };\n      const completionObject = isCompletionObject(completion) ? completion : {\n        action: 'insert-at-caret',\n        value: completion\n      };\n      if ('replace' === completionObject.action) {\n        onReplace([completionObject.value]);\n        // When replacing, the component will unmount, so don't reset\n        // state (below) on an unmounted component.\n        return;\n      } else if ('insert-at-caret' === completionObject.action) {\n        insertCompletion(completionObject.value);\n      }\n    }\n\n    // Reset autocomplete state after insertion rather than before\n    // so insertion events don't cause the completion menu to redisplay.\n    reset();\n\n    // Make sure that the content remains focused after making a selection\n    // and that the text cursor position is not lost.\n    contentRef.current?.focus();\n  }\n  function reset() {\n    setSelectedIndex(0);\n    setFilteredOptions(EMPTY_FILTERED_OPTIONS);\n    setFilterValue('');\n    setAutocompleter(null);\n    setAutocompleterUI(null);\n  }\n\n  /**\n   * Load options for an autocompleter.\n   *\n   * @param {Array} options\n   */\n  function onChangeOptions(options) {\n    setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);\n    setFilteredOptions(options);\n  }\n  function handleKeyDown(event) {\n    backspacingRef.current = event.key === 'Backspace';\n    if (!autocompleter) {\n      return;\n    }\n    if (filteredOptions.length === 0) {\n      return;\n    }\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n        {\n          const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;\n          setSelectedIndex(newIndex);\n          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'ArrowDown':\n        {\n          const newIndex = (selectedIndex + 1) % filteredOptions.length;\n          setSelectedIndex(newIndex);\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        setAutocompleter(null);\n        setAutocompleterUI(null);\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        reset();\n        return;\n      default:\n        return;\n    }\n\n    // Any handled key should prevent original behavior. This relies on\n    // the early return in the default case.\n    event.preventDefault();\n  }\n\n  // textContent is a primitive (string), memoizing is not strictly necessary\n  // but this is a preemptive performance improvement, since the autocompleter\n  // is a potential bottleneck for the editor type metric.\n  const textContent = useMemo(() => {\n    if (isCollapsed(record)) {\n      return getTextContent(slice(record, 0));\n    }\n    return '';\n  }, [record]);\n  useEffect(() => {\n    if (!textContent) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n\n    // Find the completer with the highest triggerPrefix index in the\n    // textContent.\n    const completer = completers.reduce((lastTrigger, currentCompleter) => {\n      const triggerIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n      const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1;\n      return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger;\n    }, null);\n    if (!completer) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const {\n      allowContext,\n      triggerPrefix\n    } = completer;\n    const triggerIndex = textContent.lastIndexOf(triggerPrefix);\n    const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n    const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n    // This is a final barrier to prevent the effect from completing with\n    // an extremely long string, which causes the editor to slow-down\n    // significantly. This could happen, for example, if `matchingWhileBackspacing`\n    // is true and one of the \"words\" end up being too long. If that's the case,\n    // it will be caught by this guard.\n    if (tooDistantFromTrigger) {\n      return;\n    }\n    const mismatch = filteredOptions.length === 0;\n    const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n    // We need to allow the effect to run when not backspacing and if there\n    // was a mismatch. i.e when typing a trigger + the match string or when\n    // clicking in an existing trigger word on the page. We do that if we\n    // detect that we have one word from trigger in the current textual context.\n    //\n    // Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n    // allow the effect to run. It will run until there's a mismatch.\n    const hasOneTriggerWord = wordsFromTrigger.length === 1;\n    // This is used to allow the effect to run when backspacing and if\n    // \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n    // word\" any word up to the limit of 3 from the trigger character.\n    // Anything beyond that is ignored if there's a mismatch. This allows\n    // us to \"escape\" a mismatch when backspacing, but still imposing some\n    // sane limits.\n    //\n    // Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n    // if the user presses backspace here, it will show the completion popup again.\n    const matchingWhileBackspacing = backspacingRef.current && wordsFromTrigger.length <= 3;\n    if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const textAfterSelection = getTextContent(slice(record, undefined, getTextContent(record).length));\n    if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    if (/^\\s/.test(textWithoutTrigger) || /\\s\\s+$/.test(textWithoutTrigger)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    if (!/[\\u0000-\\uFFFF]*$/.test(textWithoutTrigger)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const safeTrigger = escapeRegExp(completer.triggerPrefix);\n    const text = removeAccents(textContent);\n    const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\\u0000-\\uFFFF]*)$`));\n    const query = match && match[1];\n    setAutocompleter(completer);\n    setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);\n    setFilterValue(query === null ? '' : query);\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [textContent]);\n  const {\n    key: selectedKey = ''\n  } = filteredOptions[selectedIndex] || {};\n  const {\n    className\n  } = autocompleter || {};\n  const isExpanded = !!autocompleter && filteredOptions.length > 0;\n  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n  const hasSelection = record.start !== undefined;\n  const showPopover = !!textContent && hasSelection && !!AutocompleterUI;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      value: record,\n      contentRef: contentRef,\n      reset: reset\n    })\n  };\n}\nfunction useLastDifferentValue(value) {\n  const history = useRef(new Set());\n  history.current.add(value);\n\n  // Keep the history size to 2.\n  if (history.current.size > 2) {\n    history.current.delete(Array.from(history.current)[0]);\n  }\n  return Array.from(history.current)[0];\n}\nexport function useAutocompleteProps(options) {\n  const ref = useRef(null);\n  const onKeyDownRef = useRef();\n  const {\n    record\n  } = options;\n  const previousRecord = useLastDifferentValue(record);\n  const {\n    popover,\n    listBoxId,\n    activeId,\n    onKeyDown\n  } = useAutocomplete({\n    ...options,\n    contentRef: ref\n  });\n  onKeyDownRef.current = onKeyDown;\n  const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n    function _onKeyDown(event) {\n      onKeyDownRef.current?.(event);\n    }\n    element.addEventListener('keydown', _onKeyDown);\n    return () => {\n      element.removeEventListener('keydown', _onKeyDown);\n    };\n  }, [])]);\n\n  // We only want to show the popover if the user has typed something.\n  const didUserInput = record.text !== previousRecord?.text;\n  if (!didUserInput) {\n    return {\n      ref: mergedRefs\n    };\n  }\n  return {\n    ref: mergedRefs,\n    children: popover,\n    'aria-autocomplete': listBoxId ? 'list' : undefined,\n    'aria-owns': listBoxId,\n    'aria-activedescendant': activeId\n  };\n}\nexport default function Autocomplete({\n  children,\n  isSelected,\n  ...options\n}) {\n  const {\n    popover,\n    ...props\n  } = useAutocomplete(options);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children(props), isSelected && popover]\n  });\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useState, useRef, useMemo } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\nimport { escapeRegExp } from '../utils/strings';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [filteredOptions, setFilteredOptions] = useState(EMPTY_FILTERED_OPTIONS);\n  const [filterValue, setFilterValue] = useState('');\n  const [autocompleter, setAutocompleter] = useState(null);\n  const [AutocompleterUI, setAutocompleterUI] = useState(null);\n  const backspacingRef = useRef(false);\n  function insertCompletion(replacement) {\n    if (autocompleter === null) {\n      return;\n    }\n    const end = record.start;\n    const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n    const toInsert = create({\n      html: renderToString(replacement)\n    });\n    onChange(insert(record, toInsert, start, end));\n  }\n  function select(option) {\n    const {\n      getOptionCompletion\n    } = autocompleter || {};\n    if (option.isDisabled) {\n      return;\n    }\n    if (getOptionCompletion) {\n      const completion = getOptionCompletion(option.value, filterValue);\n      const isCompletionObject = obj => {\n        return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined;\n      };\n      const completionObject = isCompletionObject(completion) ? completion : {\n        action: 'insert-at-caret',\n        value: completion\n      };\n      if ('replace' === completionObject.action) {\n        onReplace([completionObject.value]);\n        // When replacing, the component will unmount, so don't reset\n        // state (below) on an unmounted component.\n        return;\n      } else if ('insert-at-caret' === completionObject.action) {\n        insertCompletion(completionObject.value);\n      }\n    }\n\n    // Reset autocomplete state after insertion rather than before\n    // so insertion events don't cause the completion menu to redisplay.\n    reset();\n\n    // Make sure that the content remains focused after making a selection\n    // and that the text cursor position is not lost.\n    contentRef.current?.focus();\n  }\n  function reset() {\n    setSelectedIndex(0);\n    setFilteredOptions(EMPTY_FILTERED_OPTIONS);\n    setFilterValue('');\n    setAutocompleter(null);\n    setAutocompleterUI(null);\n  }\n\n  /**\n   * Load options for an autocompleter.\n   *\n   * @param {Array} options\n   */\n  function onChangeOptions(options) {\n    setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0);\n    setFilteredOptions(options);\n  }\n  function handleKeyDown(event) {\n    backspacingRef.current = event.key === 'Backspace';\n    if (!autocompleter) {\n      return;\n    }\n    if (filteredOptions.length === 0) {\n      return;\n    }\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n        {\n          const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1;\n          setSelectedIndex(newIndex);\n          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'ArrowDown':\n        {\n          const newIndex = (selectedIndex + 1) % filteredOptions.length;\n          setSelectedIndex(newIndex);\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        setAutocompleter(null);\n        setAutocompleterUI(null);\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        reset();\n        return;\n      default:\n        return;\n    }\n\n    // Any handled key should prevent original behavior. This relies on\n    // the early return in the default case.\n    event.preventDefault();\n  }\n\n  // textContent is a primitive (string), memoizing is not strictly necessary\n  // but this is a preemptive performance improvement, since the autocompleter\n  // is a potential bottleneck for the editor type metric.\n  const textContent = useMemo(() => {\n    if (isCollapsed(record)) {\n      return getTextContent(slice(record, 0));\n    }\n    return '';\n  }, [record]);\n  useEffect(() => {\n    if (!textContent) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n\n    // Find the completer with the highest triggerPrefix index in the\n    // textContent.\n    const completer = completers.reduce((lastTrigger, currentCompleter) => {\n      const triggerIndex = textContent.lastIndexOf(currentCompleter.triggerPrefix);\n      const lastTriggerIndex = lastTrigger !== null ? textContent.lastIndexOf(lastTrigger.triggerPrefix) : -1;\n      return triggerIndex > lastTriggerIndex ? currentCompleter : lastTrigger;\n    }, null);\n    if (!completer) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const {\n      allowContext,\n      triggerPrefix\n    } = completer;\n    const triggerIndex = textContent.lastIndexOf(triggerPrefix);\n    const textWithoutTrigger = textContent.slice(triggerIndex + triggerPrefix.length);\n    const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n    // This is a final barrier to prevent the effect from completing with\n    // an extremely long string, which causes the editor to slow-down\n    // significantly. This could happen, for example, if `matchingWhileBackspacing`\n    // is true and one of the \"words\" end up being too long. If that's the case,\n    // it will be caught by this guard.\n    if (tooDistantFromTrigger) {\n      return;\n    }\n    const mismatch = filteredOptions.length === 0;\n    const wordsFromTrigger = textWithoutTrigger.split(/\\s/);\n    // We need to allow the effect to run when not backspacing and if there\n    // was a mismatch. i.e when typing a trigger + the match string or when\n    // clicking in an existing trigger word on the page. We do that if we\n    // detect that we have one word from trigger in the current textual context.\n    //\n    // Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n    // allow the effect to run. It will run until there's a mismatch.\n    const hasOneTriggerWord = wordsFromTrigger.length === 1;\n    // This is used to allow the effect to run when backspacing and if\n    // \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n    // word\" any word up to the limit of 3 from the trigger character.\n    // Anything beyond that is ignored if there's a mismatch. This allows\n    // us to \"escape\" a mismatch when backspacing, but still imposing some\n    // sane limits.\n    //\n    // Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n    // if the user presses backspace here, it will show the completion popup again.\n    const matchingWhileBackspacing = backspacingRef.current && wordsFromTrigger.length <= 3;\n    if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const textAfterSelection = getTextContent(slice(record, undefined, getTextContent(record).length));\n    if (allowContext && !allowContext(textContent.slice(0, triggerIndex), textAfterSelection)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    if (/^\\s/.test(textWithoutTrigger) || /\\s\\s+$/.test(textWithoutTrigger)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    if (!/[\\u0000-\\uFFFF]*$/.test(textWithoutTrigger)) {\n      if (autocompleter) {\n        reset();\n      }\n      return;\n    }\n    const safeTrigger = escapeRegExp(completer.triggerPrefix);\n    const text = removeAccents(textContent);\n    const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\\u0000-\\uFFFF]*)$`));\n    const query = match && match[1];\n    setAutocompleter(completer);\n    setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI);\n    setFilterValue(query === null ? '' : query);\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [textContent]);\n  const {\n    key: selectedKey = ''\n  } = filteredOptions[selectedIndex] || {};\n  const {\n    className\n  } = autocompleter || {};\n  const isExpanded = !!autocompleter && filteredOptions.length > 0;\n  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n  const hasSelection = record.start !== undefined;\n  const showPopover = !!textContent && hasSelection && !!AutocompleterUI;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      value: record,\n      contentRef: contentRef,\n      reset: reset\n    })\n  };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n  return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n  const history = useRef([]);\n  const lastEntry = history.current[history.current.length - 1];\n\n  // Only add to history if the value is meaningfully different from\n  // the most recent entry (analogous to Set.add being a no-op for\n  // duplicate references in the original implementation).\n  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n    history.current.push(value);\n  }\n\n  // Keep the history size to 2.\n  if (history.current.length > 2) {\n    history.current.shift();\n  }\n  return history.current[0];\n}\nexport function useAutocompleteProps(options) {\n  const ref = useRef(null);\n  const onKeyDownRef = useRef(undefined);\n  const {\n    record\n  } = options;\n  const previousRecord = useLastDifferentValue(record);\n  const {\n    popover,\n    listBoxId,\n    activeId,\n    onKeyDown\n  } = useAutocomplete({\n    ...options,\n    contentRef: ref\n  });\n  onKeyDownRef.current = onKeyDown;\n  const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n    function _onKeyDown(event) {\n      onKeyDownRef.current?.(event);\n    }\n    element.addEventListener('keydown', _onKeyDown);\n    return () => {\n      element.removeEventListener('keydown', _onKeyDown);\n    };\n  }, [])]);\n\n  // We only want to show the popover if the user has typed something.\n  const didUserInput = record.text !== previousRecord?.text;\n  if (!didUserInput) {\n    return {\n      ref: mergedRefs\n    };\n  }\n  return {\n    ref: mergedRefs,\n    children: popover,\n    'aria-autocomplete': listBoxId ? 'list' : undefined,\n    'aria-owns': listBoxId,\n    'aria-activedescendant': activeId\n  };\n}\nexport default function Autocomplete({\n  children,\n  isSelected,\n  ...options\n}) {\n  const {\n    popover,\n    ...props\n  } = useAutocomplete(options);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children(props), isSelected && popover]\n  });\n}"],
+  "mappings": "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",
   "names": ["getNodeText", "triggerIndex", "removeAccents", "_jsx", "_jsxs", "_Fragment"]
 }

package/build/clipboard-button/index.cjs CHANGED Viewed

@@ -52,7 +52,7 @@ function ClipboardButton({
     since: "5.8",
     alternative: "wp.compose.useCopyToClipboard"
   });
-  const timeoutIdRef = (0, import_element.useRef)();
+  const timeoutIdRef = (0, import_element.useRef)(void 0);
   const ref = (0, import_compose.useCopyToClipboard)(text, () => {
     onCopy();
     if (timeoutIdRef.current) {

package/build/clipboard-button/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/clipboard-button/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef();\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAkC;AAClC,qBAAmC;AACnC,wBAAuB;AAKvB,oBAAmB;AACnB,yBAA4B;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,wBAAAA,SAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,mBAAe,uBAAO;AAC5B,QAAM,UAAM,mCAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,gCAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,cAAU,YAAAC,SAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,uCAAAC,KAAK,cAAAC,SAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst TIMEOUT = 4000;\nexport default function ClipboardButton({\n  className,\n  children,\n  onCopy,\n  onFinishCopy,\n  text,\n  ...buttonProps\n}) {\n  deprecated('wp.components.ClipboardButton', {\n    since: '5.8',\n    alternative: 'wp.compose.useCopyToClipboard'\n  });\n  const timeoutIdRef = useRef(undefined);\n  const ref = useCopyToClipboard(text, () => {\n    onCopy();\n    if (timeoutIdRef.current) {\n      clearTimeout(timeoutIdRef.current);\n    }\n    if (onFinishCopy) {\n      timeoutIdRef.current = setTimeout(() => onFinishCopy(), TIMEOUT);\n    }\n  });\n  useEffect(() => {\n    return () => {\n      if (timeoutIdRef.current) {\n        clearTimeout(timeoutIdRef.current);\n      }\n    };\n  }, []);\n  const classes = clsx('components-clipboard-button', className);\n\n  // Workaround for inconsistent behavior in Safari, where <textarea> is not\n  // the document.activeElement at the moment when the copy event fires.\n  // This causes documentHasSelection() in the copy-handler component to\n  // mistakenly override the ClipboardButton, and copy a serialized string\n  // of the current block instead.\n  const focusOnCopyEventTarget = event => {\n    // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n    event.target.focus();\n  };\n  return (\n    /*#__PURE__*/\n    // Disable reasons: the parent component takes care of the __next40pxDefaultSize prop.\n    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n    _jsx(Button, {\n      ...buttonProps,\n      className: classes,\n      ref: ref,\n      onCopy: focusOnCopyEventTarget,\n      children: children\n    })\n  );\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAkC;AAClC,qBAAmC;AACnC,wBAAuB;AAKvB,oBAAmB;AACnB,yBAA4B;AAC5B,IAAM,UAAU;AACD,SAAR,gBAAiC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,wBAAAA,SAAW,iCAAiC;AAAA,IAC1C,OAAO;AAAA,IACP,aAAa;AAAA,EACf,CAAC;AACD,QAAM,mBAAe,uBAAO,MAAS;AACrC,QAAM,UAAM,mCAAmB,MAAM,MAAM;AACzC,WAAO;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,QAAI,cAAc;AAChB,mBAAa,UAAU,WAAW,MAAM,aAAa,GAAG,OAAO;AAAA,IACjE;AAAA,EACF,CAAC;AACD,gCAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,cAAU,YAAAC,SAAK,+BAA+B,SAAS;AAO7D,QAAM,yBAAyB,WAAS;AAEtC,UAAM,OAAO,MAAM;AAAA,EACrB;AACA;AAAA;AAAA;AAAA,IAIE,uCAAAC,KAAK,cAAAC,SAAQ;AAAA,MACX,GAAG;AAAA,MACH,WAAW;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IACF,CAAC;AAAA;AAEL;",
   "names": ["deprecated", "clsx", "_jsx", "Button"]
 }

package/build/color-picker/color-copy-button.cjs CHANGED Viewed

@@ -46,7 +46,7 @@ var ColorCopyButton = (props) => {
     colorType
   } = props;
   const [copiedColor, setCopiedColor] = (0, import_element.useState)(null);
-  const copyTimerRef = (0, import_element.useRef)();
+  const copyTimerRef = (0, import_element.useRef)(void 0);
   const copyRef = (0, import_compose.useCopyToClipboard)(() => {
     switch (colorType) {
       case "hsl": {

package/build/color-picker/color-copy-button.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/color-copy-button.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef();\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA4C;AAC5C,mBAA4B;AAC5B,kBAAmB;AAKnB,oBAAuB;AACvB,qBAAoB;AACpB,yBAA4B;AACrB,IAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,QAAI,yBAAS,IAAI;AACnD,QAAM,mBAAe,uBAAO;AAC5B,QAAM,cAAU,mCAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,gCAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,eAAW,gBAAG,SAAS,QAAI,gBAAG,MAAM;AAClD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,uCAAAD,KAAK,sBAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,qBAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef(undefined);\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAmC;AACnC,qBAA4C;AAC5C,mBAA4B;AAC5B,kBAAmB;AAKnB,oBAAuB;AACvB,qBAAoB;AACpB,yBAA4B;AACrB,IAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,QAAI,yBAAS,IAAI;AACnD,QAAM,mBAAe,uBAAO,MAAS;AACrC,QAAM,cAAU,mCAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,gCAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,eAAW,gBAAG,SAAS,QAAI,gBAAG,MAAM;AAClD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,uCAAAD,KAAK,sBAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,qBAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": ["_jsx", "Tooltip"]
 }

package/build/confirm-dialog/component.cjs CHANGED Viewed

@@ -58,8 +58,8 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
   } = (0, import_context.useContextSystem)(props, "ConfirmDialog");
   const cx = (0, import_use_cx.useCx)();
   const wrapperClassName = cx(styles.wrapper);
-  const cancelButtonRef = (0, import_element.useRef)();
-  const confirmButtonRef = (0, import_element.useRef)();
+  const cancelButtonRef = (0, import_element.useRef)(null);
+  const confirmButtonRef = (0, import_element.useRef)(null);
   const [isOpen, setIsOpen] = (0, import_element.useState)();
   const [shouldSelfClose, setShouldSelfClose] = (0, import_element.useState)();
   (0, import_element.useEffect)(() => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/confirm-dialog/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const cx = useCx();\n  const wrapperClassName = cx(styles.wrapper);\n  const cancelButtonRef = useRef();\n  const confirmButtonRef = useRef();\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAyD;AAKzD,mBAAkB;AAClB,qBAAiD;AACjD,kBAAqB;AACrB,oBAAmB;AACnB,kBAAqB;AACrB,qBAAuB;AACvB,aAAwB;AACxB,oBAAsB;AACtB,yBAAkE;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,eAAe;AAC3C,QAAM,SAAK,qBAAM;AACjB,QAAM,mBAAmB,GAAU,cAAO;AAC1C,QAAM,sBAAkB,uBAAO;AAC/B,QAAM,uBAAmB,uBAAO;AAChC,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,gCAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,kBAAc,4BAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,kBAAc,4BAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,wBAAoB,gBAAG,QAAQ;AACnD,QAAM,eAAe,yBAAqB,gBAAG,IAAI;AACjD,SAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,UAAuB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,uCAAAH,KAAK,kBAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,uCAAAG,MAAM,kBAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,uCAAAH,KAAK,cAAAI,SAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,uCAAAJ,KAAK,cAAAI,SAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,oBAAgB,+BAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const cx = useCx();\n  const wrapperClassName = cx(styles.wrapper);\n  const cancelButtonRef = useRef(null);\n  const confirmButtonRef = useRef(null);\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAyD;AAKzD,mBAAkB;AAClB,qBAAiD;AACjD,kBAAqB;AACrB,oBAAmB;AACnB,kBAAqB;AACrB,qBAAuB;AACvB,aAAwB;AACxB,oBAAsB;AACtB,yBAAkE;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,eAAe;AAC3C,QAAM,SAAK,qBAAM;AACjB,QAAM,mBAAmB,GAAU,cAAO;AAC1C,QAAM,sBAAkB,uBAAO,IAAI;AACnC,QAAM,uBAAmB,uBAAO,IAAI;AACpC,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,gCAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,kBAAc,4BAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,kBAAc,4BAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,wBAAoB,gBAAG,QAAQ;AACnD,QAAM,eAAe,yBAAqB,gBAAG,IAAI;AACjD,SAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,UAAuB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,uCAAAH,KAAK,kBAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,uCAAAG,MAAM,kBAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,uCAAAH,KAAK,cAAAI,SAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,uCAAAJ,KAAK,cAAAI,SAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,oBAAgB,+BAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
   "names": ["_jsx", "_Fragment", "Modal", "_jsxs", "Button"]
 }

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

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

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

@@ -110,7 +110,7 @@ function ControlPoints({
   onStopControlPointChange,
   __experimentalIsRenderedInSidebar
 }) {
-  const controlPointMoveStateRef = (0, import_element.useRef)();
+  const controlPointMoveStateRef = (0, import_element.useRef)(void 0);
   const onMouseMove = (event) => {
     if (controlPointMoveStateRef.current === void 0 || gradientPickerDomRef.current === null) {
       return;
@@ -134,7 +134,7 @@ function ControlPoints({
       controlPointMoveStateRef.current.listenersActivated = false;
     }
   };
-  const cleanEventListenersRef = (0, import_element.useRef)();
+  const cleanEventListenersRef = (0, import_element.useRef)(void 0);
   cleanEventListenersRef.current = cleanEventListeners;
   (0, import_element.useEffect)(() => {
     return () => {