@pingux/astro 2.130.2-alpha.2 → 2.130.2-alpha.3

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -15,10 +15,8 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -74,41 +72,11 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
-
-  // START - minimum delay time for loading indicator = 500ms
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showLoading = _useState2[0],
-    setShowLoading = _useState2[1];
-  var isLoading = loadingState === _loadingStates["default"].LOADING || loadingState === _loadingStates["default"].FILTERING;
-  var inputValue = inputProps.value;
-  var lastInputValue = (0, _react.useRef)(inputValue);
-  var timeout = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (isLoading && !showLoading) {
-      if (timeout.current === null) {
-        timeout.current = (0, _setTimeout2["default"])(function () {
-          setShowLoading(true);
-        }, 500);
-      }
-
-      // If user is typing, clear the timer and restart since it is a new request
-      if (inputValue !== lastInputValue.current) {
-        clearTimeout(timeout.current);
-        timeout.current = (0, _setTimeout2["default"])(function () {
-          setShowLoading(true);
-        }, 500);
-      }
-    } else if (!isLoading) {
-      // If loading is no longer happening, clear any timers and hide the loader
-      setShowLoading(false);
-      clearTimeout(timeout.current);
-      timeout.current = null;
-    }
-    lastInputValue.current = inputValue;
-  }, [isLoading, showLoading, inputValue]);
-  // END - minimum delay time for loading indicator = 500ms
-
+  var _useInputLoader = (0, _hooks.useInputLoader)({
+      loadingState: loadingState,
+      inputValue: inputProps.value
+    }),
+    showLoading = _useInputLoader.showLoading;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   var button = !isReadOnly && (0, _react2.jsx)(_.Box, {
     isRow: true,

package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js

@@ -15,9 +15,9 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 var _flatMap = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/flat-map"));
@@ -30,6 +30,7 @@ var _reactAria = require("react-aria");
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _MenuUpIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuUpIcon"));
 var _i18n = require("@react-aria/i18n");
+var _interactions = require("@react-aria/interactions");
 var _utils = require("@react-aria/utils");
 var _visuallyHidden = require("@react-aria/visually-hidden");
 var _list = require("@react-stately/list");
@@ -45,7 +46,7 @@ var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "filter", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -57,12 +58,14 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     _props$disabledKeys = props.disabledKeys,
     disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
     containerProps = props.containerProps,
+    filter = (0, _filter["default"])(props),
     hasAutoFocus = props.hasAutoFocus,
     hasNoSelectAll = props.hasNoSelectAll,
     hasNoStatusIndicator = props.hasNoStatusIndicator,
     helperText = props.helperText,
     customInputProps = props.inputProps,
     isDisabled = props.isDisabled,
+    isFilteringDisabled = props.isFilteringDisabled,
     isNotFlippable = props.isNotFlippable,
     isReadOnly = props.isReadOnly,
     isRequired = props.isRequired,
@@ -94,15 +97,27 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var _useState5 = (0, _react.useState)(''),
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    activeDescendant = _useState6[0],
-    setActiveDescendant = _useState6[1];
+    hasFocusWithin = _useState6[0],
+    setFocusWithin = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    activeDescendant = _useState8[0],
+    setActiveDescendant = _useState8[1];
   var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
+  var _useFocusWithin = (0, _interactions.useFocusWithin)({
+      onFocusWithinChange: setFocusWithin
+    }),
+    focusWithinProps = _useFocusWithin.focusWithinProps;
+  var _useInputLoader = (0, _hooks.useInputLoader)({
+      loadingState: loadingState,
+      inputValue: filterString
+    }),
+    showLoading = _useInputLoader.showLoading;
   var toggleItems = function toggleItems(keys) {
-    setFilterString('');
     if (onSelectionChange) onSelectionChange(keys);
   };
   var _useFilter = (0, _i18n.useFilter)({
@@ -131,14 +146,17 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     });
   };
   var state = (0, _list.useListState)(_objectSpread(_objectSpread({}, props), {}, {
-    filter: filterNodesWithChildren,
     items: items,
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
+  }, !isFilteringDisabled && {
+    filter: filter || filterNodesWithChildren
   }));
   var selectionManager = state.selectionManager;
   var close = function close() {
-    return setIsOpen(false);
+    if (!hasFocusWithin) {
+      setIsOpen(false);
+    }
   };
 
   /* istanbul ignore next */
@@ -177,10 +195,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState7 = (0, _react.useState)(null),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    menuWidth = _useState8[0],
-    setMenuWidth = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    menuWidth = _useState10[0],
+    setMenuWidth = _useState10[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -217,10 +235,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
             var key = selectionManager.focusedKey;
             if (!(0, _includes["default"])(disabledKeys).call(disabledKeys, key)) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
-              setFilterString('');
             }
-          } else {
-            setFilterString('');
           }
           break;
         }
@@ -239,7 +254,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       case 'Escape':
         {
           setFilterString('');
-          close();
+          setIsOpen(false);
           break;
         }
       default:
@@ -253,12 +268,13 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
       return;
     }
+    setFilterString('');
     setIsOpen(false);
   };
-  var _useState9 = (0, _react.useState)('Select All'),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    selectionState = _useState10[0],
-    setSelectionState = _useState10[1];
+  var _useState11 = (0, _react.useState)('Select All'),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    selectionState = _useState12[0],
+    setSelectionState = _useState12[1];
   var arrayItems = (0, _from["default"])(items);
   var itemCount = (0, _reduce["default"])(arrayItems).call(arrayItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
@@ -309,10 +325,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     loadingState: loadingState,
     isLoading: loadingState === _loadingStates["default"].LOADING_MORE,
     "aria-label": "List of options",
-    isCondensed: mode === 'condensed',
-    onBlur: function onBlur(e) {
-      return handleBlur(e);
-    }
+    isCondensed: mode === 'condensed'
   }, overlayProps))), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: close
   }));
@@ -361,10 +374,17 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       setIsOpen(true);
       inputRef.current.focus();
     } else {
-      close();
+      setIsOpen(false);
     }
   };
   var button = (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    variant: "forms.comboBox.inputInContainerSlot"
+  },
+  // Render loader after delay if filtering or loading
+  showLoading && (isOpen || loadingState === _loadingStates["default"].LOADING) && (0, _react2.jsx)(_.Loader, {
+    variant: "loader.withinInput"
+  }), (0, _react2.jsx)(_.Box, {
     as: "button",
     variant: "forms.comboBox.button",
     tabIndex: -1,
@@ -377,10 +397,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  }));
+  })));
   return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
     value: setActiveDescendant
-  }, (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
+  }, (0, _react2.jsx)(_.Box, (0, _reactAria.mergeProps)(containerProps, focusWithinProps), (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
     onBlur: function onBlur(e) {
       var _popoverRef$current;
       var blurIntoPopover = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.contains(e.relatedTarget);
@@ -420,7 +440,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     onClose: close,
     placement: placement,
     ref: popoverRef,
-    style: style
+    style: style,
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    }
   }, listbox), (0, _react2.jsx)(EmptyVisuallyHidden, null)));
 });
 CondensedMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({

package/lib/cjs/components/MultivaluesField/DefaultMultivaluesField.js

@@ -48,7 +48,7 @@ var _statusProp = require("../../utils/docUtils/statusProp");
 var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _react2 = require("@emotion/react");
 var _excluded = ["items"],
-  _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
+  _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -67,6 +67,7 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     helperText = otherProps.helperText,
     customInputProps = otherProps.inputProps,
     isDisabled = otherProps.isDisabled,
+    isFilteringDisabled = otherProps.isFilteringDisabled,
     isNotFlippable = otherProps.isNotFlippable,
     isReadOnly = otherProps.isReadOnly,
     isRequired = otherProps.isRequired,
@@ -121,26 +122,28 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       var _context;
       return !(0, _includes["default"])(_context = (0, _from["default"])(keys)).call(_context, item.key);
     }));
-    setFilterString('');
     if (onSelectionChange) onSelectionChange(keys);
   };
   var _useFilter = (0, _i18n.useFilter)({
       sensitivity: 'base'
     }),
     contains = _useFilter.contains;
+  var defaultFilter = function defaultFilter(nodes) {
+    var _context2;
+    var arr = (0, _filter["default"])(_context2 = (0, _from["default"])(nodes)).call(_context2, function (item) {
+      return contains(item.textValue, filterString);
+    });
+    return arr;
+  };
   var state = (0, _list.useListState)(_objectSpread(_objectSpread({}, otherProps), {}, {
-    filter: function filter(nodes) {
-      var _context2;
-      return (0, _filter["default"])(_context2 = (0, _from["default"])(nodes)).call(_context2, function (item) {
-        return contains(item.textValue, filterString);
-      });
-    },
     items: (0, _filter["default"])(items).call(items, function (_ref) {
       var key = _ref.key;
       return !(0, _includes["default"])(readOnlyKeys).call(readOnlyKeys, key);
     }),
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
+  }, !isFilteringDisabled && {
+    filter: defaultFilter
   }));
   var selectionManager = state.selectionManager;
   var filteredItems = (0, _react.useMemo)(function () {
@@ -149,6 +152,11 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   var close = function close() {
     return setIsOpen(false);
   };
+  var _useInputLoader = (0, _hooks.useInputLoader)({
+      loadingState: loadingState,
+      inputValue: filterString
+    }),
+    showLoading = _useInputLoader.showLoading;
   var closeBadgeRefs = (0, _react.useRef)([]);
   var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
@@ -280,7 +288,6 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
             var key = selectionManager.focusedKey;
             if (!(0, _includes["default"])(disabledKeys).call(disabledKeys, key)) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
-              setFilterString('');
             }
           } else if (hasCustomValue && !selectionManager.focusedKey) {
             var _key = e.target.value;
@@ -497,6 +504,14 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     },
     status: status
   });
+  var loader = (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    variant: "forms.comboBox.inputInContainerSlot"
+  },
+  // Render loader after delay if filtering or loading
+  showLoading && loadingState === _loadingStates["default"].LOADING && (0, _react2.jsx)(_.Loader, {
+    variant: "loader.withinInput"
+  }));
   return (0, _react2.jsx)(_MultivaluesContext.MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, (0, _react2.jsx)(_.Box, containerProps, (0, _react2.jsx)(_.TextField, (0, _extends2["default"])({
@@ -518,6 +533,7 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     },
     "aria-describedby": selectionManager.selectedKeys.size > 0 ? 'selectedKeysState' : 'emptyKeysState',
     slots: {
+      inContainer: loader,
       beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems && (0, _react2.jsx)(_.Box, {
         as: "ul",
         isRow: true,

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -24,8 +24,8 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.OnLoadPrev = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.CondensedWithCustomText = exports.CondensedAsyncLoading = exports.Condensed = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
-var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -695,13 +695,21 @@ var CondensedAsyncLoading = function CondensedAsyncLoading(args) {
     _useState30 = (0, _slicedToArray2["default"])(_useState29, 2),
     isOpen = _useState30[0],
     setIsOpen = _useState30[1];
-  var _useState31 = (0, _react.useState)(_loadingStates["default"].IDLE),
+  var _useState31 = (0, _react.useState)(_loadingStates["default"].LOADING),
     _useState32 = (0, _slicedToArray2["default"])(_useState31, 2),
     loadingState = _useState32[0],
     setLoadingState = _useState32[1];
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
+  (0, _react.useEffect)(function () {
+    var timer = (0, _setTimeout2["default"])(function () {
+      setLoadingState(_loadingStates["default"].IDLE);
+    }, 3000);
+    return function () {
+      return clearTimeout(timer);
+    }; // Cleanup the timer on unmount
+  }, []);
   var onLoadMore = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var _context3, _context4, _context5;
@@ -712,7 +720,7 @@ var CondensedAsyncLoading = function CondensedAsyncLoading(args) {
             setLoadingState(_loadingStates["default"].LOADING_MORE);
             _context6.next = 3;
             return new _promise["default"](function (resolve) {
-              return (0, _setTimeout2["default"])(resolve, 3000);
+              return (0, _setTimeout2["default"])(resolve, 5000);
             });
           case 3:
             newItems = (0, _map["default"])(_context3 = (0, _fill["default"])(_context4 = new Array(10)).call(_context4, {

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -1179,10 +1179,6 @@ test('list and button are keyboard accessible', function () {
     skipClick: true
   });
   expect(secondOption).toHaveFocus();
-  _userEvent["default"].type(secondOption, '{esc}', {
-    skipClick: true
-  });
-  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
 });
 test('popover closes on input blur', function () {
   getComponent({

package/lib/cjs/hooks/index.d.ts

@@ -8,6 +8,7 @@ export { default as useDevelopmentWarning } from './useDevelopmentWarning';
 export { default as useFallbackImage } from './useFallbackImage';
 export { default as useField } from './useField';
 export { default as useGetTheme } from './useGetTheme';
+export { default as useInputLoader } from './useInputLoader';
 export { default as useLabelHeight } from './useLabelHeight';
 export { default as useLocalOrForwardRef } from './useLocalOrForwardRef';
 export { default as useModalState } from './useModalState';

package/lib/cjs/hooks/index.js

@@ -65,6 +65,12 @@ _Object$defineProperty(exports, "useGetTheme", {
     return _useGetTheme["default"];
   }
 });
+_Object$defineProperty(exports, "useInputLoader", {
+  enumerable: true,
+  get: function get() {
+    return _useInputLoader["default"];
+  }
+});
 _Object$defineProperty(exports, "useLabelHeight", {
   enumerable: true,
   get: function get() {
@@ -171,6 +177,7 @@ var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWar
 var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));
 var _useField = _interopRequireDefault(require("./useField"));
 var _useGetTheme = _interopRequireDefault(require("./useGetTheme"));
+var _useInputLoader = _interopRequireDefault(require("./useInputLoader"));
 var _useLabelHeight = _interopRequireDefault(require("./useLabelHeight"));
 var _useLocalOrForwardRef = _interopRequireDefault(require("./useLocalOrForwardRef"));
 var _useModalState = _interopRequireDefault(require("./useModalState"));

package/lib/cjs/hooks/useInputLoader/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useInputLoader';

package/lib/cjs/hooks/useInputLoader/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useInputLoader["default"];
+  }
+});
+var _useInputLoader = _interopRequireDefault(require("./useInputLoader"));

package/lib/cjs/hooks/useInputLoader/useInputLoader.d.ts

@@ -0,0 +1,9 @@
+interface UseInputLoaderProps {
+    loadingState: string;
+    inputValue: string;
+}
+interface UseInputLoaderReturn {
+    showLoading: boolean;
+}
+declare const useInputLoader: ({ loadingState, inputValue }: UseInputLoaderProps) => UseInputLoaderReturn;
+export default useInputLoader;

package/lib/cjs/hooks/useInputLoader/useInputLoader.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _react = require("react");
+var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+var useInputLoader = function useInputLoader(_ref) {
+  var loadingState = _ref.loadingState,
+    inputValue = _ref.inputValue;
+  // START - minimum delay time for loading indicator = 500ms
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
+  var isLoading = loadingState === _loadingStates["default"].LOADING || loadingState === _loadingStates["default"].FILTERING;
+  var lastInputValue = (0, _react.useRef)(inputValue);
+  var timeout = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (isLoading && !showLoading) {
+      if (timeout.current === null) {
+        timeout.current = (0, _setTimeout2["default"])(function () {
+          setShowLoading(true);
+        }, 500);
+      }
+
+      // If user is typing, clear the timer and restart since it is a new request
+      if (inputValue !== lastInputValue.current) {
+        clearTimeout(timeout.current);
+        timeout.current = (0, _setTimeout2["default"])(function () {
+          setShowLoading(true);
+        }, 500);
+      }
+    } else if (!isLoading) {
+      // If loading is no longer happening, clear any timers and hide the loader
+      setShowLoading(false);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = null;
+      }
+    }
+    lastInputValue.current = inputValue;
+  }, [isLoading, showLoading, inputValue]);
+  return {
+    showLoading: showLoading
+  };
+  // END - minimum delay time for loading indicator = 500ms
+};
+var _default = useInputLoader;
+exports["default"] = _default;

package/lib/components/ComboBox/ComboBoxInput.js

@@ -7,20 +7,18 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "isDisabled", "isReadOnly", "isOpen", "loadingState", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
-import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { FocusRing, mergeProps } from 'react-aria';
 import { PressResponder, useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Box, Button, Icon, Loader, TextField } from '../..';
-import { usePropWarning } from '../../hooks';
+import { useInputLoader, usePropWarning } from '../../hooks';
 import useGetTheme from '../../hooks/useGetTheme';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { ariaAttributesBasePropTypes } from '../../utils/docUtils/ariaAttributes';
@@ -63,41 +61,11 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
-
-  // START - minimum delay time for loading indicator = 500ms
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showLoading = _useState2[0],
-    setShowLoading = _useState2[1];
-  var isLoading = loadingState === loadingStates.LOADING || loadingState === loadingStates.FILTERING;
-  var inputValue = inputProps.value;
-  var lastInputValue = useRef(inputValue);
-  var timeout = useRef(null);
-  useEffect(function () {
-    if (isLoading && !showLoading) {
-      if (timeout.current === null) {
-        timeout.current = _setTimeout(function () {
-          setShowLoading(true);
-        }, 500);
-      }
-
-      // If user is typing, clear the timer and restart since it is a new request
-      if (inputValue !== lastInputValue.current) {
-        clearTimeout(timeout.current);
-        timeout.current = _setTimeout(function () {
-          setShowLoading(true);
-        }, 500);
-      }
-    } else if (!isLoading) {
-      // If loading is no longer happening, clear any timers and hide the loader
-      setShowLoading(false);
-      clearTimeout(timeout.current);
-      timeout.current = null;
-    }
-    lastInputValue.current = inputValue;
-  }, [isLoading, showLoading, inputValue]);
-  // END - minimum delay time for loading indicator = 500ms
-
+  var _useInputLoader = useInputLoader({
+      loadingState: loadingState,
+      inputValue: inputProps.value
+    }),
+    showLoading = _useInputLoader.showLoading;
   usePropWarning(props, 'disabled', 'isDisabled');
   var button = !isReadOnly && ___EmotionJSX(Box, {
     isRow: true,

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -9,27 +9,28 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "filter", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _flatMapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat-map";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { DismissButton, FocusScope, useOverlayPosition } from 'react-aria';
+import { DismissButton, FocusScope, mergeProps, useOverlayPosition } from 'react-aria';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useFilter } from '@react-aria/i18n';
+import { useFocusWithin } from '@react-aria/interactions';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Box, Button, Icon, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { Box, Button, Icon, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { usePropWarning } from '../../hooks';
+import { useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -45,12 +46,14 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$disabledKeys = props.disabledKeys,
     disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
     containerProps = props.containerProps,
+    filter = _filterInstanceProperty(props),
     hasAutoFocus = props.hasAutoFocus,
     hasNoSelectAll = props.hasNoSelectAll,
     hasNoStatusIndicator = props.hasNoStatusIndicator,
     helperText = props.helperText,
     customInputProps = props.inputProps,
     isDisabled = props.isDisabled,
+    isFilteringDisabled = props.isFilteringDisabled,
     isNotFlippable = props.isNotFlippable,
     isReadOnly = props.isReadOnly,
     isRequired = props.isRequired,
@@ -82,15 +85,27 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isOpen = _useState4[0],
     setIsOpen = _useState4[1];
-  var _useState5 = useState(''),
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    activeDescendant = _useState6[0],
-    setActiveDescendant = _useState6[1];
+    hasFocusWithin = _useState6[0],
+    setFocusWithin = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeDescendant = _useState8[0],
+    setActiveDescendant = _useState8[1];
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
+  var _useFocusWithin = useFocusWithin({
+      onFocusWithinChange: setFocusWithin
+    }),
+    focusWithinProps = _useFocusWithin.focusWithinProps;
+  var _useInputLoader = useInputLoader({
+      loadingState: loadingState,
+      inputValue: filterString
+    }),
+    showLoading = _useInputLoader.showLoading;
   var toggleItems = function toggleItems(keys) {
-    setFilterString('');
     if (onSelectionChange) onSelectionChange(keys);
   };
   var _useFilter = useFilter({
@@ -119,14 +134,17 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
   var state = useListState(_objectSpread(_objectSpread({}, props), {}, {
-    filter: filterNodesWithChildren,
     items: items,
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
+  }, !isFilteringDisabled && {
+    filter: filter || filterNodesWithChildren
   }));
   var selectionManager = state.selectionManager;
   var close = function close() {
-    return setIsOpen(false);
+    if (!hasFocusWithin) {
+      setIsOpen(false);
+    }
   };
 
   /* istanbul ignore next */
@@ -165,10 +183,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    menuWidth = _useState8[0],
-    setMenuWidth = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    menuWidth = _useState10[0],
+    setMenuWidth = _useState10[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -205,10 +223,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
             var key = selectionManager.focusedKey;
             if (!_includesInstanceProperty(disabledKeys).call(disabledKeys, key)) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
-              setFilterString('');
             }
-          } else {
-            setFilterString('');
           }
           break;
         }
@@ -227,7 +242,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'Escape':
         {
           setFilterString('');
-          close();
+          setIsOpen(false);
           break;
         }
       default:
@@ -241,12 +256,13 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     if ((_inputWrapperRef$curr = inputWrapperRef.current) !== null && _inputWrapperRef$curr !== void 0 && _inputWrapperRef$curr.contains(relatedTarget) || (_listBoxRef$current = listBoxRef.current) !== null && _listBoxRef$current !== void 0 && _listBoxRef$current.contains(relatedTarget) || buttonRef.current === relatedTarget) {
       return;
     }
+    setFilterString('');
     setIsOpen(false);
   };
-  var _useState9 = useState('Select All'),
-    _useState10 = _slicedToArray(_useState9, 2),
-    selectionState = _useState10[0],
-    setSelectionState = _useState10[1];
+  var _useState11 = useState('Select All'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectionState = _useState12[0],
+    setSelectionState = _useState12[1];
   var arrayItems = _Array$from(items);
   var itemCount = _reduceInstanceProperty(arrayItems).call(arrayItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
@@ -297,10 +313,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     loadingState: loadingState,
     isLoading: loadingState === loadingStates.LOADING_MORE,
     "aria-label": "List of options",
-    isCondensed: mode === 'condensed',
-    onBlur: function onBlur(e) {
-      return handleBlur(e);
-    }
+    isCondensed: mode === 'condensed'
   }, overlayProps))), ___EmotionJSX(DismissButton, {
     onDismiss: close
   }));
@@ -349,10 +362,17 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       setIsOpen(true);
       inputRef.current.focus();
     } else {
-      close();
+      setIsOpen(false);
     }
   };
   var button = ___EmotionJSX(Box, {
+    isRow: true,
+    variant: "forms.comboBox.inputInContainerSlot"
+  },
+  // Render loader after delay if filtering or loading
+  showLoading && (isOpen || loadingState === loadingStates.LOADING) && ___EmotionJSX(Loader, {
+    variant: "loader.withinInput"
+  }), ___EmotionJSX(Box, {
     as: "button",
     variant: "forms.comboBox.button",
     tabIndex: -1,
@@ -365,10 +385,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  }));
+  })));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
-  }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
+  }, ___EmotionJSX(Box, mergeProps(containerProps, focusWithinProps), ___EmotionJSX(TextField, _extends({
     onBlur: function onBlur(e) {
       var _popoverRef$current;
       var blurIntoPopover = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.contains(e.relatedTarget);
@@ -408,7 +428,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onClose: close,
     placement: placement,
     ref: popoverRef,
-    style: style
+    style: style,
+    onBlur: function onBlur(e) {
+      return handleBlur(e);
+    }
   }, listbox), ___EmotionJSX(EmptyVisuallyHidden, null)));
 });
 CondensedMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread({

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["items"],
-  _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
+  _excluded2 = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isFilteringDisabled", "isNotFlippable", "isReadOnly", "isRequired", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "readOnlyKeys", "selectedKeys", "scrollBoxProps", "status"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context13, _context14; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context13 = ownKeys(Object(source), !0)).call(_context13, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context14 = ownKeys(Object(source))).call(_context14, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -30,9 +30,9 @@ import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
-import { Badge, Box, Icon, IconButton, PopoverContainer, ScrollBox, Text, TextField } from '../..';
+import { Badge, Box, Icon, IconButton, Loader, PopoverContainer, ScrollBox, Text, TextField } from '../..';
 import { MultivaluesContext } from '../../context/MultivaluesContext';
-import { usePropWarning } from '../../hooks';
+import { useInputLoader, usePropWarning } from '../../hooks';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -55,6 +55,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     helperText = otherProps.helperText,
     customInputProps = otherProps.inputProps,
     isDisabled = otherProps.isDisabled,
+    isFilteringDisabled = otherProps.isFilteringDisabled,
     isNotFlippable = otherProps.isNotFlippable,
     isReadOnly = otherProps.isReadOnly,
     isRequired = otherProps.isRequired,
@@ -109,26 +110,28 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       var _context;
       return !_includesInstanceProperty(_context = _Array$from(keys)).call(_context, item.key);
     }));
-    setFilterString('');
     if (onSelectionChange) onSelectionChange(keys);
   };
   var _useFilter = useFilter({
       sensitivity: 'base'
     }),
     contains = _useFilter.contains;
+  var defaultFilter = function defaultFilter(nodes) {
+    var _context2;
+    var arr = _filterInstanceProperty(_context2 = _Array$from(nodes)).call(_context2, function (item) {
+      return contains(item.textValue, filterString);
+    });
+    return arr;
+  };
   var state = useListState(_objectSpread(_objectSpread({}, otherProps), {}, {
-    filter: function filter(nodes) {
-      var _context2;
-      return _filterInstanceProperty(_context2 = _Array$from(nodes)).call(_context2, function (item) {
-        return contains(item.textValue, filterString);
-      });
-    },
     items: _filterInstanceProperty(items).call(items, function (_ref) {
       var key = _ref.key;
       return !_includesInstanceProperty(readOnlyKeys).call(readOnlyKeys, key);
     }),
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
+  }, !isFilteringDisabled && {
+    filter: defaultFilter
   }));
   var selectionManager = state.selectionManager;
   var filteredItems = useMemo(function () {
@@ -137,6 +140,11 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   var close = function close() {
     return setIsOpen(false);
   };
+  var _useInputLoader = useInputLoader({
+      loadingState: loadingState,
+      inputValue: filterString
+    }),
+    showLoading = _useInputLoader.showLoading;
   var closeBadgeRefs = useRef([]);
   var inputWrapperRef = useRef();
   var inputRef = useRef();
@@ -268,7 +276,6 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
             var key = selectionManager.focusedKey;
             if (!_includesInstanceProperty(disabledKeys).call(disabledKeys, key)) {
               selectionManager.toggleSelection(selectionManager.focusedKey);
-              setFilterString('');
             }
           } else if (hasCustomValue && !selectionManager.focusedKey) {
             var _key = e.target.value;
@@ -485,6 +492,14 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     status: status
   });
+  var loader = ___EmotionJSX(Box, {
+    isRow: true,
+    variant: "forms.comboBox.inputInContainerSlot"
+  },
+  // Render loader after delay if filtering or loading
+  showLoading && loadingState === loadingStates.LOADING && ___EmotionJSX(Loader, {
+    variant: "loader.withinInput"
+  }));
   return ___EmotionJSX(MultivaluesContext.Provider, {
     value: setActiveDescendant
   }, ___EmotionJSX(Box, containerProps, ___EmotionJSX(TextField, _extends({
@@ -506,6 +521,7 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     "aria-describedby": selectionManager.selectedKeys.size > 0 ? 'selectedKeysState' : 'emptyKeysState',
     slots: {
+      inContainer: loader,
       beforeInput: ___EmotionJSX(React.Fragment, null, readOnlyItems && ___EmotionJSX(Box, {
         as: "ul",
         isRow: true,

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -20,12 +20,12 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context19; _forEachInstanceProperty(_context19 = ["next", "throw", "return"]).call(_context19, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context20; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context20 = this.tryEntries).call(_context20, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
-import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context17, _context18; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context17 = ownKeys(Object(source), !0)).call(_context17, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context18 = ownKeys(Object(source))).call(_context18, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, Item, MultivaluesField, OverlayProvider, Section } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
@@ -673,13 +673,21 @@ export var CondensedAsyncLoading = function CondensedAsyncLoading(args) {
     _useState30 = _slicedToArray(_useState29, 2),
     isOpen = _useState30[0],
     setIsOpen = _useState30[1];
-  var _useState31 = useState(loadingStates.IDLE),
+  var _useState31 = useState(loadingStates.LOADING),
     _useState32 = _slicedToArray(_useState31, 2),
     loadingState = _useState32[0],
     setLoadingState = _useState32[1];
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };
+  useEffect(function () {
+    var timer = _setTimeout(function () {
+      setLoadingState(loadingStates.IDLE);
+    }, 3000);
+    return function () {
+      return clearTimeout(timer);
+    }; // Cleanup the timer on unmount
+  }, []);
   var onLoadMore = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var _context3, _context4, _context5;
@@ -690,7 +698,7 @@ export var CondensedAsyncLoading = function CondensedAsyncLoading(args) {
             setLoadingState(loadingStates.LOADING_MORE);
             _context6.next = 3;
             return new _Promise(function (resolve) {
-              return _setTimeout(resolve, 3000);
+              return _setTimeout(resolve, 5000);
             });
           case 3:
             newItems = _mapInstanceProperty(_context3 = _fillInstanceProperty(_context4 = new Array(10)).call(_context4, {

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -1172,10 +1172,6 @@ test('list and button are keyboard accessible', function () {
     skipClick: true
   });
   expect(secondOption).toHaveFocus();
-  userEvent.type(secondOption, '{esc}', {
-    skipClick: true
-  });
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 });
 test('popover closes on input blur', function () {
   getComponent({

package/lib/hooks/index.js

@@ -8,6 +8,7 @@ export { default as useDevelopmentWarning } from './useDevelopmentWarning';
 export { default as useFallbackImage } from './useFallbackImage';
 export { default as useField } from './useField';
 export { default as useGetTheme } from './useGetTheme';
+export { default as useInputLoader } from './useInputLoader';
 export { default as useLabelHeight } from './useLabelHeight';
 export { default as useLocalOrForwardRef } from './useLocalOrForwardRef';
 export { default as useModalState } from './useModalState';

package/lib/hooks/useInputLoader/index.js

@@ -0,0 +1 @@
+export { default } from './useInputLoader';

package/lib/hooks/useInputLoader/useInputLoader.js

@@ -0,0 +1,47 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import { useEffect, useRef, useState } from 'react';
+import loadingStates from '../../utils/devUtils/constants/loadingStates';
+var useInputLoader = function useInputLoader(_ref) {
+  var loadingState = _ref.loadingState,
+    inputValue = _ref.inputValue;
+  // START - minimum delay time for loading indicator = 500ms
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLoading = _useState2[0],
+    setShowLoading = _useState2[1];
+  var isLoading = loadingState === loadingStates.LOADING || loadingState === loadingStates.FILTERING;
+  var lastInputValue = useRef(inputValue);
+  var timeout = useRef(null);
+  useEffect(function () {
+    if (isLoading && !showLoading) {
+      if (timeout.current === null) {
+        timeout.current = _setTimeout(function () {
+          setShowLoading(true);
+        }, 500);
+      }
+
+      // If user is typing, clear the timer and restart since it is a new request
+      if (inputValue !== lastInputValue.current) {
+        clearTimeout(timeout.current);
+        timeout.current = _setTimeout(function () {
+          setShowLoading(true);
+        }, 500);
+      }
+    } else if (!isLoading) {
+      // If loading is no longer happening, clear any timers and hide the loader
+      setShowLoading(false);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = null;
+      }
+    }
+    lastInputValue.current = inputValue;
+  }, [isLoading, showLoading, inputValue]);
+  return {
+    showLoading: showLoading
+  };
+  // END - minimum delay time for loading indicator = 500ms
+};
+
+export default useInputLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.130.2-alpha.2",
+  "version": "2.130.2-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",