enable size middleware for popovers (#2190)

also added max-height to Popover

.changeset/young-mayflies-listen.md

@@ -0,0 +1,7 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+`Popover` now enables the [`size` middleware](https://floating-ui.com/docs/size) to prevent it from overflowing the viewport.
+- This also affects other popover-like components (e.g. `Select`, `ComboBox`, `DropdownMenu`).
+- `Popover` now also sets a default max-height of `400px` to prevent it from becoming too large. This can be customized using the `middleware.size.maxHeight` prop.

apps/website/src/content/docs/popover.mdx

@@ -36,7 +36,7 @@ Popover handles positioning using an external library called [Floating UI](float
 There are some advanced positioning options available.
 
 - The `positionReference` prop can be used to position the popover relative to a different element than the trigger. This can be useful, for example, when the trigger is part of a larger group of elements that should all be considered together.
-- The `middleware` prop exposes more granular control over the positioning logic. By default, `Popover` enables the [`flip`](https://floating-ui.com/docs/flip) and [`shift`](https://floating-ui.com/docs/shift) middlewares. You might also find the [`offset`](https://floating-ui.com/docs/offset) middleware useful for adding a gap between the trigger and the popover.
+- The `middleware` prop exposes more granular control over the positioning logic. By default, `Popover` enables the [`flip`](https://floating-ui.com/docs/flip), [`shift`](https://floating-ui.com/docs/shift) and [`size`](https://floating-ui.com/docs/size) middlewares. You might also find the [`offset`](https://floating-ui.com/docs/offset) middleware useful for adding a gap between the trigger and the popover.
 
 ### Portals
 

packages/itwinui-react/src/core/ComboBox/ComboBox.tsx

@@ -572,6 +572,7 @@ export const ComboBox = React.forwardRef(
       visible: isOpen,
       onVisibleChange: (open) => (open ? show() : hide()),
       matchWidth: true,
+      middleware: { size: { maxHeight: 'var(--iui-menu-max-height)' } },
       closeOnOutsideClick: true,
       interactions: { click: false, focus: true },
     });

packages/itwinui-react/src/core/Menu/Menu.tsx

@@ -179,6 +179,10 @@ export const Menu = React.forwardRef((props, ref) => {
       ...restInteractionsProps,
     },
     ...restPopoverProps,
+    middleware: {
+      size: { maxHeight: 'var(--iui-menu-max-height)' },
+      ...restPopoverProps.middleware,
+    },
   });
 
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(

packages/itwinui-react/src/core/Popover/Popover.tsx

@@ -74,14 +74,23 @@ type PopoverOptions = {
   /**
    * Middleware options.
    *
-   * By default, `flip` and `shift` are enabled.
+   * By default, `flip`, `shift` and `size` are enabled.
    *
    * @see https://floating-ui.com/docs/middleware
    */
   middleware?: {
     offset?: number;
     flip?: boolean;
     shift?: boolean;
+    size?:
+      | boolean
+      | {
+          /**
+           * Override the maximum height of the popover. Must be a CSS-compatible value.
+           * @default "400px"
+           */
+          maxHeight?: string;
+        };
     autoPlacement?: boolean;
     hide?: boolean;
     inline?: boolean;
@@ -176,10 +185,13 @@ export const usePopover = (options: PopoverOptions & PopoverInternalProps) => {
   const tree = useFloatingTree();
 
   const middleware = React.useMemo(
-    () => ({ flip: true, shift: true, ...options.middleware }),
+    () => ({ flip: true, shift: true, size: true, ...options.middleware }),
     [options.middleware],
   );
 
+  const maxHeight =
+    typeof middleware.size === 'boolean' ? '400px' : middleware.size?.maxHeight;
+
   const [open, onOpenChange] = useControlledState(
     false,
     visible,
@@ -204,11 +216,17 @@ export const usePopover = (options: PopoverOptions & PopoverInternalProps) => {
           middleware.offset !== undefined && offset(middleware.offset),
           middleware.flip && flip({ padding: 4 }),
           middleware.shift && shift({ padding: 4 }),
-          matchWidth &&
+          (matchWidth || middleware.size) &&
             size({
               padding: 4,
-              apply: ({ rects }) => {
-                setReferenceWidth(rects.reference.width);
+              apply: ({ rects, availableHeight }) => {
+                if (middleware.size) {
+                  setAvailableHeight(Math.round(availableHeight));
+                }
+
+                if (matchWidth) {
+                  setReferenceWidth(rects.reference.width);
+                }
               },
             } as SizeOptions),
           middleware.autoPlacement && autoPlacement({ padding: 4 }),
@@ -251,13 +269,18 @@ export const usePopover = (options: PopoverOptions & PopoverInternalProps) => {
   ]);
 
   const [referenceWidth, setReferenceWidth] = React.useState<number>();
+  const [availableHeight, setAvailableHeight] = React.useState<number>();
 
   const getFloatingProps = React.useCallback(
     (userProps?: React.HTMLProps<HTMLElement>) =>
       interactions.getFloatingProps({
         ...userProps,
         style: {
           ...floating.floatingStyles,
+          ...(middleware.size &&
+            availableHeight && {
+              maxBlockSize: `min(${availableHeight}px, ${maxHeight})`,
+            }),
           zIndex: 9999,
           ...(matchWidth && referenceWidth
             ? {
@@ -268,7 +291,15 @@ export const usePopover = (options: PopoverOptions & PopoverInternalProps) => {
           ...userProps?.style,
         },
       }),
-    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
+    [
+      floating.floatingStyles,
+      interactions,
+      matchWidth,
+      referenceWidth,
+      middleware.size,
+      availableHeight,
+      maxHeight,
+    ],
   );
 
   const getReferenceProps = React.useCallback(

packages/itwinui-react/src/core/Select/Select.tsx

@@ -418,6 +418,7 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
+    middleware: { size: { maxHeight: 'var(--iui-menu-max-height)' } },
     ...popoverProps,
     onVisibleChange: (open) => (open ? show() : hide()),
   });