Backport mantinedev#5213

ranquild · Nov 7, 2023 · a358fcf · a358fcf
1 parent cdf1179
commit a358fcf
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 16 deletions.
diff --git a/src/mantine-core/src/Popover/Popover.story.tsx b/src/mantine-core/src/Popover/Popover.story.tsx
@@ -199,6 +199,30 @@ export function Inline() {
   );
 }
 
+export function Size() {
+  const [opened, setState] = useState(false);
+
+  return (
+    <div style={{ padding: 40 }}>
+      <Popover
+        opened={opened}
+        middlewares={{ shift: true, flip: true, size: true }}
+        onChange={setState}
+      >
+        <Popover.Target>
+          <button type="button" onClick={() => setState((c) => !c)}>
+            Toggle popover
+          </button>
+        </Popover.Target>
+
+        <Popover.Dropdown style={{ overflow: 'auto' }}>
+          <div style={{ width: 100, height: 2000, background: 'pink' }} />
+        </Popover.Dropdown>
+      </Popover>
+    </div>
+  );
+}
+
 export function PopoverEvents() {
   const [opened, setState] = useState(false);
   const [toggle1, setToggle1] = useState(false);

diff --git a/src/mantine-core/src/Popover/Popover.types.ts b/src/mantine-core/src/Popover/Popover.types.ts
@@ -11,4 +11,5 @@ export interface PopoverMiddlewares {
   shift: boolean;
   flip: boolean;
   inline?: boolean;
+  size?: boolean;
 }
diff --git a/src/mantine-core/src/Popover/use-popover.ts b/src/mantine-core/src/Popover/use-popover.ts
@@ -9,6 +9,7 @@ import {
   Middleware,
   inline,
   limitShift,
+  UseFloatingReturn,
 } from '@floating-ui/react';
 import { FloatingAxesOffsets, FloatingPosition, useFloatingAutoUpdate } from '../Floating';
 import { PopoverWidth, PopoverMiddlewares } from './Popover.types';
@@ -29,7 +30,10 @@ interface UsePopoverOptions {
   arrowOffset: number;
 }
 
-function getPopoverMiddlewares(options: UsePopoverOptions) {
+function getPopoverMiddlewares(
+  options: UsePopoverOptions,
+  getFloating: () => UseFloatingReturn<Element>
+) {
   const middlewares: Middleware[] = [offset(options.offset)];
 
   if (options.middlewares.shift) {
@@ -46,6 +50,30 @@ function getPopoverMiddlewares(options: UsePopoverOptions) {
 
   middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));
 
+  if (options.middlewares.size || options.width === 'target') {
+    middlewares.push(
+      size({
+        apply({ rects, availableWidth, availableHeight }) {
+          const floating = getFloating();
+          const styles = floating.refs.floating.current?.style ?? {};
+
+          if (options.middlewares.size) {
+            Object.assign(styles, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          }
+
+          if (options.width === 'target') {
+            Object.assign(styles, {
+              width: `${rects.reference.width}px`,
+            });
+          }
+        },
+      })
+    );
+  }
+
   return middlewares;
 }
 
@@ -72,22 +100,9 @@ export function usePopover(options: UsePopoverOptions) {
     }
   };
 
-  const floating = useFloating({
+  const floating: UseFloatingReturn<Element> = useFloating({
     placement: options.position,
-    middleware: [
-      ...getPopoverMiddlewares(options),
-      ...(options.width === 'target'
-        ? [
-            size({
-              apply({ rects }) {
-                Object.assign(floating.refs.floating.current?.style ?? {}, {
-                  width: `${rects.reference.width}px`,
-                });
-              },
-            }),
-          ]
-        : []),
-    ],
+    middleware: getPopoverMiddlewares(options, () => floating),
   });
 
   useFloatingAutoUpdate({