chore: Upgrade ariakit to v0.3.11

Author: vio

package-lock.json

@@ -72,8 +72,8 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
+    "@ariakit/react": "0.4.1",
     "@bundle-stats/utils": "^4.10.1",
-    "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "use-query-params": "2.2.1"
   }

packages/ui/package.json

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { Portal } from 'ariakit/portal';
+import { Portal } from '@ariakit/react';
 import { METRIC_TYPE_CONFIGS, MetricRunInfo, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Box } from '../../layout/box';

packages/ui/src/components/entry-info/entry-info.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { Button as ButtonBaseComponent } from 'ariakit/button';
+import { Button as ButtonBaseComponent } from '@ariakit/react/button';
 
 import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';

packages/ui/src/ui/button/button.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import { Menu, MenuButton, MenuItem, useMenuStore } from '@ariakit/react';
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
@@ -23,7 +23,7 @@ Item.defaultProps = {
 export const Dropdown = (props) => {
   const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
   const rootClassName = cx(css.root, className);
-  const menuState = useMenuState();
+  const menu = useMenuStore();
 
   return (
     <div className={rootClassName}>
@@ -33,17 +33,17 @@ export const Dropdown = (props) => {
         size={BUTTON_SIZE.SMALL}
         glyph={glyph}
         disabled={disabled}
-        state={menuState}
+        store={menu}
         tabIndex={null}
         className={cx(css.button, buttonClassName)}
       >
         {label}
       </MenuButton>
-      <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
+      <Menu store={menu} aria-label={ariaLabel || label} className={css.dropdown}>
         {typeof children === 'function'
           ? children({
               MenuItem: Item,
-              menu: menuState,
+              menu,
               menuItemClassName: css.item,
               menuItemActiveClassName: css.itemActive,
             })

packages/ui/src/ui/dropdown/dropdown.jsx

@@ -1,12 +1,11 @@
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import {
-  Hovercard,
-  HovercardAnchor,
-  HovercardArrow,
-  useHovercard,
-  useHovercardState,
-} from 'ariakit/hovercard';
+  Hovercard as BaseHoverCard,
+  HovercardAnchor as BaseHoverCardAnchor,
+  HovercardArrow as BaseHoverCardArrow,
+  useHovercardStore,
+} from '@ariakit/react';
 
 import css from './hover-card.module.css';
 
@@ -31,8 +30,8 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300 });
-  const hovercardProps = useHovercard({ state, portal: true });
+  const hovercard = useHovercardStore({ timeout: 800 });
+  const state = hovercard.getState();
 
   // Fallback to span if no href
   const Component = useMemo(() => {
@@ -49,23 +48,18 @@ export const HoverCard = (props: HoverCardProps) => {
 
   return (
     <div className={cx(css.root, className)}>
-      <HovercardAnchor
-        state={state}
+      <BaseHoverCardAnchor
+        store={hovercard}
         href={href}
         className={cx(css.anchor, anchorClassName)}
-        as={Component}
-        aria-controls={state.open ? hovercardProps.id : ''}
+        aria-controls={state.open ? 'hovercard' : ''}
       >
-        {label}
-      </HovercardAnchor>
-      <Hovercard
-        {...hovercardProps}
-        state={state}
-        className={cx(css.hoverCard, hoverCardClassName)}
-      >
-        <HovercardArrow size={24} />
-        {typeof children === 'function' ? children({ close: state.hide }) : children}
-      </Hovercard>
+        <Component>{label}</Component>
+      </BaseHoverCardAnchor>
+      <BaseHoverCard store={hovercard} portal className={cx(css.hoverCard, hoverCardClassName)}>
+        <BaseHoverCardArrow size={24} />
+        {typeof children === 'function' ? children({ close: hovercard.hide }) : children}
+      </BaseHoverCard>
     </div>
   );
 };

packages/ui/src/ui/hover-card/hover-card.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import cx from 'classnames';
 import {
-  Tooltip as UITooltip,
-  TooltipAnchor as UITooltipAnchor,
-  TooltipArrow as UITooltipArrow,
-  useTooltipState,
-} from 'ariakit/tooltip';
+  Tooltip as BaseTooltip,
+  TooltipAnchor as BaseTooltipAnchor,
+  TooltipArrow as BaseTooltipArrow,
+  useTooltipStore,
+} from '@ariakit/react';
 
 import css from './tooltip.module.css';
 
@@ -14,7 +14,7 @@ interface TooltipProps<T extends React.ElementType> {
   tooltipClassName?: string;
   title?: React.ReactNode;
   as?: T;
-  containerRef?: React.RefObject<HTMLElement>;
+  containerRef?: React.RefObject<HTMLDivElement>;
   darkMode?: boolean;
 }
 
@@ -31,26 +31,27 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
     ...restProps
   } = props;
 
-  const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
+  const tooltip = useTooltipStore({ placement: 'top', timeout: 300 });
+  const state = tooltip.getState();
 
   return (
     <>
-      <UITooltipAnchor
+      <BaseTooltipAnchor
         as={Component as React.ElementType}
         className={cx(css.root, className)}
-        state={tooltip}
-        aria-controls={tooltip.open ? tooltip.contentElement?.id : ''}
+        store={tooltip}
+        aria-controls={state.open ? 'tooltip' : ''}
         {...(ref ? { ref } : {})}
         {...restProps}
       />
       {title && (
-        <UITooltip
-          state={tooltip}
+        <BaseTooltip
+          store={tooltip}
           className={cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)}
         >
-          <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
+          <BaseTooltipArrow store={tooltip} className={css.arrow} size={12} />
           {title}
-        </UITooltip>
+        </BaseTooltip>
       )}
     </>
   );