@wordpress/components 19.10.0 → 19.13.0

package/CHANGELOG.md

@@ -2,12 +2,103 @@
 
 ## Unreleased
 
+## 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
+
+-   `BorderControl` now only displays the reset button in its popover when selections have already been made. ([#40917](https://github.com/WordPress/gutenberg/pull/40917))
+-   `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
+
+-   `DateTimePicker`: Convert to TypeScript ([#40775](https://github.com/WordPress/gutenberg/pull/40775)).
+-   `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)
 
 ### Internal
 
 -   `UnitControl`: migrate unit tests to TypeScript ([#40697](https://github.com/WordPress/gutenberg/pull/40697)).
 -   `DatePicker`: Add improved unit tests ([#40754](https://github.com/WordPress/gutenberg/pull/40754)).
+-   Setup `user-event` in unit tests inline, once per test ([#40839](https://github.com/WordPress/gutenberg/pull/40839)).
+-   `DatePicker`: Update `react-dates` to 21.8.0 ([#40801](https://github.com/WordPress/gutenberg/pull/40801)).
 
 ### Enhancements
 
@@ -15,15 +106,15 @@
 -   `UnitControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40627](https://github.com/WordPress/gutenberg/pull/40627)).
 -   `SelectControl`: Improved TypeScript support ([#40737](https://github.com/WordPress/gutenberg/pull/40737)).
 -   `ToggleControlGroup`: Switch to internal `Icon` component for dashicon support ([40717](https://github.com/WordPress/gutenberg/pull/40717)).
--    Improve `ToolsPanel` accessibility. ([#40716](https://github.com/WordPress/gutenberg/pull/40716))
+-   Improve `ToolsPanel` accessibility. ([#40716](https://github.com/WordPress/gutenberg/pull/40716))
 
 ### Bug Fix
 
--    The `Button` component now displays the label as the tooltip for icon only buttons. ([#40716](https://github.com/WordPress/gutenberg/pull/40716))
--    Use fake timers and fix usage of async methods from `@testing-library/user-event`. ([#40790](https://github.com/WordPress/gutenberg/pull/40790))
--    UnitControl: avoid calling onChange callback twice when unit changes. ([#40796](https://github.com/WordPress/gutenberg/pull/40796))
--    `UnitControl`: show unit label when units prop has only one unit. ([#40784](https://github.com/WordPress/gutenberg/pull/40784))
--    `AnglePickerControl`: Fix closing of gradient popover when the angle control is clicked. ([#40735](https://github.com/WordPress/gutenberg/pull/40735))
+-   The `Button` component now displays the label as the tooltip for icon only buttons. ([#40716](https://github.com/WordPress/gutenberg/pull/40716))
+-   Use fake timers and fix usage of async methods from `@testing-library/user-event`. ([#40790](https://github.com/WordPress/gutenberg/pull/40790))
+-   UnitControl: avoid calling onChange callback twice when unit changes. ([#40796](https://github.com/WordPress/gutenberg/pull/40796))
+-   `UnitControl`: show unit label when units prop has only one unit. ([#40784](https://github.com/WordPress/gutenberg/pull/40784))
+-   `AnglePickerControl`: Fix closing of gradient popover when the angle control is clicked. ([#40735](https://github.com/WordPress/gutenberg/pull/40735))
 
 ### Internal
 

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/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

@@ -55,7 +55,7 @@ function getAutoCompleterUI(autocompleter) {
     });
     (0, _element.useLayoutEffect)(() => {
       onChangeOptions(items);
-    }, [items]);
+    }, [onChangeOptions, items]);
 
     if (!items.length > 0) {
       return null;

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;AACA,KAFD,EAEG,CAAEL,eAAF,EAAmBK,KAAnB,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}, [ onChangeOptions, 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

@@ -78,7 +78,7 @@ function getAutoCompleterUI(autocompleter) {
       } else if (isVisible && text.length === 0) {
         startAnimation(false);
       }
-    }, [items, isVisible, text]);
+    }, [onChangeOptions, items, isVisible, text, startAnimation]);
     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']);
     const activeIconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon-active '], _style.default['components-autocomplete__icon-active-dark']);
@@ -99,7 +99,7 @@ function getAutoCompleterUI(autocompleter) {
           reset();
         }
       });
-    }, [isVisible]);
+    }, [animationValue, isVisible, reset]);
     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}, [ onChangeOptions, items, isVisible, text, startAnimation ] );\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[ animationValue, isVisible, reset ]\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;
@@ -332,7 +334,7 @@ function useAutocomplete(_ref) {
     setAutocompleter(completer);
     setAutocompleterUI(() => completer !== autocompleter ? (0, _autocompleterUi.getAutoCompleterUI)(completer) : AutocompleterUI);
     setFilterValue(query);
-  }, [textContent]);
+  }, [textContent, AutocompleterUI, autocompleter, completers, record, filteredOptions.length]);
   const {
     key: selectedKey = ''
   } = filteredOptions[selectedIndex] || {};