ariakit

Patch Changes

• Added .cjs and .js extensions to paths in proxy package.json files to support bundlers that can't automaically resolve them. (#2487)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Added .cjs and .js extensions to paths in proxy package.json files to support bundlers that can't automaically resolve them. (#2487)

Patch Changes

• Fixed several actions not considering hidden elements before dispatching events, which was causing a freeze in JSDOM. (#2462)

Patch Changes

• 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)

• Fixed the clickOnEnter prop on Checkbox not working when rendering the component as a native input element. (#2456)

• Fixed typeahead behavior when the composite item element's text content starts with an empty space. (#2475)

• Removed the delay before focusing on the final focus element when a dialog is closed. (#2462)

• Fixed Dialog wrongly focusing on the final focus element when a dialog is closed by clicking on another dialog. (#2462)

• Fixed Disclosure timing to set the disclosureElement state on the disclosure store. (#2462)

• Removed the hideOnControl prop from Hovercard. (#2478)

• Fixed clicking outside a Dialog when there's an ancestor element between the dialog content element and the portal element. (#2482)

• Fixed Popover with the updatePosition prop not moving focus into the popover when it opens. (#2482)

• Updated the updatePosition prop type on Popover to allow for returning a Promise. (#2482)

Patch Changes

• 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)

• Fixed the clickOnEnter prop on Checkbox not working when rendering the component as a native input element. (#2456)

• Fixed typeahead behavior when the composite item element's text content starts with an empty space. (#2475)

• Removed the delay before focusing on the final focus element when a dialog is closed. (#2462)

• Fixed Dialog wrongly focusing on the final focus element when a dialog is closed by clicking on another dialog. (#2462)

• Fixed Disclosure timing to set the disclosureElement state on the disclosure store. (#2462)

• Removed the hideOnControl prop from Hovercard. (#2478)

• Fixed clicking outside a Dialog when there's an ancestor element between the dialog content element and the portal element. (#2482)

• Fixed Popover with the updatePosition prop not moving focus into the popover when it opens. (#2482)

• Updated the updatePosition prop type on Popover to allow for returning a Promise. (#2482)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• 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)

  This means you'll not need to explicitly pass composite={false} when building a Select with Combobox component.

• The ComboboxItem component will now register itself on the combobox store even when the combobox is closed. (#2428)

• Fixed Combobox with virtualFocus set to true (default) always reseting the focus when using VoiceOver and Safari to navigate through the items. (#2428)

• Fixed autoComplete prop type on Combobox conflicting with the native autoComplete prop. (#2428)

  It's now possible to extend props from InputHTMLAttributes without having to Omit the autoComplete prop.

• 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)

• Fixed Composite rendering the aria-activedescendant attribute even when the composite prop was set to false. (#2428)

• Fixed Focusable triggering focus visible when pressing the Alt/Option key. (#2428)

• Added useAttribute hook.

• Fixed activeId state on Tab not updating correctly when setting selectedId with the Next.js App Router. (#2443)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• 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)

  This means you'll not need to explicitly pass composite={false} when building a Select with Combobox component.

• The ComboboxItem component will now register itself on the combobox store even when the combobox is closed. (#2428)

• Fixed Combobox with virtualFocus set to true (default) always reseting the focus when using VoiceOver and Safari to navigate through the items. (#2428)

• Fixed autoComplete prop type on Combobox conflicting with the native autoComplete prop. (#2428)

  It's now possible to extend props from InputHTMLAttributes without having to Omit the autoComplete prop.

• 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)

• Fixed Composite rendering the aria-activedescendant attribute even when the composite prop was set to false. (#2428)

• Fixed Focusable triggering focus visible when pressing the Alt/Option key. (#2428)

• Fixed activeId state on Tab not updating correctly when setting selectedId with the Next.js App Router. (#2443)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• 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)

  This means you'll not need to explicitly pass composite={false} when building a Select with Combobox component.

• Updated getScrollingElement function so it also considers horizontal scrolling elements.

• Fixed StringWithValue utility type.

• Fixed activeId state on Tab not updating correctly when setting selectedId with the Next.js App Router. (#2443)

Patch Changes

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Added alwaysVisible prop to DisclosureContent and derived components to allow the content to be visible even when the open state is false. (#2438)

• Fixed useHovercardStore and useTooltipStore not updating the state when the timeout, showTimeout or hideTimeout props changed. (#2421)

• Fixed useTooltipStore not updating the state when the type or skipTimeout props changed. (#2421)

• Fixed Dialog moving focus on show and hide too early. (#2421)

• Fixed Hovercard and Tooltip hiding too early when pressing the Escape key. (#2421)

• Removed unnecessary tabIndex={0} prop from TooltipAnchor. (#2421)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Added alwaysVisible prop to DisclosureContent and derived components to allow the content to be visible even when the open state is false. (#2438)

• Fixed useHovercardStore and useTooltipStore not updating the state when the timeout, showTimeout or hideTimeout props changed. (#2421)

• Fixed useTooltipStore not updating the state when the type or skipTimeout props changed. (#2421)

• Fixed Dialog moving focus on show and hide too early. (#2421)

• Fixed Hovercard and Tooltip hiding too early when pressing the Escape key. (#2421)

• Removed unnecessary tabIndex={0} prop from TooltipAnchor. (#2421)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Fixed useHovercardStore and useTooltipStore not updating the state when the timeout, showTimeout or hideTimeout props changed. (#2421)

Patch Changes

• Added a render prop to all components as a more flexible alternative to children as a function. (#2411)

Patch Changes

• Added a render prop to all components as a more flexible alternative to children as a function. (#2411)

• Updated dependencies: @ariakit/[email protected].

Patch Changes

• Updated dependencies: @ariakit/[email protected].

Minor Changes

• 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)

  The exception is the placement prop that should still be passed to the store.

  Before:

  const popover = usePopoverStore({
    placement: "bottom",
    fixed: true,
    gutter: 8,
    shift: 8,
    flip: true,
    slide: true,
    overlap: true,
    sameWidth: true,
    fitViewport: true,
    arrowPadding: 8,
    overflowPadding: 8,
    getAnchorRect: (anchor) => anchor?.getBoundingClientRect(),
    renderCallback: (props) => props.defaultRenderCallback(),
  });
  
  <Popover store={popover} />;
  

  After:

  const popover = usePopoverStore({ placement: "bottom" });
  
  <Popover
    store={popover}
    fixed
    gutter={8}
    shift={8}
    flip
    slide
    overlap
    sameWidth
    fitViewport
    arrowPadding={8}
    overflowPadding={8}
    getAnchorRect={(anchor) => anchor?.getBoundingClientRect()}
    updatePosition={(props) => props.updatePosition()}
  />;
  

  This change affects all the hooks and components that use usePopoverStore and Popover underneath: useComboboxStore, ComboboxPopover, useHovercardStore, Hovercard, useMenuStore, Menu, useSelectStore, SelectPopover, useTooltipStore, Tooltip.

  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 example.

• 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)

  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:

  .dialog {
    position: fixed;
    inset: 1rem;
    margin: auto;
    height: fit-content;
    max-height: calc(100vh - 2 * 1rem);
  }
  

  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.

Patch Changes

• Deprecated the backdropProps prop on the Dialog component. Use the backdrop prop instead. (#2407)

• The backdrop prop on the Dialog component now accepts a JSX element as its value. (#2407)

• 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)

• The Tooltip component now defaults to use aria-describedby instead of aria-labelledby. (#2279)

  If you want to use the tooltip as a label for an anchor element, you can use the type prop on useTooltipStore:

  useTooltipStore({ type: "label" });
  

• The Tooltip component now supports mouse events. (#2279)

  It's now possible to hover over the tooltip without it disappearing, which makes it compliant with WCAG 1.4.13.

• 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)

• Updated dependencies: @ariakit/[email protected].

Minor Changes

• 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)

  The exception is the placement prop that should still be passed to the store.

  Before:

  const popover = usePopoverStore({
    placement: "bottom",
    fixed: true,
    gutter: 8,
    shift: 8,
    flip: true,
    slide: true,
    overlap: true,
    sameWidth: true,
    fitViewport: true,
    arrowPadding: 8,
    overflowPadding: 8,
    getAnchorRect: (anchor) => anchor?.getBoundingClientRect(),
    renderCallback: (props) => props.defaultRenderCallback(),
  });
  
  <Popover store={popover} />;
  

  After:

  const popover = usePopoverStore({ placement: "bottom" });
  
  <Popover
    store={popover}
    fixed
    gutter={8}
    shift={8}
    flip
    slide
    overlap
    sameWidth
    fitViewport
    arrowPadding={8}
    overflowPadding={8}
    getAnchorRect={(anchor) => anchor?.getBoundingClientRect()}
    updatePosition={(props) => props.updatePosition()}
  />;
  

  This change affects all the hooks and components that use usePopoverStore and Popover underneath: useComboboxStore, ComboboxPopover, useHovercardStore, Hovercard, useMenuStore, Menu, useSelectStore, SelectPopover, useTooltipStore, Tooltip.

  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 example.

• 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)

  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:

  .dialog {
    position: fixed;
    inset: 1rem;
    margin: auto;
    height: fit-content;
    max-height: calc(100vh - 2 * 1rem);
  }
  

  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.

Patch Changes

• Deprecated the backdropProps prop on the Dialog component. Use the backdrop prop instead. (#2407)

• The backdrop prop on the Dialog component now accepts a JSX element as its value. (#2407)

• 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)

• The Tooltip component now defaults to use aria-describedby instead of aria-labelledby. (#2279)

  If you want to use the tooltip as a label for an anchor element, you can use the type prop on useTooltipStore:

  useTooltipStore({ type: "label" });
  

• The Tooltip component now supports mouse events. (#2279)

  It's now possible to hover over the tooltip without it disappearing, which makes it compliant with WCAG 1.4.13.

• 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)

• Updated dependencies: @ariakit/[email protected].

Minor Changes

• 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)

  The exception is the placement prop that should still be passed to the store.

  Before:

  const popover = usePopoverStore({
    placement: "bottom",
    fixed: true,
    gutter: 8,
    shift: 8,
    flip: true,
    slide: true,
    overlap: true,
    sameWidth: true,
    fitViewport: true,
    arrowPadding: 8,
    overflowPadding: 8,
    getAnchorRect: (anchor) => anchor?.getBoundingClientRect(),
    renderCallback: (props) => props.defaultRenderCallback(),
  });
  
  <Popover store={popover} />;
  

  After:

  const popover = usePopoverStore({ placement: "bottom" });
  
  <Popover
    store={popover}
    fixed
    gutter={8}
    shift={8}
    flip
    slide
    overlap
    sameWidth
    fitViewport
    arrowPadding={8}
    overflowPadding={8}
    getAnchorRect={(anchor) => anchor?.getBoundingClientRect()}
    updatePosition={(props) => props.updatePosition()}
  />;
  

  This change affects all the hooks and components that use usePopoverStore and Popover underneath: useComboboxStore, ComboboxPopover, useHovercardStore, Hovercard, useMenuStore, Menu, useSelectStore, SelectPopover, useTooltipStore, Tooltip.

  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 example.

Patch Changes

• 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)

• Fixed Dialog calling hideOnInteractOutside twice when clicking on the backdrop. (#2369)

• The built-in DialogBackdrop component is no longer focusable. (#2369)

• 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)