Skip to content

Commit e7a0b0c

Browse files
committed
chore: Upgrade ariakit to v0.3.11
1 parent 61672cb commit e7a0b0c

File tree

7 files changed

+3242
-6711
lines changed

7 files changed

+3242
-6711
lines changed

package-lock.json

Lines changed: 3204 additions & 6668 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
@@ -73,8 +73,8 @@
7373
"react-router-dom": "^5.0.0"
7474
},
7575
"dependencies": {
76+
"@ariakit/react": "0.4.1",
7677
"@bundle-stats/utils": "^4.12.2",
77-
"ariakit": "2.0.0-next.44",
7878
"d3": "^7.8.5",
7979
"modern-css-reset": "1.4.0",
8080
"react-use": "^17.5.0",

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,7 +1,7 @@
11
import React from 'react';
22

33
import cx from 'classnames';
4-
import { Button as ButtonBaseComponent } from 'ariakit/button';
4+
import { Button as ButtonBaseComponent } from '@ariakit/react/button';
55

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

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import cx from 'classnames';
3-
import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
3+
import { Menu, MenuButton, MenuItem, useMenuStore } from '@ariakit/react';
44

55
import { Button, BUTTON_SIZE } from '../button';
66
import css from './dropdown.module.css';
@@ -37,7 +37,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
3737
} = props;
3838

3939
const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
40-
const menuState = useMenuState();
40+
const menu = useMenuStore();
4141

4242
return (
4343
<>
@@ -47,15 +47,15 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
4747
size={BUTTON_SIZE.SMALL}
4848
glyph={glyph}
4949
disabled={disabled}
50-
state={menuState}
50+
store={menu}
5151
tabIndex={null}
5252
className={cx(css.button, className)}
5353
>
5454
{label}
5555
</MenuButton>
5656
<Menu
5757
portal
58-
state={menuState}
58+
store={menu}
5959
aria-label={dropdownAriaLabel}
6060
className={cx(css.dropdown, dropdownClassName)}
6161
>

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