diff --git a/.yarn/versions/588134e5.yml b/.yarn/versions/588134e5.yml new file mode 100644 index 0000000000..b094e0a870 --- /dev/null +++ b/.yarn/versions/588134e5.yml @@ -0,0 +1,13 @@ +releases: + "@radix-ui/react-context-menu": patch + "@radix-ui/react-dropdown-menu": patch + "@radix-ui/react-hover-card": patch + "@radix-ui/react-menu": patch + "@radix-ui/react-menubar": patch + "@radix-ui/react-popover": patch + "@radix-ui/react-popper": patch + "@radix-ui/react-select": patch + "@radix-ui/react-tooltip": patch + +declined: + - primitives diff --git a/packages/react/menu/src/Menu.stories.tsx b/packages/react/menu/src/Menu.stories.tsx index 9702e7ef01..bab48fe5e6 100644 --- a/packages/react/menu/src/Menu.stories.tsx +++ b/packages/react/menu/src/Menu.stories.tsx @@ -37,6 +37,7 @@ export const Submenus = () => { const [open4, setOpen4] = React.useState(false); const [rtl, setRtl] = React.useState(false); const [animated, setAnimated] = React.useState(false); + const [scrollable, setScrollable] = React.useState(false); React.useEffect(() => { if (rtl) { @@ -64,12 +65,38 @@ export const Submenus = () => { /> Animated + - + window.alert('undo')}> Undo - + + + window.alert('cut')}> + Cut + + window.alert('copy')}> + Copy + + window.alert('paste')}> + Paste + + + + Disabled @@ -125,17 +152,6 @@ export const Submenus = () => { Three - - - window.alert('cut')}> - Cut - - window.alert('copy')}> - Copy - - window.alert('paste')}> - Paste - ); @@ -504,6 +520,11 @@ const animatedItemIndicatorClass = css({ }, }); +const scrollableMenuClass = css({ + overflow: 'scroll', + height: 100, +}); + export const TickIcon = () => ( alignOffset = 0, arrowPadding = 0, avoidCollisions = true, - collisionBoundary = [], + collisionBoundary, collisionPadding: collisionPaddingProp = 0, sticky = 'partial', hideWhenDetached = false, @@ -161,12 +161,16 @@ const PopperContent = React.forwardRef ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp }; - const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary]; - const hasExplicitBoundaries = boundary.length > 0; + const boundary = collisionBoundary + ? Array.isArray(collisionBoundary) + ? collisionBoundary + : [collisionBoundary] + : undefined; + const hasExplicitBoundaries = boundary !== undefined && boundary.length > 0; const detectOverflowOptions = { padding: collisionPadding, - boundary: boundary.filter(isNotNull), + boundary: boundary ? boundary.filter(isNotNull) : undefined, // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries altBoundary: hasExplicitBoundaries, };