);
};
================================================
FILE: apps/ssr-testing/app/portal/page.tsx
================================================
import * as React from 'react';
import { Portal } from 'radix-ui';
import { CustomPortalContainer } from './custom-portal-container';
import { ConditionalPortal } from './conditional-portal';
export default function Page() {
return (
This content is rendered in the main DOM tree
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque
facere fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo
laboriosam necessitatibus eius pariatur.
This content is rendered in a portal (another DOM tree)
Because of the portal, it can appear in a different DOM tree from the main one (by
default a new element inside the body), even though it is part of the same React tree.
);
}
================================================
FILE: apps/ssr-testing/app/progress/page.tsx
================================================
import * as React from 'react';
import { Progress } from 'radix-ui';
export default function Page() {
return (
Progress
);
}
================================================
FILE: apps/ssr-testing/app/radio-group/page.tsx
================================================
import * as React from 'react';
import { Label, RadioGroup } from 'radix-ui';
export default function Page() {
return (
Favourite pet
[ X ]
Cat
[ X ]
Dog
[ X ]
Rabbit
);
}
================================================
FILE: apps/ssr-testing/app/roving-focus-group/page.tsx
================================================
import * as React from 'react';
import { RovingFocusProvider, RovingFocusToggle, ButtonGroup, Button } from './roving-focus.client';
export default function Page() {
return (
<>
Basic
no orientation (both) + no looping
no orientation (both) + looping
horizontal orientation + no looping
horizontal orientation + looping
vertical orientation + no looping
vertical orientation + looping
Nested
);
}
================================================
FILE: apps/ssr-testing/app/roving-focus-group/roving-focus.client.tsx
================================================
'use client';
import * as React from 'react';
import { composeEventHandlers, RovingFocus } from 'radix-ui/internal';
type Direction = 'ltr' | 'rtl';
const RovingFocusContext = React.createContext<{
dir: 'ltr' | 'rtl';
setDir: React.Dispatch>;
}>({
dir: 'ltr',
setDir: () => void 0,
});
RovingFocusContext.displayName = 'RovingFocusContext';
export function RovingFocusProvider({ children }: { children: React.ReactNode }) {
const [dir, setDir] = React.useState('ltr');
return (
Lacinia hendrerit auctor nam quisque augue suscipit feugiat, sit at imperdiet vitae lacus.
Dolor sit dui posuere faucibus non pharetra laoreet conubia, augue rhoncus cras nisl sodales
proin hac ipsum, per hendrerit sed volutpat natoque curae consectetur. Curae blandit neque
vehicula vel mauris vulputate per felis sociosqu, sodales integer sollicitudin id litora
accumsan viverra pulvinar, mus non adipiscing dolor facilisis habitasse mi leo. Litora
faucibus eu pulvinar tempus gravida iaculis consectetur risus euismod fringilla, dui posuere
viverra sapien tortor mattis et dolor tempor sem conubia, taciti sociis mus rhoncus cubilia
praesent dapibus aliquet quis. Diam hendrerit aliquam metus dolor fusce lorem, non gravida
arcu primis posuere ipsum adipiscing, mus sollicitudin eros lacinia mollis.
Habitant fames mi massa mollis fusce congue nascetur magna bibendum inceptos accumsan,
potenti ipsum ac sollicitudin taciti dis rhoncus lacinia fermentum placerat. Himenaeos
taciti egestas lacinia maecenas ornare ultricies, auctor vitae nulla mi posuere leo mollis,
eleifend lacus rutrum ante curabitur. Nullam mi quisque nulla enim pretium facilisi interdum
morbi, himenaeos velit fames pellentesque eget nascetur laoreet vel rutrum, malesuada risus
ad netus dolor et scelerisque.
Arcu curabitur fermentum felis sollicitudin varius nec cras
Habitasse tristique hac ligula in metus blandit lobortis leo nullam litora, tempus fusce
tincidunt phasellus urna est rhoncus pretium etiam eu, fames neque faucibus sociis primis
felis dui vitae odio. Egestas purus morbi pulvinar luctus adipiscing rutrum ultrices hac,
vehicula odio ridiculus cubilia vivamus blandit faucibus, dapibus velit sociis metus
ultricies amet scelerisque.
Scelerisque commodo nam cras litora lacinia primis fames morbi natoque, quisque ante duis
phasellus pharetra convallis montes felis. Consectetur leo suspendisse fringilla elementum
maecenas massa urna malesuada auctor senectus, pretium turpis nisi orci ipsum vulputate
cubilia sociis adipiscing. Vulputate ridiculus amet dis accumsan non ultrices fames mattis
hendrerit, ornare elementum sociosqu eget consectetur duis viverra vivamus tincidunt,
blandit nulla porta semper dolor pharetra nisi scelerisque. Consequat conubia porta cras et
ac auctor pellentesque luctus morbi potenti, viverra varius commodo venenatis vestibulum
erat sagittis laoreet.
);
}
================================================
FILE: apps/ssr-testing/app/select/page.tsx
================================================
import * as React from 'react';
import { Select } from 'radix-ui';
export default function Page() {
return (
<>
▼▲Item 1✔Item 2✔Item 3✔▼
);
}
================================================
FILE: apps/ssr-testing/app/separator/page.tsx
================================================
import * as React from 'react';
import { Separator } from 'radix-ui';
export default function Page() {
return ***;
}
================================================
FILE: apps/ssr-testing/app/slider/page.tsx
================================================
import * as React from 'react';
import { Slider } from 'radix-ui';
export default function Page() {
return (
);
}
================================================
FILE: apps/ssr-testing/app/slot/page.tsx
================================================
import * as React from 'react';
import { Slot } from 'radix-ui';
export default function Page() {
return (
I'm in a Slot!?
);
}
================================================
FILE: apps/ssr-testing/app/switch/page.tsx
================================================
import * as React from 'react';
import { Switch } from 'radix-ui';
export default function Page() {
return (
Switch
);
}
================================================
FILE: apps/ssr-testing/app/tabs/page.tsx
================================================
import * as React from 'react';
import { Tabs } from 'radix-ui';
export default function Page() {
return (
Tab 1Tab 2Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
);
}
================================================
FILE: apps/ssr-testing/app/toast/page.tsx
================================================
import * as React from 'react';
import { Toast } from 'radix-ui';
export default function Page() {
return (
ToastThis is a toast message.Do somethingClose
);
}
================================================
FILE: apps/ssr-testing/app/toggle-group/page.tsx
================================================
import * as React from 'react';
import { ToggleGroup } from 'radix-ui';
export default function Page() {
return (
Item 1Item 2
);
}
================================================
FILE: apps/ssr-testing/app/toolbar/page.tsx
================================================
import * as React from 'react';
import { Toolbar } from 'radix-ui';
export default function Page() {
return (
Button***Link
);
}
================================================
FILE: apps/ssr-testing/app/tooltip/page.tsx
================================================
import * as React from 'react';
import { Tooltip } from 'radix-ui';
export default function Page() {
return (
Hover or Focus me
Nicely done!
);
}
================================================
FILE: apps/ssr-testing/app/visually-hidden/page.tsx
================================================
import * as React from 'react';
import { VisuallyHidden } from 'radix-ui';
export default function Page() {
return (
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
Controlled
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
Collapsible
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
);
};
export const Multiple = () => {
const [value, setValue] = React.useState(['one', 'two']);
return (
<>
Uncontrolled
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
Controlled
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
);
};
export const Animated = () => {
const values = ['One', 'Two', 'Three', 'Four'];
const [count, setCount] = React.useState(1);
const [hasDynamicContent, setHasDynamicContent] = React.useState(false);
const timerRef = React.useRef(0);
React.useEffect(() => {
if (hasDynamicContent) {
timerRef.current = window.setTimeout(() => {
setCount((prevCount) => {
const nextCount = prevCount < 5 ? prevCount + 1 : prevCount;
if (nextCount === 5) setHasDynamicContent(false);
return nextCount;
});
}, 3000);
return () => {
clearTimeout(timerRef.current);
};
}
}, [count, hasDynamicContent]);
return (
<>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque
quam suscipit habitant sed.
))}
);
};
export const AnimatedControlled = () => {
const [value, setValue] = React.useState(['one', 'two', 'three', 'four']);
return (
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
);
};
export const OutsideViewport = () => (
<>
Scroll down to see tabs
When accordion buttons are focused and the user is navigating via keyboard, the page should
not scroll unless the next tab is entering the viewport.
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
);
export const Horizontal = () => (
<>
Horizontal Orientation
One
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
Two
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
Three (disabled)
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
Four
Odio placerat quisque sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
);
export const Chromatic = () => {
const items = ['One', 'Two', 'Three', 'Four'];
return (
<>
Uncontrolled
Single closed
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Single open
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Multiple closed
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Multiple open
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Controlled
Single open
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Multiple open
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Disabled (whole)
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Disabled (item)
Just item
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
with `disabled=false` on top-level
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Force mounted contents
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
State attributes
Accordion disabled
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
Accordion enabled with item override
{items.map((item) => (
{item}
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
))}
{
if (housePurchased) {
e.preventDefault();
setHousePurchased(false);
}
}}
>
{housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
Are you sure?
Houses are very expensive and it looks like you only have €20 in the bank. Maybe
consult with a financial advisor?
setHousePurchased(true)}>
buy it anyway
good point, I'll reconsider
Right click here console.log('undo')}>
Undo
console.log('redo')}>
Redo
console.log('cut')}>
Cut
console.log('copy')}>
Copy
console.log('paste')}>
Paste
);
export const Modality = () => (
Modal (default)
console.log('undo')}>
Undo
console.log('redo')}>
Redo
Submenu →
console.log('one')}>
One
console.log('two')}>
Two
Submenu →
console.log('one')}
>
One
console.log('two')}
>
Two
console.log('three')}
>
Three
console.log('three')}>
Three
console.log('cut')}
>
Cut
console.log('copy')}>
Copy
console.log('paste')}>
Paste
Non modal
console.log('undo')}>
Undo
console.log('redo')}>
Redo
Submenu →
console.log('one')}>
One
console.log('two')}>
Two
Submenu →
console.log('one')}
>
One
console.log('two')}
>
Two
console.log('three')}
>
Three
console.log('three')}>
Three
console.log('cut')}
>
Cut
console.log('copy')}>
Copy
console.log('paste')}>
Paste
event.preventDefault()}
>
{Array.from({ length: 100 }, (_, i) => {
const customColor = customColors[i];
return (
Color
setCustomColors((colors) => ({ ...colors, [i]: color }))
}
>
Blue
Red
setFadedIndexes((indexes) =>
faded ? [...indexes, i] : indexes.filter((index) => index !== i),
)
}
>
Fade
{i + 1}
);
})}
);
};
export const Nested = () => (
{' '}
Red box menu console.log('red action1')}>
Red action 1
console.log('red action2')}>
Red action 2
Submenu →
console.log('red sub action 1')}
>
Red sub action 1
console.log('red sub action 2')}
>
Red sub action 2
Blue box menu console.log('blue action1')}>
Blue action 1
console.log('blue action2')}>
Blue action 2
Submenu → console.log('blue sub action 1')}
>
Blue sub action 1
console.log('blue sub action 2')}
>
Blue sub action 2
Text selections will be contained within the content. While a selection is active
the content will not dismiss unless the selection is cleared or an outside
interaction is performed.
nested
Text selections will be contained within the content. While a selection is active
the content will not dismiss unless the selection is cleared or an outside
interaction is performed.
nested trigger
Text selections will be contained within the content. While a selection is
active the content will not dismiss unless the selection is cleared or an
outside interaction is performed.
nested trigger
Text selections will be contained within the content. While a selection
is active the content will not dismiss unless the selection is cleared
or an outside interaction is performed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat mattis malesuada.
Fusce elementum vulputate aliquet. Integer fringilla porta eros. Ut ultricies mattis nisi.
Sed et tempor massa. Sed non arcu ut velit scelerisque bibendum tempor sed mi. In non
consequat sapien. Donec sollicitudin eget tellus ut venenatis. Donec posuere sem ante, nec
iaculis arcu varius sit amet. Praesent non tortor quam. Curabitur dapibus justo a commodo
ornare.
Suspendisse eleifend consequat iaculis. Nunc bibendum velit felis, nec vulputate purus
egestas quis. Integer mauris dui, pulvinar non metus id, tristique dignissim elit. Vivamus
massa tellus, porttitor id lorem non, molestie aliquam dolor. Pellentesque erat quam,
pellentesque non metus id, tempus sagittis massa.
Sed at elementum sem, non venenatis leo. Ut vulputate consectetur finibus. Sed nunc
lectus, accumsan in nisl et, vehicula pretium nisi. Vivamus vestibulum ante quis urna
consequat, ultrices condimentum sem commodo. Pellentesque eget orci laoreet, feugiat purus
sed, maximus nisi. Suspendisse commodo venenatis facilisis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus odio, vestibulum
in dictum et, sagittis vel nibh. Fusce placerat arcu lorem, a
scelerisque odio fringilla sit amet. Suspendisse volutpat sed diam ut cursus. Nulla
facilisi. Ut at volutpat nibh. Nullam justo mi, elementum vitae ex eu,{' '}
gravida dictum metus. Morbi vulputate consectetur cursus. Fusce
vitae nisi nunc. Suspendisse pellentesque aliquet tincidunt. Aenean molestie pulvinar
ipsum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque facere
fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo laboriosam
necessitatibus eius pariatur.
This content is rendered in a portal (another DOM tree)
Because of the portal, it can appear in a different DOM tree from the main one (by default a
new element inside the body), even though it is part of the same React tree.
This content is rendered in a portal inside Container A but appears inside Container B
because we have used Container B as a container element for the Portal.
This content is rendered in a portal (another DOM tree)
Because of the portal, it can appear in a different DOM tree from the main one (by
default a new element inside the body), even though it is part of the same React tree.
Custom container
Container B
This content is rendered in a portal inside Container B but appears inside Container C
because we have used Container C as a container element for the Portal.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros iaculis, bibendum
tellus ac, lobortis odio. Aliquam bibendum elit est, in iaculis est commodo id. Donec pulvinar
est libero. Proin consectetur pellentesque molestie. Fusce mi ante, ullamcorper eu ante finibus,
finibus pellentesque turpis. Mauris convallis, leo in vulputate varius, sapien lectus suscipit
eros, ac semper odio sapien sit amet magna. Sed mattis turpis et lacinia ultrices. Nulla a
commodo mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Pellentesque id tempor metus. Pellentesque faucibus tortor non nisi maximus
dignissim. Etiam leo nisi, molestie a porttitor at, euismod a libero. Nullam placerat tristique
enim nec pulvinar. Sed eleifend dictum nulla a aliquam. Sed tempus ipsum eget urna posuere
aliquam. Nulla maximus tortor dui, sed laoreet odio aliquet ac. Vestibulum dolor orci, lacinia
finibus vehicula eget, posuere ac lectus. Quisque non felis at ipsum scelerisque condimentum. In
pharetra semper arcu, ut hendrerit sem auctor vel. Aliquam non lacinia elit, a facilisis ante.
Praesent eget eros augue. Praesent nunc orci, ullamcorper non pulvinar eu, elementum id nibh.
Nam id lorem euismod, sodales augue quis, porttitor magna. Vivamus ut nisl velit. Nam ultrices
maximus felis, quis ullamcorper quam luctus et.
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Vertical (manual activation)
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
);
export const Animated = () => (
<>
Horizontal (automatic activation)
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Vertical (manual activation)
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
);
export const Chromatic = () => (
<>
Uncontrolled
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Controlled
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Vertical
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Direction
Prop
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Inherited
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem
himenaeos integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida
elementum pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Animated
Should not animate on initial mount
Tab 1
Tab 2
Tab 3
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
You'll never find me!
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
Hover me
Nicely done!
Hover me
Nicely done!
Hover me
Nicely done!
Custom (0ms = instant open)
Hover me
Nicely done!
Hover me
Nicely done!
Hover me
Nicely done!
Custom (2s)
Hover me
Nicely done!
Hover me
Nicely done!
Hover me
Nicely done!
Skip delay duration
Default (300ms to move from one to another tooltip)
Hover me
Nicely done!
Hover me
Nicely done!
Hover me
Nicely done!
Custom (0ms to move from one to another tooltip = never skip)
Hover me
Nicely done!
Hover me
Nicely done!
Hover me
Nicely done!
Custom (5s to move from one to another tooltip)
Hover me
Nicely done!
Hover me
Nicely done!
Hover me
Nicely done!
);
export const CustomContent = () => (
Heading
Some heading
Paragraph
Some paragraph
List
One
Two
Three
Article
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, quae qui. Magnam
delectus ex totam repellat amet distinctio unde, porro architecto voluptatibus nemo et
nisi, voluptatem eligendi earum autem fugit.
FigureColm TuiteTime
{/* @ts-ignore */}
Link
View in WorkOSFormMini layout
Start video call
press{' '}
c
);
export const Positions = () => (
Top start
Top center
Top end
Right start
Right center
Right end
Bottom end
Bottom center
Bottom start
Left end
Left center
Left start
);
export const AriaLabel = () => (
The first button will display AND enunciate the label.
The second button will display the label, but enunciate the aria label.
);
Chromatic.parameters = { chromatic: { disable: false } };
function SimpleTooltip({
children,
label,
'aria-label': ariaLabel,
open,
onOpenChange,
...props
}: any) {
return (
{children}
{label}
);
}
================================================
FILE: apps/storybook/stories/visually-hidden.stories.tsx
================================================
import { VisuallyHidden } from 'radix-ui';
export default { title: 'Utilities/VisuallyHidden' };
export const Basic = () => (
);
================================================
FILE: apps/storybook/.storybook/main.ts
================================================
import type { StorybookConfig } from '@storybook/react-webpack5';
const config: StorybookConfig = {
stories: [
//
'../stories/**/*.mdx',
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
features: {
experimentalRSC: true,
},
addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],
framework: {
name: '@storybook/react-webpack5',
options: {
builder: {},
// enable React strict mode
strictMode: true,
},
},
swc: (config: any) => ({
...config,
jsc: {
...config?.jsc,
transform: {
...config?.jsc?.transform,
react: {
// Do not require importing React into scope to use JSX
runtime: 'automatic',
},
},
},
}),
};
export default config;
================================================
FILE: apps/storybook/.storybook/manager-head.html
================================================
================================================
FILE: apps/storybook/.storybook/manager.ts
================================================
import { addons } from 'storybook/manager-api';
import { themes } from 'storybook/theming';
addons.setConfig({
enableShortcuts: false,
theme: themes.light,
});
================================================
FILE: apps/storybook/.storybook/preview.css
================================================
@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/green.css';
@import '@radix-ui/colors/red.css';
@import '@radix-ui/colors/purple.css';
@import '@radix-ui/colors/gray-dark.css';
@import '@radix-ui/colors/blue-dark.css';
@import '@radix-ui/colors/green-dark.css';
@import '@radix-ui/colors/red-dark.css';
@import '@radix-ui/colors/purple-dark.css';
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: inherit;
}
[hidden] {
display: none;
}
:root {
--color-white: #fff;
--color-gray100: #ccc;
--color-gray300: #aaa;
--color-black: #111;
--color-red: crimson;
--color-green: green;
}
body {
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
================================================
FILE: apps/storybook/.storybook/preview.ts
================================================
import type { Preview } from '@storybook/react-webpack5';
import './preview.css';
const preview: Preview = {
parameters: {
layout: 'fullscreen',
options: {
storySort: {
order: ['Components', 'Utilities'],
},
},
// disables Chromatic on a global level
chromatic: { disable: true },
docs: {
codePanel: true,
},
},
};
export default preview;
================================================
FILE: cypress/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "@testing-library/cypress", "cypress-real-events", "cypress-axe"]
},
"include": ["**/*.ts"]
}
================================================
FILE: cypress/e2e/ContextMenu.cy.ts
================================================
describe('ContextMenu', () => {
describe('given submenu user', () => {
beforeEach(() => {
cy.visitStory('contextmenu--submenus');
cy.findByText('Right Click Here').rightclick();
});
describe('when using pointer', () => {
it('should close open submenus and reopen the root menu when right clicking trigger', () => {
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
cy.findByText('Right Click Here').rightclick({ force: true });
cy.findByText('New Tab').should('be.visible');
cy.findByText('Inbox').should('not.exist');
});
it('should open submenu and not focus first item when moving pointer over trigger', () => {
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('not.be.focused');
});
it('should not close when moving pointer to submenu and back to parent trigger', () => {
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
});
it(
'should close submenu when moving pointer away but remain open when moving towards',
{
viewportWidth: 550,
},
() => {
// Moving away
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitRightToLeft('Bookmarks →');
cy.findByText('Inbox').should('not.exist');
// Moving towards
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitLeftToRight('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
// Test at collision edge
// Moving away
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitLeftToRight('WorkOS →');
cy.findByText('Radix').should('not.exist');
// Moving towards
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitRightToLeft('WorkOS →');
cy.findByText('Radix').should('be.visible');
},
);
it('should close open submenu when moving pointer to any item in parent menu', () => {
// Item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('New Tab');
cy.findByText('Inbox').should('not.exist');
// Disabled item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('Print…');
cy.findByText('Inbox').should('not.exist');
// Trigger item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('Tools →');
cy.findByText('Inbox').should('not.exist');
// Disabled trigger item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('History →');
cy.findByText('Inbox').should('not.exist');
});
it('should close unassociated submenus when moving pointer back to the root trigger', () => {
// Open multiple nested submenus and back to trigger in root menu
pointerOver('Bookmarks →');
pointerOver('WorkOS →');
pointerOver('Radix');
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
cy.findByText('Radix').should('not.exist');
});
it('should close all menus when clicking item in any menu, or clicking outside', () => {
// Root menu
cy.findByText('New Tab').click();
cy.findByText('New Tab').should('not.exist');
// Submenu
cy.findByText('Right Click Here').rightclick();
pointerOver('Bookmarks →');
cy.findByText('Inbox').click();
cy.findByText('New Tab').should('not.exist');
cy.findByText('Inbox').should('not.exist');
// Click outside
cy.findByText('Right Click Here').rightclick();
cy.get('body').click({ force: true });
cy.findByText('New Tab').should('not.exist');
});
});
describe('When using keyboard', () => {
it('should not open submenu when moving focus to trigger', () => {
cy.findByText('Bookmarks →').focus();
cy.findByText('Inbox').should('not.exist');
});
it('should open submenu and focus first item when pressing right arrow, enter or space key', () => {
function shouldOpenOnKeydown(key: string) {
cy.findByText('Bookmarks →').trigger('keydown', { key });
cy.findByText('Inbox').should('be.focused').trigger('keydown', { key: 'ArrowLeft' });
}
shouldOpenOnKeydown(' ');
shouldOpenOnKeydown('Enter');
shouldOpenOnKeydown('ArrowRight');
});
it('should close only the focused submenu when pressing left arrow key', () => {
cy.findByText('Bookmarks →').type('{enter}');
cy.findByText('WorkOS →').type('{enter}');
cy.findByText('Stitches').type('{leftarrow}');
cy.findByText('Stitches').should('not.exist');
cy.findByText('WorkOS →').should('be.visible');
cy.findByText('New Window').should('be.visible');
});
it('should focus first item when pressing right arrow key after opening submenu with mouse', () => {
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
cy.findByText('Bookmarks →').type('{rightarrow}');
cy.findByText('Inbox').should('be.focused');
});
it('should close all menus when pressing escape, enter or space key on any item', () => {
// Test close on root menu
cy.findByText('Bookmarks →').type('{esc}');
cy.findByText('Bookmarks →').should('not.exist');
// Reopen menu and test keys from within the submenu
cy.findByText('Right Click Here').rightclick();
cy.findByText('Bookmarks →').type('{enter}');
cy.findByText('Inbox').type('{esc}');
cy.findByText('Inbox').should('not.exist');
cy.findByText('New Window').should('not.exist');
});
it('should scope typeahead behaviour to the active menu', () => {
// Matching items outside of the active menu should not become focused
pointerOver('Bookmarks →');
pointerOver('WorkOS →');
cy.findByText('Stitches').focus();
cy.findByText('Stitches').type('Inbox');
cy.findByText('Inbox').should('not.have.focus');
// Matching items inside of active menu should become focused
pointerOver('Notion').focus();
pointerOver('Notion').type('Inbox');
cy.findByText('Inbox').should('have.focus');
});
});
describe('When using pointer in RTL', () => {
beforeEach(() => {
cy.findByText('Right-to-left').click({ force: true });
cy.findByText('Right Click Here').rightclick();
});
it(
'should close submenu when pointer moves away but remain open when moving towards',
{
viewportWidth: 550,
},
() => {
// Moving away
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitLeftToRight('Bookmarks →');
cy.findByText('Inbox').should('not.exist');
// Moving towards
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitRightToLeft('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
// Test at collision edge
// Moving away
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitRightToLeft('WorkOS →');
cy.findByText('Radix').should('not.exist');
// Moving towards
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitLeftToRight('WorkOS →');
cy.findByText('Radix').should('be.visible');
},
);
});
describe('When using keyboard in RTL', () => {
beforeEach(() => {
cy.findByText('Right-to-left').click({ force: true });
cy.findByText('Right Click Here').rightclick();
});
it('should open submenu and focus first item when pressing left arrow key but close when pressing right arrow key', () => {
cy.findByText('Bookmarks →').trigger('keydown', { key: 'ArrowLeft' });
cy.findByText('Inbox').should('be.focused');
cy.findByText('Inbox').should('be.focused');
cy.findByText('Inbox').trigger('keydown', { key: 'ArrowRight' });
cy.findByText('Inbox').should('not.exist');
// Root level menu should remain open
cy.findByText('New Tab').should('be.visible');
});
});
});
/* ---------------------------------------------------------------------------------------------- */
function pointerExitRightToLeft(elementText: string) {
return cy
.findByText(elementText)
.should('be.visible')
.realHover({ position: 'right' })
.realHover({ position: 'bottomLeft' })
.trigger('pointerout', 'bottomLeft', { pointerType: 'mouse' });
}
function pointerExitLeftToRight(elementText: string) {
return cy
.findByText(elementText)
.should('be.visible')
.realHover({ position: 'left' })
.realHover({ position: 'bottomRight' })
.trigger('pointerout', 'bottomRight', { pointerType: 'mouse' });
}
function pointerOver(elementText: string) {
return cy.findByText(elementText).should('be.visible').realHover();
}
});
================================================
FILE: cypress/e2e/Dialog.cy.ts
================================================
describe('Dialog', () => {
beforeEach(() => {
cy.visitStory('dialog--cypress');
});
function shouldBeOpen() {
cy.findByText('title').should('exist');
}
function shouldBeClosed() {
cy.findByText('title').should('not.exist');
}
function shouldNotAllowOutsideInteraction(action: 'realClick' | 'realTouch') {
cy.findByLabelText('count up')
.invoke('text')
.then((count) => {
if (action === 'realTouch') {
cy.findByLabelText('count up').realClick();
} else {
cy.findByLabelText('count up').realTouch();
}
cy.findByLabelText('count up').should('have.text', count);
});
}
function shouldAllowOutsideInteraction(action: 'realClick' | 'realTouch') {
cy.findByLabelText('count up')
.invoke('text')
.then((count) => {
if (action === 'realTouch') {
cy.findByLabelText('count up').realClick();
} else {
cy.findByLabelText('count up').realTouch();
}
cy.findByLabelText('count up').should('not.have.text', count);
});
}
describe('given a modal dialog', () => {
it('can be open/closed with a keyboard', () => {
// using keyboard on open/close buttons
cy.findByText('open').focus();
cy.realPress('Space');
shouldBeOpen();
cy.findByText('close').should('be.focused');
cy.realPress('Space');
shouldBeClosed();
cy.findByText('open').should('be.focused');
// using keyboard on open button and close with escape
cy.realPress('Space');
shouldBeOpen();
cy.realPress('Escape');
shouldBeClosed();
});
it('can be open/closed with a pointer', () => {
// using pointer on open/close buttons
cy.findByText('open').click();
shouldBeOpen();
cy.findByText('close').should('be.focused').click();
shouldBeClosed();
cy.findByText('open').should('be.focused');
// using mouse inside dialog, then on a button outside
cy.findByText('open').click();
shouldBeOpen();
cy.findByText('title').click();
shouldBeOpen();
shouldNotAllowOutsideInteraction('realClick');
shouldBeClosed();
// using touch on a button outside
cy.findByText('open').click();
shouldBeOpen();
shouldNotAllowOutsideInteraction('realTouch');
shouldBeClosed();
// using mouse on an input outside
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realClick();
cy.findByPlaceholderText('name').should('not.be.focused');
shouldBeClosed();
// using touch on an input outside
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realTouch();
cy.findByPlaceholderText('name').should('not.be.focused');
shouldBeClosed();
// turn on animation
cy.findByLabelText('animated').click();
// using mouse on an input outside an animated dialog
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realClick();
cy.findByPlaceholderText('name').should('not.be.focused');
shouldBeClosed();
// finally, ensure that pointer-events have been reset and interactions restored
shouldAllowOutsideInteraction('realClick');
// using touch on an input outside an animated dialog
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realTouch();
cy.findByPlaceholderText('name').should('not.be.focused');
shouldBeClosed();
// finally, ensure that pointer-events have been reset and interactions restored
shouldAllowOutsideInteraction('realTouch');
});
it('keeps focus trapped even if focused element is removed', () => {
cy.findByText('open').click();
cy.findByText('close').should('be.focused');
cy.realPress('Tab');
cy.findByText('destroy me').should('be.focused');
cy.realPress('Space');
cy.realPress('Tab');
cy.findByText('close').should('be.focused');
});
});
describe('given a non-modal dialog', () => {
beforeEach(() => {
cy.findByLabelText('modal').click();
});
it('can be open/closed with a keyboard', () => {
// using keyboard on open/close buttons
cy.findByText('open').focus();
cy.realPress('Space');
shouldBeOpen();
cy.findByText('close').should('be.focused');
cy.realPress('Space');
shouldBeClosed();
cy.findByText('open').should('be.focused');
// using keyboard on open button and close with escape
cy.realPress('Space');
shouldBeOpen();
cy.realPress('Escape');
shouldBeClosed();
});
it('can be open/closed with a pointer', () => {
// using pointer on open/close buttons
cy.findByText('open').click();
shouldBeOpen();
cy.findByText('close').should('be.focused').click();
shouldBeClosed();
cy.findByText('open').should('be.focused');
// using mouse inside dialog, then on a button outside
cy.findByText('open').click();
shouldBeOpen();
cy.findByText('title').click();
shouldBeOpen();
shouldAllowOutsideInteraction('realClick');
shouldBeClosed();
// using touch on a button outside
cy.findByText('open').click();
shouldBeOpen();
shouldAllowOutsideInteraction('realTouch');
shouldBeClosed();
// using mouse on an input outside
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realClick();
cy.findByPlaceholderText('name').should('be.focused');
shouldBeClosed();
// using touch on an input outside
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realTouch();
cy.findByPlaceholderText('name').should('be.focused');
shouldBeClosed();
// turn on animation
cy.findByLabelText('animated').click();
// using mouse on an input outside an animated dialog
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realClick();
cy.findByPlaceholderText('name').should('be.focused');
shouldBeClosed();
// finally, ensure that pointer-events have been reset and interactions restored
shouldAllowOutsideInteraction('realClick');
// using touch on an input outside an animated dialog
cy.findByText('open').click();
shouldBeOpen();
cy.findByPlaceholderText('name').realTouch();
cy.findByPlaceholderText('name').should('be.focused');
shouldBeClosed();
// finally, ensure that pointer-events have been reset and interactions restored
shouldAllowOutsideInteraction('realTouch');
});
});
});
================================================
FILE: cypress/e2e/DropdownMenu.cy.ts
================================================
describe('DropdownMenu', () => {
describe('given submenu user', () => {
beforeEach(() => {
cy.visitStory('dropdownmenu--submenus');
cy.findByText('Open').click();
});
describe('when using pointer', () => {
it('should open submenu and not focus first item when moving pointer over trigger', () => {
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('not.be.focused');
});
it('should not close when moving pointer to submenu and back to parent trigger', () => {
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
});
it(
'should close submenu when moving pointer away but remain open when moving towards',
{
viewportWidth: 550,
},
() => {
// Moving away
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitRightToLeft('Bookmarks →');
cy.findByText('Inbox').should('not.exist');
// Moving towards
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitLeftToRight('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
// Test at collision edge
// Moving away
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitLeftToRight('WorkOS →');
cy.findByText('Radix').should('not.exist');
// Moving towards
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitRightToLeft('WorkOS →');
cy.findByText('Radix').should('be.visible');
},
);
it('should close open submenu when moving pointer to any item in parent menu', () => {
// Item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('New Tab');
cy.findByText('Inbox').should('not.exist');
// Disabled item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('Print…');
cy.findByText('Inbox').should('not.exist');
// Trigger item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('Tools →');
cy.findByText('Inbox').should('not.exist');
// Disabled trigger item
pointerOver('Bookmarks →');
pointerOver('Inbox');
pointerOver('History →');
cy.findByText('Inbox').should('not.exist');
});
it('should close unassociated submenus when moving pointer back to the root trigger', () => {
// Open multiple nested submenus and back to trigger in root menu
pointerOver('Bookmarks →');
pointerOver('WorkOS →');
pointerOver('Radix');
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
cy.findByText('Radix').should('not.exist');
});
it('should close all menus when clicking item in any menu, or clicking outside', () => {
// Root menu
cy.findByText('New Tab').click();
cy.findByText('New Tab').should('not.exist');
// Submenu
cy.findByText('Open').click();
pointerOver('Bookmarks →');
cy.findByText('Inbox').click();
cy.findByText('New Tab').should('not.exist');
cy.findByText('Inbox').should('not.exist');
// Click outside
cy.findByText('Open').click();
cy.get('body').click({ force: true });
cy.findByText('New Tab').should('not.exist');
});
});
describe('When using keyboard', () => {
it('should not open submenu when moving focus to trigger', () => {
cy.findByText('Bookmarks →').focus();
cy.findByText('Inbox').should('not.exist');
});
it('should open submenu and focus first item when pressing right arrow, enter or space key', () => {
function shouldOpenOnKeydown(key: string) {
cy.findByText('Bookmarks →').trigger('keydown', { key });
cy.findByText('Inbox').should('be.focused').trigger('keydown', { key: 'ArrowLeft' });
}
shouldOpenOnKeydown(' ');
shouldOpenOnKeydown('Enter');
shouldOpenOnKeydown('ArrowRight');
});
it('should close only the focused submenu when pressing left arrow key', () => {
cy.findByText('Bookmarks →').type('{enter}');
cy.findByText('WorkOS →').type('{enter}');
cy.findByText('Stitches').type('{leftarrow}');
cy.findByText('Stitches').should('not.exist');
cy.findByText('WorkOS →').should('be.visible');
cy.findByText('New Window').should('be.visible');
});
it('should focus first item when pressing right arrow key after opening submenu with mouse', () => {
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
cy.findByText('Bookmarks →').type('{rightarrow}');
cy.findByText('Inbox').should('be.focused');
});
it('should close all menus when pressing escape, enter or space key on any item', () => {
// Test close on root menu
cy.findByText('New Window').type('{esc}');
cy.findByText('New Window').should('not.exist');
// Reopen menu and test keys from within the submenu
cy.findByText('Open').click();
cy.findByText('Bookmarks →').type('{enter}');
cy.findByText('Inbox').type('{esc}');
cy.findByText('Inbox').should('not.exist');
cy.findByText('New Window').should('not.exist');
});
it('should scope typeahead behaviour to the active menu', () => {
// Matching items outside of the active menu should not become focused
pointerOver('Bookmarks →');
pointerOver('WorkOS →');
cy.findByText('Stitches').focus();
cy.findByText('Stitches').type('Inbox');
cy.findByText('Inbox').should('not.have.focus');
// Matching items inside of active menu should become focused
pointerOver('Notion').focus().type('Inbox');
cy.findByText('Inbox').should('have.focus');
});
});
describe('When using pointer in RTL', () => {
beforeEach(() => {
cy.findByText('Right-to-left').click({ force: true });
cy.findByText('Open').click();
});
it(
'should close submenu when pointer moves away but remain open when moving towards',
{
viewportWidth: 550,
},
() => {
// Moving away
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitLeftToRight('Bookmarks →');
cy.findByText('Inbox').should('not.exist');
// Moving towards
pointerOver('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
pointerExitRightToLeft('Bookmarks →');
cy.findByText('Inbox').should('be.visible');
// Test at collision edge
// Moving away
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitRightToLeft('WorkOS →');
cy.findByText('Radix').should('not.exist');
// Moving towards
pointerOver('WorkOS →');
cy.findByText('Radix').should('be.visible');
pointerExitLeftToRight('WorkOS →');
cy.findByText('Radix').should('be.visible');
},
);
});
describe('When using keyboard in RTL', () => {
beforeEach(() => {
cy.findByText('Right-to-left').click({ force: true });
cy.findByText('Open').click();
});
it('should open submenu and focus first item when pressing left arrow key but close when pressing right arrow key', () => {
cy.findByText('Bookmarks →').trigger('keydown', { key: 'ArrowLeft' });
cy.findByText('Inbox').should('be.focused');
cy.findByText('Inbox').trigger('keydown', { key: 'ArrowRight' });
cy.findByText('Inbox').should('not.exist');
// Root level menu should remain open
cy.findByText('New Tab').should('be.visible');
});
});
});
/* ---------------------------------------------------------------------------------------------- */
function pointerExitRightToLeft(elementText: string) {
return cy
.findByText(elementText)
.should('be.visible')
.realHover({ position: 'right' })
.realHover({ position: 'bottomLeft' })
.trigger('pointerout', 'bottomLeft', { pointerType: 'mouse' });
}
function pointerExitLeftToRight(elementText: string) {
return cy
.findByText(elementText)
.should('be.visible')
.realHover({ position: 'left' })
.realHover({ position: 'bottomRight' })
.trigger('pointerout', 'bottomRight', { pointerType: 'mouse' });
}
function pointerOver(elementText: string) {
return cy.findByText(elementText).should('be.visible').realHover();
}
});
================================================
FILE: cypress/e2e/Form.cy.ts
================================================
describe('Form', () => {
before(() => {
cy.visitStory('form--cypress');
});
beforeEach(() => {
cy.findByText('reset').click();
});
function checkControlMessageAssociation() {
cy.get('@control').should('have.attr', 'aria-describedby');
cy.get('@control')
.invoke('attr', 'aria-describedby')
.then((ariaDescribedby) =>
cy.get('@message').invoke('attr', 'id').should('equal', ariaDescribedby),
);
}
describe('given a form', () => {
it('should associate label and control', () => {
cy.findByText(/email/i).click();
cy.findByLabelText(/email/i).should('be.focused');
});
it('allows custom label and control association', () => {
cy.findByText(/country/i).click();
cy.findByLabelText(/country/i).should('be.focused');
});
});
describe('given a form with client-side validation', () => {
it('should prevent submitting when there are errors', () => {
cy.findByText('submit').click();
cy.findByText(/data/i).should('include.text', '{}');
});
it('should focus the first control with an error', () => {
cy.findByText('submit').click();
cy.findByLabelText(/name/i).should('be.focused');
});
it('should handle `valueMissing` validity', () => {
cy.findByLabelText(/name/i).as('control');
cy.findByText('submit').click();
cy.findByText(/missing/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').realType('John');
cy.realPress('Tab');
cy.findByText(/missing/).should('not.exist');
});
it('should handle `valid` validity', () => {
cy.findByLabelText(/name/i).as('control').focus();
cy.get('@control').realType('John');
cy.realPress('Tab');
cy.findByText('valid!').as('message');
checkControlMessageAssociation();
cy.findByText('submit').click();
cy.findByText(/data/i).should('include.text', '"name": "John"');
});
it('should handle `rangeOverflow` validity', () => {
cy.findByLabelText(/age/i).as('control').focus();
cy.get('@control').realType('200');
cy.realPress('Tab');
cy.findByText(/too large/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('50');
cy.realPress('Tab');
cy.findByText(/does not match the required step/).should('not.exist');
});
it('should handle `rangeUnderflow` validity', () => {
cy.findByLabelText(/age/i).as('control').focus();
cy.get('@control').realType('-50');
cy.realPress('Tab');
cy.findByText(/too small/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('50');
cy.realPress('Tab');
cy.findByText(/does not match the required step/).should('not.exist');
});
it('should handle `stepMismatch` validity', () => {
cy.findByLabelText(/age/i).as('control').focus();
cy.get('@control').realType('10.5');
cy.realPress('Tab');
cy.findByText(/does not match the required step/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('50');
cy.realPress('Tab');
cy.findByText(/does not match the required step/).should('not.exist');
});
it('should handle `typeMismatch` validity', () => {
cy.findByLabelText(/email/i).as('control').focus();
cy.get('@control').realType('john.doe');
cy.realPress('Tab');
cy.findByText(/does not match the required type/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').realType('@gmail.com');
cy.realPress('Tab');
cy.findByText(/does not match the required type/).should('not.exist');
});
it('should handle `tooShort` validity', () => {
cy.findByLabelText(/password/i)
.as('control')
.focus();
cy.get('@control').realType('pass');
cy.realPress('Tab');
cy.findByText(/too short/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('password');
cy.realPress('Tab');
cy.findByText(/too short/).should('not.exist');
});
// the browser makes it impossible to type too long
it.skip('should handle `tooLong` validity', () => {
cy.findByLabelText(/password/i)
.as('control')
.focus();
cy.get('@control').realType('password is way too long');
cy.realPress('Tab');
cy.findByText(/too long/).as('message');
checkControlMessageAssociation();
});
it('should handle `patternMismatch` validity', () => {
cy.findByLabelText(/pin/i).as('control').focus();
cy.get('@control').realType('pin');
cy.realPress('Tab');
cy.findByText(/does not match the required pattern/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('1234');
cy.realPress('Tab');
cy.findByText(/does not match the required pattern/).should('not.exist');
});
it('should handle custom validity (sync custom validator)', () => {
cy.findByLabelText(/secret 1/i)
.as('control')
.focus();
cy.get('@control').realType('secret');
cy.realPress('Tab');
cy.findByText(/not valid/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('shush');
cy.realPress('Tab');
cy.findByText(/not valid/).should('not.exist');
});
it('should handle custom validity (async custom validator)', () => {
cy.findByLabelText(/secret 2/i)
.as('control')
.focus();
cy.get('@control').realType('secret');
cy.realPress('Tab');
cy.findByText(/not valid/).as('message');
checkControlMessageAssociation();
cy.get('@control').focus();
cy.get('@control').clear();
cy.get('@control').realType('shush');
cy.realPress('Tab');
cy.findByText(/not valid/).should('not.exist');
});
it('should allow custom error messages', () => {
cy.findByLabelText(/country/i)
.as('control')
.focus();
cy.get('@control').realType('Portugal');
cy.realPress('Tab');
cy.findByText(/country should be "france" or "spain"/i).as('message');
checkControlMessageAssociation();
});
});
describe('given a form with server-side validation', () => {
before(() => {
cy.findByLabelText(/simulate server errors/i).click();
});
beforeEach(() => {
cy.findByLabelText(/name/i).focus();
cy.findByLabelText(/name/i).realType('John');
cy.findByText(/submit/i).click();
});
it('should focus the first control with a server error', () => {
cy.findByLabelText(/email/i).should('be.focused');
});
it('allows showing custom server error messages per-field', () => {
cy.findByLabelText(/email/i).as('control');
cy.findByText(/email is actually required server side/i).as('message');
checkControlMessageAssociation();
});
it('allows re-using client-side matchers for server errors', () => {
cy.findByLabelText(/pin/i).as('control');
cy.findByText(/does not match the required pattern/).as('message');
checkControlMessageAssociation();
});
it('allows re-submitting the form with server errors', () => {
cy.findByLabelText(/email/i).focus();
cy.findByLabelText(/email/i).realType('john.doe@gmail.com').realPress('Enter');
cy.findByLabelText(/email/i).should('be.focused');
});
});
});
================================================
FILE: cypress/e2e/Menubar.cy.ts
================================================
describe('Menubar', () => {
beforeEach(() => {
cy.visitStory('menubar--cypress');
});
describe('given a pointer user', () => {
it('should open menu when pointer moves between triggers and not focus first item', () => {
pointerOver('File');
cy.findByText('New Tab').should('not.exist');
cy.findByText('File').click();
cy.findByText('New Tab').should('not.have.focus');
pointerOver('Edit');
cy.findByText('New Tab').should('not.exist');
cy.findByText('Redo').should('not.have.focus');
pointerOver('History');
cy.findByText('Redo').should('not.exist');
cy.findByText('Radix').should('not.have.focus');
});
it('should maintain the open state when pointer moves away from a trigger', () => {
cy.findByText('File').click();
pointerOver('File').trigger('pointerout', 'bottomRight', {
pointerType: 'mouse',
force: true,
});
cy.findByText('New Tab').should('be.visible');
});
it('should not close open submenu when moving pointer to submenu and back to parent trigger', () => {
cy.findByText('Edit').click();
pointerOver('Find');
pointerOver('Find Next');
pointerOver('Find');
cy.findByText('Find Next').should('be.visible');
});
it('should close open submenu when moving pointer to any item in parent menu', () => {
cy.findByText('Edit').click();
// Item
pointerOver('Find');
pointerOver('Find Next');
pointerOver('Redo');
cy.findByText('Find Next').should('not.exist');
// Disabled item
pointerOver('Find');
pointerOver('Find Next');
pointerOver('Redo');
cy.findByText('Find Next').should('not.exist');
// Trigger item
pointerOver('Find');
pointerOver('Find Next');
pointerOver('Substitutions');
cy.findByText('Find Next').should('not.exist');
// Disabled trigger item
pointerOver('Find');
pointerOver('Find Next');
pointerOver('Speech');
cy.findByText('Find Next').should('not.exist');
});
it('should close unassociated submenus when moving pointer back to the root trigger', () => {
cy.findByText('Edit').click();
// Open multiple nested submenus and back to trigger in root menu
pointerOver('Find');
pointerOver('Advanced');
pointerOver('Regex');
pointerOver('Find');
cy.findByText('Find Next').should('be.visible');
cy.findByText('Regex').should('not.exist');
});
it('should close all menus when clicking item in any menu, or clicking outside', () => {
cy.findByText('Edit').click();
// Root menu
cy.findByText('Redo').click();
cy.findByText('Redo').should('not.exist');
// Submenu
cy.findByText('Edit').click();
pointerOver('Find');
cy.findByText('Find Next').click();
cy.findByText('Redo').should('not.exist');
cy.findByText('Find Next').should('not.exist');
// Click outside
cy.findByText('Edit').click();
cy.get('body').click();
cy.findByText('Redo').should('not.exist');
});
});
describe('given a keyboard user', () => {
function shouldSupportArrowKeyNavigation(dir: 'ltr' | 'rtl') {
const nextKey = dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';
const prevKey = dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';
// Moving forwards with menu closed
cy.findByText('File').trigger('keydown', { key: nextKey });
cy.findByText('Edit').should('be.focused').trigger('keydown', { key: nextKey });
// Moving backwards with menu closed
cy.findByText('History').should('be.focused').trigger('keydown', { key: prevKey });
cy.findByText('Edit').should('be.focused').trigger('keydown', { key: prevKey });
cy.findByText('File').should('be.focused');
// End of list (should not loop)
cy.findByText('File').trigger('keydown', { key: nextKey });
cy.findByText('File').should('be.focused');
// Open menu
cy.findByText('File').click();
// Moving forwards with menu open
cy.findByText('New Tab').trigger('keydown', { key: nextKey });
cy.findByText('New Tab').should('not.exist');
// Moving backwards with menu open
cy.findByText('Redo').trigger('keydown', { key: prevKey });
cy.findByText('Redo').should('not.exist');
// End of list (should not loop)
cy.findByText('New Tab').trigger('keydown', { key: prevKey });
cy.findByText('New Tab').should('be.visible');
// Moving forwards at submenu edge
cy.findByText('Share').trigger('keydown', { key: nextKey });
cy.findByText('Email Link').trigger('keydown', { key: nextKey });
cy.findByText('Redo').should('be.visible');
// Moving backwards at submenu edge
cy.findByText('Find').trigger('keydown', { key: nextKey });
cy.findByText('Advanced').trigger('keydown', { key: nextKey });
cy.findByText('Regex').trigger('keydown', { key: prevKey });
cy.findByText('Advanced').trigger('keydown', { key: prevKey });
cy.findByText('Find').trigger('keydown', { key: prevKey });
cy.findByText('New Tab').should('be.visible');
// Looping
cy.findByText('Loop').click();
cy.findByText('File').trigger('keydown', { key: prevKey });
cy.findByText('History').should('be.focused').trigger('keydown', { key: nextKey });
cy.findByText('File').should('be.focused');
// Looping menu open
cy.findByText('File').click();
cy.findByText('New Tab').trigger('keydown', { key: prevKey });
cy.findByText('Radix').trigger('keydown', { key: nextKey });
cy.findByText('New Tab').should('be.visible');
}
it('should move to next menu using right arrow and previous menu with left arrow', () => {
shouldSupportArrowKeyNavigation('ltr');
});
it('should not open submenu when moving focus to sub trigger', () => {
cy.findByText('Edit').click();
cy.findByText('Find').focus();
cy.findByText('Find Next').should('not.exist');
});
it('should not open submenu when moving focus to sub trigger', () => {
cy.findByText('Edit').click();
cy.findByText('Find').focus();
cy.findByText('Find Next').should('not.exist');
});
it('should open submenu and focus first item when pressing right arrow, enter or space key', () => {
cy.findByText('Edit').click();
function shouldOpenOnKeydown(key: string) {
cy.findByText('Find').trigger('keydown', { key });
cy.findByText('Search the web…')
.should('be.focused')
.trigger('keydown', { key: 'ArrowLeft' });
}
shouldOpenOnKeydown(' ');
shouldOpenOnKeydown('Enter');
shouldOpenOnKeydown('ArrowRight');
});
it('should close only the focused submenu when pressing left arrow key', () => {
cy.findByText('Edit').click();
cy.findByText('Find').type('{enter}');
cy.findByText('Advanced').type('{enter}');
cy.findByText('Regex').type('{leftarrow}');
cy.findByText('Regex').should('not.exist');
cy.findByText('Advanced').should('be.visible');
cy.findByText('Redo').should('be.visible');
});
it('should focus first item when pressing right arrow key after opening submenu with pointer', () => {
cy.findByText('Edit').click();
pointerOver('Find');
cy.findByText('Find Next').should('be.visible');
cy.findByText('Find').type('{rightarrow}');
cy.findByText('Search the web…').should('be.focused');
});
it('should close all menus when pressing escape, enter or space key on any item', () => {
cy.findByText('Edit').click();
// Test close on root menu
cy.findByText('Redo').type('{esc}');
cy.findByText('Redo').should('not.exist');
// Reopen menu and test keys from within the submenu
cy.findByText('Edit').click();
cy.findByText('Find').type('{enter}');
cy.findByText('Search the web…').type('{esc}');
cy.findByText('Search the web…').should('not.exist');
cy.findByText('Redo').should('not.exist');
});
it('should scope typeahead behaviour to the active menu', () => {
cy.findByText('Edit').click();
// Matching items outside of the active menu should not become focused
pointerOver('Find');
pointerOver('Advanced');
cy.findByText('Regex').focus();
cy.findByText('Regex').type('Find');
cy.findByText('Find').should('not.have.focus');
// Matching items inside of active menu should become focused
pointerOver('Advanced').focus().type('Find Next');
cy.findByText('Find Next').should('have.focus');
});
describe('with portals enabled', () => {
it('should move to next menu using right arrow and previous menu with left arrow', () => {
shouldSupportArrowKeyNavigation('ltr');
});
});
describe('with RTL enabled', () => {
beforeEach(() => {
cy.findByText('Right-to-left').click();
});
it('should move to next menu using right arrow and previous menu with left arrow', () => {
shouldSupportArrowKeyNavigation('rtl');
});
it('should open submenu and focus first item when pressing left arrow key but close when pressing right arrow key', () => {
cy.findByText('Edit').click();
cy.findByText('Find').trigger('keydown', { key: 'ArrowLeft' });
cy.findByText('Search the web…').should('be.focused');
cy.findByText('Search the web…').trigger('keydown', { key: 'ArrowRight' });
cy.findByText('Search the web…').should('not.exist');
// Root level menu should remain open
cy.findByText('Redo').should('be.visible');
});
});
});
/* ---------------------------------------------------------------------------------------------- */
function pointerOver(elementText: string) {
return cy.findByText(elementText).should('be.visible').realHover();
}
});
================================================
FILE: cypress/e2e/Select.cy.ts
================================================
describe('Select', () => {
beforeEach(() => {
cy.visitStory('select--cypress');
});
describe('given a select inside a form', () => {
it('should submit and react to changes', () => {
// submit without change
cy.findByText('buy').click();
cy.findByText(/t-shirt size/).should('include.text', 'size M');
// react to changes
cy.findByLabelText(/choose a size/).click();
cy.findByRole('option', { name: /small/i }).click();
cy.findByText(/t-shirt size/).should('include.text', 'size S');
});
});
describe('given a select with no value', () => {
it('should display the placeholder', () => {
cy.findByText('…').should('exist');
});
it('can be reset to the placeholder', () => {
cy.findByLabelText(/choose a model/).click();
cy.findByRole('option', { name: /model x/i }).click();
cy.findByText(/model y/i).should('not.exist');
cy.findByText(/model x/i).should('exist');
cy.findByText('unset').click();
cy.findByText('…').should('exist');
});
});
});
================================================
FILE: cypress/e2e/Toast.cy.ts
================================================
describe('Toast', () => {
beforeEach(() => {
cy.visitStory('toast--cypress');
});
function buttonIsFocused(identifier: number) {
cy.findByText(`Toast button ${identifier}`).should('be.focused');
}
function toastIsFocused(identifier: number) {
cy.findByTestId(`toast-${identifier}`).should('be.focused');
}
describe('given zero toasts', () => {
it('should not interrupt natural tab order in the document', () => {
cy.findByText('Focusable before viewport').focus();
cy.realPress('Tab');
cy.findByText('Focusable after viewport').should('be.focused');
cy.realPress(['Shift', 'Tab']);
cy.findByText('Focusable before viewport').should('be.focused');
});
});
describe('given multiple toasts', () => {
beforeEach(() => {
cy.findByText('Add toast').click();
cy.findByText('Add toast').click();
});
it('should have no acessibility issues', () => {
cy.injectAxe();
cy.checkA11y('[aria-label="Notifications (F8)"]');
});
it('should reverse tab order from most recent to least', () => {
cy.findByText('Focusable before viewport').focus();
cy.realPress('Tab');
toastIsFocused(2);
// Forward tab
cy.realPress('Tab');
buttonIsFocused(2.1);
cy.realPress('Tab');
buttonIsFocused(2.2);
cy.realPress('Tab');
toastIsFocused(1);
cy.realPress('Tab');
buttonIsFocused(1.1);
cy.realPress('Tab');
buttonIsFocused(1.2);
// End of viewport
cy.realPress('Tab');
cy.findByText('Focusable after viewport').should('be.focused');
// Backwards tab
cy.realPress(['Shift', 'Tab']);
buttonIsFocused(1.2);
cy.realPress(['Shift', 'Tab']);
buttonIsFocused(1.1);
cy.realPress(['Shift', 'Tab']);
toastIsFocused(1);
cy.realPress(['Shift', 'Tab']);
buttonIsFocused(2.2);
cy.realPress(['Shift', 'Tab']);
buttonIsFocused(2.1);
cy.realPress(['Shift', 'Tab']);
toastIsFocused(2);
// Start of viewport
cy.realPress(['Shift', 'Tab']);
cy.findByText('Focusable before viewport').should('be.focused');
});
it('should tab forwards from viewport to latest toast or backwards into the document', () => {
// Tab forward from viewport
cy.realPress('F8');
cy.realPress('Tab');
toastIsFocused(2);
// Tab backward from viewport
cy.realPress('F8');
cy.realPress(['Shift', 'Tab']);
cy.findByText('Focusable before viewport').should('be.focused');
});
});
});
================================================
FILE: cypress/support/commands.js
================================================
// @ts-check
///
///
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add('visitStorybook', (options) => {
return cy.visit('iframe.html', options);
});
Cypress.Commands.add('visitStory', (storyName, options) => {
return cy.visit(`iframe.html?id=components-${storyName}`, options);
});
================================================
FILE: cypress/support/e2e.js
================================================
// ***********************************************************
// This file is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import '@testing-library/cypress/add-commands';
import 'cypress-real-events/support';
import 'cypress-axe';
import './commands';
// Alternatively you can use CommonJS syntax:
// require('./commands')
================================================
FILE: cypress/support/index.d.ts
================================================
declare namespace Cypress {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
interface Chainable {
visitStorybook(options?: Partial): Cypress.Chainable;
visitStory(
storyName: string,
options?: Partial,
): Cypress.Chainable;
}
}
================================================
FILE: internal/builder/builder.js
================================================
// @ts-check
import path from 'node:path';
import fs from 'node:fs';
import * as esbuild from 'esbuild';
import * as tsup from 'tsup';
/**
* @param {string} relativePath
*/
export async function build(relativePath) {
const packageJsonPath = path.resolve(relativePath, 'package.json');
if (!fs.existsSync(packageJsonPath)) {
return;
}
const packageJsonContents = await fs.promises.readFile(packageJsonPath, 'utf-8').catch(() => {
console.error(`Failed to read package.json file at ${packageJsonPath}`);
process.exit(1);
});
/** @type {PackageJson} */
let packageJson;
try {
packageJson = JSON.parse(packageJsonContents);
} catch {
console.error(`Failed to parse package.json file at ${packageJsonPath}`);
process.exit(1);
}
const tasks = [];
const pkg = packageJson.name;
const files = ['index.ts'];
if (pkg === 'radix-ui') {
files.push('internal.ts');
}
const entryPoints = files.map((file) => `${relativePath || '.'}/src/${file}`);
const dist = `${relativePath || '.'}/dist`;
/** @type {esbuild.BuildOptions} */
const esbuildConfig = {
entryPoints: entryPoints,
external: ['@radix-ui/*'],
packages: 'external',
bundle: true,
sourcemap: true,
format: 'cjs',
target: 'es2022',
outdir: dist,
};
tasks.push(esbuild.build(esbuildConfig).then(() => console.log(`CJS: Built ${relativePath}`)));
tasks.push(
esbuild
.build({
...esbuildConfig,
format: 'esm',
outExtension: { '.js': '.mjs' },
})
.then(() => console.log(`ESM: Built ${relativePath}`)),
);
// tsup is used to emit d.ts files only (esbuild can't do that).
//
// Notes:
// 1. Emitting d.ts files is super slow for whatever reason.
// 2. It could have fully replaced esbuild (as it uses that internally),
// but at the moment its esbuild version is somewhat outdated.
// It’s also harder to configure and esbuild docs are more thorough.
tasks.push(
tsup
.build({
entry: entryPoints,
format: ['cjs', 'esm'],
dts: { only: true },
outDir: dist,
silent: true,
external: [/@radix-ui\/.+/],
})
.then(() => console.log(`TSC: Built ${relativePath}`)),
);
await Promise.all(tasks);
}
/**
* @typedef {{ name: string }} PackageJson
*/
================================================
FILE: internal/builder/eslint.config.js
================================================
// @ts-check
import { configs } from '@repo/eslint-config';
export default configs;
================================================
FILE: internal/builder/package.json
================================================
{
"name": "@repo/builder",
"version": "0.0.0",
"private": true,
"license": "MIT",
"type": "module",
"main": "./builder.js",
"exports": {
".": "./builder.js"
},
"bin": {
"radix-build": "./radix-build.js"
},
"dependencies": {
"esbuild": "^0.25.11",
"tsup": "^8.5.0"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"eslint": "^9.38.0"
}
}
================================================
FILE: internal/builder/radix-build.js
================================================
#!/usr/bin/env node
// @ts-check
import path from 'node:path';
import { build } from './builder.js';
process.on('unhandledRejection', (err) => {
throw err;
});
process.on('SIGINT', () => process.exit(0));
process.on('SIGTERM', () => process.exit(0));
const args = process.argv.slice(2);
const relativePath = path.relative(process.cwd(), args[0] || '.');
await build(relativePath);
================================================
FILE: internal/builder/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/base.json",
"compilerOptions": {
"rootDir": ".",
"allowJs": true,
"noEmit": true
},
"include": ["**/*"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: internal/eslint-config/eslint.config.js
================================================
// @ts-check
import { configs } from './index.js';
export default configs;
================================================
FILE: internal/eslint-config/index.js
================================================
// @ts-check
import * as eslintJs from '@chance/eslint';
import * as typescript from '@chance/eslint/typescript';
import { globals } from '@chance/eslint/globals';
export const js = eslintJs.getConfig({ ...globals.node, ...globals.browser });
export const ts = typescript.config;
/** @type {import("eslint").Linter.Config} */
export const overrides = {
ignores: ['dist/**', '.next/**'],
rules: {
'prefer-const': ['warn', { destructuring: 'all' }],
},
};
/** @type {import("eslint").Linter.Config[]} */
export const configs = [js, ts, overrides];
================================================
FILE: internal/eslint-config/package.json
================================================
{
"name": "@repo/eslint-config",
"version": "0.0.0",
"private": true,
"license": "MIT",
"type": "module",
"main": "./index.js",
"exports": {
".": "./index.js",
"./react-package": "./react-package.js",
"./vite": "./vite.js"
},
"scripts": {
"lint": "eslint --max-warnings 0 ."
},
"dependencies": {
"@chance/eslint": "^1.1.0",
"eslint-plugin-react-refresh": "^0.4.24"
},
"devDependencies": {
"@repo/typescript-config": "workspace:*",
"eslint": "^9.38.0"
},
"peerDependencies": {
"eslint": ">=9.18"
}
}
================================================
FILE: internal/eslint-config/react-package.js
================================================
// @ts-check
import * as react from '@chance/eslint/react';
import * as base from './index.js';
/** @type {import("eslint").Linter.Config[]} */
export const configs = [
base.js,
base.ts,
react.config,
base.overrides,
{
rules: {
'react/jsx-pascal-case': ['warn', { allowNamespace: true }],
// TODO: enable this and fix all the errors
'react/display-name': 'off',
'jsx-a11y/label-has-associated-control': [
'warn',
{
controlComponents: ['Checkbox'],
depth: 3,
},
],
},
},
{ ignores: ['**/dist/**'] },
];
================================================
FILE: internal/eslint-config/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/base.json",
"compilerOptions": {
"rootDir": ".",
"outDir": "dist",
"allowJs": true
},
"include": ["**/*"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: internal/eslint-config/vite.js
================================================
// @ts-check
import * as react from '@chance/eslint/react';
import reactRefresh from 'eslint-plugin-react-refresh';
import * as base from './index.js';
/** @type {import("eslint").Linter.Config[]} */
export const configs = [
base.js,
base.ts,
react.config,
base.overrides,
{
plugins: {
'react-refresh': reactRefresh,
},
rules: {
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
},
},
{ ignores: ['**/dist/**'] },
];
================================================
FILE: internal/test-data/eslint.config.js
================================================
// @ts-check
import { configs } from '@repo/eslint-config';
export default configs;
================================================
FILE: internal/test-data/foods.ts
================================================
export const foodGroups: Array<{
label?: string;
foods: Array<{ value: string; label: string; disabled?: boolean }>;
}> = [
{
label: 'Fruits',
foods: [
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'blueberry', label: 'Blueberry' },
{ value: 'grapes', label: 'Grapes' },
{ value: 'pineapple', label: 'Pineapple' },
],
},
{
label: 'Vegetables',
foods: [
{ value: 'aubergine', label: 'Aubergine' },
{ value: 'broccoli', label: 'Broccoli' },
{ value: 'carrot', label: 'Carrot', disabled: true },
{ value: 'courgette', label: 'Courgette' },
{ value: 'leek', label: 'Leek' },
],
},
{
label: 'Meat',
foods: [
{ value: 'beef', label: 'Beef' },
{ value: 'beef-with-sauce', label: 'Beef with sauce' },
{ value: 'chicken', label: 'Chicken' },
{ value: 'lamb', label: 'Lamb' },
{ value: 'pork', label: 'Pork' },
],
},
{
foods: [
{ value: 'candies', label: 'Candies' },
{ value: 'chocolates', label: 'Chocolates' },
],
},
];
================================================
FILE: internal/test-data/package.json
================================================
{
"name": "@repo/test-data",
"version": "0.0.0",
"private": true,
"license": "MIT",
"type": "module",
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"eslint": "^9.38.0",
"typescript": "^5.9.3"
},
"exports": {
"./*": "./*.ts"
},
"scripts": {
"lint": "eslint --max-warnings 0 .",
"check-types": "tsc --noEmit"
}
}
================================================
FILE: internal/test-data/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/base.json",
"compilerOptions": {
"rootDir": ".",
"outDir": "dist"
},
"include": ["**/*"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: internal/typescript-config/base.json
================================================
{
"$schema": "https://json.schemastore.org/tsconfig",
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"incremental": false,
"isolatedModules": true,
"lib": ["ES2023", "DOM", "DOM.Iterable"],
"module": "NodeNext",
"moduleDetection": "force",
"moduleResolution": "NodeNext",
"noUncheckedIndexedAccess": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "ES2022"
}
}
================================================
FILE: internal/typescript-config/nextjs.json
================================================
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./base.json",
"compilerOptions": {
"plugins": [{ "name": "next" }],
"module": "ESNext",
"moduleResolution": "Bundler",
"allowJs": true,
"jsx": "preserve",
"noEmit": true
}
}
================================================
FILE: internal/typescript-config/package.json
================================================
{
"name": "@repo/typescript-config",
"version": "0.0.0",
"private": true,
"license": "MIT"
}
================================================
FILE: internal/typescript-config/react-library.json
================================================
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./base.json",
"compilerOptions": {
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Bundler"
}
}
================================================
FILE: internal/typescript-config/vite-app.json
================================================
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./base.json",
"compilerOptions": {
"allowImportingTsExtensions": true,
"module": "ESNext",
"moduleResolution": "Bundler",
"noEmit": true,
"jsx": "react-jsx",
"useDefineForClassFields": true
}
}
================================================
FILE: internal/typescript-config/vite-node.json
================================================
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "./base.json",
"compilerOptions": {
"allowImportingTsExtensions": true,
"lib": ["ES2023"],
"module": "ESNext",
"moduleResolution": "Bundler",
"noEmit": true
}
}
================================================
FILE: internal/typescript-config/react-library/index.d.ts
================================================
///
///
///
///
declare module '*.module.css' {
const classes: { [key: string]: string };
export default classes;
}
================================================
FILE: packages/core/number/README.md
================================================
# `number`
This is an internal utility, not intended for public usage.
================================================
FILE: packages/core/number/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
export default configs;
================================================
FILE: packages/core/number/package.json
================================================
{
"name": "@radix-ui/number",
"version": "1.1.1",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"eslint": "^9.38.0",
"typescript": "^5.9.3"
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/core/number/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/core/number/src/index.ts
================================================
export { clamp } from './number';
================================================
FILE: packages/core/number/src/number.ts
================================================
function clamp(value: number, [min, max]: [number, number]): number {
return Math.min(max, Math.max(min, value));
}
export { clamp };
================================================
FILE: packages/core/primitive/README.md
================================================
# `primitive`
This is an internal utility, not intended for public usage.
================================================
FILE: packages/core/primitive/CHANGELOG.md
================================================
# @radix-ui/primitive
## 1.1.3
- Added internal DOM utilities
================================================
FILE: packages/core/primitive/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
/** @type {import("eslint").Linter.Config[]} */
export default [
...configs,
{
linterOptions: { reportUnusedDisableDirectives: false },
},
];
================================================
FILE: packages/core/primitive/package.json
================================================
{
"name": "@radix-ui/primitive",
"version": "1.1.3",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"eslint": "^9.38.0",
"typescript": "^5.9.3"
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/core/primitive/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/core/primitive/src/index.ts
================================================
export * from './primitive';
export type * from './types';
================================================
FILE: packages/core/primitive/src/primitive.tsx
================================================
/* eslint-disable no-restricted-properties */
/* eslint-disable no-restricted-globals */
export const canUseDOM = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);
/* eslint-enable no-restricted-globals */
export function composeEventHandlers(
originalEventHandler?: (event: E) => void,
ourEventHandler?: (event: E) => void,
{ checkForDefaultPrevented = true } = {},
) {
return function handleEvent(event: E) {
originalEventHandler?.(event);
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
return ourEventHandler?.(event);
}
};
}
export function getOwnerWindow(element: Node | null | undefined) {
if (!canUseDOM) {
throw new Error('Cannot access window outside of the DOM');
}
// eslint-disable-next-line no-restricted-globals
return element?.ownerDocument?.defaultView ?? window;
}
export function getOwnerDocument(element: Node | null | undefined) {
if (!canUseDOM) {
throw new Error('Cannot access document outside of the DOM');
}
// eslint-disable-next-line no-restricted-globals
return element?.ownerDocument ?? document;
}
/**
* Lifted from https://github.com/ariakit/ariakit/blob/main/packages/ariakit-core/src/utils/dom.ts#L37
* MIT License, Copyright (c) AriaKit.
*/
export function getActiveElement(
node: Node | null | undefined,
activeDescendant = false,
): HTMLElement | null {
const { activeElement } = getOwnerDocument(node);
if (!activeElement?.nodeName) {
// `activeElement` might be an empty object if we're interacting with elements
// inside of an iframe.
return null;
}
if (isFrame(activeElement) && activeElement.contentDocument) {
return getActiveElement(activeElement.contentDocument.body, activeDescendant);
}
if (activeDescendant) {
const id = activeElement.getAttribute('aria-activedescendant');
if (id) {
const element = getOwnerDocument(activeElement).getElementById(id);
if (element) {
return element;
}
}
}
return activeElement as HTMLElement | null;
}
export function isFrame(element: Element): element is HTMLIFrameElement {
return element.tagName === 'IFRAME';
}
================================================
FILE: packages/core/primitive/src/types.ts
================================================
export type Timeout = ReturnType;
export type Interval = ReturnType;
export type Immediate = ReturnType;
================================================
FILE: packages/core/rect/README.md
================================================
# `rect`
This is an internal utility, not intended for public usage.
================================================
FILE: packages/core/rect/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
export default configs;
================================================
FILE: packages/core/rect/package.json
================================================
{
"name": "@radix-ui/rect",
"version": "1.1.1",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"eslint": "^9.38.0",
"typescript": "^5.9.3"
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/core/rect/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/core/rect/src/index.ts
================================================
export { observeElementRect } from './observe-element-rect';
export type { Measurable } from './observe-element-rect';
================================================
FILE: packages/core/rect/src/observe-element-rect.ts
================================================
// Adapted from https://github.com/reach/observe-rect/tree
// MIT license, React Training
type Measurable = { getBoundingClientRect(): DOMRect };
/**
* Observes an element's rectangle on screen (getBoundingClientRect)
* This is useful to track elements on the screen and attach other elements
* that might be in different layers, etc.
*/
function observeElementRect(
/** The element whose rect to observe */
elementToObserve: Measurable,
/** The callback which will be called when the rect changes */
callback: CallbackFn,
) {
const observedData = observedElements.get(elementToObserve);
if (observedData === undefined) {
// add the element to the map of observed elements with its first callback
// because this is the first time this element is observed
observedElements.set(elementToObserve, { rect: {} as DOMRect, callbacks: [callback] });
if (observedElements.size === 1) {
// start the internal loop once at least 1 element is observed
rafId = requestAnimationFrame(runLoop);
}
} else {
// only add a callback for this element as it's already observed
observedData.callbacks.push(callback);
callback(elementToObserve.getBoundingClientRect());
}
return () => {
const observedData = observedElements.get(elementToObserve);
if (observedData === undefined) return;
// start by removing the callback
const index = observedData.callbacks.indexOf(callback);
if (index > -1) {
observedData.callbacks.splice(index, 1);
}
if (observedData.callbacks.length === 0) {
// stop observing this element because there are no
// callbacks registered for it anymore
observedElements.delete(elementToObserve);
if (observedElements.size === 0) {
// stop the internal loop once no elements are observed anymore
cancelAnimationFrame(rafId);
}
}
};
}
// ========================================================================
// module internals
type CallbackFn = (rect: DOMRect) => void;
type ObservedData = {
rect: DOMRect;
callbacks: Array;
};
let rafId: number;
const observedElements: Map = new Map();
function runLoop() {
const changedRectsData: Array = [];
// process all DOM reads first (getBoundingClientRect)
observedElements.forEach((data, element) => {
const newRect = element.getBoundingClientRect();
// gather all the data for elements whose rects have changed
if (!rectEquals(data.rect, newRect)) {
data.rect = newRect;
changedRectsData.push(data);
}
});
// group DOM writes here after the DOM reads (getBoundingClientRect)
// as DOM writes will most likely happen with the callbacks
changedRectsData.forEach((data) => {
data.callbacks.forEach((callback) => callback(data.rect));
});
rafId = requestAnimationFrame(runLoop);
}
// ========================================================================
/**
* Returns whether 2 rects are equal in values
*/
function rectEquals(rect1: DOMRect, rect2: DOMRect) {
return (
rect1.width === rect2.width &&
rect1.height === rect2.height &&
rect1.top === rect2.top &&
rect1.right === rect2.right &&
rect1.bottom === rect2.bottom &&
rect1.left === rect2.left
);
}
export { observeElementRect };
export type { Measurable };
================================================
FILE: packages/react/accessible-icon/README.md
================================================
# `react-accessible-icon`
View docs [here](https://radix-ui.com/primitives/docs/utilities/accessible-icon).
================================================
FILE: packages/react/accessible-icon/CHANGELOG.md
================================================
# @radix-ui/react-accessible-icon
## 1.1.8
- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.4`
## 1.1.7
- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.3`
## 1.1.6
- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.2`
## 1.1.5
- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.1`
## 1.1.4
- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.0`
================================================
FILE: packages/react/accessible-icon/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
export default configs;
================================================
FILE: packages/react/accessible-icon/package.json
================================================
{
"name": "@radix-ui/react-accessible-icon",
"version": "1.1.8",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"dependencies": {
"@radix-ui/react-visually-hidden": "workspace:*"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"eslint": "^9.38.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"typescript": "^5.9.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/react/accessible-icon/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/react/accessible-icon/src/accesible-icon.test.tsx
================================================
import React from 'react';
import { axe } from 'vitest-axe';
import type { RenderResult } from '@testing-library/react';
import { cleanup, render } from '@testing-library/react';
import { AccessibleIcon } from './accessible-icon';
import { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';
const LABEL_TEXT = 'Close';
const AccessibleIconTest = (props: Omit, 'label'>) => (
);
describe('given a default AccessibleIcon', () => {
let rendered: RenderResult;
let label: HTMLElement;
afterEach(cleanup);
beforeEach(() => {
rendered = render(
,
);
label = rendered.getByText(LABEL_TEXT);
});
it('should have no accessibility violations', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
it('should have a label', () => {
expect(label).toBeInTheDocument();
});
it('should add an aria-hidden attribute to the child', () => {
const svg = rendered.getByTestId('icon');
expect(svg.getAttribute('aria-hidden')).toBe('true');
});
it('should set focusable attribute on the child to false', () => {
const svg = rendered.getByTestId('icon');
expect(svg.getAttribute('focusable')).toBe('false');
});
});
describe('given an AccessibleIcon without children', () => {
it('should error', () => {
// Even though the error is caught, it still gets printed to the console
// so we mock that out to avoid the wall of red text.
const spy = vi.spyOn(console, 'error');
spy.mockImplementation(() => {});
expect(() => render()).toThrowError();
spy.mockRestore();
});
});
================================================
FILE: packages/react/accessible-icon/src/accessible-icon.tsx
================================================
import * as React from 'react';
import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
const NAME = 'AccessibleIcon';
interface AccessibleIconProps {
children?: React.ReactNode;
/**
* The accessible label for the icon. This label will be visually hidden but announced to screen
* reader users, similar to `alt` text for `img` tags.
*/
label: string;
}
const AccessibleIcon: React.FC = ({ children, label }) => {
const child = React.Children.only(children);
return (
<>
{React.cloneElement(child as React.ReactElement>, {
// accessibility
'aria-hidden': 'true',
focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
})}
{label}
);
};
AccessibleIcon.displayName = NAME;
const Root = AccessibleIcon;
export {
AccessibleIcon,
//
Root,
};
export type { AccessibleIconProps };
================================================
FILE: packages/react/accessible-icon/src/index.ts
================================================
export {
AccessibleIcon,
//
Root,
} from './accessible-icon';
export type { AccessibleIconProps } from './accessible-icon';
================================================
FILE: packages/react/accordion/README.md
================================================
# `react-accordion`
View docs [here](https://radix-ui.com/primitives/docs/components/accordion).
================================================
FILE: packages/react/accordion/CHANGELOG.md
================================================
# @radix-ui/react-accordion
## 1.2.12
- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collapsible@1.1.12`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`
## 1.2.11
- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)
- Updated dependencies: `@radix-ui/react-collapsible@1.1.11`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`
## 1.2.10
- Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-collapsible@1.1.10`
## 1.2.9
- Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-collapsible@1.1.9`
## 1.2.8
- Updated dependencies: `@radix-ui/react-collapsible@1.1.8`
## 1.2.7
- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-collapsible@1.1.7`
## 1.2.6
- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-collapsible@1.1.6`
## 1.2.5
- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)
- Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-collapsible@1.1.5`, `@radix-ui/react-primitive@2.1.0`
================================================
FILE: packages/react/accordion/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
export default configs;
================================================
FILE: packages/react/accordion/package.json
================================================
{
"name": "@radix-ui/react-accordion",
"version": "1.2.12",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"dependencies": {
"@radix-ui/primitive": "workspace:*",
"@radix-ui/react-collapsible": "workspace:*",
"@radix-ui/react-collection": "workspace:*",
"@radix-ui/react-compose-refs": "workspace:*",
"@radix-ui/react-context": "workspace:*",
"@radix-ui/react-direction": "workspace:*",
"@radix-ui/react-id": "workspace:*",
"@radix-ui/react-primitive": "workspace:*",
"@radix-ui/react-use-controllable-state": "workspace:*"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"eslint": "^9.38.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"typescript": "^5.9.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/react/accordion/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/react/accordion/src/accordion.test.tsx
================================================
import * as React from 'react';
import { axe } from 'vitest-axe';
import type { RenderResult } from '@testing-library/react';
import { cleanup, render, fireEvent } from '@testing-library/react';
import * as Accordion from './accordion';
import type { Mock } from 'vitest';
import { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';
const ITEMS = ['One', 'Two', 'Three'];
describe('given a single Accordion', () => {
let handleValueChange: Mock;
let rendered: RenderResult;
afterEach(cleanup);
describe('with default orientation=vertical', () => {
beforeEach(() => {
handleValueChange = vi.fn();
rendered = render();
});
it('should have no accessibility violations in default state', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
describe('when navigating by keyboard', () => {
beforeEach(() => {
const trigger = rendered.getByText('Trigger One');
trigger.focus();
});
describe('on `ArrowDown`', () => {
it('should move focus to the next trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(rendered.getByText('Trigger Two')).toHaveFocus();
});
it('should move focus to the first item if at the end', () => {
const trigger = rendered.getByText('Trigger Three');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `ArrowUp`', () => {
it('should move focus to the previous trigger', () => {
const trigger = rendered.getByText('Trigger Three');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
expect(rendered.getByText('Trigger Two')).toHaveFocus();
});
it('should move focus to the last item if at the beginning', () => {
const trigger = rendered.getByText('Trigger One');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
describe('on `Home`', () => {
it('should move focus to the first trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'Home' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `End`', () => {
it('should move focus to the last trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'End' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
});
describe('when clicking a trigger', () => {
let trigger: HTMLElement;
let contentOne: HTMLElement | null;
beforeEach(() => {
trigger = rendered.getByText('Trigger One');
fireEvent.click(trigger);
contentOne = rendered.getByText('Content One');
});
it('should show the content', () => {
expect(contentOne).toBeVisible();
});
it('should have no accessibility violations', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
it('should call onValueChange', () => {
expect(handleValueChange).toHaveBeenCalledWith('One');
});
describe('then clicking the trigger again', () => {
beforeEach(() => {
fireEvent.click(trigger);
});
it('should not close the content', () => {
expect(contentOne).toBeVisible();
});
it('should not call onValueChange', () => {
expect(handleValueChange).toHaveBeenCalledTimes(1);
});
});
describe('then clicking another trigger', () => {
beforeEach(() => {
const trigger = rendered.getByText('Trigger Two');
fireEvent.click(trigger);
});
it('should show the new content', () => {
const contentTwo = rendered.getByText('Content Two');
expect(contentTwo).toBeVisible();
});
it('should call onValueChange', () => {
expect(handleValueChange).toHaveBeenCalledWith('Two');
});
it('should hide the previous content', () => {
expect(contentOne).not.toBeVisible();
});
});
});
});
describe('with orientation=horizontal', () => {
describe('and default dir="ltr"', () => {
beforeEach(() => {
handleValueChange = vi.fn();
rendered = render(
,
);
});
describe('when navigating by keyboard', () => {
beforeEach(() => {
const trigger = rendered.getByText('Trigger One');
trigger.focus();
});
describe('on `ArrowUp`', () => {
it('should do nothing', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `ArrowDown`', () => {
it('should do nothing', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `ArrowRight`', () => {
it('should move focus to the next trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
expect(rendered.getByText('Trigger Two')).toHaveFocus();
});
it('should move focus to the first item if at the end', () => {
const trigger = rendered.getByText('Trigger Three');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `ArrowLeft`', () => {
it('should move focus to the previous trigger', () => {
const trigger = rendered.getByText('Trigger Three');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
expect(rendered.getByText('Trigger Two')).toHaveFocus();
});
it('should move focus to the last item if at the beginning', () => {
const trigger = rendered.getByText('Trigger One');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
describe('on `Home`', () => {
it('should move focus to the first trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'Home' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `End`', () => {
it('should move focus to the last trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'End' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
});
});
describe('and dir="rtl"', () => {
beforeEach(() => {
handleValueChange = vi.fn();
rendered = render(
,
);
});
describe('when navigating by keyboard', () => {
beforeEach(() => {
const trigger = rendered.getByText('Trigger One');
trigger.focus();
});
describe('on `ArrowUp`', () => {
it('should do nothing', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `ArrowDown`', () => {
it('should do nothing', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `ArrowRight`', () => {
it('should move focus to the previous trigger', () => {
const trigger = rendered.getByText('Trigger Two');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
it('should move focus to the last item if at the beginning', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
describe('on `ArrowLeft`', () => {
it('should move focus to the next trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
expect(rendered.getByText('Trigger Two')).toHaveFocus();
});
it('should move focus to the first item if at the end', () => {
const trigger = rendered.getByText('Trigger Three');
trigger.focus();
fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `Home`', () => {
it('should move focus to the first trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'Home' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `End`', () => {
it('should move focus to the last trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'End' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
});
});
});
});
describe('given a multiple Accordion', () => {
let handleValueChange: Mock;
let rendered: RenderResult;
afterEach(cleanup);
beforeEach(() => {
handleValueChange = vi.fn();
rendered = render();
});
it('should have no accessibility violations in default state', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
describe('when navigating by keyboard', () => {
beforeEach(() => {
rendered.getByText('Trigger One').focus();
});
describe('on `ArrowDown`', () => {
it('should move focus to the next trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
expect(rendered.getByText('Trigger Two')).toHaveFocus();
});
});
describe('on `ArrowUp`', () => {
it('should move focus to the previous trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
describe('on `Home`', () => {
it('should move focus to the first trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'Home' });
expect(rendered.getByText('Trigger One')).toHaveFocus();
});
});
describe('on `End`', () => {
it('should move focus to the last trigger', () => {
fireEvent.keyDown(document.activeElement!, { key: 'End' });
expect(rendered.getByText('Trigger Three')).toHaveFocus();
});
});
});
describe('when clicking a trigger', () => {
let trigger: HTMLElement;
let contentOne: HTMLElement | null;
beforeEach(() => {
trigger = rendered.getByText('Trigger One');
fireEvent.click(trigger);
contentOne = rendered.getByText('Content One');
});
it('should show the content', () => {
expect(contentOne).toBeVisible();
});
it('should have no accessibility violations', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
it('should call onValueChange', () => {
expect(handleValueChange).toHaveBeenCalledWith(['One']);
});
describe('then clicking the trigger again', () => {
beforeEach(() => {
fireEvent.click(trigger);
});
it('should hide the content', () => {
expect(contentOne).not.toBeVisible();
});
it('should call onValueChange', () => {
expect(handleValueChange).toHaveBeenCalledWith([]);
});
});
describe('then clicking another trigger', () => {
beforeEach(() => {
const trigger = rendered.getByText('Trigger Two');
fireEvent.click(trigger);
});
it('should show the new content', () => {
const contentTwo = rendered.getByText('Content Two');
expect(contentTwo).toBeVisible();
});
it('should call onValueChange', () => {
expect(handleValueChange).toHaveBeenCalledWith(['One', 'Two']);
});
it('should not hide the previous content', () => {
expect(contentOne).toBeVisible();
});
});
});
});
function AccordionTest(props: React.ComponentProps) {
return (
{ITEMS.map((val) => (
Trigger {val}Content {val}
))}
);
}
================================================
FILE: packages/react/accordion/src/accordion.tsx
================================================
import React from 'react';
import { createContextScope } from '@radix-ui/react-context';
import { createCollection } from '@radix-ui/react-collection';
import { useComposedRefs } from '@radix-ui/react-compose-refs';
import { composeEventHandlers } from '@radix-ui/primitive';
import { useControllableState } from '@radix-ui/react-use-controllable-state';
import { Primitive } from '@radix-ui/react-primitive';
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
import { createCollapsibleScope } from '@radix-ui/react-collapsible';
import { useId } from '@radix-ui/react-id';
import type { Scope } from '@radix-ui/react-context';
import { useDirection } from '@radix-ui/react-direction';
type Direction = 'ltr' | 'rtl';
/* -------------------------------------------------------------------------------------------------
* Accordion
* -----------------------------------------------------------------------------------------------*/
const ACCORDION_NAME = 'Accordion';
const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];
const [Collection, useCollection, createCollectionScope] =
createCollection(ACCORDION_NAME);
type ScopedProps
= P & { __scopeAccordion?: Scope };
const [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [
createCollectionScope,
createCollapsibleScope,
]);
const useCollapsibleScope = createCollapsibleScope();
type AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement;
interface AccordionSingleProps extends AccordionImplSingleProps {
type: 'single';
}
interface AccordionMultipleProps extends AccordionImplMultipleProps {
type: 'multiple';
}
const Accordion = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { type, ...accordionProps } = props;
const singleProps = accordionProps as AccordionImplSingleProps;
const multipleProps = accordionProps as AccordionImplMultipleProps;
return (
{type === 'multiple' ? (
) : (
)}
);
},
);
Accordion.displayName = ACCORDION_NAME;
/* -----------------------------------------------------------------------------------------------*/
type AccordionValueContextValue = {
value: string[];
onItemOpen(value: string): void;
onItemClose(value: string): void;
};
const [AccordionValueProvider, useAccordionValueContext] =
createAccordionContext(ACCORDION_NAME);
const [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
ACCORDION_NAME,
{ collapsible: false },
);
type AccordionImplSingleElement = AccordionImplElement;
interface AccordionImplSingleProps extends AccordionImplProps {
/**
* The controlled stateful value of the accordion item whose content is expanded.
*/
value?: string;
/**
* The value of the item whose content is expanded when the accordion is initially rendered. Use
* `defaultValue` if you do not need to control the state of an accordion.
*/
defaultValue?: string;
/**
* The callback that fires when the state of the accordion changes.
*/
onValueChange?(value: string): void;
/**
* Whether an accordion item can be collapsed after it has been opened.
* @default false
*/
collapsible?: boolean;
}
const AccordionImplSingle = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {},
collapsible = false,
...accordionSingleProps
} = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? '',
onChange: onValueChange,
caller: ACCORDION_NAME,
});
return (
(value ? [value] : []), [value])}
onItemOpen={setValue}
onItemClose={React.useCallback(() => collapsible && setValue(''), [collapsible, setValue])}
>
);
},
);
/* -----------------------------------------------------------------------------------------------*/
type AccordionImplMultipleElement = AccordionImplElement;
interface AccordionImplMultipleProps extends AccordionImplProps {
/**
* The controlled stateful value of the accordion items whose contents are expanded.
*/
value?: string[];
/**
* The value of the items whose contents are expanded when the accordion is initially rendered. Use
* `defaultValue` if you do not need to control the state of an accordion.
*/
defaultValue?: string[];
/**
* The callback that fires when the state of the accordion changes.
*/
onValueChange?(value: string[]): void;
}
const AccordionImplMultiple = React.forwardRef<
AccordionImplMultipleElement,
AccordionImplMultipleProps
>((props: ScopedProps, forwardedRef) => {
const {
value: valueProp,
defaultValue,
onValueChange = () => {},
...accordionMultipleProps
} = props;
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? [],
onChange: onValueChange,
caller: ACCORDION_NAME,
});
const handleItemOpen = React.useCallback(
(itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),
[setValue],
);
const handleItemClose = React.useCallback(
(itemValue: string) =>
setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),
[setValue],
);
return (
);
});
/* -----------------------------------------------------------------------------------------------*/
type AccordionImplContextValue = {
disabled?: boolean;
direction: AccordionImplProps['dir'];
orientation: AccordionImplProps['orientation'];
};
const [AccordionImplProvider, useAccordionContext] =
createAccordionContext(ACCORDION_NAME);
type AccordionImplElement = React.ComponentRef;
type PrimitiveDivProps = React.ComponentPropsWithoutRef;
interface AccordionImplProps extends PrimitiveDivProps {
/**
* Whether or not an accordion is disabled from user interaction.
*
* @defaultValue false
*/
disabled?: boolean;
/**
* The layout in which the Accordion operates.
* @default vertical
*/
orientation?: React.AriaAttributes['aria-orientation'];
/**
* The language read direction.
*/
dir?: Direction;
}
const AccordionImpl = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAccordion, disabled, dir, orientation = 'vertical', ...accordionProps } = props;
const accordionRef = React.useRef(null);
const composedRefs = useComposedRefs(accordionRef, forwardedRef);
const getItems = useCollection(__scopeAccordion);
const direction = useDirection(dir);
const isDirectionLTR = direction === 'ltr';
const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {
if (!ACCORDION_KEYS.includes(event.key)) return;
const target = event.target as HTMLElement;
const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
const triggerCount = triggerCollection.length;
if (triggerIndex === -1) return;
// Prevents page scroll while user is navigating
event.preventDefault();
let nextIndex = triggerIndex;
const homeIndex = 0;
const endIndex = triggerCount - 1;
const moveNext = () => {
nextIndex = triggerIndex + 1;
if (nextIndex > endIndex) {
nextIndex = homeIndex;
}
};
const movePrev = () => {
nextIndex = triggerIndex - 1;
if (nextIndex < homeIndex) {
nextIndex = endIndex;
}
};
switch (event.key) {
case 'Home':
nextIndex = homeIndex;
break;
case 'End':
nextIndex = endIndex;
break;
case 'ArrowRight':
if (orientation === 'horizontal') {
if (isDirectionLTR) {
moveNext();
} else {
movePrev();
}
}
break;
case 'ArrowDown':
if (orientation === 'vertical') {
moveNext();
}
break;
case 'ArrowLeft':
if (orientation === 'horizontal') {
if (isDirectionLTR) {
movePrev();
} else {
moveNext();
}
}
break;
case 'ArrowUp':
if (orientation === 'vertical') {
movePrev();
}
break;
}
const clampedIndex = nextIndex % triggerCount;
triggerCollection[clampedIndex]!.ref.current?.focus();
});
return (
);
},
);
/* -------------------------------------------------------------------------------------------------
* AccordionItem
* -----------------------------------------------------------------------------------------------*/
const ITEM_NAME = 'AccordionItem';
type AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string };
const [AccordionItemProvider, useAccordionItemContext] =
createAccordionContext(ITEM_NAME);
type AccordionItemElement = React.ComponentRef;
type CollapsibleProps = React.ComponentPropsWithoutRef;
interface AccordionItemProps
extends Omit {
/**
* Whether or not an accordion item is disabled from user interaction.
*
* @defaultValue false
*/
disabled?: boolean;
/**
* A string value for the accordion item. All items within an accordion should use a unique value.
*/
value: string;
}
/**
* `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.
*/
const AccordionItem = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAccordion, value, ...accordionItemProps } = props;
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
const triggerId = useId();
const open = (value && valueContext.value.includes(value)) || false;
const disabled = accordionContext.disabled || props.disabled;
return (
{
if (open) {
valueContext.onItemOpen(value);
} else {
valueContext.onItemClose(value);
}
}}
/>
);
},
);
AccordionItem.displayName = ITEM_NAME;
/* -------------------------------------------------------------------------------------------------
* AccordionHeader
* -----------------------------------------------------------------------------------------------*/
const HEADER_NAME = 'AccordionHeader';
type AccordionHeaderElement = React.ComponentRef;
type PrimitiveHeading3Props = React.ComponentPropsWithoutRef;
interface AccordionHeaderProps extends PrimitiveHeading3Props {}
/**
* `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible
* whether or not its content is collapsed.
*/
const AccordionHeader = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAccordion, ...headerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
return (
);
},
);
AccordionHeader.displayName = HEADER_NAME;
/* -------------------------------------------------------------------------------------------------
* AccordionTrigger
* -----------------------------------------------------------------------------------------------*/
const TRIGGER_NAME = 'AccordionTrigger';
type AccordionTriggerElement = React.ComponentRef;
type CollapsibleTriggerProps = React.ComponentPropsWithoutRef;
interface AccordionTriggerProps extends CollapsibleTriggerProps {}
/**
* `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It
* should always be nested inside of an `AccordionHeader`.
*/
const AccordionTrigger = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAccordion, ...triggerProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion);
const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return (
);
},
);
AccordionTrigger.displayName = TRIGGER_NAME;
/* -------------------------------------------------------------------------------------------------
* AccordionContent
* -----------------------------------------------------------------------------------------------*/
const CONTENT_NAME = 'AccordionContent';
type AccordionContentElement = React.ComponentRef;
type CollapsibleContentProps = React.ComponentPropsWithoutRef;
interface AccordionContentProps extends CollapsibleContentProps {}
/**
* `AccordionContent` contains the collapsible content for an `AccordionItem`.
*/
const AccordionContent = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAccordion, ...contentProps } = props;
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion);
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
return (
);
},
);
AccordionContent.displayName = CONTENT_NAME;
/* -----------------------------------------------------------------------------------------------*/
function getState(open?: boolean) {
return open ? 'open' : 'closed';
}
const Root = Accordion;
const Item = AccordionItem;
const Header = AccordionHeader;
const Trigger = AccordionTrigger;
const Content = AccordionContent;
export {
createAccordionScope,
//
Accordion,
AccordionItem,
AccordionHeader,
AccordionTrigger,
AccordionContent,
//
Root,
Item,
Header,
Trigger,
Content,
};
export type {
AccordionSingleProps,
AccordionMultipleProps,
AccordionItemProps,
AccordionHeaderProps,
AccordionTriggerProps,
AccordionContentProps,
};
================================================
FILE: packages/react/accordion/src/index.ts
================================================
'use client';
export {
createAccordionScope,
//
Accordion,
AccordionItem,
AccordionHeader,
AccordionTrigger,
AccordionContent,
//
Root,
Item,
Header,
Trigger,
Content,
} from './accordion';
export type {
AccordionSingleProps,
AccordionMultipleProps,
AccordionItemProps,
AccordionHeaderProps,
AccordionTriggerProps,
AccordionContentProps,
} from './accordion';
================================================
FILE: packages/react/alert-dialog/README.md
================================================
# `react-alert-dialog`
View docs [here](https://radix-ui.com/primitives/docs/components/alert-dialog).
================================================
FILE: packages/react/alert-dialog/CHANGELOG.md
================================================
# @radix-ui/react-alert-dialog
## 1.1.15
- Updated dependencies: `@radix-ui/react-slot@1.2.4`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-dialog@1.1.15`, `@radix-ui/react-primitive@2.1.4`
## 1.1.14
- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)
- Updated dependencies: `@radix-ui/react-dialog@1.1.14`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3`
## 1.1.13
- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-dialog@1.1.13`, `@radix-ui/react-primitive@2.1.2`
## 1.1.12
- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-dialog@1.1.12`, `@radix-ui/react-primitive@2.1.1`
## 1.1.11
- Updated dependencies: `@radix-ui/react-dialog@1.1.11`
## 1.1.10
- Updated dependencies: `@radix-ui/react-dialog@1.1.10`
## 1.1.9
- Updated dependencies: `@radix-ui/react-dialog@1.1.9`
## 1.1.8
- Updated dependencies: `@radix-ui/react-dialog@1.1.8`, `@radix-ui/react-primitive@2.1.0`
================================================
FILE: packages/react/alert-dialog/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
export default configs;
================================================
FILE: packages/react/alert-dialog/package.json
================================================
{
"name": "@radix-ui/react-alert-dialog",
"version": "1.1.15",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"src",
"dist"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"dependencies": {
"@radix-ui/primitive": "workspace:*",
"@radix-ui/react-compose-refs": "workspace:*",
"@radix-ui/react-context": "workspace:*",
"@radix-ui/react-dialog": "workspace:*",
"@radix-ui/react-primitive": "workspace:*",
"@radix-ui/react-slot": "workspace:*"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"eslint": "^9.38.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"typescript": "^5.9.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/react/alert-dialog/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/react/alert-dialog/src/alert-dialog.test.tsx
================================================
import React from 'react';
import { axe } from 'vitest-axe';
import type { RenderResult } from '@testing-library/react';
import { cleanup, render, fireEvent } from '@testing-library/react';
import * as AlertDialog from './alert-dialog';
import { afterEach, describe, it, beforeEach, expect } from 'vitest';
const OPEN_TEXT = 'Open';
const CANCEL_TEXT = 'Cancel';
const ACTION_TEXT = 'Do it';
const TITLE_TEXT = 'Warning';
const DESC_TEXT = 'This is a warning';
const OVERLAY_TEST_ID = 'test-overlay';
const DialogTest = (props: React.ComponentProps) => (
{OPEN_TEXT}{TITLE_TEXT}{DESC_TEXT}{CANCEL_TEXT}{ACTION_TEXT}
);
describe('given a default Dialog', () => {
let rendered: RenderResult;
let title: HTMLElement;
let trigger: HTMLElement;
let cancelButton: HTMLElement;
afterEach(cleanup);
beforeEach(() => {
rendered = render();
trigger = rendered.getByText(OPEN_TEXT);
});
it('should have no accessibility violations in default state', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
describe('after clicking the trigger', () => {
beforeEach(() => {
fireEvent.click(trigger);
title = rendered.getByText(TITLE_TEXT);
cancelButton = rendered.getByText(CANCEL_TEXT);
});
it('should open the content', () => {
expect(title).toBeVisible();
});
it('should have no accessibility violations when open', async () => {
expect(await axe(rendered.container)).toHaveNoViolations();
});
it('should focus the cancel button', () => {
expect(cancelButton).toHaveFocus();
});
});
});
================================================
FILE: packages/react/alert-dialog/src/alert-dialog.tsx
================================================
import * as React from 'react';
import { createContextScope } from '@radix-ui/react-context';
import { useComposedRefs } from '@radix-ui/react-compose-refs';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { createDialogScope } from '@radix-ui/react-dialog';
import { composeEventHandlers } from '@radix-ui/primitive';
import { createSlottable } from '@radix-ui/react-slot';
import type { Scope } from '@radix-ui/react-context';
/* -------------------------------------------------------------------------------------------------
* AlertDialog
* -----------------------------------------------------------------------------------------------*/
const ROOT_NAME = 'AlertDialog';
type ScopedProps
= P & { __scopeAlertDialog?: Scope };
const [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [
createDialogScope,
]);
const useDialogScope = createDialogScope();
type DialogProps = React.ComponentPropsWithoutRef;
interface AlertDialogProps extends Omit {}
const AlertDialog: React.FC = (props: ScopedProps) => {
const { __scopeAlertDialog, ...alertDialogProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
};
AlertDialog.displayName = ROOT_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogTrigger
* -----------------------------------------------------------------------------------------------*/
const TRIGGER_NAME = 'AlertDialogTrigger';
type AlertDialogTriggerElement = React.ComponentRef;
type DialogTriggerProps = React.ComponentPropsWithoutRef;
interface AlertDialogTriggerProps extends DialogTriggerProps {}
const AlertDialogTrigger = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, ...triggerProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
},
);
AlertDialogTrigger.displayName = TRIGGER_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogPortal
* -----------------------------------------------------------------------------------------------*/
const PORTAL_NAME = 'AlertDialogPortal';
type DialogPortalProps = React.ComponentPropsWithoutRef;
interface AlertDialogPortalProps extends DialogPortalProps {}
const AlertDialogPortal: React.FC = (
props: ScopedProps,
) => {
const { __scopeAlertDialog, ...portalProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
};
AlertDialogPortal.displayName = PORTAL_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogOverlay
* -----------------------------------------------------------------------------------------------*/
const OVERLAY_NAME = 'AlertDialogOverlay';
type AlertDialogOverlayElement = React.ComponentRef;
type DialogOverlayProps = React.ComponentPropsWithoutRef;
interface AlertDialogOverlayProps extends DialogOverlayProps {}
const AlertDialogOverlay = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, ...overlayProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
},
);
AlertDialogOverlay.displayName = OVERLAY_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogContent
* -----------------------------------------------------------------------------------------------*/
const CONTENT_NAME = 'AlertDialogContent';
type AlertDialogContentContextValue = {
cancelRef: React.MutableRefObject;
};
const [AlertDialogContentProvider, useAlertDialogContentContext] =
createAlertDialogContext(CONTENT_NAME);
type AlertDialogContentElement = React.ComponentRef;
type DialogContentProps = React.ComponentPropsWithoutRef;
interface AlertDialogContentProps
extends Omit {}
const Slottable = createSlottable('AlertDialogContent');
const AlertDialogContent = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, children, ...contentProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
const contentRef = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, contentRef);
const cancelRef = React.useRef(null);
return (
{
event.preventDefault();
cancelRef.current?.focus({ preventScroll: true });
})}
onPointerDownOutside={(event) => event.preventDefault()}
onInteractOutside={(event) => event.preventDefault()}
>
{/**
* We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`
* around everything, otherwise the `DescriptionWarning` would be rendered straight away.
* This is because we want the accessibility checks to run only once the content is actually
* open and that behaviour is already encapsulated in `DialogContent`.
*/}
{children}
{process.env.NODE_ENV === 'development' && (
)}
);
},
);
AlertDialogContent.displayName = CONTENT_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogTitle
* -----------------------------------------------------------------------------------------------*/
const TITLE_NAME = 'AlertDialogTitle';
type AlertDialogTitleElement = React.ComponentRef;
type DialogTitleProps = React.ComponentPropsWithoutRef;
interface AlertDialogTitleProps extends DialogTitleProps {}
const AlertDialogTitle = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, ...titleProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
},
);
AlertDialogTitle.displayName = TITLE_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogDescription
* -----------------------------------------------------------------------------------------------*/
const DESCRIPTION_NAME = 'AlertDialogDescription';
type AlertDialogDescriptionElement = React.ComponentRef;
type DialogDescriptionProps = React.ComponentPropsWithoutRef;
interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
const AlertDialogDescription = React.forwardRef<
AlertDialogDescriptionElement,
AlertDialogDescriptionProps
>((props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, ...descriptionProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
});
AlertDialogDescription.displayName = DESCRIPTION_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogAction
* -----------------------------------------------------------------------------------------------*/
const ACTION_NAME = 'AlertDialogAction';
type AlertDialogActionElement = React.ComponentRef;
type DialogCloseProps = React.ComponentPropsWithoutRef;
interface AlertDialogActionProps extends DialogCloseProps {}
const AlertDialogAction = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, ...actionProps } = props;
const dialogScope = useDialogScope(__scopeAlertDialog);
return ;
},
);
AlertDialogAction.displayName = ACTION_NAME;
/* -------------------------------------------------------------------------------------------------
* AlertDialogCancel
* -----------------------------------------------------------------------------------------------*/
const CANCEL_NAME = 'AlertDialogCancel';
type AlertDialogCancelElement = React.ComponentRef;
interface AlertDialogCancelProps extends DialogCloseProps {}
const AlertDialogCancel = React.forwardRef(
(props: ScopedProps, forwardedRef) => {
const { __scopeAlertDialog, ...cancelProps } = props;
const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);
const dialogScope = useDialogScope(__scopeAlertDialog);
const ref = useComposedRefs(forwardedRef, cancelRef);
return ;
},
);
AlertDialogCancel.displayName = CANCEL_NAME;
/* ---------------------------------------------------------------------------------------------- */
type DescriptionWarningProps = {
contentRef: React.RefObject;
};
const DescriptionWarning: React.FC = ({ contentRef }) => {
const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${CONTENT_NAME}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
React.useEffect(() => {
const hasDescription = document.getElementById(
contentRef.current?.getAttribute('aria-describedby')!,
);
if (!hasDescription) console.warn(MESSAGE);
}, [MESSAGE, contentRef]);
return null;
};
const Root = AlertDialog;
const Trigger = AlertDialogTrigger;
const Portal = AlertDialogPortal;
const Overlay = AlertDialogOverlay;
const Content = AlertDialogContent;
const Action = AlertDialogAction;
const Cancel = AlertDialogCancel;
const Title = AlertDialogTitle;
const Description = AlertDialogDescription;
export {
createAlertDialogScope,
//
AlertDialog,
AlertDialogTrigger,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogContent,
AlertDialogAction,
AlertDialogCancel,
AlertDialogTitle,
AlertDialogDescription,
//
Root,
Trigger,
Portal,
Overlay,
Content,
Action,
Cancel,
Title,
Description,
};
export type {
AlertDialogProps,
AlertDialogTriggerProps,
AlertDialogPortalProps,
AlertDialogOverlayProps,
AlertDialogContentProps,
AlertDialogActionProps,
AlertDialogCancelProps,
AlertDialogTitleProps,
AlertDialogDescriptionProps,
};
================================================
FILE: packages/react/alert-dialog/src/index.ts
================================================
'use client';
export {
createAlertDialogScope,
//
AlertDialog,
AlertDialogTrigger,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogContent,
AlertDialogAction,
AlertDialogCancel,
AlertDialogTitle,
AlertDialogDescription,
//
Root,
Trigger,
Portal,
Overlay,
Content,
Action,
Cancel,
Title,
Description,
} from './alert-dialog';
export type {
AlertDialogProps,
AlertDialogTriggerProps,
AlertDialogPortalProps,
AlertDialogOverlayProps,
AlertDialogContentProps,
AlertDialogActionProps,
AlertDialogCancelProps,
AlertDialogTitleProps,
AlertDialogDescriptionProps,
} from './alert-dialog';
================================================
FILE: packages/react/announce/README.md
================================================
# `react-announce`
View docs [here](https://radix-ui.com/primitives/docs/utilities/announce).
================================================
FILE: packages/react/announce/CHANGELOG.md
================================================
# @radix-ui/react-announce
## 0.2.8
- Updated dependencies: `@radix-ui/react-primitive@2.1.4`
## 0.2.7
- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)
- Updated dependencies: `@radix-ui/react-primitive@2.1.3`
## 0.2.6
- Updated dependencies: `@radix-ui/react-primitive@2.1.2`
## 0.2.5
- Updated dependencies: `@radix-ui/react-primitive@2.1.1`
## 0.2.4
- Updated dependencies: `@radix-ui/react-primitive@2.1.0`
================================================
FILE: packages/react/announce/eslint.config.mjs
================================================
// @ts-check
import { configs } from '@repo/eslint-config/react-package';
export default configs;
================================================
FILE: packages/react/announce/package.json
================================================
{
"name": "@radix-ui/react-announce",
"version": "0.2.8",
"license": "MIT",
"source": "./src/index.ts",
"main": "./src/index.ts",
"module": "./src/index.ts",
"publishConfig": {
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.mts",
"default": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
}
}
},
"files": [
"dist",
"README.md"
],
"sideEffects": false,
"scripts": {
"lint": "eslint --max-warnings 0 src",
"clean": "rm -rf dist",
"reset": "rm -rf dist node_modules",
"typecheck": "tsc --noEmit",
"build": "radix-build"
},
"dependencies": {
"@radix-ui/react-compose-refs": "workspace:*",
"@radix-ui/react-primitive": "workspace:*",
"@radix-ui/react-use-layout-effect": "workspace:*"
},
"devDependencies": {
"@repo/builder": "workspace:*",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"eslint": "^9.38.0",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"typescript": "^5.9.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
},
"homepage": "https://radix-ui.com/primitives",
"repository": {
"type": "git",
"url": "git+https://github.com/radix-ui/primitives.git"
},
"bugs": {
"url": "https://github.com/radix-ui/primitives/issues"
}
}
================================================
FILE: packages/react/announce/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/react-library.json",
"compilerOptions": {
"outDir": "dist",
"types": ["@repo/typescript-config/react-library"]
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
================================================
FILE: packages/react/announce/src/announce.tsx
================================================
import * as React from 'react';
import ReactDOM from 'react-dom';
import { useComposedRefs } from '@radix-ui/react-compose-refs';
import { Primitive } from '@radix-ui/react-primitive';
import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
type RegionType = 'polite' | 'assertive' | 'off';
type RegionRole = 'status' | 'alert' | 'log' | 'none';
const ROLES: { [key in RegionType]: RegionRole } = {
polite: 'status',
assertive: 'alert',
off: 'none',
};
const listenerMap = new Map();
/* -------------------------------------------------------------------------------------------------
* Announce
* -----------------------------------------------------------------------------------------------*/
const NAME = 'Announce';
type AnnounceElement = React.ComponentRef;
type PrimitiveDivProps = React.ComponentPropsWithoutRef;
interface AnnounceProps extends PrimitiveDivProps {
/**
* Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that
* indicates whether assistive technologies will present all, or only parts of, the changed region
* based on the change notifications defined by the `aria-relevant` attribute.
*
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-atomic
* @see Demo http://pauljadam.com/demos/aria-atomic-relevant.html
*/
'aria-atomic'?: boolean;
/**
* Mirrors the `aria-relevant` DOM attribute for live regions. It is an optional attribute used to
* describe what types of changes have occurred to the region, and which changes are relevant and
* should be announced. Any change that is not relevant acts in the same manner it would if the
* `aria-live` attribute were set to off.
*
* Unfortunately, `aria-relevant` doesn't behave as expected across all device/screen reader
* combinations. It's important to test its implementation before relying on it to work for your
* users. The attribute is omitted by default.
*
* @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-relevant
* @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute
* @see Opinion https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3
* @see Demo http://pauljadam.com/demos/aria-atomic-relevant.html
*/
'aria-relevant'?: PrimitiveDivProps['aria-relevant'];
/**
* React children of your component. Children can be mirrored directly or modified to optimize for
* screen reader user experience.
*/
children: React.ReactNode;
/**
* An optional unique identifier for the live region.
*
* By default, `Announce` components create, at most, two unique `aria-live` regions in the
* document (one for all `polite` notifications, one for all `assertive` notifications). In some
* cases you may wish to append additional `aria-live` regions for distinct purposes (for example,
* simple status updates may need to be separated from a stack of toast-style notifications). By
* passing an id, you indicate that any content rendered by components with the same identifier
* should be mirrored in a separate `aria-live` region.
*/
regionIdentifier?: string;
/**
* Mirrors the `role` DOM attribute. This is optional and may be useful as an override in some
* cases. By default, the role is determined by the `type` prop.
*
* @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
*/
role?: RegionRole;
/**
* Mirrors the `aria-live` DOM attribute. The `aria-live=POLITENESS_SETTING` is used to set the
* priority with which screen reader should treat updates to live regions. Its possible settings
* are: off, polite or assertive. Defaults to `polite`.
*
* @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
*/
type?: RegionType;
}
const Announce = React.forwardRef((props, forwardedRef) => {
const {
'aria-relevant': ariaRelevant,
children,
type = 'polite',
role = ROLES[type],
regionIdentifier,
...regionProps
} = props;
const ariaAtomic = ['true', true].includes(regionProps['aria-atomic'] as any);
// The region is appended to the root document node, which is usually the global `document` but in
// some contexts may be another node. After the Announce element ref is attached, we set the
// ownerDocumentRef to make sure we have the right root node. We should only need to do this once.
const ownerDocumentRef = React.useRef(document);
const setOwnerDocumentFromRef = React.useCallback((node: HTMLDivElement) => {
if (node) {
ownerDocumentRef.current = node.ownerDocument;
}
}, []);
const ownRef = React.useRef(null);
const ref = useComposedRefs(forwardedRef, ownRef, setOwnerDocumentFromRef);
const [region, setRegion] = React.useState();
const relevant = ariaRelevant
? Array.isArray(ariaRelevant)
? ariaRelevant.join(' ')
: ariaRelevant
: undefined;
const getLiveRegionElement = React.useCallback(() => {
const ownerDocument = ownerDocumentRef.current;
const regionConfig = { type, role, relevant, id: regionIdentifier, atomic: ariaAtomic };
const regionSelector = buildSelector(regionConfig);
const element = ownerDocument.querySelector(regionSelector);
return element || buildLiveRegionElement(ownerDocument, regionConfig);
}, [ariaAtomic, relevant, role, type, regionIdentifier]);
useLayoutEffect(() => {
setRegion(getLiveRegionElement() as HTMLElement);
}, [getLiveRegionElement]);
// In some screen reader/browser combinations, alerts coming from an inactive browser tab may be
// announced, which is a confusing experience for a user interacting with a completely different
// page. When the page visibility changes we'll update the `role` and `aria-live` attributes of
// our region element to prevent that.
// https://inclusive-components.design/notifications/#restrictingmessagestocontexts
React.useEffect(() => {
const ownerDocument = ownerDocumentRef.current;
function updateAttributesOnVisibilityChange() {
regionElement.setAttribute('role', ownerDocument.hidden ? 'none' : role);
regionElement.setAttribute('aria-live', ownerDocument.hidden ? 'off' : type);
}
// Ok, so this might look a little weird and confusing, but here's what's going on:
// - We need to hide `aria-live` regions via a global event listener, as noted in the comment
// above.
// - We only need one listener per region. Keep in mind that each `Announce` does not
// necessarily generate a unique live region element.
// - We track whether or not a listener has already been attached for a given region in a map
// so we can skip these effects after `Announce` is used again with a shared live region.
const regionElement = getLiveRegionElement();
if (!listenerMap.get(regionElement)) {
ownerDocument.addEventListener('visibilitychange', updateAttributesOnVisibilityChange);
listenerMap.set(regionElement, 1);
} else {
const announceCount = listenerMap.get(regionElement)!;
listenerMap.set(regionElement, announceCount + 1);
}
return function () {
const announceCount = listenerMap.get(regionElement)!;
listenerMap.set(regionElement, announceCount - 1);
if (announceCount === 1) {
ownerDocument.removeEventListener('visibilitychange', updateAttributesOnVisibilityChange);
}
};
}, [getLiveRegionElement, role, type]);
return (
{children}
{/* portal into live region for screen reader announcements */}
{region && ReactDOM.createPortal(
);
export const Styled = () => (
