chore(ariakit): upgrade ariakit from 0.4.3 to 0.4.13

[cnairi]

DESCRIPTION

We are currently using @ariakit/react version 0.4.3
We need to upgrade to 0.4.13, meaning we need to upgrade 10 versions.

Here is the exhaustive list of our components based on ariakit:

• Accordion
• Button
• Checkbox
• Drawer
• DropdownMenu
• EmojiPicker (will soon be deprecated)
• Modal
• Picker
• Popover
• Radio
• RadioGroup
• RadioTab
• Tabs
• Toggle
• Tooltip
  We need to pay extra attention to these when testing this major upgrade.

LINEAR TICKET

https://linear.app/wttj/issue/WUI-23/upgrade-ariakit-to-latest

HOW TO TEST

• You need to run an install to upgrade the packages version
• You need to start the project
• You need to visit the doc pages and make sure nothing is broken (http://localhost:3020/components/modal for instance)

CHANGES RELATED TO THE COMPONENTS WE USE

• Popover component: a new css variable exposed for the Popover component => --popover-transform-origin that can be used to set the transform-origin property for the popover content element in relation to the anchor element
• Drawer and modal: fix on Dialog to prevent smooth scrolling on hide => a check was done on both desktop (Chrome) and mobile (iOS Safari) to check if there was no regression
  - Drawer and modal: new CSS variable: —dialog-viewport-height. Can be useful for Drawer and Modal when used on mobile device with input fields (cause it takes into account the virtual keyboard as well) (Can be useful, tested and working)
• Tabs: aria-selected no longer automatically set => no visual detection detected
• Tabs (0.4.10): fixes issue to navigate on keyboard with the tab component => this fixes our issue as well, we can navigate through our tabs even if one tab is disabled
  - Tabs: new scrollRestoration props for TabPanel => By default, scroll position is restored when switching tab. Set the scrollRestoration props to « reset » to return to the top of the panel when switching tab. (Tested and working, can be useful)
• Focusable elements: remove delay when applying the data-focus-visible => no visual impact on keyboard navigation
• DropdownMenu: fix on MenuButton hiding the menu on Safari => tested on Safari desktop and mobile, no visual issue

FULL CHANGELOG

https://ariakit.org/changelog

MIGRATING TO 0.4.4

• autoFocusOnHide behavior on ComboboxPopover => not impacting our codebase
• SVG strokes is slightly thinner on some components => no impact on our codebase
• Minimum value length to show combobox => new props created to simplify the behavior but old one still working
• Possibility to render CompositeItem as an input element => not impacting
• Fix Dialog calling autoFocusOnHide => no impact
• Packages upgrade and JSDocs improvements => no impact

MIGRATING TO 0.4.5

• Only impacts their multi select => no impact on us
• New values on Combobox and ComboboxItem and store, Docs improvement and dependencies upgrade => no impact on us

MIGRATING TO 0.4.6

• Possibility to nest SelectList inside a Popover (accessibility tree feature) = no impact on us
• New Select components = no impact on us
• SelectPopover now opens on click (no longer on mouse / touch or pointer down = no impact on us
• Fixes (ref warning React 19), Safari fixes, improvements, new elements, docs improvement, upgrades depending => no impact

MIGRATING TO 0.4.7

• New SelectValue component which can use a fallback as default value if store is undefined=> no impact on us
• React 19 added to peer dep => no impact on us
• Docs improvement and upgrade deps => no impact
• Fixes autoSelect behavior on mobile devices => no impact on us

MIGRATING TO 0.4.8

• Accessibility on selected and disabled tab component for accessibility (keyboard navigation) => no impact
• Fix on Hovercard => no impact
• JsDocs + upgrade dep => no impact

MIGRATING TO 0.4.9

• New useStoreState hook => no impact
• New ComboboxValue component => no impact
• New userValue prop added to ComboboxItemValue => no impact
• JSDocs & deps upgrade => no impact

MIGRATING TO 0.4.10

• Upgrade dep => no impact

MIGRATING TO 0.4.11

• Tabs inside Combobox or Select; fix animation to ensure consistent UI => no impact on our side
• Combobox update = no impact

MIGRATING TO 0.4.12

• Possibility to override composite state for specific methods => no impact
• Ability to tab out of a nested menu within a modal dialog => no impact
• Fix build, Dialog backrops performance, fix tab, JSDocs, upgrade dep => no impact

MIGRATING TO 0.4.13

• Better logic for Tabs for instance for activeId state (when element is loading for instance, it will still be possible to navigate through keyboard) => no impact except better navigation on keyboard (a11y)
• focusShift fix => to test on tab
• Fixed radio on change from triggering when already checked => to test
• Fixed DisclosureContent component setting an incorrect animating state value during enter animations
• Improve docs
• Upgrade packages

[linear]

WUI-23 Upgrade ariakit to latest

[github-actions]

👀 Visit Preview

[jeromeraffin]

👏