@jobber/components 6.30.0 → 6.31.1

package/AtlantisPortalContent.d.ts

@@ -0,0 +1 @@
+export * from "./dist/AtlantisPortalContent";

package/AtlantisPortalContent.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var AtlantisPortalContent = require("./dist/AtlantisPortalContent");
+
+Object.keys(AtlantisPortalContent).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return AtlantisPortalContent[key];
+    },
+  });
+});

package/dist/AtlantisPortalContent/AtlantisPortalContent.d.ts

@@ -0,0 +1,2 @@
+import { AtlantisPortalContentProps } from "./AtlantisPortalContent.types";
+export declare function AtlantisPortalContent({ children, }: AtlantisPortalContentProps): JSX.Element;

package/dist/AtlantisPortalContent/AtlantisPortalContent.types.d.ts

@@ -0,0 +1,4 @@
+export interface AtlantisPortalContentProps {
+    /** The content that will be rendered inside a portal. */
+    readonly children: React.ReactNode;
+}

package/dist/AtlantisPortalContent/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var AtlantisPortalContent = require('../AtlantisPortalContent-cjs.js');
+require('react');
+require('../AtlantisThemeContext-cjs.js');
+require('@jobber/design');
+require('../_commonjsHelpers-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
+
+
+
+exports.AtlantisPortalContent = AtlantisPortalContent.AtlantisPortalContent;

package/dist/AtlantisPortalContent/index.d.ts

@@ -0,0 +1,2 @@
+export { AtlantisPortalContent } from "./AtlantisPortalContent";
+export type { AtlantisPortalContentProps } from "./AtlantisPortalContent.types";

package/dist/AtlantisPortalContent/index.mjs

@@ -0,0 +1,13 @@
+export { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
+import 'react';
+import '../AtlantisThemeContext-es.js';
+import '@jobber/design';
+import '../_commonjsHelpers-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';

package/dist/AtlantisPortalContent-cjs.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
+
+function AtlantisPortalContent({ children, }) {
+    const { theme } = AtlantisThemeContext.useAtlantisTheme();
+    return (React.createElement(AtlantisThemeContext.AtlantisThemeContextProvider, { dangerouslyOverrideTheme: theme }, children));
+}
+
+exports.AtlantisPortalContent = AtlantisPortalContent;

package/dist/AtlantisPortalContent-es.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { u as useAtlantisTheme, A as AtlantisThemeContextProvider } from './AtlantisThemeContext-es.js';
+
+function AtlantisPortalContent({ children, }) {
+    const { theme } = useAtlantisTheme();
+    return (React__default.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: theme }, children));
+}
+
+export { AtlantisPortalContent as A };

package/dist/ButtonDismiss/ButtonDismiss.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
-interface ButtonDismissProps {
+export interface ButtonDismissProps {
     onClick?(event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void;
     readonly ariaLabel: string;
 }
 export declare function ButtonDismiss({ onClick, ariaLabel }: ButtonDismissProps): JSX.Element;
-export {};

package/dist/ButtonDismiss/index.d.ts

@@ -1 +1 @@
-export { ButtonDismiss } from "./ButtonDismiss";
+export { ButtonDismiss, type ButtonDismissProps } from "./ButtonDismiss";

package/dist/Chip-cjs.js

@@ -22,7 +22,7 @@ var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
     const buttonRef = React.useRef();
-    return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+    return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React.createElement(Icon.Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&

package/dist/Chip-es.js

@@ -20,7 +20,7 @@ var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
     const buttonRef = useRef();
-    return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+    return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default.createElement(Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&

package/dist/Popover/Popover.d.ts

@@ -1,46 +1,8 @@
-import React, { CSSProperties } from "react";
-export interface PopoverProps {
-    /**
-     * Element the Popover will attach to and point at. A `useRef` must be attached to an html element
-     * and passed as an attachTo prop in order for the Popover to function properly
-     */
-    readonly attachTo: Element | React.RefObject<Element | null>;
-    /**
-     * Popover content.
-     */
-    readonly children: React.ReactNode;
-    /**
-     * Control Popover visibility.
-     */
-    readonly open: boolean;
-    /**
-     * Callback executed when the user wants to close/dismiss the Popover
-     */
-    readonly onRequestClose?: () => void;
-    /**
-     * Describes the preferred placement of the Popover.
-     * @default 'auto'
-     */
-    readonly preferredPlacement?: "top" | "bottom" | "left" | "right" | "auto";
-    /**
-     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
-     * **last resort**. Using this may result in unexpected side effects.
-     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
-     */
-    readonly UNSAFE_className?: {
-        container?: string;
-        dismissButtonContainer?: string;
-        arrow?: string;
-    };
-    /**
-     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
-     * **last resort**. Using this may result in unexpected side effects.
-     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
-     */
-    readonly UNSAFE_style?: {
-        container?: CSSProperties;
-        dismissButtonContainer?: CSSProperties;
-        arrow?: CSSProperties;
-    };
-}
+import { PopoverArrowProps, PopoverDismissButtonProps, PopoverProps } from "./Popover.types";
+import { PopoverProvider } from "./PopoverContext";
 export declare function Popover({ onRequestClose, children, attachTo, open, preferredPlacement, UNSAFE_className, UNSAFE_style, }: PopoverProps): JSX.Element;
+export declare namespace Popover {
+    var Provider: typeof PopoverProvider;
+    var Arrow: ({ UNSAFE_className, UNSAFE_style, }: PopoverArrowProps) => JSX.Element;
+    var DismissButton: (props: PopoverDismissButtonProps) => JSX.Element;
+}

package/dist/Popover/Popover.types.d.ts

@@ -0,0 +1,109 @@
+import { CSSProperties, PropsWithChildren } from "react";
+import { XOR } from "ts-xor";
+import { ButtonDismissProps } from "../ButtonDismiss";
+export interface PopoverProps {
+    /**
+     * Element the Popover will attach to and point at. A `useRef` must be attached to an html element
+     * and passed as an attachTo prop in order for the Popover to function properly
+     */
+    readonly attachTo: Element | React.RefObject<Element | null>;
+    /**
+     * Popover content.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Control Popover visibility.
+     */
+    readonly open: boolean;
+    /**
+     * Callback executed when the user wants to close/dismiss the Popover
+     */
+    readonly onRequestClose?: () => void;
+    /**
+     * Describes the preferred placement of the Popover.
+     * @default 'auto'
+     */
+    readonly preferredPlacement?: "top" | "bottom" | "left" | "right" | "auto";
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+        dismissButtonContainer?: string;
+        arrow?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+        dismissButtonContainer?: CSSProperties;
+        arrow?: CSSProperties;
+    };
+}
+export type PopoverProviderProps = PropsWithChildren<Pick<PopoverProps, "preferredPlacement" | "attachTo" | "open"> & {
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        container?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        container?: CSSProperties;
+    };
+}>;
+interface PopoverDismissButtonBaseProps {
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        dismissButtonContainer?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        dismissButtonContainer?: CSSProperties;
+    };
+}
+interface PopoverDismissButtonWithChildren extends PopoverDismissButtonBaseProps {
+    readonly children: React.ReactNode;
+}
+type PopoverDismissButtonWithoutChildren = Partial<ButtonDismissProps> & {
+    readonly children?: never;
+} & PopoverDismissButtonBaseProps;
+export type PopoverDismissButtonProps = XOR<PopoverDismissButtonWithChildren, PopoverDismissButtonWithoutChildren>;
+export interface PopoverArrowProps {
+    /**
+     * **Use at your own risk:** Custom class names for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_className?: {
+        arrow?: string;
+    };
+    /**
+     * **Use at your own risk:** Custom style for specific elements. This should only be used as a
+     * **last resort**. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     */
+    readonly UNSAFE_style?: {
+        arrow?: CSSProperties;
+    };
+}
+export {};

package/dist/Popover/PopoverContext.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from "react";
+import { PopoverProviderProps } from "./Popover.types";
+interface PopoverContextProps {
+    setArrowElement: (element: HTMLElement | null) => void;
+    popperStyles: {
+        [key: string]: CSSProperties;
+    };
+}
+export declare function usePopoverContext(): PopoverContextProps;
+export declare function PopoverProvider({ children, preferredPlacement, attachTo, open, UNSAFE_className, UNSAFE_style, }: PopoverProviderProps): JSX.Element | null;
+export {};

package/dist/Popover/index.cjs

@@ -1,19 +1,32 @@
 'use strict';
 
 var Popover = require('../Popover-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
-require('react-popper');
-require('../useRefocusOnActivator-cjs.js');
 require('classnames');
 require('react-dom');
+require('react-popper');
+require('../useRefocusOnActivator-cjs.js');
+require('../AtlantisPortalContent-cjs.js');
+require('../AtlantisThemeContext-cjs.js');
+require('@jobber/design');
+require('../_commonjsHelpers-cjs.js');
+require('../identity-cjs.js');
+require('../isTypedArray-cjs.js');
+require('../isObjectLike-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFor-cjs.js');
+require('../keysIn-cjs.js');
+require('../_isIterateeCall-cjs.js');
+require('../_setToString-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../tslib.es6-cjs.js');
 require('../Icon-cjs.js');
-require('@jobber/design');
 require('../Typography-cjs.js');
 
 
 
 exports.Popover = Popover.Popover;
+exports.usePopoverContext = Popover.usePopoverContext;
+exports.usePopoverStyles = Popover.usePopoverStyles;

package/dist/Popover/index.d.ts

@@ -1 +1,4 @@
 export { Popover } from "./Popover";
+export { usePopoverContext } from "./PopoverContext";
+export { usePopoverStyles } from "./usePopoverStyles";
+export type { PopoverProps, PopoverProviderProps, PopoverDismissButtonProps, PopoverArrowProps, } from "./Popover.types";

package/dist/Popover/index.mjs

@@ -1,13 +1,24 @@
-export { P as Popover } from '../Popover-es.js';
+export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from '../Popover-es.js';
+import '../tslib.es6-es.js';
 import 'react';
-import 'react-popper';
-import '../useRefocusOnActivator-es.js';
 import 'classnames';
 import 'react-dom';
+import 'react-popper';
+import '../useRefocusOnActivator-es.js';
+import '../AtlantisPortalContent-es.js';
+import '../AtlantisThemeContext-es.js';
+import '@jobber/design';
+import '../_commonjsHelpers-es.js';
+import '../identity-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFor-es.js';
+import '../keysIn-es.js';
+import '../_isIterateeCall-es.js';
+import '../_setToString-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../tslib.es6-es.js';
 import '../Icon-es.js';
-import '@jobber/design';
 import '../Typography-es.js';

package/dist/Popover/usePopover.d.ts

@@ -0,0 +1,13 @@
+import { PopoverProps } from "./Popover.types";
+export declare const usePopover: ({ preferredPlacement, attachTo, open, }: Pick<PopoverProps, "preferredPlacement" | "attachTo" | "open">) => {
+    setPopperElement: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null | undefined>>;
+    setArrowElement: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null | undefined>>;
+    popperStyles: {
+        [key: string]: import("react").CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+};

package/dist/Popover/usePopoverStyles.d.ts

@@ -0,0 +1,5 @@
+export declare const usePopoverStyles: () => {
+    container: string;
+    dismissButton: string;
+    arrow: string;
+};

package/dist/Popover-cjs.js

@@ -1,57 +1,112 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
-var reactPopper = require('react-popper');
-var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
+var reactPopper = require('react-popper');
+var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
+var AtlantisPortalContent = require('./AtlantisPortalContent-cjs.js');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
-var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
-
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className = {}, UNSAFE_style = {}, }) {
-    var _a, _b, _c;
+const usePopover = ({ preferredPlacement, attachTo, open, }) => {
     const [popperElement, setPopperElement] = React.useState();
     const [arrowElement, setArrowElement] = React.useState();
+    const modifiers = React.useMemo(() => {
+        return [
+            {
+                name: "arrow",
+                options: { element: arrowElement, padding: 10 },
+            },
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 10],
+                },
+            },
+            {
+                name: "flip",
+                options: {
+                    fallbackPlacements: ["auto"],
+                },
+            },
+        ];
+    }, [arrowElement]);
     const { styles: popperStyles, attributes } = reactPopper.usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
-        modifiers: buildModifiers(arrowElement),
+        modifiers,
         placement: preferredPlacement,
     });
     useRefocusOnActivator.useRefocusOnActivator_2(open);
-    const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
-    const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
-    const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
-        React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
-            React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
-        children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
-    return React.createElement(React.Fragment, null, open && ReactDOM.createPortal(popoverContent, document.body));
-}
-function buildModifiers(arrowElement) {
-    const modifiers = [
-        {
-            name: "arrow",
-            options: { element: arrowElement, padding: 10 },
-        },
-        {
-            name: "offset",
-            options: {
-                offset: [0, 10],
-            },
-        },
-        {
-            name: "flip",
-            options: {
-                fallbackPlacements: ["auto"],
-            },
-        },
-    ];
-    return modifiers;
-}
+    return { setPopperElement, setArrowElement, popperStyles, attributes };
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isHTMLElement(el) {
     return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) && el instanceof Element;
 }
 
+var styles = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
+
+const usePopoverStyles = () => {
+    return {
+        container: styles.popover,
+        dismissButton: styles.dismissButton,
+        arrow: styles.arrow,
+    };
+};
+
+const PopoverContext = React.createContext({
+    popperStyles: {},
+    setArrowElement: () => {
+        // noop
+    },
+});
+function usePopoverContext() {
+    return React.useContext(PopoverContext);
+}
+function PopoverProvider({ children, preferredPlacement, attachTo, open, UNSAFE_className, UNSAFE_style, }) {
+    const { setPopperElement, setArrowElement, popperStyles, attributes } = usePopover({
+        preferredPlacement,
+        attachTo,
+        open,
+    });
+    if (!open)
+        return null;
+    return (React.createElement(PopoverContext.Provider, { value: {
+            setArrowElement,
+            popperStyles,
+        } },
+        React.createElement(PopoverWrapper, { attributes: attributes, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, setPopperElement: setPopperElement }, children)));
+}
+function PopoverWrapper({ children, attributes, setPopperElement, UNSAFE_className, UNSAFE_style, }) {
+    const popoverStyles = usePopoverStyles();
+    const { popperStyles } = 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", Object.assign({ 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 }, attributes.popper, { "data-testid": "ATL-Popover-Container" }), children)));
+    return ReactDOM.createPortal(content, document.body);
+}
+
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement(Popover.Provider, { attachTo: attachTo, open: open, preferredPlacement: preferredPlacement, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style },
+        React.createElement(Popover.DismissButton, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, onClick: onRequestClose }),
+        children,
+        React.createElement(Popover.Arrow, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style })));
+}
+Popover.Provider = PopoverProvider;
+Popover.Arrow = function PopoverArrow({ UNSAFE_className, UNSAFE_style, }) {
+    const { setArrowElement, popperStyles } = usePopoverContext();
+    const popoverStyles = usePopoverStyles();
+    const classes = classnames(popoverStyles.arrow, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.arrow);
+    return (React.createElement("div", { ref: setArrowElement, className: classes, style: Object.assign(Object.assign({}, popperStyles.arrow), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.arrow), "data-testid": "ATL-Popover-Arrow" }));
+};
+Popover.DismissButton = function PopoverDismissButton(props) {
+    var _a;
+    const { UNSAFE_className, UNSAFE_style, children } = props, dismissButtonProps = tslib_es6.__rest(props, ["UNSAFE_className", "UNSAFE_style", "children"]);
+    const popoverStyles = usePopoverStyles();
+    const classes = classnames(popoverStyles.dismissButton, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.dismissButtonContainer);
+    return (React.createElement("div", { className: classes, style: (_a = UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.dismissButtonContainer) !== null && _a !== void 0 ? _a : {}, "data-testid": "ATL-Popover-Dismiss-Button-Container" }, children !== null && children !== void 0 ? children : (React.createElement(ButtonDismiss.ButtonDismiss, Object.assign({ ariaLabel: "Close dialog" }, dismissButtonProps)))));
+};
+
 exports.Popover = Popover;
+exports.usePopoverContext = usePopoverContext;
+exports.usePopoverStyles = usePopoverStyles;

package/dist/Popover-es.js

@@ -1,55 +1,108 @@
-import React__default, { useState } from 'react';
-import { usePopper } from 'react-popper';
-import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
+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 { usePopper } from 'react-popper';
+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';
 
-var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
-
-function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className = {}, UNSAFE_style = {}, }) {
-    var _a, _b, _c;
+const usePopover = ({ preferredPlacement, attachTo, open, }) => {
     const [popperElement, setPopperElement] = useState();
     const [arrowElement, setArrowElement] = useState();
+    const modifiers = useMemo(() => {
+        return [
+            {
+                name: "arrow",
+                options: { element: arrowElement, padding: 10 },
+            },
+            {
+                name: "offset",
+                options: {
+                    offset: [0, 10],
+                },
+            },
+            {
+                name: "flip",
+                options: {
+                    fallbackPlacements: ["auto"],
+                },
+            },
+        ];
+    }, [arrowElement]);
     const { styles: popperStyles, attributes } = usePopper(isHTMLElement(attachTo) ? attachTo : attachTo.current, popperElement, {
-        modifiers: buildModifiers(arrowElement),
+        modifiers,
         placement: preferredPlacement,
     });
     useRefocusOnActivator_2(open);
-    const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
-    const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
-    const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    const popoverContent = (React__default.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
-        React__default.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
-            React__default.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
-        children,
-        React__default.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
-    return React__default.createElement(React__default.Fragment, null, open && ReactDOM__default.createPortal(popoverContent, document.body));
-}
-function buildModifiers(arrowElement) {
-    const modifiers = [
-        {
-            name: "arrow",
-            options: { element: arrowElement, padding: 10 },
-        },
-        {
-            name: "offset",
-            options: {
-                offset: [0, 10],
-            },
-        },
-        {
-            name: "flip",
-            options: {
-                fallbackPlacements: ["auto"],
-            },
-        },
-    ];
-    return modifiers;
-}
+    return { setPopperElement, setArrowElement, popperStyles, attributes };
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isHTMLElement(el) {
     return (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) && el instanceof Element;
 }
 
-export { Popover as P };
+var styles = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
+
+const usePopoverStyles = () => {
+    return {
+        container: styles.popover,
+        dismissButton: styles.dismissButton,
+        arrow: styles.arrow,
+    };
+};
+
+const PopoverContext = createContext({
+    popperStyles: {},
+    setArrowElement: () => {
+        // noop
+    },
+});
+function usePopoverContext() {
+    return useContext(PopoverContext);
+}
+function PopoverProvider({ children, preferredPlacement, attachTo, open, UNSAFE_className, UNSAFE_style, }) {
+    const { setPopperElement, setArrowElement, popperStyles, attributes } = usePopover({
+        preferredPlacement,
+        attachTo,
+        open,
+    });
+    if (!open)
+        return null;
+    return (React__default.createElement(PopoverContext.Provider, { value: {
+            setArrowElement,
+            popperStyles,
+        } },
+        React__default.createElement(PopoverWrapper, { attributes: attributes, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, setPopperElement: setPopperElement }, children)));
+}
+function PopoverWrapper({ children, attributes, setPopperElement, UNSAFE_className, UNSAFE_style, }) {
+    const popoverStyles = usePopoverStyles();
+    const { popperStyles } = 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", Object.assign({ 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 }, attributes.popper, { "data-testid": "ATL-Popover-Container" }), children)));
+    return ReactDOM__default.createPortal(content, document.body);
+}
+
+function Popover({ onRequestClose, children, attachTo, open, preferredPlacement = "auto", UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement(Popover.Provider, { attachTo: attachTo, open: open, preferredPlacement: preferredPlacement, UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style },
+        React__default.createElement(Popover.DismissButton, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style, onClick: onRequestClose }),
+        children,
+        React__default.createElement(Popover.Arrow, { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style })));
+}
+Popover.Provider = PopoverProvider;
+Popover.Arrow = function PopoverArrow({ UNSAFE_className, UNSAFE_style, }) {
+    const { setArrowElement, popperStyles } = usePopoverContext();
+    const popoverStyles = usePopoverStyles();
+    const classes = classnames(popoverStyles.arrow, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.arrow);
+    return (React__default.createElement("div", { ref: setArrowElement, className: classes, style: Object.assign(Object.assign({}, popperStyles.arrow), UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.arrow), "data-testid": "ATL-Popover-Arrow" }));
+};
+Popover.DismissButton = function PopoverDismissButton(props) {
+    var _a;
+    const { UNSAFE_className, UNSAFE_style, children } = props, dismissButtonProps = __rest(props, ["UNSAFE_className", "UNSAFE_style", "children"]);
+    const popoverStyles = usePopoverStyles();
+    const classes = classnames(popoverStyles.dismissButton, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.dismissButtonContainer);
+    return (React__default.createElement("div", { className: classes, style: (_a = UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.dismissButtonContainer) !== null && _a !== void 0 ? _a : {}, "data-testid": "ATL-Popover-Dismiss-Button-Container" }, children !== null && children !== void 0 ? children : (React__default.createElement(ButtonDismiss, Object.assign({ ariaLabel: "Close dialog" }, dismissButtonProps)))));
+};
+
+export { Popover as P, usePopoverStyles as a, usePopoverContext as u };

package/dist/index.cjs

@@ -174,6 +174,7 @@ require('./useFormFieldFocus-cjs.js');
 require('filesize');
 require('./GridCell-cjs.js');
 require('axios');
+require('./AtlantisPortalContent-cjs.js');
 require('@jobber/formatters');
 require('react-dom/client');
 
@@ -279,6 +280,8 @@ exports.Modal = Modal.Modal;
 exports.MultiSelect = MultiSelect.MultiSelect;
 exports.Page = Page.Page;
 exports.Popover = Popover.Popover;
+exports.usePopoverContext = Popover.usePopoverContext;
+exports.usePopoverStyles = Popover.usePopoverStyles;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RadioOption = RadioGroup.RadioOption;

package/dist/index.mjs

@@ -72,7 +72,7 @@ export { M as Menu } from './Menu-es.js';
 export { M as Modal } from './Modal-es.js';
 export { M as MultiSelect } from './MultiSelect-es.js';
 export { P as Page } from './Page-es.js';
-export { P as Popover } from './Popover-es.js';
+export { P as Popover, u as usePopoverContext, a as usePopoverStyles } from './Popover-es.js';
 export { P as ProgressBar } from './ProgressBar-es.js';
 export { R as RadioGroup, a as RadioOption } from './RadioGroup-es.js';
 export { R as RecurringSelect } from './RecurringSelect-es.js';
@@ -172,5 +172,6 @@ import './useFormFieldFocus-es.js';
 import 'filesize';
 import './GridCell-es.js';
 import 'axios';
+import './AtlantisPortalContent-es.js';
 import '@jobber/formatters';
 import 'react-dom/client';

package/dist/useScrollToActive-cjs.js

@@ -290,6 +290,25 @@ function createAnnouncedElement() {
     return el;
 }
 
+/**
+ * Recursively finds a focusable element (div or button) in the specified direction
+ */
+function findFocusableElement(element, direction) {
+    if (!element)
+        return null;
+    const nextElement = direction === "previous"
+        ? element.previousElementSibling
+        : element.nextElementSibling;
+    if (!nextElement)
+        return null;
+    // Check if element is a div or button
+    if (nextElement instanceof HTMLElement &&
+        (nextElement.tagName === "DIV" || nextElement.tagName === "BUTTON")) {
+        return nextElement;
+    }
+    // Recursively continue search
+    return findFocusableElement(nextElement, direction);
+}
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
     const ref = React.useRef(null);
     const chipOptions = children.map(chip => chip.props);
@@ -316,15 +335,17 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
             if (isInputAndHasValue)
                 return;
-            const nextElementToFocus = target.nextElementSibling;
-            const prevElementToFocus = target.previousElementSibling;
-            if (event.key === "ArrowLeft" &&
-                prevElementToFocus instanceof HTMLElement) {
-                prevElementToFocus.focus();
+            if (event.key === "ArrowLeft") {
+                const prevFocusable = findFocusableElement(target, "previous");
+                if (prevFocusable) {
+                    prevFocusable.focus();
+                }
             }
-            if (event.key === "ArrowRight" &&
-                nextElementToFocus instanceof HTMLElement) {
-                nextElementToFocus.focus();
+            if (event.key === "ArrowRight") {
+                const nextFocusable = findFocusableElement(target, "next");
+                if (nextFocusable) {
+                    nextFocusable.focus();
+                }
             }
         },
         handleChipKeyDown: (value) => {
@@ -332,13 +353,13 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
                 if (event.key === "Backspace" || event.key === "Delete") {
                     const target = event.target;
                     if (target instanceof HTMLElement) {
-                        const prevElement = target.previousElementSibling;
-                        const nextElement = target.nextElementSibling;
-                        if (prevElement instanceof HTMLElement) {
-                            prevElement.focus();
+                        const prevFocusable = findFocusableElement(target, "previous");
+                        const nextFocusable = findFocusableElement(target, "next");
+                        if (prevFocusable) {
+                            prevFocusable.focus();
                         }
-                        else if (nextElement instanceof HTMLElement) {
-                            nextElement.focus();
+                        else if (nextFocusable) {
+                            nextFocusable.focus();
                         }
                     }
                     actions.handleChipRemove(value)();

package/dist/useScrollToActive-es.js

@@ -288,6 +288,25 @@ function createAnnouncedElement() {
     return el;
 }
 
+/**
+ * Recursively finds a focusable element (div or button) in the specified direction
+ */
+function findFocusableElement(element, direction) {
+    if (!element)
+        return null;
+    const nextElement = direction === "previous"
+        ? element.previousElementSibling
+        : element.nextElementSibling;
+    if (!nextElement)
+        return null;
+    // Check if element is a div or button
+    if (nextElement instanceof HTMLElement &&
+        (nextElement.tagName === "DIV" || nextElement.tagName === "BUTTON")) {
+        return nextElement;
+    }
+    // Recursively continue search
+    return findFocusableElement(nextElement, direction);
+}
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
     const ref = useRef(null);
     const chipOptions = children.map(chip => chip.props);
@@ -314,15 +333,17 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
             if (isInputAndHasValue)
                 return;
-            const nextElementToFocus = target.nextElementSibling;
-            const prevElementToFocus = target.previousElementSibling;
-            if (event.key === "ArrowLeft" &&
-                prevElementToFocus instanceof HTMLElement) {
-                prevElementToFocus.focus();
+            if (event.key === "ArrowLeft") {
+                const prevFocusable = findFocusableElement(target, "previous");
+                if (prevFocusable) {
+                    prevFocusable.focus();
+                }
             }
-            if (event.key === "ArrowRight" &&
-                nextElementToFocus instanceof HTMLElement) {
-                nextElementToFocus.focus();
+            if (event.key === "ArrowRight") {
+                const nextFocusable = findFocusableElement(target, "next");
+                if (nextFocusable) {
+                    nextFocusable.focus();
+                }
             }
         },
         handleChipKeyDown: (value) => {
@@ -330,13 +351,13 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
                 if (event.key === "Backspace" || event.key === "Delete") {
                     const target = event.target;
                     if (target instanceof HTMLElement) {
-                        const prevElement = target.previousElementSibling;
-                        const nextElement = target.nextElementSibling;
-                        if (prevElement instanceof HTMLElement) {
-                            prevElement.focus();
+                        const prevFocusable = findFocusableElement(target, "previous");
+                        const nextFocusable = findFocusableElement(target, "next");
+                        if (prevFocusable) {
+                            prevFocusable.focus();
                         }
-                        else if (nextElement instanceof HTMLElement) {
-                            nextElement.focus();
+                        else if (nextFocusable) {
+                            nextFocusable.focus();
                         }
                     }
                     actions.handleChipRemove(value)();

package/dist/utils/meta/meta.json

@@ -113,6 +113,9 @@
     "Option",
     "Page",
     "Popover",
+    "Popover.Arrow",
+    "Popover.DismissButton",
+    "Popover.Provider",
     "ProgressBar",
     "RadioGroup",
     "RadioOption",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.30.0",
+  "version": "6.31.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "b3f75928b5f78ae0991ee6660e1759acfc7065cc"
+  "gitHead": "fc7b94413203d2412defd168c6e765e3fd114f8a"
 }