@wordpress/components 19.13.0 → 19.16.0

package/CHANGELOG.md

@@ -2,6 +2,133 @@
 
 ## Unreleased
 
+## 19.16.0 (2022-07-27)
+
+### Bug Fix
+
+-   Context System: Stop explicitly setting `undefined` to the `children` prop. This fixes a bug where `Icon` could not be correctly rendered via the `as` prop of a context-connected component ([#42686](https://github.com/WordPress/gutenberg/pull/42686)).
+-   `Popover`, `Dropdown`: Fix width when `expandOnMobile` is enabled ([#42635](https://github.com/WordPress/gutenberg/pull/42635/)).
+-   `CustomSelectControl`: Fix font size and hover/focus style inconsistencies with `SelectControl` ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)).
+-   `AnglePickerControl`: Fix gap between elements in RTL mode ([#42534](https://github.com/WordPress/gutenberg/pull/42534)).
+-   `ColorPalette`: Fix background image in RTL mode ([#42510](https://github.com/WordPress/gutenberg/pull/42510)).
+-   `RangeControl`: clamp initialPosition between min and max values ([#42571](https://github.com/WordPress/gutenberg/pull/42571)).
+-   `Tooltip`: avoid unnecessary re-renders of select child elements ([#42483](https://github.com/WordPress/gutenberg/pull/42483)).
+
+### Enhancements
+
+-   `BorderControl`: Improve labelling, tooltips and DOM structure ([#42348](https://github.com/WordPress/gutenberg/pull/42348/)).
+-   `BaseControl`: Set zero padding on `StyledLabel` to ensure cross-browser styling ([#42348](https://github.com/WordPress/gutenberg/pull/42348/)).
+-   `InputControl`: Implement wrapper subcomponents for adding responsive padding to `prefix`/`suffix` ([#42378](https://github.com/WordPress/gutenberg/pull/42378)).
+-   `SelectControl`: Add flag for larger default size ([#42456](https://github.com/WordPress/gutenberg/pull/42456/)).
+-   `UnitControl`: Update unit select's focus styles to match input's ([#42383](https://github.com/WordPress/gutenberg/pull/42383)).
+-   `ColorPalette`: Display checkered preview background when `value` is transparent ([#42232](https://github.com/WordPress/gutenberg/pull/42232)).
+-   `CustomSelectControl`: Add size variants ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)).
+-   `CustomSelectControl`: Add flag to opt in to unconstrained width ([#42460](https://github.com/WordPress/gutenberg/pull/42460/)).
+-   `Dropdown`: Implement wrapper subcomponent for adding different padding to the dropdown content ([#42595](https://github.com/WordPress/gutenberg/pull/42595/)).
+-   `BorderControl`: Render dropdown as prefix within its `UnitControl` ([#42212](https://github.com/WordPress/gutenberg/pull/42212/))
+-   `UnitControl`: Update prop types to allow ReactNode as prefix ([#42212](https://github.com/WordPress/gutenberg/pull/42212/))
+-   `ToolsPanel`: Updated README with panel layout information and more expansive usage example ([#42615](https://github.com/WordPress/gutenberg/pull/42615)).
+
+### Internal
+
+-   `ColorPicker`: Clean up implementation of 40px size ([#42002](https://github.com/WordPress/gutenberg/pull/42002/)).
+-   `Divider`: Complete TypeScript migration ([#41991](https://github.com/WordPress/gutenberg/pull/41991)).
+-   `Divider`, `Flex`, `Spacer`: Improve documentation for the `SpaceInput` prop ([#42376](https://github.com/WordPress/gutenberg/pull/42376)).
+-   `Elevation`: Convert to TypeScript ([#42302](https://github.com/WordPress/gutenberg/pull/42302)).
+-   `ScrollLock`: Convert to TypeScript ([#42303](https://github.com/WordPress/gutenberg/pull/42303)).
+-   `Shortcut`: Convert to TypeScript ([#42272](https://github.com/WordPress/gutenberg/pull/42272)).
+-   `TreeSelect`: Refactor away from `_.compact()` ([#42438](https://github.com/WordPress/gutenberg/pull/42438)).
+-   `MediaEdit`: Refactor away from `_.compact()` for mobile ([#42438](https://github.com/WordPress/gutenberg/pull/42438)).
+-   `BoxControl`: Refactor away from `_.isEmpty()` ([#42468](https://github.com/WordPress/gutenberg/pull/42468)).
+-   `RadioControl`: Refactor away from `_.isEmpty()` ([#42468](https://github.com/WordPress/gutenberg/pull/42468)).
+-   `SelectControl`: Refactor away from `_.isEmpty()` ([#42468](https://github.com/WordPress/gutenberg/pull/42468)).
+-   `ComboboxControl`: Replace `keyboardEvent.keyCode` with `keyboardEvent.code`([#42569](https://github.com/WordPress/gutenberg/pull/42569)).
+
+## 19.15.0 (2022-07-13)
+
+### Bug Fix
+
+-   `BoxControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#42094](https://github.com/WordPress/gutenberg/pull/42094)).
+-   `FocalPointPicker`, `FormTokenField`, `ResizableBox`: Fixed SSR breakage ([#42248](https://github.com/WordPress/gutenberg/pull/42248)).
+-   `ComboboxControl`: use custom prefix when generating the instanceId ([#42134](https://github.com/WordPress/gutenberg/pull/42134).
+-   `Popover`: pass missing anchor ref to the `getAnchorRect` callback prop. ([#42076](https://github.com/WordPress/gutenberg/pull/42076)).
+-   `Popover`: call `getAnchorRect` callback prop even if `anchorRefFallback` has no value. ([#42329](https://github.com/WordPress/gutenberg/pull/42329)).
+-   Fix `ToolTip` position to ensure it is always positioned relative to the first child of the ToolTip. ([#41268](https://github.com/WordPress/gutenberg/pull/41268))
+
+### Enhancement
+
+-   `ToggleGroupControl`: Add large size variant ([#42008](https://github.com/WordPress/gutenberg/pull/42008/)).
+
+### Enhancements
+
+-   `InputControl`: Ensure that the padding between a `prefix`/`suffix` and the text input stays at a reasonable 8px, even in larger size variants ([#42166](https://github.com/WordPress/gutenberg/pull/42166)).
+
+### Internal
+
+-   `Grid`: Convert to TypeScript ([#41923](https://github.com/WordPress/gutenberg/pull/41923)).
+-   `TextHighlight`: Convert to TypeScript ([#41698](https://github.com/WordPress/gutenberg/pull/41698)).
+-   `Tip`: Convert to TypeScript ([#42262](https://github.com/WordPress/gutenberg/pull/42262)).
+-   `Scrollable`: Convert to TypeScript ([#42016](https://github.com/WordPress/gutenberg/pull/42016)).
+-   `Spacer`: Complete TypeScript migration ([#42013](https://github.com/WordPress/gutenberg/pull/42013)).
+-   `VisuallyHidden`: Convert to TypeScript ([#42220](https://github.com/WordPress/gutenberg/pull/42220)).
+-   `TreeSelect`: Refactor away from `_.repeat()` ([#42070](https://github.com/WordPress/gutenberg/pull/42070/)).
+-   `FocalPointPicker` updated to satisfy `react/exhaustive-deps` eslint rule ([#41520](https://github.com/WordPress/gutenberg/pull/41520)).
+-   `ColorPicker` updated to satisfy `react/exhaustive-deps` eslint rule ([#41294](https://github.com/WordPress/gutenberg/pull/41294)).
+-   `Slot`/`Fill`: Refactor away from Lodash ([#42153](https://github.com/WordPress/gutenberg/pull/42153/)).
+-   `ComboboxControl`: Refactor away from `_.deburr()` ([#42169](https://github.com/WordPress/gutenberg/pull/42169/)).
+-   `FormTokenField`: Refactor away from `_.identity()` ([#42215](https://github.com/WordPress/gutenberg/pull/42215/)).
+-   `SelectControl`: Use roles and `@testing-library/user-event` in unit tests ([#42308](https://github.com/WordPress/gutenberg/pull/42308)).
+-   `DropdownMenu`: Refactor away from Lodash ([#42218](https://github.com/WordPress/gutenberg/pull/42218/)).
+-   `ToolbarGroup`: Refactor away from `_.flatMap()` ([#42223](https://github.com/WordPress/gutenberg/pull/42223/)).
+-   `TreeSelect`: Refactor away from `_.flatMap()` ([#42223](https://github.com/WordPress/gutenberg/pull/42223/)).
+-   `Autocomplete`: Refactor away from `_.deburr()` ([#42266](https://github.com/WordPress/gutenberg/pull/42266/)).
+-   `MenuItem`: Refactor away from `_.isString()` ([#42268](https://github.com/WordPress/gutenberg/pull/42268/)).
+-   `Shortcut`: Refactor away from `_.isString()` ([#42268](https://github.com/WordPress/gutenberg/pull/42268/)).
+-   `Shortcut`: Refactor away from `_.isObject()` ([#42336](https://github.com/WordPress/gutenberg/pull/42336/)).
+-   `RangeControl`: Convert to TypeScript ([#40535](https://github.com/WordPress/gutenberg/pull/40535)).
+-   `ExternalLink`: Refactor away from Lodash ([#42341](https://github.com/WordPress/gutenberg/pull/42341/)).
+-   `Navigation`: updated to satisfy `react/exhaustive-deps` eslint rule ([#41612](https://github.com/WordPress/gutenberg/pull/41612))
+
+## 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))
+-   `ColorPicker`: Widen hex input field for mobile. ([#42004](https://github.com/WordPress/gutenberg/pull/42004))
+
+### Enhancements
+
+-   Wrapped `ColorIndicator` in a `forwardRef` call ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
+-   `ComboboxControl` & `FormTokenField`: Add `__next36pxDefaultSize` flag for larger default size ([#40746](https://github.com/WordPress/gutenberg/pull/40746)).
+-   `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/exhaustive-deps` eslint rule ([#41639](https://github.com/WordPress/gutenberg/pull/41639)).
+
 ## 19.13.0 (2022-06-15)
 
 ### Bug Fix
@@ -19,19 +146,18 @@
 ### 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))
+-   `Draggable`: updated to satisfy `react/exhaustive-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))
+-   `Flex` updated to satisfy `react/exhaustive-deps` eslint rule ([#41507](https://github.com/WordPress/gutenberg/pull/41507)).
+-   `CustomGradientBar` updated to satisfy `react/exhaustive-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)).
+-   `FontSizePicker`: updated to satisfy `react/exhaustive-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))
-
+-   `InputControl` updated to satisfy `react/exhaustive-deps` eslint rule ([#41601](https://github.com/WordPress/gutenberg/pull/41601))
+-   `Modal`: updated to satisfy `react/exhaustive-deps` eslint rule ([#41610](https://github.com/WordPress/gutenberg/pull/41610))
 
 ### Experimental
 
@@ -55,8 +181,8 @@
 
 ### 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))
+-   `AlignmentMatrixControl` updated to satisfy `react/exhaustive-deps` eslint rule ([#41167](https://github.com/WordPress/gutenberg/pull/41167))
+-   `BorderControl` updated to satisfy `react/exhaustive-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)).
@@ -64,9 +190,9 @@
 -   `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)).
+-   `Autocomplete` updated to satisfy `react/exhaustive-deps` eslint rule ([#41382](https://github.com/WordPress/gutenberg/pull/41382))
+-   `Dropdown` updated to satisfy `react/exhaustive-deps` eslint rule ([#41505](https://github.com/WordPress/gutenberg/pull/41505))
+-   `DateDayPicker` updated to satisfy `react/exhaustive-deps` eslint rule ([#41470](https://github.com/WordPress/gutenberg/pull/41470)).
 
 ### Experimental
 
@@ -104,6 +230,7 @@
 
 -   `InputControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40622](https://github.com/WordPress/gutenberg/pull/40622)).
 -   `UnitControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40627](https://github.com/WordPress/gutenberg/pull/40627)).
+-   `Modal` design adjustments: Blur elements outside of the modal, increase modal title size, use larger close icon, remove header border when modal contents are scrolled. ([#40781](https://github.com/WordPress/gutenberg/pull/40781)).
 -   `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))

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

@@ -53,7 +53,8 @@ function AnglePickerControl(_ref) {
 
   const classes = (0, _classnames.default)('components-angle-picker-control', className);
   return (0, _element.createElement)(_anglePickerControlStyles.Root, {
-    className: classes
+    className: classes,
+    gap: 4
   }, (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_numberControl.default, {
     label: label,
     className: "components-angle-picker-control__input-field",
@@ -74,7 +75,6 @@ function AnglePickerControl(_ref) {
     }, "\xB0")
   })), (0, _element.createElement)(_flex.FlexItem, {
     style: {
-      marginLeft: (0, _space.space)(4),
       marginBottom: (0, _space.space)(1),
       marginTop: 'auto'
     }

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,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"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","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,OAAlB;AAA4B,IAAA,GAAG,EAAG;AAAlC,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,YAAY,EAAE,kBAAO,CAAP,CADP;AAEPC,MAAAA,SAAS,EAAE;AAFJ;AADT,KAMC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGT,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAND,CA1BD,CADD;AAyCA","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 } gap={ 4 }>\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\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,8 +54,10 @@ function getAutoCompleterUI(autocompleter) {
       value
     });
     (0, _element.useLayoutEffect)(() => {
-      onChangeOptions(items);
-    }, [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) {
       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,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"]}
+{"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,8 +77,11 @@ function getAutoCompleterUI(autocompleter) {
         startAnimation(true);
       } else if (isVisible && text.length === 0) {
         startAnimation(false);
-      }
-    }, [onChangeOptions, items, isVisible, text, startAnimation]);
+      } // 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']);
     const activeIconStyles = (0, _compose.usePreferredColorSchemeStyle)(_style.default['components-autocomplete__icon-active '], _style.default['components-autocomplete__icon-active-dark']);
@@ -99,7 +102,10 @@ function getAutoCompleterUI(autocompleter) {
           reset();
         }
       });
-    }, [animationValue, isVisible, reset]);
+    }, // 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}, [ 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"]}
+{"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":";;;;;;;;;;AAeA;;AAZA;;AAmBA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAlCA;AACA;AACA;;AAUA;AACA;AACA;;AAeA;AACA;AACA;AAKA,MAAM;AAAEA,EAAAA,OAAO,EAAEC;AAAX,IAA6BC,uBAAnC;;AAEO,SAASC,kBAAT,CAA6BC,aAA7B,EAA6C;AACnD,QAAMC,QAAQ,GAAGD,aAAa,CAACC,QAAd,GACdD,aAAa,CAACC,QADA,GAEd,iCAAoBD,aAApB,CAFH;;AAIA,WAASE,eAAT,OAOI;AAAA,QAPsB;AACzBC,MAAAA,WADyB;AAEzBC,MAAAA,aAFyB;AAGzBC,MAAAA,eAHyB;AAIzBC,MAAAA,QAJyB;AAKzBC,MAAAA,KALyB;AAMzBC,MAAAA;AANyB,KAOtB;AACH,UAAM,CAAEC,KAAF,IAAYR,QAAQ,CAAEE,WAAF,CAA1B;AACA,UAAMO,aAAa,GAAGD,KAAK,CAACE,MAAN,CAAgBC,IAAF,IAAY,CAAEA,IAAI,CAACC,UAAjC,CAAtB;AACA,UAAMC,aAAa,GAAG,sBAAtB;AACA,UAAMC,cAAc,GAAG,qBAAQ,IAAIC,sBAASC,KAAb,CAAoB,CAApB,CAAR,EAAkCC,OAAzD;AACA,UAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAWd,KAAjB;AAEA,4BAAW,MAAM;AAChB,UAAK,CAAEY,SAAF,IAAeE,IAAI,CAACC,MAAL,GAAc,CAAlC,EAAsC;AACrCF,QAAAA,YAAY,CAAE,IAAF,CAAZ;AACA;AACD,KAJD,EAIG,CAAED,SAAF,EAAaE,IAAb,CAJH;AAMA,kCAAiB,MAAM;AAAA;;AACtBhB,MAAAA,eAAe,CAAEI,KAAF,CAAf;AACA,+BAAAK,aAAa,CAACI,OAAd,gFAAuBK,QAAvB,CAAiC;AAAEC,QAAAA,CAAC,EAAE,CAAL;AAAQC,QAAAA,QAAQ,EAAE;AAAlB,OAAjC;;AAEA,UAAKN,SAAS,IAAIE,IAAI,CAACC,MAAL,GAAc,CAAhC,EAAoC;AACnCI,QAAAA,cAAc,CAAE,IAAF,CAAd;AACA,OAFD,MAEO,IAAKP,SAAS,IAAIE,IAAI,CAACC,MAAL,KAAgB,CAAlC,EAAsC;AAC5CI,QAAAA,cAAc,CAAE,KAAF,CAAd;AACA,OARqB,CAStB;AACA;AACA;;AACA,KAZD,EAYG,CAAEjB,KAAF,EAASU,SAAT,EAAoBE,IAApB,CAZH;AAcA,UAAMM,gBAAgB,GAAG,2CACxBC,eAAQ,sCAAR,CADwB,EAExBA,eAAQ,2CAAR,CAFwB,CAAzB;AAKA,UAAMC,UAAU,GAAG,2CAClBD,eAAQ,+BAAR,CADkB,EAElBA,eAAQ,2CAAR,CAFkB,CAAnB;AAKA,UAAME,gBAAgB,GAAG,2CACxBF,eAAQ,uCAAR,CADwB,EAExBA,eAAQ,2CAAR,CAFwB,CAAzB;AAKA,UAAMG,UAAU,GAAG,2CAClBH,eAAQ,+BAAR,CADkB,EAElBA,eAAQ,oCAAR,CAFkB,CAAnB;AAKA,UAAMI,gBAAgB,GAAG,2CACxBJ,eAAQ,sCAAR,CADwB,EAExBA,eAAQ,2CAAR,CAFwB,CAAzB;AAKA,UAAMF,cAAc,GAAG,0BACpBO,IAAF,IAAY;AACXjB,4BAASkB,MAAT,CAAiBnB,cAAjB,EAAiC;AAChCoB,QAAAA,OAAO,EAAEF,IAAI,GAAG,CAAH,GAAO,CADY;AAEhCG,QAAAA,QAAQ,EAAEH,IAAI,GAAG,GAAH,GAAS,GAFS;AAGhCI,QAAAA,eAAe,EAAE;AAHe,OAAjC,EAIIC,KAJJ,CAIW,SAAoB;AAAA,YAAlB;AAAEC,UAAAA;AAAF,SAAkB;;AAC9B,YAAKA,QAAQ,IAAI,CAAEN,IAAd,IAAsBd,SAA3B,EAAuC;AACtCC,UAAAA,YAAY,CAAE,KAAF,CAAZ;AACAZ,UAAAA,KAAK;AACL;AACD,OATD;AAUA,KAZqB,EAatB;AACA;AACA;AACA,KAAEW,SAAF,CAhBsB,CAAvB;AAmBA,UAAMqB,aAAa,GAAG;AACrBC,MAAAA,SAAS,EAAE,CACV;AACCC,QAAAA,UAAU,EAAE3B,cAAc,CAAC4B,WAAf,CAA4B;AACvCC,UAAAA,UAAU,EAAE,CAAE,CAAF,EAAK,CAAL,CAD2B;AAEvCC,UAAAA,WAAW,EAAE,CACZjB,eAAQ,yBAAR,EAAoCkB,MADxB,EAEZ,CAFY;AAF0B,SAA5B;AADb,OADU;AADU,KAAtB;;AAcA,QAAK,CAAEpC,aAAa,CAACY,MAAhB,GAAyB,CAAzB,IAA8B,CAAEH,SAArC,EAAiD;AAChD,aAAO,IAAP;AACA;;AAED,WACC,4BAAC,6CAAD,QACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGS,eAAQ,yBAAR;AAAd,OACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,MAAA,KAAK,EAAGY;AAAvB,OACC,4BAAC,uBAAD,QACC,4BAAC,uBAAD;AACC,MAAA,GAAG,EAAG1B,aADP;AAEC,MAAA,UAAU,MAFX;AAGC,MAAA,qBAAqB,EACpBc,eAAQ,kCAAR,CAJF;AAMC,MAAA,8BAA8B,EAAG,KANlC;AAOC,MAAA,yBAAyB,EAAC,QAP3B;AAQC,MAAA,kBAAkB,EACjB;AACA,oBAAI,wBAAJ;AAVF,OAaGlB,aAAa,CAACqC,GAAd,CAAmB,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AAAA;;AACzC,YAAMC,QAAQ,GAAGD,KAAK,KAAK7C,aAA3B;AACA,YAAM+C,SAAS,GAAGtD,aAAa,CAC9B+B,eACC,+BADD,CAD8B,EAI9BsB,QAAQ,IAAIvB,gBAJkB,CAA/B;AAMA,YAAMyB,SAAS,GAAGvD,aAAa,CAC9BkC,UAD8B,EAE9BmB,QAAQ,IAAIlB,gBAFkB,CAA/B;AAIA,YAAMqB,SAAS,GAAGxD,aAAa,CAC9BgC,UAD8B,EAE9BqB,QAAQ,IAAIpB,gBAFkB,CAA/B;AAIA,YAAMwB,UAAU,GACf,CAAAN,MAAM,SAAN,IAAAA,MAAM,WAAN,6BAAAA,MAAM,CAAEzC,KAAR,sFAAegD,IAAf,0EAAqBC,GAArB,MACAR,MADA,aACAA,MADA,yCACAA,MAAM,CAAEzC,KADR,mDACA,eAAegD,IADf,CADD;AAIA,aACC,4BAAC,6BAAD;AACC,QAAA,aAAa,EAAG,GADjB;AAEC,QAAA,KAAK,EAAGJ,SAFT;AAGC,QAAA,GAAG,EAAGF,KAHP;AAIC,QAAA,OAAO,EAAG,MAAM3C,QAAQ,CAAE0C,MAAF,CAJzB;AAKC,QAAA,kBAAkB,EAAG,oBACpB;AACA,sBAAI,UAAJ,CAFoB,EAGpBA,MAHoB,aAGpBA,MAHoB,yCAGpBA,MAAM,CAAEzC,KAHY,mDAGpB,eAAekD,KAHK;AALtB,SAWC,4BAAC,iBAAD;AACC,QAAA,KAAK,EACJ7B,eACC,+BADD;AAFF,SAOC,4BAAC,gBAAD;AACC,QAAA,IAAI,EAAG0B,UADR;AAEC,QAAA,IAAI,EAAG,EAFR;AAGC,QAAA,KAAK,EAAGD;AAHT,QAPD,CAXD,EAwBC,4BAAC,iBAAD;AAAM,QAAA,KAAK,EAAGD;AAAd,SACGJ,MADH,aACGA,MADH,yCACGA,MAAM,CAAEzC,KADX,mDACG,eAAekD,KADlB,CAxBD,CADD;AA8BA,KAlDC,CAbH,CADD,CADD,CADD,CADD,CADD;AA2EA;;AAED,SAAOvD,eAAP;AACA;;eAEcH,kB","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/get-default-use-items.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,6 +9,8 @@ exports.default = getDefaultUseItems;
 
 var _lodash = require("lodash");
 
+var _removeAccents = _interopRequireDefault(require("remove-accents"));
+
 var _element = require("@wordpress/element");
 
 /**
@@ -32,7 +36,7 @@ function filterOptions(search) {
       keywords = [...keywords, option.label];
     }
 
-    const isMatch = keywords.some(keyword => search.test((0, _lodash.deburr)(keyword)));
+    const isMatch = keywords.some(keyword => search.test((0, _removeAccents.default)(keyword)));
 
     if (!isMatch) {
       continue;

package/build/autocomplete/get-default-use-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/autocomplete/get-default-use-items.js"],"names":["filterOptions","search","options","maxResults","filtered","i","length","option","keywords","label","isMatch","some","keyword","test","push","getDefaultUseItems","autocompleter","filterValue","items","setItems","isDebounced","loadOptions","promise","Promise","resolve","then","optionsData","canceled","keyedOptions","map","optionData","optionIndex","key","name","value","getOptionLabel","getOptionKeywords","isDisabled","isOptionDisabled","RegExp","cancel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { debounce, deburr, escapeRegExp } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\nfunction filterOptions( search, options = [], maxResults = 10 ) {\n\tconst filtered = [];\n\tfor ( let i = 0; i < options.length; i++ ) {\n\t\tconst option = options[ i ];\n\n\t\t// Merge label into keywords.\n\t\tlet { keywords = [] } = option;\n\t\tif ( 'string' === typeof option.label ) {\n\t\t\tkeywords = [ ...keywords, option.label ];\n\t\t}\n\n\t\tconst isMatch = keywords.some( ( keyword ) =>\n\t\t\tsearch.test( deburr( keyword ) )\n\t\t);\n\t\tif ( ! isMatch ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tfiltered.push( option );\n\n\t\t// Abort early if max reached.\n\t\tif ( filtered.length === maxResults ) {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn filtered;\n}\n\nexport default function getDefaultUseItems( autocompleter ) {\n\treturn ( filterValue ) => {\n\t\tconst [ items, setItems ] = useState( [] );\n\t\t/*\n\t\t * We support both synchronous and asynchronous retrieval of completer options\n\t\t * but internally treat all as async so we maintain a single, consistent code path.\n\t\t *\n\t\t * Because networks can be slow, and the internet is wonderfully unpredictable,\n\t\t * we don't want two promises updating the state at once. This ensures that only\n\t\t * the most recent promise will act on `optionsData`. This doesn't use the state\n\t\t * because `setState` is batched, and so there's no guarantee that setting\n\t\t * `activePromise` in the state would result in it actually being in `this.state`\n\t\t * before the promise resolves and we check to see if this is the active promise or not.\n\t\t */\n\t\tuseLayoutEffect( () => {\n\t\t\tconst { options, isDebounced } = autocompleter;\n\t\t\tconst loadOptions = debounce(\n\t\t\t\t() => {\n\t\t\t\t\tconst promise = Promise.resolve(\n\t\t\t\t\t\ttypeof options === 'function'\n\t\t\t\t\t\t\t? options( filterValue )\n\t\t\t\t\t\t\t: options\n\t\t\t\t\t).then( ( optionsData ) => {\n\t\t\t\t\t\tif ( promise.canceled ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst keyedOptions = optionsData.map(\n\t\t\t\t\t\t\t( optionData, optionIndex ) => ( {\n\t\t\t\t\t\t\t\tkey: `${ autocompleter.name }-${ optionIndex }`,\n\t\t\t\t\t\t\t\tvalue: optionData,\n\t\t\t\t\t\t\t\tlabel: autocompleter.getOptionLabel(\n\t\t\t\t\t\t\t\t\toptionData\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tkeywords: autocompleter.getOptionKeywords\n\t\t\t\t\t\t\t\t\t? autocompleter.getOptionKeywords(\n\t\t\t\t\t\t\t\t\t\t\toptionData\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [],\n\t\t\t\t\t\t\t\tisDisabled: autocompleter.isOptionDisabled\n\t\t\t\t\t\t\t\t\t? autocompleter.isOptionDisabled(\n\t\t\t\t\t\t\t\t\t\t\toptionData\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: false,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Create a regular expression to filter the options.\n\t\t\t\t\t\tconst search = new RegExp(\n\t\t\t\t\t\t\t'(?:\\\\b|\\\\s|^)' + escapeRegExp( filterValue ),\n\t\t\t\t\t\t\t'i'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetItems( filterOptions( search, keyedOptions ) );\n\t\t\t\t\t} );\n\n\t\t\t\t\treturn promise;\n\t\t\t\t},\n\t\t\t\tisDebounced ? 250 : 0\n\t\t\t);\n\n\t\t\tconst promise = loadOptions();\n\n\t\t\treturn () => {\n\t\t\t\tloadOptions.cancel();\n\t\t\t\tif ( promise ) {\n\t\t\t\t\tpromise.canceled = true;\n\t\t\t\t}\n\t\t\t};\n\t\t}, [ filterValue ] );\n\n\t\treturn [ items ];\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/autocomplete/get-default-use-items.js"],"names":["filterOptions","search","options","maxResults","filtered","i","length","option","keywords","label","isMatch","some","keyword","test","push","getDefaultUseItems","autocompleter","filterValue","items","setItems","isDebounced","loadOptions","promise","Promise","resolve","then","optionsData","canceled","keyedOptions","map","optionData","optionIndex","key","name","value","getOptionLabel","getOptionKeywords","isDisabled","isOptionDisabled","RegExp","cancel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { debounce, escapeRegExp } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\nfunction filterOptions( search, options = [], maxResults = 10 ) {\n\tconst filtered = [];\n\tfor ( let i = 0; i < options.length; i++ ) {\n\t\tconst option = options[ i ];\n\n\t\t// Merge label into keywords.\n\t\tlet { keywords = [] } = option;\n\t\tif ( 'string' === typeof option.label ) {\n\t\t\tkeywords = [ ...keywords, option.label ];\n\t\t}\n\n\t\tconst isMatch = keywords.some( ( keyword ) =>\n\t\t\tsearch.test( removeAccents( keyword ) )\n\t\t);\n\t\tif ( ! isMatch ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\tfiltered.push( option );\n\n\t\t// Abort early if max reached.\n\t\tif ( filtered.length === maxResults ) {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn filtered;\n}\n\nexport default function getDefaultUseItems( autocompleter ) {\n\treturn ( filterValue ) => {\n\t\tconst [ items, setItems ] = useState( [] );\n\t\t/*\n\t\t * We support both synchronous and asynchronous retrieval of completer options\n\t\t * but internally treat all as async so we maintain a single, consistent code path.\n\t\t *\n\t\t * Because networks can be slow, and the internet is wonderfully unpredictable,\n\t\t * we don't want two promises updating the state at once. This ensures that only\n\t\t * the most recent promise will act on `optionsData`. This doesn't use the state\n\t\t * because `setState` is batched, and so there's no guarantee that setting\n\t\t * `activePromise` in the state would result in it actually being in `this.state`\n\t\t * before the promise resolves and we check to see if this is the active promise or not.\n\t\t */\n\t\tuseLayoutEffect( () => {\n\t\t\tconst { options, isDebounced } = autocompleter;\n\t\t\tconst loadOptions = debounce(\n\t\t\t\t() => {\n\t\t\t\t\tconst promise = Promise.resolve(\n\t\t\t\t\t\ttypeof options === 'function'\n\t\t\t\t\t\t\t? options( filterValue )\n\t\t\t\t\t\t\t: options\n\t\t\t\t\t).then( ( optionsData ) => {\n\t\t\t\t\t\tif ( promise.canceled ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst keyedOptions = optionsData.map(\n\t\t\t\t\t\t\t( optionData, optionIndex ) => ( {\n\t\t\t\t\t\t\t\tkey: `${ autocompleter.name }-${ optionIndex }`,\n\t\t\t\t\t\t\t\tvalue: optionData,\n\t\t\t\t\t\t\t\tlabel: autocompleter.getOptionLabel(\n\t\t\t\t\t\t\t\t\toptionData\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tkeywords: autocompleter.getOptionKeywords\n\t\t\t\t\t\t\t\t\t? autocompleter.getOptionKeywords(\n\t\t\t\t\t\t\t\t\t\t\toptionData\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: [],\n\t\t\t\t\t\t\t\tisDisabled: autocompleter.isOptionDisabled\n\t\t\t\t\t\t\t\t\t? autocompleter.isOptionDisabled(\n\t\t\t\t\t\t\t\t\t\t\toptionData\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: false,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Create a regular expression to filter the options.\n\t\t\t\t\t\tconst search = new RegExp(\n\t\t\t\t\t\t\t'(?:\\\\b|\\\\s|^)' + escapeRegExp( filterValue ),\n\t\t\t\t\t\t\t'i'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tsetItems( filterOptions( search, keyedOptions ) );\n\t\t\t\t\t} );\n\n\t\t\t\t\treturn promise;\n\t\t\t\t},\n\t\t\t\tisDebounced ? 250 : 0\n\t\t\t);\n\n\t\t\tconst promise = loadOptions();\n\n\t\t\treturn () => {\n\t\t\t\tloadOptions.cancel();\n\t\t\t\tif ( promise ) {\n\t\t\t\t\tpromise.canceled = true;\n\t\t\t\t}\n\t\t\t};\n\t\t}, [ filterValue ] );\n\n\t\treturn [ items ];\n\t};\n}\n"]}

package/build/autocomplete/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,6 +12,8 @@ var _element = require("@wordpress/element");
 
 var _lodash = require("lodash");
 
+var _removeAccents = _interopRequireDefault(require("remove-accents"));
+
 var _keycodes = require("@wordpress/keycodes");
 
 var _i18n = require("@wordpress/i18n");
@@ -265,7 +269,7 @@ function useAutocomplete(_ref) {
       return;
     }
 
-    const text = (0, _lodash.deburr)(textContent);
+    const text = (0, _removeAccents.default)(textContent);
     const textAfterSelection = (0, _richText.getTextContent)((0, _richText.slice)(record, undefined, (0, _richText.getTextContent)(record).length));
     const completer = (0, _lodash.find)(completers, _ref2 => {
       let {
@@ -333,8 +337,10 @@ function useAutocomplete(_ref) {
     const query = match && match[1];
     setAutocompleter(completer);
     setAutocompleterUI(() => completer !== autocompleter ? (0, _autocompleterUi.getAutoCompleterUI)(completer) : AutocompleterUI);
-    setFilterValue(query);
-  }, [textContent, AutocompleterUI, autocompleter, completers, record, filteredOptions.length]);
+    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 = ''
   } = filteredOptions[selectedIndex] || {};