@wordpress/components 23.4.0 → 23.5.0

package/CHANGELOG.md

@@ -2,12 +2,26 @@
 
 ## Unreleased
 
+## 23.5.0 (2023-03-01)
+
+### Enhancements
+
+-  `ToolsPanel`: Separate reset all filter registration from items registration and support global resets ([#48123](https://github.com/WordPress/gutenberg/pull/48123#pullrequestreview-1308386926)).
+
+### Internal
+
+-   `CircularOptionPicker`: Convert to TypeScript ([#47937](https://github.com/WordPress/gutenberg/pull/47937)).
+-   `TabPanel`: Improve unit test in preparation for controlled component updates ([#48086](https://github.com/WordPress/gutenberg/pull/48086)).
+-   `Autocomplete`: performance: avoid setting state on every value change ([#48485](https://github.com/WordPress/gutenberg/pull/48485)).
+-   `Higher Order` -- `with-constrained-tabbing`: Convert to TypeScript ([#48162](https://github.com/WordPress/gutenberg/pull/48162)).
+
 ## 23.4.0 (2023-02-15)
 
 ### Bug Fix
 
 -   `ToolsPanel`: fix type inconsistencies between types, docs and normal component usage ([47944](https://github.com/WordPress/gutenberg/pull/47944)).
 -   `SelectControl`: Fix styling when `multiple` prop is enabled ([#47893](https://github.com/WordPress/gutenberg/pull/43213)).
+-   `useAutocompleteProps`, `Autocomplete`: Make accessible when rendered in an iframe ([#47907](https://github.com/WordPress/gutenberg/pull/47907)).
 
 ### Enhancements
 
@@ -33,6 +47,7 @@
 -   `ToolsPanel`: Ensure display of optional items when values are updated externally and multiple blocks selected ([47864](https://github.com/WordPress/gutenberg/pull/47864)).
 -   `Navigator`: add more pattern matching tests, refine existing tests ([47910](https://github.com/WordPress/gutenberg/pull/47910)).
 -   `ToolsPanel`: Refactor Storybook examples to TypeScript ([47944](https://github.com/WordPress/gutenberg/pull/47944)).
+-   `ToolsPanel`: Refactor unit tests to TypeScript ([48275](https://github.com/WordPress/gutenberg/pull/48275)).
 
 ## 23.3.0 (2023-02-01)
 

package/build/autocomplete/autocompleter-ui.js

@@ -13,12 +13,18 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _richText = require("@wordpress/rich-text");
 
+var _compose = require("@wordpress/compose");
+
 var _getDefaultUseItems = _interopRequireDefault(require("./get-default-use-items"));
 
 var _button = _interopRequireDefault(require("../button"));
 
 var _popover = _interopRequireDefault(require("../popover"));
 
+var _visuallyHidden = require("../visually-hidden");
+
+var _reactDom = require("react-dom");
+
 /**
  * External dependencies
  */
@@ -52,7 +58,16 @@ function getAutoCompleterUI(autocompleter) {
       editableContentElement: contentRef.current,
       value
     });
+    const [needsA11yCompat, setNeedsA11yCompat] = (0, _element.useState)(false);
     const popoverRef = (0, _element.useRef)();
+    const popoverRefs = (0, _compose.useMergeRefs)([popoverRef, (0, _compose.useRefEffect)(node => {
+      if (!contentRef.current) return; // If the popover is rendered in a different document than
+      // the content, we need to duplicate the options list in the
+      // content document so that it's available to the screen
+      // readers, which check the DOM ID based aira-* attributes.
+
+      setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument);
+    }, [contentRef])]);
     useOnClickOutside(popoverRef, reset);
     (0, _element.useLayoutEffect)(() => {
       onChangeOptions(items); // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
@@ -64,28 +79,37 @@ function getAutoCompleterUI(autocompleter) {
       return null;
     }
 
-    return (0, _element.createElement)(_popover.default, {
+    const ListBox = _ref2 => {
+      let {
+        Component = 'div'
+      } = _ref2;
+      return (0, _element.createElement)(Component, {
+        id: listBoxId,
+        role: "listbox",
+        className: "components-autocomplete__results"
+      }, items.map((option, index) => (0, _element.createElement)(_button.default, {
+        key: option.key,
+        id: `components-autocomplete-item-${instanceId}-${option.key}`,
+        role: "option",
+        "aria-selected": index === selectedIndex,
+        disabled: option.isDisabled,
+        className: (0, _classnames.default)('components-autocomplete__result', className, {
+          'is-selected': index === selectedIndex
+        }),
+        onClick: () => onSelect(option)
+      }, option.label)));
+    };
+
+    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_popover.default, {
       focusOnMount: false,
       onClose: onReset,
       placement: "top-start",
       className: "components-autocomplete__popover",
       anchor: popoverAnchor,
-      ref: popoverRef
-    }, (0, _element.createElement)("div", {
-      id: listBoxId,
-      role: "listbox",
-      className: "components-autocomplete__results"
-    }, items.map((option, index) => (0, _element.createElement)(_button.default, {
-      key: option.key,
-      id: `components-autocomplete-item-${instanceId}-${option.key}`,
-      role: "option",
-      "aria-selected": index === selectedIndex,
-      disabled: option.isDisabled,
-      className: (0, _classnames.default)('components-autocomplete__result', className, {
-        'is-selected': index === selectedIndex
-      }),
-      onClick: () => onSelect(option)
-    }, option.label))));
+      ref: popoverRefs
+    }, (0, _element.createElement)(ListBox, null)), contentRef.current && needsA11yCompat && (0, _reactDom.createPortal)((0, _element.createElement)(ListBox, {
+      Component: _visuallyHidden.VisuallyHidden
+    }), contentRef.current.ownerDocument.body));
   }
 
   return AutocompleterUI;

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","reset","value","contentRef","items","popoverAnchor","editableContentElement","current","popoverRef","useOnClickOutside","length","map","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';\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{ items.map( ( 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"]}
+{"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","needsA11yCompat","setNeedsA11yCompat","popoverRef","popoverRefs","node","ownerDocument","useOnClickOutside","length","ListBox","Component","map","option","index","key","isDisabled","label","VisuallyHidden","body","ref","handler","listener","event","contains","target","document","addEventListener","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseLayoutEffect,\n\tuseRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\nimport { useAnchor } from '@wordpress/rich-text';\nimport { useMergeRefs, useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport getDefaultUseItems from './get-default-use-items';\nimport Button from '../button';\nimport Popover from '../popover';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { createPortal } from 'react-dom';\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 [ needsA11yCompat, setNeedsA11yCompat ] = useState( false );\n\t\tconst popoverRef = useRef();\n\t\tconst popoverRefs = useMergeRefs( [\n\t\t\tpopoverRef,\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tif ( ! contentRef.current ) return;\n\n\t\t\t\t\t// If the popover is rendered in a different document than\n\t\t\t\t\t// the content, we need to duplicate the options list in the\n\t\t\t\t\t// content document so that it's available to the screen\n\t\t\t\t\t// readers, which check the DOM ID based aira-* attributes.\n\t\t\t\t\tsetNeedsA11yCompat(\n\t\t\t\t\t\tnode.ownerDocument !== contentRef.current.ownerDocument\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t[ contentRef ]\n\t\t\t),\n\t\t] );\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\tconst ListBox = ( { Component = 'div' } ) => (\n\t\t\t<Component\n\t\t\t\tid={ listBoxId }\n\t\t\t\trole=\"listbox\"\n\t\t\t\tclassName=\"components-autocomplete__results\"\n\t\t\t>\n\t\t\t\t{ items.map( ( option, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ option.key }\n\t\t\t\t\t\tid={ `components-autocomplete-item-${ instanceId }-${ option.key }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t\tdisabled={ option.isDisabled }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-autocomplete__result',\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => onSelect( option ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</Component>\n\t\t);\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Popover\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t\tonClose={ onReset }\n\t\t\t\t\tplacement=\"top-start\"\n\t\t\t\t\tclassName=\"components-autocomplete__popover\"\n\t\t\t\t\tanchor={ popoverAnchor }\n\t\t\t\t\tref={ popoverRefs }\n\t\t\t\t>\n\t\t\t\t\t<ListBox />\n\t\t\t\t</Popover>\n\t\t\t\t{ contentRef.current &&\n\t\t\t\t\tneedsA11yCompat &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t<ListBox Component={ VisuallyHidden } />,\n\t\t\t\t\t\tcontentRef.current.ownerDocument.body\n\t\t\t\t\t) }\n\t\t\t</>\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

@@ -35,7 +35,7 @@ var _strings = require("../utils/strings");
 /**
  * Internal dependencies
  */
-
+const EMPTY_ARRAY = [];
 /**
  * A raw completer option.
  *
@@ -111,6 +111,7 @@ var _strings = require("../utils/strings");
  * @property {?FnAllowContext}                  allowContext        filter the context under which the autocomplete activates.
  * @property {FnGetOptionCompletion}            getOptionCompletion get the completion associated with a given option.
  */
+
 function useAutocomplete(_ref) {
   let {
     record,
@@ -122,7 +123,7 @@ function useAutocomplete(_ref) {
   const debouncedSpeak = (0, _compose.useDebounce)(_a11y.speak, 500);
   const instanceId = (0, _compose.useInstanceId)(useAutocomplete);
   const [selectedIndex, setSelectedIndex] = (0, _element.useState)(0);
-  const [filteredOptions, setFilteredOptions] = (0, _element.useState)([]);
+  const [filteredOptions, setFilteredOptions] = (0, _element.useState)(EMPTY_ARRAY);
   const [filterValue, setFilterValue] = (0, _element.useState)('');
   const [autocompleter, setAutocompleter] = (0, _element.useState)(null);
   const [AutocompleterUI, setAutocompleterUI] = (0, _element.useState)(null);
@@ -173,7 +174,7 @@ function useAutocomplete(_ref) {
 
   function reset() {
     setSelectedIndex(0);
-    setFilteredOptions([]);
+    setFilteredOptions(EMPTY_ARRAY);
     setFilterValue('');
     setAutocompleter(null);
     setAutocompleterUI(null);
@@ -267,24 +268,22 @@ function useAutocomplete(_ref) {
   }, [record]);
   (0, _element.useEffect)(() => {
     if (!textContent) {
-      reset();
+      if (autocompleter) reset();
       return;
     }
 
-    const text = (0, _removeAccents.default)(textContent);
-    const textAfterSelection = (0, _richText.getTextContent)((0, _richText.slice)(record, undefined, (0, _richText.getTextContent)(record).length));
     const completer = completers === null || completers === void 0 ? void 0 : completers.find(_ref2 => {
       let {
         triggerPrefix,
         allowContext
       } = _ref2;
-      const index = text.lastIndexOf(triggerPrefix);
+      const index = textContent.lastIndexOf(triggerPrefix);
 
       if (index === -1) {
         return false;
       }
 
-      const textWithoutTrigger = text.slice(index + triggerPrefix.length);
+      const textWithoutTrigger = textContent.slice(index + triggerPrefix.length);
       const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit.
       // This is a final barrier to prevent the effect from completing with
       // an extremely long string, which causes the editor to slow-down
@@ -318,7 +317,9 @@ function useAutocomplete(_ref) {
         return false;
       }
 
-      if (allowContext && !allowContext(text.slice(0, index), textAfterSelection)) {
+      const textAfterSelection = (0, _richText.getTextContent)((0, _richText.slice)(record, undefined, (0, _richText.getTextContent)(record).length));
+
+      if (allowContext && !allowContext(textContent.slice(0, index), textAfterSelection)) {
         return false;
       }
 
@@ -330,11 +331,12 @@ function useAutocomplete(_ref) {
     });
 
     if (!completer) {
-      reset();
+      if (autocompleter) reset();
       return;
     }
 
     const safeTrigger = (0, _strings.escapeRegExp)(completer.triggerPrefix);
+    const text = (0, _removeAccents.default)(textContent);
     const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\u0000-\uFFFF]*)$`));
     const query = match && match[1];
     setAutocompleter(completer);
@@ -372,11 +374,24 @@ function useAutocomplete(_ref) {
   };
 }
 
+function useLastDifferentValue(value) {
+  const history = (0, _element.useRef)(new Set());
+  history.current.add(value); // Keep the history size to 2.
+
+  if (history.current.size > 2) {
+    history.current.delete(Array.from(history.current)[0]);
+  }
+
+  return Array.from(history.current)[0];
+}
+
 function useAutocompleteProps(options) {
-  const [isVisible, setIsVisible] = (0, _element.useState)(false);
   const ref = (0, _element.useRef)();
-  const recordAfterInput = (0, _element.useRef)();
   const onKeyDownRef = (0, _element.useRef)();
+  const {
+    record
+  } = options;
+  const previousRecord = useLastDifferentValue(record);
   const {
     popover,
     listBoxId,
@@ -386,37 +401,20 @@ function useAutocompleteProps(options) {
     contentRef: ref
   });
   onKeyDownRef.current = onKeyDown;
-  (0, _element.useEffect)(() => {
-    if (isVisible) {
-      if (!recordAfterInput.current) {
-        recordAfterInput.current = options.record;
-      } else if (recordAfterInput.current.start !== options.record.start || recordAfterInput.current.end !== options.record.end) {
-        setIsVisible(false);
-        recordAfterInput.current = null;
-      }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [options.record]);
   const mergedRefs = (0, _compose.useMergeRefs)([ref, (0, _compose.useRefEffect)(element => {
     function _onKeyDown(event) {
       onKeyDownRef.current(event);
     }
 
-    function _onInput() {
-      // Only show auto complete UI if the user is inputting text.
-      setIsVisible(true);
-      recordAfterInput.current = null;
-    }
-
     element.addEventListener('keydown', _onKeyDown);
-    element.addEventListener('input', _onInput);
     return () => {
       element.removeEventListener('keydown', _onKeyDown);
-      element.removeEventListener('input', _onInput);
     };
-  }, [])]);
+  }, [])]); // We only want to show the popover if the user has typed something.
+
+  const didUserInput = record.text !== (previousRecord === null || previousRecord === void 0 ? void 0 : previousRecord.text);
 
-  if (!isVisible) {
+  if (!didUserInput) {
     return {
       ref: mergedRefs
     };

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","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","find","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","isVisible","setIsVisible","ref","recordAfterInput","onKeyDownRef","mergedRefs","element","_onKeyDown","_onInput","addEventListener","removeEventListener","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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 = completers?.find(\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 [ isVisible, setIsVisible ] = useState( false );\n\tconst ref = useRef();\n\tconst recordAfterInput = 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\n\tuseEffect( () => {\n\t\tif ( isVisible ) {\n\t\t\tif ( ! recordAfterInput.current ) {\n\t\t\t\trecordAfterInput.current = options.record;\n\t\t\t} else if (\n\t\t\t\trecordAfterInput.current.start !== options.record.start ||\n\t\t\t\trecordAfterInput.current.end !== options.record.end\n\t\t\t) {\n\t\t\t\tsetIsVisible( false );\n\t\t\t\trecordAfterInput.current = null;\n\t\t\t}\n\t\t}\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ options.record ] );\n\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tuseRefEffect( ( element ) => {\n\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\tonKeyDownRef.current( event );\n\t\t\t}\n\t\t\tfunction _onInput() {\n\t\t\t\t// Only show auto complete UI if the user is inputting text.\n\t\t\t\tsetIsVisible( true );\n\t\t\t\trecordAfterInput.current = null;\n\t\t\t}\n\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\telement.addEventListener( 'input', _onInput );\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t\telement.removeEventListener( 'input', _onInput );\n\t\t\t};\n\t\t}, [] ),\n\t] );\n\n\tif ( ! isVisible ) {\n\t\treturn { ref: mergedRefs };\n\t}\n\n\treturn {\n\t\tref: mergedRefs,\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":["EMPTY_ARRAY","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","completer","find","allowContext","index","lastIndexOf","textWithoutTrigger","slice","tooDistantFromTrigger","mismatch","wordsFromTrigger","split","hasOneTriggerWord","matchingWhileBackspacing","textAfterSelection","test","safeTrigger","text","match","RegExp","query","selectedKey","className","isExpanded","listBoxId","activeId","hasSelection","onKeyDown","popover","useLastDifferentValue","history","Set","add","size","delete","Array","from","useAutocompleteProps","ref","onKeyDownRef","previousRecord","mergedRefs","element","_onKeyDown","addEventListener","removeEventListener","didUserInput","children","Autocomplete","isSelected","props"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\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\nconst EMPTY_ARRAY = [];\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( EMPTY_ARRAY );\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( EMPTY_ARRAY );\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\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst completer = completers?.find(\n\t\t\t( { triggerPrefix, allowContext } ) => {\n\t\t\t\tconst index = textContent.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 = textContent.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\tconst textAfterSelection = getTextContent(\n\t\t\t\t\tslice( record, undefined, getTextContent( record ).length )\n\t\t\t\t);\n\n\t\t\t\tif (\n\t\t\t\t\tallowContext &&\n\t\t\t\t\t! allowContext(\n\t\t\t\t\t\ttextContent.slice( 0, index ),\n\t\t\t\t\t\ttextAfterSelection\n\t\t\t\t\t)\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\tif ( autocompleter ) reset();\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeTrigger = escapeRegExp( completer.triggerPrefix );\n\t\tconst text = removeAccents( textContent );\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\nfunction useLastDifferentValue( value ) {\n\tconst history = useRef( new Set() );\n\n\thistory.current.add( value );\n\n\t// Keep the history size to 2.\n\tif ( history.current.size > 2 ) {\n\t\thistory.current.delete( Array.from( history.current )[ 0 ] );\n\t}\n\n\treturn Array.from( history.current )[ 0 ];\n}\n\nexport function useAutocompleteProps( options ) {\n\tconst ref = useRef();\n\tconst onKeyDownRef = useRef();\n\tconst { record } = options;\n\tconst previousRecord = useLastDifferentValue( record );\n\tconst { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {\n\t\t...options,\n\t\tcontentRef: ref,\n\t} );\n\tonKeyDownRef.current = onKeyDown;\n\n\tconst mergedRefs = useMergeRefs( [\n\t\tref,\n\t\tuseRefEffect( ( element ) => {\n\t\t\tfunction _onKeyDown( event ) {\n\t\t\t\tonKeyDownRef.current( event );\n\t\t\t}\n\t\t\telement.addEventListener( 'keydown', _onKeyDown );\n\t\t\treturn () => {\n\t\t\t\telement.removeEventListener( 'keydown', _onKeyDown );\n\t\t\t};\n\t\t}, [] ),\n\t] );\n\n\t// We only want to show the popover if the user has typed something.\n\tconst didUserInput = record.text !== previousRecord?.text;\n\n\tif ( ! didUserInput ) {\n\t\treturn { ref: mergedRefs };\n\t}\n\n\treturn {\n\t\tref: mergedRefs,\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/circular-option-picker/index.js

@@ -5,7 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = CircularOptionPicker;
+exports.ButtonAction = ButtonAction;
+exports.DropdownLinkAction = DropdownLinkAction;
+exports.Option = Option;
+exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -21,8 +24,6 @@ var _dropdown = _interopRequireDefault(require("../dropdown"));
 
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -34,14 +35,14 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
 /**
  * Internal dependencies
  */
-function Option(props) {
-  const {
+function Option(_ref) {
+  let {
     className,
     isSelected,
     selectedIconProps,
     tooltipText,
     ...additionalProps
-  } = props;
+  } = _ref;
   const optionButton = (0, _element.createElement)(_button.default, (0, _extends2.default)({
     isPressed: isSelected,
     className: "components-circular-option-picker__option"
@@ -55,20 +56,20 @@ function Option(props) {
   }, selectedIconProps ? selectedIconProps : {})));
 }
 
-function DropdownLinkAction(props) {
-  const {
+function DropdownLinkAction(_ref2) {
+  let {
     buttonProps,
     className,
     dropdownProps,
     linkText
-  } = props;
+  } = _ref2;
   return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
     className: (0, _classnames.default)('components-circular-option-picker__dropdown-link-action', className),
-    renderToggle: _ref => {
+    renderToggle: _ref3 => {
       let {
         isOpen,
         onToggle
-      } = _ref;
+      } = _ref3;
       return (0, _element.createElement)(_button.default, (0, _extends2.default)({
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
@@ -79,17 +80,63 @@ function DropdownLinkAction(props) {
   }, dropdownProps));
 }
 
-function ButtonAction(props) {
-  const {
+function ButtonAction(_ref4) {
+  let {
     className,
     children,
     ...additionalProps
-  } = props;
+  } = _ref4;
   return (0, _element.createElement)(_button.default, (0, _extends2.default)({
     className: (0, _classnames.default)('components-circular-option-picker__clear', className),
     variant: "tertiary"
   }, additionalProps), children);
 }
+/**
+ *`CircularOptionPicker` is a component that displays a set of options as circular buttons.
+ *
+ * ```jsx
+ * import { CircularOptionPicker } from '../circular-option-picker';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ currentColor, setCurrentColor ] = useState();
+ * 	const colors = [
+ * 		{ color: '#f00', name: 'Red' },
+ * 		{ color: '#0f0', name: 'Green' },
+ * 		{ color: '#00f', name: 'Blue' },
+ * 	];
+ * 	const colorOptions = (
+ * 		<>
+ * 			{ colors.map( ( { color, name }, index ) => {
+ * 				return (
+ * 					<CircularOptionPicker.Option
+ * 						key={ `${ color }-${ index }` }
+ * 						tooltipText={ name }
+ * 						style={ { backgroundColor: color, color } }
+ * 						isSelected={ index === currentColor }
+ * 						onClick={ () => setCurrentColor( index ) }
+ * 						aria-label={ name }
+ * 					/>
+ * 				);
+ * 			} ) }
+ * 		</>
+ * 	);
+ * 	return (
+ * 		<CircularOptionPicker
+ * 				options={ colorOptions }
+ * 				actions={
+ * 					<CircularOptionPicker.ButtonAction
+ * 						onClick={ () => setCurrentColor( undefined ) }
+ * 					>
+ * 						{ 'Clear' }
+ * 					</CircularOptionPicker.ButtonAction>
+ * 				}
+ * 			/>
+ * 	);
+ * };
+ * ```
+ */
+
 
 function CircularOptionPicker(props) {
   const {
@@ -110,4 +157,6 @@ function CircularOptionPicker(props) {
 CircularOptionPicker.Option = Option;
 CircularOptionPicker.ButtonAction = ButtonAction;
 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
+var _default = CircularOptionPicker;
+exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/circular-option-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.js"],"names":["Option","props","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","actions","options"],"mappings":";;;;;;;;;;;;;AAIA;;AAKA;;AAKA;;AACA;;AACA;;AAhBA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,QAAM;AACLC,IAAAA,SADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,iBAHK;AAILC,IAAAA,WAJK;AAKL,OAAGC;AALE,MAMFL,KANJ;AAOA,QAAMM,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAG,yBACXJ,SADW,EAEX,mDAFW;AADb,KAMGG,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAED,SAASK,kBAAT,CAA6BR,KAA7B,EAAqC;AACpC,QAAM;AAAES,IAAAA,WAAF;AAAeR,IAAAA,SAAf;AAA0BS,IAAAA,aAA1B;AAAyCC,IAAAA;AAAzC,MAAsDX,KAA5D;AACA,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXC,SAFW,CADb;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEW,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,eAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAED,SAASI,YAAT,CAAuBd,KAAvB,EAA+B;AAC9B,QAAM;AAAEC,IAAAA,SAAF;AAAac,IAAAA,QAAb;AAAuB,OAAGV;AAA1B,MAA8CL,KAApD;AACA,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXC,SAFW,CADb;AAKC,IAAA,OAAO,EAAC;AALT,KAMMI,eANN,GAQGU,QARH,CADD;AAYA;;AAEc,SAASC,oBAAT,CAA+BhB,KAA/B,EAAuC;AACrD,QAAM;AAAEiB,IAAAA,OAAF;AAAWhB,IAAAA,SAAX;AAAsBiB,IAAAA,OAAtB;AAA+BH,IAAAA;AAA/B,MAA4Cf,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXC,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGiB,OADH,CAND,EASGH,QATH,EAUGE,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDD,oBAAoB,CAACjB,MAArB,GAA8BA,MAA9B;AACAiB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\n\nfunction Option( props ) {\n\tconst {\n\t\tclassName,\n\t\tisSelected,\n\t\tselectedIconProps,\n\t\ttooltipText,\n\t\t...additionalProps\n\t} = props;\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nfunction DropdownLinkAction( props ) {\n\tconst { buttonProps, className, dropdownProps, linkText } = props;\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nfunction ButtonAction( props ) {\n\tconst { className, children, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\nexport default function CircularOptionPicker( props ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n"]}
+{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"names":["Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","props","actions","options"],"mappings":";;;;;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAYO,SAASA,MAAT,OAMU;AAAA,MANO;AACvBC,IAAAA,SADuB;AAEvBC,IAAAA,UAFuB;AAGvBC,IAAAA,iBAHuB;AAIvBC,IAAAA,WAJuB;AAKvB,OAAGC;AALoB,GAMP;AAChB,QAAMC,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAG,yBACXJ,SADW,EAEX,mDAFW;AADb,KAMGG,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAEM,SAASK,kBAAT,QAKsB;AAAA,MALO;AACnCC,IAAAA,WADmC;AAEnCR,IAAAA,SAFmC;AAGnCS,IAAAA,aAHmC;AAInCC,IAAAA;AAJmC,GAKP;AAC5B,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXV,SAFW,CADb;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEW,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,eAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAEM,SAASI,YAAT,QAI8D;AAAA,MAJvC;AAC7Bb,IAAAA,SAD6B;AAE7Bc,IAAAA,QAF6B;AAG7B,OAAGV;AAH0B,GAIuC;AACpE,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXJ,SAFW,CADb;AAKC,IAAA,OAAO,EAAC;AALT,KAMMI,eANN,GAQGU,QARH,CADD;AAYA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEA,SAASC,oBAAT,CAA+BC,KAA/B,EAAkE;AACjE,QAAM;AAAEC,IAAAA,OAAF;AAAWjB,IAAAA,SAAX;AAAsBkB,IAAAA,OAAtB;AAA+BJ,IAAAA;AAA/B,MAA4CE,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXhB,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGkB,OADH,CAND,EASGJ,QATH,EAUGG,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDF,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C;eAEeQ,oB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"]}

package/build/circular-option-picker/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/circular-option-picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}