Toolkit for building accessible web apps with React
MIT License
Bot releases are visible (Hide)
Published by github-actions[bot] about 1 year ago
#2935
Fixed TypeScript declaration files in CommonJS projects using NodeNext
for moduleResolution
.
#2948
Added "use client"
directive to all modules.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2935
Fixed TypeScript declaration files in CommonJS projects using NodeNext
for moduleResolution
.
#2945
Added name
and value
properties to non-native input elements rendered by Checkbox
, Radio
, MenuItemCheckbox
, and MenuItemRadio
.
It's now possible to access the name
and value
properties from the event.target
element in the onChange
event handler.
#2945
Fixed CompositeItem
and associated components not receiving the disabled
prop when it's being used by a higher-level component such as MenuItemCheckbox
or MenuItemRadio
.
#2945
It's now possible to control the menu values
state by passing the checked
, defaultChecked
and onChange
props to MenuItemCheckbox
and MenuItemRadio
.
#2948
Added "use client"
directive to all modules.
#2949
The Select component will now display the selected option(s) on the underlying native select element even when the corresponding SelectItem
components aren't rendered.
This comes in handy when the SelectPopover
component is rendered dynamically (for instance, using the unmountOnHide
prop) or a defaultValue
is given without a matching SelectItem
component.
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2935
Fixed TypeScript declaration files in CommonJS projects using NodeNext
for moduleResolution
.
#2945
Added name
and value
properties to non-native input elements rendered by Checkbox
, Radio
, MenuItemCheckbox
, and MenuItemRadio
.
It's now possible to access the name
and value
properties from the event.target
element in the onChange
event handler.
#2945
Fixed CompositeItem
and associated components not receiving the disabled
prop when it's being used by a higher-level component such as MenuItemCheckbox
or MenuItemRadio
.
#2945
It's now possible to control the menu values
state by passing the checked
, defaultChecked
and onChange
props to MenuItemCheckbox
and MenuItemRadio
.
#2948
Added "use client"
directive to all modules.
#2949
The Select component will now display the selected option(s) on the underlying native select element even when the corresponding SelectItem
components aren't rendered.
This comes in handy when the SelectPopover
component is rendered dynamically (for instance, using the unmountOnHide
prop) or a defaultValue
is given without a matching SelectItem
component.
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
Published by github-actions[bot] about 1 year ago
#2894
All @ariakit/test
functions now disable global.IS_REACT_ACT_ENVIRONMENT
before running and restore its value at the end.
#2894
Replaced the synchronous fireEvent
functions by asynchronous dispatch
functions.
#2894
The act
export has been removed.
#2894
Exported user event functions that were previously synchronous are now asyncrhonous.
#2899
The screen
module and its queries (getBy*
, queryBy*
, etc.) have been removed in favor of the query
module.
#2899
The within
module has been removed.
#2900
The render
function has been moved to the @ariakit/test/react
path. It's now asynchronous. The root @ariakit/test
package does not depend on React or React Testing Library anymore.
#2892
Updated function argument types to support null
instead of Element
, but added a runtime error in case null
is passed.
#2892
Added a new query
module that exports a query
/q
object with functions to query the DOM.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2894
Fixed Command and related components not preventing the default behavior on Space keyup on non-native button elements.
#2896
Controlled store updates are no longer flushed synchronously.
Previously, we were wrapping all controlled store updates with ReactDOM.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.
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:
const [open, setOpen] = useState(false);
useDialogStore({
open,
setOpen(open) {
ReactDOM.flushSync(() => setOpen(open));
},
});
#2897
Fixed CompositeRenderer
missing its items
state when used in a component with a mounted
state.
#2909
Fixed Disclosure and related components not waiting for the exit animation to complete before hiding the content element.
#2909
The Dialog and related components can now receive controlled open
and onClose
props, allowing them to be used without a store:
const [open, setOpen] = useState(false);
<Dialog
open={open}
onClose={() => setOpen(false)}
>
#2922
Added unmountOnHide
prop to DisclosureContent
, Dialog
and related components.
Conditionally rendering the Dialog
and related components will continue to work as before:
open && <Dialog>
Now, you can do the same thing using the unmountOnHide
prop:
<Dialog unmountOnHide>
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2894
Fixed Command and related components not preventing the default behavior on Space keyup on non-native button elements.
#2896
Controlled store updates are no longer flushed synchronously.
Previously, we were wrapping all controlled store updates with ReactDOM.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.
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:
const [open, setOpen] = useState(false);
useDialogStore({
open,
setOpen(open) {
ReactDOM.flushSync(() => setOpen(open));
},
});
#2909
Fixed Disclosure and related components not waiting for the exit animation to complete before hiding the content element.
#2909
The Dialog and related components can now receive controlled open
and onClose
props, allowing them to be used without a store:
const [open, setOpen] = useState(false);
<Dialog
open={open}
onClose={() => setOpen(false)}
>
#2922
Added unmountOnHide
prop to DisclosureContent
, Dialog
and related components.
Conditionally rendering the Dialog
and related components will continue to work as before:
open && <Dialog>
Now, you can do the same thing using the unmountOnHide
prop:
<Dialog unmountOnHide>
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2909
Fixed Disclosure and related components not waiting for the exit animation to complete before hiding the content element.
Improved JSDocs.
Published by github-actions[bot] about 1 year ago
#2820
Added missing aria-haspopup
attribute to DialogDisclosure
and PopoverDisclosure
.
#2858
Fixed the setValueOnMove
state on the Select module not syncing between multiple stores.
The following now works as expected:
const store1 = useSelectStore();
const store2 = useSelectStore({ store: store1, setValueOnMove: true });
store1.useState("setValueOnMove") === store2.useState("setValueOnMove"); // true
#2862
Renamed @ariakit/react-core/dialog/utils/disable-tree-outside
module to @ariakit/react-core/dialog/utils/disable-tree
.
#2862
Elements inside Dialog and derived components are now properly disabled when the dialog is animating out.
#2862
Fixed a bug that occurred when rendering nested Dialog elements with a third-party dialog interspersed.
Previously, Ariakit didn't recognize the third-party dialog as a nested dialog when the lowest dialog opened.
#2862
The hideOnEscape
prop is now triggered during the capture phase.
Essentially, this means that you can now prevent the propagation of the Escape keydown event to other elements in the DOM when it's used to close an Ariakit Dialog:
<Dialog
hideOnEscape={(event) => {
event.stopPropagation();
return true;
}}
/>
#2862
Fixed an issue where the Dialog component would automatically hide when parent dialogs closed.
You can now render nested dialogs in the React tree and keep them open independently, provided they're not unmounted.
#2862
Fixed the Focusable and its derived components that were incorrectly calling the onFocusVisible
callback prop when the element had lost focus.
This didn't align with the behavior of the 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
callback.
#2862
The modal
prop is now automatically disabled on nested Menu
components.
#2869
Fixed uncaught msg.startsWith
error.
Improved JSDocs.
Published by github-actions[bot] about 1 year ago
#2820
Added missing aria-haspopup
attribute to DialogDisclosure
and PopoverDisclosure
.
#2858
Fixed the setValueOnMove
state on the Select module not syncing between multiple stores.
The following now works as expected:
const store1 = useSelectStore();
const store2 = useSelectStore({ store: store1, setValueOnMove: true });
store1.useState("setValueOnMove") === store2.useState("setValueOnMove"); // true
#2862
Elements inside Dialog and derived components are now properly disabled when the dialog is animating out.
#2862
Fixed a bug that occurred when rendering nested Dialog elements with a third-party dialog interspersed.
Previously, Ariakit didn't recognize the third-party dialog as a nested dialog when the lowest dialog opened.
#2862
The hideOnEscape
prop is now triggered during the capture phase.
Essentially, this means that you can now prevent the propagation of the Escape keydown event to other elements in the DOM when it's used to close an Ariakit Dialog:
<Dialog
hideOnEscape={(event) => {
event.stopPropagation();
return true;
}}
/>
#2862
Fixed an issue where the Dialog component would automatically hide when parent dialogs closed.
You can now render nested dialogs in the React tree and keep them open independently, provided they're not unmounted.
#2862
Fixed the Focusable and its derived components that were incorrectly calling the onFocusVisible
callback prop when the element had lost focus.
This didn't align with the behavior of the 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
callback.
#2862
The modal
prop is now automatically disabled on nested Menu
components.
#2869
Fixed uncaught msg.startsWith
error.
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
@ariakit/[email protected]
.Published by github-actions[bot] about 1 year ago
#2811
TypeScript: Fixed missing null
type on props from useMenuStore
(combobox
, parent
, menubar
), and useSelectStore
(combobox
).
#2812
Fixed an infinite loop issue when using MenuButton
with a store
that is synchronized with another store.
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2811
TypeScript: Fixed missing null
type on props from useMenuStore
(combobox
, parent
, menubar
), and useSelectStore
(combobox
).
#2812
Fixed an infinite loop issue when using MenuButton
with a store
that is synchronized with another store.
Improved JSDocs.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
Published by github-actions[bot] about 1 year ago
@ariakit/[email protected]
.Published by github-actions[bot] about 1 year ago
#2797
Fixed a regression on Dialog
regarding the timing of its "focus on hide" behavior.
#2801
Fixed values.slice
error that would occur when clicking on FormCheckbox
that uses an integer-like field name.
#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:
useDialogStore({
setMounted(mounted) {
if (!mounted) {
props.onUnmount?.();
}
},
});
#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
.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2804
New in this version: Component providers
Component providers are optional components that act as a higher-level API on top of component stores. They wrap Ariakit components and automatically provide a store to them.
#2797
Fixed a regression on Dialog
regarding the timing of its "focus on hide" behavior.
#2801
Fixed values.slice
error that would occur when clicking on FormCheckbox
that uses an integer-like field name.
#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:
useDialogStore({
setMounted(mounted) {
if (!mounted) {
props.onUnmount?.();
}
},
});
#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
.
Updated dependencies: @ariakit/[email protected]
.
Published by github-actions[bot] about 1 year ago
#2801
Fixed values.slice
error that would occur when clicking on FormCheckbox
that uses an integer-like field name.Published by github-actions[bot] about 1 year ago
@ariakit/[email protected]
.Published by github-actions[bot] about 1 year ago
#2714
Added support for a dynamic store
prop on component stores.
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:
// props.store can change between renders now
const checkbox = useCheckboxStore({ store: props.store });
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.
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.
#2714
BREAKING: The useStore
function exported by @ariakit/react-core/utils/store
has been updated.
#2760
BREAKING: The useStoreState
function exported by @ariakit/react-core/utils/store
has been updated so it'll always run the selector callback even when the passed store is null
or undefined
.
#2783
BREAKING (This should affect very few people): The combobox
state on useSelectStore
has been replaced by the combobox
property on the store object.
Before:
const combobox = useComboboxStore();
const select = useSelectStore({ combobox });
const hasCombobox = select.useState("combobox");
After:
const combobox = useComboboxStore();
const select = useSelectStore({ combobox });
const hasCombobox = Boolean(select.combobox);
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
.
#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.
#2717
The children
prop as a function has been deprecated on all components. Use the render
prop instead.
#2717
The as
prop has been deprecated on all components. Use the render
prop instead.
#2717
The backdropProps
prop has been deprecated on Dialog
and derived components. Use the backdrop
prop instead.
#2745
Component stores will now throw an error if they receive another store prop in conjunction with default prop values.
#2737
Fixed controlled component stores rendering with a stale state.
#2758
Added CheckboxProvider
component and useCheckboxContext
hook.
#2759
Added CollectionProvider
component and useCollectionContext
hook.
#2769
Added DisclosureProvider
component and useDisclosureContext
hook.
#2770
Added CompositeProvider
component and useCompositeContext
hook.
#2771
Added DialogProvider
component and useDialogContext
hook.
#2774
Added PopoverProvider
component and usePopoverContext
hook.
#2775
Added ComboboxProvider
component and useComboboxContext
hook.
#2776
Added SelectProvider
component and useSelectContext
hook.
#2777
Added RadioProvider
component and useRadioContext
hook.
#2778
Added HovercardProvider
component and useHovercardContext
hook.
#2779
Added TabProvider
component and useTabContext
hook.
#2780
Added ToolbarProvider
component and useToolbarContext
hook.
#2781
Added TooltipProvider
component and useTooltipContext
hook.
#2782
Added FormProvider
component and useFormContext
hook.
#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.
#2785
Added MenuProvider
component and useMenuContext
hook.
#2785
Added MenuBarProvider
component and useMenuBarContext
hook.
#2785
Added parent
and menubar
properties to the menu store. These properties are automatically set when rendering nested menus or menus within a menubar.
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.
These properties are also included in the returned menu store object, allowing you to verify whether the menu is nested. For instance:
const menu = useMenuStore(props);
const isNested = Boolean(menu.parent);
#2794
The combobox
prop on useSelectStore
is now automatically set based on the context.
#2795
Updated the Menu
component so the composite
and typeahead
props are automatically set to false
when combining it with a Combobox
component.
This means you'll not need to explicitly pass composite={false}
when building a Menu with Combobox component.
#2795
The combobox
prop on useMenuStore
is now automatically set based on the context.
#2796
Composed store props such as useSelectStore({ combobox })
now accept null
as a value.
Updated dependencies: @ariakit/[email protected]
.