@jobber/components 6.114.1 → 6.114.6

package/dist/Autocomplete/components/FloatingMenu.d.ts

@@ -10,7 +10,6 @@ interface FloatingMenuProps<Value extends OptionLike> {
     readonly className: string;
     readonly floatingStyles: React.CSSProperties;
     readonly transitionStyles: React.CSSProperties;
-    readonly menuWidth?: number;
     readonly menuStyle?: React.CSSProperties;
     readonly renderable: Array<RenderItem<Value>>;
     readonly persistentsHeaders: Array<MenuHeader<Record<string, unknown>>>;
@@ -57,5 +56,5 @@ interface FloatingMenuProps<Value extends OptionLike> {
         };
     };
 }
-export declare function FloatingMenu<Value extends OptionLike>({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuWidth, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }: FloatingMenuProps<Value>): React.JSX.Element;
+export declare function FloatingMenu<Value extends OptionLike>({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }: FloatingMenuProps<Value>): React.JSX.Element;
 export {};

package/dist/Autocomplete/index.cjs

@@ -133,6 +133,11 @@ function invokeActiveItemOnEnter(event, activeIndex, renderable, onSelect, onAct
 
 const MENU_OFFSET = design.tokens["space-small"];
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
+function useStableSetReference(refs) {
+    const latestRefs = React.useRef(refs);
+    latestRefs.current = refs;
+    return React.useCallback((el) => latestRefs.current.setReference(el), []);
+}
 function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuOpen, onMenuClose, selectedIndex, readOnly = false, disabled = false, outsidePressExcludeSelector, }) {
     const [open, setOpen] = React.useState(false);
     const [activeIndex, setActiveIndex] = React.useState(null);
@@ -157,12 +162,13 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             floatingUi_react.offset(MENU_OFFSET),
             floatingUi_react.flip({ fallbackPlacements: ["top"] }),
             floatingUi_react.size({
-                apply({ availableHeight, elements }) {
+                apply({ availableHeight, rects, elements }) {
                     const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
                         maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
                     });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight$1}px`,
+                        width: `${rects.reference.width}px`,
                     });
                 },
             }),
@@ -214,7 +220,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             return prev >= navigableCount ? navigableCount - 1 : prev;
         });
     }, [navigableCount, setActiveIndex, listRef]);
-    const setReferenceElement = React.useCallback((el) => refs.setReference(el), [refs]);
+    const setReferenceElement = useStableSetReference(refs);
     return {
         refs,
         floatingStyles,
@@ -1088,7 +1094,7 @@ function DefaultTextPersistentContent({ persistent, }) {
     return React.createElement("div", { className: styles$1.textPersistent }, persistent.label);
 }
 
-function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuWidth, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }) {
+function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }) {
     var _a, _b, _c, _d;
     const activeIndexForMiddle = activeIndex != null ? activeIndex - headerInteractiveCount : null;
     return (React.createElement(floatingUi_react.FloatingPortal, null,
@@ -1101,7 +1107,7 @@ function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, f
                 id: listboxId,
                 role: "listbox",
                 className,
-                style: Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), menuStyle), (menuWidth ? { width: menuWidth, maxWidth: menuWidth } : {})),
+                style: Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), menuStyle),
             })),
                 React.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: customRenderHeader, customRenderFooter: customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentHeader, (_a = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.header) === null || _a === void 0 ? void 0 : _a.className), style: (_b = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.header) === null || _b === void 0 ? void 0 : _b.style }),
                 React.createElement("div", { className: styles$1.scrollRegion }, loading ? (customRenderLoading !== null && customRenderLoading !== void 0 ? customRenderLoading : React.createElement(LoadingContent, null)) : (React.createElement(React.Fragment, null,
@@ -1140,7 +1146,6 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         close: { opacity: 0 },
         duration: { open: design.tokens["timing-base"], close: design.tokens["timing-base"] },
     });
-    const [menuWidth, setMenuWidth] = React.useState(undefined);
     const [positionRefEl, setPositionRefEl] = React.useState(null);
     const inputId = React.useId();
     const descriptionId = `descriptionUUID--${inputId}`;
@@ -1187,18 +1192,17 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         }
         const multiContainer = node.closest("[data-testid='ATL-AutocompleteRebuilt-multiSelectContainer']");
         if (multiContainer) {
-            setMenuWidth(multiContainer.clientWidth);
             setPositionRefEl(multiContainer);
         }
     }, [setReferenceElement, props.multiple]);
     const referenceInputRef = React.useCallback((node) => {
         setReferenceElement(node);
         if (!props.multiple) {
-            // Workaround to get the width of the visual InputText element, which is not the same as
-            // the literal input reference element.
+            // Workaround to get the visual InputText element, which is not the same
+            // as the literal input reference element when props like suffix/prefix
+            // are present. Used to set the position reference for the floating menu.
             const visualInputTextElement = node === null || node === void 0 ? void 0 : node.closest("[data-testid='Form-Field-Wrapper']");
             if (visualInputTextElement) {
-                setMenuWidth(visualInputTextElement.clientWidth);
                 setPositionRefEl(visualInputTextElement);
             }
         }
@@ -1215,7 +1219,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
     }, [positionRefEl, refs]);
     const menuClassName = classnames(styles$1.list, (_b = props.UNSAFE_className) === null || _b === void 0 ? void 0 : _b.menu);
     const showEmptyStateMessage = optionCount === 0 && props.emptyStateMessage !== false;
-    const floatingMenu = isMounted && !props.readOnly && !disabled && (React.createElement(FloatingMenu, { context: context, getFloatingProps: getFloatingProps, refs: refs, listboxId: listboxId, className: menuClassName, floatingStyles: floatingStyles, transitionStyles: transitionStyles, menuWidth: menuWidth, menuStyle: (_c = props.UNSAFE_styles) === null || _c === void 0 ? void 0 : _c.menu, renderable: renderable, persistentsHeaders: persistentsHeaders, persistentsFooters: persistentsFooters, activeIndex: activeIndex, headerInteractiveCount: headerInteractiveCount, middleNavigableCount: middleNavigableCount, getItemProps: getItemProps, listRef: listRef, onSelection: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, getOptionLabel: getOptionLabel, isOptionSelected: isOptionSelected, loading: loading, showEmptyStateMessage: showEmptyStateMessage, emptyStateMessage: props.emptyStateMessage, customRenderLoading: props.customRenderLoading, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, slotOverrides: {
+    const floatingMenu = isMounted && !props.readOnly && !disabled && (React.createElement(FloatingMenu, { context: context, getFloatingProps: getFloatingProps, refs: refs, listboxId: listboxId, className: menuClassName, floatingStyles: floatingStyles, transitionStyles: transitionStyles, menuStyle: (_c = props.UNSAFE_styles) === null || _c === void 0 ? void 0 : _c.menu, renderable: renderable, persistentsHeaders: persistentsHeaders, persistentsFooters: persistentsFooters, activeIndex: activeIndex, headerInteractiveCount: headerInteractiveCount, middleNavigableCount: middleNavigableCount, getItemProps: getItemProps, listRef: listRef, onSelection: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, getOptionLabel: getOptionLabel, isOptionSelected: isOptionSelected, loading: loading, showEmptyStateMessage: showEmptyStateMessage, emptyStateMessage: props.emptyStateMessage, customRenderLoading: props.customRenderLoading, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, slotOverrides: {
             option: {
                 className: (_d = props.UNSAFE_className) === null || _d === void 0 ? void 0 : _d.option,
                 style: (_e = props.UNSAFE_styles) === null || _e === void 0 ? void 0 : _e.option,

package/dist/Autocomplete/index.mjs

@@ -131,6 +131,11 @@ function invokeActiveItemOnEnter(event, activeIndex, renderable, onSelect, onAct
 
 const MENU_OFFSET = tokens["space-small"];
 const AUTOCOMPLETE_MAX_HEIGHT = 300;
+function useStableSetReference(refs) {
+    const latestRefs = useRef(refs);
+    latestRefs.current = refs;
+    return useCallback((el) => latestRefs.current.setReference(el), []);
+}
 function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuOpen, onMenuClose, selectedIndex, readOnly = false, disabled = false, outsidePressExcludeSelector, }) {
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
@@ -155,12 +160,13 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             offset(MENU_OFFSET),
             flip({ fallbackPlacements: ["top"] }),
             size({
-                apply({ availableHeight, elements }) {
+                apply({ availableHeight, rects, elements }) {
                     const maxHeight = calculateMaxHeight(availableHeight, {
                         maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
                     });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight}px`,
+                        width: `${rects.reference.width}px`,
                     });
                 },
             }),
@@ -212,7 +218,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             return prev >= navigableCount ? navigableCount - 1 : prev;
         });
     }, [navigableCount, setActiveIndex, listRef]);
-    const setReferenceElement = useCallback((el) => refs.setReference(el), [refs]);
+    const setReferenceElement = useStableSetReference(refs);
     return {
         refs,
         floatingStyles,
@@ -1086,7 +1092,7 @@ function DefaultTextPersistentContent({ persistent, }) {
     return React__default.createElement("div", { className: styles$1.textPersistent }, persistent.label);
 }
 
-function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuWidth, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }) {
+function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }) {
     var _a, _b, _c, _d;
     const activeIndexForMiddle = activeIndex != null ? activeIndex - headerInteractiveCount : null;
     return (React__default.createElement(FloatingPortal, null,
@@ -1099,7 +1105,7 @@ function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, f
                 id: listboxId,
                 role: "listbox",
                 className,
-                style: Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), menuStyle), (menuWidth ? { width: menuWidth, maxWidth: menuWidth } : {})),
+                style: Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), menuStyle),
             })),
                 React__default.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: customRenderHeader, customRenderFooter: customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentHeader, (_a = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.header) === null || _a === void 0 ? void 0 : _a.className), style: (_b = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.header) === null || _b === void 0 ? void 0 : _b.style }),
                 React__default.createElement("div", { className: styles$1.scrollRegion }, loading ? (customRenderLoading !== null && customRenderLoading !== void 0 ? customRenderLoading : React__default.createElement(LoadingContent, null)) : (React__default.createElement(React__default.Fragment, null,
@@ -1138,7 +1144,6 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         close: { opacity: 0 },
         duration: { open: tokens["timing-base"], close: tokens["timing-base"] },
     });
-    const [menuWidth, setMenuWidth] = React__default.useState(undefined);
     const [positionRefEl, setPositionRefEl] = React__default.useState(null);
     const inputId = React__default.useId();
     const descriptionId = `descriptionUUID--${inputId}`;
@@ -1185,18 +1190,17 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         }
         const multiContainer = node.closest("[data-testid='ATL-AutocompleteRebuilt-multiSelectContainer']");
         if (multiContainer) {
-            setMenuWidth(multiContainer.clientWidth);
             setPositionRefEl(multiContainer);
         }
     }, [setReferenceElement, props.multiple]);
     const referenceInputRef = useCallback((node) => {
         setReferenceElement(node);
         if (!props.multiple) {
-            // Workaround to get the width of the visual InputText element, which is not the same as
-            // the literal input reference element.
+            // Workaround to get the visual InputText element, which is not the same
+            // as the literal input reference element when props like suffix/prefix
+            // are present. Used to set the position reference for the floating menu.
             const visualInputTextElement = node === null || node === void 0 ? void 0 : node.closest("[data-testid='Form-Field-Wrapper']");
             if (visualInputTextElement) {
-                setMenuWidth(visualInputTextElement.clientWidth);
                 setPositionRefEl(visualInputTextElement);
             }
         }
@@ -1213,7 +1217,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
     }, [positionRefEl, refs]);
     const menuClassName = classnames(styles$1.list, (_b = props.UNSAFE_className) === null || _b === void 0 ? void 0 : _b.menu);
     const showEmptyStateMessage = optionCount === 0 && props.emptyStateMessage !== false;
-    const floatingMenu = isMounted && !props.readOnly && !disabled && (React__default.createElement(FloatingMenu, { context: context, getFloatingProps: getFloatingProps, refs: refs, listboxId: listboxId, className: menuClassName, floatingStyles: floatingStyles, transitionStyles: transitionStyles, menuWidth: menuWidth, menuStyle: (_c = props.UNSAFE_styles) === null || _c === void 0 ? void 0 : _c.menu, renderable: renderable, persistentsHeaders: persistentsHeaders, persistentsFooters: persistentsFooters, activeIndex: activeIndex, headerInteractiveCount: headerInteractiveCount, middleNavigableCount: middleNavigableCount, getItemProps: getItemProps, listRef: listRef, onSelection: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, getOptionLabel: getOptionLabel, isOptionSelected: isOptionSelected, loading: loading, showEmptyStateMessage: showEmptyStateMessage, emptyStateMessage: props.emptyStateMessage, customRenderLoading: props.customRenderLoading, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, slotOverrides: {
+    const floatingMenu = isMounted && !props.readOnly && !disabled && (React__default.createElement(FloatingMenu, { context: context, getFloatingProps: getFloatingProps, refs: refs, listboxId: listboxId, className: menuClassName, floatingStyles: floatingStyles, transitionStyles: transitionStyles, menuStyle: (_c = props.UNSAFE_styles) === null || _c === void 0 ? void 0 : _c.menu, renderable: renderable, persistentsHeaders: persistentsHeaders, persistentsFooters: persistentsFooters, activeIndex: activeIndex, headerInteractiveCount: headerInteractiveCount, middleNavigableCount: middleNavigableCount, getItemProps: getItemProps, listRef: listRef, onSelection: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, getOptionLabel: getOptionLabel, isOptionSelected: isOptionSelected, loading: loading, showEmptyStateMessage: showEmptyStateMessage, emptyStateMessage: props.emptyStateMessage, customRenderLoading: props.customRenderLoading, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, slotOverrides: {
             option: {
                 className: (_d = props.UNSAFE_className) === null || _d === void 0 ? void 0 : _d.option,
                 style: (_e = props.UNSAFE_styles) === null || _e === void 0 ? void 0 : _e.option,

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/InputText/index.cjs

@@ -240,11 +240,12 @@ const InputTextSPAR = React.forwardRef(function InputTextInternal(props, inputRe
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    const mergedRef = React.useMemo(() => FormField.mergeRefs([inputRef, inputTextRef]), []);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
         name, className: FormField.formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
             ? descriptionIdentifier
-            : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: FormField.mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
+            : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: mergedRef }, dataAttrs);
     return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React.createElement(React.Fragment, null,
             props.multiline ? (React.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),

package/dist/InputText/index.mjs

@@ -1,6 +1,6 @@
-import React__default, { forwardRef, useRef, useImperativeHandle, useId } from 'react';
+import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useId } from 'react';
 import { useSafeLayoutEffect } from '@jobber/hooks';
-import { k as FormField, b as useAtlantisFormFieldName, l as formFieldStyles, n as mergeRefs, f as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, n as mergeRefs, l as formFieldStyles, f as FormFieldWrapper, m as FormFieldPostFix } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -238,11 +238,12 @@ const InputTextSPAR = forwardRef(function InputTextInternal(props, inputRef) {
     const descriptionVisible = props.description && !props.inline;
     const isInvalid = Boolean(props.error || props.invalid);
     const dataAttrs = filterDataAttributes(props);
+    const mergedRef = useMemo(() => mergeRefs([inputRef, inputTextRef]), []);
     // Shared props for both TextArea and TextInput
     const commonInputProps = Object.assign({ id,
         name, className: formFieldStyles.input, value: props.value, disabled: props.disabled, readOnly: props.readOnly, autoFocus: props.autoFocus, autoComplete: props.autoComplete, inputMode: props.inputMode, tabIndex: props.tabIndex, maxLength: props.maxLength, role: props.role, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
             ? descriptionIdentifier
-            : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: mergeRefs([inputRef, inputTextRef]) }, dataAttrs);
+            : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-controls": props["aria-controls"], "aria-expanded": props["aria-expanded"], "aria-activedescendant": props["aria-activedescendant"], "aria-autocomplete": props["aria-autocomplete"], "aria-required": props["aria-required"], onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onClick: handleClick, ref: mergedRef }, dataAttrs);
     return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(props.error || props.invalid), identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, clearable: (_b = props.clearable) !== null && _b !== void 0 ? _b : "never", onClear: handleClear, type: props.multiline ? "textarea" : "text", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, readonly: props.readOnly, rows: rowRange.min, toolbar: props.toolbar, toolbarVisibility: props.toolbarVisibility },
         React__default.createElement(React__default.Fragment, null,
             props.multiline ? (React__default.createElement(TextArea, Object.assign({}, commonInputProps, { rows: rowRange.min }))) : (React__default.createElement(TextInput, Object.assign({}, commonInputProps, { pattern: props.pattern }))),

package/dist/styles.css

@@ -1097,8 +1097,6 @@
   display: -ms-flexbox;
   display: flex;
   height: var(--field--height);
-  -ms-flex-align: center;
-      align-items: center;
   -ms-flex: 1;
       flex: 1;
 }
@@ -1899,6 +1897,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       justify-content: center;
   -ms-flex-align: center;
       align-items: center;
+  -webkit-transform: translateY(50%);
+          transform: translateY(50%);
 }
 
 .YmRTd-KeXv4-:focus {
@@ -7518,9 +7518,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.114.1",
+  "version": "6.114.6",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8e79d0138c20e8e2b0eb8839296cd85cb9c8e403"
+  "gitHead": "f3ee342f23c2e0c2d5d5876934efcbbec7c27c5e"
 }