downshift 9.2.0 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/README.md +6 -7
  2. package/dist/{downshift.cjs.js → downshift.cjs.cjs} +86 -78
  3. package/dist/{downshift.esm.js → downshift.esm.mjs} +86 -78
  4. package/dist/{downshift.native.cjs.js → downshift.native.cjs.cjs} +86 -78
  5. package/dist/{downshift.nativeweb.cjs.js → downshift.nativeweb.cjs.cjs} +86 -78
  6. package/dist/downshift.umd.js +121 -98
  7. package/dist/downshift.umd.js.map +1 -1
  8. package/dist/downshift.umd.min.js +1 -1
  9. package/dist/downshift.umd.min.js.map +1 -1
  10. package/dist/hooks/useCombobox/index.d.ts +12 -12
  11. package/dist/hooks/useSelect/index.d.ts +7 -7
  12. package/dist/hooks/useTagGroup/__tests__/utils/renderTagGroup.d.ts +1 -1
  13. package/dist/hooks/useTagGroup/utils/index.d.ts +1 -1
  14. package/dist/hooks/useTagGroup/utils/useElementIds.d.ts +10 -3
  15. package/dist/hooks/utils.d.ts +0 -27
  16. package/dist/hooks/utils.dropdown/__tests__/useElementIds.legacy.test.d.ts +1 -0
  17. package/dist/hooks/utils.dropdown/__tests__/useElementIds.r18.test.d.ts +1 -0
  18. package/dist/hooks/utils.dropdown/useElementIds.d.ts +18 -0
  19. package/package.json +46 -44
  20. package/preact/dist/{downshift.cjs.js → downshift.cjs.cjs} +86 -78
  21. package/preact/dist/{downshift.esm.js → downshift.esm.mjs} +86 -78
  22. package/preact/dist/downshift.umd.js +97 -81
  23. package/preact/dist/downshift.umd.js.map +1 -1
  24. package/preact/dist/downshift.umd.min.js +1 -10
  25. package/preact/dist/downshift.umd.min.js.map +1 -1
  26. package/preact/package.json +3 -3
  27. /package/dist/hooks/useTagGroup/utils/__tests__/{utils.use-element-ids.r18.test.d.ts → useElementIds.legacy.test.d.ts} +0 -0
  28. /package/dist/hooks/useTagGroup/utils/__tests__/{utils.use-element-ids.test.d.ts → useElementIds.r18.test.d.ts} +0 -0
@@ -1915,54 +1915,6 @@ var defaultStateValues$1 = {
1915
1915
 
1916
1916
  // istanbul ignore next
1917
1917
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
1918
-
1919
- // istanbul ignore next
1920
- var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
1921
- ? function useElementIds(_ref) {
1922
- var id = _ref.id,
1923
- labelId = _ref.labelId,
1924
- menuId = _ref.menuId,
1925
- getItemId = _ref.getItemId,
1926
- toggleButtonId = _ref.toggleButtonId,
1927
- inputId = _ref.inputId;
1928
- // Avoid conditional useId call
1929
- var reactId = "downshift-" + React__namespace.useId();
1930
- if (!id) {
1931
- id = reactId;
1932
- }
1933
- var elementIds = React__namespace.useMemo(function () {
1934
- return {
1935
- labelId: labelId || id + "-label",
1936
- menuId: menuId || id + "-menu",
1937
- getItemId: getItemId || function (index) {
1938
- return id + "-item-" + index;
1939
- },
1940
- toggleButtonId: toggleButtonId || id + "-toggle-button",
1941
- inputId: inputId || id + "-input"
1942
- };
1943
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
1944
- return elementIds;
1945
- } : function useElementIds(_ref2) {
1946
- var _ref2$id = _ref2.id,
1947
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
1948
- labelId = _ref2.labelId,
1949
- menuId = _ref2.menuId,
1950
- getItemId = _ref2.getItemId,
1951
- toggleButtonId = _ref2.toggleButtonId,
1952
- inputId = _ref2.inputId;
1953
- var elementIds = React__namespace.useMemo(function () {
1954
- return {
1955
- labelId: labelId || id + "-label",
1956
- menuId: menuId || id + "-menu",
1957
- getItemId: getItemId || function (index) {
1958
- return id + "-item-" + index;
1959
- },
1960
- toggleButtonId: toggleButtonId || id + "-toggle-button",
1961
- inputId: inputId || id + "-input"
1962
- };
1963
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
1964
- return elementIds;
1965
- };
1966
1918
  function getInitialState$3(props) {
1967
1919
  var selectedItem = getInitialValue$1(props, 'selectedItem', defaultStateValues$1);
1968
1920
  var isOpen = getInitialValue$1(props, 'isOpen', defaultStateValues$1);
@@ -2122,13 +2074,13 @@ if (process.env.NODE_ENV !== 'production') {
2122
2074
  return setGetterPropCallInfo;
2123
2075
  };
2124
2076
  }
2125
- function useScrollIntoView(_ref3) {
2126
- var highlightedIndex = _ref3.highlightedIndex,
2127
- isOpen = _ref3.isOpen,
2128
- itemRefs = _ref3.itemRefs,
2129
- getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
2130
- menuElement = _ref3.menuElement,
2131
- scrollIntoViewProp = _ref3.scrollIntoView;
2077
+ function useScrollIntoView(_ref) {
2078
+ var highlightedIndex = _ref.highlightedIndex,
2079
+ isOpen = _ref.isOpen,
2080
+ itemRefs = _ref.itemRefs,
2081
+ getItemNodeFromIndex = _ref.getItemNodeFromIndex,
2082
+ menuElement = _ref.menuElement,
2083
+ scrollIntoViewProp = _ref.scrollIntoView;
2132
2084
  // used not to scroll on highlight by mouse.
2133
2085
  var shouldScrollRef = React__namespace.useRef(true);
2134
2086
  // Scroll on highlighted item if change comes from keyboard.
@@ -2150,9 +2102,9 @@ function useScrollIntoView(_ref3) {
2150
2102
  var useControlPropsValidator = noop;
2151
2103
  /* istanbul ignore next */
2152
2104
  if (process.env.NODE_ENV !== 'production') {
2153
- useControlPropsValidator = function useControlPropsValidator(_ref4) {
2154
- var props = _ref4.props,
2155
- state = _ref4.state;
2105
+ useControlPropsValidator = function useControlPropsValidator(_ref2) {
2106
+ var props = _ref2.props,
2107
+ state = _ref2.state;
2156
2108
  // used for checking when props are moving from controlled to uncontrolled.
2157
2109
  var prevPropsRef = React__namespace.useRef(props);
2158
2110
  var isInitialMount = useIsInitialMount();
@@ -2475,6 +2427,56 @@ function downshiftSelectReducer(state, props, action) {
2475
2427
  }
2476
2428
  /* eslint-enable complexity */
2477
2429
 
2430
+ // eslint-disable-next-line @typescript-eslint/dot-notation
2431
+ var reactUseId$1 = React__namespace['useId'];
2432
+ var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
2433
+ function useElementIdsR18$1(_ref) {
2434
+ var id = _ref.id,
2435
+ labelId = _ref.labelId,
2436
+ menuId = _ref.menuId,
2437
+ getItemId = _ref.getItemId,
2438
+ toggleButtonId = _ref.toggleButtonId,
2439
+ inputId = _ref.inputId;
2440
+ var reactId = "downshift-" + reactUseId$1();
2441
+ if (!id) {
2442
+ id = reactId;
2443
+ }
2444
+ var elementIds = React__namespace.useMemo(function () {
2445
+ return {
2446
+ labelId: labelId != null ? labelId : id + "-label",
2447
+ menuId: menuId != null ? menuId : id + "-menu",
2448
+ getItemId: getItemId != null ? getItemId : function (index) {
2449
+ return id + "-item-" + index;
2450
+ },
2451
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
2452
+ inputId: inputId != null ? inputId : id + "-input"
2453
+ };
2454
+ }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
2455
+ return elementIds;
2456
+ }
2457
+ function useElementIdsLegacy$1(_ref2) {
2458
+ var id = _ref2.id,
2459
+ labelId = _ref2.labelId,
2460
+ menuId = _ref2.menuId,
2461
+ getItemId = _ref2.getItemId,
2462
+ toggleButtonId = _ref2.toggleButtonId,
2463
+ inputId = _ref2.inputId;
2464
+ var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
2465
+ var baseId = baseIdRef.current;
2466
+ var elementIds = React__namespace.useMemo(function () {
2467
+ return {
2468
+ labelId: labelId != null ? labelId : baseId + "-label",
2469
+ menuId: menuId != null ? menuId : baseId + "-menu",
2470
+ getItemId: getItemId != null ? getItemId : function (index) {
2471
+ return baseId + "-item-" + index;
2472
+ },
2473
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
2474
+ inputId: inputId != null ? inputId : baseId + "-input"
2475
+ };
2476
+ }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
2477
+ return elementIds;
2478
+ }
2479
+
2478
2480
  var _excluded$3 = ["onClick"],
2479
2481
  _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
2480
2482
  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -4034,38 +4036,44 @@ function useTagGroupReducer(state, _props, action) {
4034
4036
  return _extends({}, state, changes);
4035
4037
  }
4036
4038
 
4039
+ // eslint-disable-next-line @typescript-eslint/dot-notation
4040
+ var reactUseId = React__namespace['useId'];
4041
+
4037
4042
  // istanbul ignore next
4038
- var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
4039
- ? useElementIdsR18 : useElementIdsLegacy;
4043
+ var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
4040
4044
  function useElementIdsR18(_ref) {
4041
4045
  var id = _ref.id,
4042
4046
  tagGroupId = _ref.tagGroupId,
4043
4047
  getTagId = _ref.getTagId;
4044
- // Avoid conditional useId call
4045
- var reactId = "downshift-" + React__namespace.useId();
4048
+ var reactId = "downshift-" + reactUseId();
4046
4049
  if (!id) {
4047
4050
  id = reactId;
4048
4051
  }
4049
- var elementIdsRef = React__namespace.useRef({
4050
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4051
- getTagId: getTagId != null ? getTagId : function (index) {
4052
- return id + "-tag-" + index;
4053
- }
4054
- });
4055
- return elementIdsRef.current;
4052
+ var elementIds = React__namespace.useMemo(function () {
4053
+ return {
4054
+ tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4055
+ getTagId: getTagId != null ? getTagId : function (index) {
4056
+ return id + "-tag-" + index;
4057
+ }
4058
+ };
4059
+ }, [getTagId, id, tagGroupId]);
4060
+ return elementIds;
4056
4061
  }
4057
4062
  function useElementIdsLegacy(_ref2) {
4058
- var _ref2$id = _ref2.id,
4059
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
4063
+ var id = _ref2.id,
4060
4064
  getTagId = _ref2.getTagId,
4061
4065
  tagGroupId = _ref2.tagGroupId;
4062
- var elementIdsRef = React__namespace.useRef({
4063
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4064
- getTagId: getTagId != null ? getTagId : function (index) {
4065
- return id + "-tag-" + index;
4066
- }
4067
- });
4068
- return elementIdsRef.current;
4066
+ var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
4067
+ var baseId = baseIdRef.current;
4068
+ var elementIds = React__namespace.useMemo(function () {
4069
+ return {
4070
+ tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
4071
+ getTagId: getTagId != null ? getTagId : function (index) {
4072
+ return baseId + "-tag-" + index;
4073
+ }
4074
+ };
4075
+ }, [getTagId, baseId, tagGroupId]);
4076
+ return elementIds;
4069
4077
  }
4070
4078
 
4071
4079
  function getInitialState(props) {
@@ -250,11 +250,11 @@
250
250
  return reactIs_development$1;
251
251
  }
252
252
 
253
- var hasRequiredReactIs;
253
+ var hasRequiredReactIs$1;
254
254
 
255
- function requireReactIs () {
256
- if (hasRequiredReactIs) return reactIs$1.exports;
257
- hasRequiredReactIs = 1;
255
+ function requireReactIs$1 () {
256
+ if (hasRequiredReactIs$1) return reactIs$1.exports;
257
+ hasRequiredReactIs$1 = 1;
258
258
 
259
259
  {
260
260
  reactIs$1.exports = requireReactIs_development$1();
@@ -407,9 +407,9 @@
407
407
  var printWarning = function() {};
408
408
 
409
409
  {
410
- var ReactPropTypesSecret = requireReactPropTypesSecret();
410
+ var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
411
411
  var loggedTypeFailures = {};
412
- var has = requireHas();
412
+ var has = /*@__PURE__*/ requireHas();
413
413
 
414
414
  printWarning = function(text) {
415
415
  var message = 'Warning: ' + text;
@@ -515,12 +515,12 @@
515
515
  if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
516
516
  hasRequiredFactoryWithTypeCheckers = 1;
517
517
 
518
- var ReactIs = requireReactIs();
518
+ var ReactIs = requireReactIs$1();
519
519
  var assign = requireObjectAssign();
520
520
 
521
- var ReactPropTypesSecret = requireReactPropTypesSecret();
522
- var has = requireHas();
523
- var checkPropTypes = requireCheckPropTypes();
521
+ var ReactPropTypesSecret = /*@__PURE__*/ requireReactPropTypesSecret();
522
+ var has = /*@__PURE__*/ requireHas();
523
+ var checkPropTypes = /*@__PURE__*/ requireCheckPropTypes();
524
524
 
525
525
  var printWarning = function() {};
526
526
 
@@ -1126,16 +1126,23 @@
1126
1126
  * LICENSE file in the root directory of this source tree.
1127
1127
  */
1128
1128
 
1129
- {
1130
- var ReactIs = requireReactIs();
1129
+ var hasRequiredPropTypes;
1130
+
1131
+ function requirePropTypes () {
1132
+ if (hasRequiredPropTypes) return propTypes$6.exports;
1133
+ hasRequiredPropTypes = 1;
1134
+ {
1135
+ var ReactIs = requireReactIs$1();
1131
1136
 
1132
- // By explicitly using `prop-types` you are opting into new development behavior.
1133
- // http://fb.me/prop-types-in-prod
1134
- var throwOnDirectAccess = true;
1135
- propTypes$6.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
1137
+ // By explicitly using `prop-types` you are opting into new development behavior.
1138
+ // http://fb.me/prop-types-in-prod
1139
+ var throwOnDirectAccess = true;
1140
+ propTypes$6.exports = /*@__PURE__*/ requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
1141
+ }
1142
+ return propTypes$6.exports;
1136
1143
  }
1137
1144
 
1138
- var propTypesExports = propTypes$6.exports;
1145
+ var propTypesExports = /*@__PURE__*/ requirePropTypes();
1139
1146
  var PropTypes = /*@__PURE__*/getDefaultExportFromCjs(propTypesExports);
1140
1147
 
1141
1148
  var reactIs = {exports: {}};
@@ -1369,11 +1376,19 @@
1369
1376
  return reactIs_development;
1370
1377
  }
1371
1378
 
1372
- {
1373
- reactIs.exports = requireReactIs_development();
1379
+ var hasRequiredReactIs;
1380
+
1381
+ function requireReactIs () {
1382
+ if (hasRequiredReactIs) return reactIs.exports;
1383
+ hasRequiredReactIs = 1;
1384
+
1385
+ {
1386
+ reactIs.exports = requireReactIs_development();
1387
+ }
1388
+ return reactIs.exports;
1374
1389
  }
1375
1390
 
1376
- var reactIsExports = reactIs.exports;
1391
+ var reactIsExports = requireReactIs();
1377
1392
 
1378
1393
  var unknown = '__autocomplete_unknown__' ;
1379
1394
  var mouseUp = '__autocomplete_mouseup__' ;
@@ -3255,54 +3270,6 @@
3255
3270
 
3256
3271
  // istanbul ignore next
3257
3272
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
3258
-
3259
- // istanbul ignore next
3260
- var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
3261
- ? function useElementIds(_ref) {
3262
- var id = _ref.id,
3263
- labelId = _ref.labelId,
3264
- menuId = _ref.menuId,
3265
- getItemId = _ref.getItemId,
3266
- toggleButtonId = _ref.toggleButtonId,
3267
- inputId = _ref.inputId;
3268
- // Avoid conditional useId call
3269
- var reactId = "downshift-" + React__namespace.useId();
3270
- if (!id) {
3271
- id = reactId;
3272
- }
3273
- var elementIds = React__namespace.useMemo(function () {
3274
- return {
3275
- labelId: labelId || id + "-label",
3276
- menuId: menuId || id + "-menu",
3277
- getItemId: getItemId || function (index) {
3278
- return id + "-item-" + index;
3279
- },
3280
- toggleButtonId: toggleButtonId || id + "-toggle-button",
3281
- inputId: inputId || id + "-input"
3282
- };
3283
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
3284
- return elementIds;
3285
- } : function useElementIds(_ref2) {
3286
- var _ref2$id = _ref2.id,
3287
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
3288
- labelId = _ref2.labelId,
3289
- menuId = _ref2.menuId,
3290
- getItemId = _ref2.getItemId,
3291
- toggleButtonId = _ref2.toggleButtonId,
3292
- inputId = _ref2.inputId;
3293
- var elementIds = React__namespace.useMemo(function () {
3294
- return {
3295
- labelId: labelId || id + "-label",
3296
- menuId: menuId || id + "-menu",
3297
- getItemId: getItemId || function (index) {
3298
- return id + "-item-" + index;
3299
- },
3300
- toggleButtonId: toggleButtonId || id + "-toggle-button",
3301
- inputId: inputId || id + "-input"
3302
- };
3303
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
3304
- return elementIds;
3305
- };
3306
3273
  function isAcceptedCharacterKey(key) {
3307
3274
  return /^\S{1}$/.test(key);
3308
3275
  }
@@ -3465,13 +3432,13 @@
3465
3432
  return setGetterPropCallInfo;
3466
3433
  };
3467
3434
  }
3468
- function useScrollIntoView(_ref3) {
3469
- var highlightedIndex = _ref3.highlightedIndex,
3470
- isOpen = _ref3.isOpen,
3471
- itemRefs = _ref3.itemRefs,
3472
- getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
3473
- menuElement = _ref3.menuElement,
3474
- scrollIntoViewProp = _ref3.scrollIntoView;
3435
+ function useScrollIntoView(_ref) {
3436
+ var highlightedIndex = _ref.highlightedIndex,
3437
+ isOpen = _ref.isOpen,
3438
+ itemRefs = _ref.itemRefs,
3439
+ getItemNodeFromIndex = _ref.getItemNodeFromIndex,
3440
+ menuElement = _ref.menuElement,
3441
+ scrollIntoViewProp = _ref.scrollIntoView;
3475
3442
  // used not to scroll on highlight by mouse.
3476
3443
  var shouldScrollRef = React__namespace.useRef(true);
3477
3444
  // Scroll on highlighted item if change comes from keyboard.
@@ -3493,9 +3460,9 @@
3493
3460
  var useControlPropsValidator = noop;
3494
3461
  /* istanbul ignore next */
3495
3462
  {
3496
- useControlPropsValidator = function useControlPropsValidator(_ref4) {
3497
- var props = _ref4.props,
3498
- state = _ref4.state;
3463
+ useControlPropsValidator = function useControlPropsValidator(_ref2) {
3464
+ var props = _ref2.props,
3465
+ state = _ref2.state;
3499
3466
  // used for checking when props are moving from controlled to uncontrolled.
3500
3467
  var prevPropsRef = React__namespace.useRef(props);
3501
3468
  var isInitialMount = useIsInitialMount();
@@ -3818,6 +3785,56 @@
3818
3785
  }
3819
3786
  /* eslint-enable complexity */
3820
3787
 
3788
+ // eslint-disable-next-line @typescript-eslint/dot-notation
3789
+ var reactUseId$1 = React__namespace['useId'];
3790
+ var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
3791
+ function useElementIdsR18$1(_ref) {
3792
+ var id = _ref.id,
3793
+ labelId = _ref.labelId,
3794
+ menuId = _ref.menuId,
3795
+ getItemId = _ref.getItemId,
3796
+ toggleButtonId = _ref.toggleButtonId,
3797
+ inputId = _ref.inputId;
3798
+ var reactId = "downshift-" + reactUseId$1();
3799
+ if (!id) {
3800
+ id = reactId;
3801
+ }
3802
+ var elementIds = React__namespace.useMemo(function () {
3803
+ return {
3804
+ labelId: labelId != null ? labelId : id + "-label",
3805
+ menuId: menuId != null ? menuId : id + "-menu",
3806
+ getItemId: getItemId != null ? getItemId : function (index) {
3807
+ return id + "-item-" + index;
3808
+ },
3809
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
3810
+ inputId: inputId != null ? inputId : id + "-input"
3811
+ };
3812
+ }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
3813
+ return elementIds;
3814
+ }
3815
+ function useElementIdsLegacy$1(_ref2) {
3816
+ var id = _ref2.id,
3817
+ labelId = _ref2.labelId,
3818
+ menuId = _ref2.menuId,
3819
+ getItemId = _ref2.getItemId,
3820
+ toggleButtonId = _ref2.toggleButtonId,
3821
+ inputId = _ref2.inputId;
3822
+ var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
3823
+ var baseId = baseIdRef.current;
3824
+ var elementIds = React__namespace.useMemo(function () {
3825
+ return {
3826
+ labelId: labelId != null ? labelId : baseId + "-label",
3827
+ menuId: menuId != null ? menuId : baseId + "-menu",
3828
+ getItemId: getItemId != null ? getItemId : function (index) {
3829
+ return baseId + "-item-" + index;
3830
+ },
3831
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
3832
+ inputId: inputId != null ? inputId : baseId + "-input"
3833
+ };
3834
+ }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
3835
+ return elementIds;
3836
+ }
3837
+
3821
3838
  var _excluded$3 = ["onClick"],
3822
3839
  _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
3823
3840
  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -5389,38 +5406,44 @@
5389
5406
  return _extends({}, state, changes);
5390
5407
  }
5391
5408
 
5409
+ // eslint-disable-next-line @typescript-eslint/dot-notation
5410
+ var reactUseId = React__namespace['useId'];
5411
+
5392
5412
  // istanbul ignore next
5393
- var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
5394
- ? useElementIdsR18 : useElementIdsLegacy;
5413
+ var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
5395
5414
  function useElementIdsR18(_ref) {
5396
5415
  var id = _ref.id,
5397
5416
  tagGroupId = _ref.tagGroupId,
5398
5417
  getTagId = _ref.getTagId;
5399
- // Avoid conditional useId call
5400
- var reactId = "downshift-" + React__namespace.useId();
5418
+ var reactId = "downshift-" + reactUseId();
5401
5419
  if (!id) {
5402
5420
  id = reactId;
5403
5421
  }
5404
- var elementIdsRef = React__namespace.useRef({
5405
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
5406
- getTagId: getTagId != null ? getTagId : function (index) {
5407
- return id + "-tag-" + index;
5408
- }
5409
- });
5410
- return elementIdsRef.current;
5422
+ var elementIds = React__namespace.useMemo(function () {
5423
+ return {
5424
+ tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
5425
+ getTagId: getTagId != null ? getTagId : function (index) {
5426
+ return id + "-tag-" + index;
5427
+ }
5428
+ };
5429
+ }, [getTagId, id, tagGroupId]);
5430
+ return elementIds;
5411
5431
  }
5412
5432
  function useElementIdsLegacy(_ref2) {
5413
- var _ref2$id = _ref2.id,
5414
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
5433
+ var id = _ref2.id,
5415
5434
  getTagId = _ref2.getTagId,
5416
5435
  tagGroupId = _ref2.tagGroupId;
5417
- var elementIdsRef = React__namespace.useRef({
5418
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
5419
- getTagId: getTagId != null ? getTagId : function (index) {
5420
- return id + "-tag-" + index;
5421
- }
5422
- });
5423
- return elementIdsRef.current;
5436
+ var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
5437
+ var baseId = baseIdRef.current;
5438
+ var elementIds = React__namespace.useMemo(function () {
5439
+ return {
5440
+ tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
5441
+ getTagId: getTagId != null ? getTagId : function (index) {
5442
+ return baseId + "-tag-" + index;
5443
+ }
5444
+ };
5445
+ }, [getTagId, baseId, tagGroupId]);
5446
+ return elementIds;
5424
5447
  }
5425
5448
 
5426
5449
  function getInitialState(props) {