@wordpress/components 19.11.0 → 19.12.0

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 ## Unreleased
 
+## 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))
+
+### Experimental
+
+-   `Spacer`: Add RTL support. ([#41172](https://github.com/WordPress/gutenberg/pull/41172))
+
 ## 19.11.0 (2022-05-18)
 
 ### Enhancements
@@ -10,6 +43,8 @@
 -   `BorderControl` & `BorderBoxControl`: Add `__next36pxDefaultSize` flag for larger default size ([#40920](https://github.com/WordPress/gutenberg/pull/40920)).
 -   `BorderControl` improved focus and border radius styling for component. ([#40951](https://github.com/WordPress/gutenberg/pull/40951))
 -   Improve focused `CircularOptionPicker` styling ([#40990](https://github.com/WordPress/gutenberg/pull/40990))
+-   `BorderControl`: Make border color consistent with other controls ([#40921](https://github.com/WordPress/gutenberg/pull/40921))
+-   `SelectControl`: Remove `lineHeight` setting to fix issue with font descenders being cut off ([#40985](https://github.com/WordPress/gutenberg/pull/40985))
 
 ### Internal
 
@@ -17,6 +52,7 @@
 -   `DateTimePicker`: Convert unit tests to TypeScript ([#40957](https://github.com/WordPress/gutenberg/pull/40957)).
 -   `CheckboxControl`: Convert to TypeScript ([#40915](https://github.com/WordPress/gutenberg/pull/40915)).
 -   `ButtonGroup`: Convert to TypeScript ([#41007](https://github.com/WordPress/gutenberg/pull/41007)).
+-   `Popover`: refactor component to use the `floating-ui` library internally ([#40740](https://github.com/WordPress/gutenberg/pull/40740)).
 
 ## 19.10.0 (2022-05-04)
 

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

@@ -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":["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,QAAM;AAAEC,IAAAA;AAAF,MAAmBL,SAAzB;AAEA,0BAAW,MAAM;AAChB,QAAK,OAAOR,KAAP,KAAiB,WAAtB,EAAoC;AACnCa,MAAAA,YAAY,CAAE,sBAAWP,MAAX,EAAmBN,KAAnB,CAAF,CAAZ;AACA;AACD,GAJD,EAIG,CAAEA,KAAF,EAASa,YAAT,EAAuBP,MAAvB,CAJH;AAMA,QAAMQ,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\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/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] || {};

package/build/autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","speak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","setBackspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","keyCode","BACKSPACE","defaultPrevented","UP","DOWN","ESCAPE","preventDefault","ENTER","LEFT","RIGHT","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","slice","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","current","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { escapeRegExp, find, deburr } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n} from '@wordpress/element';\nimport {\n\tENTER,\n\tESCAPE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tBACKSPACE,\n} from '@wordpress/keycodes';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after  the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue}       value  the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string}          query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string}                           name                a way to identify a completer, useful for selective overriding.\n * @property {?string}                          className           A class to apply to the popup menu.\n * @property {string}                           triggerPrefix       the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options             the completer options or a function to get them.\n * @property {?FnGetOptionKeywords}             getOptionKeywords   get the keywords for a given option.\n * @property {?FnIsOptionDisabled}              isOptionDisabled    get whether or not the given option is disabled.\n * @property {FnGetOptionLabel}                 getOptionLabel      get the label for a given option.\n * @property {?FnAllowContext}                  allowContext        filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion}            getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst [ backspacing, setBackspacing ] = useState( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tsetBackspacing( event.keyCode === BACKSPACE );\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase DOWN:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase ESCAPE:\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase ENTER:\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase LEFT:\n\t\t\tcase RIGHT:\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled keycode should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\tlet textContent;\n\n\tif ( isCollapsed( record ) ) {\n\t\ttextContent = getTextContent( slice( record, 0 ) );\n\t}\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = deburr( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing && textWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t}, [ textContent ] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/autocomplete/index.js"],"names":["useAutocomplete","record","onChange","onReplace","completers","contentRef","debouncedSpeak","speak","instanceId","selectedIndex","setSelectedIndex","filteredOptions","setFilteredOptions","filterValue","setFilterValue","autocompleter","setAutocompleter","AutocompleterUI","setAutocompleterUI","backspacing","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","keyCode","BACKSPACE","defaultPrevented","UP","DOWN","ESCAPE","preventDefault","ENTER","LEFT","RIGHT","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","slice","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","key","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useAutocompleteProps","ref","onKeyDownRef","element","_onKeyDown","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { escapeRegExp, find, deburr } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\nimport {\n\tENTER,\n\tESCAPE,\n\tUP,\n\tDOWN,\n\tLEFT,\n\tRIGHT,\n\tBACKSPACE,\n} from '@wordpress/keycodes';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tuseInstanceId,\n\tuseDebounce,\n\tuseMergeRefs,\n\tuseRefEffect,\n} from '@wordpress/compose';\nimport {\n\tcreate,\n\tslice,\n\tinsert,\n\tisCollapsed,\n\tgetTextContent,\n} from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { getAutoCompleterUI } from './autocompleter-ui';\n\n/**\n * A raw completer option.\n *\n * @typedef {*} CompleterOption\n */\n\n/**\n * @callback FnGetOptions\n *\n * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.\n */\n\n/**\n * @callback FnGetOptionKeywords\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} list of key words to search.\n */\n\n/**\n * @callback FnIsOptionDisabled\n * @param {CompleterOption} option a completer option.\n *\n * @return {string[]} whether or not the given option is disabled.\n */\n\n/**\n * @callback FnGetOptionLabel\n * @param {CompleterOption} option a completer option.\n *\n * @return {(string|Array.<(string|WPElement)>)} list of react components to render.\n */\n\n/**\n * @callback FnAllowContext\n * @param {string} before the string before the auto complete trigger and query.\n * @param {string} after  the string after the autocomplete trigger and query.\n *\n * @return {boolean} true if the completer can handle.\n */\n\n/**\n * @typedef {Object} OptionCompletion\n * @property {'insert-at-caret'|'replace'} action the intended placement of the completion.\n * @property {OptionCompletionValue}       value  the completion value.\n */\n\n/**\n * A completion value.\n *\n * @typedef {(string|WPElement|Object)} OptionCompletionValue\n */\n\n/**\n * @callback FnGetOptionCompletion\n * @param {CompleterOption} value the value of the completer option.\n * @param {string}          query the text value of the autocomplete query.\n *\n * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   OptionCompletionValue is returned, the\n * \t\t\t\t\t\t\t\t\t\t\t\t\t   completion action defaults to `insert-at-caret`.\n */\n\n/**\n * @typedef {Object} WPCompleter\n * @property {string}                           name                a way to identify a completer, useful for selective overriding.\n * @property {?string}                          className           A class to apply to the popup menu.\n * @property {string}                           triggerPrefix       the prefix that will display the menu.\n * @property {(CompleterOption[]|FnGetOptions)} options             the completer options or a function to get them.\n * @property {?FnGetOptionKeywords}             getOptionKeywords   get the keywords for a given option.\n * @property {?FnIsOptionDisabled}              isOptionDisabled    get whether or not the given option is disabled.\n * @property {FnGetOptionLabel}                 getOptionLabel      get the label for a given option.\n * @property {?FnAllowContext}                  allowContext        filter the context under which the autocomplete activates.\n * @property {FnGetOptionCompletion}            getOptionCompletion get the completion associated with a given option.\n */\n\nfunction useAutocomplete( {\n\trecord,\n\tonChange,\n\tonReplace,\n\tcompleters,\n\tcontentRef,\n} ) {\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst instanceId = useInstanceId( useAutocomplete );\n\tconst [ selectedIndex, setSelectedIndex ] = useState( 0 );\n\tconst [ filteredOptions, setFilteredOptions ] = useState( [] );\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst [ autocompleter, setAutocompleter ] = useState( null );\n\tconst [ AutocompleterUI, setAutocompleterUI ] = useState( null );\n\tconst backspacing = useRef( false );\n\n\tfunction insertCompletion( replacement ) {\n\t\tconst end = record.start;\n\t\tconst start =\n\t\t\tend - autocompleter.triggerPrefix.length - filterValue.length;\n\t\tconst toInsert = create( { html: renderToString( replacement ) } );\n\n\t\tonChange( insert( record, toInsert, start, end ) );\n\t}\n\n\tfunction select( option ) {\n\t\tconst { getOptionCompletion } = autocompleter || {};\n\n\t\tif ( option.isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( getOptionCompletion ) {\n\t\t\tconst completion = getOptionCompletion( option.value, filterValue );\n\n\t\t\tconst { action, value } =\n\t\t\t\tundefined === completion.action ||\n\t\t\t\tundefined === completion.value\n\t\t\t\t\t? { action: 'insert-at-caret', value: completion }\n\t\t\t\t\t: completion;\n\n\t\t\tif ( 'replace' === action ) {\n\t\t\t\tonReplace( [ value ] );\n\t\t\t\t// When replacing, the component will unmount, so don't reset\n\t\t\t\t// state (below) on an unmounted component.\n\t\t\t\treturn;\n\t\t\t} else if ( 'insert-at-caret' === action ) {\n\t\t\t\tinsertCompletion( value );\n\t\t\t}\n\t\t}\n\n\t\t// Reset autocomplete state after insertion rather than before\n\t\t// so insertion events don't cause the completion menu to redisplay.\n\t\treset();\n\t}\n\n\tfunction reset() {\n\t\tsetSelectedIndex( 0 );\n\t\tsetFilteredOptions( [] );\n\t\tsetFilterValue( '' );\n\t\tsetAutocompleter( null );\n\t\tsetAutocompleterUI( null );\n\t}\n\n\tfunction announce( options ) {\n\t\tif ( ! debouncedSpeak ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( !! options.length ) {\n\t\t\tdebouncedSpeak(\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\toptions.length\n\t\t\t\t\t),\n\t\t\t\t\toptions.length\n\t\t\t\t),\n\t\t\t\t'assertive'\n\t\t\t);\n\t\t} else {\n\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t}\n\t}\n\n\t/**\n\t * Load options for an autocompleter.\n\t *\n\t * @param {Array} options\n\t */\n\tfunction onChangeOptions( options ) {\n\t\tsetSelectedIndex(\n\t\t\toptions.length === filteredOptions.length ? selectedIndex : 0\n\t\t);\n\t\tsetFilteredOptions( options );\n\t\tannounce( options );\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tbackspacing.current = event.keyCode === BACKSPACE;\n\n\t\tif ( ! autocompleter ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( filteredOptions.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( event.defaultPrevented ) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex === 0\n\t\t\t\t\t\t? filteredOptions.length\n\t\t\t\t\t\t: selectedIndex ) - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase DOWN:\n\t\t\t\tsetSelectedIndex(\n\t\t\t\t\t( selectedIndex + 1 ) % filteredOptions.length\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase ESCAPE:\n\t\t\t\tsetAutocompleter( null );\n\t\t\t\tsetAutocompleterUI( null );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\n\t\t\tcase ENTER:\n\t\t\t\tselect( filteredOptions[ selectedIndex ] );\n\t\t\t\tbreak;\n\n\t\t\tcase LEFT:\n\t\t\tcase RIGHT:\n\t\t\t\treset();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\t// Any handled keycode should prevent original behavior. This relies on\n\t\t// the early return in the default case.\n\t\tevent.preventDefault();\n\t}\n\n\t// textContent is a primitive (string), memoizing is not strictly necessary\n\t// but this is a preemptive performance improvement, since the autocompleter\n\t// is a potential bottleneck for the editor type metric.\n\tconst textContent = useMemo( () => {\n\t\tif ( isCollapsed( record ) ) {\n\t\t\treturn getTextContent( slice( record, 0 ) );\n\t\t}\n\t}, [ record ] );\n\n\tuseEffect( () => {\n\t\tif ( ! textContent ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst text = deburr( textContent );\n\t\tconst textAfterSelection = getTextContent(\n\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t);\n\t\tconst completer = find(\n\t\t\tcompleters,\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = text.lastIndexOf( triggerPrefix );\n\n\t\t\t\tif ( index === -1 ) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tconst textWithoutTrigger = text.slice(\n\t\t\t\t\tindex + triggerPrefix.length\n\t\t\t\t);\n\n\t\t\t\tconst tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.\n\t\t\t\t// This is a final barrier to prevent the effect from completing with\n\t\t\t\t// an extremely long string, which causes the editor to slow-down\n\t\t\t\t// significantly. This could happen, for example, if `matchingWhileBackspacing`\n\t\t\t\t// is true and one of the \"words\" end up being too long. If that's the case,\n\t\t\t\t// it will be caught by this guard.\n\t\t\t\tif ( tooDistantFromTrigger ) return false;\n\n\t\t\t\tconst mismatch = filteredOptions.length === 0;\n\t\t\t\tconst wordsFromTrigger = textWithoutTrigger.split( /\\s/ );\n\t\t\t\t// We need to allow the effect to run when not backspacing and if there\n\t\t\t\t// was a mismatch. i.e when typing a trigger + the match string or when\n\t\t\t\t// clicking in an existing trigger word on the page. We do that if we\n\t\t\t\t// detect that we have one word from trigger in the current textual context.\n\t\t\t\t//\n\t\t\t\t// Ex.: \"Some text @a\" <-- \"@a\" will be detected as the trigger word and\n\t\t\t\t// allow the effect to run. It will run until there's a mismatch.\n\t\t\t\tconst hasOneTriggerWord = wordsFromTrigger.length === 1;\n\t\t\t\t// This is used to allow the effect to run when backspacing and if\n\t\t\t\t// \"touching\" a word that \"belongs\" to a trigger. We consider a \"trigger\n\t\t\t\t// word\" any word up to the limit of 3 from the trigger character.\n\t\t\t\t// Anything beyond that is ignored if there's a mismatch. This allows\n\t\t\t\t// us to \"escape\" a mismatch when backspacing, but still imposing some\n\t\t\t\t// sane limits.\n\t\t\t\t//\n\t\t\t\t// Ex: \"Some text @marcelo sekkkk\" <--- \"kkkk\" caused a mismatch, but\n\t\t\t\t// if the user presses backspace here, it will show the completion popup again.\n\t\t\t\tconst matchingWhileBackspacing =\n\t\t\t\t\tbackspacing.current &&\n\t\t\t\t\ttextWithoutTrigger.split( /\\s/ ).length <= 3;\n\n\t\t\t\tif (\n\t\t\t\t\tmismatch &&\n\t\t\t\t\t! ( matchingWhileBackspacing || hasOneTriggerWord )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext( text.slice( 0, index ), textAfterSelection )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\tif (\n\t\t\t\t\t/^\\s/.test( textWithoutTrigger ) ||\n\t\t\t\t\t/\\s\\s+$/.test( textWithoutTrigger )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\treturn /[\\u0000-\\uFFFF]*$/.test( textWithoutTrigger );\n\t\t\t}\n\t\t);\n\n\t\tif ( ! completer ) {\n\t\t\treset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst match = text\n\t\t\t.slice( text.lastIndexOf( completer.triggerPrefix ) )\n\t\t\t.match( new RegExp( `${ safeTrigger }([\\u0000-\\uFFFF]*)$` ) );\n\t\tconst query = match && match[ 1 ];\n\n\t\tsetAutocompleter( completer );\n\t\tsetAutocompleterUI( () =>\n\t\t\tcompleter !== autocompleter\n\t\t\t\t? getAutoCompleterUI( completer )\n\t\t\t\t: AutocompleterUI\n\t\t);\n\t\tsetFilterValue( query );\n\t}, [\n\t\ttextContent,\n\t\tAutocompleterUI,\n\t\tautocompleter,\n\t\tcompleters,\n\t\trecord,\n\t\tfilteredOptions.length,\n\t] );\n\n\tconst { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};\n\tconst { className } = autocompleter || {};\n\tconst isExpanded = !! autocompleter && filteredOptions.length > 0;\n\tconst listBoxId = isExpanded\n\t\t? `components-autocomplete-listbox-${ instanceId }`\n\t\t: null;\n\tconst activeId = isExpanded\n\t\t? `components-autocomplete-item-${ instanceId }-${ selectedKey }`\n\t\t: null;\n\tconst hasSelection = record.start !== undefined;\n\n\treturn {\n\t\tlistBoxId,\n\t\tactiveId,\n\t\tonKeyDown: handleKeyDown,\n\t\tpopover: hasSelection && AutocompleterUI && (\n\t\t\t<AutocompleterUI\n\t\t\t\tclassName={ className }\n\t\t\t\tfilterValue={ filterValue }\n\t\t\t\tinstanceId={ instanceId }\n\t\t\t\tlistBoxId={ listBoxId }\n\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\tonChangeOptions={ onChangeOptions }\n\t\t\t\tonSelect={ select }\n\t\t\t\tvalue={ record }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\treset={ reset }\n\t\t\t/>\n\t\t),\n\t};\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\treturn {\n\t\tref: useMergeRefs( [\n\t\t\tref,\n\t\t\tuseRefEffect( ( element ) => {\n\t\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\t\tonKeyDownRef.current( event );\n\t\t\t\t}\n\t\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\t\treturn () => {\n\t\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\t};\n\t\t\t}, [] ),\n\t\t] ),\n\t\tchildren: popover,\n\t\t'aria-autocomplete': listBoxId ? 'list' : undefined,\n\t\t'aria-owns': listBoxId,\n\t\t'aria-activedescendant': activeId,\n\t};\n}\n\nexport default function Autocomplete( { children, isSelected, ...options } ) {\n\tconst { popover, ...props } = useAutocomplete( options );\n\treturn (\n\t\t<>\n\t\t\t{ children( props ) }\n\t\t\t{ isSelected && popover }\n\t\t</>\n\t);\n}\n"]}

package/build/border-box-control/border-box-control/hook.js

@@ -94,10 +94,10 @@ function useBorderBoxControl(props) {
   const cx = (0, _useCx.useCx)();
   const classes = (0, _element.useMemo)(() => {
     return cx(styles.BorderBoxControl, className);
-  }, [className]);
+  }, [cx, className]);
   const linkedControlClassName = (0, _element.useMemo)(() => {
     return cx(styles.LinkedBorderControl);
-  }, []);
+  }, [cx]);
   return { ...otherProps,
     className: classes,
     hasMixedBorders: mixedBorders,

package/build/border-box-control/border-box-control/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","styles","BorderBoxControl","linkedControlClassName","LinkedBorderControl","hasMixedBorders"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControl, className );\n\t}, [ className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.LinkedBorderControl );\n\t}, [] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/hook.ts"],"names":["useBorderBoxControl","props","className","onChange","value","otherProps","mixedBorders","splitBorders","linkedValue","splitValue","isLinked","setIsLinked","toggleLinked","onLinkedChange","newBorder","undefined","changes","updatedBorders","top","right","bottom","left","filteredResult","onSplitChange","side","cx","classes","styles","BorderBoxControl","linkedControlClassName","LinkedBorderControl","hasMixedBorders"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport {\n\tgetBorderDiff,\n\tgetCommonBorder,\n\tgetSplitBorders,\n\thasMixedBorders,\n\thasSplitBorders,\n\tisCompleteBorder,\n\tisEmptyBorder,\n} from '../utils';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\n\nimport type { Border } from '../../border-control/types';\nimport type { Borders, BorderSide, BorderBoxControlProps } from '../types';\n\nexport function useBorderBoxControl(\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >\n) {\n\tconst { className, onChange, value, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControl'\n\t);\n\n\tconst mixedBorders = hasMixedBorders( value );\n\tconst splitBorders = hasSplitBorders( value );\n\n\tconst linkedValue = splitBorders\n\t\t? getCommonBorder( value as Borders | undefined )\n\t\t: ( value as Border );\n\n\tconst splitValue = splitBorders\n\t\t? ( value as Borders )\n\t\t: getSplitBorders( value as Border | undefined );\n\n\tconst [ isLinked, setIsLinked ] = useState( ! mixedBorders );\n\tconst toggleLinked = () => setIsLinked( ! isLinked );\n\n\tconst onLinkedChange = ( newBorder?: Border ) => {\n\t\tif ( ! newBorder ) {\n\t\t\treturn onChange( undefined );\n\t\t}\n\n\t\t// If we have all props defined on the new border apply it.\n\t\tif ( ! mixedBorders || isCompleteBorder( newBorder ) ) {\n\t\t\treturn onChange(\n\t\t\t\tisEmptyBorder( newBorder ) ? undefined : newBorder\n\t\t\t);\n\t\t}\n\n\t\t// If we had mixed borders we might have had some shared border props\n\t\t// that we need to maintain. For example; we could have mixed borders\n\t\t// with all the same color but different widths. Then from the linked\n\t\t// control we change the color. We should keep the separate  widths.\n\t\tconst changes = getBorderDiff(\n\t\t\tlinkedValue as Border,\n\t\t\tnewBorder as Border\n\t\t);\n\t\tconst updatedBorders = {\n\t\t\ttop: { ...( value as Borders )?.top, ...changes },\n\t\t\tright: { ...( value as Borders )?.right, ...changes },\n\t\t\tbottom: { ...( value as Borders )?.bottom, ...changes },\n\t\t\tleft: { ...( value as Borders )?.left, ...changes },\n\t\t};\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\treturn onChange( updatedBorders );\n\t\t}\n\n\t\tconst filteredResult = isEmptyBorder( updatedBorders.top )\n\t\t\t? undefined\n\t\t\t: updatedBorders.top;\n\n\t\tonChange( filteredResult );\n\t};\n\n\tconst onSplitChange = (\n\t\tnewBorder: Border | undefined,\n\t\tside: BorderSide\n\t) => {\n\t\tconst updatedBorders = { ...splitValue, [ side ]: newBorder };\n\n\t\tif ( hasMixedBorders( updatedBorders ) ) {\n\t\t\tonChange( updatedBorders );\n\t\t} else {\n\t\t\tonChange( newBorder );\n\t\t}\n\t};\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControl, className );\n\t}, [ cx, className ] );\n\n\tconst linkedControlClassName = useMemo( () => {\n\t\treturn cx( styles.LinkedBorderControl );\n\t}, [ cx ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tclassName: classes,\n\t\thasMixedBorders: mixedBorders,\n\t\tisLinked,\n\t\tlinkedControlClassName,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\ttoggleLinked,\n\t\tlinkedValue,\n\t\tsplitValue,\n\t};\n}\n"]}

package/build/border-box-control/border-box-control-split-controls/component.js

@@ -42,6 +42,7 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
     onChange,
     popoverPlacement,
     popoverOffset,
+    rightAlignedClassName,
     value,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
@@ -85,6 +86,7 @@ const BorderBoxControlSplitControls = (props, forwardedRef) => {
     __unstablePopoverProps: popoverProps,
     value: value === null || value === void 0 ? void 0 : value.left
   }, sharedBorderControlProps)), (0, _element.createElement)(_borderControl.BorderControl, (0, _extends2.default)({
+    className: rightAlignedClassName,
     hideLabelFromVision: true,
     label: (0, _i18n.__)('Right border'),
     onChange: newBorder => onChange(newBorder, 'right'),

package/build/border-box-control/border-box-control-split-controls/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","containerRef","mergedRef","popoverProps","placement","offset","anchorRef","undefined","sharedBorderControlProps","isCompact","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\tconst containerRef = useRef();\n\tconst mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );\n\tconst popoverProps = popoverPlacement\n\t\t? {\n\t\t\t\tplacement: popoverPlacement,\n\t\t\t\toffset: popoverOffset,\n\t\t\t\tanchorRef: containerRef,\n\t\t  }\n\t\t: undefined;\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t};\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer\n\t\t\t\tvalue={ value }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/component.tsx"],"names":["BorderBoxControlSplitControls","props","forwardedRef","centeredClassName","colors","disableCustomColors","enableAlpha","enableStyle","onChange","popoverPlacement","popoverOffset","rightAlignedClassName","value","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","containerRef","mergedRef","popoverProps","placement","offset","anchorRef","undefined","sharedBorderControlProps","isCompact","newBorder","top","left","right","bottom","ConnectedBorderBoxControlSplitControls"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BorderBoxControlVisualizer from '../border-box-control-visualizer';\nimport { BorderControl } from '../../border-control';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControlSplitControls } from './hook';\n\nimport type { SplitControlsProps } from '../types';\n\nconst BorderBoxControlSplitControls = (\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tcenteredClassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tonChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\trightAlignedClassName,\n\t\tvalue,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t\t...otherProps\n\t} = useBorderBoxControlSplitControls( props );\n\tconst containerRef = useRef();\n\tconst mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );\n\tconst popoverProps = popoverPlacement\n\t\t? {\n\t\t\t\tplacement: popoverPlacement,\n\t\t\t\toffset: popoverOffset,\n\t\t\t\tanchorRef: containerRef,\n\t\t  }\n\t\t: undefined;\n\n\tconst sharedBorderControlProps = {\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\tisCompact: true,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize,\n\t};\n\n\treturn (\n\t\t<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>\n\t\t\t<BorderBoxControlVisualizer\n\t\t\t\tvalue={ value }\n\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Top border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'top' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.top }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Left border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'left' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.left }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ rightAlignedClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Right border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'right' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.right }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t\t<BorderControl\n\t\t\t\tclassName={ centeredClassName }\n\t\t\t\thideLabelFromVision={ true }\n\t\t\t\tlabel={ __( 'Bottom border' ) }\n\t\t\t\tonChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }\n\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\tvalue={ value?.bottom }\n\t\t\t\t{ ...sharedBorderControlProps }\n\t\t\t/>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedBorderBoxControlSplitControls = contextConnect(\n\tBorderBoxControlSplitControls,\n\t'BorderBoxControlSplitControls'\n);\nexport default ConnectedBorderBoxControlSplitControls;\n"]}

package/build/border-box-control/border-box-control-split-controls/hook.js

@@ -31,15 +31,24 @@ function useBorderBoxControlSplitControls(props) {
   } = (0, _context.useContextSystem)(props, 'BorderBoxControlSplitControls'); // Generate class names.
 
   const cx = (0, _utils.useCx)();
+
+  const rtlWatchResult = _utils.rtl.watch();
+
   const classes = (0, _element.useMemo)(() => {
-    return cx(styles.BorderBoxControlSplitControls, className);
-  }, [className, _utils.rtl.watch()]);
+    return cx(styles.borderBoxControlSplitControls(), className); // rtlWatchResult is needed to refresh styles when the writing direction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cx, className, rtlWatchResult]);
   const centeredClassName = (0, _element.useMemo)(() => {
     return cx(styles.CenteredBorderControl, className);
-  }, []);
+  }, [cx, className]);
+  const rightAlignedClassName = (0, _element.useMemo)(() => {
+    return cx(styles.rightBorderControl(), className); // rtlWatchResult is needed to refresh styles when the writing direction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cx, className, rtlWatchResult]);
   return { ...otherProps,
     centeredClassName,
-    className: classes
+    className: classes,
+    rightAlignedClassName
   };
 }
 //# sourceMappingURL=hook.js.map

package/build/border-box-control/border-box-control-split-controls/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useBorderBoxControlSplitControls","props","className","otherProps","cx","classes","styles","BorderBoxControlSplitControls","rtl","watch","centeredClassName","CenteredBorderControl"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,+BACpCF,KADoC,EAEpC,+BAFoC,CAArC,CADC,CAMD;;AACA,QAAMG,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CAAEE,MAAM,CAACC,6BAAT,EAAwCL,SAAxC,CAAT;AACA,GAFe,EAEb,CAAEA,SAAF,EAAaM,WAAIC,KAAJ,EAAb,CAFa,CAAhB;AAIA,QAAMC,iBAAiB,GAAG,sBAAS,MAAM;AACxC,WAAON,EAAE,CAAEE,MAAM,CAACK,qBAAT,EAAgCT,SAAhC,CAAT;AACA,GAFyB,EAEvB,EAFuB,CAA1B;AAIA,SAAO,EAAE,GAAGC,UAAL;AAAiBO,IAAAA,iBAAjB;AAAoCR,IAAAA,SAAS,EAAEG;AAA/C,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlSplitControls'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.BorderBoxControlSplitControls, className );\n\t}, [ className, rtl.watch() ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.CenteredBorderControl, className );\n\t}, [] );\n\n\treturn { ...otherProps, centeredClassName, className: classes };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-split-controls/hook.ts"],"names":["useBorderBoxControlSplitControls","props","className","otherProps","cx","rtlWatchResult","rtl","watch","classes","styles","borderBoxControlSplitControls","centeredClassName","CenteredBorderControl","rightAlignedClassName","rightBorderControl"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,gCAAT,CACNC,KADM,EAEL;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAa,OAAGC;AAAhB,MAA+B,+BACpCF,KADoC,EAEpC,+BAFoC,CAArC,CADC,CAMD;;AACA,QAAMG,EAAE,GAAG,mBAAX;;AACA,QAAMC,cAAc,GAAGC,WAAIC,KAAJ,EAAvB;;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOJ,EAAE,CAAEK,MAAM,CAACC,6BAAP,EAAF,EAA0CR,SAA1C,CAAT,CAD8B,CAE9B;AACA;AACA,GAJe,EAIb,CAAEE,EAAF,EAAMF,SAAN,EAAiBG,cAAjB,CAJa,CAAhB;AAMA,QAAMM,iBAAiB,GAAG,sBAAS,MAAM;AACxC,WAAOP,EAAE,CAAEK,MAAM,CAACG,qBAAT,EAAgCV,SAAhC,CAAT;AACA,GAFyB,EAEvB,CAAEE,EAAF,EAAMF,SAAN,CAFuB,CAA1B;AAIA,QAAMW,qBAAqB,GAAG,sBAAS,MAAM;AAC5C,WAAOT,EAAE,CAAEK,MAAM,CAACK,kBAAP,EAAF,EAA+BZ,SAA/B,CAAT,CAD4C,CAE5C;AACA;AACA,GAJ6B,EAI3B,CAAEE,EAAF,EAAMF,SAAN,EAAiBG,cAAjB,CAJ2B,CAA9B;AAMA,SAAO,EACN,GAAGF,UADG;AAENQ,IAAAA,iBAFM;AAGNT,IAAAA,SAAS,EAAEM,OAHL;AAINK,IAAAA;AAJM,GAAP;AAMA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils/';\n\nimport type { SplitControlsProps } from '../types';\n\nexport function useBorderBoxControlSplitControls(\n\tprops: WordPressComponentProps< SplitControlsProps, 'div' >\n) {\n\tconst { className, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'BorderBoxControlSplitControls'\n\t);\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst rtlWatchResult = rtl.watch();\n\tconst classes = useMemo( () => {\n\t\treturn cx( styles.borderBoxControlSplitControls(), className );\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ cx, className, rtlWatchResult ] );\n\n\tconst centeredClassName = useMemo( () => {\n\t\treturn cx( styles.CenteredBorderControl, className );\n\t}, [ cx, className ] );\n\n\tconst rightAlignedClassName = useMemo( () => {\n\t\treturn cx( styles.rightBorderControl(), className );\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ cx, className, rtlWatchResult ] );\n\n\treturn {\n\t\t...otherProps,\n\t\tcenteredClassName,\n\t\tclassName: classes,\n\t\trightAlignedClassName,\n\t};\n}\n"]}

package/build/border-box-control/border-box-control-visualizer/hook.js

@@ -33,9 +33,13 @@ function useBorderBoxControlVisualizer(props) {
   } = (0, _context.useContextSystem)(props, 'BorderBoxControlVisualizer'); // Generate class names.
 
   const cx = (0, _utils.useCx)();
+
+  const rtlWatchResult = _utils.rtl.watch();
+
   const classes = (0, _element.useMemo)(() => {
-    return cx(styles.BorderBoxControlVisualizer(value, __next36pxDefaultSize), className);
-  }, [className, value, __next36pxDefaultSize, _utils.rtl.watch()]);
+    return cx(styles.borderBoxControlVisualizer(value, __next36pxDefaultSize), className); // rtlWatchResult is needed to refresh styles when the writing direction changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cx, className, value, __next36pxDefaultSize, rtlWatchResult]);
   return { ...otherProps,
     className: classes,
     value

package/build/border-box-control/border-box-control-visualizer/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/hook.ts"],"names":["useBorderBoxControlVisualizer","props","className","value","__next36pxDefaultSize","otherProps","cx","classes","styles","BorderBoxControlVisualizer","rtl","watch"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,6BAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,qBAAqB,GAAG,KAHnB;AAIL,OAAGC;AAJE,MAKF,+BAAkBJ,KAAlB,EAAyB,4BAAzB,CALJ,CADC,CAQD;;AACA,QAAMK,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOD,EAAE,CACRE,MAAM,CAACC,0BAAP,CAAmCN,KAAnC,EAA0CC,qBAA1C,CADQ,EAERF,SAFQ,CAAT;AAIA,GALe,EAKb,CAAEA,SAAF,EAAaC,KAAb,EAAoBC,qBAApB,EAA2CM,WAAIC,KAAJ,EAA3C,CALa,CAAhB;AAOA,SAAO,EAAE,GAAGN,UAAL;AAAiBH,IAAAA,SAAS,EAAEK,OAA5B;AAAqCJ,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils';\n\nimport type { VisualizerProps } from '../types';\n\nexport function useBorderBoxControlVisualizer(\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tvalue,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlVisualizer' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.BorderBoxControlVisualizer( value, __next36pxDefaultSize ),\n\t\t\tclassName\n\t\t);\n\t}, [ className, value, __next36pxDefaultSize, rtl.watch() ] );\n\n\treturn { ...otherProps, className: classes, value };\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control-visualizer/hook.ts"],"names":["useBorderBoxControlVisualizer","props","className","value","__next36pxDefaultSize","otherProps","cx","rtlWatchResult","rtl","watch","classes","styles","borderBoxControlVisualizer"],"mappings":";;;;;;;AAGA;;AAKA;;AACA;;AACA;;;;;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAOO,SAASA,6BAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,qBAAqB,GAAG,KAHnB;AAIL,OAAGC;AAJE,MAKF,+BAAkBJ,KAAlB,EAAyB,4BAAzB,CALJ,CADC,CAQD;;AACA,QAAMK,EAAE,GAAG,mBAAX;;AACA,QAAMC,cAAc,GAAGC,WAAIC,KAAJ,EAAvB;;AACA,QAAMC,OAAO,GAAG,sBAAS,MAAM;AAC9B,WAAOJ,EAAE,CACRK,MAAM,CAACC,0BAAP,CAAmCT,KAAnC,EAA0CC,qBAA1C,CADQ,EAERF,SAFQ,CAAT,CAD8B,CAK9B;AACA;AACA,GAPe,EAOb,CAAEI,EAAF,EAAMJ,SAAN,EAAiBC,KAAjB,EAAwBC,qBAAxB,EAA+CG,cAA/C,CAPa,CAAhB;AASA,SAAO,EAAE,GAAGF,UAAL;AAAiBH,IAAAA,SAAS,EAAEQ,OAA5B;AAAqCP,IAAAA;AAArC,GAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx, rtl } from '../../utils';\n\nimport type { VisualizerProps } from '../types';\n\nexport function useBorderBoxControlVisualizer(\n\tprops: WordPressComponentProps< VisualizerProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tvalue,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'BorderBoxControlVisualizer' );\n\n\t// Generate class names.\n\tconst cx = useCx();\n\tconst rtlWatchResult = rtl.watch();\n\tconst classes = useMemo( () => {\n\t\treturn cx(\n\t\t\tstyles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),\n\t\t\tclassName\n\t\t);\n\t\t// rtlWatchResult is needed to refresh styles when the writing direction changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );\n\n\treturn { ...otherProps, className: classes, value };\n}\n"]}