Skip to content

Commit f820263

Browse files
committed
chore: Upgrade ariakit to v0.3.11
1 parent e874e04 commit f820263

File tree

7 files changed

+3125
-6454
lines changed

7 files changed

+3125
-6454
lines changed

package-lock.json

Lines changed: 3086 additions & 6410 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@
7272
"react-router-dom": "^5.0.0"
7373
},
7474
"dependencies": {
75+
"@ariakit/react": "0.4.1",
7576
"@bundle-stats/utils": "^4.10.1",
76-
"ariakit": "2.0.0-next.44",
7777
"modern-css-reset": "1.4.0",
7878
"use-query-params": "2.2.1"
7979
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import cx from 'classnames';
3-
import { Portal } from 'ariakit/portal';
3+
import { Portal } from '@ariakit/react';
44
import { METRIC_TYPE_CONFIGS, MetricRunInfo, getMetricRunInfo } from '@bundle-stats/utils';
55

66
import { Box } from '../../layout/box';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import cx from 'classnames';
3-
import { Button as ButtonBaseComponent } from 'ariakit/button';
3+
import { Button as ButtonBaseComponent } from '@ariakit/react/button';
44

55
import { Icon as BaseIcon } from '../icon';
66
import css from './button.module.css';

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import cx from 'classnames';
4-
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
4+
import { Menu, MenuButton, MenuItem, useMenuStore } from '@ariakit/react';
55

66
import { Button, BUTTON_SIZE } from '../button';
77
import css from './dropdown.module.css';
@@ -23,7 +23,7 @@ Item.defaultProps = {
2323
export const Dropdown = (props) => {
2424
const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
2525
const rootClassName = cx(css.root, className);
26-
const menuState = useMenuState();
26+
const menu = useMenuStore();
2727

2828
return (
2929
<div className={rootClassName}>
@@ -33,17 +33,17 @@ export const Dropdown = (props) => {
3333
size={BUTTON_SIZE.SMALL}
3434
glyph={glyph}
3535
disabled={disabled}
36-
state={menuState}
36+
store={menu}
3737
tabIndex={null}
3838
className={cx(css.button, buttonClassName)}
3939
>
4040
{label}
4141
</MenuButton>
42-
<Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
42+
<Menu store={menu} aria-label={ariaLabel || label} className={css.dropdown}>
4343
{typeof children === 'function'
4444
? children({
4545
MenuItem: Item,
46-
menu: menuState,
46+
menu,
4747
menuItemClassName: css.item,
4848
menuItemActiveClassName: css.itemActive,
4949
})

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React, { useMemo } from 'react';
22
import cx from 'classnames';
33
import {
4-
Hovercard,
5-
HovercardAnchor,
6-
HovercardArrow,
7-
useHovercard,
8-
useHovercardState,
9-
} from 'ariakit/hovercard';
4+
Hovercard as BaseHoverCard,
5+
HovercardAnchor as BaseHoverCardAnchor,
6+
HovercardArrow as BaseHoverCardArrow,
7+
useHovercardStore,
8+
} from '@ariakit/react';
109

1110
import css from './hover-card.module.css';
1211

@@ -31,8 +30,8 @@ export const HoverCard = (props: HoverCardProps) => {
3130
children,
3231
} = props;
3332

34-
const state = useHovercardState({ gutter: 8, timeout: 300 });
35-
const hovercardProps = useHovercard({ state, portal: true });
33+
const hovercard = useHovercardStore({ timeout: 800 });
34+
const state = hovercard.getState();
3635

3736
// Fallback to span if no href
3837
const Component = useMemo(() => {
@@ -49,23 +48,18 @@ export const HoverCard = (props: HoverCardProps) => {
4948

5049
return (
5150
<div className={cx(css.root, className)}>
52-
<HovercardAnchor
53-
state={state}
51+
<BaseHoverCardAnchor
52+
store={hovercard}
5453
href={href}
5554
className={cx(css.anchor, anchorClassName)}
56-
as={Component}
57-
aria-controls={state.open ? hovercardProps.id : ''}
55+
aria-controls={state.open ? 'hovercard' : ''}
5856
>
59-
{label}
60-
</HovercardAnchor>
61-
<Hovercard
62-
{...hovercardProps}
63-
state={state}
64-
className={cx(css.hoverCard, hoverCardClassName)}
65-
>
66-
<HovercardArrow size={24} />
67-
{typeof children === 'function' ? children({ close: state.hide }) : children}
68-
</Hovercard>
57+
<Component>{label}</Component>
58+
</BaseHoverCardAnchor>
59+
<BaseHoverCard store={hovercard} portal className={cx(css.hoverCard, hoverCardClassName)}>
60+
<BaseHoverCardArrow size={24} />
61+
{typeof children === 'function' ? children({ close: hovercard.hide }) : children}
62+
</BaseHoverCard>
6963
</div>
7064
);
7165
};

packages/ui/src/ui/tooltip/tooltip.tsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import cx from 'classnames';
33
import {
4-
Tooltip as UITooltip,
5-
TooltipAnchor as UITooltipAnchor,
6-
TooltipArrow as UITooltipArrow,
7-
useTooltipState,
8-
} from 'ariakit/tooltip';
4+
Tooltip as BaseTooltip,
5+
TooltipAnchor as BaseTooltipAnchor,
6+
TooltipArrow as BaseTooltipArrow,
7+
useTooltipStore,
8+
} from '@ariakit/react';
99

1010
import css from './tooltip.module.css';
1111

@@ -14,7 +14,7 @@ interface TooltipProps<T extends React.ElementType> {
1414
tooltipClassName?: string;
1515
title?: React.ReactNode;
1616
as?: T;
17-
containerRef?: React.RefObject<HTMLElement>;
17+
containerRef?: React.RefObject<HTMLDivElement>;
1818
darkMode?: boolean;
1919
}
2020

@@ -31,26 +31,27 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
3131
...restProps
3232
} = props;
3333

34-
const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
34+
const tooltip = useTooltipStore({ placement: 'top', timeout: 300 });
35+
const state = tooltip.getState();
3536

3637
return (
3738
<>
38-
<UITooltipAnchor
39+
<BaseTooltipAnchor
3940
as={Component as React.ElementType}
4041
className={cx(css.root, className)}
41-
state={tooltip}
42-
aria-controls={tooltip.open ? tooltip.contentElement?.id : ''}
42+
store={tooltip}
43+
aria-controls={state.open ? 'tooltip' : ''}
4344
{...(ref ? { ref } : {})}
4445
{...restProps}
4546
/>
4647
{title && (
47-
<UITooltip
48-
state={tooltip}
48+
<BaseTooltip
49+
store={tooltip}
4950
className={cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)}
5051
>
51-
<UITooltipArrow state={tooltip} className={css.arrow} size={12} />
52+
<BaseTooltipArrow store={tooltip} className={css.arrow} size={12} />
5253
{title}
53-
</UITooltip>
54+
</BaseTooltip>
5455
)}
5556
</>
5657
);

0 commit comments

Comments
 (0)