@jobber/components 6.97.0 → 6.97.1-fix-mobile-d45021a.14

package/dist/FormField/hooks/useAtlantisReactHookForm.d.ts

@@ -9,6 +9,7 @@ export declare function useAtlantisReactHookForm({ actionsRef, name, defaultValu
     inputRefs: import("react").RefCallback<any>;
     useControllerField: {
         value: any;
+        disabled?: boolean;
         name: string;
     };
     setValue: import("react-hook-form").UseFormSetValue<import("react-hook-form").FieldValues>;

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.97.0",
+  "version": "6.97.1-fix-mobile-d45021a.14+d45021a51",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,7 +489,7 @@
     "react-countdown": "^2.3.2",
     "react-datepicker": "^8.7.0",
     "react-dropzone": "^11.0.2",
-    "react-hook-form": "^7.43.7",
+    "react-hook-form": "^7.52.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^5.3.4",
     "ts-xor": "^1.0.8"
@@ -533,7 +533,7 @@
     "lodash": "^4",
     "react": "^18.2.0",
     "react-dom": "^18",
-    "react-hook-form": "^7",
+    "react-hook-form": "^7.52.0",
     "react-router-dom": "^6"
   },
   "browserslist": [
@@ -541,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "97acbc782183d33ebe879429a123169031b7092a"
+  "gitHead": "d45021a51edba0fa71bfcac2a81e2646dd74b767"
 }