var _excluded = ["getId", "getLabel", "qa", "value"],
  _excluded2 = ["value"],
  _excluded3 = ["afterHide", "afterShow", "beforeHide", "beforeShow", "block", "disabled", "emptyMessage", "error", "footer", "getId", "getLabel", "getGroup", "loading", "onChange", "onScrollBottom", "onSearch", "options", "isOptionDisabled", "optionRenderer", "optgroups", "groupHeaderRenderer", "tokenRenderer", "placeholder", "placement", "value", "tabIndex", "aria-labelledby", "qa"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
import { Clear } from '@procore/core-icons/dist';
import React from 'react';
import { Box } from '../Box/Box';
import { MenuImperative, useMenuImperativeControlNavigation } from '../MenuImperative/MenuImperative';
import { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger';
import { Spinner } from '../Spinner/Spinner';
import { Token } from '../Token/Token';
import { Typography } from '../Typography/Typography';
import { isEventSource } from '../_hooks/ClickOutside';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { StyledMultiSelectArrow, StyledMultiSelectArrowContainer, StyledMultiSelectButton, StyledMultiSelectClearIcon, StyledMultiSelectMenu, StyledMultiSelectSearch, StyledMultiSelectSearchIcon, StyledMultiSelectSearchInput, StyledMultiSelectToken, StyledMultiSelectValues } from './MultiSelect.styles';
var targetShowKeys = ['ArrowDown', 'Down'];
var targetHideKeys = ['Esc', 'Escape'];
var overlayHideKeys = targetHideKeys;
var emptyArray = [];
function noop() {}
function returnTrue() {
  return true;
}
function isAlphaNumeric(str) {
  return str.length === 1 && str.match(/[A-Za-z0-9 _.,!"'/$]*/i);
}
function setFocusTo(ref) {
  if (ref.current) {
    ref.current.focus();
  }
}
function isOption(obj) {
  return _typeof(obj) === 'object' && obj.type === Option;
}
function defaultIsOptionDisabled() {
  return false;
}
function defaultGetId(item) {
  return item.id;
}
function defaultGetLabel(item) {
  return item.label;
}
function defaultGetGroup(item) {
  return item.groupId;
}
function defaultIsSelectable(obj) {
  _typeof(obj) === 'object' && obj.type === Option;
}
function defaultOptionRenderer(item, _ref) {
  var _qa$option;
  var getId = _ref.getId,
    getLabel = _ref.getLabel,
    qa = _ref.qa,
    value = _ref.value,
    props = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement(Option, _extends({
    key: getId(item),
    value: value || item,
    "data-qa": qa === null || qa === void 0 ? void 0 : (_qa$option = qa.option) === null || _qa$option === void 0 ? void 0 : _qa$option.call(qa, item)
  }, props), getLabel(item));
}
function defaultGroupHeaderRenderer(group) {
  return /*#__PURE__*/React.createElement(MenuImperative.Group, {
    key: "group_".concat(group.id),
    clickable: false
  }, group.label);
}
function defaultTokenRenderer(_ref2) {
  var _qa$token, _qa$tokenClear;
  var focused = _ref2.focused,
    disabled = _ref2.disabled,
    option = _ref2.option,
    removeToken = _ref2.removeToken,
    getLabel = _ref2.getLabel,
    qa = _ref2.qa;
  return /*#__PURE__*/React.createElement(Token, {
    disabled: disabled,
    focused: focused,
    "data-qa": qa === null || qa === void 0 ? void 0 : (_qa$token = qa.token) === null || _qa$token === void 0 ? void 0 : _qa$token.call(qa, option)
  }, /*#__PURE__*/React.createElement(Token.Label, null, getLabel(option)), /*#__PURE__*/React.createElement(Token.Remove, {
    "data-close": true,
    onClick: removeToken,
    "data-qa": qa === null || qa === void 0 ? void 0 : (_qa$tokenClear = qa.tokenClear) === null || _qa$tokenClear === void 0 ? void 0 : _qa$tokenClear.call(qa, option)
  }));
}
function useMultiSelect(_ref3) {
  var getId = _ref3.getId,
    getLabel = _ref3.getLabel,
    getGroup = _ref3.getGroup,
    menuRef = _ref3.menuRef,
    _ref3$onChange = _ref3.onChange,
    onChange = _ref3$onChange === void 0 ? noop : _ref3$onChange,
    onSearch_ = _ref3.onSearch,
    options_ = _ref3.options,
    value = _ref3.value,
    optgroups = _ref3.optgroups;
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    index = _React$useState2[0],
    setIndex = _React$useState2[1];
  var _React$useState3 = React.useState(''),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    search = _React$useState4[0],
    setSearch = _React$useState4[1];
  var valueIds = value.reduce(function (acc, cur) {
    acc.add(getId(cur));
    return acc;
  }, new Set());
  var count = value.length;
  var options = React.useMemo(function () {
    if (onSearch_) {
      return options_;
    }
    return options_.filter(function (opt) {
      return getLabel(opt).toLowerCase().includes(search.toLowerCase());
    });
  }, [options_, onSearch_, getLabel, search]);
  var onSearch = React.useCallback(function (e) {
    if (onSearch_) {
      onSearch_(e);
    }
    setSearch(e.target.value);

    // TODO: because menu highlighting is now imperative, we have to wait
    // for a render to highlight the first item. Is there a better way
    // to schedule this?
    setTimeout(function () {
      var _menuRef$current;
      return (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.highlightFirst();
    }, 0);
  }, [menuRef, onSearch_]);
  var clearToken = function clearToken() {
    return setIndex(null);
  };
  var removeSelection = React.useCallback(function (selection, selected) {
    return selected.filter(function (s) {
      return getId(s) !== getId(selection);
    });
  }, [getId]);
  var onSelect = React.useCallback(function (selection) {
    var newSelected = valueIds.has(getId(selection.item)) ? removeSelection(selection.item, value) : [].concat(_toConsumableArray(value), [selection.item]);
    setSearch('');
    onChange(newSelected);
  }, [setSearch, onChange, getId, removeSelection, value, valueIds]);
  var removeToken = React.useCallback(function (i) {
    onChange(removeSelection(value[i], value));
  }, [value, onChange, removeSelection]);
  var decrementToken = React.useCallback(function () {
    if (index === null) {
      // index is null, set it to the last token index
      setIndex(count - 1);
    } else {
      // decrementToken by one, don't go below 0
      setIndex(Math.max(0, index - 1));
    }
  }, [count, index, setIndex]);
  var incrementToken = React.useCallback(function () {
    if (index === count - 1) {
      setIndex(null);
    } else if (index !== null) {
      setIndex(index + 1);
    }
  }, [count, index, setIndex]);
  var onKeyDown = React.useCallback(function (event) {
    if (event.key === 'Enter') {
      var _menuRef$current2;
      (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.select(event);
    }
    if (event.key === 'ArrowUp' || event.key === 'Up') {
      var _menuRef$current3;
      (_menuRef$current3 = menuRef.current) === null || _menuRef$current3 === void 0 ? void 0 : _menuRef$current3.prev();
    }
    if (event.key === 'ArrowDown' || event.key === 'Down') {
      var _menuRef$current4;
      (_menuRef$current4 = menuRef.current) === null || _menuRef$current4 === void 0 ? void 0 : _menuRef$current4.next();
    }
    if (search === '') {
      if (event.key === 'Backspace') {
        // to prevent accidentally deleting too many tokens, don't do anything
        // on repeating key events
        if (event.repeat) {
          return;
        }

        // if we are focused on a token, remove it, otherwise remove the last token
        removeToken(index !== null ? index : count - 1);
        if (count >= 1) {
          decrementToken();
        } else {
          clearToken();
        }
      }
      if (event.key === 'ArrowLeft' || event.key === 'Left') {
        decrementToken();
      }
      if (event.key === 'ArrowRight' || event.key === 'Right') {
        incrementToken();
      }
    }
  }, [count, decrementToken, incrementToken, index, menuRef, removeToken, search]);
  React.useEffect(function () {
    // if we've deleted a token and our new count is less than
    // our current index, clear the index
    if (count <= (index || 0)) {
      clearToken();
    }
  }, [count, index]);
  var groupedOptions = React.useMemo(function () {
    if (!optgroups || !optgroups.length) {
      return options;
    }
    var optionsByGroup = optgroups.reduce(function (acc, _ref4) {
      var id = _ref4.id;
      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, id, []));
    }, {});
    var orphanOptions = [];
    options.forEach(function (option) {
      var groupId = getGroup(option);
      var groupOptions = optionsByGroup[groupId];
      if (!groupId || !groupOptions) {
        orphanOptions.push(option);
        return;
      }
      optionsByGroup[groupId].push(option);
    });
    if (orphanOptions.length) {
      console.warn("Could not find option groups for the options below. Make sure that every option has a proper \"groupId\" field or if \"getGroup\" is implemented correctly.", orphanOptions);
    }
    return optgroups.flatMap(function (group) {
      var groupHeader = _objectSpread(_objectSpread({}, group), {}, {
        isGroupHeader: true
      });
      var groupOptions = optionsByGroup[group.id];
      if (!groupOptions.length) {
        return [];
      }
      return [groupHeader].concat(_toConsumableArray(groupOptions));
    }, []);
  }, [options, getGroup, optgroups]);
  return {
    ids: valueIds,
    index: index,
    menuRef: menuRef,
    options: groupedOptions,
    search: search,
    clearToken: clearToken,
    decrementToken: decrementToken,
    incrementToken: incrementToken,
    onSearch: onSearch,
    onSelect: onSelect,
    removeToken: removeToken,
    domHandlers: {
      onKeyDown: onKeyDown
    }
  };
}
export var Option = /*#__PURE__*/React.forwardRef(function Option(_ref5, ref) {
  var value = _ref5.value,
    props = _objectWithoutProperties(_ref5, _excluded2);
  return /*#__PURE__*/React.createElement(MenuImperative.Item, _extends({
    ref: ref
  }, props, {
    item: value
  }));
});
function GroupedOptions(_ref6) {
  var multiselect = _ref6.multiselect,
    groupHeaderRenderer = _ref6.groupHeaderRenderer,
    optionRenderer = _ref6.optionRenderer,
    getId = _ref6.getId,
    getLabel = _ref6.getLabel,
    isOptionDisabled = _ref6.isOptionDisabled,
    qa = _ref6.qa;
  return /*#__PURE__*/React.createElement(MenuImperative.Options, null, multiselect.options.map(function (opt) {
    if (opt.isGroupHeader) {
      var groupHeader = opt;
      return groupHeaderRenderer(groupHeader);
    }
    return optionRenderer(opt, {
      getId: getId,
      getLabel: getLabel,
      // @ts-ignore
      // Object literal may only specify known properties, and 'key' does not exist in type 'OptionRendererProps'.
      key: getId(opt),
      selected: multiselect.ids.has(getId(opt)),
      disabled: isOptionDisabled(opt),
      value: opt,
      qa: qa
    });
  }));
}

/**

 Multi selects allow our users to choose one to many options from a list,
 presented in a dropdown. We typically see these selects on forms.

 Other select components are group select, select, and tiered select.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/multiselect--basic)

 @see [Design Guidelines](https://design.procore.com/multi-select)

 */
var MultiSelect_ = /*#__PURE__*/React.forwardRef(function MultiSelect(_ref7, ref) {
  var _ref7$afterHide = _ref7.afterHide,
    _afterHide = _ref7$afterHide === void 0 ? noop : _ref7$afterHide,
    _ref7$afterShow = _ref7.afterShow,
    _afterShow = _ref7$afterShow === void 0 ? noop : _ref7$afterShow,
    _ref7$beforeHide = _ref7.beforeHide,
    _beforeHide = _ref7$beforeHide === void 0 ? returnTrue : _ref7$beforeHide,
    _ref7$beforeShow = _ref7.beforeShow,
    _beforeShow = _ref7$beforeShow === void 0 ? returnTrue : _ref7$beforeShow,
    _ref7$block = _ref7.block,
    block = _ref7$block === void 0 ? false : _ref7$block,
    _ref7$disabled = _ref7.disabled,
    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
    emptyMessage = _ref7.emptyMessage,
    _ref7$error = _ref7.error,
    error = _ref7$error === void 0 ? false : _ref7$error,
    footer = _ref7.footer,
    _ref7$getId = _ref7.getId,
    getId = _ref7$getId === void 0 ? defaultGetId : _ref7$getId,
    _ref7$getLabel = _ref7.getLabel,
    getLabel = _ref7$getLabel === void 0 ? defaultGetLabel : _ref7$getLabel,
    _ref7$getGroup = _ref7.getGroup,
    getGroup = _ref7$getGroup === void 0 ? defaultGetGroup : _ref7$getGroup,
    _ref7$loading = _ref7.loading,
    loading = _ref7$loading === void 0 ? false : _ref7$loading,
    _ref7$onChange = _ref7.onChange,
    _onChange = _ref7$onChange === void 0 ? noop : _ref7$onChange,
    onScrollBottom = _ref7.onScrollBottom,
    onSearch = _ref7.onSearch,
    _ref7$options = _ref7.options,
    options = _ref7$options === void 0 ? emptyArray : _ref7$options,
    _ref7$isOptionDisable = _ref7.isOptionDisabled,
    isOptionDisabled = _ref7$isOptionDisable === void 0 ? defaultIsOptionDisabled : _ref7$isOptionDisable,
    _ref7$optionRenderer = _ref7.optionRenderer,
    optionRenderer = _ref7$optionRenderer === void 0 ? defaultOptionRenderer : _ref7$optionRenderer,
    optgroups = _ref7.optgroups,
    _ref7$groupHeaderRend = _ref7.groupHeaderRenderer,
    groupHeaderRenderer = _ref7$groupHeaderRend === void 0 ? defaultGroupHeaderRenderer : _ref7$groupHeaderRend,
    _ref7$tokenRenderer = _ref7.tokenRenderer,
    tokenRenderer = _ref7$tokenRenderer === void 0 ? defaultTokenRenderer : _ref7$tokenRenderer,
    placeholder = _ref7.placeholder,
    _ref7$placement = _ref7.placement,
    placement = _ref7$placement === void 0 ? 'bottom-left' : _ref7$placement,
    _ref7$value = _ref7.value,
    value = _ref7$value === void 0 ? emptyArray : _ref7$value,
    _ref7$tabIndex = _ref7.tabIndex,
    tabIndex = _ref7$tabIndex === void 0 ? 0 : _ref7$tabIndex,
    ariaLabelledBy = _ref7['aria-labelledby'],
    _ref7$qa = _ref7.qa,
    qa = _ref7$qa === void 0 ? {} : _ref7$qa,
    props = _objectWithoutProperties(_ref7, _excluded3);
  var i18n = useI18nContext();
  var ownRef = React.useRef();
  var targetRef = ref || ownRef;
  var searchRef = React.useRef(null);
  var menuRef = React.useRef(null);
  var _useMenuImperativeCon = useMenuImperativeControlNavigation(menuRef),
    menuNavigationTriggerProps = _useMenuImperativeCon.menuNavigationTriggerProps,
    menuProps = _useMenuImperativeCon.menuProps;
  var I18n = useI18nContext();
  var multiselect = useMultiSelect({
    getId: getId,
    getLabel: getLabel,
    getGroup: getGroup,
    menuRef: menuRef,
    onSearch: onSearch,
    options: options,
    onChange: function onChange(value) {
      _onChange(value);
      setFocusTo(searchRef);
    },
    value: value,
    optgroups: optgroups
  });
  var hasClearIcon = value.length > 0 && !loading;
  var isNavigatingTokens = multiselect.index !== null;
  var overlay = /*#__PURE__*/React.createElement(StyledMultiSelectMenu, {
    shadowStrength: 2
  }, /*#__PURE__*/React.createElement(MenuImperative, _extends({}, menuProps, {
    ref: menuRef,
    onScrollBottom: onScrollBottom,
    onSelect: multiselect.onSelect,
    "data-qa": "multi-select-menu",
    role: "listbox"
  }), multiselect.options.length ? /*#__PURE__*/React.createElement(GroupedOptions, {
    multiselect: multiselect,
    getId: getId,
    getLabel: getLabel,
    isOptionDisabled: isOptionDisabled,
    groupHeaderRenderer: groupHeaderRenderer,
    optionRenderer: optionRenderer,
    qa: qa
  }) : /*#__PURE__*/React.createElement(Box, {
    padding: "md lg"
  }, /*#__PURE__*/React.createElement(Typography, {
    color: "gray45",
    intent: "small",
    italic: true
  }, emptyMessage || I18n.t('core.multiSelect.noResults'))), footer && /*#__PURE__*/React.createElement(MenuImperative.Footer, null, footer)));
  return /*#__PURE__*/React.createElement(OverlayTrigger, {
    canFlip: true,
    afterHide: function afterHide() {
      multiselect.clearToken();
      _afterHide();
    },
    afterShow: function afterShow() {
      var _menuRef$current5;
      multiselect.clearToken();
      (_menuRef$current5 = menuRef.current) === null || _menuRef$current5 === void 0 ? void 0 : _menuRef$current5.highlightFirst();
      _afterShow();
    },
    beforeHide: function beforeHide(e) {
      // if we are clicking somewhere in the target, set focus on the search
      if (e instanceof MouseEvent && isEventSource(targetRef, e)) {
        setFocusTo(searchRef);
      }
      return _beforeHide(e);
    },
    beforeShow: function beforeShow(e) {
      setFocusTo(searchRef);
      return _beforeShow(e);
    },
    hideKeys: {
      overlay: overlayHideKeys,
      target: targetHideKeys
    },
    overlay: overlay,
    placement: placement,
    ref: targetRef,
    showKeys: targetShowKeys,
    trigger: "click"
  }, function (_ref8) {
    var disable = _ref8.disable,
      enable = _ref8.enable,
      isVisible = _ref8.isVisible;
    return /*#__PURE__*/React.createElement(StyledMultiSelectButton, _extends({
      $block: block,
      $error: error,
      $emptyValue: value.length === 0,
      $disabled: disabled,
      $hasClearIcon: hasClearIcon,
      $loading: loading,
      $open: isVisible
    }, props), /*#__PURE__*/React.createElement(StyledMultiSelectValues, null, value.map(function (selection, i) {
      return /*#__PURE__*/React.createElement(StyledMultiSelectToken, {
        key: getId(selection)
      }, tokenRenderer({
        option: selection,
        focused: i === multiselect.index,
        disabled: disabled,
        getLabel: getLabel,
        removeToken: function removeToken() {
          multiselect.removeToken(i);
        },
        qa: qa
      }));
    }), /*#__PURE__*/React.createElement(StyledMultiSelectSearch, null, /*#__PURE__*/React.createElement(StyledMultiSelectSearchInput, _extends({
      "aria-labelledby": ariaLabelledBy,
      "data-qa": "core-multiselect-input",
      $isNavigatingTokens: isNavigatingTokens,
      disabled: disabled,
      onBlur: multiselect.clearToken,
      onChange: function onChange(e) {
        multiselect.onSearch(e);
      }
    }, menuNavigationTriggerProps, {
      onKeyDown: function onKeyDown(e) {
        if (isNavigatingTokens && e.key !== 'Tab') {
          // if we are navigating tokens don't do any input but allow Tab
          e.preventDefault();
        }
        if (isVisible) {
          // if the overlay is visible, close it and keep focus
          if (e.key === 'Tab') {
            e.preventDefault();
            disable(e);
          }
          // if open, don't notify parents (like Modal) but still let OverlayTrigger close it and keep it focus
          if (e.key === 'Esc' || e.key === 'Escape') {
            e.stopPropagation();
            disable(e);
          }
        } else {
          // if we type in an alphanumeric character, show the overlay
          if (isAlphaNumeric(e.key)) {
            enable(e);
          }
        }
        multiselect.domHandlers.onKeyDown(e);
      },
      placeholder: (value === null || value === void 0 ? void 0 : value.length) > 0 ? '' : placeholder !== null && placeholder !== void 0 ? placeholder : I18n.t('core.multiSelect.selectValues'),
      ref: searchRef,
      tabIndex: tabIndex,
      value: multiselect.search
    })))), /*#__PURE__*/React.createElement(StyledMultiSelectSearchIcon, null, /*#__PURE__*/React.createElement(StyledMultiSelectClearIcon, {
      "aria-label": i18n.t('core.multiSelect.clearAll'),
      "data-close": true,
      "data-qa": "core-multiselect-clear",
      size: "sm",
      variant: "tertiary",
      disabled: disabled,
      icon: /*#__PURE__*/React.createElement(Clear, null),
      onClick: function onClick() {
        return _onChange([]);
      },
      tabIndex: -1 // TODO revisit this accessibility
    }), loading ? /*#__PURE__*/React.createElement(Spinner, {
      color: "blue50",
      size: "xs"
    }) : /*#__PURE__*/React.createElement(StyledMultiSelectArrowContainer, {
      "data-qa": "multiselect-select-arrow",
      onClick: function onClick(e) {
        return isVisible && disable(e);
      }
    }, /*#__PURE__*/React.createElement(StyledMultiSelectArrow, null))));
  });
});
MultiSelect_.displayName = 'MultiSelect';

/**
 * @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-multiselect--demo)
 * @see [Design Guidelines](https://design.procore.com/multi-select)
 */
export var MultiSelect = addSubcomponents({
  Option: Option
}, MultiSelect_);
//# sourceMappingURL=MultiSelect.js.map