fix: menu overflow

Author: lisalupi

.changeset/few-experts-accept.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Menu`: the popup should shrink when there is not enough size to avoid creating more scroll

packages/ui/src/components/Menu/MenuContent.tsx

@@ -28,6 +28,8 @@ import { SIZES } from './constants'
 import { getListItem, searchChildren } from './helpers'
 import type { MenuProps } from './types'
 
+const SPACE_DISCLOSURE_POPUP = 24 // in px
+
 const StyledPopup = styled(Popup, {
   shouldForwardProp: prop => !['searchable'].includes(prop),
 })<{ searchable: boolean }>`
@@ -62,12 +64,13 @@ const Footer = styled(Stack)`
 `
 
 const MenuList = styled(Stack, {
-  shouldForwardProp: prop => !['height'].includes(prop),
-})<{ height: string }>`
+  shouldForwardProp: prop => !['height', 'heightAvailableSpace'].includes(prop),
+})<{ height: string; heightAvailableSpace: string }>`
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(${({ height }) => height} - ${({ theme }) =>
-    theme.space['0.5']});
+  max-height: ${({ theme, height, heightAvailableSpace }) =>
+    `calc(min(${height}, ${heightAvailableSpace}) - ${theme.space['0.5']})`};
+
   &:after,
   &:before {
     border: solid transparent;
@@ -114,6 +117,7 @@ export const Menu = forwardRef(
       align,
       searchable = false,
       footer,
+      noShrink = false,
     }: MenuProps,
     ref: Ref<HTMLButtonElement | null>,
   ) => {
@@ -128,6 +132,9 @@ export const Menu = forwardRef(
     } = useMenu()
     const searchInputRef = useRef<HTMLInputElement>(null)
     const [localChild, setLocalChild] = useState<ReactNode[] | null>(null)
+    const [popupMaxHeight, setPopupMaxHeight] = useState<string>(
+      maxHeight ?? '30rem',
+    )
     const contentRef = useRef<HTMLDivElement>(null)
     const tempId = useId()
     const finalId = `menu-${id ?? tempId}`
@@ -251,6 +258,24 @@ export const Menu = forwardRef(
       }
     }
 
+    useEffect(() => {
+      if (disclosureRef.current && placement === 'bottom' && !noShrink) {
+        const disclosureRect = disclosureRef.current.getBoundingClientRect()
+        const disclosureBottom = disclosureRect.bottom
+        const windowSize = window.innerHeight
+        const availableSpace =
+          windowSize - disclosureBottom - SPACE_DISCLOSURE_POPUP
+
+        setPopupMaxHeight(`${availableSpace}px`)
+      }
+    }, [
+      isVisible,
+      portalTarget.scrollHeight,
+      disclosureRef,
+      placement,
+      noShrink,
+    ])
+
     return (
       <StyledPopup
         debounceDelay={triggerMethod === 'hover' ? 250 : 0}
@@ -271,14 +296,15 @@ export const Menu = forwardRef(
           setShouldBeVisible(undefined)
         }}
         tabIndex={-1}
-        maxHeight={maxHeight ?? '30rem'}
+        maxHeight={popupMaxHeight}
         searchable={searchable}
         text={
           <MenuList
             data-testid={dataTestId}
             className={className}
             role="menu"
             height={maxHeight ?? '30rem'}
+            heightAvailableSpace={popupMaxHeight}
             onKeyDown={handleKeyDown}
           >
             <Content ref={contentRef}>

packages/ui/src/components/Menu/__stories__/Shrink.stories.tsx

@@ -0,0 +1,53 @@
+import type { StoryFn } from '@storybook/react-vite'
+import { Menu } from '..'
+import { Button } from '../../Button'
+
+export const Shrink: StoryFn<typeof Menu> = () => (
+  <>
+    <Menu disclosure={<Button>default</Button>}>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+
+      <Menu.Item>item</Menu.Item>
+    </Menu>
+
+    <Menu disclosure={<Button>noShrink=true</Button>} noShrink>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+      <Menu.Item>item</Menu.Item>
+
+      <Menu.Item>item</Menu.Item>
+    </Menu>
+  </>
+)
+
+Shrink.parameters = {
+  docs: {
+    description: {
+      story:
+        'When the menu is at the bottom of a page (with `placement = "bottom"`), it will shrink so that it does not cause overflow. It is possible to removet this feature using prop `noShrink`',
+    },
+  },
+}
+
+Shrink.decorators = [
+  StoryComponent => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'flex-end',
+        position: 'absolute',
+        justifyContent: 'center',
+        gap: '16px',
+      }}
+    >
+      <StoryComponent />
+    </div>
+  ),
+]

packages/ui/src/components/Menu/__stories__/index.stories.tsx

@@ -39,3 +39,4 @@ export { FunctionChildrenToggle } from './FunctionChildrenToggle.stories'
 export { Overflowing } from './Overflowing.stories'
 export { Footer } from './Footer.stories'
 export { Nested } from './Nested.stories'
+export { Shrink } from './Shrink.stories'

packages/ui/src/components/Menu/types.ts

@@ -52,4 +52,8 @@ export type MenuProps = {
   hideOnClickItem?: boolean
   footer?: ReactNode
   placement?: Exclude<ComponentProps<typeof Popup>['placement'], 'nested-menu'>
+  /**
+   * When set to true, the menu does not shrink (height) to avoid overflow on the page
+   */
+  noShrink?: boolean
 } & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align'>