diff --git a/components/DocCodeBlock.tsx b/components/DocCodeBlock.tsx
index e00d7853d..2233b1fd0 100644
--- a/components/DocCodeBlock.tsx
+++ b/components/DocCodeBlock.tsx
@@ -158,8 +158,32 @@ export function DocCodeBlock({
}
const makeCodeSandboxParams = (name, code) => {
- const css =
- '*{box-sizing:border-box;margin:0;padding:0;}body{font-family:system-ui;width:100vw;height:100vh;background-image:linear-gradient(330deg, hsl(272,53%,50%) 0%, hsl(226,68%,56%) 100%);display:flex;align-items:flex-start;justify-content:center;}body>div{padding-top:120px}svg{display:block;}';
+ const css = `
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: system-ui;
+ width: 100vw;
+ height: 100vh;
+ background-image: linear-gradient(
+ 330deg,
+ hsl(272, 53%, 50%) 0%,
+ hsl(226, 68%, 56%) 100%
+ );
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ margin-top: 120px;
+}
+
+svg {
+ display: block;
+}
+`;
const parameters = getParameters({
files: {
diff --git a/components/demos/DropdownMenu.jsx b/components/demos/DropdownMenu.jsx
index c33884c71..f180a47dc 100644
--- a/components/demos/DropdownMenu.jsx
+++ b/components/demos/DropdownMenu.jsx
@@ -55,12 +55,12 @@ const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
fill: 'white',
});
-function Content({ children, arrowOffset, ...props }) {
+function Content({ children, ...props }) {
return (
{children}
-
+
);
@@ -190,7 +190,7 @@ export const DropdownMenuDemo = () => {
-
+
New Tab ⌘+T
diff --git a/components/marketing/DeveloperExperienceSection.tsx b/components/marketing/DeveloperExperienceSection.tsx
index 65e6b66b3..0ae9f1318 100644
--- a/components/marketing/DeveloperExperienceSection.tsx
+++ b/components/marketing/DeveloperExperienceSection.tsx
@@ -435,7 +435,7 @@ export const DeploymentPopover = ({ children }) => {
{
// Focus the close button when popover opens
popoverCloseButton.current?.focus();
diff --git a/components/marketing/MainHeroDropdownMenu.tsx b/components/marketing/MainHeroDropdownMenu.tsx
index 6bf8b902b..e8faf1611 100644
--- a/components/marketing/MainHeroDropdownMenu.tsx
+++ b/components/marketing/MainHeroDropdownMenu.tsx
@@ -85,82 +85,71 @@ export function MainHeroDropdownMenu() {
- {
+ event.preventDefault();
+ if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) {
+ setOpen(false);
+ }
}}
- >
- {
+ onInteractOutside={(event) => {
+ if (event.target !== triggerRef.current) {
+ event.preventDefault();
+ }
+ }}
+ onOpenAutoFocus={(event) => {
+ // We prevent the initial auto focus because it's a demo rather than a real UI,
+ // so the parent page focus is not stolen.
+ if (initialAutoFocusPrevented.current === false) {
event.preventDefault();
- if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) {
- setOpen(false);
- }
- }}
- onInteractOutside={(event) => {
- if (event.target !== triggerRef.current) {
- event.preventDefault();
- }
- }}
- onOpenAutoFocus={(event) => {
- // We prevent the initial auto focus because it's a demo rather than a real UI,
- // so the parent page focus is not stolen.
- if (initialAutoFocusPrevented.current === false) {
- event.preventDefault();
- initialAutoFocusPrevented.current = true;
- }
- }}
- >
-
- New Tab
- New Window
-
+ initialAutoFocusPrevented.current = true;
+ }
+ }}
+ >
+
+ New Tab
+ New Window
+
-
-
- Favorites
-
-
-
-
-
- GitHub
-
-
-
- Stitches
-
-
-
- Twitter
-
-
-
+
+
+ Favorites
+
+
+
+
+
+ GitHub
+
+
+
+ Stitches
+
+
+
+ Twitter
+
+
+
- Downloads
-
-
-
-
-
- Show Toolbar
-
-
-
-
-
- Show Full URLs
-
-
-
+ Downloads
+
+
+
+
+
+ Show Toolbar
+
+
+
+
+
+ Show Full URLs
+
+
);
}
diff --git a/components/marketing/MainHeroPopover.tsx b/components/marketing/MainHeroPopover.tsx
index a25baee46..6a22cbe85 100644
--- a/components/marketing/MainHeroPopover.tsx
+++ b/components/marketing/MainHeroPopover.tsx
@@ -36,73 +36,62 @@ export function MainHeroPopover() {
Dimensions
- event.preventDefault()}
+ onEscapeKeyDown={(event) => {
+ event.preventDefault();
+ if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) {
+ setOpen(false);
+ }
}}
- >
- event.preventDefault()}
- onEscapeKeyDown={(event) => {
+ onOpenAutoFocus={(event) => {
+ // We prevent the initial auto focus because it's a demo rather than a real UI,
+ // so that the parent page focus is not stolen.
+ if (initialAutoFocusPrevented.current === false) {
event.preventDefault();
- if (event.target instanceof HTMLElement && contentRef.current?.contains(event.target)) {
- setOpen(false);
- }
- }}
- onOpenAutoFocus={(event) => {
- // We prevent the initial auto focus because it's a demo rather than a real UI,
- // so that the parent page focus is not stolen.
- if (initialAutoFocusPrevented.current === false) {
+ initialAutoFocusPrevented.current = true;
+ } else {
+ // There's a brutal scroll shift bug with iOS Safari that we need to investigate.
+ // Cancelling input focus on open until we figure it out. Not related to the small input font size.
+ if (
+ /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
+ navigator.maxTouchPoints > 0
+ ) {
event.preventDefault();
- initialAutoFocusPrevented.current = true;
- } else {
- // There's a brutal scroll shift bug with iOS Safari that we need to investigate.
- // Cancelling input focus on open until we figure it out. Not related to the small input font size.
- if (
- /^((?!chrome|android).)*safari/i.test(navigator.userAgent) &&
- navigator.maxTouchPoints > 0
- ) {
- event.preventDefault();
- }
}
- }}
- >
-
+ }
+ }}
+ >
+
-
- Dimensions
-
+
+ Dimensions
+
-
- Width
-
- Height
-
- Margin
-
- Padding
-
-
+
+ Width
+
+ Height
+
+ Margin
+
+ Padding
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
);
}
diff --git a/data/blog/under-the-spotlight-popover.mdx b/data/blog/under-the-spotlight-popover.mdx
index ff56b0ade..eaa5d6b84 100644
--- a/data/blog/under-the-spotlight-popover.mdx
+++ b/data/blog/under-the-spotlight-popover.mdx
@@ -87,11 +87,11 @@ Our Popover component exposes its transform origin via a CSS Custom Property. Th
### Nesting
-Some advanced interfaces, such as design tools, may require nesting of Popovers. The Radix Popover ensures you can customise its layering and dismissing behaviour.
+Some advanced interfaces, such as design tools, may require nesting of Popovers. The Radix Popover ensures you can customise its layering and dismissing behavior.
### Highly customizable
-You can configure many different behaviours, such as dismissing and layering, portal rendering, auto focus and collisions.
+You can configure many different behaviors, such as dismissing and layering, portal rendering, auto focus and collisions.
### Styling
diff --git a/data/primitives/components/context-menu/0.1.7.mdx b/data/primitives/components/context-menu/0.1.7.mdx
index c9cc21bb7..c196bca17 100644
--- a/data/primitives/components/context-menu/0.1.7.mdx
+++ b/data/primitives/components/context-menu/0.1.7.mdx
@@ -75,9 +75,9 @@ export default () => (
-
+
-
+
@@ -296,18 +296,58 @@ The component that pops out in an open context menu.
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
),
},
{
- name: 'collisionTolerance',
- type: 'number',
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
+
+ ),
+ },
+ {
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -371,17 +411,6 @@ An optional arrow element to render alongside a submenu. This can be used to hel
default: 5,
description: The height of the arrow in pixels.,
},
- {
- name: 'offset',
- type: 'number',
- default: 0,
- description: (
-
- The distance in pixels to render from the{' '}
- ContextMenu.Content edge.
-
- ),
- },
]}
/>
@@ -923,18 +952,70 @@ The component that pops out when a submenu is open. Must be rendered inside `Con
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
+
+ ),
+ },
+ {
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
),
},
{
- name: 'collisionTolerance',
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
+ default: '0',
+ description: (
+
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'arrowPadding',
type: 'number',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The padding between the arrow and the edges of the content. If your
+ content has border-radius, this will prevent it from
+ overflowing the corners.
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -964,24 +1045,28 @@ The component that pops out when a submenu is open. Must be rendered inside `Con
You can create submenus by using `ContextMenu.Sub` in combination with its parts.
-```jsx line=7-14
+```jsx line=8-17
…
-
- …
- …
-
-
- Sub menu →
-
- Sub menu item
- Sub menu item
-
-
-
-
- …
-
+
+
+ …
+ …
+
+
+ Sub menu →
+
+
+ Sub menu item
+ Sub menu item
+
+
+
+
+
+ …
+
+
```
@@ -989,7 +1074,7 @@ You can create submenus by using `ContextMenu.Sub` in combination with its parts
You can add special styles to disabled items via the `data-disabled` attribute.
-```jsx line=4-6,12
+```jsx line=4-6,13
import { styled } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -1000,11 +1085,13 @@ const StyledItem = styled(ContextMenu.Item, {
export default () => (
…
-
- …
- …
- …
-
+
+
+ …
+ …
+ …
+
+
);
```
@@ -1013,16 +1100,18 @@ export default () => (
Use the `Separator` part to add a separator between items.
-```jsx line=5,7
+```jsx line=6,8
…
-
- …
-
- …
-
- …
-
+
+
+ …
+
+ …
+
+ …
+
+
```
@@ -1030,15 +1119,17 @@ Use the `Separator` part to add a separator between items.
Use the `Label` part to help label a section.
-```jsx line=4
+```jsx line=5
…
-
- Label
- …
- …
- …
-
+
+
+ Label
+ …
+ …
+ …
+
+
```
@@ -1046,7 +1137,7 @@ Use the `Label` part to help label a section.
Use the `CheckboxItem` part to add an item that can be checked.
-```jsx line=6,15-20
+```jsx line=6,16-21
import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -1057,20 +1148,22 @@ export default () => {
return (
…
-
- …
- …
-
-
-
-
-
- Checkbox item
-
-
+
+
+ …
+ …
+
+
+
+
+
+ Checkbox item
+
+
+
);
};
@@ -1080,7 +1173,7 @@ export default () => {
Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others.
-```jsx line=6,12-31
+```jsx line=6,13-32
import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -1091,28 +1184,30 @@ export default () => {
return (
…
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Green
-
-
-
+
+
+
+
+
+
+
+ Red
+
+
+
+
+
+ Blue
+
+
+
+
+
+ Green
+
+
+
+
);
};
@@ -1122,7 +1217,7 @@ export default () => {
You can add extra decorative elements in the `Item` parts, such as images.
-```jsx line=4-7,14,18,22
+```jsx line=4-7,15,19,23
import { styled } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -1134,20 +1229,22 @@ const Image = styled('img', {
export default () => (
…
-
-
-
- Adolfo Hess
-
-
-
- Miyah Myles
-
-
-
- Sylvia Reynolds
-
-
+
+
+
+
+ Adolfo Hess
+
+
+
+ Miyah Myles
+
+
+
+ Sylvia Reynolds
+
+
+
);
```
@@ -1156,7 +1253,7 @@ export default () => (
We expose a CSS custom property `--radix-context-menu-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.
-```jsx line=4-7,9-12,17
+```jsx line=4-7,9-12,18
import { styled, keyframes } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -1173,7 +1270,9 @@ const StyledContent = styled(ContextMenu.Content, {
export default () => (
…
- …
+
+ …
+
);
```
@@ -1182,7 +1281,7 @@ export default () => (
We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.
-```jsx line=4-7,9,12-14-19,24
+```jsx line=4-7,9-12,14-19,25
import { styled, keyframes } from '@stitches/react';
import * as ContextMenu from '@radix-ui/react-context-menu';
@@ -1206,7 +1305,9 @@ const StyledContent = styled(ContextMenu.Content, {
export default () => (
…
- …
+
+ …
+
);
```
diff --git a/data/primitives/components/dropdown-menu/0.1.7.mdx b/data/primitives/components/dropdown-menu/0.1.7.mdx
index c3c405a4b..b5a2cb263 100644
--- a/data/primitives/components/dropdown-menu/0.1.7.mdx
+++ b/data/primitives/components/dropdown-menu/0.1.7.mdx
@@ -76,9 +76,9 @@ export default () => (
-
+
-
+
@@ -357,18 +357,70 @@ The component that pops out when the dropdown menu is open.
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
),
},
{
- name: 'collisionTolerance',
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
+
+ ),
+ },
+ {
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
+ default: '0',
+ description: (
+
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'arrowPadding',
type: 'number',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The padding between the arrow and the edges of the content. If your
+ content has border-radius, this will prevent it from
+ overflowing the corners.
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -436,17 +488,6 @@ An optional arrow element to render alongside the dropdown menu. This can be use
default: 5,
description: The height of the arrow in pixels.,
},
- {
- name: 'offset',
- type: 'number',
- default: 0,
- description: (
-
- The distance in pixels to render from the{' '}
- DropdownMenu.Content edge.
-
- ),
- },
]}
/>
@@ -992,18 +1033,70 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
),
},
{
- name: 'collisionTolerance',
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
+
+ ),
+ },
+ {
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
+ default: '0',
+ description: (
+
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'arrowPadding',
type: 'number',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The padding between the arrow and the edges of the content. If your
+ content has border-radius, this will prevent it from
+ overflowing the corners.
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -1037,24 +1130,28 @@ The component that pops out when a submenu is open. Must be rendered inside `Dro
You can create submenus by using `DropdownMenu.Sub` in combination with its parts.
-```jsx line=7-14
+```jsx line=8-17
…
-
- …
- …
-
-
- Sub menu →
-
- Sub menu item
- Sub menu item
-
-
-
-
- …
-
+
+
+ …
+ …
+
+
+ Sub menu →
+
+
+ Sub menu item
+ Sub menu item
+
+
+
+
+
+ …
+
+
```
@@ -1062,7 +1159,7 @@ You can create submenus by using `DropdownMenu.Sub` in combination with its part
You can add special styles to disabled items via the `data-disabled` attribute.
-```jsx line=4-6,12
+```jsx line=4-6,13
import { styled } from '@stitches/react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -1073,11 +1170,13 @@ const StyledItem = styled(DropdownMenu.Item, {
export default () => (
…
-
- …
- …
- …
-
+
+
+ …
+ …
+ …
+
+
);
```
@@ -1086,16 +1185,18 @@ export default () => (
Use the `Separator` part to add a separator between items.
-```jsx line=5,7
+```jsx line=6,8
…
-
- …
-
- …
-
- …
-
+
+
+ …
+
+ …
+
+ …
+
+
```
@@ -1103,15 +1204,17 @@ Use the `Separator` part to add a separator between items.
Use the `Label` part to help label a section.
-```jsx line=4
+```jsx line=5
…
-
- Label
- …
- …
- …
-
+
+
+ Label
+ …
+ …
+ …
+
+
```
@@ -1119,7 +1222,7 @@ Use the `Label` part to help label a section.
Use the `CheckboxItem` part to add an item that can be checked.
-```jsx line=6,15-20
+```jsx line=6,16-21
import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -1130,20 +1233,22 @@ export default () => {
return (
…
-
- …
- …
-
-
-
-
-
- Checkbox item
-
-
+
+
+ …
+ …
+
+
+
+
+
+ Checkbox item
+
+
+
);
};
@@ -1153,7 +1258,7 @@ export default () => {
Use the `RadioGroup` and `RadioItem` parts to add an item that can be checked amongst others.
-```jsx line=6,12-31
+```jsx line=6,13-32
import React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -1164,28 +1269,30 @@ export default () => {
return (
…
-
-
-
-
-
-
- Red
-
-
-
-
-
- Blue
-
-
-
-
-
- Green
-
-
-
+
+
+
+
+
+
+
+ Red
+
+
+
+
+
+ Blue
+
+
+
+
+
+ Green
+
+
+
+
);
};
@@ -1193,7 +1300,7 @@ export default () => {
### With complex items
-```jsx line=4-7,14,18,22
+```jsx line=4-7,15,19,23
import { styled } from '@stitches/react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -1205,20 +1312,22 @@ const Image = styled('img', {
export default () => (
…
-
-
-
- Adolfo Hess
-
-
-
- Miyah Myles
-
-
-
- Sylvia Reynolds
-
-
+
+
+
+
+ Adolfo Hess
+
+
+
+ Miyah Myles
+
+
+
+ Sylvia Reynolds
+
+
+
);
```
@@ -1227,7 +1336,7 @@ export default () => (
We expose a CSS custom property `--radix-dropdown-menu-content-transform-origin`. Use it to animate the content from its computed origin based on `side`, `sideOffset`, `align`, `alignOffset` and any collisions.
-```jsx line=4-7,9-12,17
+```jsx line=4-7,9-12,18
import { styled, keyframes } from '@stitches/react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -1244,7 +1353,9 @@ const StyledContent = styled(DropdownMenu.Content, {
export default () => (
…
- …
+
+ …
+
);
```
@@ -1253,7 +1364,7 @@ export default () => (
We expose `data-side` and `data-align` attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.
-```jsx line=4-7,9,12-14-19,24
+```jsx line=4-7,9-12,14-19,25
import { styled, keyframes } from '@stitches/react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -1277,7 +1388,9 @@ const StyledContent = styled(DropdownMenu.Content, {
export default () => (
…
- …
+
+ …
+
);
```
@@ -1406,10 +1519,12 @@ export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
export const DropdownMenuContent = React.forwardRef(
({ children, ...props }, forwardedRef) => {
return (
-
- {children}
-
-
+
+
+ {children}
+
+
+
);
}
);
diff --git a/data/primitives/components/hover-card/0.1.6.mdx b/data/primitives/components/hover-card/0.1.6.mdx
index 21b210dc9..ae1876a25 100644
--- a/data/primitives/components/hover-card/0.1.6.mdx
+++ b/data/primitives/components/hover-card/0.1.6.mdx
@@ -241,18 +241,70 @@ The component that pops out when the hover card is open.
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
),
},
{
- name: 'collisionTolerance',
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
+
+ ),
+ },
+ {
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
+ default: '0',
+ description: (
+
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'arrowPadding',
type: 'number',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The padding between the arrow and the edges of the content. If your
+ content has border-radius, this will prevent it from
+ overflowing the corners.
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -316,17 +368,6 @@ An optional arrow element to render alongside the hover card. This can be used t
default: 5,
description: The height of the arrow in pixels.,
},
- {
- name: 'offset',
- type: 'number',
- default: 0,
- description: (
-
- The distance in pixels to render from the{' '}
- HoverCard.Content edge.
-
- ),
- },
]}
/>
diff --git a/data/primitives/components/popover/0.1.7.mdx b/data/primitives/components/popover/0.1.7.mdx
index 3a27f8bdf..ac4e66c50 100644
--- a/data/primitives/components/popover/0.1.7.mdx
+++ b/data/primitives/components/popover/0.1.7.mdx
@@ -326,18 +326,70 @@ The component that pops out when the popover is open.
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
),
},
{
- name: 'collisionTolerance',
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
+
+ ),
+ },
+ {
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
+ default: '0',
+ description: (
+
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'arrowPadding',
type: 'number',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The padding between the arrow and the edges of the content. If your
+ content has border-radius, this will prevent it from
+ overflowing the corners.
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -401,17 +453,6 @@ An optional arrow element to render alongside the popover. This can be used to h
default: 5,
description: The height of the arrow in pixels.,
},
- {
- name: 'offset',
- type: 'number',
- default: 0,
- description: (
-
- The distance in pixels to render from the Popover.Content{' '}
- edge.
-
- ),
- },
]}
/>
diff --git a/data/primitives/components/tooltip/0.1.8.mdx b/data/primitives/components/tooltip/0.1.8.mdx
index 7fe8dd112..813bd6607 100644
--- a/data/primitives/components/tooltip/0.1.8.mdx
+++ b/data/primitives/components/tooltip/0.1.8.mdx
@@ -316,18 +316,70 @@ The component that pops out when the tooltip is open.
description: (
When true, overrides the side and
- align preferences to prevent collisions with window edges.
+ align preferences to prevent collisions with boundary edges.
),
},
{
- name: 'collisionTolerance',
+ name: 'collisionBoundary',
+ type: 'Element | null | Array',
+ typeSimple: 'Boundary',
+ default: '[]',
+ description: (
+
+ The element used as the collision boundary. By default this is the
+ viewport, though you can provide additional element(s) to be included
+ in this check.
+
+ ),
+ },
+ {
+ name: 'collisionPadding',
+ type: 'number | Partial>',
+ typeSimple: 'number | Padding',
+ default: '0',
+ description: (
+
+ The distance in pixels from the boundary edges where collision
+ detection should occur. Accepts a number (same for all sides), or a
+ partial padding object, for example: {`{ top: 20, left: 20 }`}
+ .
+
+ ),
+ },
+ {
+ name: 'arrowPadding',
type: 'number',
default: '0',
description: (
- The distance in pixels from window edges where collision detection
- should occur.
+ The padding between the arrow and the edges of the content. If your
+ content has border-radius, this will prevent it from
+ overflowing the corners.
+
+ ),
+ },
+ {
+ name: 'sticky',
+ type: '"partial" | "always"',
+ typeSimple: 'enum',
+ default: '"partial"',
+ description: (
+
+ The sticky behavior on the align axis. "partial" will
+ keep the content in the boundary as long as the trigger is at least
+ partially in the boundary whilst "always" will keep the
+ content in the boundary regardless.
+
+ ),
+ },
+ {
+ name: 'hideWhenDetached',
+ type: 'boolean',
+ default: 'false',
+ description: (
+
+ Whether to hide the content when the trigger becomes fully occluded.
),
},
@@ -391,17 +443,6 @@ An optional arrow element to render alongside the tooltip. This can be used to h
default: 5,
description: The height of the arrow in pixels.,
},
- {
- name: 'offset',
- type: 'number',
- default: 0,
- description: (
-
- The distance in pixels to render from the Tooltip.Content{' '}
- edge.
-
- ),
- },
]}
/>
@@ -599,7 +640,7 @@ export function Tooltip({
{content}
-
+
);
diff --git a/data/primitives/overview/releases.mdx b/data/primitives/overview/releases.mdx
index 7f59e5401..a2b23459f 100644
--- a/data/primitives/overview/releases.mdx
+++ b/data/primitives/overview/releases.mdx
@@ -32,6 +32,9 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast
- [**Breaking**] Remove `allowPinchZoom` prop, now defaults to `true`
- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering.
- Add `data-state` attribute to `Trigger` part
+- [**Breaking**] Remove `offset` on `Arrow` part
+- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object
+- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part
@@ -46,10 +49,16 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast
- [**Breaking**] Remove `allowPinchZoom` prop, now defaults to `true`
- Prevent escape key from exiting fullscreen mode in Firefox & Safari
- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering.
+- [**Breaking**] Remove `offset` on `Arrow` part
+- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object
+- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part
- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering.
+- [**Breaking**] Remove `offset` on `Arrow` part
+- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object
+- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part
@@ -60,6 +69,9 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast
- [**Breaking**] Remove `allowPinchZoom` prop, now defaults to `true`
- [**Breaking**] Add new `Portal` part. To avoid regressions, use this part if you want portalling behavior. Note that `z-index` isn't managed anymore so you have full control of layering.
+- [**Breaking**] Remove `offset` on `Arrow` part
+- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object
+- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part
@@ -108,6 +120,9 @@ We also move the [`Select`](../components/select), [`Toast`](../components/toast
- [**Breaking**] By default `Tooltip.Content` will remain open when hovering (WCAG 2.1 Content on Hover compliance). `disableHoverableContent` can be supplied to `Tooltip.Provider` to restore previous behavior
- [**Breaking**] `side` on `Tooltip.Content` now defaults to `top`
- [**Breaking**] `Tooltip.Provider` is now required, you must wrap your app to avoid regressions.
+- [**Breaking**] Remove `offset` on `Arrow` part
+- [**Breaking**] Rename `collisionTolerance` to `collisionPadding` on `Content` part and accepts a number or a padding object
+- Add `collisionBoundary`, `arrowPadding`, `sticky`, `hideWhenDetached` props on `Content` part
## February 28, 2022
@@ -420,7 +435,7 @@ This release focuses on React 18 support and introduces a number breaking change
- Ensure only one click is needed to toggle a single controlled toggle group
-- Ensure focus behaviour is consistent on Safari
+- Ensure focus behavior is consistent on Safari
@@ -435,7 +450,7 @@ This release focuses on React 18 support and introduces a number breaking change
- [**Breaking**] Rename `Accordion.Button` to `Accordion.Trigger`
- [**Breaking**] Rename `Accordion.Panel` to `Accordion.Content`
- [**Breaking**] Rename custom property accordingly (`--radix-accordion-content-height`)
-- [**Breaking**] `type=“single”` `Accordion` now has a new `collapsible` prop which is `false` by default. This means that the default behaviour has now changed. By default a user cannot close all items.
+- [**Breaking**] `type=“single”` `Accordion` now has a new `collapsible` prop which is `false` by default. This means that the default behavior has now changed. By default a user cannot close all items.
diff --git a/data/primitives/utilities/direction-provider/0.1.0.mdx b/data/primitives/utilities/direction-provider/0.1.0.mdx
index e8427954d..dd09536f4 100644
--- a/data/primitives/utilities/direction-provider/0.1.0.mdx
+++ b/data/primitives/utilities/direction-provider/0.1.0.mdx
@@ -34,7 +34,7 @@ export default () => ;
### DirectionProvider
-When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `DirectionProvider` component to ensure all of the primitives adjust their behaviour based on the `dir` prop.
+When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `DirectionProvider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.