@wordpress/components 17.0.0 → 19.0.2

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 ## Unreleased
 
+## 19.0.1 (2021-11-07)
+
+### Experimental
+
+-   Updated the `ToolsPanel` to use `Grid` internally to manage panel layout ([35621](https://github.com/WordPress/gutenberg/pull/35621)).
+
+## 19.0.0 (2021-10-22)
+
+### New Features
+
+-   Added support for `step="any"` in `NumberControl` and `RangeControl` ([#34542](https://github.com/WordPress/gutenberg/pull/34542)).
+
+### Enhancements
+
+-   Removed the separator shown between `ToggleGroupControl` items ([#35497](https://github.com/WordPress/gutenberg/pull/35497)).
+-   The `ColorPicker` component property `onChangeComplete`, a function accepting a color object, was replaced with the property `onChange`, a function accepting a  string on  ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+-   The property `disableAlpha`, was removed from the `ColorPicker` component. Use the new opposite property `enableAlpha` instead ([#35220](https://github.com/WordPress/gutenberg/pull/35220)).
+
+### Experimental
+
+-   Removed the `fieldset` wrapper from the `FontAppearanceControl` component ([35461](https://github.com/WordPress/gutenberg/pull/35461)).
+-   Refactored the `ToggleGroupControl` component's structure and embedded `ToggleGroupControlButton` directly into `ToggleGroupControlOption` ([#35600](https://github.com/WordPress/gutenberg/pull/35600)).
+-   Added support for showing an experimental hint in `CustomSelectControl`  ([#35673](https://github.com/WordPress/gutenberg/pull/35673)).
+
+### Breaking Changes
+
+-   The `color` property a `tinycolor2` color object passed on `onChangeComplete` property of the `ColorPicker` component was removed. Please use the new `onChange` property that accepts a string color representation ([#35562](https://github.com/WordPress/gutenberg/pull/35562)).
+
+## 18.0.0 (2021-10-12)
+
+### Breaking Changes
+
+-   Removed the deprecated `position` and `menuLabel` from the `DropdownMenu` component ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
+-   Removed the deprecated `onClickOutside` prop from the `Popover` component ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
+-   Changed `RangeControl` component to not apply `shiftStep` to inputs from its `<input type="range"/>` ([35020](https://github.com/WordPress/gutenberg/pull/35020)).
+-   Removed `isAction` prop from `Item`. The component will now rely on `onClick` to render as a `button` ([35152](https://github.com/WordPress/gutenberg/pull/35152)).
+
+### New Features
+
+-   Add an experimental `Navigator` components ([#34904](https://github.com/WordPress/gutenberg/pull/34904)) as a replacement for the previous `Navigation` related components.
+-   Update the `ColorPicker` component to the latest design ([#35220](https://github.com/WordPress/gutenberg/pull/35220))
+
+### Bug Fix
+
+-   Fixed rounding of value in `RangeControl` component when it loses focus while the `SHIFT` key is held. ([#35020](https://github.com/WordPress/gutenberg/pull/35020)).
+
+### Internal
+
+-   Deleted the `createComponent` utility function ([#34929](https://github.com/WordPress/gutenberg/pull/34929)).
+-   Deleted the `useJumpStep` utility function ([#35561](https://github.com/WordPress/gutenberg/pull/35561)).
+
 ## 17.0.0 (2021-09-09)
 
 ### Breaking Change
@@ -16,7 +67,7 @@
 
 ### Internal
 
--   Renamed `PolymorphicComponent*` types to `WordPressComponent*` ([#34330](https://github.com/WordPress/gutenberg/pull/34330))
+-   Renamed `PolymorphicComponent*` types to `WordPressComponent*` ([#34330](https://github.com/WordPress/gutenberg/pull/34330)).
 
 ## 16.0.0 (2021-08-23)
 

package/CONTRIBUTING.md

@@ -4,12 +4,404 @@ Thank you for taking the time to contribute.
 
 The following is a set of guidelines for contributing to the `@wordpress/components` package to be considered in addition to the general ones described in our [Contributing Policy](/CONTRIBUTING.md).
 
-## Examples
+This set of guidelines should apply especially to newly introduced components. In fact, while these guidelines should also be retroactively applied to existing components, it is sometimes impossible to do so for legacy/compatibility reasons.
 
-Each component needs to include an example in its README.md file to demonstrate the usage of the component.
+For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group).
 
-These examples can be consumed automatically from other projects in order to visualize them in their documentation. To ensure these examples are extractable, compilable and renderable, they should be structured in the following way:
+- [Compatibility](#compatibility)
+- [Compound components](#compound-components)
+- [Components & Hooks](#components--hooks)
+- [TypeScript](#typescript)
+- [Styling](#styling)
+- [Context system](#context-system)
+- [Unit tests](#unit-tests)
+- [Storybook](#storybook)
+- [Documentation](#documentation)
+- [README example](#README-example)
+- [Folder structure](#folder-structure)
 
--   It has to be included in a `jsx` code block.
--   It has to work out-of-the-box. No additional code should be needed to have working the example.
--   It has to define a React component called `My<ComponentName>` which renders the example (i.e.: `MyButton`). Examples for the Higher Order Components should define a `MyComponent<ComponentName>` component (i.e.: `MyComponentWithNotices`).
+## Compatibility
+
+The `@wordpress/components` package includes components that are relied upon by many developers across different projects. It is, therefore, very important to avoid introducing breaking changes.
+
+In these situations, one possible approach is to "soft-deprecate" a given legacy API. This is achieved by:
+
+1. Removing traces of the API from the docs, while still supporting it in code.
+2. Updating all places in Gutenberg that use that API.
+3. Adding deprecation warnings (only after the previous point is completed, otherwise the Browser Console will be polluted by all those warnings and some e2e tests may fail).
+
+When adding new components or new props to existing components, it's recommended to prefix them with `__unstable` or `__experimental` until they're stable enough to be exposed as part of the public API.
+
+Learn more on [How to preserve backward compatibility for a React Component](/docs/how-to-guides/backward-compatibility/README.md#how-to-preserve-backward-compatibility-for-a-react-component) and [Experimental and Unstable APIs](/docs/contributors/code/coding-guidelines.md#experimental-and-unstable-apis).
+
+<!-- ## Polymorphic Components (i.e. the `as` prop)
+
+The primary way to compose components is through the `as` prop. This prop can be used to change the underlying element used to render a component, e.g.:
+
+```tsx
+function LinkButton( { href, children } ) {
+	return <Button variant="primary" as="a" href={href}>{ children }</Button>;
+}
+```
+-->
+
+## Compound components
+
+When creating components that render a list of subcomponents, prefer to expose the API using the [Compound Components](https://kentcdodds.com/blog/compound-components-with-react-hooks) technique over array props like `items` or `options`:
+
+```jsx
+// ❌ Don't:
+<List
+	items={ [
+		{ value: 'Item 1' },
+		{ value: 'Item 2' },
+		{ value: 'Item 3' },
+	] }
+/>
+```
+
+```jsx
+// ✅ Do:
+<List>
+	<ListItem value="Item 1" />
+	<ListItem value="Item 2" />
+	<ListItem value="Item 3" />
+</List>
+```
+
+When implementing this pattern, avoid using `React.Children.map` and `React.cloneElement` to map through the children and augment them. Instead, use React Context to provide state to subcomponents and connect them:
+
+```jsx
+// ❌ Don't:
+function List ( props ) {
+	const [ state, setState ] = useState();
+	return (
+		<div { ...props }>
+			{ Children.map( props.children, ( child ) => cloneElement( child, { state } ) ) ) }
+		</div>
+	);
+}
+```
+
+```jsx
+// ✅ Do:
+const ListContext = createContext();
+
+function List( props ) {
+	const [ state, setState ] = useState();
+	return (
+		<ListContext.Provider value={ state }>
+			<div { ...props } />
+		</ListContext.Provider>
+	);
+}
+
+function ListItem( props ) {
+	const state = useContext( ListContext );
+	...
+}
+```
+
+<!-- ## (Semi-)Controlled components
+
+TBD
+
+## Layout "responsibilities"
+
+TBD — Components' layout responsibilities and boundaries (i.e., a component should only affect the layout of its children, not its own) -->
+
+## Components & Hooks
+
+One way to enable reusability and composition is to extract a component's underlying logic into a hook (living in a separate `hook.ts` file). The actual component (usually defined in a `component.tsx` file) can then invoke the hook and use its output to render the required DOM elements. For example:
+
+```tsx
+// in `hook.ts`
+function useExampleComponent( props: PolymorphicComponentProps< ExampleProps, 'div' > ) {
+	// Merge received props with the context system.
+	const { isVisible, className, ...otherProps } = useContextSystem( props, 'Example' );
+
+	// Any other reusable rendering logic (e.g. computing className, state, event listeners...)
+	const cx = useCx();
+	const classes = useMemo(
+		() =>
+			cx(
+				styles.example,
+				isVisible && styles.visible,
+				className
+			),
+		[ className, isVisible ]
+	);
+
+	return {
+		...otherProps,
+		className: classes
+	};
+}
+
+// in `component.tsx`
+function Example(
+	props: PolymorphicComponentProps< ExampleProps, 'div' >,
+	forwardedRef: Ref< any >
+) {
+	const exampleProps = useExampleComponent( props );
+
+	return <View { ...spacerProps } ref={ forwardedRef } />;
+}
+```
+
+A couple of good examples of how hooks are used for composition are:
+
+- the `Card` component, which builds on top of the `Surface` component by [calling the `useSurface` hook inside its own hook](/packages/components/src/card/card/hook.js);
+- the `HStack` component, which builds on top of the `Flex` component and [calls the `useFlex` hook inside its own hook](/packages/components/src/h-stack/hook.js).
+
+<!-- ## API Consinstency
+
+[To be expanded] E.g.:
+
+- Boolean component props should be prefixed with `is*` (e.g. `isChecked`), `has*` (e.g. `hasValue`) or `enable*` (e.g. `enableScroll`)
+- Event callback props should be prefixed with `on*` (e.g. `onChanged`)
+- Subcomponents naming conventions (e.g `CardBody` instead of `Card.Body`)
+- ...
+
+## Performance
+
+TDB -->
+
+## TypeScript
+
+We strongly encourage using TypeScript for all new components. Components should be typed using the `WordPressComponent` type.
+
+<!-- TODO: add to the previous paragraph once the composision section gets added to this document.
+(more details about polymorphism can be found above in the "Components composition" section). -->
+
+## Styling
+
+All new component should be styled using [Emotion](https://emotion.sh/docs/introduction).
+
+Note: Instead of using Emotion's standard `cx` function, the custom [`useCx` hook](/packages/components/src/utils/hooks/use-cx.ts) should be used instead.
+
+## Context system
+
+The `@wordpress/components` context system is based on [React's `Context` API](https://reactjs.org/docs/context.html), and is a way for components to adapt to the "context" they're being rendered in.
+
+Components can use this system via a couple of functions:
+
+- they can provide values using a shared `ContextSystemProvider` component
+- they can connect to the Context via `contextConnect`
+- they can read the "computed" values from the context via `useContextSystem`
+
+An example of how this is used can be found in the [`Card` component family](/packages/components/src/card). For example, this is how the `Card` component injects the `size` and `isBorderless` props down to its `CardBody` subcomponent — which makes it use the correct spacing and border settings "auto-magically".
+
+```jsx
+//=========================================================================
+// Simplified snippet from `packages/components/src/card/card/hook.js`
+//=========================================================================
+import { useContextSystem } from '../../ui/context';
+
+export function useCard( props ) {
+	// Read any derived registered prop from the Context System in the `Card` namespace
+	const derivedProps = useContextSystem( props, 'Card' );
+
+	// [...]
+
+	return computedHookProps;
+}
+
+//=========================================================================
+// Simplified snippet from `packages/components/src/card/card/component.js`
+//=========================================================================
+import { contextConnect, ContextSystemProvider } from '../../ui/context';
+
+function Card( props, forwardedRef ) {
+	const {
+		size,
+		isBorderless,
+		...otherComputedHookProps
+	} = useCard( props );
+
+	// [...]
+
+	// Prepare the additional props that should be passed to subcomponents via the Context System.
+	const contextProviderValue = useMemo( () => {
+		return {
+			// Each key in this object should match a component's registered namespace.
+			CardBody: {
+				size,
+				isBorderless,
+			},
+		};
+	}, [ isBorderless, size ] );
+
+	return (
+		{ /* Write additional values to the Context System */ }
+		<ContextSystemProvider value={ contextProviderValue }>
+			{ /* [...] */ }
+		</ContextSystemProvider>
+	);
+}
+
+// Connect to the Context System under the `Card` namespace
+const ConnectedCard = contextConnect( Card, 'Card' );
+export default ConnectedCard;
+
+//=========================================================================
+// Simplified snippet from `packages/components/src/card/card-body/hook.js`
+//=========================================================================
+import { useContextSystem } from '../../ui/context';
+
+export function useCardBody( props ) {
+	// Read any derived registered prop from the Context System in the `CardBody` namespace.
+	// If a `CardBody` component is rendered as a child of a `Card` component, the value of
+	// the `size` prop will be the one set by the parent `Card` component via the Context
+	// System (unless the prop gets explicitely set on the `CardBody` component).
+	const { size = 'medium', ...otherDerivedProps } = useContextSystem( props, 'CardBody' );
+
+	// [...]
+
+	return computedHookProps;
+}
+```
+
+## Unit tests
+
+Please refer to the [JavaScript Testing Overview docs](/docs/contributors/code/testing-overview.md#snapshot-testing).
+
+## Storybook
+
+All new components should add stories to the project's [Storybook](https://storybook.js.org/). Each [story](https://storybook.js.org/docs/react/get-started/whats-a-story) captures the rendered state of a UI component in isolation. This greatly simplifies working on a given component, while also serving as an interactive form of documentation.
+
+A component's story should be showcasing its different states — for example, the different variants of a  `Button`:
+
+```jsx
+import Button from '../';
+
+export default { title: 'Components/Button', component: Button };
+
+const Template = ( args ) => <Button { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'Default Button',
+	isBusy: false,
+	isSmall: false,
+};
+
+export const Primary = Template.bind( {} );
+Primary.args = {
+	...Default.args,
+	text: 'Primary Button',
+	variant: 'primary',
+};
+```
+
+A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
+
+The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.js)).
+
+Storybook can be started on a local machine by running `npm run storybook:dev`. Alternatively, the components' catalogue (up to date with the latest code on `trunk`) can be found at [wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/).
+
+## Documentation
+
+All components, in addition to being typed, should be using JSDoc when necessary — as explained in the [Coding Guidelines](/docs/contributors/code/coding-guidelines.md#javascript-documentation-using-jsdoc).
+
+Each component that is exported from the `@wordpress/components` package should include a `README.md` file, explaining how to use the component, showing examples, and documenting all the props.
+
+## README example
+
+````markdown
+# `ComponentName`
+
+<!-- If component is experimental, add the following section: -->
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+<!-- If component is deprecated, add the following section: -->
+<div class="callout callout-alert">
+This component is deprecated. Please use `{other component}` from the `{other package}` package instead.
+</div>
+
+Description of the component.
+
+## Usage
+
+Code example using correct markdown syntax and formatted using project's formatting rules. See [ItemGroup](/packages/components/src/item-group/item-group/README.md#usage) for a real-world example.
+
+```jsx
+import { ExampleComponent } from '@wordpress/components';
+
+function Example() {
+	return (
+		<ExampleComponent>
+			<p>Code is poetry</p>
+		</ExampleComponent>
+	);
+}
+```
+
+## Props
+
+The component accepts the following props:
+
+### `propName`: Typescript style type i.e `string`, `number`, `( nextValue: string ) => void`
+
+Prop description. With a new line before and after the description and before and after type/required blocks.
+
+-   Required: Either `Yes` or `No`
+<!-- If the prop has a default value, add the following line: -->
+-   Default: [default value]
+
+### Inherited props
+
+Add this section when there are props that are drilled down into an internal component. See [ClipboardButton](/packages/components/src/clipboard-button/README.md) for an example.
+
+<!-- Only add the next section if the component relies on the [Context System](#context-system) -->
+## Context
+
+See examples for this section for the [ItemGroup](/packages/components/src/item-group/item-group/README.md#context) and [`Card`](/packages/components/src/card/card/README.md#context) components.
+````
+
+## Folder structure
+
+As a result of the above guidelines, all new components (except for shared utilities) should _generally_ follow this folder structure:
+
+```text
+component-name/
+├── stories
+│   └── index.js
+├── test
+│   └── index.js
+├── component.tsx
+├── context.ts
+├── hook.ts
+├── index.ts
+├── README.md
+├── styles.ts
+└── types.ts
+```
+
+In case of a family of components (e.g. `Card` and `CardBody`, `CardFooter`, `CardHeader` ...), each component's implementation should live in a separate subfolder, while code common to the whole family of components (e.g types, utils, context...) should live in the family of components root folder:
+
+```text
+component-family-name/
+├── sub-component-name/
+│   ├── index.ts
+│   ├── component.tsx
+│   ├── hook.ts
+│   ├── README.md
+│   └── styles.ts
+├── sub-component-name/
+│   ├── index.ts
+│   ├── component.tsx
+│   ├── hook.ts
+│   ├── README.md
+│   └── styles.ts
+├── stories
+│   └── index.js
+├── test
+│   └── index.js
+├── context.ts
+├── index.ts
+├── types.ts
+└── utils.ts
+```

package/README.md

@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/components --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
 ## Usage
 
@@ -32,3 +32,11 @@ Many components include CSS to add style, you will need to add in order to appea
 In non-WordPress projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@wordpress/components/build-style/style.css`.
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
+
+## Docs & examples
+
+You can browse the components docs and examples at https://wordpress.github.io/gutenberg/
+
+## Contributing
+
+See [CONTRIBUTING.md](/packages/components/CONTRIBUTING.md) for the contributing guidelines for the `@wordpress/components` package.

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

@@ -28,11 +28,12 @@ var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-s
 /**
  * Internal dependencies
  */
-function Cell({
-  isActive = false,
-  value,
-  ...props
-}) {
+function Cell(_ref) {
+  let {
+    isActive = false,
+    value,
+    ...props
+  } = _ref;
   const tooltipText = _utils.ALIGNMENT_LABEL[value];
   return (0, _element.createElement)(_tooltip.default, {
     text: tooltipText

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/cell.js"],"names":["Cell","isActive","value","props","tooltipText","ALIGNMENT_LABEL","CellView"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAOe,SAASA,IAAT,CAAe;AAAEC,EAAAA,QAAQ,GAAG,KAAb;AAAoBC,EAAAA,KAApB;AAA2B,KAAGC;AAA9B,CAAf,EAAuD;AACrE,QAAMC,WAAW,GAAGC,uBAAiBH,KAAjB,CAApB;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,wBAAD;AAAe,IAAA,EAAE,EAAGE,kCAApB;AAA+B,IAAA,IAAI,EAAC;AAApC,KAAoDH,KAApD,GAIC,4BAAC,8BAAD,QAAkBD,KAAlB,CAJD,EAKC,4BAAC,mCAAD;AAAO,IAAA,QAAQ,EAAGD,QAAlB;AAA6B,IAAA,IAAI,EAAC;AAAlC,IALD,CADD,CADD;AAWA","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';\n\nexport default function Cell( { isActive = false, value, ...props } ) {\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"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/cell.js"],"names":["Cell","isActive","value","props","tooltipText","ALIGNMENT_LABEL","CellView"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;AAOe,SAASA,IAAT,OAAuD;AAAA,MAAxC;AAAEC,IAAAA,QAAQ,GAAG,KAAb;AAAoBC,IAAAA,KAApB;AAA2B,OAAGC;AAA9B,GAAwC;AACrE,QAAMC,WAAW,GAAGC,uBAAiBH,KAAjB,CAApB;AAEA,SACC,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGE;AAAhB,KACC,4BAAC,wBAAD;AAAe,IAAA,EAAE,EAAGE,kCAApB;AAA+B,IAAA,IAAI,EAAC;AAApC,KAAoDH,KAApD,GAIC,4BAAC,8BAAD,QAAkBD,KAAlB,CAJD,EAKC,4BAAC,mCAAD;AAAO,IAAA,QAAQ,EAAGD,QAAlB;AAA6B,IAAA,IAAI,EAAC;AAAlC,IALD,CADD,CADD;AAWA","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';\n\nexport default function Cell( { isActive = false, value, ...props } ) {\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"]}

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

@@ -26,14 +26,15 @@ var _alignmentMatrixControlIconStyles = require("./styles/alignment-matrix-contr
  */
 const BASE_SIZE = 24;
 
-function AlignmentMatrixControlIcon({
-  className,
-  disablePointerEvents = true,
-  size = BASE_SIZE,
-  style = {},
-  value = 'center',
-  ...props
-}) {
+function AlignmentMatrixControlIcon(_ref) {
+  let {
+    className,
+    disablePointerEvents = true,
+    size = BASE_SIZE,
+    style = {},
+    value = 'center',
+    ...props
+  } = _ref;
   const alignIndex = (0, _utils.getAlignmentIndex)(value);
   const scale = (size / BASE_SIZE).toFixed(2);
   const classes = (0, _classnames.default)('component-alignment-matrix-control-icon', className);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/icon.js"],"names":["BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","ALIGNMENTS","map","align","index","isActive"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,SAAS,GAAG,EAAlB;;AAEe,SAASC,0BAAT,CAAqC;AACnDC,EAAAA,SADmD;AAEnDC,EAAAA,oBAAoB,GAAG,IAF4B;AAGnDC,EAAAA,IAAI,GAAGJ,SAH4C;AAInDK,EAAAA,KAAK,GAAG,EAJ2C;AAKnDC,EAAAA,KAAK,GAAG,QAL2C;AAMnD,KAAGC;AANgD,CAArC,EAOX;AACH,QAAMC,UAAU,GAAG,8BAAmBF,KAAnB,CAAnB;AACA,QAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAT,EAAqBU,OAArB,CAA8B,CAA9B,CAAd;AAEA,QAAMC,OAAO,GAAG,yBACf,yCADe,EAEfT,SAFe,CAAhB;AAKA,QAAMU,MAAM,GAAG,EACd,GAAGP,KADW;AAEdQ,IAAAA,SAAS,EAAG,SAASJ,KAAO;AAFd,GAAf;AAKA,SACC,4BAAC,sCAAD,6BACMF,KADN;AAEC,IAAA,SAAS,EAAGI,OAFb;AAGC,IAAA,oBAAoB,EAAGR,oBAHxB;AAIC,IAAA,IAAI,EAAC,cAJN;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,KAAK,EAAGQ;AANT,MAQGE,kBAAWC,GAAX,CAAgB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AACrC,UAAMC,QAAQ,GAAGV,UAAU,KAAKS,KAAhC;AAEA,WACC,4BAAC,sCAAD;AAAM,MAAA,GAAG,EAAGD;AAAZ,OACC,4BAAC,uCAAD;AAAO,MAAA,QAAQ,EAAGE;AAAlB,MADD,CADD;AAKA,GARC,CARH,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\n\nconst BASE_SIZE = 24;\n\nexport default function AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n} ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tsize={ size }\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/icon.js"],"names":["BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","ALIGNMENTS","map","align","index","isActive"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,SAAS,GAAG,EAAlB;;AAEe,SAASC,0BAAT,OAOX;AAAA,MAPgD;AACnDC,IAAAA,SADmD;AAEnDC,IAAAA,oBAAoB,GAAG,IAF4B;AAGnDC,IAAAA,IAAI,GAAGJ,SAH4C;AAInDK,IAAAA,KAAK,GAAG,EAJ2C;AAKnDC,IAAAA,KAAK,GAAG,QAL2C;AAMnD,OAAGC;AANgD,GAOhD;AACH,QAAMC,UAAU,GAAG,8BAAmBF,KAAnB,CAAnB;AACA,QAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAT,EAAqBU,OAArB,CAA8B,CAA9B,CAAd;AAEA,QAAMC,OAAO,GAAG,yBACf,yCADe,EAEfT,SAFe,CAAhB;AAKA,QAAMU,MAAM,GAAG,EACd,GAAGP,KADW;AAEdQ,IAAAA,SAAS,EAAG,SAASJ,KAAO;AAFd,GAAf;AAKA,SACC,4BAAC,sCAAD,6BACMF,KADN;AAEC,IAAA,SAAS,EAAGI,OAFb;AAGC,IAAA,oBAAoB,EAAGR,oBAHxB;AAIC,IAAA,IAAI,EAAC,cAJN;AAKC,IAAA,IAAI,EAAGC,IALR;AAMC,IAAA,KAAK,EAAGQ;AANT,MAQGE,kBAAWC,GAAX,CAAgB,CAAEC,KAAF,EAASC,KAAT,KAAoB;AACrC,UAAMC,QAAQ,GAAGV,UAAU,KAAKS,KAAhC;AAEA,WACC,4BAAC,sCAAD;AAAM,MAAA,GAAG,EAAGD;AAAZ,OACC,4BAAC,uCAAD;AAAO,MAAA,QAAQ,EAAGE;AAAlB,MADD,CADD;AAKA,GARC,CARH,CADD;AAoBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\n\nconst BASE_SIZE = 24;\n\nexport default function AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n} ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = classnames(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tsize={ size }\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n"]}

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

@@ -45,16 +45,17 @@ function useBaseId(id) {
   return id || instanceId;
 }
 
-function AlignmentMatrixControl({
-  className,
-  id,
-  label = (0, _i18n.__)('Alignment Matrix Control'),
-  defaultValue = 'center center',
-  value,
-  onChange = _lodash.noop,
-  width = 92,
-  ...props
-}) {
+function AlignmentMatrixControl(_ref) {
+  let {
+    className,
+    id,
+    label = (0, _i18n.__)('Alignment Matrix Control'),
+    defaultValue = 'center center',
+    value,
+    onChange = _lodash.noop,
+    width = 92,
+    ...props
+  } = _ref;
   const [immutableDefaultValue] = (0, _element.useState)(value !== null && value !== void 0 ? value : defaultValue);
   const baseId = useBaseId(id);
   const initialCurrentId = (0, _utils.getItemId)(baseId, immutableDefaultValue);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","noop","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,SAAT,CAAoBC,EAApB,EAAyB;AACxB,QAAMC,UAAU,GAAG,4BAClBC,sBADkB,EAElB,0BAFkB,CAAnB;AAKA,SAAOF,EAAE,IAAIC,UAAb;AACA;;AAEc,SAASC,sBAAT,CAAiC;AAC/CC,EAAAA,SAD+C;AAE/CH,EAAAA,EAF+C;AAG/CI,EAAAA,KAAK,GAAG,cAAI,0BAAJ,CAHuC;AAI/CC,EAAAA,YAAY,GAAG,eAJgC;AAK/CC,EAAAA,KAL+C;AAM/CC,EAAAA,QAAQ,GAAGC,YANoC;AAO/CC,EAAAA,KAAK,GAAG,EAPuC;AAQ/C,KAAGC;AAR4C,CAAjC,EASX;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUL,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMO,MAAM,GAAGb,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMa,gBAAgB,GAAG,sBAAWD,MAAX,EAAmBD,qBAAnB,CAAzB;AAEA,QAAMG,SAAS,GAAG,kCAAmB;AACpCF,IAAAA,MADoC;AAEpCG,IAAAA,SAAS,EAAEF,gBAFyB;AAGpCG,IAAAA,GAAG,EAAE;AAH+B,GAAnB,CAAlB;;AAMA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AACvCX,IAAAA,QAAQ,CAAEW,SAAF,CAAR;AACA,GAFD;;AAIA,0BAAW,MAAM;AAChB,QAAK,OAAOZ,KAAP,KAAiB,WAAtB,EAAoC;AACnCQ,MAAAA,SAAS,CAACK,YAAV,CAAwB,sBAAWP,MAAX,EAAmBN,KAAnB,CAAxB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASQ,SAAS,CAACK,YAAnB,CAJH;AAMA,QAAMC,OAAO,GAAG,yBACf,oCADe,EAEfjB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMO,KADN,EAEMI,SAFN;AAGC,kBAAaV,KAHd;AAIC,IAAA,EAAE,EAAGiB,kCAJN;AAKC,IAAA,SAAS,EAAGD,OALb;AAMC,IAAA,IAAI,EAAC,MANN;AAOC,IAAA,KAAK,EAAGX;AAPT,MASGa,YAAKC,GAAL,CAAU,CAAEC,KAAF,EAASC,KAAT,KACX,4BAAC,yBAAD,6BACMX,SADN;AAEC,IAAA,EAAE,EAAGY,iCAFN;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,IAAA,GAAG,EAAGD;AAJP,MAMGD,KAAK,CAACD,GAAN,CAAaI,IAAF,IAAY;AACxB,UAAMC,MAAM,GAAG,sBAAWhB,MAAX,EAAmBe,IAAnB,CAAf;AACA,UAAME,QAAQ,GAAGf,SAAS,CAACC,SAAV,KAAwBa,MAAzC;AAEA,WACC,4BAAC,aAAD,6BACMd,SADN;AAEC,MAAA,EAAE,EAAGc,MAFN;AAGC,MAAA,QAAQ,EAAGC,QAHZ;AAIC,MAAA,GAAG,EAAGF,IAJP;AAKC,MAAA,KAAK,EAAGA,IALT;AAMC,MAAA,OAAO,EAAG,MAAMV,cAAc,CAAEU,IAAF,CAN/B;AAOC,MAAA,QAAQ,EAAGE,QAAQ,GAAG,CAAH,GAAO,CAAC;AAP5B,OADD;AAWA,GAfC,CANH,CADC,CATH,CADD;AAqCA;;AAED3B,sBAAsB,CAAC4B,IAAvB,GAA8BC,aAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\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';\n\nfunction useBaseId( id ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\nexport default 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} ) {\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 ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tcomposite.setCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, composite.setCurrentId ] );\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\twidth={ 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"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","noop","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAOA,SAASA,SAAT,CAAoBC,EAApB,EAAyB;AACxB,QAAMC,UAAU,GAAG,4BAClBC,sBADkB,EAElB,0BAFkB,CAAnB;AAKA,SAAOF,EAAE,IAAIC,UAAb;AACA;;AAEc,SAASC,sBAAT,OASX;AAAA,MAT4C;AAC/CC,IAAAA,SAD+C;AAE/CH,IAAAA,EAF+C;AAG/CI,IAAAA,KAAK,GAAG,cAAI,0BAAJ,CAHuC;AAI/CC,IAAAA,YAAY,GAAG,eAJgC;AAK/CC,IAAAA,KAL+C;AAM/CC,IAAAA,QAAQ,GAAGC,YANoC;AAO/CC,IAAAA,KAAK,GAAG,EAPuC;AAQ/C,OAAGC;AAR4C,GAS5C;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUL,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMO,MAAM,GAAGb,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMa,gBAAgB,GAAG,sBAAWD,MAAX,EAAmBD,qBAAnB,CAAzB;AAEA,QAAMG,SAAS,GAAG,kCAAmB;AACpCF,IAAAA,MADoC;AAEpCG,IAAAA,SAAS,EAAEF,gBAFyB;AAGpCG,IAAAA,GAAG,EAAE;AAH+B,GAAnB,CAAlB;;AAMA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AACvCX,IAAAA,QAAQ,CAAEW,SAAF,CAAR;AACA,GAFD;;AAIA,0BAAW,MAAM;AAChB,QAAK,OAAOZ,KAAP,KAAiB,WAAtB,EAAoC;AACnCQ,MAAAA,SAAS,CAACK,YAAV,CAAwB,sBAAWP,MAAX,EAAmBN,KAAnB,CAAxB;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASQ,SAAS,CAACK,YAAnB,CAJH;AAMA,QAAMC,OAAO,GAAG,yBACf,oCADe,EAEfjB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMO,KADN,EAEMI,SAFN;AAGC,kBAAaV,KAHd;AAIC,IAAA,EAAE,EAAGiB,kCAJN;AAKC,IAAA,SAAS,EAAGD,OALb;AAMC,IAAA,IAAI,EAAC,MANN;AAOC,IAAA,KAAK,EAAGX;AAPT,MASGa,YAAKC,GAAL,CAAU,CAAEC,KAAF,EAASC,KAAT,KACX,4BAAC,yBAAD,6BACMX,SADN;AAEC,IAAA,EAAE,EAAGY,iCAFN;AAGC,IAAA,IAAI,EAAC,KAHN;AAIC,IAAA,GAAG,EAAGD;AAJP,MAMGD,KAAK,CAACD,GAAN,CAAaI,IAAF,IAAY;AACxB,UAAMC,MAAM,GAAG,sBAAWhB,MAAX,EAAmBe,IAAnB,CAAf;AACA,UAAME,QAAQ,GAAGf,SAAS,CAACC,SAAV,KAAwBa,MAAzC;AAEA,WACC,4BAAC,aAAD,6BACMd,SADN;AAEC,MAAA,EAAE,EAAGc,MAFN;AAGC,MAAA,QAAQ,EAAGC,QAHZ;AAIC,MAAA,GAAG,EAAGF,IAJP;AAKC,MAAA,KAAK,EAAGA,IALT;AAMC,MAAA,OAAO,EAAG,MAAMV,cAAc,CAAEU,IAAF,CAN/B;AAOC,MAAA,QAAQ,EAAGE,QAAQ,GAAG,CAAH,GAAO,CAAC;AAP5B,OADD;AAWA,GAfC,CANH,CADC,CATH,CADD;AAqCA;;AAED3B,sBAAsB,CAAC4B,IAAvB,GAA8BC,aAA9B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\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';\n\nfunction useBaseId( id ) {\n\tconst instanceId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control'\n\t);\n\n\treturn id || instanceId;\n}\n\nexport default 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} ) {\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 ) => {\n\t\tonChange( nextValue );\n\t};\n\n\tuseEffect( () => {\n\t\tif ( typeof value !== 'undefined' ) {\n\t\t\tcomposite.setCurrentId( getItemId( baseId, value ) );\n\t\t}\n\t}, [ value, composite.setCurrentId ] );\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\twidth={ 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"]}