@jobber/components 6.77.0 → 6.80.0

package/dist/Autocomplete-es.js

@@ -3,7 +3,7 @@ import React__default, { useCallback, useEffect, useState, forwardRef, useMemo,
 import { u as useDebounce_2 } from './useDebounce-es.js';
 import classnames from 'classnames';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { u as useFloating, o as offset, f as flip, q as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, o as offset, f as flip, c as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';

package/dist/Card/index.cjs

@@ -14,11 +14,11 @@ require('../Menu-cjs.js');
 require('framer-motion');
 require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
-require('react-popper');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('react-dom');
 require('../useFocusTrap-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 
 

package/dist/Card/index.mjs

@@ -12,9 +12,9 @@ import '../Menu-es.js';
 import 'framer-motion';
 import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
-import 'react-popper';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '../floating-ui.react-es.js';
 import 'react-dom';
 import '../useFocusTrap-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';

package/dist/ComboboxContent-es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-import { c as useFloatingParentNodeId, d as useFloatingNodeId, u as useFloating, e as autoPlacement, o as offset, s as shift, b as autoUpdate, g as useDismiss, h as useInteractions, i as FloatingTree, j as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
+import { d as useFloatingParentNodeId, e as useFloatingNodeId, u as useFloating, g as autoPlacement, o as offset, s as shift, b as autoUpdate, h as useDismiss, i as useInteractions, j as FloatingTree, k as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
 import { C as ComboboxContentList } from './ComboboxContentList-es.js';

package/dist/DataDump/index.cjs

@@ -15,11 +15,11 @@ require('../Menu-cjs.js');
 require('framer-motion');
 require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
-require('react-popper');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('react-dom');
 require('../useFocusTrap-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');

package/dist/DataDump/index.mjs

@@ -13,11 +13,11 @@ import '../Menu-es.js';
 import 'framer-motion';
 import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
-import 'react-popper';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '../floating-ui.react-es.js';
 import 'react-dom';
 import '../useFocusTrap-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/Heading/Heading.d.ts

@@ -11,6 +11,11 @@ export interface HeadingProps {
      * Allows overriding of the element rendered. Defaults to the heading specified with level.
      */
     readonly element?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";
+    /**
+     * The maximum amount of lines the text can occupy before being truncated with "...".
+     * Uses predefined string values that correspond to a doubling scale for the amount of lines.
+     */
+    readonly maxLines?: "single" | "small" | "base" | "large" | "larger" | "unlimited";
     /**
      * **Use at your own risk:** Custom classNames for specific elements. This should only be used as a
      * **last resort**. Using this may result in unexpected side effects.
@@ -25,5 +30,5 @@ export interface HeadingProps {
     readonly UNSAFE_style?: TypographyProps["UNSAFE_style"];
 }
 export type LevelMap = Record<HeadingLevel, TypographyOptions>;
-export declare function Heading({ level, children, element, UNSAFE_className, UNSAFE_style, }: HeadingProps): React.JSX.Element;
+export declare function Heading({ level, children, element, maxLines, UNSAFE_className, UNSAFE_style, }: HeadingProps): React.JSX.Element;
 export {};

package/dist/Heading-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var Typography = require('./Typography-cjs.js');
 
-function Heading({ level = 5, children, element, UNSAFE_className, UNSAFE_style, }) {
+function Heading({ level = 5, children, element, maxLines = "unlimited", UNSAFE_className, UNSAFE_style, }) {
     const levelMap = {
         1: {
             element: "h1",
@@ -43,7 +43,15 @@ function Heading({ level = 5, children, element, UNSAFE_className, UNSAFE_style,
             textColor: "heading",
         },
     };
-    return (React.createElement(Typography.Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
+    const maxLineToNumber = {
+        single: 1,
+        small: 2,
+        base: 4,
+        large: 8,
+        larger: 16,
+        unlimited: undefined,
+    };
+    return (React.createElement(Typography.Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, numberOfLines: maxLineToNumber[maxLines], UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
 }
 
 exports.Heading = Heading;

package/dist/Heading-es.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { T as Typography } from './Typography-es.js';
 
-function Heading({ level = 5, children, element, UNSAFE_className, UNSAFE_style, }) {
+function Heading({ level = 5, children, element, maxLines = "unlimited", UNSAFE_className, UNSAFE_style, }) {
     const levelMap = {
         1: {
             element: "h1",
@@ -41,7 +41,15 @@ function Heading({ level = 5, children, element, UNSAFE_className, UNSAFE_style,
             textColor: "heading",
         },
     };
-    return (React__default.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
+    const maxLineToNumber = {
+        single: 1,
+        small: 2,
+        base: 4,
+        large: 8,
+        larger: 16,
+        unlimited: undefined,
+    };
+    return (React__default.createElement(Typography, Object.assign({}, levelMap[level], { element: element || levelMap[level].element, numberOfLines: maxLineToNumber[maxLines], UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style }), children));
 }
 
 export { Heading as H };

package/dist/InputTime/index.cjs

@@ -180,7 +180,7 @@ function dateToTimeString(date) {
     // Return the time string in HH:MM format
     return `${hours}:${minutes}`;
 }
-function timeStringToDate(timeString) {
+function timeStringToDate(timeString, baseDate) {
     try {
         const [hours, minutes] = timeString.split(":").map(Number);
         if (isNaN(hours) ||
@@ -191,7 +191,10 @@ function timeStringToDate(timeString) {
             minutes > 60) {
             return undefined;
         }
-        const date = new Date();
+        // Try to preserve the Date part of the Date object as long as it is valid
+        const date = baseDate instanceof Date && !isNaN(baseDate.getTime())
+            ? new Date(baseDate)
+            : new Date();
         date.setHours(hours, minutes, 0, 0);
         return date;
     }
@@ -221,7 +224,7 @@ function InputTimeRebuilt(_a) {
         handleChange(event.target.value);
     }
     function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue));
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
     }
     function handleBlur(event) {
         var _a;
@@ -260,7 +263,7 @@ function InputTime$1(_a) {
             !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
         }, wrapperRef: wrapperRef })));
     function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue));
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
     }
     function handleBlur() {
         var _a;

package/dist/InputTime/index.mjs

@@ -178,7 +178,7 @@ function dateToTimeString(date) {
     // Return the time string in HH:MM format
     return `${hours}:${minutes}`;
 }
-function timeStringToDate(timeString) {
+function timeStringToDate(timeString, baseDate) {
     try {
         const [hours, minutes] = timeString.split(":").map(Number);
         if (isNaN(hours) ||
@@ -189,7 +189,10 @@ function timeStringToDate(timeString) {
             minutes > 60) {
             return undefined;
         }
-        const date = new Date();
+        // Try to preserve the Date part of the Date object as long as it is valid
+        const date = baseDate instanceof Date && !isNaN(baseDate.getTime())
+            ? new Date(baseDate)
+            : new Date();
         date.setHours(hours, minutes, 0, 0);
         return date;
     }
@@ -219,7 +222,7 @@ function InputTimeRebuilt(_a) {
         handleChange(event.target.value);
     }
     function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue));
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
     }
     function handleBlur(event) {
         var _a;
@@ -258,7 +261,7 @@ function InputTime$1(_a) {
             !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
         }, wrapperRef: wrapperRef })));
     function handleChange(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue));
+        onChange === null || onChange === void 0 ? void 0 : onChange(timeStringToDate(newValue, value));
     }
     function handleBlur() {
         var _a;

package/dist/InputTime/utils/input-time-utils.d.ts

@@ -1,2 +1,2 @@
 export declare function dateToTimeString(date?: Date): string;
-export declare function timeStringToDate(timeString: string): Date | undefined;
+export declare function timeStringToDate(timeString: string, baseDate?: Date): Date | undefined;

package/dist/Menu/index.cjs

@@ -6,11 +6,11 @@ require('classnames');
 require('framer-motion');
 require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
-require('react-popper');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('react-dom');
 require('../useFocusTrap-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');

package/dist/Menu/index.mjs

@@ -4,11 +4,11 @@ import 'classnames';
 import 'framer-motion';
 import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
-import 'react-popper';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '../floating-ui.react-es.js';
 import 'react-dom';
 import '../useFocusTrap-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';

package/dist/Menu-cjs.js

@@ -5,10 +5,9 @@ var classnames = require('classnames');
 var framerMotion = require('framer-motion');
 var useOnKeyDown = require('./useOnKeyDown-cjs.js');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
-var reactPopper = require('react-popper');
-var useIsMounted = require('./useIsMounted-cjs.js');
-var ReactDOM = require('react-dom');
+var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useFocusTrap = require('./useFocusTrap-cjs.js');
+var useIsMounted = require('./useIsMounted-cjs.js');
 var Button = require('./Button-cjs.js');
 var Typography = require('./Typography-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -44,10 +43,11 @@ function useWindowDimensions() {
     return windowDimensions;
 }
 
-var styles = {"wrapper":"fpi0W91w2ag-","popperContainer":"pyIy8jHif3g-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
+const MENU_MAX_HEIGHT_VH = 72; // 72vh as percentage
 const variation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
@@ -64,7 +64,7 @@ const variation = {
 function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const [visible, setVisible] = React.useState(false);
-    const popperRef = React.useRef(null);
+    const [referenceElement, setReferenceElement] = React.useState(null);
     const { width } = useWindowDimensions_2();
     const buttonID = React.useId();
     const menuID = React.useId();
@@ -76,32 +76,45 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     // useRefocusOnActivator must come before useFocusTrap for them both to work
     useRefocusOnActivator.useRefocusOnActivator_2(visible);
     const menuRef = useFocusTrap.useFocusTrap_2(visible);
-    const [popperElement, setPopperElement] = React.useState(null);
-    const { styles: popperStyles, attributes, state, } = reactPopper.usePopper(popperRef.current, popperElement, {
+    const { refs, floatingStyles, context } = floatingUi_react.useFloating({
+        open: visible,
+        onOpenChange: setVisible,
         placement: "bottom-start",
         strategy: "fixed",
-        modifiers: [
-            {
-                name: "flip",
-                options: {
-                    flipVariations: true,
+        middleware: [
+            floatingUi_react.offset(MENU_OFFSET),
+            floatingUi_react.flip({ flipAlignment: false }),
+            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_VH) / 100;
+                        // Use the smaller of 72vh or available space
+                        const maxHeight = Math.min(maxHeightVh, availableHeight);
+                        Object.assign(menuElement.style, {
+                            maxHeight: `${maxHeight}px`,
+                        });
+                    }
                 },
-            },
-            {
-                name: "offset",
-                options: {
-                    offset: [0, MENU_OFFSET],
-                },
-            },
+            }),
         ],
+        elements: {
+            reference: referenceElement,
+        },
+        whileElementsMounted: floatingUi_react.autoUpdate,
     });
     const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
-        ? Object.assign(Object.assign({}, attributes.popper), { style: popperStyles.popper }) : {};
+        ? {
+            style: floatingStyles,
+        }
+        : {};
     if (!activator) {
         activator = (React.createElement(Button.Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
     }
     return (React.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
-        React.createElement("div", { ref: popperRef }, React.cloneElement(activator, {
+        React.createElement("div", { ref: setReferenceElement }, React.cloneElement(activator, {
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,
@@ -114,7 +127,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
                         type: "tween",
                         duration: 0.15,
                     } }),
-                React.createElement("div", Object.assign({ ref: setPopperElement, className: styles.popperContainer }, positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: state === null || state === void 0 ? void 0 : state.placement, ref: menuRef, transition: {
+                React.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, positionAttributes, useFormFieldFocus.formFieldFocusAttribute), items.length > 0 && (React.createElement(framerMotion.motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, ref: menuRef, transition: {
                         type: "tween",
                         duration: 0.25,
                     }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, items.map((item, key) => (React.createElement("div", { key: key, className: styles.section },
@@ -166,7 +179,7 @@ function MenuPortal({ children }) {
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }
-    return ReactDOM.createPortal(children, document.body);
+    return React.createElement(floatingUi_react.FloatingPortal, null, children);
 }
 
 exports.Menu = Menu;

package/dist/Menu-es.js

@@ -1,12 +1,11 @@
-import React__default, { useState, useRef, useId } from 'react';
+import React__default, { useState, useId, useRef } from 'react';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
-import { usePopper } from 'react-popper';
-import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import ReactDOM__default from 'react-dom';
+import { u as useFloating, F as FloatingPortal, o as offset, f as flip, c as size, b as autoUpdate } from './floating-ui.react-es.js';
 import { u as useFocusTrap_2 } from './useFocusTrap-es.js';
+import { u as useIsMounted_2 } from './useIsMounted-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';
@@ -42,10 +41,11 @@ function useWindowDimensions() {
     return windowDimensions;
 }
 
-var styles = {"wrapper":"fpi0W91w2ag-","popperContainer":"pyIy8jHif3g-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
+const MENU_MAX_HEIGHT_VH = 72; // 72vh as percentage
 const variation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
@@ -62,7 +62,7 @@ const variation = {
 function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const [visible, setVisible] = useState(false);
-    const popperRef = useRef(null);
+    const [referenceElement, setReferenceElement] = useState(null);
     const { width } = useWindowDimensions_2();
     const buttonID = useId();
     const menuID = useId();
@@ -74,32 +74,45 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     // useRefocusOnActivator must come before useFocusTrap for them both to work
     useRefocusOnActivator_2(visible);
     const menuRef = useFocusTrap_2(visible);
-    const [popperElement, setPopperElement] = useState(null);
-    const { styles: popperStyles, attributes, state, } = usePopper(popperRef.current, popperElement, {
+    const { refs, floatingStyles, context } = useFloating({
+        open: visible,
+        onOpenChange: setVisible,
         placement: "bottom-start",
         strategy: "fixed",
-        modifiers: [
-            {
-                name: "flip",
-                options: {
-                    flipVariations: true,
+        middleware: [
+            offset(MENU_OFFSET),
+            flip({ flipAlignment: false }),
+            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_VH) / 100;
+                        // Use the smaller of 72vh or available space
+                        const maxHeight = Math.min(maxHeightVh, availableHeight);
+                        Object.assign(menuElement.style, {
+                            maxHeight: `${maxHeight}px`,
+                        });
+                    }
                 },
-            },
-            {
-                name: "offset",
-                options: {
-                    offset: [0, MENU_OFFSET],
-                },
-            },
+            }),
         ],
+        elements: {
+            reference: referenceElement,
+        },
+        whileElementsMounted: autoUpdate,
     });
     const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
-        ? Object.assign(Object.assign({}, attributes.popper), { style: popperStyles.popper }) : {};
+        ? {
+            style: floatingStyles,
+        }
+        : {};
     if (!activator) {
         activator = (React__default.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
     }
     return (React__default.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
-        React__default.createElement("div", { ref: popperRef }, React__default.cloneElement(activator, {
+        React__default.createElement("div", { ref: setReferenceElement }, React__default.cloneElement(activator, {
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,
@@ -112,7 +125,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
                         type: "tween",
                         duration: 0.15,
                     } }),
-                React__default.createElement("div", Object.assign({ ref: setPopperElement, className: styles.popperContainer }, positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: state === null || state === void 0 ? void 0 : state.placement, ref: menuRef, transition: {
+                React__default.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, ref: menuRef, transition: {
                         type: "tween",
                         duration: 0.25,
                     }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, items.map((item, key) => (React__default.createElement("div", { key: key, className: styles.section },
@@ -164,7 +177,7 @@ function MenuPortal({ children }) {
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
         return null;
     }
-    return ReactDOM__default.createPortal(children, document.body);
+    return React__default.createElement(FloatingPortal, null, children);
 }
 
 export { Menu as M };

package/dist/Modal/index.mjs

@@ -9,7 +9,7 @@ import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { d as useFloatingNodeId, u as useFloating, k as useClick, g as useDismiss, m as useRole, h as useInteractions, c as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, n as FloatingOverlay, p as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { e as useFloatingNodeId, u as useFloating, m as useClick, h as useDismiss, n as useRole, i as useInteractions, d as useFloatingParentNodeId, j as FloatingTree, k as FloatingNode, F as FloatingPortal, p as FloatingOverlay, q as FloatingFocusManager } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';

package/dist/Page/index.cjs

@@ -25,11 +25,11 @@ require('../Menu-cjs.js');
 require('framer-motion');
 require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
-require('react-popper');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
+require('../floating-ui.react-cjs.js');
 require('react-dom');
 require('../useFocusTrap-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 
 

package/dist/Page/index.mjs

@@ -23,9 +23,9 @@ import '../Menu-es.js';
 import 'framer-motion';
 import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
-import 'react-popper';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
+import '../floating-ui.react-es.js';
 import 'react-dom';
 import '../useFocusTrap-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';

package/dist/Popover-es.js

@@ -2,7 +2,7 @@ import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import ReactDOM__default from 'react-dom';
-import { o as offset, s as shift, l as limitShift, e as autoPlacement, f as flip, a as arrow, u as useFloating, b as autoUpdate } from './floating-ui.react-es.js';
+import { o as offset, s as shift, l as limitShift, g as autoPlacement, f as flip, a as arrow, u as useFloating, b as autoUpdate } from './floating-ui.react-es.js';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { A as AtlantisPortalContent } from './AtlantisPortalContent-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';

package/dist/floating-ui.react-es.js

@@ -6029,4 +6029,4 @@ function useRole(context, props) {
   } : {}, [enabled, reference, floating, item]);
 }
 
-export { FloatingPortal as F, arrow as a, autoUpdate as b, useFloatingParentNodeId as c, useFloatingNodeId as d, autoPlacement as e, flip as f, useDismiss as g, useInteractions as h, FloatingTree as i, FloatingNode as j, useClick as k, limitShift as l, useRole as m, FloatingOverlay as n, offset as o, FloatingFocusManager as p, size as q, shift as s, useFloating as u };
+export { FloatingPortal as F, arrow as a, autoUpdate as b, size as c, useFloatingParentNodeId as d, useFloatingNodeId as e, flip as f, autoPlacement as g, useDismiss as h, useInteractions as i, FloatingTree as j, FloatingNode as k, limitShift as l, useClick as m, useRole as n, offset as o, FloatingOverlay as p, FloatingFocusManager as q, shift as s, useFloating as u };

package/dist/styles.css

@@ -2506,7 +2506,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   position: relative;
 }
 
-.pyIy8jHif3g- {
+.ba-Kj6mvQUw- {
   z-index: 1001;
   z-index: var(--elevation-modal);
 }
@@ -2516,19 +2516,19 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   --menu-offset: var(--space-smallest);
   z-index: 1001;
   z-index: var(--elevation-modal);
-  max-height: 72vh;
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
   box-shadow: var(--shadow-base);
+  box-sizing: border-box;
   padding: 8px;
   padding: var(--menu-space);
   padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
   padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));
   border-radius: 8px 8px 0 0;
   border-radius: var(--radius-base) var(--radius-base) 0 0;
-  -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
+  -webkit-overflow-scrolling: touch;
 }
 
 @media (max-width: 489px) {

package/dist/useScrollToActive-es.js

@@ -9,7 +9,7 @@ import { i as identity_1 } from './identity-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 import { a as debounce } from './debounce-es.js';
 import { I as Icon } from './Icon-es.js';
-import { u as useFloating, o as offset, f as flip, q as size, b as autoUpdate } from './floating-ui.react-es.js';
+import { u as useFloating, o as offset, f as flip, c as size, b as autoUpdate } from './floating-ui.react-es.js';
 
 var baseEach = _baseEach,
     isArrayLike = isArrayLike_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.77.0",
+  "version": "6.80.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -479,7 +479,7 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-router": "5.1.7",
     "@types/react-router-dom": "^5.3.3",
-    "axios": "^1.6.0",
+    "axios": "^1.11.0",
     "classnames": "^2.3.2",
     "color": "^3.1.2",
     "filesize": "^6.1.0",
@@ -523,7 +523,7 @@
     "@jobber/design": "*",
     "@jobber/hooks": ">=2",
     "@tanstack/react-table": "^8",
-    "axios": "^1",
+    "axios": "^1.11.0",
     "classnames": "^2",
     "color": "^4",
     "date-fns": "^2.30.0",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "284376c3bbf5298daf999ad4be17984cf699b73d"
+  "gitHead": "fb31413a164542a3481767f2ae2d31c172e86f35"
 }