pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -1,17 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
-import { Box, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, Input, InputGroup, InputRightElement, FormControl, } from "@chakra-ui/react";
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
+import { Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, useDisclosure, Input, InputGroup, InputRightElement, IconButton, FormControl, useMergeRefs, } from "@chakra-ui/react";
 import { format, parse, isValid, isSameDay, isBefore, isAfter, addDays, } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
+import { isStringValueProps, } from "./DatePickerProps.js";
+import { parseIsoValue, formatIsoValue } from "./valueFormat.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { formatHasTime, inferPickerTypeFromFormat, resolvePickerAliases } from "./pickerField.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
 import CalendarPanel from "./CalendarPanel.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 const TOKEN_CHARS = /[dMyHhmsaAm]/;
 const getPlaceholderForToken = (token, length) => {
     const lower = token.toLowerCase();
@@ -105,16 +113,6 @@ const buildTimeSegments = (format) => {
     }
     return segments;
 };
-const inferPickerTypeFromFormat = (formatStr) => {
-    const lower = formatStr.toLowerCase();
-    const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
-    const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
-    if (hasTime && hasDate)
-        return "datetime";
-    if (hasTime)
-        return "time";
-    return "date";
-};
 const formatToPlaceholder = (format) => format;
 const filterNumericInput = (value, format) => {
     const separators = format.match(/[^dDmMyYhHsSaA]/g) || [];
@@ -218,15 +216,21 @@ const normalizeTimeBuffer = (tokenChar, rawBuffer, segmentLength, is12Hour) => {
     }
     return { value: buf, completed: buf.length >= segmentLength };
 };
-export const SingleDatePicker = (props) => {
-    var _a, _b;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+function SingleDatePickerInner(props, ref) {
+    var _a, _b, _c, _d;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
     const theme = useCustomTheme();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const calendarIconPx = getTextInputIconSizePx(sizeKey);
     const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date";
     const inputRef = useRef(null);
+    const mergedInputRef = useMergeRefs(inputRef, ref);
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
@@ -279,10 +283,13 @@ export const SingleDatePicker = (props) => {
     const tomorrow = addDays(today, 1);
     const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
-    const formatHasTime = resolvedDateFormat.toLowerCase().includes("hh") ||
-        resolvedDateFormat.toLowerCase().includes("mm") ||
-        resolvedDateFormat.toLowerCase().includes("ss");
-    const selectedDate = (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate)) !== null && _b !== void 0 ? _b : null;
+    const resolvedFormatHasTime = formatHasTime(resolvedDateFormat);
+    const rawIsoValue = isStringValueProps(props) ? (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null : null;
+    // Memoized: parseIsoValue would otherwise return a new Date identity every render, looping the effect below.
+    const parsedIsoValue = useMemo(() => (rawIsoValue ? parseIsoValue(rawIsoValue, resolvedPickerType) : null), [rawIsoValue, resolvedPickerType]);
+    const selectedDate = isStringValueProps(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
     const [currentMonth, setCurrentMonth] = useState(selectedDate
         ? disableToday && isSameDay(selectedDate, today)
             ? tomorrow
@@ -305,7 +312,12 @@ export const SingleDatePicker = (props) => {
         if (didCommitRef.current)
             return;
         didCommitRef.current = true;
-        props.onChange(value);
+        if (isStringValueProps(props)) {
+            props.onChange(value ? formatIsoValue(value, resolvedPickerType) : null);
+        }
+        else {
+            props.onChange(value);
+        }
     };
     const finalize = (overrideValue) => {
         if (enableMask) {
@@ -387,6 +399,7 @@ export const SingleDatePicker = (props) => {
         }
     }, [inputValue, tokenSegments, enableMask, isMaskActive]);
     const handleOpen = () => {
+        requestExclusiveOpen();
         if (!selectedDate && showDate) {
             setTempDate(disableToday ? tomorrow : new Date());
         }
@@ -413,7 +426,7 @@ export const SingleDatePicker = (props) => {
             const parsed = parse(value, resolvedDateFormat, new Date());
             if (isValid(parsed)) {
                 let finalDate = parsed;
-                if (showTime && tempDate && !formatHasTime) {
+                if (showTime && tempDate && !resolvedFormatHasTime) {
                     finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
                 }
                 setTempDate(finalDate);
@@ -429,11 +442,7 @@ export const SingleDatePicker = (props) => {
         if (enableMask && isMaskActive) {
             setIsMaskActive(false);
             segmentInputBufferRef.current = "";
-            // isMaskComplete() can't recognise text month tokens (e.g. "MMM"), so a
-            // valid, externally-set value like "Jun 10, 2026" is judged "incomplete"
-            // and was being cleared on blur (data loss). Only clear when the value is
-            // empty or genuinely can't be parsed into a valid date; otherwise fall
-            // through and let the parse path below commit it.
+            // NOTE: isMaskComplete() can't read text month tokens, so only clear when the value truly can't be parsed.
             const hasParsableDate = parseValidatedValue(value) !== null;
             if (!value || !value.trim() || (!isMaskComplete(value) && !hasParsableDate)) {
                 setInputValue("");
@@ -492,27 +501,10 @@ export const SingleDatePicker = (props) => {
             requestClose(updatedDate);
         }
     };
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleClickOutside = (event) => {
-            var _a, _b, _c;
-            const target = event.target;
-            const isInsidePopover = (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(target);
-            const isInsideInput = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(target);
-            const isInsideTrigger = (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.contains(target);
-            if (!isInsidePopover && !isInsideInput && !isInsideTrigger) {
-                finalize();
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside, true);
-        document.addEventListener("click", handleClickOutside, true);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside, true);
-            document.removeEventListener("click", handleClickOutside, true);
-        };
-    }, [isOpen, tempDate, activeFormat]); // eslint-disable-line react-hooks/exhaustive-deps
+    useOutsideMouseDown([popoverRef, inputRef, triggerRef], () => {
+        finalize();
+        onClose();
+    }, { enabled: isOpen, capture: true, includeClick: true });
     const ensureMaskValue = useCallback(() => {
         var _a, _b, _c, _d;
         if (!enableMask) {
@@ -630,15 +622,12 @@ export const SingleDatePicker = (props) => {
         if (disableToday && isSameDay(parsed, today))
             return null;
         let finalDate = parsed;
-        if (showTime && tempDate && !formatHasTime) {
+        if (showTime && tempDate && !resolvedFormatHasTime) {
             finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
         }
         return finalDate;
     };
-    // Returns the validated Date for a fully-typed value, or null when the value
-    // is empty / not a parseable, in-range date. Used by blur handling so an
-    // already-valid value is never discarded just because the mask-completeness
-    // heuristic doesn't understand text month tokens.
+    // Validated Date for a fully-typed value, or null — lets blur handling keep an already-valid value.
     const parseValidatedValue = (value) => {
         if (!value || !value.trim())
             return null;
@@ -680,9 +669,7 @@ export const SingleDatePicker = (props) => {
             return;
         setIsMaskActive(true);
         setIsTyping(true);
-        // Never blank an already-valid value on focus. The mask placeholder is built
-        // with padded tokens (e.g. "MMM dd, yyyy"), so a valid but shorter value such
-        // as "Jun 5, 2026" would otherwise be replaced by the empty mask and lost.
+        // NOTE: never blank an already-valid shorter value on focus — the padded mask placeholder would replace it.
         const hasValidValue = parseValidatedValue(inputValue) !== null;
         if (!hasValidValue && (!inputValue || inputValue.length !== maskPlaceholder.length)) {
             setInputValue(maskPlaceholder);
@@ -777,14 +764,28 @@ export const SingleDatePicker = (props) => {
         }
         if (key === "Escape") {
             e.preventDefault();
-            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            if (isOpen) {
+                onClose();
+            }
+            else {
+                (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+            }
             return;
         }
         if (key === "Enter") {
             e.preventDefault();
+            if (!isOpen && showDate) {
+                handleOpen();
+                return;
+            }
             handleInputBlur();
             return;
         }
+        if (key === "ArrowDown" && !isOpen && showDate) {
+            e.preventDefault();
+            handleOpen();
+            return;
+        }
         if (key === "Backspace" || key === "Delete") {
             e.preventDefault();
             const baseValue = ensureMaskValue();
@@ -926,47 +927,56 @@ export const SingleDatePicker = (props) => {
     };
     const handleInputFocusMask = enableMask ? handleInputFocus : undefined;
     const handleInputClickMask = enableMask ? handleInputClick : undefined;
-    const handleKeyDownMask = enableMask ? handleKeyDown : undefined;
     const handlePasteMask = enableMask ? handlePaste : undefined;
+    const handleInputKeyDown = (e) => {
+        if (!enableMask) {
+            if (e.key === "Escape" && isOpen) {
+                e.preventDefault();
+                onClose();
+                return;
+            }
+            if (!isOpen && showDate && (e.key === "ArrowDown" || e.key === "Enter")) {
+                e.preventDefault();
+                handleOpen();
+                return;
+            }
+            return;
+        }
+        handleKeyDown(e);
+    };
     const displayValue = isTyping
         ? inputValue
         : tempDate
             ? format(tempDate, resolvedDateFormat)
             : "";
-    return (_jsxs(FormControl, { id: id, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: () => {
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: () => {
                     if (suppressOnCloseFinalizeRef.current) {
                         suppressOnCloseFinalizeRef.current = false;
                         return;
                     }
                     finalize();
-                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, bg: theme.colors.gray[50], borderColor: error
-                                            ? theme.colors.semanticText.error
-                                            : theme.colors.boxborder[500], _focus: {
-                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                            boxShadow: error
-                                                ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                                                : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                                        }, _hover: {
-                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                        }, cursor: "text", boxShadow: error ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}` : `` }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: (e) => {
-                                            e.stopPropagation();
-                                            if (!isOpen) {
-                                                handleOpen();
-                                            }
-                                            else {
-                                                onClose();
-                                            }
-                                        }, style: { cursor: "pointer" }, children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
-                                            setTempDate(updatedDate);
-                                            setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
-                                            setIsTyping(false);
-                                        }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
-                                            setTempDate(updatedDate);
-                                            setInputValue(format(updatedDate, resolvedDateFormat));
-                                            setIsTyping(false);
-                                        }, disabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
-                                                setTempDate(null);
-                                                requestClose(null);
-                                            }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-};
+                    onClose();
+                }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: mergedInputRef, ...ids.controlProps, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, cursor: "text" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (!isOpen) {
+                                                    handleOpen();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [showDate && (_jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && (_jsx(Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? (_jsx(TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(updatedDate ? format(updatedDate, resolvedDateFormat) : "");
+                                                setIsTyping(false);
+                                            }, dateFormat: resolvedDateFormat, isDisabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: (updatedDate) => {
+                                                setTempDate(updatedDate);
+                                                setInputValue(format(updatedDate, resolvedDateFormat));
+                                                setIsTyping(false);
+                                            }, isDisabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                                    setTempDate(null);
+                                                    requestClose(null);
+                                                }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+export const SingleDatePicker = forwardRef(SingleDatePickerInner);
+SingleDatePicker.displayName = "SingleDatePicker";
 export default SingleDatePicker;

package/dist/esm/Components/DatePicker/ThemeDatePicker.js

@@ -1,27 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isStringValueProps, } from "./DatePickerProps.js";
 import { RangeDatePicker } from "./RangeDatePicker.js";
 import { SingleDatePicker } from "./SingleDatePicker.js";
 import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
-const inferPickerTypeFromFormat = (formatStr) => {
-    const lower = formatStr.toLowerCase();
-    const hasTime = lower.includes("hh") || lower.includes("mm") || lower.includes("ss");
-    const hasDate = lower.includes("d") && lower.includes("m") && lower.includes("y");
-    if (hasTime && hasDate)
-        return "datetime";
-    if (hasTime)
-        return "time";
-    return "date";
-};
-const ThemeDatePicker = (props) => {
+import { inferPickerTypeFromFormat } from "./pickerField.js";
+function ThemeDatePickerInner(props, ref) {
     var _a, _b;
     if (props.isRange) {
-        return _jsx(RangeDatePicker, { ...props });
+        return _jsx(RangeDatePicker, { ref: ref, ...props });
     }
-    const dateFormat = (_a = props.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
-    const pickerType = (_b = props.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
-    if (pickerType === "time") {
-        return _jsx(TimeOnlyPicker, { ...props });
+    const singleProps = props;
+    const dateFormat = (_a = singleProps.dateFormat) !== null && _a !== void 0 ? _a : "dd/MM/yyyy";
+    const pickerType = (_b = singleProps.pickerType) !== null && _b !== void 0 ? _b : inferPickerTypeFromFormat(dateFormat);
+    const isTime = pickerType === "time";
+    if (isStringValueProps(singleProps)) {
+        return isTime ? _jsx(TimeOnlyPicker, { ref: ref, ...singleProps }) : _jsx(SingleDatePicker, { ref: ref, ...singleProps });
     }
-    return _jsx(SingleDatePicker, { ...props });
-};
+    return isTime ? _jsx(TimeOnlyPicker, { ref: ref, ...singleProps }) : _jsx(SingleDatePicker, { ref: ref, ...singleProps });
+}
+export const ThemeDatePicker = forwardRef(ThemeDatePickerInner);
+ThemeDatePicker.displayName = "ThemeDatePicker";
 export default ThemeDatePicker;

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -1,78 +1,89 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState, useRef } from "react";
+import { forwardRef, useEffect, useMemo, useState, useRef } from "react";
 import { Box, FormControl, Popover, PopoverBody, PopoverContent, PopoverAnchor, useDisclosure, Button as ChakraButton, } from "@chakra-ui/react";
 import { addDays } from "date-fns";
+import { isStringValueProps, } from "./DatePickerProps.js";
+import { parseIsoValue, formatIsoValue } from "./valueFormat.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import HelperText from "../Common/HelperText.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { resolvePickerAliases } from "./pickerField.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-export const TimeOnlyPicker = (props) => {
-    var _a, _b;
-    const { id, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "HH:mm", disabled, width = "100%", disableToday = false, size = "md", } = props;
+function TimeOnlyPickerInner(props, ref) {
+    var _a, _b, _c, _d;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "HH:mm", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
+    const { isDisabled: disabled, placeholder: placeholderText } = resolvePickerAliases(props);
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const pickerPortal = usePickerPortal(isOpen);
+    const openPicker = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const inputWrapperRef = useRef(null);
     const today = new Date();
     const tomorrow = addDays(today, 1);
-    const sizeKey = typeof size === "string" ? size : "md";
-    const selectedDate = (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate)) !== null && _b !== void 0 ? _b : null;
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
+    const rawIsoValue = isStringValueProps(props) ? (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null : null;
+    // Memoized: parseIsoValue would otherwise return a new Date identity every render, looping the effect below.
+    const parsedIsoValue = useMemo(() => (rawIsoValue ? parseIsoValue(rawIsoValue, "time") : null), [rawIsoValue]);
+    const selectedDate = isStringValueProps(props)
+        ? parsedIsoValue
+        : (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.selectedDate) !== null && _d !== void 0 ? _d : null;
     const [tempDate, setTempDate] = useState(selectedDate ? new Date(selectedDate) : null);
     useEffect(() => {
         setTempDate(selectedDate ? new Date(selectedDate) : null);
     }, [selectedDate]);
     const placeholder = useMemo(() => placeholderText || formatToPlaceholder(dateFormat), [placeholderText, dateFormat]);
+    const emitChange = (date) => {
+        if (isStringValueProps(props)) {
+            props.onChange(date ? formatIsoValue(date, "time") : null);
+        }
+        else {
+            props.onChange(date);
+        }
+    };
     const handleTimeInputChange = (date) => {
         setTempDate(date);
-        props.onChange(date);
+        emitChange(date);
     };
     const handleTimePickerChange = (date) => {
         setTempDate(date);
-        props.onChange(date);
+        emitChange(date);
     };
     const handleClear = () => {
         setTempDate(null);
-        props.onChange(null);
-        // Do not close; user asked only outside-click and OK to close
+        emitChange(null);
     };
     const handleOk = () => {
         const commitValue = tempDate !== null && tempDate !== void 0 ? tempDate : new Date(resolvedTempDate.getFullYear(), resolvedTempDate.getMonth(), resolvedTempDate.getDate(), resolvedTempDate.getHours(), resolvedTempDate.getMinutes(), resolvedTempDate.getSeconds(), resolvedTempDate.getMilliseconds());
         setTempDate(commitValue);
-        props.onChange(commitValue);
+        emitChange(commitValue);
         onClose();
     };
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleMouseDownOutside = (event) => {
-            const target = event.target;
-            const inputEl = inputWrapperRef.current;
-            const triggerEl = triggerRef.current;
-            const popoverEl = popoverRef.current;
-            const insideInput = !!inputEl && inputEl.contains(target);
-            const insideTrigger = !!triggerEl && triggerEl.contains(target);
-            const insidePopover = !!popoverEl && popoverEl.contains(target);
-            if (!insideInput && !insideTrigger && !insidePopover) {
-                onClose();
-            }
-        };
-        document.addEventListener("mousedown", handleMouseDownOutside, true);
-        return () => {
-            document.removeEventListener("mousedown", handleMouseDownOutside, true);
-        };
-    }, [isOpen, onClose]);
+    useOutsideMouseDown([inputWrapperRef, triggerRef, popoverRef], () => onClose(), { enabled: isOpen, capture: true });
     const resolvedTempDate = tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0);
-    return (_jsxs(FormControl, { id: id, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { value: tempDate, onChange: (date) => {
+    return (_jsxs(FormControl, { id: ids.inputId, isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: pickerPortal.isPopoverOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsx(Box, { ref: inputWrapperRef, children: _jsx(TimePickerInput, { ref: ref, value: tempDate, onChange: (date) => {
                                         handleTimeInputChange(date);
-                                    }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: () => {
+                                    }, dateFormat: dateFormat, isDisabled: disabled, placeholder: placeholder, id: ids.inputId, name: name, isRequired: isRequired, describedBy: ids.describedBy, onFocus: () => {
                                         if (!disabled && !isOpen)
-                                            onOpen();
-                                    }, error: error, size: sizeKey }) }) }) }), _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
-                                        handleTimePickerChange(updatedDate);
-                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-};
+                                            openPicker();
+                                    }, error: error, size: sizeKey }) }) }) }), _jsx(PickerPortal, { isMounted: pickerPortal.isMounted, children: _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
+                                            handleTimePickerChange(updatedDate);
+                                        } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) }) })] }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+}
+export const TimeOnlyPicker = forwardRef(TimeOnlyPickerInner);
+TimeOnlyPicker.displayName = "TimeOnlyPicker";
 export default TimeOnlyPicker;

package/dist/esm/Components/DatePicker/TimePicker.js

@@ -2,8 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Select, HStack } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
+const TimePicker = ({ date, onChange, dateFormat, isDisabled, disabled: legacyDisabled }) => {
+    var _a;
     const theme = useCustomTheme();
+    const disabled = (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled) !== null && _a !== void 0 ? _a : false;
+    const { h, minH, fontSize } = controlSizeStyles("sm");
+    const selectSx = { ...fieldControlStyles(theme.colors), h, minH, fontSize };
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     const deriveDisplayHour = (rawHour) => {
         if (!is12HourFormat)
@@ -52,18 +58,9 @@ const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
         updateTime(hour, minute, newMeridiem);
     };
     const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return (_jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsx(Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
+    return (_jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsx(Select, { "aria-label": "Hour", value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
                     const value = is12HourFormat ? i + 1 : i;
                     return (_jsx("option", { value: value, children: value.toString().padStart(2, "0") }, value));
-                }) }), _jsx(Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => (_jsx("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && (_jsxs(Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: [_jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }));
+                }) }), _jsx(Select, { "aria-label": "Minute", value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: 60 }, (_, i) => (_jsx("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && (_jsxs(Select, { "aria-label": "AM or PM", value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: [_jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }));
 };
 export default TimePicker;

package/dist/esm/Components/DatePicker/TimePickerInput.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useMemo, useCallback } from "react";
-import { Box, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { Box, Input, InputGroup, InputRightElement, useMergeRefs } from "@chakra-ui/react";
 import { format, parse, isValid } from "date-fns";
 import { ClockIcon } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
 const sanitizeDigits = (input) => input.replace(/\D/g, "").slice(0, 4);
 const adjustDigits = (digits, is12Hour) => {
@@ -88,12 +89,14 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-export const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+export const TimePickerInput = forwardRef(function TimePickerInput({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = DEFAULT_CONTROL_SIZE, }, ref) {
     const theme = useCustomTheme();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : DEFAULT_CONTROL_SIZE;
     const iconPx = getTextInputIconSizePx(sizeKey);
     const iconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
     const [digits, setDigits] = useState("");
     const digitsRef = useRef("");
     const [, setIsFocused] = useState(false);
@@ -400,12 +403,6 @@ export const TimePickerInput = ({ value, onChange, dateFormat, disabled = false,
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.gray[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                    boxShadow: error
-                        ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                        : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                } }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
-};
+    return (_jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: mergedRef, id: id, name: name, isRequired: isRequired, "aria-describedby": describedBy, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), _jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: _jsx(Box, { as: "span", sx: iconWrapperSx, children: _jsx(ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+});
+TimePickerInput.displayName = "TimePickerInput";