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
@@ -1856,54 +1856,6 @@ var defaultStateValues$1 = {
1856
1856
 
1857
1857
  // istanbul ignore next
1858
1858
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
1859
-
1860
- // istanbul ignore next
1861
- var useElementIds$1 = 'useId' in React // Avoid conditional useId call
1862
- ? function useElementIds(_ref) {
1863
- var id = _ref.id,
1864
- labelId = _ref.labelId,
1865
- menuId = _ref.menuId,
1866
- getItemId = _ref.getItemId,
1867
- toggleButtonId = _ref.toggleButtonId,
1868
- inputId = _ref.inputId;
1869
- // Avoid conditional useId call
1870
- var reactId = "downshift-" + React.useId();
1871
- if (!id) {
1872
- id = reactId;
1873
- }
1874
- var elementIds = React.useMemo(function () {
1875
- return {
1876
- labelId: labelId || id + "-label",
1877
- menuId: menuId || id + "-menu",
1878
- getItemId: getItemId || function (index) {
1879
- return id + "-item-" + index;
1880
- },
1881
- toggleButtonId: toggleButtonId || id + "-toggle-button",
1882
- inputId: inputId || id + "-input"
1883
- };
1884
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
1885
- return elementIds;
1886
- } : function useElementIds(_ref2) {
1887
- var _ref2$id = _ref2.id,
1888
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
1889
- labelId = _ref2.labelId,
1890
- menuId = _ref2.menuId,
1891
- getItemId = _ref2.getItemId,
1892
- toggleButtonId = _ref2.toggleButtonId,
1893
- inputId = _ref2.inputId;
1894
- var elementIds = React.useMemo(function () {
1895
- return {
1896
- labelId: labelId || id + "-label",
1897
- menuId: menuId || id + "-menu",
1898
- getItemId: getItemId || function (index) {
1899
- return id + "-item-" + index;
1900
- },
1901
- toggleButtonId: toggleButtonId || id + "-toggle-button",
1902
- inputId: inputId || id + "-input"
1903
- };
1904
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
1905
- return elementIds;
1906
- };
1907
1859
  function isAcceptedCharacterKey(key) {
1908
1860
  return /^\S{1}$/.test(key);
1909
1861
  }
@@ -2066,13 +2018,13 @@ if (process.env.NODE_ENV !== 'production') {
2066
2018
  return setGetterPropCallInfo;
2067
2019
  };
2068
2020
  }
2069
- function useScrollIntoView(_ref3) {
2070
- var highlightedIndex = _ref3.highlightedIndex,
2071
- isOpen = _ref3.isOpen,
2072
- itemRefs = _ref3.itemRefs,
2073
- getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
2074
- menuElement = _ref3.menuElement,
2075
- scrollIntoViewProp = _ref3.scrollIntoView;
2021
+ function useScrollIntoView(_ref) {
2022
+ var highlightedIndex = _ref.highlightedIndex,
2023
+ isOpen = _ref.isOpen,
2024
+ itemRefs = _ref.itemRefs,
2025
+ getItemNodeFromIndex = _ref.getItemNodeFromIndex,
2026
+ menuElement = _ref.menuElement,
2027
+ scrollIntoViewProp = _ref.scrollIntoView;
2076
2028
  // used not to scroll on highlight by mouse.
2077
2029
  var shouldScrollRef = React.useRef(true);
2078
2030
  // Scroll on highlighted item if change comes from keyboard.
@@ -2094,9 +2046,9 @@ function useScrollIntoView(_ref3) {
2094
2046
  var useControlPropsValidator = noop;
2095
2047
  /* istanbul ignore next */
2096
2048
  if (process.env.NODE_ENV !== 'production') {
2097
- useControlPropsValidator = function useControlPropsValidator(_ref4) {
2098
- var props = _ref4.props,
2099
- state = _ref4.state;
2049
+ useControlPropsValidator = function useControlPropsValidator(_ref2) {
2050
+ var props = _ref2.props,
2051
+ state = _ref2.state;
2100
2052
  // used for checking when props are moving from controlled to uncontrolled.
2101
2053
  var prevPropsRef = React.useRef(props);
2102
2054
  var isInitialMount = useIsInitialMount();
@@ -2419,6 +2371,56 @@ function downshiftSelectReducer(state, props, action) {
2419
2371
  }
2420
2372
  /* eslint-enable complexity */
2421
2373
 
2374
+ // eslint-disable-next-line @typescript-eslint/dot-notation
2375
+ var reactUseId$1 = React['useId'];
2376
+ var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
2377
+ function useElementIdsR18$1(_ref) {
2378
+ var id = _ref.id,
2379
+ labelId = _ref.labelId,
2380
+ menuId = _ref.menuId,
2381
+ getItemId = _ref.getItemId,
2382
+ toggleButtonId = _ref.toggleButtonId,
2383
+ inputId = _ref.inputId;
2384
+ var reactId = "downshift-" + reactUseId$1();
2385
+ if (!id) {
2386
+ id = reactId;
2387
+ }
2388
+ var elementIds = React.useMemo(function () {
2389
+ return {
2390
+ labelId: labelId != null ? labelId : id + "-label",
2391
+ menuId: menuId != null ? menuId : id + "-menu",
2392
+ getItemId: getItemId != null ? getItemId : function (index) {
2393
+ return id + "-item-" + index;
2394
+ },
2395
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
2396
+ inputId: inputId != null ? inputId : id + "-input"
2397
+ };
2398
+ }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
2399
+ return elementIds;
2400
+ }
2401
+ function useElementIdsLegacy$1(_ref2) {
2402
+ var id = _ref2.id,
2403
+ labelId = _ref2.labelId,
2404
+ menuId = _ref2.menuId,
2405
+ getItemId = _ref2.getItemId,
2406
+ toggleButtonId = _ref2.toggleButtonId,
2407
+ inputId = _ref2.inputId;
2408
+ var baseIdRef = React.useRef(id != null ? id : "downshift-" + generateId());
2409
+ var baseId = baseIdRef.current;
2410
+ var elementIds = React.useMemo(function () {
2411
+ return {
2412
+ labelId: labelId != null ? labelId : baseId + "-label",
2413
+ menuId: menuId != null ? menuId : baseId + "-menu",
2414
+ getItemId: getItemId != null ? getItemId : function (index) {
2415
+ return baseId + "-item-" + index;
2416
+ },
2417
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
2418
+ inputId: inputId != null ? inputId : baseId + "-input"
2419
+ };
2420
+ }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
2421
+ return elementIds;
2422
+ }
2423
+
2422
2424
  var _excluded$3 = ["onClick"],
2423
2425
  _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
2424
2426
  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -3990,38 +3992,44 @@ function useTagGroupReducer(state, _props, action) {
3990
3992
  return _extends({}, state, changes);
3991
3993
  }
3992
3994
 
3995
+ // eslint-disable-next-line @typescript-eslint/dot-notation
3996
+ var reactUseId = React['useId'];
3997
+
3993
3998
  // istanbul ignore next
3994
- var useElementIds = 'useId' in React // Avoid conditional useId call
3995
- ? useElementIdsR18 : useElementIdsLegacy;
3999
+ var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
3996
4000
  function useElementIdsR18(_ref) {
3997
4001
  var id = _ref.id,
3998
4002
  tagGroupId = _ref.tagGroupId,
3999
4003
  getTagId = _ref.getTagId;
4000
- // Avoid conditional useId call
4001
- var reactId = "downshift-" + React.useId();
4004
+ var reactId = "downshift-" + reactUseId();
4002
4005
  if (!id) {
4003
4006
  id = reactId;
4004
4007
  }
4005
- var elementIdsRef = React.useRef({
4006
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4007
- getTagId: getTagId != null ? getTagId : function (index) {
4008
- return id + "-tag-" + index;
4009
- }
4010
- });
4011
- return elementIdsRef.current;
4008
+ var elementIds = React.useMemo(function () {
4009
+ return {
4010
+ tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4011
+ getTagId: getTagId != null ? getTagId : function (index) {
4012
+ return id + "-tag-" + index;
4013
+ }
4014
+ };
4015
+ }, [getTagId, id, tagGroupId]);
4016
+ return elementIds;
4012
4017
  }
4013
4018
  function useElementIdsLegacy(_ref2) {
4014
- var _ref2$id = _ref2.id,
4015
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
4019
+ var id = _ref2.id,
4016
4020
  getTagId = _ref2.getTagId,
4017
4021
  tagGroupId = _ref2.tagGroupId;
4018
- var elementIdsRef = React.useRef({
4019
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4020
- getTagId: getTagId != null ? getTagId : function (index) {
4021
- return id + "-tag-" + index;
4022
- }
4023
- });
4024
- return elementIdsRef.current;
4022
+ var baseIdRef = React.useRef(id != null ? id : "downshift-" + generateId());
4023
+ var baseId = baseIdRef.current;
4024
+ var elementIds = React.useMemo(function () {
4025
+ return {
4026
+ tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
4027
+ getTagId: getTagId != null ? getTagId : function (index) {
4028
+ return baseId + "-tag-" + index;
4029
+ }
4030
+ };
4031
+ }, [getTagId, baseId, tagGroupId]);
4032
+ return elementIds;
4025
4033
  }
4026
4034
 
4027
4035
  function getInitialState(props) {
@@ -284,11 +284,19 @@
284
284
  return reactIs_development;
285
285
  }
286
286
 
287
- {
288
- reactIs.exports = requireReactIs_development();
287
+ var hasRequiredReactIs;
288
+
289
+ function requireReactIs () {
290
+ if (hasRequiredReactIs) return reactIs.exports;
291
+ hasRequiredReactIs = 1;
292
+
293
+ {
294
+ reactIs.exports = requireReactIs_development();
295
+ }
296
+ return reactIs.exports;
289
297
  }
290
298
 
291
- var reactIsExports = reactIs.exports;
299
+ var reactIsExports = requireReactIs();
292
300
 
293
301
  var unknown = '__autocomplete_unknown__' ;
294
302
  var mouseUp = '__autocomplete_mouseup__' ;
@@ -2131,54 +2139,6 @@
2131
2139
 
2132
2140
  // istanbul ignore next
2133
2141
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
2134
-
2135
- // istanbul ignore next
2136
- var useElementIds$1 = 'useId' in React__namespace // Avoid conditional useId call
2137
- ? function useElementIds(_ref) {
2138
- var id = _ref.id,
2139
- labelId = _ref.labelId,
2140
- menuId = _ref.menuId,
2141
- getItemId = _ref.getItemId,
2142
- toggleButtonId = _ref.toggleButtonId,
2143
- inputId = _ref.inputId;
2144
- // Avoid conditional useId call
2145
- var reactId = "downshift-" + React__namespace.useId();
2146
- if (!id) {
2147
- id = reactId;
2148
- }
2149
- var elementIds = React__namespace.useMemo(function () {
2150
- return {
2151
- labelId: labelId || id + "-label",
2152
- menuId: menuId || id + "-menu",
2153
- getItemId: getItemId || function (index) {
2154
- return id + "-item-" + index;
2155
- },
2156
- toggleButtonId: toggleButtonId || id + "-toggle-button",
2157
- inputId: inputId || id + "-input"
2158
- };
2159
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
2160
- return elementIds;
2161
- } : function useElementIds(_ref2) {
2162
- var _ref2$id = _ref2.id,
2163
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
2164
- labelId = _ref2.labelId,
2165
- menuId = _ref2.menuId,
2166
- getItemId = _ref2.getItemId,
2167
- toggleButtonId = _ref2.toggleButtonId,
2168
- inputId = _ref2.inputId;
2169
- var elementIds = React__namespace.useMemo(function () {
2170
- return {
2171
- labelId: labelId || id + "-label",
2172
- menuId: menuId || id + "-menu",
2173
- getItemId: getItemId || function (index) {
2174
- return id + "-item-" + index;
2175
- },
2176
- toggleButtonId: toggleButtonId || id + "-toggle-button",
2177
- inputId: inputId || id + "-input"
2178
- };
2179
- }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
2180
- return elementIds;
2181
- };
2182
2142
  function isAcceptedCharacterKey(key) {
2183
2143
  return /^\S{1}$/.test(key);
2184
2144
  }
@@ -2341,13 +2301,13 @@
2341
2301
  return setGetterPropCallInfo;
2342
2302
  };
2343
2303
  }
2344
- function useScrollIntoView(_ref3) {
2345
- var highlightedIndex = _ref3.highlightedIndex,
2346
- isOpen = _ref3.isOpen,
2347
- itemRefs = _ref3.itemRefs,
2348
- getItemNodeFromIndex = _ref3.getItemNodeFromIndex,
2349
- menuElement = _ref3.menuElement,
2350
- scrollIntoViewProp = _ref3.scrollIntoView;
2304
+ function useScrollIntoView(_ref) {
2305
+ var highlightedIndex = _ref.highlightedIndex,
2306
+ isOpen = _ref.isOpen,
2307
+ itemRefs = _ref.itemRefs,
2308
+ getItemNodeFromIndex = _ref.getItemNodeFromIndex,
2309
+ menuElement = _ref.menuElement,
2310
+ scrollIntoViewProp = _ref.scrollIntoView;
2351
2311
  // used not to scroll on highlight by mouse.
2352
2312
  var shouldScrollRef = React__namespace.useRef(true);
2353
2313
  // Scroll on highlighted item if change comes from keyboard.
@@ -2369,9 +2329,9 @@
2369
2329
  var useControlPropsValidator = noop;
2370
2330
  /* istanbul ignore next */
2371
2331
  {
2372
- useControlPropsValidator = function useControlPropsValidator(_ref4) {
2373
- var props = _ref4.props,
2374
- state = _ref4.state;
2332
+ useControlPropsValidator = function useControlPropsValidator(_ref2) {
2333
+ var props = _ref2.props,
2334
+ state = _ref2.state;
2375
2335
  // used for checking when props are moving from controlled to uncontrolled.
2376
2336
  var prevPropsRef = React__namespace.useRef(props);
2377
2337
  var isInitialMount = useIsInitialMount();
@@ -2694,6 +2654,56 @@
2694
2654
  }
2695
2655
  /* eslint-enable complexity */
2696
2656
 
2657
+ // eslint-disable-next-line @typescript-eslint/dot-notation
2658
+ var reactUseId$1 = React__namespace['useId'];
2659
+ var useElementIds$1 = typeof reactUseId$1 === 'function' ? useElementIdsR18$1 : useElementIdsLegacy$1;
2660
+ function useElementIdsR18$1(_ref) {
2661
+ var id = _ref.id,
2662
+ labelId = _ref.labelId,
2663
+ menuId = _ref.menuId,
2664
+ getItemId = _ref.getItemId,
2665
+ toggleButtonId = _ref.toggleButtonId,
2666
+ inputId = _ref.inputId;
2667
+ var reactId = "downshift-" + reactUseId$1();
2668
+ if (!id) {
2669
+ id = reactId;
2670
+ }
2671
+ var elementIds = React__namespace.useMemo(function () {
2672
+ return {
2673
+ labelId: labelId != null ? labelId : id + "-label",
2674
+ menuId: menuId != null ? menuId : id + "-menu",
2675
+ getItemId: getItemId != null ? getItemId : function (index) {
2676
+ return id + "-item-" + index;
2677
+ },
2678
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : id + "-toggle-button",
2679
+ inputId: inputId != null ? inputId : id + "-input"
2680
+ };
2681
+ }, [getItemId, id, inputId, labelId, menuId, toggleButtonId]);
2682
+ return elementIds;
2683
+ }
2684
+ function useElementIdsLegacy$1(_ref2) {
2685
+ var id = _ref2.id,
2686
+ labelId = _ref2.labelId,
2687
+ menuId = _ref2.menuId,
2688
+ getItemId = _ref2.getItemId,
2689
+ toggleButtonId = _ref2.toggleButtonId,
2690
+ inputId = _ref2.inputId;
2691
+ var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
2692
+ var baseId = baseIdRef.current;
2693
+ var elementIds = React__namespace.useMemo(function () {
2694
+ return {
2695
+ labelId: labelId != null ? labelId : baseId + "-label",
2696
+ menuId: menuId != null ? menuId : baseId + "-menu",
2697
+ getItemId: getItemId != null ? getItemId : function (index) {
2698
+ return baseId + "-item-" + index;
2699
+ },
2700
+ toggleButtonId: toggleButtonId != null ? toggleButtonId : baseId + "-toggle-button",
2701
+ inputId: inputId != null ? inputId : baseId + "-input"
2702
+ };
2703
+ }, [getItemId, inputId, labelId, menuId, toggleButtonId, baseId]);
2704
+ return elementIds;
2705
+ }
2706
+
2697
2707
  var _excluded$3 = ["onClick"],
2698
2708
  _excluded2$3 = ["onMouseLeave", "refKey", "ref"],
2699
2709
  _excluded3$2 = ["onBlur", "onClick", "onPress", "onKeyDown", "refKey", "ref"],
@@ -4265,38 +4275,44 @@
4265
4275
  return _extends({}, state, changes);
4266
4276
  }
4267
4277
 
4278
+ // eslint-disable-next-line @typescript-eslint/dot-notation
4279
+ var reactUseId = React__namespace['useId'];
4280
+
4268
4281
  // istanbul ignore next
4269
- var useElementIds = 'useId' in React__namespace // Avoid conditional useId call
4270
- ? useElementIdsR18 : useElementIdsLegacy;
4282
+ var useElementIds = typeof reactUseId === 'function' ? useElementIdsR18 : useElementIdsLegacy;
4271
4283
  function useElementIdsR18(_ref) {
4272
4284
  var id = _ref.id,
4273
4285
  tagGroupId = _ref.tagGroupId,
4274
4286
  getTagId = _ref.getTagId;
4275
- // Avoid conditional useId call
4276
- var reactId = "downshift-" + React__namespace.useId();
4287
+ var reactId = "downshift-" + reactUseId();
4277
4288
  if (!id) {
4278
4289
  id = reactId;
4279
4290
  }
4280
- var elementIdsRef = React__namespace.useRef({
4281
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4282
- getTagId: getTagId != null ? getTagId : function (index) {
4283
- return id + "-tag-" + index;
4284
- }
4285
- });
4286
- return elementIdsRef.current;
4291
+ var elementIds = React__namespace.useMemo(function () {
4292
+ return {
4293
+ tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4294
+ getTagId: getTagId != null ? getTagId : function (index) {
4295
+ return id + "-tag-" + index;
4296
+ }
4297
+ };
4298
+ }, [getTagId, id, tagGroupId]);
4299
+ return elementIds;
4287
4300
  }
4288
4301
  function useElementIdsLegacy(_ref2) {
4289
- var _ref2$id = _ref2.id,
4290
- id = _ref2$id === void 0 ? "downshift-" + generateId() : _ref2$id,
4302
+ var id = _ref2.id,
4291
4303
  getTagId = _ref2.getTagId,
4292
4304
  tagGroupId = _ref2.tagGroupId;
4293
- var elementIdsRef = React__namespace.useRef({
4294
- tagGroupId: tagGroupId != null ? tagGroupId : id + "-tag-group",
4295
- getTagId: getTagId != null ? getTagId : function (index) {
4296
- return id + "-tag-" + index;
4297
- }
4298
- });
4299
- return elementIdsRef.current;
4305
+ var baseIdRef = React__namespace.useRef(id != null ? id : "downshift-" + generateId());
4306
+ var baseId = baseIdRef.current;
4307
+ var elementIds = React__namespace.useMemo(function () {
4308
+ return {
4309
+ tagGroupId: tagGroupId != null ? tagGroupId : baseId + "-tag-group",
4310
+ getTagId: getTagId != null ? getTagId : function (index) {
4311
+ return baseId + "-tag-" + index;
4312
+ }
4313
+ };
4314
+ }, [getTagId, baseId, tagGroupId]);
4315
+ return elementIds;
4300
4316
  }
4301
4317
 
4302
4318
  function getInitialState(props) {