npm - @wordpress/components - Versions diffs - 21.3.0 → 22.1.0 - Mend

@wordpress/components 21.3.0 → 22.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (811) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,13 +2,118 @@
 ## Unreleased
+## 22.1.0 (2022-11-16)
+### Enhancements
+-   `ColorPalette`, `BorderBox`, `BorderBoxControl`: polish and DRY prop types, add default values ([#45463](https://github.com/WordPress/gutenberg/pull/45463)).
+### Bug Fix
+-   `FormTokenField`: Fix duplicate input in IME composition ([#45607](https://github.com/WordPress/gutenberg/pull/45607)).
+-   `Autocomplete`: Check key events more strictly in IME composition ([#45626](https://github.com/WordPress/gutenberg/pull/45626)).
+-   `Autocomplete`: Fix unexpected block insertion during IME composition ([#45510](https://github.com/WordPress/gutenberg/pull/45510)).
+-   `Icon`: Making size prop work for icon components using dash icon strings ([#45593](https://github.com/WordPress/gutenberg/pull/45593))
+-   `ToolsPanelItem`: Prevent unintended calls to onDeselect when parent panel is remounted and item is rendered via SlotFill ([#45673](https://github.com/WordPress/gutenberg/pull/45673))
+-   `ColorPicker`: Prevent all number fields from becoming "0" when one of them is an empty string ([#45649](https://github.com/WordPress/gutenberg/pull/45649)).
+### Internal
+-   `ToolsPanel`: Update to fix `exhaustive-deps` eslint rule ([#45715](https://github.com/WordPress/gutenberg/pull/45715)).
+-   `PaletteEditListView`: Update to ignore `exhaustive-deps` eslint rule ([#45467](https://github.com/WordPress/gutenberg/pull/45467)).
+-   `Popover`: Update to pass `exhaustive-deps` eslint rule ([#45656](https://github.com/WordPress/gutenberg/pull/45656)).
+-   `Flex`: Update to pass `exhaustive-deps` eslint rule ([#45528](https://github.com/WordPress/gutenberg/pull/45528)).
+-   `withNotices`: Update to pass `exhaustive-deps` eslint rule ([#45530](https://github.com/WordPress/gutenberg/pull/45530)).
+-   `ItemGroup`: Update to pass `exhaustive-deps` eslint rule ([#45531](https://github.com/WordPress/gutenberg/pull/45531)).
+-   `TabPanel`: Update to pass `exhaustive-deps` eslint rule ([#45660](https://github.com/WordPress/gutenberg/pull/45660)).
+-   `NavigatorScreen`: Update to pass `exhaustive-deps` eslint rule ([#45648](https://github.com/WordPress/gutenberg/pull/45648)).
+-   `Draggable`: Convert to TypeScript ([#45471](https://github.com/WordPress/gutenberg/pull/45471)).
+-   `MenuGroup`: Convert to TypeScript ([#45617](https://github.com/WordPress/gutenberg/pull/45617)).
+-   `useCx`: fix story to satisfy the `react-hooks/exhaustive-deps` eslint rule ([#45614](https://github.com/WordPress/gutenberg/pull/45614))
+-   Activate the `react-hooks/exhuastive-deps` eslint rule for the Components package ([#41166](https://github.com/WordPress/gutenberg/pull/41166))
+### Experimental
+-   `ToggleGroupControl`: Only show enclosing border when `isBlock` and not `isDeselectable` ([#45492](https://github.com/WordPress/gutenberg/pull/45492)).
+## 22.0.0 (2022-11-02)
+### Breaking Changes
+-   `Popover`: The deprecated `range` and `__unstableShift` props have been removed ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+### Deprecations
+-   `Popover`: the deprecation messages for anchor-related props (`anchorRef`, `anchorRect`, `getAnchorRect`) have been updated ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+-   `RadioGroup`: Mark as deprecated, in favor of `RadioControl` and `ToggleGroupControl` ([#45389](https://github.com/WordPress/gutenberg/pull/45389)).
+-   `Popover`: the deprecation messages for anchor-related props (`anchorRef`, `anchorRect`, `getAnchorRect`) have been updated. ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+-   `Popover`: The `isAlternate` prop has been replaced with a `variant` prop that can be called with the `'toolbar'` string ([#45137](https://github.com/WordPress/gutenberg/pull/45137)).
+### New Feature
+-   `BoxControl` & `CustomSelectControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent components ([#44955](https://github.com/WordPress/gutenberg/pull/44955))
+-   `Popover`: A `variant` prop has been added to style popovers, with `'unstyled'` and `'toolbar'` possible values ([#45137](https://github.com/WordPress/gutenberg/pull/45137)).
+### Enhancements
+-   `FontSizePicker`: Pass the preset object to the onChange callback to allow conversion from preset slugs to CSS vars ([#44967](https://github.com/WordPress/gutenberg/pull/44967)).
+-   `FontSizePicker`: Improved slider design when `withSlider` is set ([#44598](https://github.com/WordPress/gutenberg/pull/44598)).
+-   `ToggleControl`: Improved types for the `help` prop, covering the dynamic render function option, and enabled the dynamic `help` behavior only for a controlled component ([#45279](https://github.com/WordPress/gutenberg/pull/45279)).
+-   `BorderControl` & `BorderBoxControl`: Replace `__next36pxDefaultSize` with "default" and "large" size variants ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
+-   `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
+-   `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)).
+-   `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
+-   `FontSizePicker`: Improve hint text shown next to 'Font size' label ([#44966](https://github.com/WordPress/gutenberg/pull/44966)).
+### Bug Fix
+-   `useNavigateRegions`: Add new keyboard shortcut alias to cover backtick and tilde keys inconsistencies across browsers ([#45019](https://github.com/WordPress/gutenberg/pull/45019)).
+-   `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)).
+-   `UnitControl`: Fix `disabled` style is overridden by core `form.css` style ([#45250](https://github.com/WordPress/gutenberg/pull/45250)).
+-   `ItemGroup`: fix RTL `Item` styles when rendered as a button ([#45280](https://github.com/WordPress/gutenberg/pull/45280)).
+-   `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)).
+-   `TabPanel`: Call `onSelect()` on every tab selection, regardless of whether it was triggered by user interaction ([#44028](https://github.com/WordPress/gutenberg/pull/44028)).
+-   `FontSizePicker`: Fallback to font size `slug` if `name` is undefined ([#45041](https://github.com/WordPress/gutenberg/pull/45041)).
+-   `AutocompleterUI`: fix issue where autocompleter UI would appear on top of other UI elements ([#44795](https://github.com/WordPress/gutenberg/pull/44795/))
+-   `ExternalLink`: Fix to re-enable support for `onClick` event handler ([#45214](https://github.com/WordPress/gutenberg/pull/45214)).
+-   `InputControl`: Allow inline styles to be applied to the wrapper not inner input ([#45340](https://github.com/WordPress/gutenberg/pull/45340/))
+### Internal
+-   `BorderBoxControl`: Convert stories to TypeScript and use Controls ([#45002](https://github.com/WordPress/gutenberg/pull/45002)).
+-   `Disabled`: add a note in the docs about the lack of polyfill for the `inert` attribute ([#45272](https://github.com/WordPress/gutenberg/pull/45272))
+-   `Snackbar`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44934](https://github.com/WordPress/gutenberg/pull/44934))
+-   `AnglePickerControl`: Set Storybook Label control type to 'text' ([#45122](https://github.com/WordPress/gutenberg/pull/45122)).
+-   `SlotFill`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44403](https://github.com/WordPress/gutenberg/pull/44403))
+-   `Context`: updated to ignore `react/exhaustive-deps` eslint rule ([#45044](https://github.com/WordPress/gutenberg/pull/45044))
+-   `Button`: Refactor Storybook to controls and align docs ([#44105](https://github.com/WordPress/gutenberg/pull/44105)).
+-   `TabPanel`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44935](https://github.com/WordPress/gutenberg/pull/44935))
+-   `ColorPalette`: Convert to TypeScript ([#44632](https://github.com/WordPress/gutenberg/pull/44632)).
+-   `UnitControl`: Add tests ([#45260](https://github.com/WordPress/gutenberg/pull/45260)).
+-   `Disabled`: Refactor the component to rely on the HTML `inert` attribute.
+-   `CustomGradientBar`: Refactor away from Lodash ([#45367](https://github.com/WordPress/gutenberg/pull/45367/)).
+-   `TextControl`: Set Storybook control types on `help`, `label` and `type` ([#45405](https://github.com/WordPress/gutenberg/pull/45405)).
+-   `Autocomplete`: use Popover's new `placement` prop instead of legacy `position` prop ([#44396](https://github.com/WordPress/gutenberg/pull/44396/)).
+-   `SelectControl`: Add `onChange`, `onBlur` and `onFocus` to storybook actions ([#45432](https://github.com/WordPress/gutenberg/pull/45432/)).
+-   `FontSizePicker`: Add more comprehensive tests ([#45298](https://github.com/WordPress/gutenberg/pull/45298)).
+-   `FontSizePicker`: Refactor to use components instead of helper functions ([#44891](https://github.com/WordPress/gutenberg/pull/44891)).
+### Experimental
+-   `NumberControl`: Replace `hideHTMLArrows` prop with `spinControls` prop. Allow custom spin controls via `spinControls="custom"` ([#45333](https://github.com/WordPress/gutenberg/pull/45333)).
+### Experimental
+-   Theming: updated Components package to utilize the new `accent` prop of the experimental `Theme` component.
 ## 21.3.0 (2022-10-19)
 ### Bug Fix
 -   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791)).
+-   `ToggleGroupControl`: Remove unsupported `disabled` prop from types, and correctly mark `label` prop as required ([#45114](https://github.com/WordPress/gutenberg/pull/45114)).
 -   `Navigator`: prevent partially hiding focus ring styles, by removing unnecessary overflow rules on `NavigatorScreen` ([#44973](https://github.com/WordPress/gutenberg/pull/44973)).
--   `Navigator`: restore focus only once per location  ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
+-   `Navigator`: restore focus only once per location ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
 ### Documentation
@@ -20,6 +125,7 @@
 -   `Sandbox`: Use `toString` to create observe and resize script string ([#42872](https://github.com/WordPress/gutenberg/pull/42872)).
 -   `Navigator`: refactor unit tests to TypeScript and to `user-event` ([#44970](https://github.com/WordPress/gutenberg/pull/44970)).
 -   `Navigator`: Refactor Storybook code to TypeScript and controls ([#44979](https://github.com/WordPress/gutenberg/pull/44979)).
+-   `withFilters`: Refactor away from `_.without()` ([#44980](https://github.com/WordPress/gutenberg/pull/44980/)).
 -   `withFocusReturn`: Refactor tests to `@testing-library/react` ([#45012](https://github.com/WordPress/gutenberg/pull/45012)).
 -   `ToolsPanel`: updated to satisfy `react/exhaustive-deps` eslint rule ([#45028](https://github.com/WordPress/gutenberg/pull/45028))
 -   `Tooltip`: updated to ignore `react/exhaustive-deps` eslint rule ([#45043](https://github.com/WordPress/gutenberg/pull/45043))

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

@@ -29,6 +29,8 @@ var _text = require("../text");
 var _spacer = require("../spacer");
+var _colorsValues = require("../utils/colors-values");
 /**
  * External dependencies
  */
@@ -77,13 +79,13 @@ function AnglePickerControl(_ref) {
     size: "__unstable-large",
     step: "1",
     value: value,
-    hideHTMLArrows: true,
+    spinControls: "none",
     suffix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
       marginBottom: 0,
       marginRight: (0, _space.space)(3),
       style: {
-        color: 'var( --wp-admin-theme-color )'
+        color: _colorsValues.COLORS.ui.theme
       }
     }, "\xB0")
   })), (0, _element.createElement)(_flex.FlexItem, {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","__nextHasNoMarginBottom","className","label","onChange","value","since","version","hint","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;~~AApBA~~;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;~~AASe~~,SAASA,kBAAT,OAOX;AAAA,MAPwC;AAC3C;AACAC,IAAAA,uBAAuB,GAAG,KAFiB;AAG3CC,IAAAA,SAH2C;AAI3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAJmC;AAK3CC,IAAAA,QAL2C;AAM3CC,IAAAA;AAN2C,GAOxC;;AACH,MAAK,CAAEJ,uBAAP,EAAiC;AAChC,6BACC,2DADD,EAEC;AACCK,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFD;AAQA;;AAED,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAN,IAAAA,QAAQ,CAAEO,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CX,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AACC,IAAA,uBAAuB,EAAGD,uBAD3B;AAEC,IAAA,SAAS,EAAGY,OAFb;AAGC,IAAA,GAAG,EAAG;AAHP,KAKC,4BAAC,eAAD,QACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGM,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGJ,KART;AASC,IAAA,~~cAAc~~,~~MATf~~;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGS,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,~~EAAE~~;~~AADA~~;AAJT;AAXF,IADD,CALD,EA8BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CADP;AAEPC,MAAAA,SAAS,EAAE;AAFJ;AADT,KAMC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,~~EAAGZ~~,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAND,CA9BD,CADD;AA6CA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\n\nexport default function AnglePickerControl( {\n\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\~~thideHTMLArrows~~\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: ~~'var( --wp-admin-~~theme~~-color )'~~,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["AnglePickerControl","__nextHasNoMarginBottom","className","label","onChange","value","since","version","hint","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","Text","color","COLORS","ui","theme","marginBottom","marginTop"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAUe,SAASA,kBAAT,OAOX;AAAA,MAPwC;AAC3C;AACAC,IAAAA,uBAAuB,GAAG,KAFiB;AAG3CC,IAAAA,SAH2C;AAI3CC,IAAAA,KAAK,GAAG,cAAI,OAAJ,CAJmC;AAK3CC,IAAAA,QAL2C;AAM3CC,IAAAA;AAN2C,GAOxC;;AACH,MAAK,CAAEJ,uBAAP,EAAiC;AAChC,6BACC,2DADD,EAEC;AACCK,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFD;AAQA;;AAED,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAN,IAAAA,QAAQ,CAAEO,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAG,yBAAY,iCAAZ,EAA+CX,SAA/C,CAAhB;AAEA,SACC,4BAAC,8BAAD;AACC,IAAA,uBAAuB,EAAGD,uBAD3B;AAEC,IAAA,SAAS,EAAGY,OAFb;AAGC,IAAA,GAAG,EAAG;AAHP,KAKC,4BAAC,eAAD,QACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGM,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGJ,KART;AASC,IAAA,YAAY,EAAC,MATd;AAUC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGS,UADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAHf;AAIC,MAAA,KAAK,EAAG;AACPC,QAAAA,KAAK,EAAEC,qBAAOC,EAAP,CAAUC;AADV;AAJT;AAXF,IADD,CALD,EA8BC,4BAAC,cAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,YAAY,EAAE,kBAAO,CAAP,CADP;AAEPC,MAAAA,SAAS,EAAE;AAFJ;AADT,KAMC,4BAAC,oBAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGf,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAND,CA9BD,CADD;AA6CA","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { COLORS } from '../utils/colors-values';\n\nexport default function AnglePickerControl( {\n\t/* Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: COLORS.ui.theme,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}

package/build/autocomplete/autocompleter-ui.js CHANGED Viewed

@@ -45,6 +45,7 @@ function getAutoCompleterUI(autocompleter) {
       onChangeOptions,
       onSelect,
       onReset,
+      reset,
       value,
       contentRef
     } = _ref;
@@ -53,6 +54,8 @@ function getAutoCompleterUI(autocompleter) {
       editableContentElement: contentRef.current,
       value
     });
+    const popoverRef = (0, _element.useRef)();
+    useOnClickOutside(popoverRef, reset);
     (0, _element.useLayoutEffect)(() => {
       onChangeOptions(items); // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
       // See https://github.com/WordPress/gutenberg/pull/41820
@@ -66,9 +69,10 @@ function getAutoCompleterUI(autocompleter) {
     return (0, _element.createElement)(_popover.default, {
       focusOnMount: false,
       onClose: onReset,
-      position: "top right",
+      placement: "top-start",
       className: "components-autocomplete__popover",
-      anchor: popoverAnchor
+      anchor: popoverAnchor,
+      ref: popoverRef
     }, (0, _element.createElement)("div", {
       id: listBoxId,
       role: "listbox",
@@ -88,4 +92,26 @@ function getAutoCompleterUI(autocompleter) {
   return AutocompleterUI;
 }
+function useOnClickOutside(ref, handler) {
+  (0, _element.useEffect)(() => {
+    const listener = event => {
+      // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    }; // Disable reason: `ref` is a ref object and should not be included in a
+    // hook's dependency list.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handler]);
+}
 //# sourceMappingURL=autocompleter-ui.js.map

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

	@@ -1 +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","popoverAnchor","editableContentElement","current","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~~,aAAa,GAAG,yBAAW;AAChCC,MAAAA,sBAAsB,EAAEH,UAAU,CAACI,OADH;AAEhCL,MAAAA;AAFgC,KAAX,CAAtB;AAKA,kCAAiB,MAAM;AACtBH,MAAAA,eAAe,~~CAAEK~~,KAAF,CAAf,CADsB,CAEtB;AACA;AACA;AACA,KALD,EAKG,CAAEA,KAAF,CALH;;AAOA,QAAK,CAAEA,KAAK,~~CAACI~~,MAAR,GAAiB,CAAtB,EAA0B;AACzB,aAAO,IAAP;AACA;;AAED,WACC,4BAAC,gBAAD;AACC,MAAA,YAAY,EAAG,KADhB;AAEC,MAAA,OAAO,~~EAAGP~~,OAFX;AAGC,MAAA,~~QAAQ~~,EAAC,~~WAHV~~;AAIC,MAAA,SAAS,EAAC,kCAJX;AAKC,MAAA,MAAM,~~EAAGI~~;~~AALV~~,~~OAOC~~;AACC,MAAA,EAAE,~~EAAGT~~,SADN;AAEC,MAAA,IAAI,EAAC,SAFN;AAGC,MAAA,SAAS,EAAC;AAHX,OAKG,~~iBAAKQ~~,KAAL,EAAY,~~CAAEK~~,MAAF,EAAUC,KAAV,KACb,4BAAC,eAAD;AACC,MAAA,GAAG,EAAGD,MAAM,CAACE,GADd;AAEC,MAAA,EAAE,EAAI,~~gCAAgChB~~,UAAY,~~IAAIc~~,MAAM,CAACE,GAAK,EAFnE;AAGC,MAAA,IAAI,EAAC,QAHN;AAIC,uBAAgBD,KAAK,~~KAAKZ~~,aAJ3B;AAKC,MAAA,QAAQ,~~EAAGW~~,MAAM,CAACG,UALnB;AAMC,MAAA,SAAS,EAAG,yBACX,iCADW,~~EAEXf~~,SAFW,EAGX;AACC,~~uBAAea~~,KAAK,~~KAAKZ~~;AAD1B,OAHW,CANb;AAaC,MAAA,OAAO,EAAG,MAAME,QAAQ,~~CAAES~~,MAAF;AAbzB,OAeGA,MAAM,CAACI,KAfV,CADC,CALH,~~CAPD~~,CADD;~~AAmCA~~;;AAED,~~SAAOpB~~,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 { useAnchor } 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 popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t\tvalue,\n\t\t} );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( ! items.length > 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tonClose={ onReset }\n\t\t\t\~~tposition~~=\"top ~~right~~\"\n\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\tanchor={ popoverAnchor }\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"]}
1	+ {"version":3,"sources":["@wordpress/components/src/autocomplete/autocompleter-ui.js"],"names":["getAutoCompleterUI","autocompleter","useItems","AutocompleterUI","filterValue","instanceId","listBoxId","className","selectedIndex","onChangeOptions","onSelect","onReset","reset","value","contentRef","items","popoverAnchor","editableContentElement","current","popoverRef","useOnClickOutside","length","option","index","key","isDisabled","label","ref","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\nimport { map } from 'lodash';\n\n/\n WordPress dependencies\n /\nimport { useLayoutEffect, useRef, useEffect } from '@wordpress/element';\nimport { useAnchor } 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\treset,\n\t\tvalue,\n\t\tcontentRef,\n\t} ) {\n\t\tconst [ items ] = useItems( filterValue );\n\t\tconst popoverAnchor = useAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t\tvalue,\n\t\t} );\n\n\t\tconst popoverRef = useRef();\n\n\t\tuseOnClickOutside( popoverRef, reset );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tonChangeOptions( items );\n\t\t\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t}, [ items ] );\n\n\t\tif ( ! items.length > 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Popover\n\t\t\t\tfocusOnMount={ false }\n\t\t\t\tonClose={ onReset }\n\t\t\t\tplacement=\"top-start\"\n\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\tref={ popoverRef }\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\nfunction useOnClickOutside( ref, handler ) {\n\tuseEffect( () => {\n\t\tconst listener = ( event ) => {\n\t\t\t// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element\n\t\t\tif ( ! ref.current \|\| ref.current.contains( event.target ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\thandler( event );\n\t\t};\n\t\tdocument.addEventListener( 'mousedown', listener );\n\t\tdocument.addEventListener( 'touchstart', listener );\n\t\treturn () => {\n\t\t\tdocument.removeEventListener( 'mousedown', listener );\n\t\t\tdocument.removeEventListener( 'touchstart', listener );\n\t\t};\n\t\t// Disable reason: `ref` is a ref object and should not be included in a\n\t\t// hook's dependency list.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ handler ] );\n}\n"]}

package/build/autocomplete/index.js CHANGED Viewed

@@ -208,7 +208,7 @@ function useAutocomplete(_ref) {
   }
   function handleKeyDown(event) {
-    backspacing.current = event.code === 'Backspace';
+    backspacing.current = event.key === 'Backspace';
     if (!autocompleter) {
       return;
@@ -218,11 +218,15 @@ function useAutocomplete(_ref) {
       return;
     }
-    if (event.defaultPrevented) {
+    if (event.defaultPrevented || // Ignore keydowns from IMEs
+    event.isComposing || // Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+    // is `isComposing=false`, even though it's technically still part of the composition.
+    // These can only be detected by keyCode.
+    event.keyCode === 229) {
       return;
     }
-    switch (event.code) {
+    switch (event.key) {
       case 'ArrowUp':
         setSelectedIndex((selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1);
         break;

package/build/autocomplete/index.js.map CHANGED Viewed

	@@ -1 +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","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","code","defaultPrevented","preventDefault","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 { find } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/\n WordPress dependencies\n /\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\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';\nimport { escapeRegExp } from '../utils/strings';\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.code === '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.code ) {\n\t\t\tcase 'ArrowUp':\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 'ArrowDown':\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 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\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 key 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 = removeAccents( 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\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\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"]}
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","insertCompletion","replacement","end","start","triggerPrefix","length","toInsert","html","select","option","getOptionCompletion","isDisabled","completion","value","action","undefined","reset","announce","options","onChangeOptions","handleKeyDown","event","current","key","defaultPrevented","isComposing","keyCode","preventDefault","textContent","text","textAfterSelection","completer","allowContext","index","lastIndexOf","textWithoutTrigger","slice","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","test","safeTrigger","match","RegExp","query","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 { find } from 'lodash';\nimport removeAccents from 'remove-accents';\n\n/\n WordPress dependencies\n /\nimport {\n\trenderToString,\n\tuseEffect,\n\tuseState,\n\tuseRef,\n\tuseMemo,\n} from '@wordpress/element';\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';\nimport { escapeRegExp } from '../utils/strings';\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.key === '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\n\t\tif (\n\t\t\tevent.defaultPrevented \|\|\n\t\t\t// Ignore keydowns from IMEs\n\t\t\tevent.isComposing \|\|\n\t\t\t// Workaround for Mac Safari where the final Enter/Backspace of an IME composition\n\t\t\t// is `isComposing=false`, even though it's technically still part of the composition.\n\t\t\t// These can only be detected by keyCode.\n\t\t\tevent.keyCode === 229\n\t\t) {\n\t\t\treturn;\n\t\t}\n\t\tswitch ( event.key ) {\n\t\t\tcase 'ArrowUp':\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 'ArrowDown':\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 'ArrowLeft':\n\t\t\tcase 'ArrowRight':\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 key 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 = removeAccents( 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\t// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41820\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\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"]}

package/build/border-box-control/border-box-control/component.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.BorderBoxControl = void 0;
 var _element = require("@wordpress/element");
@@ -21,8 +21,6 @@ var _borderBoxControlSplitControls = _interopRequireDefault(require("../border-b
 var _borderControl = require("../../border-control");
-var _hStack = require("../../h-stack");
 var _baseControlStyles = require("../../base-control/styles/base-control-styles");
 var _view = require("../../view");
@@ -55,7 +53,7 @@ const BorderLabel = props => {
   }, label) : (0, _element.createElement)(_baseControlStyles.StyledLabel, null, label);
 };
-const BorderBoxControl = (props, forwardedRef) => {
+const UnconnectedBorderBoxControl = (props, forwardedRef) => {
   const {
     className,
     colors,
@@ -73,11 +71,12 @@ const BorderBoxControl = (props, forwardedRef) => {
     onSplitChange,
     popoverPlacement,
     popoverOffset,
+    size,
     splitValue,
     toggleLinked,
+    wrapperClassName,
     __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar,
-    __next36pxDefaultSize = false,
     ...otherProps
   } = (0, _hook.useBorderBoxControl)(props); // Use internal state instead of a ref to make sure that the component
   // re-renders when the popover's anchor updates.
@@ -98,10 +97,8 @@ const BorderBoxControl = (props, forwardedRef) => {
   }), (0, _element.createElement)(BorderLabel, {
     label: label,
     hideLabelFromVision: hideLabelFromVision
-  }), (0, _element.createElement)(_hStack.HStack, {
-    alignment: 'start',
-    expanded: true,
-    spacing: 0
+  }), (0, _element.createElement)(_view.View, {
+    className: wrapperClassName
   }, isLinked ? (0, _element.createElement)(_borderControl.BorderControl, {
     className: linkedControlClassName,
     colors: colors,
@@ -116,10 +113,10 @@ const BorderBoxControl = (props, forwardedRef) => {
     ,
     value: linkedValue,
     withSlider: true,
-    width: '110px',
+    width: size === '__unstable-large' ? '116px' : '110px',
     __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    __next36pxDefaultSize: __next36pxDefaultSize
+    size: size
   }) : (0, _element.createElement)(_borderBoxControlSplitControls.default, {
     colors: colors,
     disableCustomColors: disableCustomColors,
@@ -131,15 +128,66 @@ const BorderBoxControl = (props, forwardedRef) => {
     value: splitValue,
     __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins,
     __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    __next36pxDefaultSize: __next36pxDefaultSize
+    size: size
   }), (0, _element.createElement)(_borderBoxControlLinkedButton.default, {
     onClick: toggleLinked,
     isLinked: isLinked,
-    __next36pxDefaultSize: __next36pxDefaultSize
+    size: size
   })));
 };
+/**
+ * The `BorderBoxControl` effectively has two view states. The first, a "linked"
+ * view, allows configuration of a flat border via a single `BorderControl`.
+ * The second, a "split" view, contains a `BorderControl` for each side
+ * as well as a visualizer for the currently selected borders. Each view also
+ * contains a button to toggle between the two.
+ *
+ * When switching from the "split" view to "linked", if the individual side
+ * borders are not consistent, the "linked" view will display any border
+ * properties selections that are consistent while showing a mixed state for
+ * those that aren't. For example, if all borders had the same color and style
+ * but different widths, then the border dropdown in the "linked" view's
+ * `BorderControl` would show that consistent color and style but the "linked"
+ * view's width input would show "Mixed" placeholder text.
+ *
+ * ```jsx
+ * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderBoxControl = () => {
+ * 	const defaultBorder = {
+ * 		color: '#72aee6',
+ * 		style: 'dashed',
+ * 		width: '1px',
+ * 	};
+ * 	const [ borders, setBorders ] = useState( {
+ * 		top: defaultBorder,
+ * 		right: defaultBorder,
+ * 		bottom: defaultBorder,
+ * 		left: defaultBorder,
+ * 	} );
+ * 	const onChange = ( newBorders ) => setBorders( newBorders );
+ *
+ * 	return (
+ * 		<BorderBoxControl
+ * 			colors={ colors }
+ * 			label={ __( 'Borders' ) }
+ * 			onChange={ onChange }
+ * 			value={ borders }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
-const ConnectedBorderBoxControl = (0, _context.contextConnect)(BorderBoxControl, 'BorderBoxControl');
-var _default = ConnectedBorderBoxControl;
+const BorderBoxControl = (0, _context.contextConnect)(UnconnectedBorderBoxControl, 'BorderBoxControl');
+exports.BorderBoxControl = BorderBoxControl;
+var _default = BorderBoxControl;
 exports.default = _default;
 //# sourceMappingURL=component.js.map

package/build/border-box-control/border-box-control/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","BorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","splitValue","toggleLinked","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","__next36pxDefaultSize","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","mergedRef","ConnectedBorderBoxControl"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n */\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { HStack } from '../../h-stack';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst BorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t__next36pxDefaultSize = false,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element \| null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={ '110px' }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t__next36pxDefaultSize={ __next36pxDefaultSize }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</View>\n\t);\n};\n\nconst ConnectedBorderBoxControl = contextConnect(\n\tBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default ConnectedBorderBoxControl;\n"]}
1	+ {"version":3,"sources":["@wordpress/components/src/border-box-control/border-box-control/component.tsx"],"names":["BorderLabel","props","label","hideLabelFromVision","UnconnectedBorderBoxControl","forwardedRef","className","colors","disableCustomColors","disableUnits","enableAlpha","enableStyle","hasMixedBorders","isLinked","linkedControlClassName","linkedValue","onLinkedChange","onSplitChange","popoverPlacement","popoverOffset","size","splitValue","toggleLinked","wrapperClassName","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","otherProps","popoverAnchor","setPopoverAnchor","popoverProps","placement","offset","anchor","shift","undefined","mergedRef","BorderBoxControl"],"mappings":"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","sourcesContent":["/*\n WordPress dependencies\n /\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport BorderBoxControlLinkedButton from '../border-box-control-linked-button';\nimport BorderBoxControlSplitControls from '../border-box-control-split-controls';\nimport { BorderControl } from '../../border-control';\nimport { StyledLabel } from '../../base-control/styles/base-control-styles';\nimport { View } from '../../view';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { useBorderBoxControl } from './hook';\n\nimport type { BorderBoxControlProps } from '../types';\nimport type {\n\tLabelProps,\n\tBorderControlProps,\n} from '../../border-control/types';\n\nconst BorderLabel = ( props: LabelProps ) => {\n\tconst { label, hideLabelFromVision } = props;\n\n\tif ( ! label ) {\n\t\treturn null;\n\t}\n\n\treturn hideLabelFromVision ? (\n\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t) : (\n\t\t<StyledLabel>{ label }</StyledLabel>\n\t);\n};\n\nconst UnconnectedBorderBoxControl = (\n\tprops: WordPressComponentProps< BorderBoxControlProps, 'div', false >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst {\n\t\tclassName,\n\t\tcolors,\n\t\tdisableCustomColors,\n\t\tdisableUnits,\n\t\tenableAlpha,\n\t\tenableStyle,\n\t\thasMixedBorders,\n\t\thideLabelFromVision,\n\t\tisLinked,\n\t\tlabel,\n\t\tlinkedControlClassName,\n\t\tlinkedValue,\n\t\tonLinkedChange,\n\t\tonSplitChange,\n\t\tpopoverPlacement,\n\t\tpopoverOffset,\n\t\tsize,\n\t\tsplitValue,\n\t\ttoggleLinked,\n\t\twrapperClassName,\n\t\t__experimentalHasMultipleOrigins,\n\t\t__experimentalIsRenderedInSidebar,\n\t\t...otherProps\n\t} = useBorderBoxControl( props );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState< Element \| null >(\n\t\tnull\n\t);\n\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =\n\t\tuseMemo(\n\t\t\t() =>\n\t\t\t\tpopoverPlacement\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: popoverPlacement,\n\t\t\t\t\t\t\toffset: popoverOffset,\n\t\t\t\t\t\t\tanchor: popoverAnchor,\n\t\t\t\t\t\t\tshift: true,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined,\n\t\t\t[ popoverPlacement, popoverOffset, popoverAnchor ]\n\t\t);\n\n\tconst mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );\n\n\treturn (\n\t\t<View className={ className } { ...otherProps } ref={ mergedRef }>\n\t\t\t<BorderLabel\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t/>\n\t\t\t<View className={ wrapperClassName }>\n\t\t\t\t{ isLinked ? (\n\t\t\t\t\t<BorderControl\n\t\t\t\t\t\tclassName={ linkedControlClassName }\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onLinkedChange }\n\t\t\t\t\t\tplaceholder={\n\t\t\t\t\t\t\thasMixedBorders ? __( 'Mixed' ) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstablePopoverProps={ popoverProps }\n\t\t\t\t\t\tshouldSanitizeBorder={ false } // This component will handle that.\n\t\t\t\t\t\tvalue={ linkedValue }\n\t\t\t\t\t\twithSlider={ true }\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsize === '__unstable-large' ? '116px' : '110px'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BorderBoxControlSplitControls\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\tenableStyle={ enableStyle }\n\t\t\t\t\t\tonChange={ onSplitChange }\n\t\t\t\t\t\tpopoverPlacement={ popoverPlacement }\n\t\t\t\t\t\tpopoverOffset={ popoverOffset }\n\t\t\t\t\t\tvalue={ splitValue }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={\n\t\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ size }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BorderBoxControlLinkedButton\n\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\tsize={ size }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</View>\n\t);\n};\n\n/\n The `BorderBoxControl` effectively has two view states. The first, a \"linked\"\n * view, allows configuration of a flat border via a single `BorderControl`.\n * The second, a \"split\" view, contains a `BorderControl` for each side\n * as well as a visualizer for the currently selected borders. Each view also\n * contains a button to toggle between the two.\n \n When switching from the \"split\" view to \"linked\", if the individual side\n * borders are not consistent, the \"linked\" view will display any border\n * properties selections that are consistent while showing a mixed state for\n * those that aren't. For example, if all borders had the same color and style\n * but different widths, then the border dropdown in the \"linked\" view's\n * `BorderControl` would show that consistent color and style but the \"linked\"\n * view's width input would show \"Mixed\" placeholder text.\n \n ```jsx\n * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';\n * import { __ } from '@wordpress/i18n';\n \n const colors = [\n * \t{ name: 'Blue 20', color: '#72aee6' },\n * \t// ...\n * ];\n \n const MyBorderBoxControl = () => {\n * \tconst defaultBorder = {\n * \t\tcolor: '#72aee6',\n * \t\tstyle: 'dashed',\n * \t\twidth: '1px',\n * \t};\n * \tconst [ borders, setBorders ] = useState( {\n * \t\ttop: defaultBorder,\n * \t\tright: defaultBorder,\n * \t\tbottom: defaultBorder,\n * \t\tleft: defaultBorder,\n * \t} );\n * \tconst onChange = ( newBorders ) => setBorders( newBorders );\n \n \treturn (\n * \t\t<BorderBoxControl\n * \t\t\tcolors={ colors }\n * \t\t\tlabel={ __( 'Borders' ) }\n * \t\t\tonChange={ onChange }\n * \t\t\tvalue={ borders }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const BorderBoxControl = contextConnect(\n\tUnconnectedBorderBoxControl,\n\t'BorderBoxControl'\n);\n\nexport default BorderBoxControl;\n"]}