woocommerce/packages/woocommerce-blocks/patches/wordpress-components+11.1.6.patch

diff --git a/node_modules/wordpress-components/build-module/combobox-control/index.js b/node_modules/wordpress-components/build-module/combobox-control/index.js
index 51c59c1..93cbddc 100644
--- a/node_modules/wordpress-components/build-module/combobox-control/index.js
+++ b/node_modules/wordpress-components/build-module/combobox-control/index.js
@@ -1,19 +1,10 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import { createElement } from "@wordpress/element";
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import { noop, deburr } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -34,77 +25,47 @@ import BaseControl from '../base-control';
 import Button from '../button';
 import { Flex, FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
-var DetectOutside = withFocusOutside( /*#__PURE__*/function (_Component) {
-  _inherits(_class, _Component);
-
-  var _super = _createSuper(_class);
-
-  function _class() {
-    _classCallCheck(this, _class);
-
-    return _super.apply(this, arguments);
+const DetectOutside = withFocusOutside(class extends Component {
+  handleFocusOutside(event) {
+    this.props.onFocusOutside(event);
   }
 
-  _createClass(_class, [{
-    key: "handleFocusOutside",
-    value: function handleFocusOutside(event) {
-      this.props.onFocusOutside(event);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children;
-    }
-  }]);
-
-  return _class;
-}(Component));
+  render() {
+    return this.props.children;
+  }
 
-function ComboboxControl(_ref) {
+});
+
+function ComboboxControl({
+  value,
+  label,
+  options,
+  onChange,
+  onFilterValueChange = noop,
+  hideLabelFromVision,
+  help,
+  allowReset = true,
+  className,
+  messages = {
+    selected: __('Item selected.')
+  }
+}) {
   var _currentOption$label;
 
-  var value = _ref.value,
-      label = _ref.label,
-      options = _ref.options,
-      onChange = _ref.onChange,
-      onFilterValueChange = _ref.onFilterValueChange,
-      hideLabelFromVision = _ref.hideLabelFromVision,
-      help = _ref.help,
-      _ref$allowReset = _ref.allowReset,
-      allowReset = _ref$allowReset === void 0 ? true : _ref$allowReset,
-      className = _ref.className,
-      _ref$messages = _ref.messages,
-      messages = _ref$messages === void 0 ? {
-    selected: __('Item selected.')
-  } : _ref$messages;
-  var instanceId = useInstanceId(ComboboxControl);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedSuggestion = _useState2[0],
-      setSelectedSuggestion = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isExpanded = _useState4[0],
-      setIsExpanded = _useState4[1];
-
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
-
-  var inputContainer = useRef();
-  var currentOption = options.find(function (option) {
-    return option.value === value;
-  });
-  var currentLabel = (_currentOption$label = currentOption === null || currentOption === void 0 ? void 0 : currentOption.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
-  var matchingSuggestions = useMemo(function () {
-    var startsWithMatch = [];
-    var containsMatch = [];
-    var match = inputValue.toLocaleLowerCase();
-    options.forEach(function (option) {
-      var index = option.label.toLocaleLowerCase().indexOf(match);
+  const currentOption = options.find(option => option.value === value);
+  const currentLabel = (_currentOption$label = currentOption === null || currentOption === void 0 ? void 0 : currentOption.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : '';
+  const instanceId = useInstanceId(ComboboxControl);
+  const [selectedSuggestion, setSelectedSuggestion] = useState(currentOption || null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [inputHasFocus, setInputHasFocus] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const inputContainer = useRef();
+  const matchingSuggestions = useMemo(() => {
+    const startsWithMatch = [];
+    const containsMatch = [];
+    const match = deburr(inputValue.toLocaleLowerCase());
+    options.forEach(option => {
+      const index = deburr(option.label).toLocaleLowerCase().indexOf(match);
 
       if (index === 0) {
         startsWithMatch.push(option);
@@ -115,7 +76,7 @@ function ComboboxControl(_ref) {
     return startsWithMatch.concat(containsMatch);
   }, [inputValue, options, value]);
 
-  var onSuggestionSelected = function onSuggestionSelected(newSelectedSuggestion) {
+  const onSuggestionSelected = newSelectedSuggestion => {
     onChange(newSelectedSuggestion.value);
     speak(messages.selected, 'assertive');
     setSelectedSuggestion(newSelectedSuggestion);
@@ -123,10 +84,9 @@ function ComboboxControl(_ref) {
     setIsExpanded(false);
   };
 
-  var handleArrowNavigation = function handleArrowNavigation() {
-    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    var index = matchingSuggestions.indexOf(selectedSuggestion);
-    var nextIndex = index + offset;
+  const handleArrowNavigation = (offset = 1) => {
+    const index = matchingSuggestions.indexOf(selectedSuggestion);
+    let nextIndex = index + offset;
 
     if (nextIndex < 0) {
       nextIndex = matchingSuggestions.length - 1;
@@ -138,8 +98,12 @@ function ComboboxControl(_ref) {
     setIsExpanded(true);
   };
 
-  var onKeyDown = function onKeyDown(event) {
-    var preventDefault = false;
+  const onKeyDown = event => {
+    let preventDefault = false;
+
+    if (event.defaultPrevented) {
+      return;
+    }
 
     switch (event.keyCode) {
       case ENTER:
@@ -164,7 +128,6 @@ function ComboboxControl(_ref) {
         setIsExpanded(false);
         setSelectedSuggestion(null);
         preventDefault = true;
-        event.stopPropagation();
         break;
 
       default:
@@ -176,34 +139,52 @@ function ComboboxControl(_ref) {
     }
   };
 
-  var onFocus = function onFocus() {
+  const onBlur = () => {
+    setInputHasFocus(false);
+  };
+
+  const onFocus = () => {
+    setInputHasFocus(true);
     setIsExpanded(true);
     onFilterValueChange('');
     setInputValue('');
   };
 
-  var onFocusOutside = function onFocusOutside() {
+  const onFocusOutside = () => {
     setIsExpanded(false);
   };
 
-  var onInputChange = function onInputChange(event) {
-    var text = event.value;
+  const onInputChange = event => {
+    const text = event.value;
     setInputValue(text);
     onFilterValueChange(text);
-    setIsExpanded(true);
+
+    if (inputHasFocus) {
+      setIsExpanded(true);
+    }
   };
 
-  var handleOnReset = function handleOnReset() {
+  const handleOnReset = () => {
     onChange(null);
     inputContainer.current.input.focus();
-  }; // Announcements
+  }; // Update current selections when the filter input changes.
+
 
+  useEffect(() => {
+    const hasMatchingSuggestions = matchingSuggestions.length > 0;
+    const hasSelectedMatchingSuggestions = matchingSuggestions.indexOf(selectedSuggestion) > 0;
 
-  useEffect(function () {
-    var hasMatchingSuggestions = matchingSuggestions.length > 0;
+    if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) {
+      // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions.
+      setSelectedSuggestion(matchingSuggestions[0]);
+    }
+  }, [matchingSuggestions, selectedSuggestion]); // Announcements
+
+  useEffect(() => {
+    const hasMatchingSuggestions = matchingSuggestions.length > 0;
 
     if (isExpanded) {
-      var message = hasMatchingSuggestions ? sprintf(
+      const message = hasMatchingSuggestions ? sprintf(
       /* translators: %d: number of results. */
       _n('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : __('No results.');
       speak(message, 'polite');
@@ -220,7 +201,7 @@ function ComboboxControl(_ref) {
     className: classnames(className, 'components-combobox-control'),
     tabIndex: "-1",
     label: label,
-    id: "components-form-token-input-".concat(instanceId),
+    id: `components-form-token-input-${instanceId}`,
     hideLabelFromVision: hideLabelFromVision,
     help: help
   }, createElement("div", {
@@ -232,8 +213,9 @@ function ComboboxControl(_ref) {
     instanceId: instanceId,
     ref: inputContainer,
     value: isExpanded ? inputValue : currentLabel,
-    "aria-label": currentLabel ? "".concat(currentLabel, ", ").concat(label) : null,
+    "aria-label": currentLabel ? `${currentLabel}, ${label}` : null,
     onFocus: onFocus,
+    onBlur: onBlur,
     isExpanded: isExpanded,
     selectedSuggestionIndex: matchingSuggestions.indexOf(selectedSuggestion),
     onChange: onInputChange
@@ -248,9 +230,7 @@ function ComboboxControl(_ref) {
     match: {
       label: inputValue
     },
-    displayTransform: function displayTransform(suggestion) {
-      return suggestion.label;
-    },
+    displayTransform: suggestion => suggestion.label,
     suggestions: matchingSuggestions,
     selectedIndex: matchingSuggestions.indexOf(selectedSuggestion),
     onHover: setSelectedSuggestion,