@wordpress/components 25.9.1 → 25.10.0

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 ## Unreleased
 
+## 25.10.0 (2023-10-18)
+
+### Enhancements
+
+-   `ProgressBar`: use text color to ensure enough contrast against background ([#55285](https://github.com/WordPress/gutenberg/pull/55285)).
+-   `Notice`: Remove margins from `Notice` component ([#54800](https://github.com/WordPress/gutenberg/pull/54800)).
+-   Allow using CSS level 4 viewport-relative units ([54415](https://github.com/WordPress/gutenberg/pull/54415))
+-   `ToolsPanel`: do not apply the `className` to prop to `ToolsPanelItem` components when rendered as placeholders ([#55207](https://github.com/WordPress/gutenberg/pull/55207)).
+-   `GradientPicker`: remove overflow styles and padding from `ColorPicker` popovers ([#55265](https://github.com/WordPress/gutenberg/pull/55265)).
+-   `Tabs`: Expose via private APIs ([#55327](https://github.com/WordPress/gutenberg/pull/55327)).
+-   `ColorPalette`/`ToggleGroupControl/ToggleGroupControlOptionBase`: add `type="button"` attribute to native `<button>`s ([#55125](https://github.com/WordPress/gutenberg/pull/55125)).
+
+### Bug Fix
+
+-   Render a "mouse event trap" when using a `ColorPicker` inside a `Popover` to prevent issues when rendering on top of `iframes` ([#55149](https://github.com/WordPress/gutenberg/pull/55149)).
+-   `Modal`: fix closing when contained iframe is focused ([#51602](https://github.com/WordPress/gutenberg/pull/51602)).
+
+### Internal
+
+-   `ConfirmDialog`: Migrate to TypeScript. ([#54954](https://github.com/WordPress/gutenberg/pull/54954)).
+
+### New Features
+
+-   `Toolbar`: add new `variant` prop for 'unstyled' option ([#55139](https://github.com/WordPress/gutenberg/pull/55139)).
+
 ## 25.9.0 (2023-10-05)
 
 ### Enhancements
@@ -13,6 +38,7 @@
 -   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `CustomSelectControl`, `TreeSelect`: Add opt-in prop for next 40px default size, superseding the `__next36pxDefaultSize` prop ([#53819](https://github.com/WordPress/gutenberg/pull/53819)).
 -   `Modal`: add a new `size` prop to support preset widths, including a `fill` option to eventually replace the `isFullScreen` prop ([#54471](https://github.com/WordPress/gutenberg/pull/54471)).
 -   Wrapped `TextareaControl` in a `forwardRef` call ([#54975](https://github.com/WordPress/gutenberg/pull/54975)).
+-   `Composite`/`AlignmentMatrixControl`/`CircularOptionPicker`: Starts the `Composite` migration from `reakit` to `ariakit` ([#54225](https://github.com/WordPress/gutenberg/pull/54225)).
 
 ### Bug Fix
 
@@ -23,6 +49,7 @@
 -   `Button`: Remove `aria-selected` CSS selector from styling 'active' buttons ([#54931](https://github.com/WordPress/gutenberg/pull/54931)).
 -   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
 -   `Button`: Remove hover styles when `aria-disabled` is set to `true` for the secondary variant. ([#54978](https://github.com/WordPress/gutenberg/pull/54978))
+-   `Button`: Revert toggled style selector to use a class instead of attributes ([#55065](https://github.com/WordPress/gutenberg/pull/55065)).
 
 ### Internal
 
@@ -34,6 +61,11 @@
 -   `SlotFill`: Migrate to TypeScript and Convert to Functional Component `<Slot bubblesVirtually />`. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
 -   `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)).
 -   Ensure `@types/` dependencies used by final type files are included in the main dependency field ([#50231](https://github.com/WordPress/gutenberg/pull/50231)).
+-   `Text`: Migrate to TypeScript. ([#54953](https://github.com/WordPress/gutenberg/pull/54953)).
+
+### Experimental
+
+-   Introduce `Tabs`, an experimental v2 of `TabPanel`: ([#53960](https://github.com/WordPress/gutenberg/pull/53960)).
 
 ## 25.8.0 (2023-09-20)
 

package/build/alignment-matrix-control/cell.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Cell;
 var _react = require("react");
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _visuallyHidden = require("../visually-hidden");
 var _utils = require("./utils");
@@ -20,6 +20,7 @@ var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-s
  */
 
 function Cell({
+  id,
   isActive = false,
   value,
   ...props
@@ -27,10 +28,12 @@ function Cell({
   const tooltipText = _utils.ALIGNMENT_LABEL[value];
   return (0, _react.createElement)(_tooltip.default, {
     text: tooltipText
-  }, (0, _react.createElement)(_composite.CompositeItem, {
-    as: _alignmentMatrixControlStyles.Cell,
-    role: "gridcell",
-    ...props
+  }, (0, _react.createElement)(_v.CompositeItem, {
+    id: id,
+    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Cell, {
+      ...props,
+      role: "gridcell"
+    })
   }, (0, _react.createElement)(_visuallyHidden.VisuallyHidden, null, value), (0, _react.createElement)(_alignmentMatrixControlStyles.Point, {
     isActive: isActive,
     role: "presentation"

package/build/alignment-matrix-control/cell.js.map

@@ -1 +1 @@
-{"version":3,"names":["_composite","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","Cell","isActive","value","props","tooltipText","ALIGNMENT_LABEL","_react","createElement","default","text","CompositeItem","as","CellView","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem as={ CellView } role=\"gridcell\" { ...props }>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASM,IAAIA,CAAE;EAC7BC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACZ,QAAA,CAAAa,OAAO;IAACC,IAAI,EAAGL;EAAa,GAC5B,IAAAE,MAAA,CAAAC,aAAA,EAACd,UAAA,CAAAiB,aAAa;IAACC,EAAE,EAAGC,kCAAU;IAACC,IAAI,EAAC,UAAU;IAAA,GAAMV;EAAK,GAIxD,IAAAG,MAAA,CAAAC,aAAA,EAACV,eAAA,CAAAiB,cAAc,QAAGZ,KAAuB,CAAC,EAC1C,IAAAI,MAAA,CAAAC,aAAA,EAACR,6BAAA,CAAAgB,KAAK;IAACd,QAAQ,EAAGA,QAAU;IAACY,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ"}
+{"version":3,"names":["_v","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","Cell","id","isActive","value","props","tooltipText","ALIGNMENT_LABEL","_react","createElement","default","text","CompositeItem","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<CompositeItem\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</CompositeItem>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,EAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASM,IAAIA,CAAE;EAC7BC,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,OACC,IAAAI,MAAA,CAAAC,aAAA,EAACb,QAAA,CAAAc,OAAO;IAACC,IAAI,EAAGL;EAAa,GAC5B,IAAAE,MAAA,CAAAC,aAAA,EAACf,EAAA,CAAAkB,aAAa;IACbV,EAAE,EAAGA,EAAI;IACTW,MAAM,EAAG,IAAAL,MAAA,CAAAC,aAAA,EAACT,6BAAA,CAAAC,IAAQ;MAAA,GAAMI,KAAK;MAAGS,IAAI,EAAC;IAAU,CAAE;EAAG,GAKpD,IAAAN,MAAA,CAAAC,aAAA,EAACX,eAAA,CAAAiB,cAAc,QAAGX,KAAuB,CAAC,EAC1C,IAAAI,MAAA,CAAAC,aAAA,EAACT,6BAAA,CAAAgB,KAAK;IAACb,QAAQ,EAAGA,QAAU;IAACW,IAAI,EAAC;EAAc,CAAE,CACpC,CACP,CAAC;AAEZ"}

package/build/alignment-matrix-control/index.js

@@ -10,9 +10,8 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
 var _cell = _interopRequireDefault(require("./cell"));
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
 var _icon = _interopRequireDefault(require("./icon"));
 var _utils = require("./utils");
@@ -28,12 +27,6 @@ var _utils = require("./utils");
  * Internal dependencies
  */
 
-const noop = () => {};
-function useBaseId(id) {
-  const instanceId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control');
-  return id || instanceId;
-}
-
 /**
  *
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
@@ -60,54 +53,45 @@ function AlignmentMatrixControl({
   label = (0, _i18n.__)('Alignment Matrix Control'),
   defaultValue = 'center center',
   value,
-  onChange = noop,
+  onChange,
   width = 92,
   ...props
 }) {
-  const [immutableDefaultValue] = (0, _element.useState)(value !== null && value !== void 0 ? value : defaultValue);
-  const baseId = useBaseId(id);
-  const initialCurrentId = (0, _utils.getItemId)(baseId, immutableDefaultValue);
-  const composite = (0, _composite.useCompositeState)({
-    baseId,
-    currentId: initialCurrentId,
+  const baseId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
+  const compositeStore = (0, _v.useCompositeStore)({
+    defaultActiveId: (0, _utils.getItemId)(baseId, defaultValue),
+    activeId: (0, _utils.getItemId)(baseId, value),
+    setActiveId: nextActiveId => {
+      const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
+      if (nextValue) onChange?.(nextValue);
+    },
     rtl: (0, _i18n.isRTL)()
   });
-  const handleOnChange = nextValue => {
-    onChange(nextValue);
-  };
-  const {
-    setCurrentId
-  } = composite;
-  (0, _element.useEffect)(() => {
-    if (typeof value !== 'undefined') {
-      setCurrentId((0, _utils.getItemId)(baseId, value));
-    }
-  }, [value, setCurrentId, baseId]);
+  const activeId = compositeStore.useState('activeId');
   const classes = (0, _classnames.default)('component-alignment-matrix-control', className);
-  return (0, _react.createElement)(_composite.Composite, {
-    ...props,
-    ...composite,
-    "aria-label": label,
-    as: _alignmentMatrixControlStyles.Root,
-    className: classes,
-    role: "grid",
-    size: width
-  }, _utils.GRID.map((cells, index) => (0, _react.createElement)(_composite.CompositeGroup, {
-    ...composite,
-    as: _alignmentMatrixControlStyles.Row,
-    role: "row",
+  return (0, _react.createElement)(_v.Composite, {
+    store: compositeStore,
+    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Root, {
+      ...props,
+      "aria-label": label,
+      className: classes,
+      id: baseId,
+      role: "grid",
+      size: width
+    })
+  }, _utils.GRID.map((cells, index) => (0, _react.createElement)(_v.CompositeRow, {
+    render: (0, _react.createElement)(_alignmentMatrixControlStyles.Row, {
+      role: "row"
+    }),
     key: index
   }, cells.map(cell => {
     const cellId = (0, _utils.getItemId)(baseId, cell);
-    const isActive = composite.currentId === cellId;
+    const isActive = cellId === activeId;
     return (0, _react.createElement)(_cell.default, {
-      ...composite,
       id: cellId,
       isActive: isActive,
       key: cell,
-      value: cell,
-      onFocus: () => handleOnChange(cell),
-      tabIndex: isActive ? 0 : -1
+      value: cell
     });
   }))));
 }

package/build/alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_compose","_element","_cell","_composite","_alignmentMatrixControlStyles","_icon","_utils","noop","useBaseId","id","instanceId","useInstanceId","AlignmentMatrixControl","className","label","__","defaultValue","value","onChange","width","props","immutableDefaultValue","useState","baseId","initialCurrentId","getItemId","composite","useCompositeState","currentId","rtl","isRTL","handleOnChange","nextValue","setCurrentId","useEffect","classes","classnames","_react","createElement","Composite","as","Root","role","size","GRID","map","cells","index","CompositeGroup","Row","key","cell","cellId","isActive","default","onFocus","tabIndex","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeGroup, useCompositeState } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type {\n\tAlignmentMatrixControlProps,\n\tAlignmentMatrixControlValue,\n} from './types';\n\nconst noop = () => {};\n\nfunction useBaseId( id?: string ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as 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 function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange = noop,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst [ immutableDefaultValue ] = useState( value ?? defaultValue );\n\tconst baseId = useBaseId( id );\n\tconst initialCurrentId = getItemId( baseId, immutableDefaultValue );\n\n\tconst composite = useCompositeState( {\n\t\tbaseId,\n\t\tcurrentId: initialCurrentId,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tconst { setCurrentId } = composite;\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tsetCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, setCurrentId, baseId ] );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\t{ ...props }\n\t\t\t{ ...composite }\n\t\t\taria-label={ label }\n\t\t\tas={ Root }\n\t\t\tclassName={ classes }\n\t\t\trole=\"grid\"\n\t\t\tsize={ width }\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeGroup\n\t\t\t\t\t{ ...composite }\n\t\t\t\t\tas={ Row }\n\t\t\t\t\trole=\"row\"\n\t\t\t\t\tkey={ index }\n\t\t\t\t>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = composite.currentId === cellId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\t{ ...composite }\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t\tonFocus={ () => handleOnChange( cell ) }\n\t\t\t\t\t\t\t\ttabIndex={ isActive ? 0 : -1 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</CompositeGroup>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_compose","_cell","_v","_alignmentMatrixControlStyles","_icon","_utils","AlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","compositeStore","useCompositeStore","defaultActiveId","getItemId","activeId","setActiveId","nextActiveId","nextValue","getItemValue","rtl","isRTL","useState","classes","classnames","_react","createElement","Composite","store","render","Root","role","size","GRID","map","cells","index","CompositeRow","Row","key","cell","cellId","isActive","default","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, CompositeRow, useCompositeStore } from '../composite/v2';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as 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 function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) onChange?.( nextValue );\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<CompositeRow render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</CompositeRow>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":"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"}

package/build/alignment-matrix-control/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GRID = exports.ALIGNMENT_LABEL = exports.ALIGNMENTS = void 0;
 exports.getAlignmentIndex = getAlignmentIndex;
 exports.getItemId = getItemId;
-exports.transformValue = transformValue;
+exports.getItemValue = getItemValue;
 var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
@@ -34,16 +34,21 @@ exports.ALIGNMENT_LABEL = ALIGNMENT_LABEL;
 const ALIGNMENTS = GRID.flat();
 
 /**
- * Parses and transforms an incoming value to better match the alignment values
+ * Normalizes and transforms an incoming value to better match the alignment values
  *
  * @param value An alignment value to parse.
  *
  * @return The parsed value.
  */
 exports.ALIGNMENTS = ALIGNMENTS;
-function transformValue(value) {
-  const nextValue = value === 'center' ? 'center center' : value;
-  return nextValue.replace('-', ' ');
+function normalize(value) {
+  const normalized = value === 'center' ? 'center center' : value;
+
+  // Strictly speaking, this could be `string | null | undefined`,
+  // but will be validated shortly, so we're typecasting to an
+  // `AlignmentMatrixControlValue` to keep TypeScript happy.
+  const transformed = normalized?.replace('-', ' ');
+  return ALIGNMENTS.includes(transformed) ? transformed : undefined;
 }
 
 /**
@@ -55,8 +60,22 @@ function transformValue(value) {
  * @return The item id.
  */
 function getItemId(prefixId, value) {
-  const valueId = transformValue(value).replace(' ', '-');
-  return `${prefixId}-${valueId}`;
+  const normalized = normalize(value);
+  if (!normalized) return;
+  const id = normalized.replace(' ', '-');
+  return `${prefixId}-${id}`;
+}
+
+/**
+ * Extracts an item value from its ID
+ *
+ * @param prefixId An ID prefix to remove
+ * @param id       An item ID
+ * @return         The item value
+ */
+function getItemValue(prefixId, id) {
+  const value = id?.replace(prefixId + '-', '');
+  return normalize(value);
 }
 
 /**
@@ -67,8 +86,9 @@ function getItemId(prefixId, value) {
  * @return The index of a matching alignment.
  */
 function getAlignmentIndex(alignment = 'center') {
-  const item = transformValue(alignment);
-  const index = ALIGNMENTS.indexOf(item);
+  const normalized = normalize(alignment);
+  if (!normalized) return undefined;
+  const index = ALIGNMENTS.indexOf(normalized);
   return index > -1 ? index : undefined;
 }
 //# sourceMappingURL=utils.js.map

package/build/alignment-matrix-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","GRID","exports","ALIGNMENT_LABEL","__","center","ALIGNMENTS","flat","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"sources":["@wordpress/components/src/alignment-matrix-control/utils.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport type { AlignmentMatrixControlValue } from './types';\n\nexport const GRID: AlignmentMatrixControlValue[][] = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center' ),\n\tcenter: __( 'Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values.\nexport const ALIGNMENTS = GRID.flat();\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param value An alignment value to parse.\n *\n * @return The parsed value.\n */\nexport function transformValue( value: AlignmentMatrixControlValue ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue;\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param prefixId An ID to prefix.\n * @param value    An alignment value.\n *\n * @return The item id.\n */\nexport function getItemId(\n\tprefixId: string,\n\tvalue: AlignmentMatrixControlValue\n) {\n\tconst valueId = transformValue( value ).replace( ' ', '-' );\n\n\treturn `${ prefixId }-${ valueId }`;\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param alignment Value to check.\n *\n * @return The index of a matching alignment.\n */\nexport function getAlignmentIndex(\n\talignment: AlignmentMatrixControlValue = 'center'\n) {\n\tconst item = transformValue( alignment );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAOO,MAAMC,IAAqC,GAAG,CACpD,CAAE,UAAU,EAAE,YAAY,EAAE,WAAW,CAAE,EACzC,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,EAClD,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,CAClD;;AAED;AAAAC,OAAA,CAAAD,IAAA,GAAAA,IAAA;AACO,MAAME,eAA8D,GAAG;EAC7E,UAAU,EAAE,IAAAC,QAAE,EAAE,UAAW,CAAC;EAC5B,YAAY,EAAE,IAAAA,QAAE,EAAE,YAAa,CAAC;EAChC,WAAW,EAAE,IAAAA,QAAE,EAAE,WAAY,CAAC;EAC9B,aAAa,EAAE,IAAAA,QAAE,EAAE,aAAc,CAAC;EAClC,eAAe,EAAE,IAAAA,QAAE,EAAE,QAAS,CAAC;EAC/BC,MAAM,EAAE,IAAAD,QAAE,EAAE,QAAS,CAAC;EACtB,cAAc,EAAE,IAAAA,QAAE,EAAE,cAAe,CAAC;EACpC,aAAa,EAAE,IAAAA,QAAE,EAAE,aAAc,CAAC;EAClC,eAAe,EAAE,IAAAA,QAAE,EAAE,eAAgB,CAAC;EACtC,cAAc,EAAE,IAAAA,QAAE,EAAE,cAAe;AACpC,CAAC;;AAED;AAAAF,OAAA,CAAAC,eAAA,GAAAA,eAAA;AACO,MAAMG,UAAU,GAAGL,IAAI,CAACM,IAAI,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AANAL,OAAA,CAAAI,UAAA,GAAAA,UAAA;AAOO,SAASE,cAAcA,CAAEC,KAAkC,EAAG;EACpE,MAAMC,SAAS,GAAGD,KAAK,KAAK,QAAQ,GAAG,eAAe,GAAGA,KAAK;EAE9D,OAAOC,SAAS,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,SAASA,CACxBC,QAAgB,EAChBJ,KAAkC,EACjC;EACD,MAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAM,CAAC,CAACE,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAE3D,OAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,iBAAiBA,CAChCC,SAAsC,GAAG,QAAQ,EAChD;EACD,MAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAU,CAAC;EACxC,MAAME,KAAK,GAAGZ,UAAU,CAACa,OAAO,CAAEF,IAAK,CAAC;EAExC,OAAOC,KAAK,GAAG,CAAC,CAAC,GAAGA,KAAK,GAAGE,SAAS;AACtC"}
+{"version":3,"names":["_i18n","require","GRID","exports","ALIGNMENT_LABEL","__","center","ALIGNMENTS","flat","normalize","value","normalized","transformed","replace","includes","undefined","getItemId","prefixId","id","getItemValue","getAlignmentIndex","alignment","index","indexOf"],"sources":["@wordpress/components/src/alignment-matrix-control/utils.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { AlignmentMatrixControlValue } from './types';\n\nexport const GRID: AlignmentMatrixControlValue[][] = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center' ),\n\tcenter: __( 'Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values.\nexport const ALIGNMENTS = GRID.flat();\n\n/**\n * Normalizes and transforms an incoming value to better match the alignment values\n *\n * @param value An alignment value to parse.\n *\n * @return The parsed value.\n */\nfunction normalize( value?: string | null ) {\n\tconst normalized = value === 'center' ? 'center center' : value;\n\n\t// Strictly speaking, this could be `string | null | undefined`,\n\t// but will be validated shortly, so we're typecasting to an\n\t// `AlignmentMatrixControlValue` to keep TypeScript happy.\n\tconst transformed = normalized?.replace(\n\t\t'-',\n\t\t' '\n\t) as AlignmentMatrixControlValue;\n\n\treturn ALIGNMENTS.includes( transformed ) ? transformed : undefined;\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param prefixId An ID to prefix.\n * @param value    An alignment value.\n *\n * @return The item id.\n */\nexport function getItemId(\n\tprefixId: string,\n\tvalue?: AlignmentMatrixControlValue\n) {\n\tconst normalized = normalize( value );\n\tif ( ! normalized ) return;\n\n\tconst id = normalized.replace( ' ', '-' );\n\treturn `${ prefixId }-${ id }`;\n}\n\n/**\n * Extracts an item value from its ID\n *\n * @param prefixId An ID prefix to remove\n * @param id       An item ID\n * @return         The item value\n */\nexport function getItemValue( prefixId: string, id?: string | null ) {\n\tconst value = id?.replace( prefixId + '-', '' );\n\treturn normalize( value );\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param alignment Value to check.\n *\n * @return The index of a matching alignment.\n */\nexport function getAlignmentIndex(\n\talignment: AlignmentMatrixControlValue = 'center'\n) {\n\tconst normalized = normalize( alignment );\n\tif ( ! normalized ) return undefined;\n\n\tconst index = ALIGNMENTS.indexOf( normalized );\n\treturn index > -1 ? index : undefined;\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQO,MAAMC,IAAqC,GAAG,CACpD,CAAE,UAAU,EAAE,YAAY,EAAE,WAAW,CAAE,EACzC,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,EAClD,CAAE,aAAa,EAAE,eAAe,EAAE,cAAc,CAAE,CAClD;;AAED;AAAAC,OAAA,CAAAD,IAAA,GAAAA,IAAA;AACO,MAAME,eAA8D,GAAG;EAC7E,UAAU,EAAE,IAAAC,QAAE,EAAE,UAAW,CAAC;EAC5B,YAAY,EAAE,IAAAA,QAAE,EAAE,YAAa,CAAC;EAChC,WAAW,EAAE,IAAAA,QAAE,EAAE,WAAY,CAAC;EAC9B,aAAa,EAAE,IAAAA,QAAE,EAAE,aAAc,CAAC;EAClC,eAAe,EAAE,IAAAA,QAAE,EAAE,QAAS,CAAC;EAC/BC,MAAM,EAAE,IAAAD,QAAE,EAAE,QAAS,CAAC;EACtB,cAAc,EAAE,IAAAA,QAAE,EAAE,cAAe,CAAC;EACpC,aAAa,EAAE,IAAAA,QAAE,EAAE,aAAc,CAAC;EAClC,eAAe,EAAE,IAAAA,QAAE,EAAE,eAAgB,CAAC;EACtC,cAAc,EAAE,IAAAA,QAAE,EAAE,cAAe;AACpC,CAAC;;AAED;AAAAF,OAAA,CAAAC,eAAA,GAAAA,eAAA;AACO,MAAMG,UAAU,GAAGL,IAAI,CAACM,IAAI,CAAC,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AANAL,OAAA,CAAAI,UAAA,GAAAA,UAAA;AAOA,SAASE,SAASA,CAAEC,KAAqB,EAAG;EAC3C,MAAMC,UAAU,GAAGD,KAAK,KAAK,QAAQ,GAAG,eAAe,GAAGA,KAAK;;EAE/D;EACA;EACA;EACA,MAAME,WAAW,GAAGD,UAAU,EAAEE,OAAO,CACtC,GAAG,EACH,GACD,CAAgC;EAEhC,OAAON,UAAU,CAACO,QAAQ,CAAEF,WAAY,CAAC,GAAGA,WAAW,GAAGG,SAAS;AACpE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,SAASA,CACxBC,QAAgB,EAChBP,KAAmC,EAClC;EACD,MAAMC,UAAU,GAAGF,SAAS,CAAEC,KAAM,CAAC;EACrC,IAAK,CAAEC,UAAU,EAAG;EAEpB,MAAMO,EAAE,GAAGP,UAAU,CAACE,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EACzC,OAAQ,GAAGI,QAAU,IAAIC,EAAI,EAAC;AAC/B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAAEF,QAAgB,EAAEC,EAAkB,EAAG;EACpE,MAAMR,KAAK,GAAGQ,EAAE,EAAEL,OAAO,CAAEI,QAAQ,GAAG,GAAG,EAAE,EAAG,CAAC;EAC/C,OAAOR,SAAS,CAAEC,KAAM,CAAC;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASU,iBAAiBA,CAChCC,SAAsC,GAAG,QAAQ,EAChD;EACD,MAAMV,UAAU,GAAGF,SAAS,CAAEY,SAAU,CAAC;EACzC,IAAK,CAAEV,UAAU,EAAG,OAAOI,SAAS;EAEpC,MAAMO,KAAK,GAAGf,UAAU,CAACgB,OAAO,CAAEZ,UAAW,CAAC;EAC9C,OAAOW,KAAK,GAAG,CAAC,CAAC,GAAGA,KAAK,GAAGP,SAAS;AACtC"}

package/build/circular-option-picker/circular-option-picker-option.js

@@ -12,7 +12,7 @@ var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _button = _interopRequireDefault(require("../button"));
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 /**
  * External dependencies
@@ -26,7 +26,6 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
  * Internal dependencies
  */
 
-const hasSelectedOption = new Map();
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
@@ -43,39 +42,22 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
-    context,
+    compositeStore,
     ...additionalProps
   } = props;
-  const {
-    isComposite,
-    ..._compositeState
-  } = context;
-  const compositeState = _compositeState;
-  const {
-    baseId,
-    currentId,
-    setCurrentId
-  } = compositeState;
-  (0, _element.useEffect)(() => {
-    // If we call `setCurrentId` here, it doesn't update for other
-    // Option renders in the same pass. So we have to store our own
-    // map to make sure that we only set the first selected option.
-    // We still need to check `currentId` because the control will
-    // update this as the user moves around, and that state should
-    // be maintained as the group gains and loses focus.
-    if (isSelected && !currentId && !hasSelectedOption.get(baseId)) {
-      hasSelectedOption.set(baseId, true);
-      setCurrentId(id);
-    }
-  }, [baseId, currentId, id, isSelected, setCurrentId]);
-  return (0, _react.createElement)(_composite.CompositeItem, {
-    ...additionalProps,
-    ...compositeState,
-    as: _button.default,
-    id: id,
-    role: "option",
-    "aria-selected": !!isSelected,
-    ref: forwardedRef
+  const activeId = compositeStore.useState('activeId');
+  if (isSelected && !activeId) {
+    compositeStore.setActiveId(id);
+  }
+  return (0, _react.createElement)(_v.CompositeItem, {
+    render: (0, _react.createElement)(_button.default, {
+      ...additionalProps,
+      role: "option",
+      "aria-selected": !!isSelected,
+      ref: forwardedRef
+    }),
+    store: compositeStore,
+    id: id
   });
 }
 const OptionAsOption = (0, _element.forwardRef)(UnforwardedOptionAsOption);
@@ -86,20 +68,19 @@ function Option({
   tooltipText,
   ...additionalProps
 }) {
-  const compositeContext = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
   const {
-    isComposite,
-    baseId
-  } = compositeContext;
+    baseId,
+    compositeStore
+  } = (0, _element.useContext)(_circularOptionPickerContext.CircularOptionPickerContext);
   const id = (0, _compose.useInstanceId)(Option, baseId || 'components-circular-option-picker__option');
   const commonProps = {
     id,
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = isComposite ? (0, _react.createElement)(OptionAsOption, {
+  const optionControl = compositeStore ? (0, _react.createElement)(OptionAsOption, {
     ...commonProps,
-    context: compositeContext,
+    compositeStore: compositeStore,
     isSelected: isSelected
   }) : (0, _react.createElement)(OptionAsButton, {
     ...commonProps,

package/build/circular-option-picker/circular-option-picker-option.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","hasSelectedOption","Map","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","_react","createElement","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","context","isComposite","_compositeState","compositeState","baseId","currentId","setCurrentId","useEffect","get","set","CompositeItem","as","Button","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","compositeContext","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","classnames","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext, useEffect } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite';\nimport Tooltip from '../tooltip';\nimport type {\n\tOptionProps,\n\tCircularOptionPickerCompositeState,\n\tCircularOptionPickerContextProps,\n} from './types';\n\nconst hasSelectedOption = new Map();\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t></Button>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcontext: CircularOptionPickerContextProps;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, context, ...additionalProps } = props;\n\tconst { isComposite, ..._compositeState } = context;\n\tconst compositeState =\n\t\t_compositeState as CircularOptionPickerCompositeState;\n\tconst { baseId, currentId, setCurrentId } = compositeState;\n\n\tuseEffect( () => {\n\t\t// If we call `setCurrentId` here, it doesn't update for other\n\t\t// Option renders in the same pass. So we have to store our own\n\t\t// map to make sure that we only set the first selected option.\n\t\t// We still need to check `currentId` because the control will\n\t\t// update this as the user moves around, and that state should\n\t\t// be maintained as the group gains and loses focus.\n\t\tif ( isSelected && ! currentId && ! hasSelectedOption.get( baseId ) ) {\n\t\t\thasSelectedOption.set( baseId, true );\n\t\t\tsetCurrentId( id );\n\t\t}\n\t}, [ baseId, currentId, id, isSelected, setCurrentId ] );\n\n\treturn (\n\t\t<CompositeItem\n\t\t\t{ ...additionalProps }\n\t\t\t{ ...compositeState }\n\t\t\tas={ Button }\n\t\t\tid={ id }\n\t\t\trole=\"option\"\n\t\t\taria-selected={ !! isSelected }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst compositeContext = useContext( CircularOptionPickerContext );\n\tconst { isComposite, baseId } = compositeContext;\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = isComposite ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcontext={ compositeContext }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_v","_tooltip","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","_react","createElement","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","CompositeItem","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useContext","CircularOptionPickerContext","useInstanceId","commonProps","optionControl","classnames","text","Icon","icon","check"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/build/circular-option-picker/circular-option-picker.js

@@ -8,10 +8,9 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
-var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
-var _composite = require("../composite");
+var _v = require("../composite/v2");
 var _circularOptionPickerOption = require("./circular-option-picker-option");
 var _circularOptionPickerOptionGroup = require("./circular-option-picker-option-group");
 var _circularOptionPickerActions = require("./circular-option-picker-actions");
@@ -83,42 +82,22 @@ function ListboxCircularOptionPicker(props) {
     children,
     ...additionalProps
   } = props;
-  const rtl = (0, _i18n.isRTL)();
-  const compositeState = (0, _composite.useCompositeState)({
-    baseId,
-    loop,
-    rtl
+  const compositeStore = (0, _v.useCompositeStore)({
+    focusLoop: loop,
+    rtl: (0, _i18n.isRTL)()
   });
-  const {
-    setBaseId,
-    setLoop,
-    setRTL
-  } = compositeState;
-
-  // These are necessary as `useCompositeState` is sealed after
-  // the first render, so although unlikely to happen, if a state
-  // property should change, we need to process it accordingly.
-
-  (0, _element.useEffect)(() => {
-    setBaseId(baseId);
-  }, [setBaseId, baseId]);
-  (0, _element.useEffect)(() => {
-    setLoop(loop);
-  }, [setLoop, loop]);
-  (0, _element.useEffect)(() => {
-    setRTL(rtl);
-  }, [setRTL, rtl]);
   const compositeContext = {
-    isComposite: true,
-    ...compositeState
+    baseId,
+    compositeStore
   };
   return (0, _react.createElement)("div", {
     className: className
   }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
     value: compositeContext
-  }, (0, _react.createElement)(_composite.Composite, {
+  }, (0, _react.createElement)(_v.Composite, {
     ...additionalProps,
-    ...compositeState,
+    id: baseId,
+    store: compositeStore,
     role: 'listbox'
   }, options), children, actions));
 }
@@ -131,10 +110,10 @@ function ButtonsCircularOptionPicker(props) {
     ...additionalProps
   } = props;
   return (0, _react.createElement)("div", {
-    ...additionalProps
+    ...additionalProps,
+    id: baseId
   }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
     value: {
-      isComposite: false,
       baseId
     }
   }, options, children, actions));