@jobber/components 6.98.0 → 6.98.1

package/dist/Menu-cjs.js

@@ -43,31 +43,38 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     // useRefocusOnActivator must come before useFocusTrap for them both to work
     jobberHooks.useRefocusOnActivator(visible);
     const menuRef = jobberHooks.useFocusTrap(visible);
+    const isLargeScreen = width >= SMALL_SCREEN_BREAKPOINT;
+    const middleware = React.useMemo(() => {
+        if (isLargeScreen) {
+            return [
+                floatingUi_react.offset(MENU_OFFSET),
+                floatingUi_react.flip({ fallbackPlacements: ["bottom-end", "top-start", "top-end"] }),
+                floatingUi_react.size({
+                    apply({ availableHeight, elements }) {
+                        // The inner element is the scrollable menu that requires the max height
+                        const menuElement = elements.floating.querySelector('[role="menu"]');
+                        if (menuElement) {
+                            const viewportHeight = window.innerHeight;
+                            const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
+                            const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                                maxHeight: maxHeightVh,
+                            });
+                            Object.assign(menuElement.style, {
+                                maxHeight: `${maxHeight$1}px`,
+                            });
+                        }
+                    },
+                }),
+            ];
+        }
+        return [];
+    }, [isLargeScreen]);
     const { refs, floatingStyles, context } = floatingUi_react.useFloating({
         open: visible,
         onOpenChange: setVisible,
         placement: "bottom-start",
         strategy: "fixed",
-        middleware: [
-            floatingUi_react.offset(MENU_OFFSET),
-            floatingUi_react.flip({ fallbackPlacements: ["bottom-end", "top-start", "top-end"] }),
-            floatingUi_react.size({
-                apply({ availableHeight, elements }) {
-                    // The inner element is the scrollable menu that requires the max height
-                    const menuElement = elements.floating.querySelector('[role="menu"]');
-                    if (menuElement) {
-                        const viewportHeight = window.innerHeight;
-                        const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
-                        const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
-                            maxHeight: maxHeightVh,
-                        });
-                        Object.assign(menuElement.style, {
-                            maxHeight: `${maxHeight$1}px`,
-                        });
-                    }
-                },
-            }),
-        ],
+        middleware,
         elements: {
             reference: referenceElement,
         },
@@ -75,7 +82,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     });
     const dismiss = floatingUi_react.useDismiss(context);
     const { getFloatingProps } = floatingUi_react.useInteractions([dismiss]);
-    const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
+    const positionAttributes = isLargeScreen
         ? {
             style: floatingStyles,
         }

package/dist/Menu-es.js

@@ -1,8 +1,8 @@
-import React__default, { useState, useId, useRef } from 'react';
+import React__default, { useState, useId, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useWindowDimensions, useRefocusOnActivator, useFocusTrap, useIsMounted } from '@jobber/hooks';
-import { u as useFloating, a as useDismiss, b as useInteractions, F as FloatingPortal, o as offset, f as flip, s as size, c as autoUpdate } from './floating-ui.react-es.js';
+import { o as offset, f as flip, s as size, u as useFloating, a as useDismiss, b as useInteractions, F as FloatingPortal, c as autoUpdate } from './floating-ui.react-es.js';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -41,31 +41,38 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     // useRefocusOnActivator must come before useFocusTrap for them both to work
     useRefocusOnActivator(visible);
     const menuRef = useFocusTrap(visible);
+    const isLargeScreen = width >= SMALL_SCREEN_BREAKPOINT;
+    const middleware = useMemo(() => {
+        if (isLargeScreen) {
+            return [
+                offset(MENU_OFFSET),
+                flip({ fallbackPlacements: ["bottom-end", "top-start", "top-end"] }),
+                size({
+                    apply({ availableHeight, elements }) {
+                        // The inner element is the scrollable menu that requires the max height
+                        const menuElement = elements.floating.querySelector('[role="menu"]');
+                        if (menuElement) {
+                            const viewportHeight = window.innerHeight;
+                            const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
+                            const maxHeight = calculateMaxHeight(availableHeight, {
+                                maxHeight: maxHeightVh,
+                            });
+                            Object.assign(menuElement.style, {
+                                maxHeight: `${maxHeight}px`,
+                            });
+                        }
+                    },
+                }),
+            ];
+        }
+        return [];
+    }, [isLargeScreen]);
     const { refs, floatingStyles, context } = useFloating({
         open: visible,
         onOpenChange: setVisible,
         placement: "bottom-start",
         strategy: "fixed",
-        middleware: [
-            offset(MENU_OFFSET),
-            flip({ fallbackPlacements: ["bottom-end", "top-start", "top-end"] }),
-            size({
-                apply({ availableHeight, elements }) {
-                    // The inner element is the scrollable menu that requires the max height
-                    const menuElement = elements.floating.querySelector('[role="menu"]');
-                    if (menuElement) {
-                        const viewportHeight = window.innerHeight;
-                        const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
-                        const maxHeight = calculateMaxHeight(availableHeight, {
-                            maxHeight: maxHeightVh,
-                        });
-                        Object.assign(menuElement.style, {
-                            maxHeight: `${maxHeight}px`,
-                        });
-                    }
-                },
-            }),
-        ],
+        middleware,
         elements: {
             reference: referenceElement,
         },
@@ -73,7 +80,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     });
     const dismiss = useDismiss(context);
     const { getFloatingProps } = useInteractions([dismiss]);
-    const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
+    const positionAttributes = isLargeScreen
         ? {
             style: floatingStyles,
         }

package/dist/styles.css

@@ -2899,6 +2899,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     right: 0;
     bottom: 0;
     left: 0;
+    max-height: 70vh;
 }
   }
 
@@ -2909,6 +2910,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     right: 0;
     bottom: 0;
     left: 0;
+    max-height: 70vh;
 }
   }
 

package/dist/testUtils/viewport.d.ts

@@ -0,0 +1,6 @@
+export interface ViewportDimensions {
+    readonly width?: number;
+    readonly height?: number;
+}
+export declare function mockViewport({ width, height, }: ViewportDimensions): () => void;
+export declare function withMockedViewport(dimensions: ViewportDimensions, run: () => Promise<void> | void): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.98.0",
+  "version": "6.98.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2a10b70a25ca29414cfddfa2daf3fc980e976efc"
+  "gitHead": "242c797fed244210585dd6254cba023fe5612925"
 }