@procore/core-react 11.22.1 → 11.23.0

package/dist/TieredSelect/TieredSelectMenu.js

@@ -1,34 +1,24 @@
-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));
-};
+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); }
+var _excluded = ["children", "emptyMessage"],
+  _excluded2 = ["children", "currentTier", "footer", "loading", "loadingMore", "menuRef", "onChange", "onNavigate", "onSearch", "options", "previousValue", "value"];
+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; }
 import { ChevronRight, Help, Home, Plus } from '@procore/core-icons/dist';
 import React from 'react';
 import { Box } from '../Box/Box';
@@ -36,273 +26,396 @@ import { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs';
 import { Button } from '../Button/Button';
 import { FlexList } from '../FlexList/FlexList';
 import { Input } from '../Input/Input';
-import { MenuImperative, useMenuImperativeControlNavigation, } from '../MenuImperative/MenuImperative';
-import { CloseOnFocus, useOverlayTriggerContext, } from '../OverlayTrigger/OverlayTrigger';
+import { MenuImperative, useMenuImperativeControlNavigation } from '../MenuImperative/MenuImperative';
+import { CloseOnFocus, useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
 import { Spinner } from '../Spinner/Spinner';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { Typography } from '../Typography/Typography';
 import { useI18nContext } from '../_hooks/I18n';
 import { TieredSelectContext, useHighlightItemEffects } from './TieredSelect';
-import { StyledTieredSelect, StyledTieredSelectBreadcrumbs, StyledTieredSelectHome, StyledTieredSelectIcon, StyledTieredSelectLoadingMore, StyledTieredSelectOption, StyledTieredSelectOverlay, StyledTieredSelectSpinnerOverlay, } from './TieredSelect.styles';
+import { StyledTieredSelect, StyledTieredSelectBreadcrumbs, StyledTieredSelectHome, StyledTieredSelectIcon, StyledTieredSelectLoadingMore, StyledTieredSelectOption, StyledTieredSelectOverlay, StyledTieredSelectSpinnerOverlay } from './TieredSelect.styles';
 function ArrowButton(props) {
-    return (React.createElement(StyledTieredSelectIcon, { alignItems: "center", justifyContent: "center" },
-        React.createElement(ChevronRight, null)));
+  return /*#__PURE__*/React.createElement(StyledTieredSelectIcon, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(ChevronRight, null));
 }
 function ItemTooltipIcon() {
-    return (React.createElement(StyledTieredSelectIcon, { alignItems: "center", justifyContent: "center" },
-        React.createElement(Help, null)));
+  return /*#__PURE__*/React.createElement(StyledTieredSelectIcon, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Help, null));
 }
-var QuickCreateInput = React.forwardRef(function QuickCreateInput(_a, ref) {
-    var autoFocus = _a.autoFocus, onSubmit = _a.onSubmit, placeholder = _a.placeholder;
-    function onKeyDown(e) {
-        if (e.key === 'Enter') {
-            onSubmit(e.currentTarget.value);
-        }
+var QuickCreateInput = /*#__PURE__*/React.forwardRef(function QuickCreateInput(_ref, ref) {
+  var autoFocus = _ref.autoFocus,
+    onSubmit = _ref.onSubmit,
+    placeholder = _ref.placeholder;
+  function onKeyDown(e) {
+    if (e.key === 'Enter') {
+      onSubmit(e.currentTarget.value);
     }
-    return (React.createElement(Box, { flexGrow: "1", justifyContent: "center", padding: "md" },
-        React.createElement(Input, { autoFocus: autoFocus, onKeyDown: onKeyDown, placeholder: placeholder, ref: ref })));
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    flexGrow: "1",
+    justifyContent: "center",
+    padding: "md"
+  }, /*#__PURE__*/React.createElement(Input, {
+    autoFocus: autoFocus,
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: ref
+  }));
 });
-function Options(_a) {
-    var children = _a.children, emptyMessage = _a.emptyMessage, props = __rest(_a, ["children", "emptyMessage"]);
-    if (React.Children.count(children) === 0) {
-        return (React.createElement(MenuImperative.Options, null,
-            React.createElement(Box, __assign({ paddingLeft: "lg" }, props),
-                React.createElement(Typography, { color: "gray45", intent: "small", italic: true }, emptyMessage))));
-    }
-    return React.createElement(MenuImperative.Options, null, children);
+function Options(_ref2) {
+  var children = _ref2.children,
+    emptyMessage = _ref2.emptyMessage,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/React.createElement(MenuImperative.Options, null, /*#__PURE__*/React.createElement(Box, _extends({
+      paddingLeft: "lg"
+    }, props), /*#__PURE__*/React.createElement(Typography, {
+      color: "gray45",
+      intent: "small",
+      italic: true
+    }, emptyMessage)));
+  }
+  return /*#__PURE__*/React.createElement(MenuImperative.Options, null, children);
 }
-var RenderMenuItem = function (_a) {
-    var _b;
-    var tier = _a.tier, selected = _a.selected, index = _a.index, onNavigateForward = _a.onNavigateForward;
-    var _c = React.useContext(TieredSelectContext), isTierDisabled = _c.isTierDisabled, getNextGroupId = _c.getNextGroupId, onQuickCreate = _c.onQuickCreate, getLabel = _c.getLabel, getId = _c.getId;
-    var tooltip = (_b = isTierDisabled === null || isTierDisabled === void 0 ? void 0 : isTierDisabled(tier)) !== null && _b !== void 0 ? _b : false;
-    var isDisabled = Boolean(tooltip);
-    var showNextTierArrow = !tooltip && (Boolean(getNextGroupId(tier)) || Boolean(onQuickCreate));
-    var overlay = typeof tooltip === 'string' ? tooltip : null;
-    var menuItem = (React.createElement(StyledTieredSelectOption, { disabled: isDisabled, item: tier, selected: selected },
-        React.createElement(React.Fragment, null,
-            getLabel(tier),
-            showNextTierArrow && (React.createElement(Box, { paddingLeft: "sm" },
-                React.createElement(ArrowButton, { "data-qa": "tiered-select-arrow", onClick: function () { return onNavigateForward(tier); } }))),
-            tooltip && (React.createElement(Box, { paddingLeft: "sm" },
-                React.createElement(ItemTooltipIcon, null))))));
-    if (isDisabled && overlay) {
-        return (React.createElement(Tooltip, { key: "".concat(getId(tier), "-").concat(index, "-tooltip"), overlay: overlay, trigger: 'hover', placement: "right" }, menuItem));
+var RenderMenuItem = function RenderMenuItem(_ref3) {
+  var _isTierDisabled;
+  var tier = _ref3.tier,
+    selected = _ref3.selected,
+    index = _ref3.index,
+    onNavigateForward = _ref3.onNavigateForward;
+  var _React$useContext = React.useContext(TieredSelectContext),
+    isTierDisabled = _React$useContext.isTierDisabled,
+    getNextGroupId = _React$useContext.getNextGroupId,
+    onQuickCreate = _React$useContext.onQuickCreate,
+    getLabel = _React$useContext.getLabel,
+    getId = _React$useContext.getId;
+  var tooltip = (_isTierDisabled = isTierDisabled === null || isTierDisabled === void 0 ? void 0 : isTierDisabled(tier)) !== null && _isTierDisabled !== void 0 ? _isTierDisabled : false;
+  var isDisabled = Boolean(tooltip);
+  var showNextTierArrow = !tooltip && (Boolean(getNextGroupId(tier)) || Boolean(onQuickCreate));
+  var overlay = typeof tooltip === 'string' ? tooltip : null;
+  var menuItem = /*#__PURE__*/React.createElement(StyledTieredSelectOption, {
+    disabled: isDisabled,
+    item: tier,
+    selected: selected
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, getLabel(tier), showNextTierArrow && /*#__PURE__*/React.createElement(Box, {
+    paddingLeft: "sm"
+  }, /*#__PURE__*/React.createElement(ArrowButton, {
+    "data-qa": "tiered-select-arrow",
+    onClick: function onClick() {
+      return onNavigateForward(tier);
     }
-    return menuItem;
+  })), tooltip && /*#__PURE__*/React.createElement(Box, {
+    paddingLeft: "sm"
+  }, /*#__PURE__*/React.createElement(ItemTooltipIcon, null))));
+  if (isDisabled && overlay) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: "".concat(getId(tier), "-").concat(index, "-tooltip"),
+      overlay: overlay,
+      trigger: 'hover',
+      placement: "right"
+    }, menuItem);
+  }
+  return menuItem;
 };
-export var TieredSelectMenu = React.forwardRef(function TieredSelectMenu(_a, ref) {
-    var children = _a.children, currentTier = _a.currentTier, customFooter = _a.footer, loading = _a.loading, loadingMore = _a.loadingMore, menuRef = _a.menuRef, onChange = _a.onChange, onNavigate = _a.onNavigate, onSearch = _a.onSearch, _b = _a.options, options = _b === void 0 ? [] : _b, previousValue = _a.previousValue, value = _a.value, props = __rest(_a, ["children", "currentTier", "footer", "loading", "loadingMore", "menuRef", "onChange", "onNavigate", "onSearch", "options", "previousValue", "value"]);
-    var _c = React.useContext(TieredSelectContext), getGroupId = _c.getGroupId, getId = _c.getId, getLabel = _c.getLabel, getNextGroupId = _c.getNextGroupId, i18nScope = _c.i18nScope, isTierDisabled = _c.isTierDisabled, onQuickCreate = _c.onQuickCreate, onScrollBottom = _c.onScrollBottom;
-    var quickCreateRef = React.useRef(null);
-    var hide = useOverlayTriggerContext().hide;
-    var I18n = useI18nContext();
-    var _d = React.useState(false), isQuickCreating = _d[0], setIsQuickCreating = _d[1];
-    var _e = React.useState(''), searchValue = _e[0], setSearchValue = _e[1];
-    var _f = useMenuImperativeControlNavigation(menuRef), menuProps = _f.menuProps, menuNavigationTriggerProps = _f.menuNavigationTriggerProps;
-    var searchIsEmpty = searchValue === '';
-    var lastEntryInValue = value[value.length - 1];
-    var internalOnSearch = React.useCallback(function (e) {
-        setSearchValue(e.target.value);
-        onSearch && onSearch(e);
-    }, [onSearch]);
-    // When searching (all options have been flattened) we dont filter by id
-    var filteredOptions = React.useMemo(function () {
-        return searchIsEmpty
-            ? options.filter(function (tier) {
-                return getGroupId(tier) === currentTier;
-            })
-            : options;
-    }, [currentTier, getGroupId, options, searchIsEmpty]);
-    useHighlightItemEffects({
-        currentTier: currentTier,
-        searchValue: searchValue,
-        menuRef: menuRef,
-        loading: loading,
-        loadingMore: loadingMore,
-    });
-    var onNavigateHome = React.useCallback(function () {
-        var _a;
-        onNavigate(null, []);
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
-    }, [menuRef, onNavigate]);
-    var onBreadCrumbNavigate = React.useCallback(function (tier) {
-        var _a;
-        var newTier = value.indexOf(tier);
-        onNavigate(getNextGroupId(tier), value.slice(0, newTier + 1));
-        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
-    }, [getNextGroupId, menuRef, onNavigate, value]);
-    function onNavigateForward(tier) {
-        var _a;
-        if (searchIsEmpty && !isQuickCreating && tier && !isLeaf(tier)) {
-            // if last value was a leaf, replace it when performing next navigation
-            var newValue = lastEntryInValue && isLeaf(lastEntryInValue)
-                ? __spreadArray(__spreadArray([], value.slice(0, value.length - 1), true), [tier], false) : __spreadArray(__spreadArray([], value, true), [tier], false);
-            onNavigate(getNextGroupId(tier), newValue);
-            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
-        }
+export var TieredSelectMenu = /*#__PURE__*/React.forwardRef(function TieredSelectMenu(_ref4, ref) {
+  var children = _ref4.children,
+    currentTier = _ref4.currentTier,
+    customFooter = _ref4.footer,
+    loading = _ref4.loading,
+    loadingMore = _ref4.loadingMore,
+    menuRef = _ref4.menuRef,
+    onChange = _ref4.onChange,
+    onNavigate = _ref4.onNavigate,
+    onSearch = _ref4.onSearch,
+    _ref4$options = _ref4.options,
+    options = _ref4$options === void 0 ? [] : _ref4$options,
+    previousValue = _ref4.previousValue,
+    value = _ref4.value,
+    props = _objectWithoutProperties(_ref4, _excluded2);
+  var _React$useContext2 = React.useContext(TieredSelectContext),
+    getGroupId = _React$useContext2.getGroupId,
+    getId = _React$useContext2.getId,
+    getLabel = _React$useContext2.getLabel,
+    getNextGroupId = _React$useContext2.getNextGroupId,
+    i18nScope = _React$useContext2.i18nScope,
+    isTierDisabled = _React$useContext2.isTierDisabled,
+    onQuickCreate = _React$useContext2.onQuickCreate,
+    onScrollBottom = _React$useContext2.onScrollBottom;
+  var quickCreateRef = React.useRef(null);
+  var _useOverlayTriggerCon = useOverlayTriggerContext(),
+    hide = _useOverlayTriggerCon.hide;
+  var I18n = useI18nContext();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isQuickCreating = _React$useState2[0],
+    setIsQuickCreating = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    searchValue = _React$useState4[0],
+    setSearchValue = _React$useState4[1];
+  var _useMenuImperativeCon = useMenuImperativeControlNavigation(menuRef),
+    menuProps = _useMenuImperativeCon.menuProps,
+    menuNavigationTriggerProps = _useMenuImperativeCon.menuNavigationTriggerProps;
+  var searchIsEmpty = searchValue === '';
+  var lastEntryInValue = value[value.length - 1];
+  var internalOnSearch = React.useCallback(function (e) {
+    setSearchValue(e.target.value);
+    onSearch && onSearch(e);
+  }, [onSearch]);
+
+  // When searching (all options have been flattened) we dont filter by id
+  var filteredOptions = React.useMemo(function () {
+    return searchIsEmpty ? options.filter(function (tier) {
+      return getGroupId(tier) === currentTier;
+    }) : options;
+  }, [currentTier, getGroupId, options, searchIsEmpty]);
+  useHighlightItemEffects({
+    currentTier: currentTier,
+    searchValue: searchValue,
+    menuRef: menuRef,
+    loading: loading,
+    loadingMore: loadingMore
+  });
+  var onNavigateHome = React.useCallback(function () {
+    var _menuRef$current;
+    onNavigate(null, []);
+    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : _menuRef$current.highlightFirst();
+  }, [menuRef, onNavigate]);
+  var onBreadCrumbNavigate = React.useCallback(function (tier) {
+    var _menuRef$current2;
+    var newTier = value.indexOf(tier);
+    onNavigate(getNextGroupId(tier), value.slice(0, newTier + 1));
+    (_menuRef$current2 = menuRef.current) === null || _menuRef$current2 === void 0 ? void 0 : _menuRef$current2.highlightFirst();
+  }, [getNextGroupId, menuRef, onNavigate, value]);
+  function onNavigateForward(tier) {
+    if (searchIsEmpty && !isQuickCreating && tier && !isLeaf(tier)) {
+      var _menuRef$current3;
+      // if last value was a leaf, replace it when performing next navigation
+      var newValue = lastEntryInValue && isLeaf(lastEntryInValue) ? [].concat(_toConsumableArray(value.slice(0, value.length - 1)), [tier]) : [].concat(_toConsumableArray(value), [tier]);
+      onNavigate(getNextGroupId(tier), newValue);
+      (_menuRef$current3 = menuRef.current) === null || _menuRef$current3 === void 0 ? void 0 : _menuRef$current3.highlightFirst();
     }
-    /**
-     * need to skip back two levels if coming from a leaf node;
-     * out from the leaf and then out of the parent. this is because
-     * when tiers aren't selectectable we show the parent of the leaf
-     */
-    function onNavigateBackward() {
-        var _a;
-        if (value.length !== 0 && searchIsEmpty) {
-            var newValue = void 0;
-            var newTier = void 0;
-            if (isLeaf(value[value.length - 1])) {
-                newValue = value.slice(0, Math.max(0, value.length - 2));
-                newTier = value[Math.max(0, value.length - 2)];
-            }
-            else {
-                newValue = value.slice(0, Math.max(0, value.length - 1));
-                newTier = value[value.length - 1];
-            }
-            !isQuickCreating && onNavigate(getGroupId(newTier), newValue);
-            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
-        }
+  }
+
+  /**
+   * need to skip back two levels if coming from a leaf node;
+   * out from the leaf and then out of the parent. this is because
+   * when tiers aren't selectectable we show the parent of the leaf
+   */
+  function onNavigateBackward() {
+    if (value.length !== 0 && searchIsEmpty) {
+      var _menuRef$current4;
+      var newValue;
+      var newTier;
+      if (isLeaf(value[value.length - 1])) {
+        newValue = value.slice(0, Math.max(0, value.length - 2));
+        newTier = value[Math.max(0, value.length - 2)];
+      } else {
+        newValue = value.slice(0, Math.max(0, value.length - 1));
+        newTier = value[value.length - 1];
+      }
+      !isQuickCreating && onNavigate(getGroupId(newTier), newValue);
+      (_menuRef$current4 = menuRef.current) === null || _menuRef$current4 === void 0 ? void 0 : _menuRef$current4.highlightFirst();
     }
-    function onKeyDown(e) {
-        var _a, _b;
-        var tier = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlighted();
-        var isDisabled = isTierDisabled === null || isTierDisabled === void 0 ? void 0 : isTierDisabled(tier);
-        if (e.key === 'Right' || e.key === 'ArrowRight') {
-            if (isDisabled) {
-                return;
-            }
-            onNavigateForward(tier);
-            return;
-        }
-        if (e.key === 'Left' || e.key === 'ArrowLeft') {
-            if (isDisabled) {
-                return;
-            }
-            onNavigateBackward();
-            return;
-        }
-        (_b = menuNavigationTriggerProps.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(menuNavigationTriggerProps, e);
+  }
+  function onKeyDown(e) {
+    var _menuRef$current5, _menuNavigationTrigge;
+    var tier = (_menuRef$current5 = menuRef.current) === null || _menuRef$current5 === void 0 ? void 0 : _menuRef$current5.highlighted();
+    var isDisabled = isTierDisabled === null || isTierDisabled === void 0 ? void 0 : isTierDisabled(tier);
+    if (e.key === 'Right' || e.key === 'ArrowRight') {
+      if (isDisabled) {
+        return;
+      }
+      onNavigateForward(tier);
+      return;
     }
-    var isLeaf = React.useCallback(function (tier) {
-        return !getNextGroupId(tier);
-    }, [getNextGroupId]);
-    function onTierSelect(selection) {
-        if (isLeaf(selection.item)) {
-            var isSameGroup = value.length
-                ? getGroupId(lastEntryInValue) === getGroupId(selection.item)
-                : false;
-            // if the selection is in the same group as the old selection, replace the old selection
-            var newValue = isSameGroup
-                ? __spreadArray(__spreadArray([], value.slice(0, value.length - 1), true), [selection.item], false) : __spreadArray(__spreadArray([], value, true), [selection.item], false);
-            onChange(__assign(__assign({}, selection), { value: newValue }));
-            searchValue &&
-                internalOnSearch({
-                    target: { value: '' },
-                });
-            hide(selection.event);
-        }
-        else {
-            onNavigateForward(selection.item);
+    if (e.key === 'Left' || e.key === 'ArrowLeft') {
+      if (isDisabled) {
+        return;
+      }
+      onNavigateBackward();
+      return;
+    }
+    (_menuNavigationTrigge = menuNavigationTriggerProps.onKeyDown) === null || _menuNavigationTrigge === void 0 ? void 0 : _menuNavigationTrigge.call(menuNavigationTriggerProps, e);
+  }
+  var isLeaf = React.useCallback(function (tier) {
+    return !getNextGroupId(tier);
+  }, [getNextGroupId]);
+  function onTierSelect(selection) {
+    if (isLeaf(selection.item)) {
+      var isSameGroup = value.length ? getGroupId(lastEntryInValue) === getGroupId(selection.item) : false;
+
+      // if the selection is in the same group as the old selection, replace the old selection
+      var newValue = isSameGroup ? [].concat(_toConsumableArray(value.slice(0, value.length - 1)), [selection.item]) : [].concat(_toConsumableArray(value), [selection.item]);
+      onChange(_objectSpread(_objectSpread({}, selection), {}, {
+        value: newValue
+      }));
+      searchValue && internalOnSearch({
+        target: {
+          value: ''
         }
+      });
+      hide(selection.event);
+    } else {
+      onNavigateForward(selection.item);
     }
-    // non-selectable tiers can have a leaf node in the root tier, so if selected
-    // it will reopen to the root tier and we should not show breadcrumbs
-    function showBreadcrumbs() {
-        return (value.length &&
-            searchIsEmpty &&
-            !(value.length === 1 && isLeaf(value[value.length - 1])));
+  }
+
+  // non-selectable tiers can have a leaf node in the root tier, so if selected
+  // it will reopen to the root tier and we should not show breadcrumbs
+  function showBreadcrumbs() {
+    return value.length && searchIsEmpty && !(value.length === 1 && isLeaf(value[value.length - 1]));
+  }
+  var menuEmptyMessage = searchIsEmpty ? I18n.t('emptyMessage', {
+    scope: i18nScope
+  }) : I18n.t('searchEmptyMessage', {
+    scope: i18nScope
+  });
+  var handleQuickCreate = React.useCallback(function (e) {
+    // stops menu from selecting item and closing on enter press
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      setIsQuickCreating(true);
     }
-    var menuEmptyMessage = searchIsEmpty
-        ? I18n.t('emptyMessage', { scope: i18nScope })
-        : I18n.t('searchEmptyMessage', { scope: i18nScope });
-    var handleQuickCreate = React.useCallback(function (e) {
-        // stops menu from selecting item and closing on enter press
-        e.stopPropagation();
-        if (e.key === 'Enter') {
-            setIsQuickCreating(true);
-        }
-    }, [setIsQuickCreating]);
-    var onQuickCreateSubmit = React.useCallback(function () {
-        onQuickCreate &&
-            quickCreateRef.current &&
-            onQuickCreate(quickCreateRef.current.value);
-        setIsQuickCreating(false);
-    }, [onQuickCreate, quickCreateRef, setIsQuickCreating]);
-    function isTierSelected(tier) {
-        if (previousValue.length) {
-            return getId(tier) === getId(previousValue[previousValue.length - 1]);
-        }
-        return false;
+  }, [setIsQuickCreating]);
+  var onQuickCreateSubmit = React.useCallback(function () {
+    onQuickCreate && quickCreateRef.current && onQuickCreate(quickCreateRef.current.value);
+    setIsQuickCreating(false);
+  }, [onQuickCreate, quickCreateRef, setIsQuickCreating]);
+  function isTierSelected(tier) {
+    if (previousValue.length) {
+      return getId(tier) === getId(previousValue[previousValue.length - 1]);
     }
-    function RenderLoadingMore() {
-        if (loadingMore && !loading) {
-            return (React.createElement(StyledTieredSelectLoadingMore, { "data-qa": "tiered-select-loading-more" },
-                React.createElement(Spinner, { size: "sm" })));
-        }
-        return null;
+    return false;
+  }
+  function RenderLoadingMore() {
+    if (loadingMore && !loading) {
+      return /*#__PURE__*/React.createElement(StyledTieredSelectLoadingMore, {
+        "data-qa": "tiered-select-loading-more"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        size: "sm"
+      }));
     }
-    var RenderFooter = React.useCallback(function () {
-        if (customFooter) {
-            // Render custom footer, if defined.
-            if (typeof customFooter === 'function') {
-                return React.createElement(MenuImperative.Footer, null, customFooter());
-            }
-            return React.createElement(MenuImperative.Footer, null, customFooter);
-        }
-        if (onQuickCreate === undefined) {
-            // no footer if `onQuickCreate` is not defined.
-            return null;
-        }
-        if (isQuickCreating) {
-            // Render `Cancel` and `Create` labels if "quick creating".
-            return (React.createElement(MenuImperative.Footer, { "data-something": "true" },
-                React.createElement(FlexList, { size: "xs", justifyContent: "flex-end" },
-                    React.createElement(Button, { onClick: function () { return setIsQuickCreating(false); }, size: "sm", variant: "tertiary" }, I18n.t('quickCreateCancelLabel', {
-                        scope: i18nScope,
-                    })),
-                    React.createElement(Button, { onClick: onQuickCreateSubmit, size: "sm" }, I18n.t('quickCreateCreateLabel', {
-                        scope: i18nScope,
-                    })))));
-        }
-        return (React.createElement(MenuImperative.Footer, { "data-something": "true" },
-            React.createElement(Button, { block: true, size: "sm", icon: React.createElement(Plus, null), onClick: function () { return setIsQuickCreating(true); }, onKeyDown: handleQuickCreate }, I18n.t('quickCreateActionLabel', {
-                scope: i18nScope,
-            }))));
-    }, [
-        I18n,
-        customFooter,
-        handleQuickCreate,
-        i18nScope,
-        isQuickCreating,
-        onQuickCreate,
-        onQuickCreateSubmit,
-    ]);
-    return (React.createElement(StyledTieredSelectOverlay, { ref: ref, shadowStrength: 2 },
-        React.createElement(StyledTieredSelectSpinnerOverlay, { "data-qa": "tiered-select-loading", "data-loading": loading, label: I18n.t('spinnerLabel', { scope: i18nScope }) || '', loading: loading, size: "md" },
-            React.createElement(StyledTieredSelect, __assign({ onScrollBottom: onScrollBottom, onSelect: onTierSelect, ref: menuRef }, props, menuProps, { role: "none" }),
-                React.createElement(MenuImperative.Header, null,
-                    !isQuickCreating && (React.createElement(MenuImperative.Search, __assign({ autoComplete: "false", onChange: internalOnSearch, placeholder: I18n.t('searchPlaceholder', {
-                            scope: i18nScope,
-                        }) }, menuNavigationTriggerProps, { onKeyDown: onKeyDown }))),
-                    showBreadcrumbs() ? (React.createElement(StyledTieredSelectBreadcrumbs, { "$nonInteractive": isQuickCreating },
-                        React.createElement(Breadcrumbs.Crumb, { onClick: onNavigateHome },
-                            React.createElement(StyledTieredSelectHome, { alignItems: "center", justifyContent: "center" },
-                                React.createElement(Home, { "data-qa": "tiered-select-home" }))),
-                        value
-                            .filter(function (tier) {
-                            // we reopen to the parent of leaf nodes, so don't show that breadcrumb
-                            return !isLeaf(tier);
-                        })
-                            .map(function (tier, index, array) {
-                            return (React.createElement(Breadcrumbs.Crumb, { active: index === array.length - 1, key: "".concat(getId(tier), "-").concat(index), onClick: function () { return onBreadCrumbNavigate(tier); } }, getLabel(tier)));
-                        }))) : null),
-                !isQuickCreating ? (React.createElement(Options, { emptyMessage: menuEmptyMessage }, filteredOptions
-                    .map(function (tier, index) { return (React.createElement(RenderMenuItem, { key: "menu-item-".concat(getId(tier), "-").concat(index, "}"), tier: tier, selected: isTierSelected(tier), index: index, onNavigateForward: onNavigateForward })); })
-                    .concat(React.createElement(RenderLoadingMore, { key: "tiered-select-loading-more" })))) : (React.createElement(QuickCreateInput, { autoFocus: isQuickCreating, onSubmit: onQuickCreateSubmit, placeholder: I18n.t('quickCreatePlaceholder', {
-                        scope: i18nScope,
-                    }), ref: quickCreateRef })),
-                React.createElement(RenderFooter, null),
-                React.createElement(CloseOnFocus, { hide: hide })))));
+    return null;
+  }
+  var RenderFooter = React.useCallback(function () {
+    if (customFooter) {
+      // Render custom footer, if defined.
+      if (typeof customFooter === 'function') {
+        return /*#__PURE__*/React.createElement(MenuImperative.Footer, null, customFooter());
+      }
+      return /*#__PURE__*/React.createElement(MenuImperative.Footer, null, customFooter);
+    }
+    if (onQuickCreate === undefined) {
+      // no footer if `onQuickCreate` is not defined.
+      return null;
+    }
+    if (isQuickCreating) {
+      // Render `Cancel` and `Create` labels if "quick creating".
+      return /*#__PURE__*/React.createElement(MenuImperative.Footer, {
+        "data-something": "true"
+      }, /*#__PURE__*/React.createElement(FlexList, {
+        size: "xs",
+        justifyContent: "flex-end"
+      }, /*#__PURE__*/React.createElement(Button, {
+        onClick: function onClick() {
+          return setIsQuickCreating(false);
+        },
+        size: "sm",
+        variant: "tertiary"
+      }, I18n.t('quickCreateCancelLabel', {
+        scope: i18nScope
+      })), /*#__PURE__*/React.createElement(Button, {
+        onClick: onQuickCreateSubmit,
+        size: "sm"
+      }, I18n.t('quickCreateCreateLabel', {
+        scope: i18nScope
+      }))));
+    }
+    return /*#__PURE__*/React.createElement(MenuImperative.Footer, {
+      "data-something": "true"
+    }, /*#__PURE__*/React.createElement(Button, {
+      block: true,
+      size: "sm",
+      icon: /*#__PURE__*/React.createElement(Plus, null),
+      onClick: function onClick() {
+        return setIsQuickCreating(true);
+      },
+      onKeyDown: handleQuickCreate
+    }, I18n.t('quickCreateActionLabel', {
+      scope: i18nScope
+    })));
+  }, [I18n, customFooter, handleQuickCreate, i18nScope, isQuickCreating, onQuickCreate, onQuickCreateSubmit]);
+  return /*#__PURE__*/React.createElement(StyledTieredSelectOverlay, {
+    ref: ref,
+    shadowStrength: 2
+  }, /*#__PURE__*/React.createElement(StyledTieredSelectSpinnerOverlay, {
+    "data-qa": "tiered-select-loading",
+    "data-loading": loading,
+    label: I18n.t('spinnerLabel', {
+      scope: i18nScope
+    }) || '',
+    loading: loading,
+    size: "md"
+  }, /*#__PURE__*/React.createElement(StyledTieredSelect, _extends({
+    onScrollBottom: onScrollBottom,
+    onSelect: onTierSelect,
+    ref: menuRef
+  }, props, menuProps, {
+    role: "none"
+  }), /*#__PURE__*/React.createElement(MenuImperative.Header, null, !isQuickCreating && /*#__PURE__*/React.createElement(MenuImperative.Search, _extends({
+    autoComplete: "false",
+    onChange: internalOnSearch,
+    placeholder: I18n.t('searchPlaceholder', {
+      scope: i18nScope
+    })
+  }, menuNavigationTriggerProps, {
+    onKeyDown: onKeyDown
+  })), showBreadcrumbs() ? /*#__PURE__*/React.createElement(StyledTieredSelectBreadcrumbs, {
+    $nonInteractive: isQuickCreating
+  }, /*#__PURE__*/React.createElement(Breadcrumbs.Crumb, {
+    onClick: onNavigateHome
+  }, /*#__PURE__*/React.createElement(StyledTieredSelectHome, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(Home, {
+    "data-qa": "tiered-select-home"
+  }))), value.filter(function (tier) {
+    // we reopen to the parent of leaf nodes, so don't show that breadcrumb
+    return !isLeaf(tier);
+  }).map(function (tier, index, array) {
+    return /*#__PURE__*/React.createElement(Breadcrumbs.Crumb, {
+      active: index === array.length - 1,
+      key: "".concat(getId(tier), "-").concat(index),
+      onClick: function onClick() {
+        return onBreadCrumbNavigate(tier);
+      }
+    }, getLabel(tier));
+  })) : null), !isQuickCreating ? /*#__PURE__*/React.createElement(Options, {
+    emptyMessage: menuEmptyMessage
+  }, filteredOptions.map(function (tier, index) {
+    return /*#__PURE__*/React.createElement(RenderMenuItem, {
+      key: "menu-item-".concat(getId(tier), "-").concat(index, "}"),
+      tier: tier,
+      selected: isTierSelected(tier),
+      index: index,
+      onNavigateForward: onNavigateForward
+    });
+  }).concat( /*#__PURE__*/React.createElement(RenderLoadingMore, {
+    key: "tiered-select-loading-more"
+  }))) : /*#__PURE__*/React.createElement(QuickCreateInput, {
+    autoFocus: isQuickCreating,
+    onSubmit: onQuickCreateSubmit,
+    placeholder: I18n.t('quickCreatePlaceholder', {
+      scope: i18nScope
+    }),
+    ref: quickCreateRef
+  }), /*#__PURE__*/React.createElement(RenderFooter, null), /*#__PURE__*/React.createElement(CloseOnFocus, {
+    hide: hide
+  }))));
 });
 //# sourceMappingURL=TieredSelectMenu.js.map