@jobber/components 6.114.0 → 6.114.1

package/dist/DatePicker/useFocusOnSelectedDate.d.ts

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

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-","portalContainer":"LDxKi0E-1rg-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
+var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","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(portalContainerId) {
+function useFocusOnSelectedDate() {
     const ref = React.useRef(null);
-    // 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;
+    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();
         }
-        return false;
-    }, [portalContainerId]);
+    }
     return { ref, focusOnSelectedDate };
 }
 
-function getDatePickerClassNames(inline, open, fullWidth) {
+/*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;
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -12724,58 +12724,44 @@ function getDatePickerClassNames(inline, open, fullWidth) {
     const datePickerClassNames = classnames(styles.datePicker, {
         [styles.inline]: inline,
     });
-    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: [
+    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: [
                 dateFormat,
                 "P",
                 "PP",
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" }, (renderInsidePortal && { portalId: uniquePortalId }))),
-        renderInsidePortal && React.createElement(DatePickerPortal, { portalId: uniquePortalId })));
+            ], 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);
+    }
 }
-function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortalled) {
+function useEscapeKeyToCloseDatePicker(open, ref) {
     const pickerRef = React.useRef(null);
-    const handleKeyDown = (event) => {
+    const escFunction = (event) => {
         var _a;
         if (event.key === "Escape" && open) {
             // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
@@ -12783,38 +12769,18 @@ function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortall
             (_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", handleKeyDown);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
         return () => {
             var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
         };
-    }, [open, ref, pickerRef, isPortalled]);
+    }, [open, ref, pickerRef]);
     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, useId } from 'react';
+import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } 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, j as useFloatingNodeId, i as useFloatingParentNodeId, k as FloatingTree, m as FloatingNode, F as FloatingPortal } 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 } 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-","portalContainer":"LDxKi0E-1rg-","header":"Epg-Ub8Dn9A-","month":"Wx3NP8La95k-","spinning":"o0JLwNATy-M-"};
+var styles = {"datePickerWrapper":"OmFI-Bfdzgw-","fullWidth":"HWDFy10kcYA-","datePicker":"Ma55F5Y-XhE-","inline":"_58kEbTu-IAA-","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(portalContainerId) {
+function useFocusOnSelectedDate() {
     const ref = useRef(null);
-    // 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;
+    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();
         }
-        return false;
-    }, [portalContainerId]);
+    }
     return { ref, focusOnSelectedDate };
 }
 
-function getDatePickerClassNames(inline, open, fullWidth) {
+/*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;
     const wrapperClassName = classnames(styles.datePickerWrapper, {
         // react-datepicker uses this class name to not close the date picker when
         // the activator is clicked
@@ -12722,58 +12722,44 @@ function getDatePickerClassNames(inline, open, fullWidth) {
     const datePickerClassNames = classnames(styles.datePicker, {
         [styles.inline]: inline,
     });
-    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: [
+    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: [
                 dateFormat,
                 "P",
                 "PP",
                 "PPP",
                 "MMM dd yyyy",
                 "MMMM dd yyyy",
-            ], highlightDates: highlightDates, onMonthChange: onMonthChange, calendarStartDay: effectiveFirstDayOfWeek, popperPlacement: "bottom-start" }, (renderInsidePortal && { portalId: uniquePortalId }))),
-        renderInsidePortal && React__default.createElement(DatePickerPortal, { portalId: uniquePortalId })));
+            ], 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);
+    }
 }
-function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortalled) {
+function useEscapeKeyToCloseDatePicker(open, ref) {
     const pickerRef = useRef(null);
-    const handleKeyDown = (event) => {
+    const escFunction = (event) => {
         var _a;
         if (event.key === "Escape" && open) {
             // Close the picker ourselves and prevent propagation so that ESC presses with the picker open
@@ -12781,38 +12767,18 @@ function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortall
             (_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", handleKeyDown);
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", escFunction);
         return () => {
             var _a;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleKeyDown);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", escFunction);
         };
-    }, [open, ref, pickerRef, isPortalled]);
+    }, [open, ref, pickerRef]);
     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/styles.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.114.0",
+  "version": "6.114.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "fa776129b22e49b376813fafbbfdfe3d48ea88e4"
+  "gitHead": "8e79d0138c20e8e2b0eb8839296cd85cb9c8e403"
 }