downshift 9.1.0-alpha.7 → 9.3.0

package/README.md

@@ -46,9 +46,8 @@ list below.
 
 - [useSelect][useselect-readme] for a custom select component.
 - [useCombobox][combobox-readme] for a combobox or autocomplete input.
-- [useMultipleSelection][multiple-selection-readme] for selecting multiple items
-  in a select or a combobox, as well as deleting items from selection or
-  navigating between the selected items.
+- [useTagGroup][tag-group-readme] for a tag group component. Also useful to
+  build a multiple selection combobox or select component with tags.
 
 The second solution is the `Downshift` component, which can also be used to
 create accessible combobox and select components, providing the logic in the
@@ -734,8 +733,8 @@ check could fail even if the ref is correctly forwarded to the root DOM
 component. In these cases, you can provide the object
 `{suppressRefError : true}` as the second argument to `getRootProps` to
 completely bypass the check.\
-**Please use it with extreme care and only if you are absolutely sure that the ref
-is correctly forwarded otherwise `Downshift` will unexpectedly fail.**\
+**Please use it with extreme care and only if you are absolutely sure that the
+ref is correctly forwarded otherwise `Downshift` will unexpectedly fail.**\
 See [#235](https://github.com/downshift-js/downshift/issues/235) for the
 discussion that lead to this.
 
@@ -1516,8 +1515,8 @@ MIT
   https://github.com/downshift-js/downshift/blob/master/src/hooks/useSelect
 [combobox-readme]:
   https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox
-[multiple-selection-readme]:
-  https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection
+[tag-group-readme]:
+  https://github.com/downshift-js/downshift/tree/master/src/hooks/useTagGroup
 [bundle-phobia-link]: https://bundlephobia.com/result?p=downshift@3.4.8
 [aria]: https://www.w3.org/TR/wai-aria-practices/
 [combobox-aria-example]:

package/dist/{downshift.cjs.js → downshift.cjs.cjs}

@@ -2312,11 +2312,11 @@ function getItemIndexByCharacterKey(_ref) {
     itemToString = _ref.itemToString,
     isItemDisabled = _ref.isItemDisabled;
   var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
-  for (var index = 0; index < items.length; index++) {
+  for (var _index = 0; _index < items.length; _index++) {
     // if we already have a search query in progress, we also consider the current highlighted item.
-    var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
-    var item = items[offsetIndex];
-    if (item !== undefined && itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(item, offsetIndex)) {
+    var offsetIndex = (_index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
+    var _item = items[offsetIndex];
+    if (_item !== undefined && itemToString(_item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(_item, offsetIndex)) {
       return offsetIndex;
     }
   }
@@ -4128,6 +4128,24 @@ function getMergedProps(userProps) {
   }, userProps);
 }
 
+/**
+ * Focuses the tag at activeIndex when it changes or when an item is removed.
+ */
+function useRovingTagFocus(activeIndex, itemsLength, getTagId) {
+  var itemRefs = React__namespace.useRef({});
+  var previousActiveIndexRef = React__namespace.useRef(activeIndex);
+  var previousItemsLengthRef = React__namespace.useRef(itemsLength);
+  React__namespace.useEffect(function () {
+    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === itemsLength + 1) {
+      var _itemRefs$current$get;
+      (_itemRefs$current$get = itemRefs.current[getTagId(activeIndex)]) == null || _itemRefs$current$get.focus();
+    }
+    previousActiveIndexRef.current = activeIndex;
+    previousItemsLengthRef.current = itemsLength;
+  }, [activeIndex, getTagId, itemsLength]);
+  return itemRefs;
+}
+
 var propTypes = {
   isItemDisabled: PropTypes.func
 };
@@ -4161,21 +4179,11 @@ var _useTagGroup = function useTagGroup(userProps) {
     id: props.id,
     tagGroupId: props.tagGroupId
   });
-  var itemRefs = React.useRef({});
-  var previousActiveIndexRef = React.useRef(activeIndex);
-  var previousItemsLengthRef = React.useRef(items.length);
 
   /* Effects */
 
   useAccessibleDescription((_props$environment = props.environment) == null ? void 0 : _props$environment.document, props.removeElementDescription);
-  React.useEffect(function () {
-    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === items.length + 1) {
-      var _itemRefs$current$ele;
-      (_itemRefs$current$ele = itemRefs.current[elementIds.getTagId(activeIndex)]) == null || _itemRefs$current$ele.focus();
-    }
-    previousActiveIndexRef.current = activeIndex;
-    previousItemsLengthRef.current = items.length;
-  }, [activeIndex, elementIds, items]);
+  var itemRefs = useRovingTagFocus(activeIndex, items.length, elementIds.getTagId);
 
   /* Getter functions */
 
@@ -4243,7 +4251,7 @@ var _useTagGroup = function useTagGroup(userProps) {
         itemRefs.current[tagId] = itemNode;
       }
     }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers$1(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
-  }, [dispatch, elementIds, latest]);
+  }, [dispatch, elementIds, latest, itemRefs]);
   var getTagRemoveProps = React.useCallback(function (options) {
     var index = options.index,
       onClick = options.onClick,

package/dist/{downshift.esm.js → downshift.esm.mjs}

@@ -2290,11 +2290,11 @@ function getItemIndexByCharacterKey(_ref) {
     itemToString = _ref.itemToString,
     isItemDisabled = _ref.isItemDisabled;
   var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
-  for (var index = 0; index < items.length; index++) {
+  for (var _index = 0; _index < items.length; _index++) {
     // if we already have a search query in progress, we also consider the current highlighted item.
-    var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
-    var item = items[offsetIndex];
-    if (item !== undefined && itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(item, offsetIndex)) {
+    var offsetIndex = (_index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
+    var _item = items[offsetIndex];
+    if (_item !== undefined && itemToString(_item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(_item, offsetIndex)) {
       return offsetIndex;
     }
   }
@@ -4106,6 +4106,24 @@ function getMergedProps(userProps) {
   }, userProps);
 }
 
+/**
+ * Focuses the tag at activeIndex when it changes or when an item is removed.
+ */
+function useRovingTagFocus(activeIndex, itemsLength, getTagId) {
+  var itemRefs = React.useRef({});
+  var previousActiveIndexRef = React.useRef(activeIndex);
+  var previousItemsLengthRef = React.useRef(itemsLength);
+  React.useEffect(function () {
+    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === itemsLength + 1) {
+      var _itemRefs$current$get;
+      (_itemRefs$current$get = itemRefs.current[getTagId(activeIndex)]) == null || _itemRefs$current$get.focus();
+    }
+    previousActiveIndexRef.current = activeIndex;
+    previousItemsLengthRef.current = itemsLength;
+  }, [activeIndex, getTagId, itemsLength]);
+  return itemRefs;
+}
+
 var propTypes = {
   isItemDisabled: PropTypes.func
 };
@@ -4139,21 +4157,11 @@ var _useTagGroup = function useTagGroup(userProps) {
     id: props.id,
     tagGroupId: props.tagGroupId
   });
-  var itemRefs = useRef({});
-  var previousActiveIndexRef = useRef(activeIndex);
-  var previousItemsLengthRef = useRef(items.length);
 
   /* Effects */
 
   useAccessibleDescription((_props$environment = props.environment) == null ? void 0 : _props$environment.document, props.removeElementDescription);
-  useEffect(function () {
-    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === items.length + 1) {
-      var _itemRefs$current$ele;
-      (_itemRefs$current$ele = itemRefs.current[elementIds.getTagId(activeIndex)]) == null || _itemRefs$current$ele.focus();
-    }
-    previousActiveIndexRef.current = activeIndex;
-    previousItemsLengthRef.current = items.length;
-  }, [activeIndex, elementIds, items]);
+  var itemRefs = useRovingTagFocus(activeIndex, items.length, elementIds.getTagId);
 
   /* Getter functions */
 
@@ -4221,7 +4229,7 @@ var _useTagGroup = function useTagGroup(userProps) {
         itemRefs.current[tagId] = itemNode;
       }
     }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers$1(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
-  }, [dispatch, elementIds, latest]);
+  }, [dispatch, elementIds, latest, itemRefs]);
   var getTagRemoveProps = useCallback(function (options) {
     var index = options.index,
       onClick = options.onClick,

package/dist/{downshift.native.cjs.js → downshift.native.cjs.cjs}

@@ -2162,11 +2162,11 @@ function getItemIndexByCharacterKey(_ref) {
     itemToString = _ref.itemToString,
     isItemDisabled = _ref.isItemDisabled;
   var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
-  for (var index = 0; index < items.length; index++) {
+  for (var _index = 0; _index < items.length; _index++) {
     // if we already have a search query in progress, we also consider the current highlighted item.
-    var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
-    var item = items[offsetIndex];
-    if (item !== undefined && itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(item, offsetIndex)) {
+    var offsetIndex = (_index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
+    var _item = items[offsetIndex];
+    if (_item !== undefined && itemToString(_item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(_item, offsetIndex)) {
       return offsetIndex;
     }
   }
@@ -3978,6 +3978,24 @@ function getMergedProps(userProps) {
   }, userProps);
 }
 
+/**
+ * Focuses the tag at activeIndex when it changes or when an item is removed.
+ */
+function useRovingTagFocus(activeIndex, itemsLength, getTagId) {
+  var itemRefs = React__namespace.useRef({});
+  var previousActiveIndexRef = React__namespace.useRef(activeIndex);
+  var previousItemsLengthRef = React__namespace.useRef(itemsLength);
+  React__namespace.useEffect(function () {
+    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === itemsLength + 1) {
+      var _itemRefs$current$get;
+      (_itemRefs$current$get = itemRefs.current[getTagId(activeIndex)]) == null || _itemRefs$current$get.focus();
+    }
+    previousActiveIndexRef.current = activeIndex;
+    previousItemsLengthRef.current = itemsLength;
+  }, [activeIndex, getTagId, itemsLength]);
+  return itemRefs;
+}
+
 var propTypes = {
   isItemDisabled: PropTypes.func
 };
@@ -4011,21 +4029,11 @@ var _useTagGroup = function useTagGroup(userProps) {
     id: props.id,
     tagGroupId: props.tagGroupId
   });
-  var itemRefs = React.useRef({});
-  var previousActiveIndexRef = React.useRef(activeIndex);
-  var previousItemsLengthRef = React.useRef(items.length);
 
   /* Effects */
 
   useAccessibleDescription((_props$environment = props.environment) == null ? void 0 : _props$environment.document, props.removeElementDescription);
-  React.useEffect(function () {
-    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === items.length + 1) {
-      var _itemRefs$current$ele;
-      (_itemRefs$current$ele = itemRefs.current[elementIds.getTagId(activeIndex)]) == null || _itemRefs$current$ele.focus();
-    }
-    previousActiveIndexRef.current = activeIndex;
-    previousItemsLengthRef.current = items.length;
-  }, [activeIndex, elementIds, items]);
+  var itemRefs = useRovingTagFocus(activeIndex, items.length, elementIds.getTagId);
 
   /* Getter functions */
 
@@ -4093,7 +4101,7 @@ var _useTagGroup = function useTagGroup(userProps) {
         itemRefs.current[tagId] = itemNode;
       }
     }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers$1(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
-  }, [dispatch, elementIds, latest]);
+  }, [dispatch, elementIds, latest, itemRefs]);
   var getTagRemoveProps = React.useCallback(function (options) {
     var index = options.index,
       onClick = options.onClick,

package/dist/{downshift.nativeweb.cjs.js → downshift.nativeweb.cjs.cjs}

@@ -2307,11 +2307,11 @@ function getItemIndexByCharacterKey(_ref) {
     itemToString = _ref.itemToString,
     isItemDisabled = _ref.isItemDisabled;
   var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
-  for (var index = 0; index < items.length; index++) {
+  for (var _index = 0; _index < items.length; _index++) {
     // if we already have a search query in progress, we also consider the current highlighted item.
-    var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
-    var item = items[offsetIndex];
-    if (item !== undefined && itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(item, offsetIndex)) {
+    var offsetIndex = (_index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
+    var _item = items[offsetIndex];
+    if (_item !== undefined && itemToString(_item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(_item, offsetIndex)) {
       return offsetIndex;
     }
   }
@@ -4111,6 +4111,24 @@ function getMergedProps(userProps) {
   }, userProps);
 }
 
+/**
+ * Focuses the tag at activeIndex when it changes or when an item is removed.
+ */
+function useRovingTagFocus(activeIndex, itemsLength, getTagId) {
+  var itemRefs = React__namespace.useRef({});
+  var previousActiveIndexRef = React__namespace.useRef(activeIndex);
+  var previousItemsLengthRef = React__namespace.useRef(itemsLength);
+  React__namespace.useEffect(function () {
+    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === itemsLength + 1) {
+      var _itemRefs$current$get;
+      (_itemRefs$current$get = itemRefs.current[getTagId(activeIndex)]) == null || _itemRefs$current$get.focus();
+    }
+    previousActiveIndexRef.current = activeIndex;
+    previousItemsLengthRef.current = itemsLength;
+  }, [activeIndex, getTagId, itemsLength]);
+  return itemRefs;
+}
+
 var propTypes = {
   isItemDisabled: PropTypes.func
 };
@@ -4144,21 +4162,11 @@ var _useTagGroup = function useTagGroup(userProps) {
     id: props.id,
     tagGroupId: props.tagGroupId
   });
-  var itemRefs = React.useRef({});
-  var previousActiveIndexRef = React.useRef(activeIndex);
-  var previousItemsLengthRef = React.useRef(items.length);
 
   /* Effects */
 
   useAccessibleDescription((_props$environment = props.environment) == null ? void 0 : _props$environment.document, props.removeElementDescription);
-  React.useEffect(function () {
-    if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === items.length + 1) {
-      var _itemRefs$current$ele;
-      (_itemRefs$current$ele = itemRefs.current[elementIds.getTagId(activeIndex)]) == null || _itemRefs$current$ele.focus();
-    }
-    previousActiveIndexRef.current = activeIndex;
-    previousItemsLengthRef.current = items.length;
-  }, [activeIndex, elementIds, items]);
+  var itemRefs = useRovingTagFocus(activeIndex, items.length, elementIds.getTagId);
 
   /* Getter functions */
 
@@ -4226,7 +4234,7 @@ var _useTagGroup = function useTagGroup(userProps) {
         itemRefs.current[tagId] = itemNode;
       }
     }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers$1(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
-  }, [dispatch, elementIds, latest]);
+  }, [dispatch, elementIds, latest, itemRefs]);
   var getTagRemoveProps = React.useCallback(function (options) {
     var index = options.index,
       onClick = options.onClick,

package/dist/downshift.umd.js

@@ -250,11 +250,11 @@
   	return reactIs_development$1;
   }
 
-  var hasRequiredReactIs;
+  var hasRequiredReactIs$1;
 
-  function requireReactIs () {
-  	if (hasRequiredReactIs) return reactIs$1.exports;
-  	hasRequiredReactIs = 1;
+  function requireReactIs$1 () {
+  	if (hasRequiredReactIs$1) return reactIs$1.exports;
+  	hasRequiredReactIs$1 = 1;
 
   	{
   	  reactIs$1.exports = requireReactIs_development$1();
@@ -407,9 +407,9 @@
   	var printWarning = function() {};
 
   	{
-  	  var ReactPropTypesSecret = requireReactPropTypesSecret();
+  	  var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
   	  var loggedTypeFailures = {};
-  	  var has = requireHas();
+  	  var has = /*@__PURE__*/ requireHas();
 
   	  printWarning = function(text) {
   	    var message = 'Warning: ' + text;
@@ -515,12 +515,12 @@
   	if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   	hasRequiredFactoryWithTypeCheckers = 1;
 
-  	var ReactIs = requireReactIs();
+  	var ReactIs = requireReactIs$1();
   	var assign = requireObjectAssign();
 
-  	var ReactPropTypesSecret = requireReactPropTypesSecret();
-  	var has = requireHas();
-  	var checkPropTypes = requireCheckPropTypes();
+  	var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
+  	var has = /*@__PURE__*/ requireHas();
+  	var checkPropTypes = /*@__PURE__*/ requireCheckPropTypes();
 
   	var printWarning = function() {};
 
@@ -1126,16 +1126,23 @@
    * LICENSE file in the root directory of this source tree.
    */
 
-  {
-    var ReactIs = requireReactIs();
+  var hasRequiredPropTypes;
 
-    // By explicitly using `prop-types` you are opting into new development behavior.
-    // http://fb.me/prop-types-in-prod
-    var throwOnDirectAccess = true;
-    propTypes$6.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+  function requirePropTypes () {
+  	if (hasRequiredPropTypes) return propTypes$6.exports;
+  	hasRequiredPropTypes = 1;
+  	{
+  	  var ReactIs = requireReactIs$1();
+
+  	  // By explicitly using `prop-types` you are opting into new development behavior.
+  	  // http://fb.me/prop-types-in-prod
+  	  var throwOnDirectAccess = true;
+  	  propTypes$6.exports = /*@__PURE__*/ requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+  	}
+  	return propTypes$6.exports;
   }
 
-  var propTypesExports = propTypes$6.exports;
+  var propTypesExports = /*@__PURE__*/ requirePropTypes();
   var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
 
   var reactIs = {exports: {}};
@@ -1369,11 +1376,19 @@
   	return reactIs_development;
   }
 
-  {
-    reactIs.exports = requireReactIs_development();
+  var hasRequiredReactIs;
+
+  function requireReactIs () {
+  	if (hasRequiredReactIs) return reactIs.exports;
+  	hasRequiredReactIs = 1;
+
+  	{
+  	  reactIs.exports = requireReactIs_development();
+  	}
+  	return reactIs.exports;
   }
 
-  var reactIsExports = reactIs.exports;
+  var reactIsExports = requireReactIs();
 
   var unknown = '__autocomplete_unknown__' ;
   var mouseUp = '__autocomplete_mouseup__' ;
@@ -3650,11 +3665,11 @@
       itemToString = _ref.itemToString,
       isItemDisabled = _ref.isItemDisabled;
     var lowerCasedKeysSoFar = keysSoFar.toLowerCase();
-    for (var index = 0; index < items.length; index++) {
+    for (var _index = 0; _index < items.length; _index++) {
       // if we already have a search query in progress, we also consider the current highlighted item.
-      var offsetIndex = (index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
-      var item = items[offsetIndex];
-      if (item !== undefined && itemToString(item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(item, offsetIndex)) {
+      var offsetIndex = (_index + highlightedIndex + (keysSoFar.length < 2 ? 1 : 0)) % items.length;
+      var _item = items[offsetIndex];
+      if (_item !== undefined && itemToString(_item).toLowerCase().startsWith(lowerCasedKeysSoFar) && !isItemDisabled(_item, offsetIndex)) {
         return offsetIndex;
       }
     }
@@ -5466,6 +5481,24 @@
     }, userProps);
   }
 
+  /**
+   * Focuses the tag at activeIndex when it changes or when an item is removed.
+   */
+  function useRovingTagFocus(activeIndex, itemsLength, getTagId) {
+    var itemRefs = React__namespace.useRef({});
+    var previousActiveIndexRef = React__namespace.useRef(activeIndex);
+    var previousItemsLengthRef = React__namespace.useRef(itemsLength);
+    React__namespace.useEffect(function () {
+      if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === itemsLength + 1) {
+        var _itemRefs$current$get;
+        (_itemRefs$current$get = itemRefs.current[getTagId(activeIndex)]) == null || _itemRefs$current$get.focus();
+      }
+      previousActiveIndexRef.current = activeIndex;
+      previousItemsLengthRef.current = itemsLength;
+    }, [activeIndex, getTagId, itemsLength]);
+    return itemRefs;
+  }
+
   var propTypes = {
     isItemDisabled: PropTypes.func
   };
@@ -5499,21 +5532,11 @@
       id: props.id,
       tagGroupId: props.tagGroupId
     });
-    var itemRefs = React.useRef({});
-    var previousActiveIndexRef = React.useRef(activeIndex);
-    var previousItemsLengthRef = React.useRef(items.length);
 
     /* Effects */
 
     useAccessibleDescription((_props$environment = props.environment) == null ? void 0 : _props$environment.document, props.removeElementDescription);
-    React.useEffect(function () {
-      if (activeIndex !== -1 && previousActiveIndexRef.current !== -1 && activeIndex !== previousActiveIndexRef.current || previousItemsLengthRef.current === items.length + 1) {
-        var _itemRefs$current$ele;
-        (_itemRefs$current$ele = itemRefs.current[elementIds.getTagId(activeIndex)]) == null || _itemRefs$current$ele.focus();
-      }
-      previousActiveIndexRef.current = activeIndex;
-      previousItemsLengthRef.current = items.length;
-    }, [activeIndex, elementIds, items]);
+    var itemRefs = useRovingTagFocus(activeIndex, items.length, elementIds.getTagId);
 
     /* Getter functions */
 
@@ -5581,7 +5604,7 @@
           itemRefs.current[tagId] = itemNode;
         }
       }), _extends2['aria-labelledby'] = tagId, _extends2.role = 'option', _extends2.id = tagId, _extends2.onClick = callAllEventHandlers$1(onClick, handleClick), _extends2.tabIndex = latestState.activeIndex === index ? 0 : -1, _extends2), rest);
-    }, [dispatch, elementIds, latest]);
+    }, [dispatch, elementIds, latest, itemRefs]);
     var getTagRemoveProps = React.useCallback(function (options) {
       var index = options.index,
         onClick = options.onClick,