@jobber/components 6.111.7 → 6.112.1

package/dist/DatePicker/useFocusOnSelectedDate.d.ts

@@ -1,4 +1,4 @@
-export declare function useFocusOnSelectedDate(): {
+export declare function useFocusOnSelectedDate(portalContainerId?: string): {
     ref: import("react").RefObject<HTMLDivElement | null>;
-    focusOnSelectedDate: () => void;
+    focusOnSelectedDate: () => boolean;
 };

package/dist/DatePicker-cjs.js

@@ -12652,7 +12652,7 @@ var DatePicker$1 = /** @class */ (function (_super) {
 var PRESELECT_CHANGE_VIA_INPUT = "input";
 var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 
-var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
+var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","portalContainer":"LDxKi0E-1rg-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
 
 function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React.createElement("div", { className: styles.header },
@@ -12691,25 +12691,25 @@ function InternalActivator(props, ref) {
     }
 }
 
-function useFocusOnSelectedDate() {
+function useFocusOnSelectedDate(portalContainerId) {
     const ref = React.useRef(null);
-    function focusOnSelectedDate() {
-        var _a;
-        const selectedDateClass = ".react-datepicker__day--selected";
-        const selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
-        if (selectedDate instanceof HTMLDivElement) {
-            selectedDate.focus();
+    // Moves focus to the selected/pre-selected day in the calendar ([tabindex="0"]).
+    const focusOnSelectedDate = React.useCallback(() => {
+        const portalElement = portalContainerId
+            ? document.getElementById(portalContainerId)
+            : null;
+        const searchRoot = portalElement !== null && portalElement !== void 0 ? portalElement : ref.current;
+        const day = searchRoot === null || searchRoot === void 0 ? void 0 : searchRoot.querySelector('[tabindex="0"]');
+        if (day instanceof HTMLElement) {
+            day.focus();
+            return true;
         }
-    }
+        return false;
+    }, [portalContainerId]);
     return { ref, focusOnSelectedDate };
 }
 
-/*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
-    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
-    const [open, setOpen] = React.useState(false);
-    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
-    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+function getDatePickerClassNames(inline, open, fullWidth) {
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -12724,44 +12724,58 @@ function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline,
     const datePickerClassNames = classnames(styles.datePicker, {
         [styles.inline]: inline,
     });
-    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
-    if (smartAutofocus) {
-        jobberHooks.useRefocusOnActivator(open);
-        React.useEffect(focusOnSelectedDate, [open]);
-    }
-    return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React.createElement(DatePicker$1, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+    return { wrapperClassName, datePickerClassNames };
+}
+function useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate) {
+    const handleChange = React.useCallback((value) => {
+        onChange(value);
+    }, [onChange]);
+    const handleCalendarOpen = React.useCallback(() => {
+        setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+        if (smartAutofocus) {
+            // The portal DOM may not be painted yet, so defer to the next frame
+            requestAnimationFrame(() => {
+                focusOnSelectedDate === null || focusOnSelectedDate === void 0 ? void 0 : focusOnSelectedDate();
+            });
+        }
+    }, [setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate]);
+    const handleCalendarClose = React.useCallback(() => {
+        setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    }, [setOpen, onOpenChange]);
+    return { handleChange, handleCalendarOpen, handleCalendarClose };
+}
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+    const [open, setOpen] = React.useState(false);
+    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = AtlantisContext.useAtlantisContext();
+    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+    const renderInsidePortal = !inline;
+    const uniquePortalId = React.useId();
+    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate(uniquePortalId);
+    const { wrapperClassName, datePickerClassNames } = getDatePickerClassNames(inline !== null && inline !== void 0 ? inline : false, open, fullWidth !== null && fullWidth !== void 0 ? fullWidth : false);
+    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, renderInsidePortal);
+    const { handleChange, handleCalendarOpen, handleCalendarClose } = useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus !== null && smartAutofocus !== void 0 ? smartAutofocus : true, focusOnSelectedDate);
+    jobberHooks.useRefocusOnActivator(smartAutofocus ? open : false);
+    return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated", onKeyDown: event => {
+            // Stop Escape from bubbling to parent floating elements (e.g. Modal).
+            if (event.key === "Escape" && open) {
+                event.stopPropagation();
+            }
+        } },
+        React.createElement(DatePicker$1, Object.assign({ ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" })));
-    /**
-     * The onChange callback on ReactDatePicker returns a Date and an Event, but
-     * the onChange in our interface only provides the Date. Simplifying the code
-     * by removing this function and passing it directly to the underlying
-     * component breaks tests both here and downstream (i.e. the pattern
-     * `expect(onChange).toHaveBeenCalledWith(date)` is commonly used and would
-     * fail).
-     */
-    function handleChange(value) {
-        // TODO: Ticket created to update all DatePicker and InputDate usages to accept Date | null
-        onChange(value);
-    }
-    function handleCalendarOpen() {
-        setOpen(true);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
-    }
-    function handleCalendarClose() {
-        setOpen(false);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
-    }
+            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" }, (renderInsidePortal && { portalId: uniquePortalId }))),
+        renderInsidePortal && React.createElement(DatePickerPortal, { portalId: uniquePortalId })));
 }
-function useEscapeKeyToCloseDatePicker(open, ref) {
+function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortalled) {
     const pickerRef = React.useRef(null);
-    const escFunction = (event) => {
+    const handleKeyDown = (event) => {
         var _a;
         if (event.key === "Escape" && open) {
             // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
@@ -12769,18 +12783,38 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
             (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
             event.stopPropagation();
         }
+        if (event.key === "Tab" && open && isPortalled) {
+            // When portalled, Tab from the activator doesn't reach the calendar.
+            // Intercept Tab to move focus there (mainly when smartAutofocus is false
+            // and focus stayed in the input).
+            const focused = focusOnSelectedDate();
+            if (focused) {
+                event.preventDefault();
+            }
+        }
     };
     React.useEffect(() => {
         var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleKeyDown);
         return () => {
             var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
         };
-    }, [open, ref, pickerRef]);
+    }, [open, ref, pickerRef, isPortalled]);
     return {
         pickerRef,
     };
 }
+function DatePickerPortal({ portalId }) {
+    const nodeId = floatingUi_react.useFloatingNodeId();
+    const parentNodeId = floatingUi_react.useFloatingParentNodeId();
+    const portalDiv = React.createElement("div", { id: portalId, className: styles.portalContainer });
+    if (parentNodeId) {
+        return (React.createElement(floatingUi_react.FloatingTree, null,
+            React.createElement(floatingUi_react.FloatingNode, { id: nodeId },
+                React.createElement(floatingUi_react.FloatingPortal, null, portalDiv))));
+    }
+    return React.createElement(floatingUi_react.FloatingPortal, null, portalDiv);
+}
 
 exports.DatePicker = DatePicker;

package/dist/DatePicker-es.js

@@ -1,7 +1,7 @@
-import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
+import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState, useId } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, w as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, w as FloatingArrow, j as useFloatingNodeId, i as useFloatingParentNodeId, k as FloatingTree, m as FloatingNode, F as FloatingPortal } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { useRefocusOnActivator } from '@jobber/hooks';
 import { T as Typography } from './Typography-es.js';
@@ -12650,7 +12650,7 @@ var DatePicker$1 = /** @class */ (function (_super) {
 var PRESELECT_CHANGE_VIA_INPUT = "input";
 var PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
 
-var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
+var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","portalContainer":"LDxKi0E-1rg-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
 
 function DatePickerCustomHeader({ monthDate, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) {
     return (React__default.createElement("div", { className: styles.header },
@@ -12689,25 +12689,25 @@ function InternalActivator(props, ref) {
     }
 }
 
-function useFocusOnSelectedDate() {
+function useFocusOnSelectedDate(portalContainerId) {
     const ref = useRef(null);
-    function focusOnSelectedDate() {
-        var _a;
-        const selectedDateClass = ".react-datepicker__day--selected";
-        const selectedDate = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector(selectedDateClass);
-        if (selectedDate instanceof HTMLDivElement) {
-            selectedDate.focus();
+    // Moves focus to the selected/pre-selected day in the calendar ([tabindex="0"]).
+    const focusOnSelectedDate = useCallback(() => {
+        const portalElement = portalContainerId
+            ? document.getElementById(portalContainerId)
+            : null;
+        const searchRoot = portalElement !== null && portalElement !== void 0 ? portalElement : ref.current;
+        const day = searchRoot === null || searchRoot === void 0 ? void 0 : searchRoot.querySelector('[tabindex="0"]');
+        if (day instanceof HTMLElement) {
+            day.focus();
+            return true;
         }
-    }
+        return false;
+    }, [portalContainerId]);
     return { ref, focusOnSelectedDate };
 }
 
-/*eslint max-statements: ["error", 14]*/
-function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
-    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate();
-    const [open, setOpen] = useState(false);
-    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
-    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+function getDatePickerClassNames(inline, open, fullWidth) {
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -12722,44 +12722,58 @@ function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline,
     const datePickerClassNames = classnames(styles.datePicker, {
         [styles.inline]: inline,
     });
-    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref);
-    if (smartAutofocus) {
-        useRefocusOnActivator(open);
-        useEffect(focusOnSelectedDate, [open]);
-    }
-    return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React__default.createElement(DatePicker$1, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+    return { wrapperClassName, datePickerClassNames };
+}
+function useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate) {
+    const handleChange = useCallback((value) => {
+        onChange(value);
+    }, [onChange]);
+    const handleCalendarOpen = useCallback(() => {
+        setOpen(true);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+        if (smartAutofocus) {
+            // The portal DOM may not be painted yet, so defer to the next frame
+            requestAnimationFrame(() => {
+                focusOnSelectedDate === null || focusOnSelectedDate === void 0 ? void 0 : focusOnSelectedDate();
+            });
+        }
+    }, [setOpen, onOpenChange, smartAutofocus, focusOnSelectedDate]);
+    const handleCalendarClose = useCallback(() => {
+        setOpen(false);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    }, [setOpen, onOpenChange]);
+    return { handleChange, handleCalendarOpen, handleCalendarClose };
+}
+function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline, selected, readonly = false, disabled = false, fullWidth = false, smartAutofocus = true, maxDate, minDate, highlightDates, firstDayOfWeek, }) {
+    const [open, setOpen] = useState(false);
+    const { dateFormat, firstDayOfWeek: contextFirstDayOfWeek } = useAtlantisContext();
+    const effectiveFirstDayOfWeek = firstDayOfWeek !== null && firstDayOfWeek !== void 0 ? firstDayOfWeek : contextFirstDayOfWeek;
+    const renderInsidePortal = !inline;
+    const uniquePortalId = useId();
+    const { ref, focusOnSelectedDate } = useFocusOnSelectedDate(uniquePortalId);
+    const { wrapperClassName, datePickerClassNames } = getDatePickerClassNames(inline !== null && inline !== void 0 ? inline : false, open, fullWidth !== null && fullWidth !== void 0 ? fullWidth : false);
+    const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, renderInsidePortal);
+    const { handleChange, handleCalendarOpen, handleCalendarClose } = useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus !== null && smartAutofocus !== void 0 ? smartAutofocus : true, focusOnSelectedDate);
+    useRefocusOnActivator(smartAutofocus ? open : false);
+    return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated", onKeyDown: event => {
+            // Stop Escape from bubbling to parent floating elements (e.g. Modal).
+            if (event.key === "Escape" && open) {
+                event.stopPropagation();
+            }
+        } },
+        React__default.createElement(DatePicker$1, Object.assign({ ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" })));
-    /**
-     * The onChange callback on ReactDatePicker returns a Date and an Event, but
-     * the onChange in our interface only provides the Date. Simplifying the code
-     * by removing this function and passing it directly to the underlying
-     * component breaks tests both here and downstream (i.e. the pattern
-     * `expect(onChange).toHaveBeenCalledWith(date)` is commonly used and would
-     * fail).
-     */
-    function handleChange(value) {
-        // TODO: Ticket created to update all DatePicker and InputDate usages to accept Date | null
-        onChange(value);
-    }
-    function handleCalendarOpen() {
-        setOpen(true);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
-    }
-    function handleCalendarClose() {
-        setOpen(false);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
-    }
+            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" }, (renderInsidePortal && { portalId: uniquePortalId }))),
+        renderInsidePortal && React__default.createElement(DatePickerPortal, { portalId: uniquePortalId })));
 }
-function useEscapeKeyToCloseDatePicker(open, ref) {
+function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortalled) {
     const pickerRef = useRef(null);
-    const escFunction = (event) => {
+    const handleKeyDown = (event) => {
         var _a;
         if (event.key === "Escape" && open) {
             // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
@@ -12767,18 +12781,38 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
             (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
             event.stopPropagation();
         }
+        if (event.key === "Tab" && open && isPortalled) {
+            // When portalled, Tab from the activator doesn't reach the calendar.
+            // Intercept Tab to move focus there (mainly when smartAutofocus is false
+            // and focus stayed in the input).
+            const focused = focusOnSelectedDate();
+            if (focused) {
+                event.preventDefault();
+            }
+        }
     };
     useEffect(() => {
         var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleKeyDown);
         return () => {
             var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
         };
-    }, [open, ref, pickerRef]);
+    }, [open, ref, pickerRef, isPortalled]);
     return {
         pickerRef,
     };
 }
+function DatePickerPortal({ portalId }) {
+    const nodeId = useFloatingNodeId();
+    const parentNodeId = useFloatingParentNodeId();
+    const portalDiv = React__default.createElement("div", { id: portalId, className: styles.portalContainer });
+    if (parentNodeId) {
+        return (React__default.createElement(FloatingTree, null,
+            React__default.createElement(FloatingNode, { id: nodeId },
+                React__default.createElement(FloatingPortal, null, portalDiv))));
+    }
+    return React__default.createElement(FloatingPortal, null, portalDiv);
+}
 
 export { DatePicker as D };

package/dist/Menu/Menu.types.d.ts

@@ -168,7 +168,7 @@ export interface MenuItemIconComposableProps extends IconProps {
 export interface MenuContentComposableProps extends UnsafeProps {
     readonly children: ReactNode;
 }
-export interface MenuTriggerComposableProps {
+export interface MenuTriggerComposableProps extends UnsafeProps {
     /**
      * Accessible name for the trigger.
      */

package/dist/Menu-cjs.js

@@ -295,9 +295,10 @@ function getDerivedAnimation(open, animation) {
     // so the Popover can be removed from the DOM once exit completes.
     return animation === "unmounted" ? "unmounted" : "hidden";
 }
-const MenuTriggerComposable = React.forwardRef(function MenuTriggerComposable({ ariaLabel, children }, ref) {
+const MenuTriggerComposable = React.forwardRef(function MenuTriggerComposable({ ariaLabel, children, UNSAFE_style, UNSAFE_className }, ref) {
+    const className = classnames(styles.triggerWrapper, UNSAFE_className);
     return (React.createElement($3b117e43dc0ca95d$export$27c701ed9e449e99, { "aria-label": ariaLabel },
-        React.createElement("div", { role: "button", className: styles.triggerWrapper, ref: ref }, children)));
+        React.createElement("div", { role: "button", className: className, ref: ref, style: UNSAFE_style }, children)));
 });
 function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }) {
     const { state: animation, setState } = useMenuAnimation();

package/dist/Menu-es.js

@@ -293,9 +293,10 @@ function getDerivedAnimation(open, animation) {
     // so the Popover can be removed from the DOM once exit completes.
     return animation === "unmounted" ? "unmounted" : "hidden";
 }
-const MenuTriggerComposable = React__default.forwardRef(function MenuTriggerComposable({ ariaLabel, children }, ref) {
+const MenuTriggerComposable = React__default.forwardRef(function MenuTriggerComposable({ ariaLabel, children, UNSAFE_style, UNSAFE_className }, ref) {
+    const className = classnames(styles.triggerWrapper, UNSAFE_className);
     return (React__default.createElement($3b117e43dc0ca95d$export$27c701ed9e449e99, { "aria-label": ariaLabel },
-        React__default.createElement("div", { role: "button", className: styles.triggerWrapper, ref: ref }, children)));
+        React__default.createElement("div", { role: "button", className: className, ref: ref, style: UNSAFE_style }, children)));
 });
 function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }) {
     const { state: animation, setState } = useMenuAnimation();

package/dist/styles.css

@@ -7383,9 +7383,12 @@ h2.react-datepicker__current-month {
   width: 100%;
   max-width: 100%;
 }
-.OmFI-Bfdzgw- .react-datepicker-popper {
-  z-index: 6;
-  z-index: var(--elevation-datepicker);
+.LDxKi0E-1rg- {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
 }
 .Ma55F5Y-XhE- .react-datepicker__header {
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.111.7",
+  "version": "6.112.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "cca677d99a6152517fe9f4c265af04a219113966"
+  "gitHead": "6a70e6fdb7ebd0925285306df14b17ba21d78679"
 }