downshift 9.3.0 → 9.3.2

package/dist/hooks/useCombobox/index.d.ts

@@ -15,7 +15,7 @@ declare function useCombobox(userProps?: {}): {
         onMouseDown: Function;
         'aria-disabled': boolean;
         'aria-selected': boolean;
-        id: any;
+        id: string;
         role: string;
     };
     getLabelProps: (labelProps: any) => any;
@@ -26,7 +26,7 @@ declare function useCombobox(userProps?: {}): {
     }, { suppressRefError }?: {
         suppressRefError?: boolean | undefined;
     }) => {
-        id: any;
+        id: string;
         role: string;
         'aria-labelledby': string | undefined;
         onMouseLeave: Function;
@@ -45,13 +45,13 @@ declare function useCombobox(userProps?: {}): {
     }) => {
         onChange: Function;
         onChangeText: Function;
-        'aria-activedescendant': any;
+        'aria-activedescendant': string;
         'aria-autocomplete': string;
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        'aria-labelledby': any;
+        'aria-labelledby': string | undefined;
         autoComplete: string;
-        id: any;
+        id: string;
         role: string;
         value: any;
     };
@@ -61,21 +61,21 @@ declare function useCombobox(userProps?: {}): {
         refKey?: string | undefined;
         ref: any;
     }) => {
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        id: any;
+        id: string;
         tabIndex: number;
     } | {
         onPress: Function;
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        id: any;
+        id: string;
         tabIndex: number;
     } | {
         onClick: Function;
-        'aria-controls': any;
+        'aria-controls': string;
         'aria-expanded': any;
-        id: any;
+        id: string;
         tabIndex: number;
     };
     toggleMenu: () => void;

package/dist/hooks/useSelect/index.d.ts

@@ -10,12 +10,12 @@ declare function useSelect(userProps?: {}): {
     }, { suppressRefError }?: {
         suppressRefError?: boolean | undefined;
     }) => {
-        'aria-activedescendant': any;
-        'aria-controls': any;
+        'aria-activedescendant': string;
+        'aria-controls': string;
         'aria-expanded': any;
         'aria-haspopup': string;
         'aria-labelledby': string | undefined;
-        id: any;
+        id: string;
         role: string;
         tabIndex: number;
         onBlur: Function;
@@ -23,8 +23,8 @@ declare function useSelect(userProps?: {}): {
     getLabelProps: ({ onClick, ...labelProps }?: {
         onClick: any;
     }) => {
-        id: any;
-        htmlFor: any;
+        id: string;
+        htmlFor: string;
         onClick: Function;
     };
     getMenuProps: ({ onMouseLeave, refKey, ref, ...rest }?: {
@@ -34,7 +34,7 @@ declare function useSelect(userProps?: {}): {
     }, { suppressRefError }?: {
         suppressRefError?: boolean | undefined;
     }) => {
-        id: any;
+        id: string;
         role: string;
         'aria-labelledby': string | undefined;
         onMouseLeave: Function;
@@ -52,7 +52,7 @@ declare function useSelect(userProps?: {}): {
     }) => {
         'aria-disabled': boolean;
         'aria-selected': boolean;
-        id: any;
+        id: string;
         role: string;
     };
     toggleMenu: () => void;

package/dist/hooks/useTagGroup/utils/index.d.ts

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-export { type UseElementIdsProps, type UseElementIdsReturnValue, useElementIds, } from './useElementIds';
+export { useElementIds } from './useElementIds';
 export { getInitialState } from './getInitialState';
 export { isStateEqual } from './isStateEqual';
 export { useAccessibleDescription, A11Y_DESCRIPTION_ELEMENT_ID, } from './useAccessibleDescription';

package/dist/hooks/useTagGroup/utils/useElementIds.d.ts

@@ -1,4 +1,11 @@
-import { UseTagGroupProps } from '../index.types';
-export type UseElementIdsProps = Pick<UseTagGroupProps<unknown>, 'id' | 'getTagId' | 'tagGroupId'>;
-export type UseElementIdsReturnValue = Required<Pick<UseTagGroupProps<unknown>, 'getTagId' | 'tagGroupId'>>;
+type UseElementIdsProps = {
+    id?: string;
+    tagGroupId?: string;
+    getTagId?: (index: number) => string;
+};
+type UseElementIdsReturnValue = {
+    tagGroupId: string;
+    getTagId: (index: number) => string;
+};
 export declare const useElementIds: (props: UseElementIdsProps) => UseElementIdsReturnValue;
+export {};

package/dist/hooks/utils.d.ts

@@ -23,33 +23,6 @@ export function useMouseAndTouchTracker(environment: Window, handleBlur: () => v
 };
 export function getHighlightedIndexOnOpen(props: any, state: any, offset: any): any;
 export function isAcceptedCharacterKey(key: any): boolean;
-export const useElementIds: (({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: {
-    id: any;
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-}) => {
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-}) | (({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: {
-    id?: string | undefined;
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-}) => {
-    labelId: any;
-    menuId: any;
-    getItemId: any;
-    toggleButtonId: any;
-    inputId: any;
-});
 /**
  * Handles selection on Enter / Alt + ArrowUp. Closes the menu and resets the highlighted index, unless there is a highlighted.
  * In that case, selects the item and resets to defaults for open state and highlighted idex.

package/dist/hooks/utils.dropdown/__tests__/useElementIds.legacy.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/utils.dropdown/__tests__/useElementIds.r18.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/utils.dropdown/useElementIds.d.ts

@@ -0,0 +1,18 @@
+type UseElementIdsProps = {
+    id?: string;
+    labelId?: string;
+    menuId?: string;
+    getItemId?: (index: number) => string;
+    toggleButtonId?: string;
+    inputId?: string;
+};
+type UseElementIdsReturnValue = {
+    labelId: string;
+    menuId: string;
+    getItemId: (index: number) => string;
+    toggleButtonId: string;
+    inputId: string;
+};
+export declare const useElementIds: typeof useElementIdsR18;
+declare function useElementIdsR18({ id, labelId, menuId, getItemId, toggleButtonId, inputId, }: UseElementIdsProps): UseElementIdsReturnValue;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "downshift",
-  "version": "9.3.0",
+  "version": "9.3.2",
   "description": "🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.",
   "main": "dist/downshift.cjs.cjs",
   "react-native": "dist/downshift.native.cjs.cjs",

package/preact/dist/downshift.cjs.cjs

@@ -1878,54 +1878,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);
 }
@@ -2088,13 +2040,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.
@@ -2116,9 +2068,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();
@@ -2441,6 +2393,57 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* eslint-enable complexity */
 
+// https://github.com/downshift-js/downshift/issues/1674#issuecomment-3924320872
+var SafeReact$1 = _extends({}, React__namespace);
+var reactUseId$1 = SafeReact$1.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"],
@@ -4012,38 +4015,45 @@ function useTagGroupReducer(state, _props, action) {
   return _extends({}, state, changes);
 }
 
+// https://github.com/downshift-js/downshift/issues/1674#issuecomment-3924320872
+var SafeReact = _extends({}, React__namespace);
+var reactUseId = SafeReact.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/preact/dist/downshift.esm.mjs

@@ -1856,54 +1856,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);
 }
@@ -2066,13 +2018,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.
@@ -2094,9 +2046,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();
@@ -2419,6 +2371,57 @@ function downshiftSelectReducer(state, props, action) {
 }
 /* eslint-enable complexity */
 
+// https://github.com/downshift-js/downshift/issues/1674#issuecomment-3924320872
+var SafeReact$1 = _extends({}, React);
+var reactUseId$1 = SafeReact$1.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"],
@@ -3990,38 +3993,45 @@ function useTagGroupReducer(state, _props, action) {
   return _extends({}, state, changes);
 }
 
+// https://github.com/downshift-js/downshift/issues/1674#issuecomment-3924320872
+var SafeReact = _extends({}, React);
+var reactUseId = SafeReact.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) {