@ariakit/react 0.4.0 → 0.4.2

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 (3) hide show
  1. package/CHANGELOG-035.md +765 -0
  2. package/CHANGELOG.md +89 -769
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,75 @@
1
1
  # @ariakit/react
2
2
 
3
+ ## 0.4.2
4
+
5
+ ### Tooltip behavior improvements
6
+
7
+ When using [Tooltip](https://ariakit.org/components/tooltip) components alongside elements that move focus upon clicking (like [`MenuButton`](https://ariakit.org/reference/menu-button), which moves focus to its [`Menu`](https://ariakit.org/reference/menu) when clicked), the tooltip will now stop from appearing after the user clicks the anchor element. It will only show when the mouse leaves and re-enters the anchor element.
8
+
9
+ This was already the case when tooltips had no [`timeout`](https://ariakit.org/reference/tooltip-provider#timeout). Now, the behavior is consistent regardless of the timeout value.
10
+
11
+ ### Combobox with tabs
12
+
13
+ [Tab](https://ariakit.org/components/tab) components can now be rendered as part of other composite widgets, like [Combobox](https://ariakit.org/components/combobox). The following structure should work seamlessly:
14
+
15
+ ```jsx "TabProvider" "TabList" "Tab" "TabPanel"
16
+ <ComboboxProvider>
17
+ <Combobox />
18
+ <ComboboxPopover>
19
+ <TabProvider>
20
+ <TabList>
21
+ <Tab />
22
+ </TabList>
23
+ <TabPanel unmountOnHide>
24
+ <ComboboxList>
25
+ <ComboboxItem />
26
+ </ComboboxList>
27
+ </TabPanel>
28
+ </TabProvider>
29
+ </ComboboxPopover>
30
+ </ComboboxProvider>
31
+ ```
32
+
33
+ ### Other updates
34
+
35
+ - Fixed `inert` behavior on older browsers.
36
+ - Fixed [Portal](https://ariakit.org/components/portal) rendering extra `span` even when the [`portal`](https://ariakit.org/reference/portal#portal-1) prop is `false`.
37
+ - Fixed [`Focusable`](https://ariakit.org/reference/focusable) to identify `summary` as a native tabbable element.
38
+ - Added [`Role.summary`](https://ariakit.org/reference/role) component.
39
+ - Improved typeahead functionality on unmounted composite items.
40
+ - Added new [`composite`](https://ariakit.org/reference/tab-provider#composite) property to tab store.
41
+ - Added new [`hideWhenEmpty`](https://ariakit.org/reference/combobox-cancel#hidewhenempty) prop to [`ComboboxCancel`](https://ariakit.org/reference/combobox-cancel).
42
+ - Added support for nested [`ComboboxList`](https://ariakit.org/reference/combobox-list).
43
+ - Added [`unmountOnHide`](https://ariakit.org/reference/tab-panel#unmountonhide) prop to [`TabPanel`](https://ariakit.org/reference/tab-panel).
44
+ - Improved JSDocs.
45
+ - Updated dependencies: `@ariakit/react-core@0.4.2`
46
+
47
+ ## 0.4.1
48
+
49
+ ### New `autoSelect` mode
50
+
51
+ The [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop of the [`Combobox`](https://ariakit.org/reference/combobox) component now accepts a new `"always"` value:
52
+
53
+ ```jsx
54
+ <Combobox autoSelect="always" />
55
+ ```
56
+
57
+ When using this value, the first enabled item will automatically gain focus when the list shows up, as well as when the combobox input value changes (which is the behavior of the [`autoSelect`](https://ariakit.org/reference/combobox#autoselect) prop when set to `true`).
58
+
59
+ ### `ComboboxItem` losing focus too early
60
+
61
+ Some tweaks were made to the [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component to ensure it doesn't lose focus right after a click or <kbd>Escape</kbd> keystroke when the combobox popover is animated. This should avoid an inconsistent UI as the popover plays its exit animation.
62
+
63
+ ### Other updates
64
+
65
+ - Added [`disclosure`](https://ariakit.org/reference/use-disclosure-store#disclosure-1) property to disclosure stores.
66
+ - Added [`blurActiveItemOnClick`](https://ariakit.org/reference/combobox#bluractiveitemonclick) prop to [`Combobox`](https://ariakit.org/reference/combobox).
67
+ - Added [`showOnClick`](https://ariakit.org/reference/combobox#showonclick) prop to [`Combobox`](https://ariakit.org/reference/combobox).
68
+ - Added [`showOnKeyPress`](https://ariakit.org/reference/combobox#showonkeypress) prop to [`Combobox`](https://ariakit.org/reference/combobox).
69
+ - Fixed [`DisclosureContent`](https://ariakit.org/reference/disclosure-content) components losing their ref value on fast refresh.
70
+ - Improved JSDocs.
71
+ - Updated dependencies: `@ariakit/react-core@0.4.1`
72
+
3
73
  ## 0.4.0
4
74
 
5
75
  This version introduces enhanced support for CSS animations and transitions, along with a few breaking changes for quite specific cases. The majority of users won't be impacted by these.
@@ -8,17 +78,27 @@ Please review the brief notes following the **BREAKING** labels on each update t
8
78
 
9
79
  ### Improved animation support
10
80
 
11
- This version enhances support for CSS animations and transitions on Ariakit components that use [Disclosure](https://ariakit.org/component/disclosure). This includes [Dialog](https://ariakit.org/components/dialog), [Popover](https://ariakit.org/components/popover), [Combobox](https://ariakit.org/components/combobox), [Select](https://ariakit.org/components/select), [Hovercard](https://ariakit.org/components/hovercard), [Menu](https://ariakit.org/components/menu), and [Tooltip](https://ariakit.org/components/tooltip).
81
+ **BREAKING** if you have popups with CSS animation/transition, but aren't using the [`animated`](https://ariakit.org/reference/disclosure-provider#animated) prop.
82
+
83
+ This version enhances support for CSS animations and transitions on Ariakit components that use [Disclosure](https://ariakit.org/components/disclosure). This includes [Dialog](https://ariakit.org/components/dialog), [Popover](https://ariakit.org/components/popover), [Combobox](https://ariakit.org/components/combobox), [Select](https://ariakit.org/components/select), [Hovercard](https://ariakit.org/components/hovercard), [Menu](https://ariakit.org/components/menu), and [Tooltip](https://ariakit.org/components/tooltip).
84
+
85
+ These components now support _enter_ and _leave_ transitions and animations right out of the box, eliminating the need to provide an explicit [`animated`](https://ariakit.org/reference/disclosure-provider#animated) prop. If an enter animation is detected, the component will automatically wait for a leave animation to complete before unmounting or hiding itself.
86
+
87
+ This means that if you've set any CSS animation/transition property on a dialog and didn't previously specify the [`animated`](https://ariakit.org/reference/disclosure-provider#animated) prop, you might now notice a delay when closing the dialog. If this isn't what you want, you can turn off the CSS animation/transition using the [`[data-leave]`](https://ariakit.org/guide/styling#data-leave) selector:
12
88
 
13
- These components now support _enter_ and _leave_ transitions and animations right out of the box, eliminating the need to provide an explicit `animated` prop. If an enter animation is detected, the component will automatically wait for a leave animation to complete before unmounting or hiding itself.
89
+ ```css
90
+ .dialog[data-leave] {
91
+ transition: unset;
92
+ }
93
+ ```
14
94
 
15
- Use the [`[data-enter]`](https://ariakit.org/guide/styling#data-enter) selector for CSS transitions. For CSS animations, use the newly introduced [`[data-open]`](https://ariakit.org/guide/styling#data-open) selector. The [`[data-leave]`](https://ariakit.org/guide/styling#data-leave) selector can be used for both transitions and animations.
95
+ Use the [`[data-enter]`](https://ariakit.org/guide/styling#data-enter) selector to apply CSS transitions. For CSS animations, use the newly introduced [`[data-open]`](https://ariakit.org/guide/styling#data-open) selector. The [`[data-leave]`](https://ariakit.org/guide/styling#data-leave) selector can be used for both transitions and animations.
16
96
 
17
97
  ### `ComboboxList` is no longer focusable
18
98
 
19
99
  **BREAKING** if you're using the [`ComboboxList`](https://ariakit.org/reference/combobox-list) component directly with [`Focusable`](https://ariakit.org/reference/focusable) props.
20
100
 
21
- The [`ComboboxList`](https://ariakit.org/reference/combobox-list) component is no longer focusable and doesn't accept [`Focusable`](https://ariakit.org/reference/focusable) props such as [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`disabled`](https://ariakit.org/reference/focusable#disabled), and [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible) anymore. If you need [Focusable](https://ariakit.org/components/focusable) features specifically on the [`ComboboxList`](https://ariakit.org/reference/combobox-list) component, you can use [composition](https://ariakit.org/guide/composition) to render it as a [`Focusable`](https://ariakit.org/reference/focusable) component.
101
+ The [`ComboboxList`](https://ariakit.org/reference/combobox-list) component is no longer focusable and doesn't accept focusable props such as [`autoFocus`](https://ariakit.org/reference/focusable#autofocus), [`disabled`](https://ariakit.org/reference/focusable#disabled), and [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible) anymore. If you need focusable features specifically on the [`ComboboxList`](https://ariakit.org/reference/combobox-list) component, you can use [composition](https://ariakit.org/guide/composition) to render it as a [`Focusable`](https://ariakit.org/reference/focusable) component.
22
102
 
23
103
  Before:
24
104
 
@@ -69,7 +149,7 @@ Previously, you had to explicitly pass `role="button"` to the [`SelectItem`](htt
69
149
 
70
150
  ### Radio types have improved
71
151
 
72
- **BREAKING** if you're using TypeScript and the [`onChange`](https://ariakit.org/reference/radio#onchange) prop on [`Radio`](https://ariakit.org/reference/radio), [`FormRadio`](https://ariakit.org/reference/form-radio), or [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio).
152
+ **BREAKING** if you're using TypeScript with the [`onChange`](https://ariakit.org/reference/radio#onchange) prop on [`Radio`](https://ariakit.org/reference/radio), [`FormRadio`](https://ariakit.org/reference/form-radio), or [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio).
73
153
 
74
154
  The [`onChange`](https://ariakit.org/reference/radio#onchange) callback argument type has changed from `React.SyntheticEvent` to `React.ChangeEvent`.
75
155
 
@@ -122,7 +202,7 @@ You can learn more about these new features in the [Composition guide](https://a
122
202
  ### Other updates
123
203
 
124
204
  - Deprecated `MenuBar` in favor of [Menubar](https://ariakit.org/components/menubar) components.
125
- - The `type` prop for the [Tooltip](https://ariakit.org/components/tooltip) has been deprecated. See [Tooltip anchors must have accessible names](https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names).
205
+ - The `type` prop on [Tooltip](https://ariakit.org/components/tooltip) has been deprecated. See [Tooltip anchors must have accessible names](https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names).
126
206
  - Removed the ancestors of open, nested modals from the accessibility tree.
127
207
  - Tooltips no longer use `aria-describedby` to associate the tooltip content with the anchor.
128
208
  - Added new [`disclosure`](https://ariakit.org/reference/use-disclosure-store#disclosure-1) property to disclosure stores.
@@ -164,7 +244,7 @@ This version introduces a new [`FormControl`](https://ariakit.org/reference/form
164
244
 
165
245
  ### Modal Combobox
166
246
 
167
- The [Combobox](https://ariakit.org/component/combobox) components now support the [`modal`](https://ariakit.org/reference/combobox-popover#modal) prop on [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover).
247
+ The [Combobox](https://ariakit.org/components/combobox) components now support the [`modal`](https://ariakit.org/reference/combobox-popover#modal) prop on [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover).
168
248
 
169
249
  When a modal combobox is expanded, users can interact with and tab through all the combobox controls, including [`Combobox`](https://ariakit.org/reference/combobox), [`ComboboxDisclosure`](https://ariakit.org/reference/combobox-disclosure), and [`ComboboxCancel`](https://ariakit.org/reference/combobox-cancel), even if they're rendered outside the popover. The rest of the page will be inert.
170
250
 
@@ -329,766 +409,6 @@ This version introduces a new [Menubar](https://ariakit.org/components/menubar)
329
409
  - Added new [`blurOnHoverEnd`](https://ariakit.org/reference/composite-hover#bluronhoverend) prop to [`CompositeHover`](https://ariakit.org/reference/composite-hover) and related components.
330
410
  - Updated dependencies: `@ariakit/react-core@0.3.6`
331
411
 
332
- ## 0.3.5
333
-
334
- ### Patch Changes
335
-
336
- - [`#2935`](https://github.com/ariakit/ariakit/pull/2935) Fixed TypeScript declaration files in CommonJS projects using `NodeNext` for `moduleResolution`.
337
-
338
- - [`#2945`](https://github.com/ariakit/ariakit/pull/2945) Added `name` and `value` properties to non-native input elements rendered by [`Checkbox`](https://ariakit.org/reference/checkbox), [`Radio`](https://ariakit.org), [`MenuItemCheckbox`](https://ariakit.org/reference/menu-item-checkbox), and [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio).
339
-
340
- It's now possible to access the `name` and `value` properties from the `event.target` element in the [`onChange`](https://ariakit.org/reference/checkbox#onchange) event handler.
341
-
342
- - [`#2945`](https://github.com/ariakit/ariakit/pull/2945) Fixed [`CompositeItem`](https://ariakit.org/reference/composite-item) and associated components not receiving the [`disabled`](https://ariakit.org/reference/composite-item#disabled) prop when it's being used by a higher-level component such as [`MenuItemCheckbox`](https://ariakit.org/reference/menu-item-checkbox) or [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio).
343
-
344
- - [`#2945`](https://github.com/ariakit/ariakit/pull/2945) It's now possible to control the menu [`values`](https://ariakit.org/reference/menu-provider#values) state by passing the [`checked`](https://ariakit.org/reference/menu-item-checkbox#checked), [`defaultChecked`](https://ariakit.org/reference/menu-item-checkbox#defaultchecked) and [`onChange`](https://ariakit.org/reference/menu-item-checkbox#onchange) props to [`MenuItemCheckbox`](https://ariakit.org/reference/menu-item-checkbox) and [`MenuItemRadio`](https://ariakit.org/reference/menu-item-radio).
345
-
346
- - [`#2948`](https://github.com/ariakit/ariakit/pull/2948) Added `"use client"` directive to all modules.
347
-
348
- - [`#2949`](https://github.com/ariakit/ariakit/pull/2949) The [Select](https://ariakit.org/components/select) component will now display the selected option(s) on the underlying native select element even when the corresponding [`SelectItem`](https://ariakit.org/reference/select-item) components aren't rendered.
349
-
350
- This comes in handy when the [`SelectPopover`](https://ariakit.org/reference/select-popover) component is rendered dynamically (for instance, using the [`unmountOnHide`](https://ariakit.org/reference/select-popover#unmountonhide) prop) or a [`defaultValue`](https://ariakit.org/reference/select-provider#defaultvalue) is given without a matching [`SelectItem`](https://ariakit.org/reference/select-item) component.
351
-
352
- - Improved JSDocs.
353
-
354
- - Updated dependencies: `@ariakit/react-core@0.3.5`.
355
-
356
- ## 0.3.4
357
-
358
- ### Patch Changes
359
-
360
- - [`#2894`](https://github.com/ariakit/ariakit/pull/2894) Fixed [Command](https://ariakit.org/components/command) and related components not preventing the default behavior on <kbd>Space</kbd> keyup on non-native button elements.
361
-
362
- - [`#2896`](https://github.com/ariakit/ariakit/pull/2896) Controlled store updates are no longer flushed synchronously.
363
-
364
- Previously, we were wrapping _all_ controlled store updates with [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/flushSync). This approach proved to be quite fragile and led to a few problems. Now, we only apply this to specific updates that require synchronous flushing.
365
-
366
- This change shouldn't impact your application, unless you're already facing problems, which could be fixed by this. If you find any issues stemming from this change, please let us know. Regardless, you can always opt into the previous behavior by wrapping your own updates in `flushSync` when needed:
367
-
368
- ```js
369
- const [open, setOpen] = useState(false);
370
-
371
- useDialogStore({
372
- open,
373
- setOpen(open) {
374
- ReactDOM.flushSync(() => setOpen(open));
375
- },
376
- });
377
- ```
378
-
379
- - [`#2909`](https://github.com/ariakit/ariakit/pull/2909) Fixed [Disclosure](https://ariakit.org/components/disclosure) and related components not waiting for the exit animation to complete before hiding the content element.
380
-
381
- - [`#2909`](https://github.com/ariakit/ariakit/pull/2909) The [Dialog](https://ariakit.org/components/dialog) and related components can now receive controlled [`open`](https://ariakit.org/reference/dialog#open) and [`onClose`](https://ariakit.org/reference/dialog#onclose) props, allowing them to be used without a store:
382
-
383
- ```jsx
384
- const [open, setOpen] = useState(false);
385
-
386
- <Dialog
387
- open={open}
388
- onClose={() => setOpen(false)}
389
- >
390
- ```
391
-
392
- - [`#2922`](https://github.com/ariakit/ariakit/pull/2922) Added [`unmountOnHide`](https://ariakit.org/reference/disclosure-content#unmountonhide) prop to [`DisclosureContent`](https://ariakit.org/reference/disclosure-content), [`Dialog`](https://ariakit.org/reference/dialog) and related components.
393
-
394
- Conditionally rendering the [`Dialog`](https://ariakit.org/reference/dialog) and related components will continue to work as before:
395
-
396
- ```jsx
397
- open && <Dialog>
398
- ```
399
-
400
- Now, you can do the same thing using the [`unmountOnHide`](https://ariakit.org/reference/dialog#unmountonhide) prop:
401
-
402
- ```jsx
403
- <Dialog unmountOnHide>
404
- ```
405
-
406
- - Improved JSDocs.
407
-
408
- - Updated dependencies: `@ariakit/react-core@0.3.4`.
409
-
410
- ## 0.3.3
411
-
412
- ### Patch Changes
413
-
414
- - [`#2820`](https://github.com/ariakit/ariakit/pull/2820) Added missing `aria-haspopup` attribute to [`DialogDisclosure`](https://ariakit.org/reference/dialog-disclosure) and [`PopoverDisclosure`](https://ariakit.org/reference/popover-disclosure).
415
-
416
- - [`#2858`](https://github.com/ariakit/ariakit/pull/2858) Fixed the [`setValueOnMove`](https://ariakit.org/reference/use-select-store#setvalueonmove) state on the [Select](https://ariakit.org/components/select) module not syncing between multiple stores.
417
-
418
- The following now works as expected:
419
-
420
- ```js
421
- const store1 = useSelectStore();
422
- const store2 = useSelectStore({ store: store1, setValueOnMove: true });
423
-
424
- store1.useState("setValueOnMove") === store2.useState("setValueOnMove"); // true
425
- ```
426
-
427
- - [`#2862`](https://github.com/ariakit/ariakit/pull/2862) Elements inside [Dialog](https://ariakit.org/components/dialog) and derived components are now properly disabled when the dialog is animating out.
428
-
429
- - [`#2862`](https://github.com/ariakit/ariakit/pull/2862) Fixed a bug that occurred when rendering nested [Dialog](https://ariakit.org/components/dialog) elements with a third-party dialog interspersed.
430
-
431
- Previously, Ariakit didn't recognize the third-party dialog as a nested dialog when the lowest dialog opened.
432
-
433
- - [`#2862`](https://github.com/ariakit/ariakit/pull/2862) The [`hideOnEscape`](https://ariakit.org/reference/dialog#hideonescape) prop is now triggered during the capture phase.
434
-
435
- Essentially, this means that you can now prevent the propagation of the <kbd>Escape</kbd> keydown event to other elements in the DOM when it's used to close an Ariakit [Dialog](https://ariakit.org/components/dialog):
436
-
437
- ```jsx
438
- <Dialog
439
- hideOnEscape={(event) => {
440
- event.stopPropagation();
441
- return true;
442
- }}
443
- />
444
- ```
445
-
446
- - [`#2862`](https://github.com/ariakit/ariakit/pull/2862) Fixed an issue where the [Dialog](https://ariakit.org/components/dialog) component would automatically hide when parent dialogs closed.
447
-
448
- You can now render nested dialogs in the React tree and keep them open independently, provided they're not unmounted.
449
-
450
- - [`#2862`](https://github.com/ariakit/ariakit/pull/2862) Fixed the [Focusable](https://ariakit.org/components/focusable) and its derived components that were incorrectly calling the [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible) callback prop when the element had lost focus.
451
-
452
- This didn't align with the behavior of the [`data-focus-visible`](https://ariakit.org/guide/styling#data-focus-visible) attribute. The behavior now mirrors the attribute, which will only be omitted from the element if `event.preventDefault()` is invoked from within the [`onFocusVisible`](https://ariakit.org/reference/focusable#onfocusvisible) callback.
453
-
454
- - [`#2862`](https://github.com/ariakit/ariakit/pull/2862) The [`modal`](https://ariakit.org/reference/menu#modal) prop is now automatically disabled on nested [`Menu`](https://ariakit.org/reference/menu) components.
455
-
456
- - [`#2869`](https://github.com/ariakit/ariakit/pull/2869) Fixed uncaught `msg.startsWith` error.
457
-
458
- - Improved JSDocs.
459
-
460
- - Updated dependencies: `@ariakit/react-core@0.3.3`.
461
-
462
- ## 0.3.2
463
-
464
- ### Patch Changes
465
-
466
- - [`#2811`](https://github.com/ariakit/ariakit/pull/2811) **TypeScript**: Fixed missing `null` type on props from [`useMenuStore`](https://ariakit.org/reference/use-menu-store) ([`combobox`](https://ariakit.org/reference/use-menu-store#combobox), [`parent`](https://ariakit.org/reference/use-menu-store#parent), [`menubar`](https://ariakit.org/reference/use-menu-store#menubar)), and [`useSelectStore`](https://ariakit.org/reference/use-select-store) ([`combobox`](https://ariakit.org/reference/use-select-store#combobox)).
467
-
468
- - [`#2812`](https://github.com/ariakit/ariakit/pull/2812) Fixed an infinite loop issue when using [`MenuButton`](https://ariakit.org/reference/menu-buton) with a [`store`](https://ariakit.org/reference/menu-button#store) that is synchronized with another store.
469
-
470
- - Improved JSDocs.
471
-
472
- - Updated dependencies: `@ariakit/react-core@0.3.2`.
473
-
474
- ## 0.3.1
475
-
476
- ### Patch Changes
477
-
478
- - [`#2804`](https://github.com/ariakit/ariakit/pull/2804) New in this version: [**Component providers**](https://ariakit.org/guide/component-providers)
479
-
480
- Component providers are optional components that act as a higher-level API on top of [component stores](https://ariakit.org/guide/component-stores). They wrap Ariakit components and automatically provide a store to them.
481
-
482
- - [`#2797`](https://github.com/ariakit/ariakit/pull/2797) Fixed a regression on `Dialog` regarding the timing of its "focus on hide" behavior.
483
-
484
- - [`#2801`](https://github.com/ariakit/ariakit/pull/2801) Fixed `values.slice` error that would occur when clicking on `FormCheckbox` that uses an integer-like field name.
485
-
486
- - [`#2802`](https://github.com/ariakit/ariakit/pull/2802) Added `setMounted` prop to `useDisclosureStore` and derived component stores. This callback prop can be used to react to changes in the `mounted` state. For example:
487
-
488
- ```js
489
- useDialogStore({
490
- setMounted(mounted) {
491
- if (!mounted) {
492
- props.onUnmount?.();
493
- }
494
- },
495
- });
496
- ```
497
-
498
- - [`#2803`](https://github.com/ariakit/ariakit/pull/2803) The `Toolbar` component can now render without needing an explicit `store` prop or a `ToolbarProvider` component wrap. `Toolbar` now also supports certain store props such as `focusLoop`, `orientation`, `rtl`, and `virtualFocus`.
499
-
500
- - Updated dependencies: `@ariakit/react-core@0.3.1`.
501
-
502
- ## 0.3.0
503
-
504
- ### Minor Changes
505
-
506
- - [`#2714`](https://github.com/ariakit/ariakit/pull/2714) Added support for a dynamic `store` prop on component stores.
507
-
508
- This is similar to the `store` prop on components, keeping both stores in sync. Now, component store hooks can support modifying the value of the `store` prop after the initial render. For instance:
509
-
510
- ```js
511
- // props.store can change between renders now
512
- const checkbox = useCheckboxStore({ store: props.store });
513
- ```
514
-
515
- When the `store` prop changes, the object returned from the store hook will update as well. Consequently, effects and hooks that rely on the store will re-run.
516
-
517
- While it's unlikely, this **could represent a breaking change** if you're depending on the `store` prop in component stores to only acknowledge the first value passed to it.
518
-
519
- - [`#2783`](https://github.com/ariakit/ariakit/pull/2783) **BREAKING** _(This should affect very few people)_: The `combobox` state on `useSelectStore` has been replaced by the `combobox` property on the store object.
520
-
521
- **Before:**
522
-
523
- ```js
524
- const combobox = useComboboxStore();
525
- const select = useSelectStore({ combobox });
526
- const hasCombobox = select.useState("combobox");
527
- ```
528
-
529
- **After:**
530
-
531
- ```js
532
- const combobox = useComboboxStore();
533
- const select = useSelectStore({ combobox });
534
- const hasCombobox = Boolean(select.combobox);
535
- ```
536
-
537
- In the example above, `select.combobox` is literally the same as the `combobox` store. It will be defined if the `combobox` store is passed to `useSelectStore`.
538
-
539
- - [`#2783`](https://github.com/ariakit/ariakit/pull/2783) **BREAKING** _(This should affect very few people)_: The `select` and `menu` props on `useComboboxStore` have been removed. If you need to compose `Combobox` with `Select` or `Menu`, use the `combobox` prop on `useSelectStore` or `useMenuStore` instead.
540
-
541
- - [`#2717`](https://github.com/ariakit/ariakit/pull/2717) The `children` prop as a function has been deprecated on all components. Use the [`render`](https://ariakit.org/guide/composition#explicit-render-function) prop instead.
542
-
543
- - [`#2717`](https://github.com/ariakit/ariakit/pull/2717) The `as` prop has been deprecated on all components. Use the [`render`](https://ariakit.org/guide/composition) prop instead.
544
-
545
- - [`#2717`](https://github.com/ariakit/ariakit/pull/2717) The `backdropProps` prop has been deprecated on `Dialog` and derived components. Use the [`backdrop`](https://ariakit.org/reference/dialog#backdrop) prop instead.
546
-
547
- - [`#2745`](https://github.com/ariakit/ariakit/pull/2745) Component stores will now throw an error if they receive another store prop in conjunction with default prop values.
548
-
549
- ### Patch Changes
550
-
551
- - [`#2737`](https://github.com/ariakit/ariakit/pull/2737) Fixed controlled component stores rendering with a stale state.
552
-
553
- - [`#2783`](https://github.com/ariakit/ariakit/pull/2783) Component store objects now contain properties for the composed stores passed to them as props. For instance, `useSelectStore({ combobox })` will return a `combobox` property if the `combobox` prop is specified.
554
-
555
- - [`#2785`](https://github.com/ariakit/ariakit/pull/2785) Added `parent` and `menubar` properties to the menu store. These properties are automatically set when rendering nested menus or menus within a menubar.
556
-
557
- Now, it also supports rendering nested menus that aren't nested in the React tree. In this case, you would have to supply the parent menu store manually to the child menu store.
558
-
559
- These properties are also included in the returned menu store object, allowing you to verify whether the menu is nested. For instance:
560
-
561
- ```jsx
562
- const menu = useMenuStore(props);
563
- const isNested = Boolean(menu.parent);
564
- ```
565
-
566
- - [`#2795`](https://github.com/ariakit/ariakit/pull/2795) Updated the `Menu` component so the `composite` and `typeahead` props are automatically set to `false` when combining it with a `Combobox` component.
567
-
568
- This means you'll not need to explicitly pass `composite={false}` when building a [Menu with Combobox](https://ariakit.org/examples/menu-combobox) component.
569
-
570
- - [`#2796`](https://github.com/ariakit/ariakit/pull/2796) Composed store props such as `useSelectStore({ combobox })` now accept `null` as a value.
571
-
572
- - Updated dependencies: `@ariakit/react-core@0.3.0`.
573
-
574
- ## 0.2.17
575
-
576
- ### Patch Changes
577
-
578
- - [`#2718`](https://github.com/ariakit/ariakit/pull/2718) Fixed import of `use-sync-external-store` package for ESM builds.
579
-
580
- - Updated dependencies: `@ariakit/react-core@0.2.17`.
581
-
582
- ## 0.2.16
583
-
584
- ### Patch Changes
585
-
586
- - Fixed `Collection` not populating the `items` state when passing `items` and `setItems` to `useCollectionStore`. ([#2704](https://github.com/ariakit/ariakit/pull/2704))
587
-
588
- - Fixed `Combobox` controlled derived state. ([#2705](https://github.com/ariakit/ariakit/pull/2705))
589
-
590
- - The `Menu`'s `disclosureElement` state is now guaranteed to be defined as the `MenuButton` element. Before, it could be overridden by a different element that received focus right before the menu opened, which could cause some weird issues. ([#2695](https://github.com/ariakit/ariakit/pull/2695))
591
-
592
- - Fixed `Tooltip` not closing when it's open while another popover is still visible. ([#2692](https://github.com/ariakit/ariakit/pull/2692))
593
-
594
- - Updated dependencies: `@ariakit/react-core@0.2.16`.
595
-
596
- ## 0.2.15
597
-
598
- ### Patch Changes
599
-
600
- - Fixed clicking on a custom dialog backdrop hiding all parent dialogs. ([#2688](https://github.com/ariakit/ariakit/pull/2688))
601
-
602
- - Fixed `ReactDOM.flushSync` warning on low-end devices. ([#2677](https://github.com/ariakit/ariakit/pull/2677))
603
-
604
- - Fixed `Tooltip` not hiding when opening a dialog that was previously unmounted. ([#2691](https://github.com/ariakit/ariakit/pull/2691))
605
-
606
- - Fixed `Focusable` not triggering `onFocusVisible` (and thus not rendering the `data-focus-visible` attribute) when an element is focused after closing a dialog. ([#2691](https://github.com/ariakit/ariakit/pull/2691))
607
-
608
- - Fixed `Tooltip` showing on mouse move right after it was dismissed (by pressing Esc or opening a popover, for example). ([#2691](https://github.com/ariakit/ariakit/pull/2691))
609
-
610
- - Updated dependencies: `@ariakit/react-core@0.2.15`.
611
-
612
- ## 0.2.14
613
-
614
- ### Patch Changes
615
-
616
- - Fixed `flushSync` warning. ([#2672](https://github.com/ariakit/ariakit/pull/2672))
617
-
618
- - Updated dependencies: `@ariakit/react-core@0.2.14`.
619
-
620
- ## 0.2.13
621
-
622
- ### Patch Changes
623
-
624
- - The `as` prop has been soft deprecated. Use the [`render`](https://ariakit.org/guide/composition) prop instead. ([#2621](https://github.com/ariakit/ariakit/pull/2621))
625
-
626
- - The `Combobox` component now properly disables the `autoSelect` behavior when the user is scrolling through the list of options. This should prevent issues when scrolling virtualized or infinite lists. ([#2617](https://github.com/ariakit/ariakit/pull/2617))
627
-
628
- - Fixed `Combobox` with `autoSelect` always focusing on the first item when a virtualized list is scrolled using arrow keys. ([#2636](https://github.com/ariakit/ariakit/pull/2636))
629
-
630
- - Controlled store updates are now flushed synchronously. This should prevent issues when controlling a `Combobox` by passing `value` and `setValue` to the combobox store, for example. ([#2671](https://github.com/ariakit/ariakit/pull/2671))
631
-
632
- - Updated dependencies: `@ariakit/react-core@0.2.13`.
633
-
634
- ## 0.2.12
635
-
636
- ### Patch Changes
637
-
638
- - Fixed `CompositeItem` not being tabbable before hydration. ([#2601](https://github.com/ariakit/ariakit/pull/2601))
639
-
640
- - Updated dependencies: `@ariakit/react-core@0.2.12`.
641
-
642
- ## 0.2.11
643
-
644
- ### Patch Changes
645
-
646
- - Fixed `Combobox` with `autoSelect` and `autoComplete="both"` so the value is maintained when the combobox input loses focus. ([#2595](https://github.com/ariakit/ariakit/pull/2595))
647
-
648
- - Fixed `Combobox` with `autoSelect` prop causing a scroll jump when the popover was opened by typing on the input. ([#2599](https://github.com/ariakit/ariakit/pull/2599))
649
-
650
- - Fixed `Combobox` with the `autoSelect` prop not automatically selecting the first option when used in combination with `Select` after the selected option is re-mounted. ([#2592](https://github.com/ariakit/ariakit/pull/2592))
651
-
652
- - Updated composite item components with the `focusOnHover` prop set to `true` so that they don't scroll into view when hovered. ([#2590](https://github.com/ariakit/ariakit/pull/2590))
653
-
654
- - Fixed `Menu` initial focus when used in combination with `Combobox`. ([#2582](https://github.com/ariakit/ariakit/pull/2582))
655
-
656
- - Fixed `Popover` not updating its position when the placement changes while the popover is closed. ([#2587](https://github.com/ariakit/ariakit/pull/2587))
657
-
658
- - Fixed `Select` not scrolling selected option into view in Safari. ([#2591](https://github.com/ariakit/ariakit/pull/2591))
659
-
660
- - Updated dependencies: `@ariakit/react-core@0.2.11`.
661
-
662
- ## 0.2.10
663
-
664
- ### Patch Changes
665
-
666
- - Fixed `defaultItems` passed to the collection store being overriden when new items are added. ([#2559](https://github.com/ariakit/ariakit/pull/2559))
667
-
668
- - Fixed `Combobox` with the `autoSelect` prop not allowing the user to scroll when the list of items is virtualized. ([#2562](https://github.com/ariakit/ariakit/pull/2562))
669
-
670
- - Fixed `Composite` not moving focus to items by pressing the arrow keys when the active item isn't rendered. ([#2561](https://github.com/ariakit/ariakit/pull/2561))
671
-
672
- - Fixed `CompositeItem` not being tabbable before hydration. ([#2565](https://github.com/ariakit/ariakit/pull/2565))
673
-
674
- - Updated dependencies: `@ariakit/react-core@0.2.10`.
675
-
676
- ## 0.2.9
677
-
678
- ### Patch Changes
679
-
680
- - Added new `disclosure` prop to the `Disclosure` store. ([#2518](https://github.com/ariakit/ariakit/pull/2518))
681
-
682
- - Fixed `Focusable` not receiving focus when rendered as a native button on Safari. ([#2534](https://github.com/ariakit/ariakit/pull/2534))
683
-
684
- - Fixed `Dialog` with `preventBodyScroll` set to `true` (default) not preventing body scroll on nested animated dialogs. ([#2534](https://github.com/ariakit/ariakit/pull/2534))
685
-
686
- - Updated dependencies: `@ariakit/react-core@0.2.9`.
687
-
688
- ## 0.2.8
689
-
690
- ### Patch Changes
691
-
692
- - The `render` prop now supports a `ReactElement` as a value. See the [Composition](https://ariakit.org/guide/composition) guide for more information. ([#2486](https://github.com/ariakit/ariakit/pull/2486))
693
-
694
- - Updated dependencies: `@ariakit/react-core@0.2.8`.
695
-
696
- ## 0.2.7
697
-
698
- ### Patch Changes
699
-
700
- - Fixed deeply nested `Dialog` not removing the `inert` attribute from elements outside when closed. ([#2507](https://github.com/ariakit/ariakit/pull/2507))
701
-
702
- - Updated dependencies: `@ariakit/react-core@0.2.7`.
703
-
704
- ## 0.2.6
705
-
706
- ### Patch Changes
707
-
708
- - Added missing `types` field to proxy package.json files. ([#2489](https://github.com/ariakit/ariakit/pull/2489))
709
-
710
- - Updated dependencies: `@ariakit/react-core@0.2.6`.
711
-
712
- ## 0.2.5
713
-
714
- ### Patch Changes
715
-
716
- - Added `.cjs` and `.js` extensions to paths in proxy package.json files to support bundlers that can't automaically resolve them. ([#2487](https://github.com/ariakit/ariakit/pull/2487))
717
-
718
- - Updated dependencies: `@ariakit/react-core@0.2.5`.
719
-
720
- ## 0.2.4
721
-
722
- ### Patch Changes
723
-
724
- - The `Checkbox` component now accepts `string[]` as the `value` prop. This is to conform with the native input prop type. If a string array is passed, it will be stringified, just like in the native input element. ([#2456](https://github.com/ariakit/ariakit/pull/2456))
725
-
726
- - Fixed the `clickOnEnter` prop on `Checkbox` not working when rendering the component as a native input element. ([#2456](https://github.com/ariakit/ariakit/pull/2456))
727
-
728
- - Fixed typeahead behavior when the composite item element's text content starts with an empty space. ([#2475](https://github.com/ariakit/ariakit/pull/2475))
729
-
730
- - Removed the delay before focusing on the final focus element when a dialog is closed. ([#2462](https://github.com/ariakit/ariakit/pull/2462))
731
-
732
- - Fixed `Dialog` wrongly focusing on the final focus element when a dialog is closed by clicking on another dialog. ([#2462](https://github.com/ariakit/ariakit/pull/2462))
733
-
734
- - Fixed `Disclosure` timing to set the `disclosureElement` state on the disclosure store. ([#2462](https://github.com/ariakit/ariakit/pull/2462))
735
-
736
- - Removed the `hideOnControl` prop from `Hovercard`. ([#2478](https://github.com/ariakit/ariakit/pull/2478))
737
-
738
- - Fixed clicking outside a `Dialog` when there's an ancestor element between the dialog content element and the portal element. ([#2482](https://github.com/ariakit/ariakit/pull/2482))
739
-
740
- - Fixed `Popover` with the `updatePosition` prop not moving focus into the popover when it opens. ([#2482](https://github.com/ariakit/ariakit/pull/2482))
741
-
742
- - Updated the `updatePosition` prop type on `Popover` to allow for returning a `Promise`. ([#2482](https://github.com/ariakit/ariakit/pull/2482))
743
-
744
- - Updated dependencies: `@ariakit/react-core@0.2.4`.
745
-
746
- ## 0.2.3
747
-
748
- ### Patch Changes
749
-
750
- - Updated the `SelectPopover` component so the `composite` and `typeahead` props are automatically set to `false` when combining it with a `Combobox` component using the `combobox` prop from the select store. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
751
-
752
- This means you'll not need to explicitly pass `composite={false}` when building a [Select with Combobox](https://ariakit.org/examples/select-combobox) component.
753
-
754
- - The `ComboboxItem` component will now register itself on the combobox store even when the combobox is closed. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
755
-
756
- - Fixed `Combobox` with `virtualFocus` set to `true` (default) always reseting the focus when using VoiceOver and Safari to navigate through the items. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
757
-
758
- - Fixed `autoComplete` prop type on `Combobox` conflicting with the native `autoComplete` prop. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
759
-
760
- It's now possible to extend props from `InputHTMLAttributes` without having to `Omit` the `autoComplete` prop.
761
-
762
- - The `SelectList` and `SelectPopover` components will now automatically render the `aria-multiselectable` attribute even when the `composite` prop is set to `false`, but only when the underlying element has a composite role. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
763
-
764
- - Fixed `Composite` rendering the `aria-activedescendant` attribute even when the `composite` prop was set to `false`. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
765
-
766
- - Fixed `Focusable` triggering focus visible when pressing the <kbd>Alt</kbd>/<kbd>Option</kbd> key. ([#2428](https://github.com/ariakit/ariakit/pull/2428))
767
-
768
- - Fixed `activeId` state on `Tab` not updating correctly when setting `selectedId` with the Next.js App Router. ([#2443](https://github.com/ariakit/ariakit/pull/2443))
769
-
770
- - Updated dependencies: `@ariakit/react-core@0.2.3`.
771
-
772
- ## 0.2.2
773
-
774
- ### Patch Changes
775
-
776
- - Added `alwaysVisible` prop to `DisclosureContent` and derived components to allow the content to be visible even when the `open` state is `false`. ([#2438](https://github.com/ariakit/ariakit/pull/2438))
777
-
778
- - Fixed `useHovercardStore` and `useTooltipStore` not updating the state when the `timeout`, `showTimeout` or `hideTimeout` props changed. ([#2421](https://github.com/ariakit/ariakit/pull/2421))
779
-
780
- - Fixed `useTooltipStore` not updating the state when the `type` or `skipTimeout` props changed. ([#2421](https://github.com/ariakit/ariakit/pull/2421))
781
-
782
- - Fixed `Dialog` moving focus on show and hide too early. ([#2421](https://github.com/ariakit/ariakit/pull/2421))
783
-
784
- - Fixed `Hovercard` and `Tooltip` hiding too early when pressing the `Escape` key. ([#2421](https://github.com/ariakit/ariakit/pull/2421))
785
-
786
- - Removed unnecessary `tabIndex={0}` prop from `TooltipAnchor`. ([#2421](https://github.com/ariakit/ariakit/pull/2421))
787
-
788
- - Updated dependencies: `@ariakit/react-core@0.2.2`.
789
-
790
- ## 0.2.1
791
-
792
- ### Patch Changes
793
-
794
- - Added a `render` prop to all components as a more flexible alternative to `children` as a function. ([#2411](https://github.com/ariakit/ariakit/pull/2411))
795
-
796
- - Updated dependencies: `@ariakit/react-core@0.2.1`.
797
-
798
- ## 0.2.0
799
-
800
- ### Minor Changes
801
-
802
- - **BREAKING**: Moved props from the `usePopoverStore` hook to the `Popover` component: `fixed`, `gutter`, `shift`, `flip`, `slide`, `overlap`, `sameWidth`, `fitViewport`, `arrowPadding`, `overflowPadding`, `getAnchorRect`, `renderCallback` (renamed to `updatePosition`). ([#2279](https://github.com/ariakit/ariakit/pull/2279))
803
-
804
- The exception is the `placement` prop that should still be passed to the store.
805
-
806
- **Before**:
807
-
808
- ```jsx
809
- const popover = usePopoverStore({
810
- placement: "bottom",
811
- fixed: true,
812
- gutter: 8,
813
- shift: 8,
814
- flip: true,
815
- slide: true,
816
- overlap: true,
817
- sameWidth: true,
818
- fitViewport: true,
819
- arrowPadding: 8,
820
- overflowPadding: 8,
821
- getAnchorRect: (anchor) => anchor?.getBoundingClientRect(),
822
- renderCallback: (props) => props.defaultRenderCallback(),
823
- });
824
-
825
- <Popover store={popover} />;
826
- ```
827
-
828
- **After**:
829
-
830
- ```jsx
831
- const popover = usePopoverStore({ placement: "bottom" });
832
-
833
- <Popover
834
- store={popover}
835
- fixed
836
- gutter={8}
837
- shift={8}
838
- flip
839
- slide
840
- overlap
841
- sameWidth
842
- fitViewport
843
- arrowPadding={8}
844
- overflowPadding={8}
845
- getAnchorRect={(anchor) => anchor?.getBoundingClientRect()}
846
- updatePosition={(props) => props.updatePosition()}
847
- />;
848
- ```
849
-
850
- This change affects all the hooks and components that use `usePopoverStore` and `Popover` underneath: `useComboboxStore`, `ComboboxPopover`, `useHovercardStore`, `Hovercard`, `useMenuStore`, `Menu`, `useSelectStore`, `SelectPopover`, `useTooltipStore`, `Tooltip`.
851
-
852
- With this change, the underlying `@floating-ui/dom` dependency has been also moved to the `Popover` component, which means it can be lazy loaded. See the [Lazy Popover](https://ariakit.org/examples/popover-lazy) example.
853
-
854
- - **BREAKING**: The backdrop element on the `Dialog` component is now rendered as a sibling rather than as a parent of the dialog. This should make it easier to animate them separately. ([#2407](https://github.com/ariakit/ariakit/pull/2407))
855
-
856
- This might be a breaking change if you're relying on their parent/child relationship for styling purposes (for example, to position the dialog in the center of the backdrop). If that's the case, you can apply the following styles to the dialog to achieve the same effect:
857
-
858
- ```css
859
- .dialog {
860
- position: fixed;
861
- inset: 1rem;
862
- margin: auto;
863
- height: fit-content;
864
- max-height: calc(100vh - 2 * 1rem);
865
- }
866
- ```
867
-
868
- These styles work even if the dialog is a child of the backdrop, so you can use them regardless of whether you're upgrading to this version or not.
869
-
870
- ### Patch Changes
871
-
872
- - Deprecated the `backdropProps` prop on the `Dialog` component. Use the `backdrop` prop instead. ([#2407](https://github.com/ariakit/ariakit/pull/2407))
873
-
874
- - The `backdrop` prop on the `Dialog` component now accepts a JSX element as its value. ([#2407](https://github.com/ariakit/ariakit/pull/2407))
875
-
876
- - The `Dialog` component will now wait for being unmounted before restoring the body scroll when the `hidden` prop is set to `false`. This should prevent the body scroll from being restored too early when the dialog is being animated out using third-party libraries like Framer Motion. ([#2407](https://github.com/ariakit/ariakit/pull/2407))
877
-
878
- - The `Tooltip` component now defaults to use `aria-describedby` instead of `aria-labelledby`. ([#2279](https://github.com/ariakit/ariakit/pull/2279))
879
-
880
- If you want to use the tooltip as a label for an anchor element, you can use the `type` prop on `useTooltipStore`:
881
-
882
- ```jsx
883
- useTooltipStore({ type: "label" });
884
- ```
885
-
886
- - The `Tooltip` component now supports mouse events. ([#2279](https://github.com/ariakit/ariakit/pull/2279))
887
-
888
- It's now possible to hover over the tooltip without it disappearing, which makes it compliant with [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html).
889
-
890
- - Fixed infinite loop on `Portal` with the `preserveTabOrder` prop set to `true` when the portalled element is placed right after its original position in the React tree. ([#2279](https://github.com/ariakit/ariakit/pull/2279))
891
-
892
- - Updated dependencies: `@ariakit/react-core@0.2.0`.
893
-
894
- ## 0.1.8
895
-
896
- ### Patch Changes
897
-
898
- - Fixed `DialogBackdrop` not including the `data-backdrop` attribute in the initial render, causing a flash of unstyled content when the dialog is initially open. ([#2369](https://github.com/ariakit/ariakit/pull/2369))
899
-
900
- - Fixed `Dialog` calling `hideOnInteractOutside` twice when clicking on the backdrop. ([#2369](https://github.com/ariakit/ariakit/pull/2369))
901
-
902
- - The built-in `DialogBackdrop` component is no longer focusable. ([#2369](https://github.com/ariakit/ariakit/pull/2369))
903
-
904
- - Call `autoFocusOnHide` and `autoFocusOnShow` with a `null` argument when there's no element to focus or the element is not focusable. This allows users to specify a fallback element to focus on hide or show. ([#2369](https://github.com/ariakit/ariakit/pull/2369))
905
-
906
- - Updated dependencies: `@ariakit/react-core@0.1.8`.
907
-
908
- ## 0.1.7
909
-
910
- ### Patch Changes
911
-
912
- - Fixed `Menu` focusing on the first menu item rather than the menu container when opened with a mouse click. ([#2339](https://github.com/ariakit/ariakit/pull/2339))
913
-
914
- - Added `getPersistentElements` prop to `Dialog` to better support third-party elements that are already in the DOM by the time the dialog is opened. ([#2339](https://github.com/ariakit/ariakit/pull/2339))
915
-
916
- - Added support on `Dialog` for nested/parallel dialogs, such as portalled dialogs created by third-party libraries and extensions. ([#2339](https://github.com/ariakit/ariakit/pull/2339))
917
-
918
- - Fixed nested `Dialog` closing when dragging from the nested dialog to the parent dialog. ([#2339](https://github.com/ariakit/ariakit/pull/2339))
919
-
920
- - Fixed build target. ([#2355](https://github.com/ariakit/ariakit/pull/2355))
921
-
922
- - Updated JSDocs.
923
-
924
- - Updated dependencies: `@ariakit/react-core@0.1.7`, `@ariakit/core@0.1.5`.
925
-
926
- ## 0.1.6
927
-
928
- ### Patch Changes
929
-
930
- - Fixed `Select` component causing a scroll jump when it's dynamically rendered in a portal. ([#2322](https://github.com/ariakit/ariakit/pull/2322))
931
-
932
- - Fixed a bug where passing controlled props to a component store wouldn't always call the state setter with an updated value. ([#2328](https://github.com/ariakit/ariakit/pull/2328))
933
-
934
- - Fixed `Menu` not respecting `hidden={false}`. ([#2328](https://github.com/ariakit/ariakit/pull/2328))
935
-
936
- - Updated JSDocs.
937
-
938
- - Updated dependencies: `@ariakit/react-core@0.1.6`, `@ariakit/core@0.1.4`.
939
-
940
- ## 0.1.5
941
-
942
- ### Patch Changes
943
-
944
- - Fixed `FormRadio` error when not explicitly providing the composite store. ([#2313](https://github.com/ariakit/ariakit/pull/2313))
945
-
946
- - Fixed invariant error messages on `Menu` components. ([#2318](https://github.com/ariakit/ariakit/pull/2318))
947
-
948
- - Updated validate and submit callbacks on `Form` so they always run in a consistent order. ([#2319](https://github.com/ariakit/ariakit/pull/2319))
949
-
950
- - Fixed nested `Dialog` components when they are conditionally mounted. ([#2310](https://github.com/ariakit/ariakit/pull/2310))
951
-
952
- - Updated dependencies: `@ariakit/react-core@0.1.5`, `@ariakit/core@0.1.3`.
953
-
954
- ## 0.1.4
955
-
956
- ### Patch Changes
957
-
958
- - Added support for the `inert` attribute on the `Dialog` component. If the browser supports `inert`, modal dialogs will now use it rather than focus trap regions. ([#2301](https://github.com/ariakit/ariakit/pull/2301))
959
-
960
- - Fixed nested modal `Dialog` also closing the parent dialog when clicking outside. ([#2300](https://github.com/ariakit/ariakit/pull/2300))
961
-
962
- - Fixed modal `Dialog` eventually losing focus to `document.body`. ([#2300](https://github.com/ariakit/ariakit/pull/2300))
963
-
964
- - Fixed `Combobox` with `autoSelect` and `autoComplete` set to `both` or `inline` where the completion string would lose its selected state. ([#2308](https://github.com/ariakit/ariakit/pull/2308))
965
-
966
- - Fixed `Combobox` not processing composition text (like chinese characters or accents). ([#2308](https://github.com/ariakit/ariakit/pull/2308))
967
-
968
- - Updated dependencies: `@ariakit/react-core@0.1.4`.
969
-
970
- ## 0.1.3
971
-
972
- ### Patch Changes
973
-
974
- - Fixed `Dialog` not returning focus when closed when rendered with `React.lazy`. ([#2290](https://github.com/ariakit/ariakit/pull/2290))
975
-
976
- - Fixed `Hovercard` being shown on touch/tap on mobile devices. ([#2291](https://github.com/ariakit/ariakit/pull/2291))
977
-
978
- - Fixed `Hovercard` not properly cleaning up the timeout to hide the card when
979
- unmounted. ([#2289](https://github.com/ariakit/ariakit/pull/2289))
980
-
981
- - Updated dependencies: `@ariakit/react-core@0.1.3`, `@ariakit/core@0.1.2`.
982
-
983
- ## 0.1.2
984
-
985
- ### Patch Changes
986
-
987
- - Added missing `defaultValue` prop back to `useRadioStore`. ([#2265](https://github.com/ariakit/ariakit/pull/2265))
988
-
989
- - Updated dependencies: `@ariakit/core@0.1.1`, `@ariakit/react-core@0.1.2`.
990
-
991
- ## 0.1.1
992
-
993
- ### Patch Changes
994
-
995
- - Removed extra `console.log` from `Hovercard`.
996
-
997
- - Updated dependencies: `@ariakit/react-core@0.1.1`.
998
-
999
- ## 0.1.0
1000
-
1001
- ### Minor Changes
1002
-
1003
- - `Combobox` doesn't support filtering via the `list` and `matches` props anymore. Instead, you can use a library such as [match-sorter](https://github.com/kentcdodds/match-sorter) to filter the list.
1004
-
1005
- Before:
1006
-
1007
- ```jsx
1008
- const combobox = useComboboxState({ list });
1009
-
1010
- combobox.matches.map((value) => <ComboboxItem key={value} value={value} />);
1011
- ```
1012
-
1013
- After:
1014
-
1015
- ```jsx
1016
- const combobox = useComboboxStore();
1017
- const value = combobox.useState("value");
1018
- const matches = useMemo(() => matchSorter(list, value), [value]);
1019
-
1020
- matches.map((value) => <ComboboxItem key={value} value={value} />);
1021
- ```
1022
-
1023
- This gives you more control over the filtering process, and you can use any library you want. Besides [match-sorter](https://github.com/kentcdodds/match-sorter), we also recommend [fast-fuzzy](https://github.com/EthanRutherford/fast-fuzzy) for fuzzy matching.
1024
-
1025
- - Replaced state hooks (e.g., `useComboboxState`) with component stores (e.g., `useComboboxStore`).
1026
-
1027
- Before:
1028
-
1029
- ```jsx
1030
- const combobox = useComboboxState({ defaultValue: "value" });
1031
- const value = combobox.value;
1032
-
1033
- <Combobox state={combobox} />;
1034
- ```
1035
-
1036
- After:
1037
-
1038
- ```jsx
1039
- const combobox = useComboboxStore({ defaultValue: "value" });
1040
- const value = combobox.useState("value");
1041
-
1042
- <Combobox store={combobox} />;
1043
- ```
1044
-
1045
- This change applies to all state hooks, not just combobox, and has some API differences. Please, refer to the TypeScript definitions for more information. Learn more about the motivation behind this change in the [RFC](https://github.com/ariakit/ariakit/issues/1875).
1046
-
1047
- - The `initialFocusRef` and `finalFocusRef` props from `Dialog` and derived components have been renamed to `initialFocus` and `finalFocus` respectively. They now support `HTMLElement` in addition to refs.
1048
-
1049
- ```diff
1050
- - <Dialog initialFocusRef={initialFocusRef} finalFocusRef={finalFocusRef} />
1051
- + <Dialog initialFocus={initialFocusRef} finalFocus={finalFocusRef} />
1052
- ```
1053
-
1054
- - `useMenuStore` and `useSelectStore` can now receive a `combobox` prop to combine them with a `Combobox` component. This replaces the old method of passing the result of `useComboboxState` directly as an argument to `useMenuState` and `useSelectState`.
1055
-
1056
- Before:
1057
-
1058
- ```jsx
1059
- const combobox = useComboboxState();
1060
- const menu = useMenuState(combobox);
1061
- const select = useSelectState(combobox);
1062
- ```
1063
-
1064
- After:
1065
-
1066
- ```jsx
1067
- const combobox = useComboboxStore();
1068
- const menu = useMenuStore({ combobox });
1069
- const select = useSelectStore({ combobox });
1070
- ```
1071
-
1072
- - Updated package names to include the `@ariakit` scope, providing a more distinct and specific namespace for our packages.
1073
-
1074
- Additionally, we've made a change to the versioning system, moving from `v2.0.0-beta.x` to `v0.x.x`. This alteration means that although the library is still in beta, we can release breaking changes in minor versions without disrupting projects that don't set exact versions in their `package.json`.
1075
-
1076
- ```diff
1077
- - npm i ariakit
1078
- + npm i @ariakit/react
1079
- ```
1080
-
1081
- - We've made changes to the package structure, and component hooks such as `useButton` and `useCheckbox` are no longer exported from `@ariakit/react`. Instead, you can import them from `@ariakit/react-core`:
1082
-
1083
- ```diff
1084
- - import { useButton } from "@ariakit/react";
1085
- + import { useButton } from "@ariakit/react-core/button/button";
1086
- ```
1087
-
1088
- By doing so, we can reduce the API surface of the `@ariakit/react` package and move towards a stable release. It's important to note that `@ariakit/react-core` does not follow semver conventions, and breaking changes may be introduced in minor and patch versions.
1089
-
1090
- ### Patch Changes
1091
-
1092
- - Packages are now ESM by default (commonjs modules are still available with the `.cjs` extension).
412
+ ---
1093
413
 
1094
- - Updated dependencies: `@ariakit/react-core@0.1.0`, `@ariakit/core@0.1.0`.
414
+ [Previous versions](https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react/CHANGELOG-035.md)