downshift 7.0.0 → 7.0.3

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.
package/README.md CHANGED
@@ -33,8 +33,8 @@ autocomplete, combobox or select dropdown components.</p>
33
33
  You need an autocomplete, a combobox or a select experience in your application
34
34
  and you want it to be accessible. You also want it to be simple and flexible to
35
35
  account for your use cases. Finally, it should follow the [ARIA][aria] design
36
- pattern for a [combobox][combobox-aria] or a [select][select-aria], depending on
37
- your use case.
36
+ pattern for a [combobox][combobox-aria-example] or a
37
+ [select][select-aria-example], depending on your use case.
38
38
 
39
39
  ## This solution
40
40
 
@@ -1496,10 +1496,10 @@ MIT
1496
1496
  https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection
1497
1497
  [bundle-phobia-link]: https://bundlephobia.com/result?p=downshift@3.4.8
1498
1498
  [aria]: https://www.w3.org/TR/wai-aria-practices/
1499
- [combobox-aria]:
1500
- https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/combobox/aria1.1pattern/listbox-combo.html
1501
- [select-aria]:
1502
- https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/listbox/listbox-collapsible.html
1499
+ [combobox-aria-example]:
1500
+ https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html
1501
+ [select-aria-example]:
1502
+ https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
1503
1503
  [docsite]: https://downshift-js.com/
1504
1504
  [code-sandbox-try-it-out]:
1505
1505
  https://codesandbox.io/s/github/kentcdodds/downshift-examples?file=/src/downshift/ordered-examples/00-get-root-props-example.js
@@ -2424,12 +2424,10 @@ function useSelect(userProps) {
2424
2424
  }
2425
2425
  },
2426
2426
  Enter(event) {
2427
- if (latest.current.state.isOpen) {
2428
- event.preventDefault();
2429
- dispatch({
2430
- type: ToggleButtonKeyDownEnter
2431
- });
2432
- }
2427
+ event.preventDefault();
2428
+ dispatch({
2429
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
2430
+ });
2433
2431
  },
2434
2432
  PageUp(event) {
2435
2433
  if (latest.current.state.isOpen) {
@@ -2450,12 +2448,10 @@ function useSelect(userProps) {
2450
2448
  }
2451
2449
  },
2452
2450
  ' '(event) {
2453
- if (latest.current.state.isOpen) {
2454
- event.preventDefault();
2455
- dispatch({
2456
- type: ToggleButtonKeyDownSpaceButton
2457
- });
2458
- }
2451
+ event.preventDefault();
2452
+ dispatch({
2453
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
2454
+ });
2459
2455
  }
2460
2456
  }), [dispatch, getItemNodeFromIndex, latest]);
2461
2457
 
@@ -2579,7 +2575,7 @@ function useSelect(userProps) {
2579
2575
  'aria-controls': elementIds.menuId,
2580
2576
  'aria-expanded': latest.current.state.isOpen,
2581
2577
  'aria-haspopup': 'listbox',
2582
- 'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
2578
+ 'aria-labelledby': `${elementIds.labelId}`,
2583
2579
  id: elementIds.toggleButtonId,
2584
2580
  role: 'combobox',
2585
2581
  tabIndex: 0,
@@ -2415,12 +2415,10 @@ function useSelect(userProps) {
2415
2415
  }
2416
2416
  },
2417
2417
  Enter(event) {
2418
- if (latest.current.state.isOpen) {
2419
- event.preventDefault();
2420
- dispatch({
2421
- type: ToggleButtonKeyDownEnter
2422
- });
2423
- }
2418
+ event.preventDefault();
2419
+ dispatch({
2420
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
2421
+ });
2424
2422
  },
2425
2423
  PageUp(event) {
2426
2424
  if (latest.current.state.isOpen) {
@@ -2441,12 +2439,10 @@ function useSelect(userProps) {
2441
2439
  }
2442
2440
  },
2443
2441
  ' '(event) {
2444
- if (latest.current.state.isOpen) {
2445
- event.preventDefault();
2446
- dispatch({
2447
- type: ToggleButtonKeyDownSpaceButton
2448
- });
2449
- }
2442
+ event.preventDefault();
2443
+ dispatch({
2444
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
2445
+ });
2450
2446
  }
2451
2447
  }), [dispatch, getItemNodeFromIndex, latest]);
2452
2448
 
@@ -2570,7 +2566,7 @@ function useSelect(userProps) {
2570
2566
  'aria-controls': elementIds.menuId,
2571
2567
  'aria-expanded': latest.current.state.isOpen,
2572
2568
  'aria-haspopup': 'listbox',
2573
- 'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
2569
+ 'aria-labelledby': `${elementIds.labelId}`,
2574
2570
  id: elementIds.toggleButtonId,
2575
2571
  role: 'combobox',
2576
2572
  tabIndex: 0,
@@ -2362,12 +2362,10 @@ function useSelect(userProps) {
2362
2362
  }
2363
2363
  },
2364
2364
  Enter(event) {
2365
- if (latest.current.state.isOpen) {
2366
- event.preventDefault();
2367
- dispatch({
2368
- type: ToggleButtonKeyDownEnter
2369
- });
2370
- }
2365
+ event.preventDefault();
2366
+ dispatch({
2367
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
2368
+ });
2371
2369
  },
2372
2370
  PageUp(event) {
2373
2371
  if (latest.current.state.isOpen) {
@@ -2388,12 +2386,10 @@ function useSelect(userProps) {
2388
2386
  }
2389
2387
  },
2390
2388
  ' '(event) {
2391
- if (latest.current.state.isOpen) {
2392
- event.preventDefault();
2393
- dispatch({
2394
- type: ToggleButtonKeyDownSpaceButton
2395
- });
2396
- }
2389
+ event.preventDefault();
2390
+ dispatch({
2391
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
2392
+ });
2397
2393
  }
2398
2394
  }), [dispatch, getItemNodeFromIndex, latest]);
2399
2395
 
@@ -2517,7 +2513,7 @@ function useSelect(userProps) {
2517
2513
  'aria-controls': elementIds.menuId,
2518
2514
  'aria-expanded': latest.current.state.isOpen,
2519
2515
  'aria-haspopup': 'listbox',
2520
- 'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
2516
+ 'aria-labelledby': `${elementIds.labelId}`,
2521
2517
  id: elementIds.toggleButtonId,
2522
2518
  role: 'combobox',
2523
2519
  tabIndex: 0,
@@ -3695,12 +3695,10 @@
3695
3695
  }
3696
3696
  },
3697
3697
  Enter(event) {
3698
- if (latest.current.state.isOpen) {
3699
- event.preventDefault();
3700
- dispatch({
3701
- type: ToggleButtonKeyDownEnter
3702
- });
3703
- }
3698
+ event.preventDefault();
3699
+ dispatch({
3700
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownEnter : ToggleButtonClick$1
3701
+ });
3704
3702
  },
3705
3703
  PageUp(event) {
3706
3704
  if (latest.current.state.isOpen) {
@@ -3721,12 +3719,10 @@
3721
3719
  }
3722
3720
  },
3723
3721
  ' '(event) {
3724
- if (latest.current.state.isOpen) {
3725
- event.preventDefault();
3726
- dispatch({
3727
- type: ToggleButtonKeyDownSpaceButton
3728
- });
3729
- }
3722
+ event.preventDefault();
3723
+ dispatch({
3724
+ type: latest.current.state.isOpen ? ToggleButtonKeyDownSpaceButton : ToggleButtonClick$1
3725
+ });
3730
3726
  }
3731
3727
  }), [dispatch, getItemNodeFromIndex, latest]);
3732
3728
 
@@ -3850,7 +3846,7 @@
3850
3846
  'aria-controls': elementIds.menuId,
3851
3847
  'aria-expanded': latest.current.state.isOpen,
3852
3848
  'aria-haspopup': 'listbox',
3853
- 'aria-labelledby': `${elementIds.labelId} ${elementIds.toggleButtonId}`,
3849
+ 'aria-labelledby': `${elementIds.labelId}`,
3854
3850
  id: elementIds.toggleButtonId,
3855
3851
  role: 'combobox',
3856
3852
  tabIndex: 0,