@wordpress/components 19.11.0 → 19.14.0

package/CHANGELOG.md

@@ -2,6 +2,113 @@
 
 ## Unreleased
 
+## 19.14.0 (2022-06-29)
+
+### Bug Fix
+
+-   `ColorPicker`: Remove horizontal scrollbar when using HSL or RGB color input types. ([#41646](https://github.com/WordPress/gutenberg/pull/41646))
+
+### Enhancements
+
+-   Wrapped `ColorIndicator` in a `forwardRef` call ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
+-   `BorderControl`: Improve TypeScript support. ([#41843](https://github.com/WordPress/gutenberg/pull/41843)).
+-   `DatePicker`: highlight today's date. ([#41647](https://github.com/WordPress/gutenberg/pull/41647/)).
+-   Allow automatic repositioning of `BorderBoxControl` and `ColorPalette` popovers within smaller viewports ([#41930](https://github.com/WordPress/gutenberg/pull/41930)).
+
+### Internal
+
+-   `Spinner`: Convert to TypeScript and update storybook ([#41540](https://github.com/WordPress/gutenberg/pull/41540/)).
+-   `InputControl`: Add tests and update to use `@testing-library/user-event` ([#41421](https://github.com/WordPress/gutenberg/pull/41421)).
+-   `FormToggle`: Convert to TypeScript ([#41729](https://github.com/WordPress/gutenberg/pull/41729)).
+-   `ColorIndicator`: Convert to TypeScript ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
+-   `Truncate`: Convert to TypeScript ([#41697](https://github.com/WordPress/gutenberg/pull/41697)).
+-   `FocalPointPicker`: Refactor away from `_.clamp()` ([#41735](https://github.com/WordPress/gutenberg/pull/41735/)).
+-   `RangeControl`: Refactor away from `_.clamp()` ([#41735](https://github.com/WordPress/gutenberg/pull/41735/)).
+-   Refactor components `utils` away from `_.clamp()` ([#41735](https://github.com/WordPress/gutenberg/pull/41735/)).
+-   `BoxControl`: Refactor utils away from `_.isNumber()` ([#41776](https://github.com/WordPress/gutenberg/pull/41776/)).
+-   `Elevation`: Refactor away from `_.isNil()` ([#41785](https://github.com/WordPress/gutenberg/pull/41785/)).
+-   `HStack`: Refactor away from `_.isNil()` ([#41785](https://github.com/WordPress/gutenberg/pull/41785/)).
+-   `Truncate`: Refactor away from `_.isNil()` ([#41785](https://github.com/WordPress/gutenberg/pull/41785/)).
+-   `VStack`: Convert to TypeScript ([#41850](https://github.com/WordPress/gutenberg/pull/41587)).
+-   `AlignmentMatrixControl`: Refactor away from `_.flattenDeep()` in utils ([#41814](https://github.com/WordPress/gutenberg/pull/41814/)).
+-   `AutoComplete`: Revert recent `exhaustive-deps` refactor ([#41820](https://github.com/WordPress/gutenberg/pull/41820)).
+-   `Spacer`: Convert knobs to controls in Storybook ([#41851](https://github.com/WordPress/gutenberg/pull/41851)).
+-   `Heading`: Complete TypeScript migration ([#41921](https://github.com/WordPress/gutenberg/pull/41921)).
+-   `Navigation`: Refactor away from Lodash functions ([#41865](https://github.com/WordPress/gutenberg/pull/41865/)).
+-   `CustomGradientPicker`: Refactor away from Lodash ([#41901](https://github.com/WordPress/gutenberg/pull/41901/)).
+-   `SegmentedControl`: Refactor away from `_.values()` ([#41905](https://github.com/WordPress/gutenberg/pull/41905/)).
+-   `DimensionControl`: Refactor docs away from `_.partialRight()` ([#41909](https://github.com/WordPress/gutenberg/pull/41909/)).
+-   `NavigationItem` updated to ignore `react/exhuastive-deps` eslint rule ([#41639](https://github.com/WordPress/gutenberg/pull/41639)).
+
+## 19.13.0 (2022-06-15)
+
+### Bug Fix
+
+-   `Tooltip`: Opt in to `__unstableShift` to ensure that the Tooltip is always within the viewport. ([#41524](https://github.com/WordPress/gutenberg/pull/41524))
+-   `FormTokenField`: Do not suggest the selected one even if `{ value: string }` is passed ([#41216](https://github.com/WordPress/gutenberg/pull/41216)).
+-   `CustomGradientBar`: Fix insertion and control point positioning to more closely follow cursor. ([#41492](https://github.com/WordPress/gutenberg/pull/41492))
+-   `FormTokenField`: Added Padding to resolve close button overlap issue ([#41556](https://github.com/WordPress/gutenberg/pull/41556)).
+-   `ComboboxControl`: fix the autofocus behavior after resetting the value. ([#41737](https://github.com/WordPress/gutenberg/pull/41737)).
+
+### Enhancements
+
+-   `AnglePickerControl`: Use NumberControl as input field ([#41472](https://github.com/WordPress/gutenberg/pull/41472)).
+
+### Internal
+
+-   `FormTokenField`: Convert to TypeScript and refactor to functional component ([#41216](https://github.com/WordPress/gutenberg/pull/41216)).
+-   `Draggable`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41499](https://github.com/WordPress/gutenberg/pull/41499))
+-   `RadioControl`: Convert to TypeScript ([#41568](https://github.com/WordPress/gutenberg/pull/41568)).
+-   `Flex` updated to satisfy `react/exhuastive-deps` eslint rule ([#41507](https://github.com/WordPress/gutenberg/pull/41507)).
+-   `CustomGradientBar` updated to satisfy `react/exhuastive-deps` eslint rule ([#41463](https://github.com/WordPress/gutenberg/pull/41463))
+-   `TreeSelect`: Convert to TypeScript ([#41536](https://github.com/WordPress/gutenberg/pull/41536)).
+-   `FontSizePicker`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41600](https://github.com/WordPress/gutenberg/pull/41600)).
+-   `ZStack`: Convert component story to TypeScript and add inline docs ([#41694](https://github.com/WordPress/gutenberg/pull/41694)).
+-   `Dropdown`: Make sure cleanup (closing the dropdown) only runs when the menu has actually been opened.
+-   Enhance the TypeScript migration guidelines ([#41669](https://github.com/WordPress/gutenberg/pull/41669)).
+-   `ExternalLink`: Convert to TypeScript ([#41681](https://github.com/WordPress/gutenberg/pull/41681)).
+-   `InputControl` updated to satisfy `react/exhuastive-deps` eslint rule ([#41601](https://github.com/WordPress/gutenberg/pull/41601))
+-   `Modal`: updated to satisfy `react/exhuastive-deps` eslint rule ([#41610](https://github.com/WordPress/gutenberg/pull/41610))
+
+### Experimental
+
+-   `Navigation`: improve unit tests by using `@testing-library/user-event` and modern `@testing-library` assertions; add unit test for controlled component ([#41668](https://github.com/WordPress/gutenberg/pull/41668)).
+
+## 19.12.0 (2022-06-01)
+
+### Bug Fix
+
+-   `Popover`, `Dropdown`, `CustomGradientPicker`: Fix dropdown positioning by always targeting the rendered toggle, and switch off width in the Popover size middleware to stop reducing the width of the popover. ([#41361](https://github.com/WordPress/gutenberg/pull/41361))
+-   Fix `InputControl` blocking undo/redo while focused. ([#40518](https://github.com/WordPress/gutenberg/pull/40518))
+-   `ColorPalette`: Correctly update color name label when CSS variables are involved ([#41461](https://github.com/WordPress/gutenberg/pull/41461)).
+
+### Enhancements
+
+-   `SelectControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#41269](https://github.com/WordPress/gutenberg/pull/41269)).
+-   `ColorPicker`: Strip leading hash character from hex values pasted into input. ([#41223](https://github.com/WordPress/gutenberg/pull/41223))
+-   `ColorPicker`: Display detailed color inputs by default. ([#41222](https://github.com/WordPress/gutenberg/pull/41222))
+-   Updated design for the `DateTimePicker`, `DatePicker` and `TimePicker` components ([#41097](https://github.com/WordPress/gutenberg/pull/41097)).
+-   `DateTimePicker`: Add `__nextRemoveHelpButton` and `__nextRemoveResetButton` for opting into new behaviour where there is no Help and Reset button ([#41097](https://github.com/WordPress/gutenberg/pull/41097)).
+
+### Internal
+
+-   `AlignmentMatrixControl` updated to satisfy `react/exhuastive-deps` eslint rule ([#41167](https://github.com/WordPress/gutenberg/pull/41167))
+-   `BorderControl` updated to satisfy `react/exhuastive-deps` eslint rule ([#41259](https://github.com/WordPress/gutenberg/pull/41259))
+-   `CheckboxControl`: Add unit tests ([#41165](https://github.com/WordPress/gutenberg/pull/41165)).
+-   `BorderBoxControl`: fix some layout misalignments, especially for RTL users ([#41254](https://github.com/WordPress/gutenberg/pull/41254)).
+-   `TimePicker`: Update unit tests to use `@testing-library/user-event` ([#41270](https://github.com/WordPress/gutenberg/pull/41270)).
+-   `DateTimePicker`: Update `moment` to 2.26.0 and update `react-date` typings ([#41266](https://github.com/WordPress/gutenberg/pull/41266)).
+-   `TextareaControl`: Convert to TypeScript ([#41215](https://github.com/WordPress/gutenberg/pull/41215)).
+-   `BoxControl`: Update unit tests to use `@testing-library/user-event` ([#41422](https://github.com/WordPress/gutenberg/pull/41422)).
+-   `Surface`: Convert to TypeScript ([#41212](https://github.com/WordPress/gutenberg/pull/41212)).
+-   `Autocomplete` updated to satisfy `react/exhuastive-deps` eslint rule ([#41382](https://github.com/WordPress/gutenberg/pull/41382))
+-   `Dropdown` updated to satisfy `react/exhuastive-deps` eslint rule ([#41505](https://github.com/WordPress/gutenberg/pull/41505))
+-   `DateDayPicker` updated to satisfy `react/exhuastive-deps` eslint rule ([#41470](https://github.com/WordPress/gutenberg/pull/41470)).
+
+### Experimental
+
+-   `Spacer`: Add RTL support. ([#41172](https://github.com/WordPress/gutenberg/pull/41172))
+
 ## 19.11.0 (2022-05-18)
 
 ### Enhancements
@@ -10,6 +117,8 @@
 -   `BorderControl` & `BorderBoxControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40920](https://github.com/WordPress/gutenberg/pull/40920)).
 -   `BorderControl` improved focus and border radius styling for component. ([#40951](https://github.com/WordPress/gutenberg/pull/40951))
 -   Improve focused `CircularOptionPicker` styling ([#40990](https://github.com/WordPress/gutenberg/pull/40990))
+-   `BorderControl`: Make border color consistent with other controls ([#40921](https://github.com/WordPress/gutenberg/pull/40921))
+-   `SelectControl`: Remove `lineHeight` setting to fix issue with font descenders being cut off ([#40985](https://github.com/WordPress/gutenberg/pull/40985))
 
 ### Internal
 
@@ -17,6 +126,7 @@
 -   `DateTimePicker`: Convert unit tests to TypeScript ([#40957](https://github.com/WordPress/gutenberg/pull/40957)).
 -   `CheckboxControl`: Convert to TypeScript ([#40915](https://github.com/WordPress/gutenberg/pull/40915)).
 -   `ButtonGroup`: Convert to TypeScript ([#41007](https://github.com/WordPress/gutenberg/pull/41007)).
+-   `Popover`: refactor component to use the `floating-ui` library internally ([#40740](https://github.com/WordPress/gutenberg/pull/40740)).
 
 ## 19.10.0 (2022-05-04)
 

package/CONTRIBUTING.md

@@ -19,6 +19,7 @@ For an example of a component that follows these requirements, take a look at [`
 - [Documentation](#documentation)
 - [README example](#README-example)
 - [Folder structure](#folder-structure)
+- [TypeScript migration guide](#refactoring-a-component-to-typescript)
 
 ## Compatibility
 
@@ -489,13 +490,99 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		2. Resume work on this component once all dependencies have been refactored.
 	2. Alternatively:
 		1. For each of those files, add `// @ts-nocheck` at the start of the file.
-		2. Add the folders to the `tsconfig.json` file.
-		3. If you’re still getting errors about a component’s props, the easiest way is to slightly refactor this component and perform the props destructuring inside the component’s body (as opposed as in the function signature) — this is to prevent TypeScript from inferring the types of these props.
-		4. Continue with the refactor of the current component (and take care of the refactor of the dependent components at a later stage).
+		2. If the components in the ignored files are destructuring props directly from the function's arguments, move the props destructuring to the function's body (this is to avoid TypeScript errors from trying to infer the props type):
+
+			```jsx
+			// Before:
+			function MyComponent( { myProp1, myProp2, ...restProps } ) { /* ... */ }
+
+			// After:
+			function MyComponent( props ) {
+				const {  myProp1, myProp2, ...restProps } = props;
+
+				/* ... */
+			}
+			```
+
+		3. Add the folders to the `tsconfig.json` file.
+		4. If you’re still getting errors about a component’s props, the easiest way is to slightly refactor this component and perform the props destructuring inside the component’s body (as opposed as in the function signature) — this is to prevent TypeScript from inferring the types of these props.
+		5. Continue with the refactor of the current component (and take care of the refactor of the dependent components at a later stage).
 6. Create a new `types.ts` file.
 7. Slowly work your way through fixing the TypeScript errors in the folder:
 	1. Try to avoid introducing any runtime changes, if possible. The aim of this refactor is to simply rewrite the component to TypeScript.
-	2. Make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
+	2. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type.
+	3. Use existing HTML types when possible? (e.g. `required` for an input field?)
+	4. Use the `CSSProperties` type where it makes sense.
+	5. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
+	6. If the component forwards its `...restProps` to an underlying element/component, you should use the `WordPressComponentProps` type for the component's props:
+
+		```jsx
+		import type { WordPressComponentProps } from '../ui/context';
+		import type { ComponentOwnProps } from './types';
+
+		function UnconnectedMyComponent(
+			// The resulting type will include:
+			// - all props defined in `ComponentOwnProps`
+			// - all HTML props/attributes from the component specified as the second
+			//   parameter (`div` in this example)
+			// - the special `as` prop (which marks the component as polymorphic),
+			//   unless the third parameter is `false`
+			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >
+		) { /* ... */ }
+		```
+
+	7. If the component doesn't forwards its ref yet, wrap the component in a `forwardRed` call. Alternatively, if you want to take advantage of the [Context system](#context-system), you can use the `contextConnect` utility function (which also takes care of adding ref forwarding)
+
+		```jsx
+		// With `forwardRef`
+		import type { ForwardedRef } from 'react';
+		import { forwardRef } from '@wordpress/element';
+		import type { WordPressComponentProps } from '../ui/context';
+		import type { ComponentOwnProps } from './types';
+
+		function UnforwardedMyComponent(
+			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >,
+			forwardedRef: ForwardedRef< any >
+		) { /* ... */ }
+
+
+		/**
+		 * MyComponent JSDoc
+		 */
+		export const MyComponent = forwardRef( UnforwardedMyComponent );
+
+		export default MyComponent;
+		```
+
+		```jsx
+		// With `contextConnect`
+		import type { ForwardedRef } from 'react';
+		import {
+			contextConnect,
+			useContextSystem,
+			WordPressComponentProps,
+		} from '../ui/context';
+		import type { ComponentOwnProps } from './types';
+
+		function UnconnectedMyComponent(
+			props:  WordPressComponentProps< ComponentOwnProps, 'div', true >,
+			forwardedRef: ForwardedRef< any >
+		) {
+			const contextProps = useContextSystem( props, 'MyComponent' );
+
+			/* ... */
+		}
+
+
+		/**
+		 * MyComponent JSDoc
+		 */
+		export const MyComponent = contextConnect( UnconnectedMyComponent, 'MyComponent' );
+
+		export default MyComponent;
+		```
+
+	8. As shown in the previous examples, make sure you have a **named** export for the component, not just the default export ([example](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/divider/component.tsx)). This ensures that the docgen can properly extract the types data. The naming should be so that the connected/forwarded component has the plain component name (`MyComponent`), and the raw component is prefixed (`UnconnectedMyComponent` or `UnforwardedMyComponent`). This makes the component's `displayName` look nicer in React devtools and in the autogenerated Storybook code snippets.
 
 		```jsx
 		function UnconnectedMyComponent() { /* ... */ }
@@ -505,14 +592,9 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 		export default MyComponent;
 		```
 
-	3. Extract props to `types.ts`, and use them to type components. The README can be of help when determining a prop’s type.
-	4. Use existing HTML types when possible? (e.g. `required` for an input field?)
-	5. Use the `CSSProperties` type where it makes sense.
-	6. Extend existing components’ props if possible, especially when a component internally forwards its props to another component in the package.
-	7. Use `WordPressComponent` type if possible.
-	8. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
-	9. Prefer `unknown` to `any`, and in general avoid it when possible.
-8. On the component's main export, add a JSDoc comment that includes the main description and `@example` code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/943cec92f21fedcd256502ea72d9903941f3b05a/packages/components/src/unit-control/index.tsx#L290-L306))
+	9. Use JSDocs syntax for each TypeScript property that is part of the public API of a component. The docs used here should be aligned with the component’s README. Add `@default` values where appropriate.
+	10. Prefer `unknown` to `any`, and in general avoid it when possible.
+8. On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
 9. Make sure that:
 	1. tests still pass;
 	2. storybook examples work as expected.

package/README.md

@@ -71,7 +71,7 @@ const Example = () => {
 
 ## Docs & examples
 
-You can browse the components docs and examples at https://wordpress.github.io/gutenberg/
+You can browse the components docs and examples at [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)
 
 ## Contributing to this package
 

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

@@ -11,8 +11,6 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _i18n = require("@wordpress/i18n");
@@ -40,6 +38,8 @@ var _utils = require("./utils");
 /**
  * Internal dependencies
  */
+const noop = () => {};
+
 function useBaseId(id) {
   const instanceId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control');
   return id || instanceId;
@@ -52,7 +52,7 @@ function AlignmentMatrixControl(_ref) {
     label = (0, _i18n.__)('Alignment Matrix Control'),
     defaultValue = 'center center',
     value,
-    onChange = _lodash.noop,
+    onChange = noop,
     width = 92,
     ...props
   } = _ref;
@@ -69,11 +69,14 @@ function AlignmentMatrixControl(_ref) {
     onChange(nextValue);
   };
 
+  const {
+    setCurrentId
+  } = composite;
   (0, _element.useEffect)(() => {
     if (typeof value !== 'undefined') {
-      composite.setCurrentId((0, _utils.getItemId)(baseId, value));
+      setCurrentId((0, _utils.getItemId)(baseId, value));
     }
-  }, [value, composite.setCurrentId]);
+  }, [value, setCurrentId, baseId]);
   const classes = (0, _classnames.default)('component-alignment-matrix-control', className);
   return (0, _element.createElement)(_composite.Composite, (0, _extends2.default)({}, props, composite, {
     "aria-label": label,

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,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"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/index.js"],"names":["noop","useBaseId","id","instanceId","AlignmentMatrixControl","className","label","defaultValue","value","onChange","width","props","immutableDefaultValue","baseId","initialCurrentId","composite","currentId","rtl","handleOnChange","nextValue","setCurrentId","classes","Root","GRID","map","cells","index","Row","cell","cellId","isActive","Icon","AlignmentMatrixControlIcon"],"mappings":";;;;;;;;;AAUA;;;;AAPA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAOA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,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,GAAGT,IANoC;AAO/CU,IAAAA,KAAK,GAAG,EAPuC;AAQ/C,OAAGC;AAR4C,GAS5C;AACH,QAAM,CAAEC,qBAAF,IAA4B,uBAAUJ,KAAV,aAAUA,KAAV,cAAUA,KAAV,GAAmBD,YAAnB,CAAlC;AACA,QAAMM,MAAM,GAAGZ,SAAS,CAAEC,EAAF,CAAxB;AACA,QAAMY,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;AACvCV,IAAAA,QAAQ,CAAEU,SAAF,CAAR;AACA,GAFD;;AAIA,QAAM;AAAEC,IAAAA;AAAF,MAAmBL,SAAzB;AAEA,0BAAW,MAAM;AAChB,QAAK,OAAOP,KAAP,KAAiB,WAAtB,EAAoC;AACnCY,MAAAA,YAAY,CAAE,sBAAWP,MAAX,EAAmBL,KAAnB,CAAF,CAAZ;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASY,YAAT,EAAuBP,MAAvB,CAJH;AAMA,QAAMQ,OAAO,GAAG,yBACf,oCADe,EAEfhB,SAFe,CAAhB;AAKA,SACC,4BAAC,oBAAD,6BACMM,KADN,EAEMI,SAFN;AAGC,kBAAaT,KAHd;AAIC,IAAA,EAAE,EAAGgB,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;;AAED1B,sBAAsB,CAAC2B,IAAvB,GAA8BC,aAA9B","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';\n\nconst noop = () => {};\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\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\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"]}

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

@@ -8,14 +8,8 @@ exports.getAlignmentIndex = getAlignmentIndex;
 exports.getItemId = getItemId;
 exports.transformValue = transformValue;
 
-var _lodash = require("lodash");
-
 var _i18n = require("@wordpress/i18n");
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -35,7 +29,7 @@ const ALIGNMENT_LABEL = {
 }; // Transforms GRID into a flat Array of values.
 
 exports.ALIGNMENT_LABEL = ALIGNMENT_LABEL;
-const ALIGNMENTS = (0, _lodash.flattenDeep)(GRID);
+const ALIGNMENTS = GRID.flat();
 /**
  * Parses and transforms an incoming value to better match the alignment values
  *

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/utils.js"],"names":["GRID","ALIGNMENT_LABEL","ALIGNMENTS","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"mappings":";;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,IAAI,GAAG,CACnB,CAAE,UAAF,EAAc,YAAd,EAA4B,WAA5B,CADmB,EAEnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAFmB,EAGnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAHmB,CAAb,C,CAMP;;;AACO,MAAMC,eAAe,GAAG;AAC9B,cAAY,cAAI,UAAJ,CADkB;AAE9B,gBAAc,cAAI,YAAJ,CAFgB;AAG9B,eAAa,cAAI,WAAJ,CAHiB;AAI9B,iBAAe,cAAI,aAAJ,CAJe;AAK9B,mBAAiB,cAAI,eAAJ,CALa;AAM9B,kBAAgB,cAAI,cAAJ,CANc;AAO9B,iBAAe,cAAI,aAAJ,CAPe;AAQ9B,mBAAiB,cAAI,eAAJ,CARa;AAS9B,kBAAgB,cAAI,cAAJ;AATc,CAAxB,C,CAYP;;;AACO,MAAMC,UAAU,GAAG,yBAAaF,IAAb,CAAnB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACO,SAASG,cAAT,CAAyBC,KAAzB,EAAiC;AACvC,QAAMC,SAAS,GAAGD,KAAK,KAAK,QAAV,GAAqB,eAArB,GAAuCA,KAAzD;AAEA,SAAOC,SAAS,CAACC,OAAV,CAAmB,GAAnB,EAAwB,GAAxB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,SAAT,CAAoBC,QAApB,EAA8BJ,KAA9B,EAAsC;AAC5C,QAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAF,CAAd,CAAwBE,OAAxB,CAAiC,GAAjC,EAAsC,GAAtC,CAAhB;AAEA,SAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAlC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,iBAAT,GAAmD;AAAA,MAAvBC,SAAuB,uEAAX,QAAW;AACzD,QAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAF,CAAd,CAA4BL,OAA5B,CAAqC,GAArC,EAA0C,GAA1C,CAAb;AACA,QAAMO,KAAK,GAAGX,UAAU,CAACY,OAAX,CAAoBF,IAApB,CAAd;AAEA,SAAOC,KAAK,GAAG,CAAC,CAAT,GAAaA,KAAb,GAAqBE,SAA5B;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { flattenDeep } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const GRID = [\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 = {\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 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 = flattenDeep( GRID );\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param {string} value An alignment value to parse.\n *\n * @return {string} The parsed value.\n */\nexport function transformValue( value ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' );\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param {string} prefixId An ID to prefix.\n * @param {string} value    An alignment value.\n *\n * @return {string} The item id.\n */\nexport function getItemId( prefixId, value ) {\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 {string} alignment Value to check.\n *\n * @return {number} The index of a matching alignment.\n */\nexport function getAlignmentIndex( alignment = 'center' ) {\n\tconst item = transformValue( alignment ).replace( '-', ' ' );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/utils.js"],"names":["GRID","ALIGNMENT_LABEL","ALIGNMENTS","flat","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"mappings":";;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,IAAI,GAAG,CACnB,CAAE,UAAF,EAAc,YAAd,EAA4B,WAA5B,CADmB,EAEnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAFmB,EAGnB,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAHmB,CAAb,C,CAMP;;;AACO,MAAMC,eAAe,GAAG;AAC9B,cAAY,cAAI,UAAJ,CADkB;AAE9B,gBAAc,cAAI,YAAJ,CAFgB;AAG9B,eAAa,cAAI,WAAJ,CAHiB;AAI9B,iBAAe,cAAI,aAAJ,CAJe;AAK9B,mBAAiB,cAAI,eAAJ,CALa;AAM9B,kBAAgB,cAAI,cAAJ,CANc;AAO9B,iBAAe,cAAI,aAAJ,CAPe;AAQ9B,mBAAiB,cAAI,eAAJ,CARa;AAS9B,kBAAgB,cAAI,cAAJ;AATc,CAAxB,C,CAYP;;;AACO,MAAMC,UAAU,GAAGF,IAAI,CAACG,IAAL,EAAnB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACO,SAASC,cAAT,CAAyBC,KAAzB,EAAiC;AACvC,QAAMC,SAAS,GAAGD,KAAK,KAAK,QAAV,GAAqB,eAArB,GAAuCA,KAAzD;AAEA,SAAOC,SAAS,CAACC,OAAV,CAAmB,GAAnB,EAAwB,GAAxB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,SAAT,CAAoBC,QAApB,EAA8BJ,KAA9B,EAAsC;AAC5C,QAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAF,CAAd,CAAwBE,OAAxB,CAAiC,GAAjC,EAAsC,GAAtC,CAAhB;AAEA,SAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAlC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,iBAAT,GAAmD;AAAA,MAAvBC,SAAuB,uEAAX,QAAW;AACzD,QAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAF,CAAd,CAA4BL,OAA5B,CAAqC,GAArC,EAA0C,GAA1C,CAAb;AACA,QAAMO,KAAK,GAAGZ,UAAU,CAACa,OAAX,CAAoBF,IAApB,CAAd;AAEA,SAAOC,KAAK,GAAG,CAAC,CAAT,GAAaA,KAAb,GAAqBE,SAA5B;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const GRID = [\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 = {\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 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 {string} value An alignment value to parse.\n *\n * @return {string} The parsed value.\n */\nexport function transformValue( value ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' );\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param {string} prefixId An ID to prefix.\n * @param {string} value    An alignment value.\n *\n * @return {string} The item id.\n */\nexport function getItemId( prefixId, value ) {\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 {string} alignment Value to check.\n *\n * @return {number} The index of a matching alignment.\n */\nexport function getAlignmentIndex( alignment = 'center' ) {\n\tconst item = transformValue( alignment ).replace( '-', ' ' );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"]}

package/build/angle-picker-control/index.js

@@ -15,7 +15,7 @@ var _i18n = require("@wordpress/i18n");
 
 var _flex = require("../flex");
 
-var _inputControl = _interopRequireDefault(require("../input-control"));
+var _numberControl = _interopRequireDefault(require("../number-control"));
 
 var _angleCircle = _interopRequireDefault(require("./angle-circle"));
 
@@ -54,7 +54,7 @@ function AnglePickerControl(_ref) {
   const classes = (0, _classnames.default)('components-angle-picker-control', className);
   return (0, _element.createElement)(_anglePickerControlStyles.Root, {
     className: classes
-  }, (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_inputControl.default, {
+  }, (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_numberControl.default, {
     label: label,
     className: "components-angle-picker-control__input-field",
     max: 360,

package/build/angle-picker-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginLeft","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,kBAAT,OAKX;AAAA,MALwC;AAC3CC,IAAAA,SAD2C;AAE3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAFmC;AAG3CC,IAAAA,QAH2C;AAI3CC,IAAAA;AAJ2C,GAKxC;;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CR,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,4BAAC,eAAD,QACC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGD,KART;AASC,IAAA,cAAc,MATf;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGM,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAJT;AAXF,IADD,CADD,EA0BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAE,kBAAO,CAAP,CADL;AAEPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CAFP;AAGPC,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGV,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CA1BD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../input-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root className={ classes }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginLeft: space( 4 ),\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginLeft","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASe,SAASA,kBAAT,OAKX;AAAA,MALwC;AAC3CC,IAAAA,SAD2C;AAE3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAFmC;AAG3CC,IAAAA,QAH2C;AAI3CC,IAAAA;AAJ2C,GAKxC;;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CR,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,4BAAC,eAAD,QACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGD,KART;AASC,IAAA,cAAc,MATf;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGM,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAE;AADA;AAJT;AAXF,IADD,CADD,EA0BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAE,kBAAO,CAAP,CADL;AAEPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CAFP;AAGPC,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGV,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CA1BD,CADD;AA0CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root className={ classes }>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\thideHTMLArrows\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginLeft: space( 4 ),\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}

package/build/autocomplete/autocompleter-ui.js

@@ -54,7 +54,9 @@ function getAutoCompleterUI(autocompleter) {
       value
     });
     (0, _element.useLayoutEffect)(() => {
-      onChangeOptions(items);
+      onChangeOptions(items); // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+      // See https://github.com/WordPress/gutenberg/pull/41820
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [items]);
 
     if (!items.length > 0) {

package/build/autocomplete/autocompleter-ui.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.js"],"names":["getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","value","contentRef","items","anchorRef","ref","length","option","index","key","isDisabled","label"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAMA;;AAKA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAKO,SAASA,kBAAT,CAA6BC,aAA7B,EAA6C;AACnD,QAAMC,QAAQ,GAAGD,aAAa,CAACC,QAAd,GACdD,aAAa,CAACC,QADA,GAEd,iCAAoBD,aAApB,CAFH;;AAIA,WAASE,eAAT,OAWI;AAAA,QAXsB;AACzBC,MAAAA,WADyB;AAEzBC,MAAAA,UAFyB;AAGzBC,MAAAA,SAHyB;AAIzBC,MAAAA,SAJyB;AAKzBC,MAAAA,aALyB;AAMzBC,MAAAA,eANyB;AAOzBC,MAAAA,QAPyB;AAQzBC,MAAAA,OARyB;AASzBC,MAAAA,KATyB;AAUzBC,MAAAA;AAVyB,KAWtB;AACH,UAAM,CAAEC,KAAF,IAAYZ,QAAQ,CAAEE,WAAF,CAA1B;AACA,UAAMW,SAAS,GAAG,4BAAc;AAAEC,MAAAA,GAAG,EAAEH,UAAP;AAAmBD,MAAAA;AAAnB,KAAd,CAAlB;AAEA,kCAAiB,MAAM;AACtBH,MAAAA,eAAe,CAAEK,KAAF,CAAf;AACA,KAFD,EAEG,CAAEA,KAAF,CAFH;;AAIA,QAAK,CAAEA,KAAK,CAACG,MAAR,GAAiB,CAAtB,EAA0B;AACzB,aAAO,IAAP;AACA;;AAED,WACC,4BAAC,gBAAD;AACC,MAAA,YAAY,EAAG,KADhB;AAEC,MAAA,OAAO,EAAGN,OAFX;AAGC,MAAA,QAAQ,EAAC,WAHV;AAIC,MAAA,SAAS,EAAC,kCAJX;AAKC,MAAA,SAAS,EAAGI;AALb,OAOC;AACC,MAAA,EAAE,EAAGT,SADN;AAEC,MAAA,IAAI,EAAC,SAFN;AAGC,MAAA,SAAS,EAAC;AAHX,OAKG,iBAAKQ,KAAL,EAAY,CAAEI,MAAF,EAAUC,KAAV,KACb,4BAAC,eAAD;AACC,MAAA,GAAG,EAAGD,MAAM,CAACE,GADd;AAEC,MAAA,EAAE,EAAI,gCAAgCf,UAAY,IAAIa,MAAM,CAACE,GAAK,EAFnE;AAGC,MAAA,IAAI,EAAC,QAHN;AAIC,uBAAgBD,KAAK,KAAKX,aAJ3B;AAKC,MAAA,QAAQ,EAAGU,MAAM,CAACG,UALnB;AAMC,MAAA,SAAS,EAAG,yBACX,iCADW,EAEXd,SAFW,EAGX;AACC,uBAAeY,KAAK,KAAKX;AAD1B,OAHW,CANb;AAaC,MAAA,OAAO,EAAG,MAAME,QAAQ,CAAEQ,MAAF;AAbzB,OAeGA,MAAM,CAACI,KAfV,CADC,CALH,CAPD,CADD;AAmCA;;AAED,SAAOnB,eAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect } from '@wordpress/element';\nimport { useAnchorRef } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\tvalue,\n\t\tcontentRef,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst anchorRef = useAnchorRef( { ref: contentRef, value } );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t}, [ items ] );\n\n\t\tif ( ! items.length > 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tonClose={ onReset }\n\t\t\t\tposition=\"top right\"\n\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\tanchorRef={ anchorRef }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid={ listBoxId }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t\t>\n\t\t\t\t\t{ map( items, ( option, index ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.js"],"names":["getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","value","contentRef","items","anchorRef","ref","length","option","index","key","isDisabled","label"],"mappings":";;;;;;;;;AASA;;AANA;;AACA;;AAMA;;AAKA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAKO,SAASA,kBAAT,CAA6BC,aAA7B,EAA6C;AACnD,QAAMC,QAAQ,GAAGD,aAAa,CAACC,QAAd,GACdD,aAAa,CAACC,QADA,GAEd,iCAAoBD,aAApB,CAFH;;AAIA,WAASE,eAAT,OAWI;AAAA,QAXsB;AACzBC,MAAAA,WADyB;AAEzBC,MAAAA,UAFyB;AAGzBC,MAAAA,SAHyB;AAIzBC,MAAAA,SAJyB;AAKzBC,MAAAA,aALyB;AAMzBC,MAAAA,eANyB;AAOzBC,MAAAA,QAPyB;AAQzBC,MAAAA,OARyB;AASzBC,MAAAA,KATyB;AAUzBC,MAAAA;AAVyB,KAWtB;AACH,UAAM,CAAEC,KAAF,IAAYZ,QAAQ,CAAEE,WAAF,CAA1B;AACA,UAAMW,SAAS,GAAG,4BAAc;AAAEC,MAAAA,GAAG,EAAEH,UAAP;AAAmBD,MAAAA;AAAnB,KAAd,CAAlB;AAEA,kCAAiB,MAAM;AACtBH,MAAAA,eAAe,CAAEK,KAAF,CAAf,CADsB,CAEtB;AACA;AACA;AACA,KALD,EAKG,CAAEA,KAAF,CALH;;AAOA,QAAK,CAAEA,KAAK,CAACG,MAAR,GAAiB,CAAtB,EAA0B;AACzB,aAAO,IAAP;AACA;;AAED,WACC,4BAAC,gBAAD;AACC,MAAA,YAAY,EAAG,KADhB;AAEC,MAAA,OAAO,EAAGN,OAFX;AAGC,MAAA,QAAQ,EAAC,WAHV;AAIC,MAAA,SAAS,EAAC,kCAJX;AAKC,MAAA,SAAS,EAAGI;AALb,OAOC;AACC,MAAA,EAAE,EAAGT,SADN;AAEC,MAAA,IAAI,EAAC,SAFN;AAGC,MAAA,SAAS,EAAC;AAHX,OAKG,iBAAKQ,KAAL,EAAY,CAAEI,MAAF,EAAUC,KAAV,KACb,4BAAC,eAAD;AACC,MAAA,GAAG,EAAGD,MAAM,CAACE,GADd;AAEC,MAAA,EAAE,EAAI,gCAAgCf,UAAY,IAAIa,MAAM,CAACE,GAAK,EAFnE;AAGC,MAAA,IAAI,EAAC,QAHN;AAIC,uBAAgBD,KAAK,KAAKX,aAJ3B;AAKC,MAAA,QAAQ,EAAGU,MAAM,CAACG,UALnB;AAMC,MAAA,SAAS,EAAG,yBACX,iCADW,EAEXd,SAFW,EAGX;AACC,uBAAeY,KAAK,KAAKX;AAD1B,OAHW,CANb;AAaC,MAAA,OAAO,EAAG,MAAME,QAAQ,CAAEQ,MAAF;AAbzB,OAeGA,MAAM,CAACI,KAfV,CADC,CALH,CAPD,CADD;AAmCA;;AAED,SAAOnB,eAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { map } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect } from '@wordpress/element';\nimport { useAnchorRef } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tinstanceId,\n\t\tlistBoxId,\n\t\tclassName,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tonReset,\n\t\tvalue,\n\t\tcontentRef,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst anchorRef = useAnchorRef( { ref: contentRef, value } );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( ! items.length > 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tonClose={ onReset }\n\t\t\t\tposition=\"top right\"\n\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\tanchorRef={ anchorRef }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tid={ listBoxId }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t\t>\n\t\t\t\t\t{ map( items, ( option, index ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n"]}

package/build/autocomplete/autocompleter-ui.native.js

@@ -77,7 +77,10 @@ function getAutoCompleterUI(autocompleter) {
         startAnimation(true);
       } else if (isVisible && text.length === 0) {
         startAnimation(false);
-      }
+      } // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+      // See https://github.com/WordPress/gutenberg/pull/41820
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, [items, isVisible, text]);
     const activeItemStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__item-active'], _style.default['components-autocomplete__item-active-dark']);
     const iconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon'], _style.default['components-autocomplete__icon-active-dark']);
@@ -99,7 +102,10 @@ function getAutoCompleterUI(autocompleter) {
           reset();
         }
       });
-    }, [isVisible]);
+    }, // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+    // See https://github.com/WordPress/gutenberg/pull/41820
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isVisible]);
     const contentStyles = {
       transform: [{
         translateY: animationValue.interpolate({

package/build/autocomplete/autocompleter-ui.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.native.js"],"names":["compose","stylesCompose","StyleSheet","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","selectedIndex","onChangeOptions","onSelect","value","reset","items","filteredItems","filter","item","isDisabled","scrollViewRef","animationValue","Animated","Value","current","isVisible","setIsVisible","text","length","scrollTo","x","animated","startAnimation","activeItemStyles","styles","iconStyles","activeIconStyles","textStyles","activeTextStyles","show","timing","toValue","duration","useNativeDriver","start","finished","contentStyles","transform","translateY","interpolate","inputRange","outputRange","height","map","option","index","isActive","itemStyle","textStyle","iconStyle","iconSource","icon","src","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tAnimated,\n\tStyleSheet,\n\tText,\n\tTouchableOpacity,\n\tScrollView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tIcon,\n\t__unstableAutocompletionItemsFill as AutocompletionItemsFill,\n} from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BackgroundView from './background-view';\nimport getDefaultUseItems from './get-default-use-items';\nimport styles from './style.scss';\n\nconst { compose: stylesCompose } = StyleSheet;\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tvalue,\n\t\treset,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst filteredItems = items.filter( ( item ) => ! item.isDisabled );\n\t\tconst scrollViewRef = useRef();\n\t\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\t\tconst [ isVisible, setIsVisible ] = useState( false );\n\t\tconst { text } = value;\n\n\t\tuseEffect( () => {\n\t\t\tif ( ! isVisible && text.length > 0 ) {\n\t\t\t\tsetIsVisible( true );\n\t\t\t}\n\t\t}, [ isVisible, text ] );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tscrollViewRef.current?.scrollTo( { x: 0, animated: false } );\n\n\t\t\tif ( isVisible && text.length > 0 ) {\n\t\t\t\tstartAnimation( true );\n\t\t\t} else if ( isVisible && text.length === 0 ) {\n\t\t\t\tstartAnimation( false );\n\t\t\t}\n\t\t}, [ items, isVisible, text ] );\n\n\t\tconst activeItemStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__item-active' ],\n\t\t\tstyles[ 'components-autocomplete__item-active-dark' ]\n\t\t);\n\n\t\tconst iconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst activeIconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon-active ' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst textStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text' ],\n\t\t\tstyles[ 'components-autocomplete__text-dark' ]\n\t\t);\n\n\t\tconst activeTextStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text-active' ],\n\t\t\tstyles[ 'components-autocomplete__text-active-dark' ]\n\t\t);\n\n\t\tconst startAnimation = useCallback(\n\t\t\t( show ) => {\n\t\t\t\tAnimated.timing( animationValue, {\n\t\t\t\t\ttoValue: show ? 1 : 0,\n\t\t\t\t\tduration: show ? 200 : 100,\n\t\t\t\t\tuseNativeDriver: true,\n\t\t\t\t} ).start( ( { finished } ) => {\n\t\t\t\t\tif ( finished && ! show && isVisible ) {\n\t\t\t\t\t\tsetIsVisible( false );\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t},\n\t\t\t[ isVisible ]\n\t\t);\n\n\t\tconst contentStyles = {\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\toutputRange: [\n\t\t\t\t\t\t\tstyles[ 'components-autocomplete' ].height,\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tif ( ! filteredItems.length > 0 || ! isVisible ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<AutocompletionItemsFill>\n\t\t\t\t<View style={ styles[ 'components-autocomplete' ] }>\n\t\t\t\t\t<Animated.View style={ contentStyles }>\n\t\t\t\t\t\t<BackgroundView>\n\t\t\t\t\t\t\t<ScrollView\n\t\t\t\t\t\t\t\tref={ scrollViewRef }\n\t\t\t\t\t\t\t\thorizontal\n\t\t\t\t\t\t\t\tcontentContainerStyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'components-autocomplete__content' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\t\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\t// translators: Slash inserter autocomplete results\n\t\t\t\t\t\t\t\t\t__( 'Slash inserter results' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ filteredItems.map( ( option, index ) => {\n\t\t\t\t\t\t\t\t\tconst isActive = index === selectedIndex;\n\t\t\t\t\t\t\t\t\tconst itemStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__item'\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\tisActive && activeItemStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst textStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ttextStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeTextStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ticonStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeIconStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconSource =\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon?.src ||\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\t\t\t\t\t\tactiveOpacity={ 0.5 }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ itemStyle }\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tonPress={ () => onSelect( option ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibilityLabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Block name e.g. \"Image block\"\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%s block' ),\n\t\t\t\t\t\t\t\t\t\t\t\toption?.value?.title\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__icon'\n\t\t\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ iconSource }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ iconStyle }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t\t\t<Text style={ textStyle }>\n\t\t\t\t\t\t\t\t\t\t\t\t{ option?.value?.title }\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ScrollView>\n\t\t\t\t\t\t</BackgroundView>\n\t\t\t\t\t</Animated.View>\n\t\t\t\t</View>\n\t\t\t</AutocompletionItemsFill>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nexport default getAutoCompleterUI;\n"]}
+{"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.native.js"],"names":["compose","stylesCompose","StyleSheet","getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","selectedIndex","onChangeOptions","onSelect","value","reset","items","filteredItems","filter","item","isDisabled","scrollViewRef","animationValue","Animated","Value","current","isVisible","setIsVisible","text","length","scrollTo","x","animated","startAnimation","activeItemStyles","styles","iconStyles","activeIconStyles","textStyles","activeTextStyles","show","timing","toValue","duration","useNativeDriver","start","finished","contentStyles","transform","translateY","interpolate","inputRange","outputRange","height","map","option","index","isActive","itemStyle","textStyle","iconStyle","iconSource","icon","src","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tAnimated,\n\tStyleSheet,\n\tText,\n\tTouchableOpacity,\n\tScrollView,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseCallback,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tIcon,\n\t__unstableAutocompletionItemsFill as AutocompletionItemsFill,\n} from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BackgroundView from './background-view';\nimport getDefaultUseItems from './get-default-use-items';\nimport styles from './style.scss';\n\nconst { compose: stylesCompose } = StyleSheet;\n\nexport function getAutoCompleterUI( autocompleter ) {\n\tconst useItems = autocompleter.useItems\n\t\t? autocompleter.useItems\n\t\t: getDefaultUseItems( autocompleter );\n\n\tfunction AutocompleterUI( {\n\t\tfilterValue,\n\t\tselectedIndex,\n\t\tonChangeOptions,\n\t\tonSelect,\n\t\tvalue,\n\t\treset,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst filteredItems = items.filter( ( item ) => ! item.isDisabled );\n\t\tconst scrollViewRef = useRef();\n\t\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\t\tconst [ isVisible, setIsVisible ] = useState( false );\n\t\tconst { text } = value;\n\n\t\tuseEffect( () => {\n\t\t\tif ( ! isVisible && text.length > 0 ) {\n\t\t\t\tsetIsVisible( true );\n\t\t\t}\n\t\t}, [ isVisible, text ] );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\tscrollViewRef.current?.scrollTo( { x: 0, animated: false } );\n\n\t\t\tif ( isVisible && text.length > 0 ) {\n\t\t\t\tstartAnimation( true );\n\t\t\t} else if ( isVisible && text.length === 0 ) {\n\t\t\t\tstartAnimation( false );\n\t\t\t}\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items, isVisible, text ] );\n\n\t\tconst activeItemStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__item-active' ],\n\t\t\tstyles[ 'components-autocomplete__item-active-dark' ]\n\t\t);\n\n\t\tconst iconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst activeIconStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__icon-active ' ],\n\t\t\tstyles[ 'components-autocomplete__icon-active-dark' ]\n\t\t);\n\n\t\tconst textStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text' ],\n\t\t\tstyles[ 'components-autocomplete__text-dark' ]\n\t\t);\n\n\t\tconst activeTextStyles = usePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-autocomplete__text-active' ],\n\t\t\tstyles[ 'components-autocomplete__text-active-dark' ]\n\t\t);\n\n\t\tconst startAnimation = useCallback(\n\t\t\t( show ) => {\n\t\t\t\tAnimated.timing( animationValue, {\n\t\t\t\t\ttoValue: show ? 1 : 0,\n\t\t\t\t\tduration: show ? 200 : 100,\n\t\t\t\t\tuseNativeDriver: true,\n\t\t\t\t} ).start( ( { finished } ) => {\n\t\t\t\t\tif ( finished && ! show && isVisible ) {\n\t\t\t\t\t\tsetIsVisible( false );\n\t\t\t\t\t\treset();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t},\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t\t[ isVisible ]\n\t\t);\n\n\t\tconst contentStyles = {\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\toutputRange: [\n\t\t\t\t\t\t\tstyles[ 'components-autocomplete' ].height,\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\n\t\tif ( ! filteredItems.length > 0 || ! isVisible ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<AutocompletionItemsFill>\n\t\t\t\t<View style={ styles[ 'components-autocomplete' ] }>\n\t\t\t\t\t<Animated.View style={ contentStyles }>\n\t\t\t\t\t\t<BackgroundView>\n\t\t\t\t\t\t\t<ScrollView\n\t\t\t\t\t\t\t\tref={ scrollViewRef }\n\t\t\t\t\t\t\t\thorizontal\n\t\t\t\t\t\t\t\tcontentContainerStyle={\n\t\t\t\t\t\t\t\t\tstyles[ 'components-autocomplete__content' ]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\t\t\t\t\tkeyboardShouldPersistTaps=\"always\"\n\t\t\t\t\t\t\t\taccessibilityLabel={\n\t\t\t\t\t\t\t\t\t// translators: Slash inserter autocomplete results\n\t\t\t\t\t\t\t\t\t__( 'Slash inserter results' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ filteredItems.map( ( option, index ) => {\n\t\t\t\t\t\t\t\t\tconst isActive = index === selectedIndex;\n\t\t\t\t\t\t\t\t\tconst itemStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__item'\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\tisActive && activeItemStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst textStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ttextStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeTextStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconStyle = stylesCompose(\n\t\t\t\t\t\t\t\t\t\ticonStyles,\n\t\t\t\t\t\t\t\t\t\tisActive && activeIconStyles\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tconst iconSource =\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon?.src ||\n\t\t\t\t\t\t\t\t\t\toption?.value?.icon;\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\t\t\t\t\t\tactiveOpacity={ 0.5 }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ itemStyle }\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tonPress={ () => onSelect( option ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibilityLabel={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: %s: Block name e.g. \"Image block\"\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%s block' ),\n\t\t\t\t\t\t\t\t\t\t\t\toption?.value?.title\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'components-autocomplete__icon'\n\t\t\t\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ iconSource }\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ iconStyle }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t\t\t<Text style={ textStyle }>\n\t\t\t\t\t\t\t\t\t\t\t\t{ option?.value?.title }\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</ScrollView>\n\t\t\t\t\t\t</BackgroundView>\n\t\t\t\t\t</Animated.View>\n\t\t\t\t</View>\n\t\t\t</AutocompletionItemsFill>\n\t\t);\n\t}\n\n\treturn AutocompleterUI;\n}\n\nexport default getAutoCompleterUI;\n"]}

package/build/autocomplete/index.js

@@ -124,7 +124,7 @@ function useAutocomplete(_ref) {
   const [filterValue, setFilterValue] = (0, _element.useState)('');
   const [autocompleter, setAutocompleter] = (0, _element.useState)(null);
   const [AutocompleterUI, setAutocompleterUI] = (0, _element.useState)(null);
-  const [backspacing, setBackspacing] = (0, _element.useState)(false);
+  const backspacing = (0, _element.useRef)(false);
 
   function insertCompletion(replacement) {
     const end = record.start;
@@ -204,7 +204,7 @@ function useAutocomplete(_ref) {
   }
 
   function handleKeyDown(event) {
-    setBackspacing(event.keyCode === _keycodes.BACKSPACE);
+    backspacing.current = event.keyCode === _keycodes.BACKSPACE;
 
     if (!autocompleter) {
       return;
@@ -249,14 +249,16 @@ function useAutocomplete(_ref) {
 
 
     event.preventDefault();
-  }
-
-  let textContent;
+  } // textContent is a primitive (string), memoizing is not strictly necessary
+  // but this is a preemptive performance improvement, since the autocompleter
+  // is a potential bottleneck for the editor type metric.
 
-  if ((0, _richText.isCollapsed)(record)) {
-    textContent = (0, _richText.getTextContent)((0, _richText.slice)(record, 0));
-  }
 
+  const textContent = (0, _element.useMemo)(() => {
+    if ((0, _richText.isCollapsed)(record)) {
+      return (0, _richText.getTextContent)((0, _richText.slice)(record, 0));
+    }
+  }, [record]);
   (0, _element.useEffect)(() => {
     if (!textContent) {
       reset();
@@ -304,7 +306,7 @@ function useAutocomplete(_ref) {
       // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
       // if the user presses backspace here, it will show the completion popup again.
 
-      const matchingWhileBackspacing = backspacing && textWithoutTrigger.split(/\s/).length <= 3;
+      const matchingWhileBackspacing = backspacing.current && textWithoutTrigger.split(/\s/).length <= 3;
 
       if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) {
         return false;
@@ -331,7 +333,9 @@ function useAutocomplete(_ref) {
     const query = match && match[1];
     setAutocompleter(completer);
     setAutocompleterUI(() => completer !== autocompleter ? (0, _autocompleterUi.getAutoCompleterUI)(completer) : AutocompleterUI);
-    setFilterValue(query);
+    setFilterValue(query); // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+    // See https://github.com/WordPress/gutenberg/pull/41820
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [textContent]);
   const {
     key: selectedKey = ''