@jobber/components 6.80.0 → 6.81.0

package/dist/Autocomplete/constants.d.ts

@@ -1,2 +1 @@
 export declare const AUTOCOMPLETE_MAX_HEIGHT = 300;
-export declare const AUTCOMPLETE_MIN_HEIGHT = 100;

package/dist/Autocomplete/index.cjs

@@ -9,11 +9,12 @@ require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
+require('../maxHeight-cjs.js');
+require('@jobber/design');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Icon-cjs.js');
-require('@jobber/design');
 require('../useOnKeyDown-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-cjs.js');

package/dist/Autocomplete/index.mjs

@@ -7,11 +7,12 @@ import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
+import '../maxHeight-es.js';
+import '@jobber/design';
 import '../Heading-es.js';
 import '../Typography-es.js';
 import '../Text-es.js';
 import '../Icon-es.js';
-import '@jobber/design';
 import '../useOnKeyDown-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';

package/dist/Autocomplete-cjs.js

@@ -7,6 +7,7 @@ var classnames = require('classnames');
 var useIsMounted = require('./useIsMounted-cjs.js');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
+var maxHeight = require('./maxHeight-cjs.js');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -17,7 +18,6 @@ var FormField = require('./FormField-cjs.js');
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
-const AUTCOMPLETE_MIN_HEIGHT = 100;
 
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = floatingUi_react.useFloating(Object.assign({ placement: "bottom", middleware: [
@@ -25,13 +25,11 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             floatingUi_react.flip({ fallbackPlacements: ["top"] }),
             floatingUi_react.size({
                 apply({ availableHeight, elements }) {
-                    // Limit the height for a true maximum
-                    // However if we have less space than that, then reduce it to allow scrolling
-                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
-                        ? AUTOCOMPLETE_MAX_HEIGHT
-                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight}px`,
+                        maxHeight: `${maxHeight$1}px`,
                     });
                 },
             }),

package/dist/Autocomplete-es.js

@@ -3,8 +3,9 @@ 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, c as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
+import { u as useFloating, o as offset, f as flip, e as size, b as autoUpdate, F as FloatingPortal } from './floating-ui.react-es.js';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
+import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -15,7 +16,6 @@ import { m as mergeRefs } from './FormField-es.js';
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
 
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
-const AUTCOMPLETE_MIN_HEIGHT = 100;
 
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = useFloating(Object.assign({ placement: "bottom", middleware: [
@@ -23,11 +23,9 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             flip({ fallbackPlacements: ["top"] }),
             size({
                 apply({ availableHeight, elements }) {
-                    // Limit the height for a true maximum
-                    // However if we have less space than that, then reduce it to allow scrolling
-                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
-                        ? AUTOCOMPLETE_MAX_HEIGHT
-                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    const maxHeight = calculateMaxHeight(availableHeight, {
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight}px`,
                     });

package/dist/Card/index.cjs

@@ -12,7 +12,6 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
@@ -20,6 +19,7 @@ require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 
 
 

package/dist/Card/index.mjs

@@ -10,7 +10,6 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
@@ -18,3 +17,4 @@ import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -19,6 +19,7 @@ require('../../../Icon-cjs.js');
 require('@jobber/design');
 require('../../../floating-ui.react-cjs.js');
 require('react-dom');
+require('../../../maxHeight-cjs.js');
 
 
 

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -17,3 +17,4 @@ import '../../../Icon-es.js';
 import '@jobber/design';
 import '../../../floating-ui.react-es.js';
 import 'react-dom';
+import '../../../maxHeight-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -20,6 +20,7 @@ require('../../Icon-cjs.js');
 require('@jobber/design');
 require('../../floating-ui.react-cjs.js');
 require('react-dom');
+require('../../maxHeight-cjs.js');
 require('classnames');
 require('../../useSafeLayoutEffect-cjs.js');
 require('../../Text-cjs.js');

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -18,6 +18,7 @@ import '../../Icon-es.js';
 import '@jobber/design';
 import '../../floating-ui.react-es.js';
 import 'react-dom';
+import '../../maxHeight-es.js';
 import 'classnames';
 import '../../useSafeLayoutEffect-es.js';
 import '../../Text-es.js';

package/dist/Chips/index.cjs

@@ -22,6 +22,7 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
+require('../maxHeight-cjs.js');
 require('classnames');
 require('../useSafeLayoutEffect-cjs.js');
 require('../Text-cjs.js');

package/dist/Chips/index.mjs

@@ -20,6 +20,7 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../floating-ui.react-es.js';
 import 'react-dom';
+import '../maxHeight-es.js';
 import 'classnames';
 import '../useSafeLayoutEffect-es.js';
 import '../Text-es.js';

package/dist/Combobox/hooks/useComboboxAccessibility.d.ts

@@ -1,8 +1,8 @@
 import { UseInteractionsReturn } from "@floating-ui/react";
 import { ComboboxOption } from "../Combobox.types";
 export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
-    popperRef: React.RefObject<HTMLDivElement>;
-    popperStyles: React.CSSProperties;
+    floatingRef: React.RefObject<HTMLDivElement>;
+    floatingStyles: React.CSSProperties;
     floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
     nodeId?: string;
     parentNodeId: string | null;

package/dist/ComboboxContent-cjs.js

@@ -3,7 +3,6 @@
 var React = require('react');
 var classnames = require('classnames');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
-var ReactDOM = require('react-dom');
 var ComboboxContentSearch = require('./ComboboxContentSearch-cjs.js');
 var ComboboxContentList = require('./ComboboxContentList-cjs.js');
 var ComboboxContentHeader = require('./ComboboxContentHeader-cjs.js');
@@ -52,12 +51,12 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     const parentNodeId = floatingUi_react.useFloatingParentNodeId();
     const nodeId = floatingUi_react.useFloatingNodeId();
     useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const popperRef = useFocusTrap.useFocusTrap_2(open);
+    const floatingRef = useFocusTrap.useFocusTrap_2(open);
     const { floatingStyles, update, context } = floatingUi_react.useFloating({
         nodeId,
         elements: {
             reference: wrapperRef.current,
-            floating: popperRef.current,
+            floating: floatingRef.current,
         },
         open,
         onOpenChange: openState => {
@@ -65,9 +64,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            floatingUi_react.autoPlacement({ allowedPlacements: ["bottom-start", "top-start"] }),
             floatingUi_react.offset(COMBOBOX_OFFSET),
-            floatingUi_react.shift({ padding: COMBOBOX_OFFSET }),
+            floatingUi_react.flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
         placement: "bottom-start",
         whileElementsMounted: floatingUi_react.autoUpdate,
@@ -83,11 +81,11 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     React.useEffect(() => {
         var _a;
         if (open) {
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
         }
         return () => {
             var _a;
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
         };
     }, [open, optionsListRef, filteredOptions]);
     function handleContentKeydown(event) {
@@ -126,8 +124,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
         }
     }
     return {
-        popperRef,
-        popperStyles: floatingStyles,
+        floatingRef,
+        floatingStyles,
         floatingProps: getFloatingProps(),
         nodeId,
         parentNodeId,
@@ -137,7 +135,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { popperRef, popperStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = React.useMemo(() => {
@@ -146,9 +144,9 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React.createElement("div", Object.assign({ ref: popperRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React.createElement("div", Object.assign({ ref: floatingRef, id: constants.COMBOBOX_MENU_ID, "data-testid": constants.COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
-        }), style: popperStyles }, floatingProps),
+        }), style: floatingStyles }, floatingProps),
         React.createElement(ComboboxContentSearch.ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader.ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
@@ -166,9 +164,7 @@ function ComboboxContent(props) {
             React.createElement(floatingUi_react.FloatingNode, { id: nodeId },
                 React.createElement(floatingUi_react.FloatingPortal, null, content))));
     }
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
-        ? ReactDOM.createPortal(content, document.body)
-        : content;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React.createElement(floatingUi_react.FloatingPortal, null, content)) : (content);
 }
 
 exports.ComboboxContent = ComboboxContent;

package/dist/ComboboxContent-es.js

@@ -1,7 +1,6 @@
 import React__default, { useContext, useRef, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
-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 { g as useFloatingParentNodeId, h as useFloatingNodeId, u as useFloating, o as offset, f as flip, b as autoUpdate, c as useDismiss, d as useInteractions, i as FloatingTree, j as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import { C as ComboboxContentSearch } from './ComboboxContentSearch-es.js';
 import { C as ComboboxContentList } from './ComboboxContentList-es.js';
 import { C as ComboboxContentHeader } from './ComboboxContentHeader-es.js';
@@ -50,12 +49,12 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     const parentNodeId = useFloatingParentNodeId();
     const nodeId = useFloatingNodeId();
     useRefocusOnActivator_2(open);
-    const popperRef = useFocusTrap_2(open);
+    const floatingRef = useFocusTrap_2(open);
     const { floatingStyles, update, context } = useFloating({
         nodeId,
         elements: {
             reference: wrapperRef.current,
-            floating: popperRef.current,
+            floating: floatingRef.current,
         },
         open,
         onOpenChange: openState => {
@@ -63,9 +62,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
                 handleClose();
         },
         middleware: [
-            autoPlacement({ allowedPlacements: ["bottom-start", "top-start"] }),
             offset(COMBOBOX_OFFSET),
-            shift({ padding: COMBOBOX_OFFSET }),
+            flip({ fallbackPlacements: ["top-start", "bottom-end", "top-end"] }),
         ],
         placement: "bottom-start",
         whileElementsMounted: autoUpdate,
@@ -81,11 +79,11 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     useEffect(() => {
         var _a;
         if (open) {
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
         }
         return () => {
             var _a;
-            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+            (_a = floatingRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
         };
     }, [open, optionsListRef, filteredOptions]);
     function handleContentKeydown(event) {
@@ -124,8 +122,8 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
         }
     }
     return {
-        popperRef,
-        popperStyles: floatingStyles,
+        floatingRef,
+        floatingStyles,
         floatingProps: getFloatingProps(),
         nodeId,
         parentNodeId,
@@ -135,7 +133,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 function ComboboxContent(props) {
     const optionsExist = props.options.length > 0;
     const { onClear, onSelectAll, optionsListRef } = useComboboxContent(props.open, props.selected);
-    const { popperRef, popperStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const { floatingRef, floatingStyles, floatingProps, nodeId, parentNodeId } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
     // options that are passed back to consumers via onSelectAll callback
     // should only contain id and label
     const optionsData = useMemo(() => {
@@ -144,9 +142,9 @@ function ComboboxContent(props) {
             label: option.label,
         }));
     }, [props.options]);
-    const content = (React__default.createElement("div", Object.assign({ ref: popperRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
+    const content = (React__default.createElement("div", Object.assign({ ref: floatingRef, id: COMBOBOX_MENU_ID, "data-testid": COMBOBOX_MENU_ID, "data-elevation": "elevated", tabIndex: 0, className: classnames(styles.content, {
             [styles.hidden]: !props.open,
-        }), style: popperStyles }, floatingProps),
+        }), style: floatingStyles }, floatingProps),
         React__default.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
         props.multiselect && (optionsExist || props.selected.length > 0) && (React__default.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
                 props.selectedStateSetter([]);
@@ -164,9 +162,7 @@ function ComboboxContent(props) {
             React__default.createElement(FloatingNode, { id: nodeId },
                 React__default.createElement(FloatingPortal, null, content))));
     }
-    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
-        ? ReactDOM__default.createPortal(content, document.body)
-        : content;
+    return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? (React__default.createElement(FloatingPortal, null, content)) : (content);
 }
 
 export { ComboboxContent as C };

package/dist/DataDump/index.cjs

@@ -13,7 +13,6 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
@@ -21,6 +20,7 @@ require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');
 

package/dist/DataDump/index.mjs

@@ -11,7 +11,6 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
@@ -19,5 +18,6 @@ import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/Menu/index.cjs

@@ -4,7 +4,6 @@ var Menu = require('../Menu-cjs.js');
 require('react');
 require('classnames');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
@@ -18,6 +17,7 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 
 
 

package/dist/Menu/index.mjs

@@ -2,7 +2,6 @@ export { M as Menu } from '../Menu-es.js';
 import 'react';
 import 'classnames';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
@@ -16,3 +15,4 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';

package/dist/Menu-cjs.js

@@ -3,7 +3,6 @@
 var React = require('react');
 var classnames = require('classnames');
 var framerMotion = require('framer-motion');
-var useOnKeyDown = require('./useOnKeyDown-cjs.js');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useFocusTrap = require('./useFocusTrap-cjs.js');
@@ -12,6 +11,7 @@ var Button = require('./Button-cjs.js');
 var Typography = require('./Typography-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var useFormFieldFocus = require('./useFormFieldFocus-cjs.js');
+var maxHeight = require('./maxHeight-cjs.js');
 
 var useWindowDimensions$1 = {};
 
@@ -47,7 +47,7 @@ var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu"
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
-const MENU_MAX_HEIGHT_VH = 72; // 72vh as percentage
+const MENU_MAX_HEIGHT_PERCENTAGE = 72;
 const variation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
@@ -72,7 +72,6 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
     });
-    useOnKeyDown.useOnKeyDown_2(handleKeyboardShortcut, ["Escape"]);
     // useRefocusOnActivator must come before useFocusTrap for them both to work
     useRefocusOnActivator.useRefocusOnActivator_2(visible);
     const menuRef = useFocusTrap.useFocusTrap_2(visible);
@@ -90,11 +89,12 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
                     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);
+                        const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
+                        const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                            maxHeight: maxHeightVh,
+                        });
                         Object.assign(menuElement.style, {
-                            maxHeight: `${maxHeight}px`,
+                            maxHeight: `${maxHeight$1}px`,
                         });
                     }
                 },
@@ -105,6 +105,8 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         },
         whileElementsMounted: floatingUi_react.autoUpdate,
     });
+    const dismiss = floatingUi_react.useDismiss(context);
+    const { getFloatingProps } = floatingUi_react.useInteractions([dismiss]);
     const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
         ? {
             style: floatingStyles,
@@ -127,7 +129,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
                         type: "tween",
                         duration: 0.15,
                     } }),
-                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: {
+                React.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps(), 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 },
@@ -142,14 +144,6 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     function hide() {
         setVisible(false);
     }
-    function handleKeyboardShortcut(event) {
-        const { key } = event;
-        if (!visible)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        key === "Escape" && hide();
-    }
     function handleParentClick(event) {
         // Since the menu is being rendered within the same parent as the activator,
         // we need to stop the click event from bubbling up. If the Menu component

package/dist/Menu-es.js

@@ -1,15 +1,15 @@
 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 { 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 useFloating, c as useDismiss, d as useInteractions, F as FloatingPortal, o as offset, f as flip, e 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';
 import { f as formFieldFocusAttribute } from './useFormFieldFocus-es.js';
+import { c as calculateMaxHeight } from './maxHeight-es.js';
 
 var useWindowDimensions$1 = {};
 
@@ -45,7 +45,7 @@ var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu"
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
-const MENU_MAX_HEIGHT_VH = 72; // 72vh as percentage
+const MENU_MAX_HEIGHT_PERCENTAGE = 72;
 const variation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
@@ -70,7 +70,6 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
     });
-    useOnKeyDown_2(handleKeyboardShortcut, ["Escape"]);
     // useRefocusOnActivator must come before useFocusTrap for them both to work
     useRefocusOnActivator_2(visible);
     const menuRef = useFocusTrap_2(visible);
@@ -88,9 +87,10 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
                     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);
+                        const maxHeightVh = (viewportHeight * MENU_MAX_HEIGHT_PERCENTAGE) / 100;
+                        const maxHeight = calculateMaxHeight(availableHeight, {
+                            maxHeight: maxHeightVh,
+                        });
                         Object.assign(menuElement.style, {
                             maxHeight: `${maxHeight}px`,
                         });
@@ -103,6 +103,8 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         },
         whileElementsMounted: autoUpdate,
     });
+    const dismiss = useDismiss(context);
+    const { getFloatingProps } = useInteractions([dismiss]);
     const positionAttributes = width >= SMALL_SCREEN_BREAKPOINT
         ? {
             style: floatingStyles,
@@ -125,7 +127,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
                         type: "tween",
                         duration: 0.15,
                     } }),
-                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: {
+                React__default.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps(), 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 },
@@ -140,14 +142,6 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     function hide() {
         setVisible(false);
     }
-    function handleKeyboardShortcut(event) {
-        const { key } = event;
-        if (!visible)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        key === "Escape" && hide();
-    }
     function handleParentClick(event) {
         // Since the menu is being rendered within the same parent as the activator,
         // we need to stop the click event from bubbling up. If the Menu component

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 { 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 { h as useFloatingNodeId, u as useFloating, m as useClick, c as useDismiss, n as useRole, d as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j 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

@@ -23,7 +23,6 @@ require('../Icon-cjs.js');
 require('@jobber/design');
 require('../Menu-cjs.js');
 require('framer-motion');
-require('../useOnKeyDown-cjs.js');
 require('../useRefocusOnActivator-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
@@ -31,6 +30,7 @@ require('../useFocusTrap-cjs.js');
 require('../useIsMounted-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../useFormFieldFocus-cjs.js');
+require('../maxHeight-cjs.js');
 
 
 

package/dist/Page/index.mjs

@@ -21,7 +21,6 @@ import '../Icon-es.js';
 import '@jobber/design';
 import '../Menu-es.js';
 import 'framer-motion';
-import '../useOnKeyDown-es.js';
 import '../useRefocusOnActivator-es.js';
 import '../floating-ui.react-es.js';
 import 'react-dom';
@@ -29,3 +28,4 @@ import '../useFocusTrap-es.js';
 import '../useIsMounted-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../useFormFieldFocus-es.js';
+import '../maxHeight-es.js';

package/dist/Popover/PopoverContext.d.ts

@@ -3,8 +3,8 @@ import React, { CSSProperties } from "react";
 import { PopoverProviderProps } from "./Popover.types";
 interface PopoverContextProps {
     setArrowElement: (element: HTMLElement | null) => void;
-    popperStyles: {
-        popper: CSSProperties;
+    floatingStyles: {
+        float: CSSProperties;
         arrow?: {
             x?: number;
             y?: number;

package/dist/Popover/index.cjs

@@ -4,8 +4,8 @@ var Popover = require('../Popover-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
-require('react-dom');
 require('../floating-ui.react-cjs.js');
+require('react-dom');
 require('../useRefocusOnActivator-cjs.js');
 require('../AtlantisPortalContent-cjs.js');
 require('../AtlantisThemeContext-cjs.js');

package/dist/Popover/index.mjs

@@ -2,8 +2,8 @@ export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from '../
 import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
-import 'react-dom';
 import '../floating-ui.react-es.js';
+import 'react-dom';
 import '../useRefocusOnActivator-es.js';
 import '../AtlantisPortalContent-es.js';
 import '../AtlantisThemeContext-es.js';

package/dist/Popover/usePopover.d.ts

@@ -1,16 +1,13 @@
 import { PopoverProps } from "./Popover.types";
 export declare const usePopover: ({ preferredPlacement, attachTo, open, }: Pick<PopoverProps, "preferredPlacement" | "attachTo" | "open">) => {
-    setPopperElement: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    setFloatingElement: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
     setArrowElement: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null | undefined>>;
-    popperStyles: {
-        popper: import("react").CSSProperties;
+    floatingStyles: {
+        float: import("react").CSSProperties;
         arrow: (Partial<import("@floating-ui/core").Coords> & {
             centerOffset: number;
             alignmentOffset?: number;
         }) | undefined;
     };
     placement: import("@floating-ui/utils").Placement;
-    attributes: {
-        popper: {};
-    };
 };

package/dist/Popover-cjs.js

@@ -3,7 +3,6 @@
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
-var ReactDOM = require('react-dom');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var AtlantisPortalContent = require('./AtlantisPortalContent-cjs.js');
@@ -56,14 +55,13 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
     });
     useRefocusOnActivator.useRefocusOnActivator_2(open);
     return {
-        setPopperElement: refs.setFloating,
+        setFloatingElement: refs.setFloating,
         setArrowElement,
-        popperStyles: {
-            popper: floatingStyles,
+        floatingStyles: {
+            float: floatingStyles,
             arrow: middlewareData.arrow,
         },
         placement,
-        attributes: { popper: {} },
     };
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -82,7 +80,7 @@ const usePopoverStyles = () => {
 };
 
 const PopoverContext = React.createContext({
-    popperStyles: { popper: {} },
+    floatingStyles: { float: {} },
     setArrowElement: () => {
         // noop
     },
@@ -91,7 +89,7 @@ function usePopoverContext() {
     return React.useContext(PopoverContext);
 }
 function PopoverProvider({ children, preferredPlacement = "auto", attachTo, open, UNSAFE_className, UNSAFE_style, }) {
-    const { setPopperElement, setArrowElement, popperStyles, placement } = usePopover({
+    const { setFloatingElement, setArrowElement, floatingStyles, placement } = usePopover({
         preferredPlacement,
         attachTo,
         open,
@@ -100,18 +98,18 @@ function PopoverProvider({ children, preferredPlacement = "auto", attachTo, open
         return null;
     return (React.createElement(PopoverContext.Provider, { value: {
             setArrowElement,
-            popperStyles,
+            floatingStyles,
             placement,
         } },
-        React.createElement(PopoverWrapper, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, setPopperElement: setPopperElement, placement: placement }, children)));
+        React.createElement(PopoverWrapper, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, setFloatingElement: setFloatingElement, placement: placement }, children)));
 }
-function PopoverWrapper({ children, setPopperElement, UNSAFE_className, UNSAFE_style, placement, }) {
+function PopoverWrapper({ children, setFloatingElement, UNSAFE_className, UNSAFE_style, placement, }) {
     const popoverStyles = usePopoverStyles();
-    const { popperStyles } = usePopoverContext();
+    const { floatingStyles } = usePopoverContext();
     const classes = classnames(popoverStyles.container, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
     const content = (React.createElement(AtlantisPortalContent.AtlantisPortalContent, null,
-        React.createElement("div", { role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classes, "data-popover-placement": placement, "data-testid": "ATL-Popover-Container" }, children)));
-    return ReactDOM.createPortal(content, document.body);
+        React.createElement("div", { role: "dialog", "data-elevation": "elevated", ref: setFloatingElement, style: Object.assign(Object.assign({}, floatingStyles.float), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classes, "data-popover-placement": placement, "data-testid": "ATL-Popover-Container" }, children)));
+    return React.createElement(floatingUi_react.FloatingPortal, null, content);
 }
 
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className, UNSAFE_style, }) {
@@ -122,8 +120,8 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
 }
 Popover.Provider = PopoverProvider;
 Popover.Arrow = function PopoverArrow({ UNSAFE_className, UNSAFE_style, }) {
-    var _a, _b, _c, _d;
-    const { setArrowElement, popperStyles, placement } = usePopoverContext();
+    var _a, _b;
+    const { setArrowElement, floatingStyles, placement } = usePopoverContext();
     const popoverStyles = usePopoverStyles();
     const classes = classnames(popoverStyles.arrow, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.arrow);
     // the arrow will get positioned opposite to the placement side
@@ -134,11 +132,13 @@ Popover.Arrow = function PopoverArrow({ UNSAFE_className, UNSAFE_style, }) {
         left: "right",
     };
     const staticSide = staticSideMap[placement];
+    const arrowX = (_a = floatingStyles.arrow) === null || _a === void 0 ? void 0 : _a.x;
+    const arrowY = (_b = floatingStyles.arrow) === null || _b === void 0 ? void 0 : _b.y;
     const arrowStyles = {
         position: "absolute",
         // only left or top will be defined at a time
-        left: ((_a = popperStyles.arrow) === null || _a === void 0 ? void 0 : _a.x) != null ? `${(_b = popperStyles.arrow) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-        top: ((_c = popperStyles.arrow) === null || _c === void 0 ? void 0 : _c.y) != null ? `${(_d = popperStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px` : "",
+        left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : "",
+        top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : "",
         right: "",
         bottom: "",
         [staticSide]: "var(--popover--position--offset)",

package/dist/Popover-es.js

@@ -1,8 +1,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, g 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, k as autoPlacement, f as flip, a as arrow, u as useFloating, b as autoUpdate, F as FloatingPortal } 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';
@@ -54,14 +53,13 @@ const usePopover = ({ preferredPlacement, attachTo, open, }) => {
     });
     useRefocusOnActivator_2(open);
     return {
-        setPopperElement: refs.setFloating,
+        setFloatingElement: refs.setFloating,
         setArrowElement,
-        popperStyles: {
-            popper: floatingStyles,
+        floatingStyles: {
+            float: floatingStyles,
             arrow: middlewareData.arrow,
         },
         placement,
-        attributes: { popper: {} },
     };
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -80,7 +78,7 @@ const usePopoverStyles = () => {
 };
 
 const PopoverContext = createContext({
-    popperStyles: { popper: {} },
+    floatingStyles: { float: {} },
     setArrowElement: () => {
         // noop
     },
@@ -89,7 +87,7 @@ function usePopoverContext() {
     return useContext(PopoverContext);
 }
 function PopoverProvider({ children, preferredPlacement = "auto", attachTo, open, UNSAFE_className, UNSAFE_style, }) {
-    const { setPopperElement, setArrowElement, popperStyles, placement } = usePopover({
+    const { setFloatingElement, setArrowElement, floatingStyles, placement } = usePopover({
         preferredPlacement,
         attachTo,
         open,
@@ -98,18 +96,18 @@ function PopoverProvider({ children, preferredPlacement = "auto", attachTo, open
         return null;
     return (React__default.createElement(PopoverContext.Provider, { value: {
             setArrowElement,
-            popperStyles,
+            floatingStyles,
             placement,
         } },
-        React__default.createElement(PopoverWrapper, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, setPopperElement: setPopperElement, placement: placement }, children)));
+        React__default.createElement(PopoverWrapper, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, setFloatingElement: setFloatingElement, placement: placement }, children)));
 }
-function PopoverWrapper({ children, setPopperElement, UNSAFE_className, UNSAFE_style, placement, }) {
+function PopoverWrapper({ children, setFloatingElement, UNSAFE_className, UNSAFE_style, placement, }) {
     const popoverStyles = usePopoverStyles();
-    const { popperStyles } = usePopoverContext();
+    const { floatingStyles } = usePopoverContext();
     const classes = classnames(popoverStyles.container, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.container);
     const content = (React__default.createElement(AtlantisPortalContent, null,
-        React__default.createElement("div", { role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classes, "data-popover-placement": placement, "data-testid": "ATL-Popover-Container" }, children)));
-    return ReactDOM__default.createPortal(content, document.body);
+        React__default.createElement("div", { role: "dialog", "data-elevation": "elevated", ref: setFloatingElement, style: Object.assign(Object.assign({}, floatingStyles.float), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container), className: classes, "data-popover-placement": placement, "data-testid": "ATL-Popover-Container" }, children)));
+    return React__default.createElement(FloatingPortal, null, content);
 }
 
 function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className, UNSAFE_style, }) {
@@ -120,8 +118,8 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
 }
 Popover.Provider = PopoverProvider;
 Popover.Arrow = function PopoverArrow({ UNSAFE_className, UNSAFE_style, }) {
-    var _a, _b, _c, _d;
-    const { setArrowElement, popperStyles, placement } = usePopoverContext();
+    var _a, _b;
+    const { setArrowElement, floatingStyles, placement } = usePopoverContext();
     const popoverStyles = usePopoverStyles();
     const classes = classnames(popoverStyles.arrow, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.arrow);
     // the arrow will get positioned opposite to the placement side
@@ -132,11 +130,13 @@ Popover.Arrow = function PopoverArrow({ UNSAFE_className, UNSAFE_style, }) {
         left: "right",
     };
     const staticSide = staticSideMap[placement];
+    const arrowX = (_a = floatingStyles.arrow) === null || _a === void 0 ? void 0 : _a.x;
+    const arrowY = (_b = floatingStyles.arrow) === null || _b === void 0 ? void 0 : _b.y;
     const arrowStyles = {
         position: "absolute",
         // only left or top will be defined at a time
-        left: ((_a = popperStyles.arrow) === null || _a === void 0 ? void 0 : _a.x) != null ? `${(_b = popperStyles.arrow) === null || _b === void 0 ? void 0 : _b.x}px` : "",
-        top: ((_c = popperStyles.arrow) === null || _c === void 0 ? void 0 : _c.y) != null ? `${(_d = popperStyles.arrow) === null || _d === void 0 ? void 0 : _d.y}px` : "",
+        left: arrowX !== null && arrowX !== undefined ? `${arrowX}px` : "",
+        top: arrowY !== null && arrowY !== undefined ? `${arrowY}px` : "",
         right: "",
         bottom: "",
         [staticSide]: "var(--popover--position--offset)",

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, 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 };
+export { FloatingPortal as F, arrow as a, autoUpdate as b, useDismiss as c, useInteractions as d, size as e, flip as f, useFloatingParentNodeId as g, useFloatingNodeId as h, FloatingTree as i, FloatingNode as j, autoPlacement 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/index.cjs

@@ -12,6 +12,7 @@ var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
 require('./useSafeLayoutEffect-cjs.js');
+require('@jobber/design');
 require('./useIsMounted-cjs.js');
 var Avatar = require('./Avatar-cjs.js');
 var Banner = require('./Banner-cjs.js');
@@ -99,7 +100,6 @@ var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
 require('framer-motion');
-require('@jobber/design');
 require('./_commonjsHelpers-cjs.js');
 require('./identity-cjs.js');
 require('./isTypedArray-cjs.js');
@@ -113,6 +113,7 @@ require('./tslib.es6-cjs.js');
 require('./useDebounce-cjs.js');
 require('./floating-ui.react-cjs.js');
 require('react-dom');
+require('./maxHeight-cjs.js');
 require('./useOnKeyDown-cjs.js');
 require('color');
 require('react-router-dom');

package/dist/index.mjs

@@ -10,6 +10,7 @@ export { H as Heading } from './Heading-es.js';
 export { T as Text } from './Text-es.js';
 export { I as Icon } from './Icon-es.js';
 import './useSafeLayoutEffect-es.js';
+import '@jobber/design';
 import './useIsMounted-es.js';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
@@ -97,7 +98,6 @@ export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
 import 'framer-motion';
-import '@jobber/design';
 import './_commonjsHelpers-es.js';
 import './identity-es.js';
 import './isTypedArray-es.js';
@@ -111,6 +111,7 @@ import './tslib.es6-es.js';
 import './useDebounce-es.js';
 import './floating-ui.react-es.js';
 import 'react-dom';
+import './maxHeight-es.js';
 import './useOnKeyDown-es.js';
 import 'color';
 import 'react-router-dom';

package/dist/maxHeight-cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var design = require('@jobber/design');
+
+/**
+ * Calculates the appropriate max height for floating elements based on available space.
+ *
+ * This utility encapsulates the common pattern of:
+ * - Using a preferred max height when space allows
+ * - Falling back to available height minus edge padding when constrained
+ *
+ * @param availableHeight - The available height from FloatingUI's size middleware
+ * @param options - Configuration for max height, and edge padding
+ * @returns The calculated max height in pixels
+ */
+function calculateMaxHeight(availableHeight, options) {
+    const { maxHeight, edgePadding = design.tokens["space-base"] } = options;
+    if (availableHeight > maxHeight) {
+        return maxHeight;
+    }
+    return Math.min(maxHeight, Math.max(availableHeight - edgePadding, 0));
+}
+
+exports.calculateMaxHeight = calculateMaxHeight;

package/dist/maxHeight-es.js

@@ -0,0 +1,22 @@
+import { tokens } from '@jobber/design';
+
+/**
+ * Calculates the appropriate max height for floating elements based on available space.
+ *
+ * This utility encapsulates the common pattern of:
+ * - Using a preferred max height when space allows
+ * - Falling back to available height minus edge padding when constrained
+ *
+ * @param availableHeight - The available height from FloatingUI's size middleware
+ * @param options - Configuration for max height, and edge padding
+ * @returns The calculated max height in pixels
+ */
+function calculateMaxHeight(availableHeight, options) {
+    const { maxHeight, edgePadding = tokens["space-base"] } = options;
+    if (availableHeight > maxHeight) {
+        return maxHeight;
+    }
+    return Math.min(maxHeight, Math.max(availableHeight - edgePadding, 0));
+}
+
+export { calculateMaxHeight as c };

package/dist/useScrollToActive-cjs.js

@@ -12,6 +12,7 @@ var _isIterateeCall = require('./_isIterateeCall-cjs.js');
 var debounce = require('./debounce-cjs.js');
 var Icon = require('./Icon-cjs.js');
 var floatingUi_react = require('./floating-ui.react-cjs.js');
+var maxHeight = require('./maxHeight-cjs.js');
 
 var baseEach = _baseEach._baseEach,
     isArrayLike = isTypedArray.isArrayLike_1;
@@ -583,9 +584,11 @@ function useRepositionMenu(attachTo) {
             floatingUi_react.flip({ fallbackPlacements: ["top"] }),
             floatingUi_react.size({
                 apply({ availableHeight, elements }) {
-                    const maxHeight = Math.min(PREFERRED_MAX_HEIGHT, availableHeight);
+                    const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
+                        maxHeight: PREFERRED_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
-                        maxHeight: `${maxHeight}px`,
+                        maxHeight: `${maxHeight$1}px`,
                     });
                 },
             }),

package/dist/useScrollToActive-es.js

@@ -9,7 +9,8 @@ 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, c as size, b as autoUpdate } from './floating-ui.react-es.js';
+import { u as useFloating, o as offset, f as flip, e as size, b as autoUpdate } from './floating-ui.react-es.js';
+import { c as calculateMaxHeight } from './maxHeight-es.js';
 
 var baseEach = _baseEach,
     isArrayLike = isArrayLike_1;
@@ -581,7 +582,9 @@ function useRepositionMenu(attachTo) {
             flip({ fallbackPlacements: ["top"] }),
             size({
                 apply({ availableHeight, elements }) {
-                    const maxHeight = Math.min(PREFERRED_MAX_HEIGHT, availableHeight);
+                    const maxHeight = calculateMaxHeight(availableHeight, {
+                        maxHeight: PREFERRED_MAX_HEIGHT,
+                    });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight}px`,
                     });

package/dist/utils/maxHeight.d.ts

@@ -0,0 +1,23 @@
+export interface MaxHeightOptions {
+    /**
+     * The preferred maximum height in pixels
+     */
+    readonly maxHeight: number;
+    /**
+     * Edge padding to ensure the element doesn't touch screen edges
+     * @default tokens["space-base"]
+     */
+    readonly edgePadding?: number;
+}
+/**
+ * Calculates the appropriate max height for floating elements based on available space.
+ *
+ * This utility encapsulates the common pattern of:
+ * - Using a preferred max height when space allows
+ * - Falling back to available height minus edge padding when constrained
+ *
+ * @param availableHeight - The available height from FloatingUI's size middleware
+ * @param options - Configuration for max height, and edge padding
+ * @returns The calculated max height in pixels
+ */
+export declare function calculateMaxHeight(availableHeight: number, options: MaxHeightOptions): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.80.0",
+  "version": "6.81.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fb31413a164542a3481767f2ae2d31c172e86f35"
+  "gitHead": "0a0c72d9d554c30657ac0c9d0a88f8261770ac2e"
 }