@procore/core-react 11.22.0 → 11.23.0

package/dist/MultiSelect/MultiSelect.js

@@ -1,38 +1,29 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+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 { MenuImperative, useMenuImperativeControlNavigation } from '../MenuImperative/MenuImperative';
 import { OverlayTrigger } from '../OverlayTrigger/OverlayTrigger';
 import { Spinner } from '../Spinner/Spinner';
 import { Token } from '../Token/Token';
@@ -40,229 +31,285 @@ 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';
+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 noop() {}
 function returnTrue() {
-    return true;
+  return true;
 }
 function isAlphaNumeric(str) {
-    return str.length === 1 && str.match(/[A-Za-z0-9 _.,!"'/$]*/i);
+  return str.length === 1 && str.match(/[A-Za-z0-9 _.,!"'/$]*/i);
 }
 function setFocusTo(ref) {
-    if (ref.current) {
-        ref.current.focus();
-    }
+  if (ref.current) {
+    ref.current.focus();
+  }
 }
 function isOption(obj) {
-    return typeof obj === 'object' && obj.type === Option;
+  return _typeof(obj) === 'object' && obj.type === Option;
 }
 function defaultIsOptionDisabled() {
-    return false;
+  return false;
 }
 function defaultGetId(item) {
-    return item.id;
+  return item.id;
 }
 function defaultGetLabel(item) {
-    return item.label;
+  return item.label;
 }
 function defaultGetGroup(item) {
-    return item.groupId;
+  return item.groupId;
 }
 function defaultIsSelectable(obj) {
-    typeof obj === 'object' && obj.type === Option;
+  _typeof(obj) === 'object' && obj.type === Option;
 }
-function defaultOptionRenderer(item, _a) {
-    var _b;
-    var getId = _a.getId, getLabel = _a.getLabel, qa = _a.qa, value = _a.value, props = __rest(_a, ["getId", "getLabel", "qa", "value"]);
-    return (React.createElement(Option, __assign({ key: getId(item), value: value || item, "data-qa": (_b = qa === null || qa === void 0 ? void 0 : qa.option) === null || _b === void 0 ? void 0 : _b.call(qa, item) }, props), getLabel(item)));
+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 (React.createElement(MenuImperative.Group, { key: "group_".concat(group.id), clickable: false }, group.label));
+  return /*#__PURE__*/React.createElement(MenuImperative.Group, {
+    key: "group_".concat(group.id),
+    clickable: false
+  }, group.label);
 }
-function defaultTokenRenderer(_a) {
-    var _b, _c;
-    var focused = _a.focused, disabled = _a.disabled, option = _a.option, removeToken = _a.removeToken, getLabel = _a.getLabel, qa = _a.qa;
-    return (React.createElement(Token, { disabled: disabled, focused: focused, "data-qa": (_b = qa === null || qa === void 0 ? void 0 : qa.token) === null || _b === void 0 ? void 0 : _b.call(qa, option) },
-        React.createElement(Token.Label, null, getLabel(option)),
-        React.createElement(Token.Remove, { "data-close": true, onClick: removeToken, "data-qa": (_c = qa === null || qa === void 0 ? void 0 : qa.tokenClear) === null || _c === void 0 ? void 0 : _c.call(qa, option) })));
+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(_a) {
-    var getId = _a.getId, getLabel = _a.getLabel, getGroup = _a.getGroup, menuRef = _a.menuRef, _b = _a.onChange, onChange = _b === void 0 ? noop : _b, onSearch_ = _a.onSearch, options_ = _a.options, value = _a.value, optgroups = _a.optgroups;
-    var _c = React.useState(null), index = _c[0], setIndex = _c[1];
-    var _d = React.useState(''), search = _d[0], setSearch = _d[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 _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst(); }, 0);
-    }, [menuRef, onSearch_]);
-    var clearToken = function () { 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)
-            : __spreadArray(__spreadArray([], value, true), [selection.item], false);
-        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) {
-        var _a, _b, _c;
-        if (event.key === 'Enter') {
-            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.select(event);
-        }
-        if (event.key === 'ArrowUp' || event.key === 'Up') {
-            (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.prev();
-        }
-        if (event.key === 'ArrowDown' || event.key === 'Down') {
-            (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.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;
+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;
         }
-        var optionsByGroup = optgroups.reduce(function (acc, _a) {
-            var _b;
-            var id = _a.id;
-            return __assign(__assign({}, acc), (_b = {}, _b[id] = [], _b));
-        }, {});
-        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);
+
+        // 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();
         }
-        return optgroups.flatMap(function (group) {
-            var groupHeader = __assign(__assign({}, group), { isGroupHeader: true });
-            var groupOptions = optionsByGroup[group.id];
-            if (!groupOptions.length) {
-                return [];
-            }
-            return __spreadArray([groupHeader], groupOptions, true);
-        }, []);
-    }, [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,
-        },
-    };
+      }
+      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 = React.forwardRef(function Option(_a, ref) {
-    var value = _a.value, props = __rest(_a, ["value"]);
-    return React.createElement(MenuImperative.Item, __assign({ ref: ref }, props, { item: value }));
+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(_a) {
-    var multiselect = _a.multiselect, groupHeaderRenderer = _a.groupHeaderRenderer, optionRenderer = _a.optionRenderer, getId = _a.getId, getLabel = _a.getLabel, isOptionDisabled = _a.isOptionDisabled, qa = _a.qa;
-    return (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,
-        });
-    })));
+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,
@@ -277,114 +324,230 @@ function GroupedOptions(_a) {
  @see [Design Guidelines](https://design.procore.com/multi-select)
 
  */
-var MultiSelect_ = React.forwardRef(function MultiSelect(_a, ref) {
-    var _b = _a.afterHide, afterHide = _b === void 0 ? noop : _b, _c = _a.afterShow, afterShow = _c === void 0 ? noop : _c, _d = _a.beforeHide, beforeHide = _d === void 0 ? returnTrue : _d, _e = _a.beforeShow, beforeShow = _e === void 0 ? returnTrue : _e, _f = _a.block, block = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, emptyMessage = _a.emptyMessage, _h = _a.error, error = _h === void 0 ? false : _h, footer = _a.footer, _j = _a.getId, getId = _j === void 0 ? defaultGetId : _j, _k = _a.getLabel, getLabel = _k === void 0 ? defaultGetLabel : _k, _l = _a.getGroup, getGroup = _l === void 0 ? defaultGetGroup : _l, _m = _a.loading, loading = _m === void 0 ? false : _m, _o = _a.onChange, onChange = _o === void 0 ? noop : _o, onScrollBottom = _a.onScrollBottom, onSearch = _a.onSearch, _p = _a.options, options = _p === void 0 ? emptyArray : _p, _q = _a.isOptionDisabled, isOptionDisabled = _q === void 0 ? defaultIsOptionDisabled : _q, _r = _a.optionRenderer, optionRenderer = _r === void 0 ? defaultOptionRenderer : _r, optgroups = _a.optgroups, _s = _a.groupHeaderRenderer, groupHeaderRenderer = _s === void 0 ? defaultGroupHeaderRenderer : _s, _t = _a.tokenRenderer, tokenRenderer = _t === void 0 ? defaultTokenRenderer : _t, placeholder = _a.placeholder, _u = _a.placement, placement = _u === void 0 ? 'bottom-left' : _u, _v = _a.value, value = _v === void 0 ? emptyArray : _v, _w = _a.tabIndex, tabIndex = _w === void 0 ? 0 : _w, ariaLabelledBy = _a["aria-labelledby"], _x = _a.qa, qa = _x === void 0 ? {} : _x, props = __rest(_a, ["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"]);
-    var i18n = useI18nContext();
-    var ownRef = React.useRef();
-    var targetRef = ref || ownRef;
-    var searchRef = React.useRef(null);
-    var menuRef = React.useRef(null);
-    var _y = useMenuImperativeControlNavigation(menuRef), menuNavigationTriggerProps = _y.menuNavigationTriggerProps, menuProps = _y.menuProps;
-    var I18n = useI18nContext();
-    var multiselect = useMultiSelect({
-        getId: getId,
+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,
-        getGroup: getGroup,
-        menuRef: menuRef,
-        onSearch: onSearch,
-        options: options,
-        onChange: function (value) {
-            onChange(value);
-            setFocusTo(searchRef);
+        removeToken: function removeToken() {
+          multiselect.removeToken(i);
         },
-        value: value,
-        optgroups: optgroups,
-    });
-    var hasClearIcon = value.length > 0 && !loading;
-    var isNavigatingTokens = multiselect.index !== null;
-    var overlay = (React.createElement(StyledMultiSelectMenu, { shadowStrength: 2 },
-        React.createElement(MenuImperative, __assign({}, menuProps, { ref: menuRef, onScrollBottom: onScrollBottom, onSelect: multiselect.onSelect, "data-qa": "multi-select-menu", role: "listbox" }),
-            multiselect.options.length ? (React.createElement(GroupedOptions, { multiselect: multiselect, getId: getId, getLabel: getLabel, isOptionDisabled: isOptionDisabled, groupHeaderRenderer: groupHeaderRenderer, optionRenderer: optionRenderer, qa: qa })) : (React.createElement(Box, { padding: "md lg" },
-                React.createElement(Typography, { color: "gray45", intent: "small", italic: true }, emptyMessage || I18n.t('core.multiSelect.noResults')))),
-            footer && React.createElement(MenuImperative.Footer, null, footer))));
-    return (React.createElement(OverlayTrigger, { canFlip: true, afterHide: function () {
-            multiselect.clearToken();
-            afterHide();
-        }, afterShow: function () {
-            var _a;
-            multiselect.clearToken();
-            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
-            afterShow();
-        }, beforeHide: function (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 (e) {
-            setFocusTo(searchRef);
-            return beforeShow(e);
-        }, hideKeys: {
-            overlay: overlayHideKeys,
-            target: targetHideKeys,
-        }, overlay: overlay, placement: placement, ref: targetRef, showKeys: targetShowKeys, trigger: "click" }, function (_a) {
-        var disable = _a.disable, enable = _a.enable, isVisible = _a.isVisible;
-        return (React.createElement(StyledMultiSelectButton, __assign({ "$block": block, "$error": error, "$emptyValue": value.length === 0, "$disabled": disabled, "$hasClearIcon": hasClearIcon, "$loading": loading, "$open": isVisible }, props),
-            React.createElement(StyledMultiSelectValues, null,
-                value.map(function (selection, i) {
-                    return (React.createElement(StyledMultiSelectToken, { key: getId(selection) }, tokenRenderer({
-                        option: selection,
-                        focused: i === multiselect.index,
-                        disabled: disabled,
-                        getLabel: getLabel,
-                        removeToken: function () {
-                            multiselect.removeToken(i);
-                        },
-                        qa: qa,
-                    })));
-                }),
-                React.createElement(StyledMultiSelectSearch, null,
-                    React.createElement(StyledMultiSelectSearchInput, __assign({ "aria-labelledby": ariaLabelledBy, "data-qa": "core-multiselect-input", "$isNavigatingTokens": isNavigatingTokens, disabled: disabled, onBlur: multiselect.clearToken, onChange: function (e) {
-                            multiselect.onSearch(e);
-                        } }, menuNavigationTriggerProps, { onKeyDown: function (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 })))),
-            React.createElement(StyledMultiSelectSearchIcon, null,
-                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: React.createElement(Clear, null), onClick: function () { return onChange([]); }, tabIndex: -1 }),
-                loading ? (React.createElement(Spinner, { color: "blue50", size: "xs" })) : (React.createElement(StyledMultiSelectArrowContainer, { "data-qa": "multiselect-select-arrow", onClick: function (e) { return isVisible && disable(e); } },
-                    React.createElement(StyledMultiSelectArrow, null))))));
-    }));
+        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,
+  Option: Option
 }, MultiSelect_);
 //# sourceMappingURL=MultiSelect.js.map