@jobber/components 6.80.0 → 6.82.0

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');
@@ -36,6 +37,7 @@ var DataDump = require('./DataDump-cjs.js');
 var DataList = require('./DataList-cjs.js');
 var DataTable = require('./DataTable-cjs.js');
 require('./useResizeObserver-cjs.js');
+require('./DataTableTable-cjs.js');
 var reactTable = require('@tanstack/react-table');
 var DatePicker = require('./DatePicker-cjs.js');
 var DescriptionList = require('./DescriptionList-cjs.js');
@@ -99,7 +101,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 +114,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';
@@ -34,6 +35,7 @@ export { D as DataDump } from './DataDump-es.js';
 export { D as DataList } from './DataList-es.js';
 export { D as DataTable } from './DataTable-es.js';
 import './useResizeObserver-es.js';
+import './DataTableTable-es.js';
 export { createColumnHelper } from '@tanstack/react-table';
 export { D as DatePicker } from './DatePicker-es.js';
 export { D as DescriptionList } from './DescriptionList-es.js';
@@ -97,7 +99,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 +112,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 };