@jobber/components 6.113.1 → 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/Gallery/index.cjs

@@ -8,6 +8,8 @@ require('../LightBox-cjs.js');
 require('framer-motion');
 require('react-dom');
 require('@jobber/hooks');
+require('../noop-cjs.js');
+require('../_commonjsHelpers-cjs.js');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');
@@ -17,7 +19,6 @@ require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Heading-cjs.js');
 require('../AtlantisThemeContext-cjs.js');
-require('../_commonjsHelpers-cjs.js');
 require('../identity-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
@@ -34,7 +35,6 @@ require('../Content-cjs.js');
 require('../ProgressBar-cjs.js');
 require('../ConfirmationModal-cjs.js');
 require('../Modal/index.cjs');
-require('../noop-cjs.js');
 require('../floating-ui.react-cjs.js');
 require('react/jsx-runtime');
 require('../AtlantisPortalContent-cjs.js');

package/dist/Gallery/index.mjs

@@ -6,6 +6,8 @@ import '../LightBox-es.js';
 import 'framer-motion';
 import 'react-dom';
 import '@jobber/hooks';
+import '../noop-es.js';
+import '../_commonjsHelpers-es.js';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';
@@ -15,7 +17,6 @@ import '../Typography-es.js';
 import '../Text-es.js';
 import '../Heading-es.js';
 import '../AtlantisThemeContext-es.js';
-import '../_commonjsHelpers-es.js';
 import '../identity-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
@@ -32,7 +33,6 @@ import '../Content-es.js';
 import '../ProgressBar-es.js';
 import '../ConfirmationModal-es.js';
 import '../Modal/index.mjs';
-import '../noop-es.js';
 import '../floating-ui.react-es.js';
 import 'react/jsx-runtime';
 import '../AtlantisPortalContent-es.js';

package/dist/LightBox/LightBox.constants.d.ts

@@ -0,0 +1,22 @@
+import type { RefObject } from "react";
+export declare const BUTTON_DEBOUNCE_DELAY = 250;
+export declare const MOVEMENT_DEBOUNCE_DELAY = 1000;
+export declare const swipeConfidenceThreshold = 10000;
+export declare const swipePower: (offset: number, velocity: number) => number;
+export declare const slideVariants: {
+    enter: (directionRef: RefObject<number>) => {
+        x: string;
+    };
+    center: {
+        x: number;
+    };
+    exit: (directionRef: RefObject<number>) => {
+        x: string;
+    };
+};
+export declare const imageTransition: {
+    x: {
+        duration: number;
+        ease: number[];
+    };
+};

package/dist/LightBox/LightBox.d.ts

@@ -1,56 +1,120 @@
-import type { CSSProperties } from "react";
 import React from "react";
-interface PresentedImage {
-    title?: string;
-    caption?: string;
-    alt?: string;
-    url: string;
+import type { LightBoxNavigationProps, LightBoxProps } from "./LightBox.types";
+import { LightBoxProvider } from "./LightBoxContext";
+export declare function LightBoxContent(): React.JSX.Element;
+/**
+ * Blurred, desaturated copy of the current image rendered as a full-bleed
+ * background behind the lightbox. Pass `className` to apply additional styles.
+ */
+declare function LightBoxBackground({ className }: {
+    readonly className?: string;
+}): React.JSX.Element;
+/**
+ * Semi-transparent blur backdrop. Clicking it calls `onRequestClose`.
+ * Pass `className` to apply additional styles.
+ */
+declare function LightBoxOverlay({ className }: {
+    readonly className?: string;
+}): React.JSX.Element;
+/**
+ * Top bar showing the current image counter (`1/3`) and a close button.
+ * Styled for dark backgrounds.
+ */
+declare function LightBoxToolbar(): React.JSX.Element;
+/**
+ * The animated hero image with swipe-to-navigate and slide animation.
+ *
+ * Pass `className` to add styles to the image wrapper. Supports
+ * swipe-to-navigate (drag). Keyboard arrow navigation is handled by
+ * `LightBox.Provider`.
+ *
+ * @example
+ * ```tsx
+ * <LightBox.Slides className={styles.imageArea} />
+ * <LightBox.Navigation
+ *   prevButtonClassName={styles.prev}
+ *   nextButtonClassName={styles.next}
+ * />
+ * ```
+ */
+declare function LightBoxSlides({ className }: {
+    readonly className?: string;
+}): React.JSX.Element;
+/**
+ * Previous and next navigation buttons. Returns `null` when the image set
+ * has only one image.
+ *
+ * Use `prevButtonClassName` and `nextButtonClassName` to override the styles
+ * on each button's wrapper for custom layouts.
+ *
+ * @example
+ * ```tsx
+ * <LightBox.Navigation
+ *   prevButtonClassName={styles.prev}
+ *   nextButtonClassName={styles.next}
+ * />
+ * ```
+ */
+declare function LightBoxNavigation({ prevButtonClassName, nextButtonClassName, }: LightBoxNavigationProps): React.JSX.Element | null;
+/**
+ * Title and caption text for the current image. Only renders when the current
+ * image has a `title` or `caption`. Styled for dark backgrounds.
+ */
+declare function LightBoxCaption(): React.JSX.Element | null;
+/**
+ * Scrollable thumbnail strip. Only renders when there are two or more images.
+ */
+declare function LightBoxThumbnails(): React.JSX.Element | null;
+/**
+ * LightBox displays images in a fullscreen overlay.
+ *
+ * **Self-contained (legacy) usage:**
+ * ```tsx
+ * <LightBox
+ *   open={isOpen}
+ *   images={images}
+ *   imageIndex={imageIndex}
+ *   onRequestClose={({ lastPosition }) => { setIsOpen(false); }}
+ * />
+ * ```
+ *
+ * **Full composable (fullscreen) usage:**
+ * ```tsx
+ * <LightBox.Provider open={isOpen} images={images} onRequestClose={onClose}>
+ *   <LightBox.Content />
+ * </LightBox.Provider>
+ * ```
+ *
+ * **Inline gallery usage (no overlay, no close):**
+ * ```tsx
+ * <LightBox.Provider
+ *   open={true}
+ *   images={images}
+ *   imageIndex={activeIndex}
+ *   onImageChange={onImageChange}
+ * >
+ *   <div className={styles.lightboxWrapper} onMouseMove={handleMouseMove}>
+ *     <LightBox.Background className={styles.backgroundImage} />
+ *     <LightBox.Overlay className={styles.blurOverlay} />
+ *     <LightBox.Slides className={styles.imageArea} />
+ *     <LightBox.Navigation
+ *       prevButtonClassName={styles.prev}
+ *       nextButtonClassName={styles.next}
+ *     />
+ *   </div>
+ * </LightBox.Provider>
+ * ```
+ */
+declare function LightBox(props: LightBoxProps): React.JSX.Element;
+declare namespace LightBox {
+    var Provider: typeof LightBoxProvider;
+    var Content: typeof LightBoxContent;
+    var Background: typeof LightBoxBackground;
+    var Overlay: typeof LightBoxOverlay;
+    var Toolbar: typeof LightBoxToolbar;
+    var Slides: typeof LightBoxSlides;
+    var Navigation: typeof LightBoxNavigation;
+    var Caption: typeof LightBoxCaption;
+    var Thumbnails: typeof LightBoxThumbnails;
 }
-interface RequestCloseOptions {
-    lastPosition: number;
-}
-interface LightBoxProps {
-    /**
-     * Specify if the Lightbox is open or closed.
-     */
-    readonly open: boolean;
-    /**
-     * Images is an array of objects defining a LightBox image. This object consists of
-     * `title`, `caption`, `alt` and `url`. `title`, `alt` and `caption` are optional, `url` is
-     * required, for each image.
-     */
-    readonly images: PresentedImage[];
-    /**
-     * Use this to specify which image in `images` to initialize the lightbox with.
-     * This is useful when you have a collection of thumbnails as you only need one
-     * collection of image urls, order doesn't matter.
-     */
-    readonly imageIndex?: number;
-    /**
-     * This function must set open to false in order to close the lightbox. Note there
-     * is a 300ms easing animation on lightbox close that occurs before this function
-     * is called.
-     * This function receives an object as an argument with the key `lastPosition`
-     * that has the index of the image the user was on when LightBox was closed.
-     */
-    onRequestClose(options: RequestCloseOptions): void;
-    /**
-     * Sets the box-sizing for the thumbnails in the lightbox. This is a solution for a problem where
-     * tailwind was setting the box-sizing to `border-box` and causing issues with the lightbox.
-     * @default "content-box"
-     */
-    readonly boxSizing?: CSSProperties["boxSizing"];
-}
-export declare const slideVariants: {
-    enter: (directionRef: React.RefObject<number>) => {
-        x: string;
-    };
-    center: {
-        x: number;
-    };
-    exit: (directionRef: React.RefObject<number>) => {
-        x: string;
-    };
-};
-export declare function LightBox({ boxSizing, open, images, imageIndex, onRequestClose, }: LightBoxProps): React.JSX.Element;
-export {};
+export { LightBox };