chore: Upgrade ariakit to v0.4.7

Author: vio

package-lock.json

@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@bundle-stats/utils": "^4.13.3",
-    "ariakit": "2.0.0-next.44",
+    "@ariakit/react": "0.4.7",
     "d3": "^7.8.5",
     "modern-css-reset": "1.4.0",
     "react-use": "^17.5.0",

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

@@ -4,6 +4,7 @@
 }
 
 .readMoreLink {
+  display: inline-block;
   cursor: pointer;
   color: var(--color-primary);
   text-decoration: underline;

packages/ui/src/components/metric-run-info/metric-run-info.module.css

@@ -1,6 +1,6 @@
 import React, { type MouseEvent, useCallback, useMemo, ElementType } from 'react';
 import { getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-import { Focusable } from 'ariakit/focusable';
+import { Focusable } from '@ariakit/react';
 
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -37,7 +37,7 @@ const MetricHoverCard = ({ title, description, url }: MetricInfoProps) => {
         <p className={css.metricHoverCardDescription}>{description}</p>
         {url && (
           <div>
-            <Focusable as="span" onClick={onClick} className={css.readMoreLink}>
+            <Focusable onClick={onClick} className={css.readMoreLink}>
               <FlexStack alignItems="center" space="xxxsmall">
                 <span>Learn more</span>
                 <Icon glyph={Icon.ICONS.EXTERNAL_LINK} size="small" />

packages/ui/src/components/metric-run-info/metric-run-info.tsx

@@ -12,7 +12,7 @@ import React, {
 import { useHoverDirty, useMeasure } from 'react-use';
 import cx from 'classnames';
 import { HierarchyRectangularNode, hierarchy, treemap, treemapSquarify } from 'd3';
-import { Tooltip, TooltipArrow, TooltipAnchor } from 'ariakit/tooltip';
+import { Tooltip, TooltipArrow, TooltipAnchor } from '@ariakit/react';
 import {
   type ReportMetricRow,
   type MetricRunInfo,
@@ -128,15 +128,15 @@ const TileContent = forwardRef((props: TileContentProps, ref: Ref<HTMLDivElement
 const TileContentWithTooltip = (props: TileContentProps & { parentRef: RefObject<Element> }) => {
   const { label, sizeDisplay, item, runInfo, parentRef } = props;
 
-  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
+  const { tooltip, getAnchorRect } = useTooltipStateWithMouseFollow({ parentRef });
 
   return (
     <>
-      <TooltipAnchor state={tooltipState} className={css.tileContentTooltipAnchor}>
+      <TooltipAnchor store={tooltip} className={css.tileContentTooltipAnchor}>
         <TileContent label={label} sizeDisplay={sizeDisplay} item={item} runInfo={runInfo} />
       </TooltipAnchor>
-      <Tooltip state={tooltipState} className={css.tooltip}>
-        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
+      <Tooltip store={tooltip} gutter={16} getAnchorRect={getAnchorRect} className={css.tooltip}>
+        <TooltipArrow store={tooltip} size={16} className={css.tileTooltipArrow} />
         <TileTooltipContent item={item} />
       </Tooltip>
     </>
@@ -258,15 +258,15 @@ type TileGroupTitleContentWithTooltipProps = {
 const TileGroupTitleContentWithTooltip = (props: TileGroupTitleContentWithTooltipProps) => {
   const { parentRef, tooltipContent, ...restProps } = props;
 
-  const tooltipState = useTooltipStateWithMouseFollow({ parentRef });
+  const { tooltip, getAnchorRect } = useTooltipStateWithMouseFollow({ parentRef });
 
   return (
     <>
-      <TooltipAnchor state={tooltipState} className={css.tileContentTooltipAnchor}>
+      <TooltipAnchor store={tooltip} className={css.tileContentTooltipAnchor}>
         <TileGroupTitleContent {...restProps} />
       </TooltipAnchor>
-      <Tooltip state={tooltipState} className={css.tooltip}>
-        <TooltipArrow state={tooltipState} size={16} className={css.tileTooltipArrow} />
+      <Tooltip store={tooltip} gutter={16} getAnchorRect={getAnchorRect} className={css.tooltip}>
+        <TooltipArrow store={tooltip} size={16} className={css.tileTooltipArrow} />
         <TileGroupTitleTooltipContent {...tooltipContent} />
       </Tooltip>
     </>

packages/ui/src/components/metrics-treemap/metrics-treemap.tsx

@@ -1,6 +1,6 @@
 import { type RefObject, useCallback } from 'react';
 import { useDebounce, useMouseHovered } from 'react-use';
-import { useTooltipState } from 'ariakit/tooltip';
+import { useTooltipStore } from '@ariakit/react';
 import {
   DeltaType,
   type MetricRunInfoBaseline,
@@ -231,10 +231,6 @@ interface UseTooltipStateWithMouseFollowOptions {
    * React ref to parent div
    */
   parentRef: RefObject<Element>;
-  /**
-   * Tooltip gutter
-   */
-  gutter?: number;
   /**
    * Tooltip timeout
    */
@@ -245,7 +241,7 @@ interface UseTooltipStateWithMouseFollowOptions {
  * Ariakit tooltip state hook with mouse follow functionality
  */
 export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouseFollowOptions) {
-  const { parentRef, gutter = 16, timeout = 240 } = options;
+  const { parentRef, timeout = 240 } = options;
 
   const pointer = useMouseHovered(parentRef, { whenHovered: true });
 
@@ -266,10 +262,10 @@ export function useTooltipStateWithMouseFollow(options: UseTooltipStateWithMouse
     return newRect;
   }, [pointer.docX, pointer.docY]);
 
-  const tooltipState = useTooltipState({ gutter, getAnchorRect, timeout });
+  const tooltip = useTooltipStore({ placement: 'top', timeout });
 
   // Update tooltip position when pointer values change
-  useDebounce(tooltipState.render, 10, [pointer.docX, pointer.docY]);
+  useDebounce(tooltip.render, 10, [pointer.docX, pointer.docY]);
 
-  return tooltipState;
+  return { tooltip, getAnchorRect };
 }

packages/ui/src/components/metrics-treemap/metrics-treemap.utils.ts

@@ -1,7 +1,7 @@
 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,6 +1,6 @@
 import React from 'react';
 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';
@@ -37,25 +37,28 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
   } = props;
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-  const menuState = useMenuState();
+  const menu = useMenuStore();
 
   return (
     <>
       <MenuButton
-        as={Button}
-        outline
-        size={BUTTON_SIZE.SMALL}
-        glyph={glyph}
-        disabled={disabled}
-        state={menuState}
-        tabIndex={null}
+        store={menu}
         className={cx(css.button, className)}
+        render={(menuButtonProps) => (
+          <Button
+            outline
+            size={BUTTON_SIZE.SMALL}
+            glyph={glyph}
+            disabled={disabled}
+            {...menuButtonProps}
+          />
+        )}
       >
         {label}
       </MenuButton>
       <Menu
         portal
-        state={menuState}
+        store={menu}
         aria-label={dropdownAriaLabel}
         className={cx(css.dropdown, dropdownClassName)}
       >

packages/ui/src/ui/dropdown/dropdown.tsx

@@ -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, placement: 'top' });
-  const hovercardProps = useHovercard({ state, portal: true });
+  const hovercard = useHovercardStore({ timeout: 800, placement: 'top' });
+  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>
       )}
     </>
   );