downshift 9.2.0 → 9.3.1

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}

@@ -1917,54 +1917,6 @@ var defaultStateValues$1 = {
 
 // istanbul ignore next
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-
-// istanbul ignore next
-var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
-? function useElementIds(_ref) {
-  var id = _ref.id,
-    labelId = _ref.labelId,
-    menuId = _ref.menuId,
-    getItemId = _ref.getItemId,
-    toggleButtonId = _ref.toggleButtonId,
-    inputId = _ref.inputId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React__namespace.useId();
-  if (!id) {
-    id = reactId;
-  }
-  var elementIds = React__namespace.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-} : function useElementIds(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
-    labelId = _ref2.labelId,
-    menuId = _ref2.menuId,
-    getItemId = _ref2.getItemId,
-    toggleButtonId = _ref2.toggleButtonId,
-    inputId = _ref2.inputId;
-  var elementIds = React__namespace.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-};
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
@@ -2127,13 +2079,13 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-function useScrollIntoView(_ref3) {
-  var highlightedIndex = _ref3.highlightedIndex,
-    isOpen = _ref3.isOpen,
-    itemRefs = _ref3.itemRefs,
-    getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
-    menuElement = _ref3.menuElement,
-    scrollIntoViewProp = _ref3.scrollIntoView;
+function useScrollIntoView(_ref) {
+  var highlightedIndex = _ref.highlightedIndex,
+    isOpen = _ref.isOpen,
+    itemRefs = _ref.itemRefs,
+    getItemNodeFromIndex = _ref.getItemNodeFromIndex,
+    menuElement = _ref.menuElement,
+    scrollIntoViewProp = _ref.scrollIntoView;
   // used not to scroll on highlight by mouse.
   var shouldScrollRef = React__namespace.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -2155,9 +2107,9 @@ function useScrollIntoView(_ref3) {
 var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref4) {
-    var props = _ref4.props,
-      state = _ref4.state;
+  useControlPropsValidator = function useControlPropsValidator(_ref2) {
+    var props = _ref2.props,
+      state = _ref2.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React__namespace.useRef(props);
     var isInitialMount = useIsInitialMount();
@@ -2480,6 +2432,56 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* eslint-enable complexity */
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId$1 = React__namespace['useId'];
+var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
+function useElementIdsR18$1(_ref) {
+  var id = _ref.id,
+    labelId = _ref.labelId,
+    menuId = _ref.menuId,
+    getItemId = _ref.getItemId,
+    toggleButtonId = _ref.toggleButtonId,
+    inputId = _ref.inputId;
+  var reactId = "downshift-" + reactUseId$1();
+  if (!id) {
+    id = reactId;
+  }
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : id + "-label",
+      menuId: menuId != null ? menuId : id + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
+      inputId: inputId != null ? inputId : id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
+}
+function useElementIdsLegacy$1(_ref2) {
+  var id = _ref2.id,
+    labelId = _ref2.labelId,
+    menuId = _ref2.menuId,
+    getItemId = _ref2.getItemId,
+    toggleButtonId = _ref2.toggleButtonId,
+    inputId = _ref2.inputId;
+  var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : baseId + "-label",
+      menuId: menuId != null ? menuId : baseId + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return baseId + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
+      inputId: inputId != null ? inputId : baseId + "-input"
+    };
+  }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
+  return elementIds;
+}
+
 var _excluded$3 = ["onClick"],
   _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
   _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -4051,38 +4053,44 @@ function useTagGroupReducer(state, _props, action) {
   return _extends({}, state, changes);
 }
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId = React__namespace['useId'];
+
 // istanbul ignore next
-var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
-? useElementIdsR18 : useElementIdsLegacy;
+var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
 function useElementIdsR18(_ref) {
   var id = _ref.id,
     tagGroupId = _ref.tagGroupId,
     getTagId = _ref.getTagId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React__namespace.useId();
+  var reactId = "downshift-" + reactUseId();
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React__namespace.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return id + "-tag-" + index;
+      }
+    };
+  }, [getTagId, id, tagGroupId]);
+  return elementIds;
 }
 function useElementIdsLegacy(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
+  var id = _ref2.id,
     getTagId = _ref2.getTagId,
     tagGroupId = _ref2.tagGroupId;
-  var elementIdsRef = React__namespace.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return baseId + "-tag-" + index;
+      }
+    };
+  }, [getTagId, baseId, tagGroupId]);
+  return elementIds;
 }
 
 function getInitialState(props) {

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

@@ -1895,54 +1895,6 @@ var defaultStateValues$1 = {
 
 // istanbul ignore next
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-// istanbul ignore next
-var useElementIds$1 = 'useId' in React // Avoid conditional useId call
-? function useElementIds(_ref) {
-  var id = _ref.id,
-    labelId = _ref.labelId,
-    menuId = _ref.menuId,
-    getItemId = _ref.getItemId,
-    toggleButtonId = _ref.toggleButtonId,
-    inputId = _ref.inputId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React.useId();
-  if (!id) {
-    id = reactId;
-  }
-  var elementIds = React.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-} : function useElementIds(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
-    labelId = _ref2.labelId,
-    menuId = _ref2.menuId,
-    getItemId = _ref2.getItemId,
-    toggleButtonId = _ref2.toggleButtonId,
-    inputId = _ref2.inputId;
-  var elementIds = React.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-};
 function isAcceptedCharacterKey(key) {
   return /^\S{1}$/.test(key);
 }
@@ -2105,13 +2057,13 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-function useScrollIntoView(_ref3) {
-  var highlightedIndex = _ref3.highlightedIndex,
-    isOpen = _ref3.isOpen,
-    itemRefs = _ref3.itemRefs,
-    getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
-    menuElement = _ref3.menuElement,
-    scrollIntoViewProp = _ref3.scrollIntoView;
+function useScrollIntoView(_ref) {
+  var highlightedIndex = _ref.highlightedIndex,
+    isOpen = _ref.isOpen,
+    itemRefs = _ref.itemRefs,
+    getItemNodeFromIndex = _ref.getItemNodeFromIndex,
+    menuElement = _ref.menuElement,
+    scrollIntoViewProp = _ref.scrollIntoView;
   // used not to scroll on highlight by mouse.
   var shouldScrollRef = React.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -2133,9 +2085,9 @@ function useScrollIntoView(_ref3) {
 var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref4) {
-    var props = _ref4.props,
-      state = _ref4.state;
+  useControlPropsValidator = function useControlPropsValidator(_ref2) {
+    var props = _ref2.props,
+      state = _ref2.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React.useRef(props);
     var isInitialMount = useIsInitialMount();
@@ -2458,6 +2410,56 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* eslint-enable complexity */
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId$1 = React['useId'];
+var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
+function useElementIdsR18$1(_ref) {
+  var id = _ref.id,
+    labelId = _ref.labelId,
+    menuId = _ref.menuId,
+    getItemId = _ref.getItemId,
+    toggleButtonId = _ref.toggleButtonId,
+    inputId = _ref.inputId;
+  var reactId = "downshift-" + reactUseId$1();
+  if (!id) {
+    id = reactId;
+  }
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : id + "-label",
+      menuId: menuId != null ? menuId : id + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
+      inputId: inputId != null ? inputId : id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
+}
+function useElementIdsLegacy$1(_ref2) {
+  var id = _ref2.id,
+    labelId = _ref2.labelId,
+    menuId = _ref2.menuId,
+    getItemId = _ref2.getItemId,
+    toggleButtonId = _ref2.toggleButtonId,
+    inputId = _ref2.inputId;
+  var baseIdRef = React.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : baseId + "-label",
+      menuId: menuId != null ? menuId : baseId + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return baseId + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
+      inputId: inputId != null ? inputId : baseId + "-input"
+    };
+  }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
+  return elementIds;
+}
+
 var _excluded$3 = ["onClick"],
   _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
   _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -4029,38 +4031,44 @@ function useTagGroupReducer(state, _props, action) {
   return _extends({}, state, changes);
 }
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId = React['useId'];
+
 // istanbul ignore next
-var useElementIds = 'useId' in React // Avoid conditional useId call
-? useElementIdsR18 : useElementIdsLegacy;
+var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
 function useElementIdsR18(_ref) {
   var id = _ref.id,
     tagGroupId = _ref.tagGroupId,
     getTagId = _ref.getTagId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React.useId();
+  var reactId = "downshift-" + reactUseId();
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return id + "-tag-" + index;
+      }
+    };
+  }, [getTagId, id, tagGroupId]);
+  return elementIds;
 }
 function useElementIdsLegacy(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
+  var id = _ref2.id,
     getTagId = _ref2.getTagId,
     tagGroupId = _ref2.tagGroupId;
-  var elementIdsRef = React.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var baseIdRef = React.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return baseId + "-tag-" + index;
+      }
+    };
+  }, [getTagId, baseId, tagGroupId]);
+  return elementIds;
 }
 
 function getInitialState(props) {

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

@@ -1805,54 +1805,6 @@ var defaultStateValues$1 = {
 
 // istanbul ignore next
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
-
-// istanbul ignore next
-var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
-? function useElementIds(_ref) {
-  var id = _ref.id,
-    labelId = _ref.labelId,
-    menuId = _ref.menuId,
-    getItemId = _ref.getItemId,
-    toggleButtonId = _ref.toggleButtonId,
-    inputId = _ref.inputId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React__namespace.useId();
-  if (!id) {
-    id = reactId;
-  }
-  var elementIds = React__namespace.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-} : function useElementIds(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
-    labelId = _ref2.labelId,
-    menuId = _ref2.menuId,
-    getItemId = _ref2.getItemId,
-    toggleButtonId = _ref2.toggleButtonId,
-    inputId = _ref2.inputId;
-  var elementIds = React__namespace.useMemo(function () {
-    return {
-      labelId: labelId || id + "-label",
-      menuId: menuId || id + "-menu",
-      getItemId: getItemId || function (index) {
-        return id + "-item-" + index;
-      },
-      toggleButtonId: toggleButtonId || id + "-toggle-button",
-      inputId: inputId || id + "-input"
-    };
-  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
-  return elementIds;
-};
 function getInitialState$3(props) {
   var selectedItem = getInitialValue$1(props, 'selectedItem', defaultStateValues$1);
   var isOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
@@ -1977,13 +1929,13 @@ if (process.env.NODE_ENV !== 'production') {
     return setGetterPropCallInfo;
   };
 }
-function useScrollIntoView(_ref3) {
-  var highlightedIndex = _ref3.highlightedIndex,
-    isOpen = _ref3.isOpen,
-    itemRefs = _ref3.itemRefs,
-    getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
-    menuElement = _ref3.menuElement,
-    scrollIntoViewProp = _ref3.scrollIntoView;
+function useScrollIntoView(_ref) {
+  var highlightedIndex = _ref.highlightedIndex,
+    isOpen = _ref.isOpen,
+    itemRefs = _ref.itemRefs,
+    getItemNodeFromIndex = _ref.getItemNodeFromIndex,
+    menuElement = _ref.menuElement,
+    scrollIntoViewProp = _ref.scrollIntoView;
   // used not to scroll on highlight by mouse.
   var shouldScrollRef = React__namespace.useRef(true);
   // Scroll on highlighted item if change comes from keyboard.
@@ -2005,9 +1957,9 @@ function useScrollIntoView(_ref3) {
 var useControlPropsValidator = noop;
 /* istanbul ignore next */
 if (process.env.NODE_ENV !== 'production') {
-  useControlPropsValidator = function useControlPropsValidator(_ref4) {
-    var props = _ref4.props,
-      state = _ref4.state;
+  useControlPropsValidator = function useControlPropsValidator(_ref2) {
+    var props = _ref2.props,
+      state = _ref2.state;
     // used for checking when props are moving from controlled to uncontrolled.
     var prevPropsRef = React__namespace.useRef(props);
     var isInitialMount = useIsInitialMount();
@@ -2330,6 +2282,56 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* eslint-enable complexity */
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId$1 = React__namespace['useId'];
+var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
+function useElementIdsR18$1(_ref) {
+  var id = _ref.id,
+    labelId = _ref.labelId,
+    menuId = _ref.menuId,
+    getItemId = _ref.getItemId,
+    toggleButtonId = _ref.toggleButtonId,
+    inputId = _ref.inputId;
+  var reactId = "downshift-" + reactUseId$1();
+  if (!id) {
+    id = reactId;
+  }
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : id + "-label",
+      menuId: menuId != null ? menuId : id + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return id + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
+      inputId: inputId != null ? inputId : id + "-input"
+    };
+  }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
+  return elementIds;
+}
+function useElementIdsLegacy$1(_ref2) {
+  var id = _ref2.id,
+    labelId = _ref2.labelId,
+    menuId = _ref2.menuId,
+    getItemId = _ref2.getItemId,
+    toggleButtonId = _ref2.toggleButtonId,
+    inputId = _ref2.inputId;
+  var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      labelId: labelId != null ? labelId : baseId + "-label",
+      menuId: menuId != null ? menuId : baseId + "-menu",
+      getItemId: getItemId != null ? getItemId : function (index) {
+        return baseId + "-item-" + index;
+      },
+      toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
+      inputId: inputId != null ? inputId : baseId + "-input"
+    };
+  }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
+  return elementIds;
+}
+
 var _excluded$3 = ["onClick"],
   _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
   _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -3901,38 +3903,44 @@ function useTagGroupReducer(state, _props, action) {
   return _extends({}, state, changes);
 }
 
+// eslint-disable-next-line @typescript-eslint/dot-notation
+var reactUseId = React__namespace['useId'];
+
 // istanbul ignore next
-var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
-? useElementIdsR18 : useElementIdsLegacy;
+var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
 function useElementIdsR18(_ref) {
   var id = _ref.id,
     tagGroupId = _ref.tagGroupId,
     getTagId = _ref.getTagId;
-  // Avoid conditional useId call
-  var reactId = "downshift-" + React__namespace.useId();
+  var reactId = "downshift-" + reactUseId();
   if (!id) {
     id = reactId;
   }
-  var elementIdsRef = React__namespace.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return id + "-tag-" + index;
+      }
+    };
+  }, [getTagId, id, tagGroupId]);
+  return elementIds;
 }
 function useElementIdsLegacy(_ref2) {
-  var _ref2$id = _ref2.id,
-    id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
+  var id = _ref2.id,
     getTagId = _ref2.getTagId,
     tagGroupId = _ref2.tagGroupId;
-  var elementIdsRef = React__namespace.useRef({
-    tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
-    getTagId: getTagId != null ? getTagId : function (index) {
-      return id + "-tag-" + index;
-    }
-  });
-  return elementIdsRef.current;
+  var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
+  var baseId = baseIdRef.current;
+  var elementIds = React__namespace.useMemo(function () {
+    return {
+      tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
+      getTagId: getTagId != null ? getTagId : function (index) {
+        return baseId + "-tag-" + index;
+      }
+    };
+  }, [getTagId, baseId, tagGroupId]);
+  return elementIds;
 }
 
 function getInitialState(props) {