pixelize-design-library 2.4.2 → 3.0.0

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

@@ -1,11 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Grid } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays } from "date-fns";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
-export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, }) => {
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_COLOR_TRANSITION = transitionFor(["background", "color"]);
+/** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
+export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
     const theme = useCustomTheme();
     const rangeBg = theme.colors.primary.opacity[16];
     const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
@@ -33,11 +38,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
         bg: theme.colors.background[50],
         outline: "none",
         _hover: { borderColor: theme.colors.primary[300] },
-        _focus: {
-            outline: "none",
-            borderColor: theme.colors.primary[500],
-            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
-        },
+        _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
         style: {
             WebkitAppearance: "menulist",
             MozAppearance: "menulist",
@@ -45,6 +46,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
         },
     };
     const renderDays = () => {
+        var _a;
         const monthStart = startOfMonth(currentMonth);
         const monthEnd = endOfMonth(currentMonth);
         const startDate = startOfWeek(monthStart);
@@ -63,12 +65,17 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                 const isSelected = !!(!isRange && tempDate && isSameDay(thisDay, tempDate));
                 const isTentativeEnd = isEnd && isTentative;
                 const circleSolid = !!(isSelected || (isRange && isStart) || (isEnd && !isTentative));
+                // Marking is not disabling: only the `disabled` state key blocks selection, and only
+                // because the caller asked for it by name.
+                const states = (_a = dayStates === null || dayStates === void 0 ? void 0 : dayStates(thisDay)) !== null && _a !== void 0 ? _a : [];
+                const stateVisual = states.length ? resolveDayStateVisual(states, theme.colors) : null;
                 const disabled = !isInCurrentMonth ||
                     !!(minDate && isBefore(thisDay, minDate)) ||
                     !!(maxDate && isAfter(thisDay, maxDate)) ||
                     !!(disablePastDates && isBefore(thisDay, today) && !isSameDay(thisDay, today)) ||
                     !!(disableFutureDates && isAfter(thisDay, today) && !isSameDay(thisDay, today)) ||
-                    !!(disableToday && isToday);
+                    !!(disableToday && isToday) ||
+                    !!(stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.blocksSelection);
                 // Connected range band painted on the cell background; start/end use a
                 // half gradient so the band meets the solid day circle cleanly.
                 let cellBg;
@@ -82,41 +89,54 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                     else if (isEnd)
                         cellBg = `linear-gradient(to right, ${rangeBg} 50%, transparent 50%)`;
                 }
-                // Solid fill (selected/range-endpoint) needs the ink checked against that
-                // specific fill — `primary[500]` doesn't reliably clear AA for white text on
-                // every brand/mode (same gap the solid Button variant already accounts for).
-                const solidFill = theme.colors.primary[500];
-                const solidHoverFill = theme.colors.primary[600];
+                // Selection feedback outranks a state tint — the band is what tells the user what they picked.
+                if (!cellBg && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.cellBg))
+                    cellBg = stateVisual.cellBg;
+                // NOTE: primary[500] doesn't reliably clear AA for white text on every brand — same gap Button accounts for.
+                const primarySolid = resolveFilledSurface(theme.colors.primary, theme.colors);
+                const solidFill = primarySolid.fill;
+                const solidHoverFill = primarySolid.hoverFill;
                 const circleColor = circleSolid
-                    ? onFilled(solidFill, theme.colors.white, theme.colors.black)
+                    ? primarySolid.color
                     : isInCurrentMonth
                         ? theme.colors.text[700]
                         : theme.colors.gray[400];
-                const circleHoverColor = circleSolid
-                    ? onFilled(solidHoverFill, theme.colors.white, theme.colors.black)
-                    : circleColor;
+                const circleHoverColor = circleSolid ? primarySolid.hoverColor : circleColor;
                 const circleBorder = circleSolid
                     ? "1px solid transparent"
                     : isTentativeEnd
                         ? `1px solid ${theme.colors.primary[400]}`
                         : isToday
-                            ? `1px solid ${theme.colors.primary[300]}`
+                            // primary[300] falls under 3:1 against surfaceRaised in several dark palettes; 500 clears it everywhere.
+                            ? `1px solid ${theme.colors.primary[500]}`
                             : "1px solid transparent";
-                days.push(_jsx(Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsx(Box, { as: "button", type: "button", disabled: disabled, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: circleColor, border: circleBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                // A filled circle owns its own ink (checked against that fill by `onFilled`), so a state
+                // never repaints a selected day — it would undo that contrast guarantee.
+                const dayColor = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.color) ? stateVisual.color : circleColor;
+                const dayBorder = !circleSolid && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.border) ? stateVisual.border : circleBorder;
+                const customContent = renderDayContent ? renderDayContent(thisDay, states) : null;
+                const markerColor = customContent == null && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.markerColor) ? stateVisual.markerColor : null;
+                const hasDayOverlay = customContent != null || markerColor != null;
+                const dayLabel = dayStates
+                    ? dayAccessibleName(format(thisDay, "d MMMM yyyy"), states)
+                    : format(thisDay, "d MMMM yyyy");
+                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? dayStateClassName(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs-plus", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: BACKGROUND_COLOR_TRANSITION, _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
-                                : { bg: rangeBg }, children: format(thisDay, "d") }) }, thisDay.toString()));
+                                : { bg: rangeBg }, children: [format(thisDay, "d"), hasDayOverlay && (_jsx(Box, { as: "span", className: `${DAY_CLASS}__content`, position: "absolute", left: 0, right: 0, bottom: "px", display: "flex", alignItems: "flex-end", justifyContent: "center", lineHeight: "1", fontSize: "0.5rem", 
+                                // The overlay is decoration: clicks belong to the day button under it.
+                                pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : (_jsx(Box, { as: "span", className: `${DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = addDays(day, 1);
             }
-            rows.push(_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
+            rows.push(_jsx(Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
         }
         return rows;
     };
-    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [_jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [_jsx(Box, { as: "select", value: currentMonth.getMonth(), onChange: (e) => {
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [_jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [_jsx(Box, { as: "select", "aria-label": "Month", value: currentMonth.getMonth(), onChange: (e) => {
                                     const newMonth = parseInt(e.target.value, 10);
                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
-                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx(Box, { as: "select", value: currentMonth.getFullYear(), onChange: (e) => {
+                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx(Box, { as: "select", "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
                                     const newYear = parseInt(e.target.value, 10);
                                     setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
                                 }, ...selectStyles, children: Array.from({ length: 100 }).map((_, i) => {
@@ -127,6 +147,6 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                                     if (!disableToday) {
                                         onDaySelect(new Date(today));
                                     }
-                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), _jsxs(Box, { role: "grid", "aria-label": "Calendar", children: [renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { role: "columnheader", textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] })] }));
 };
 export default CalendarPanel;

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

@@ -1,26 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
-import { Box, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, Grid, useDisclosure, } from "@chakra-ui/react";
+import { Box, Popover, PopoverAnchor, PopoverContent, PopoverBody, Portal, Grid, useDisclosure, } from "@chakra-ui/react";
 import { format, isSameDay, isBefore, isAfter, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays, addMonths, subMonths, } from "date-fns";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import TimePicker from "./TimePicker.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";
-};
-export default function CustomDatePicker(props) {
-    var _a, _b;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText = "Select a date", dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+import { inferPickerTypeFromFormat, resolvePickerAliases } from "./pickerField.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
+function CustomDatePicker(props) {
+    var _a, _b, _c;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", pickerType, minDate, maxDate, disableFutureDates, disablePastDates, isRange, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, } = props;
+    const aliases = resolvePickerAliases(props);
+    const disabled = aliases.isDisabled;
+    const placeholderText = (_a = aliases.placeholder) !== null && _a !== void 0 ? _a : "Select a date";
     const singleProps = !isRange ? props : null;
     const rangeProps = isRange ? props : null;
     const emitSingle = useCallback((date) => {
@@ -38,11 +34,8 @@ export default function CustomDatePicker(props) {
     const showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     const showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
     const selectedDate = singleProps !== null
-        ? (_b = ((_a = singleProps.value) !== null && _a !== void 0 ? _a : singleProps.selectedDate)) !== null && _b !== void 0 ? _b : null
+        ? (_c = ((_b = singleProps.value) !== null && _b !== void 0 ? _b : singleProps.selectedDate)) !== null && _c !== void 0 ? _c : null
         : null;
-    // const [currentMonth, setCurrentMonth] = useState<Date>(
-    //   isRange ? new Date() : selectedDate ?? new Date()
-    // );
     const [currentMonth, setCurrentMonth] = useState(isRange ? new Date() :
         selectedDate
             ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
@@ -51,11 +44,6 @@ export default function CustomDatePicker(props) {
     const [rangeEnd, setRangeEnd] = useState(null);
     const [selectingStart, setSelectingStart] = useState(true);
     const [tempDate, setTempDate] = useState(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null);
-    //   const [tempDate, setTempDate] = useState<Date | null>(
-    //   selectedDate
-    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
-    //     : (disableToday ? tomorrow : null)
-    // );
     const [tempRangeStart, setTempRangeStart] = useState(rangeStart);
     const [tempRangeEnd, setTempRangeEnd] = useState(rangeEnd);
     const popoverRef = useRef(null);
@@ -63,36 +51,44 @@ export default function CustomDatePicker(props) {
         currentMonth.getMonth() === today.getMonth();
     const handleOpen = () => {
         if (!isRange && !selectedDate) {
-            // setTempDate(new Date());
             setTempDate(disableToday ? tomorrow : new Date());
         }
         if (showTime) {
-            // setTempDate(new Date()); // add new
-            //  setTempDate(disableToday ? tomorrow : new Date());
-            // console.log(selectedDate,"selectedDateselectedDate")
             setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
         }
         onOpen();
     };
+    const openAtPress = useRef(false);
+    const handleTriggerClick = () => {
+        const wasOpen = openAtPress.current;
+        openAtPress.current = false;
+        if (wasOpen)
+            onClose();
+        else
+            handleOpen();
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (isOpen && event.key === "Escape") {
+            onClose();
+            return;
+        }
+        if (isOpen || (event.key !== "Enter" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        handleOpen();
+    };
     useEffect(() => {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
-                // const corrected = disableToday && isSameDay(selectedDate, today)
-                //   ? tomorrow
-                //   : selectedDate;
-                // setTempDate(new Date(corrected));
             }
             else {
                 setTempDate(null);
-                // setTempDate(disableToday ? tomorrow : null);
             }
         }
     }, [selectedDate, isRange, disableToday]);
     const handleDaySelect = (day) => {
-        // const updated = new Date(day);
         let updated = new Date(day);
-        // 👇 Redirect selection from today → tomorrow
         if (disableToday && isSameDay(updated, today)) {
             updated = tomorrow;
         }
@@ -171,32 +167,17 @@ export default function CustomDatePicker(props) {
         : tempDate
             ? format(tempDate, dateFormat)
             : "";
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            var _a;
-            if (popoverRef.current &&
-                !popoverRef.current.contains(event.target) &&
-                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                if (tempDate) {
-                    emitSingle(tempDate); // commit latest temp on outside click
-                }
-                onClose();
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        else {
-            document.removeEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen, onClose, tempDate, props, emitSingle]);
-    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { onClick: handleOpen, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.background[50], children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { value: currentMonth.getMonth(), onChange: (e) => {
+    useOutsideMouseDown([popoverRef, inputRef], () => {
+        if (!popoverRef.current)
+            return;
+        if (tempDate)
+            emitSingle(tempDate);
+        onClose();
+    }, { enabled: isOpen });
+    return (_jsxs(Box, { width: width, position: "relative", children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { onMouseDown: () => { openAtPress.current = isOpen; }, onClick: handleTriggerClick, onKeyDown: handleTriggerKeyDown, children: _jsx(TextInput, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size, "aria-haspopup": "dialog" }) }) }), _jsx(Portal, { appendToParentPortal: false, children: _jsx(PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600, bg: theme.colors.surfaceRaised, children: _jsxs(PopoverBody, { children: [showDate && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Previous month", onClick: () => setCurrentMonth((prev) => subMonths(prev, 1)), children: _jsx(ChevronLeftIcon, {}) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx("select", { "aria-label": "Month", value: currentMonth.getMonth(), onChange: (e) => {
                                                                     const newMonth = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
-                                                                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { value: currentMonth.getFullYear(), onChange: (e) => {
+                                                                }, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx("select", { "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
                                                                     const newYear = parseInt(e.target.value, 10);
                                                                     setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
                                                                 }, children: Array.from({ length: 100 }).map((_, i) => {
@@ -207,25 +188,11 @@ export default function CustomDatePicker(props) {
                                                                     if (!disableToday && !isRange) {
                                                                         handleDaySelect(new Date(today));
                                                                     }
-                                                                }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker
-                                    // date={tempDate ?? new Date()}
-                                    , { 
-                                        // date={tempDate ?? new Date()}
-                                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, 
-                                        // onChange={(updatedDate) => {
-                                        // 👇 Redirect time change if today
-                                        //   const corrected = disableToday && isSameDay(updatedDate, today)
-                                        //     ? tomorrow
-                                        //     : updatedDate;
-                                        //   setTempDate(corrected);
-                                        //   emitSingle(corrected);
-                                        // }}
-                                        onChange: (updatedDate) => {
+                                                                }, "aria-label": "Today", sx: { fontSize: "xs", px: 2 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "sm", "aria-label": "Next month", onClick: () => setCurrentMonth((prev) => addMonths(prev, 1)), children: _jsx(ChevronRightIcon, {}) })] })] }), _jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: 700, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", children: day }, day))) }), renderDays()] })), !isRange && showTime && (_jsx(TimePicker, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             emitSingle(updatedDate);
                                         } })), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 3, children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                                     setTempDate(null);
-                                                    // setTempDate(disableToday ? tomorrow : null);
                                                     setTempRangeStart(null);
                                                     setTempRangeEnd(null);
                                                     setRangeStart(null);
@@ -250,3 +217,4 @@ export default function CustomDatePicker(props) {
                                                     onClose();
                                                 }, children: "OK" })] })] }) }) })] })] }));
 }
+export default CustomDatePicker;

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

@@ -1 +1 @@
-export {};
+export const isStringValueProps = (props) => props.valueFormat === "iso";

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Portal } from "@chakra-ui/react";
+import { MotionConfig, MotionContext } from "framer-motion";
+// NOTE: mounts on first open, after any open Modal's aria-hidden pass, then opens a render later.
+export const usePickerPortal = (isOpen) => {
+    const [hasMounted, setHasMounted] = useState(false);
+    useEffect(() => {
+        if (isOpen)
+            setHasMounted(true);
+    }, [isOpen]);
+    return { isMounted: isOpen || hasMounted, isPopoverOpen: isOpen && hasMounted };
+};
+// NOTE: detaches from an ancestor Modal's variant tree, which otherwise pins a late-mounted popover hidden.
+const ROOT_MOTION_CONTEXT = {};
+const BodyPortal = ({ children }) => {
+    const bodyRef = useRef(document.body);
+    return (_jsx(Portal, { containerRef: bodyRef, children: _jsx(MotionConfig, { reducedMotion: "user", children: _jsx(MotionContext.Provider, { value: ROOT_MOTION_CONTEXT, children: children }) }) }));
+};
+export const PickerPortal = ({ isMounted, children }) => isMounted ? _jsx(BodyPortal, { children: children }) : null;
+export default PickerPortal;

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

@@ -1,31 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, FormControl, Input, InputGroup, InputRightElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, } from "@chakra-ui/react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { Box, FormControl, IconButton, Input, InputGroup, InputRightElement, Popover, PopoverAnchor, PopoverBody, PopoverContent, useDisclosure, useMergeRefs, } from "@chakra-ui/react";
 import { format, isAfter, isBefore, isSameDay, subDays, startOfMonth, endOfMonth } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.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 { readOnlyTriggerSx, resolvePickerAliases } from "./pickerField.js";
 import CalendarPanel from "./CalendarPanel.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 TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
+import PickerPortal, { usePickerPortal } from "./PickerPortal.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
 // helper to set time on date while preserving date part
 const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
     return new Date(b.getFullYear(), b.getMonth(), b.getDate(), time.getHours(), time.getMinutes(), time.getSeconds(), 0);
 };
-export const RangeDatePicker = (props) => {
-    var _a, _b, _c, _d;
-    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, placeholderText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", disabled, width = "100%", disableToday = false, size = "md", } = props;
+/** Two-endpoint range field; `onChange` fires on Apply, outside click or calendar Escape, never a bare day click; `ref` is the `<input>`. */
+export const RangeDatePicker = forwardRef(function RangeDatePicker(props, ref) {
+    var _a, _b, _c, _d, _e;
+    const { id, name, label, isRequired, isInformation, informationMessage, error, errorMessage, helperText, dateFormat = "dd/MM/yyyy", minDate, maxDate, disableFutureDates, disablePastDates, autoComplete = "off", width = "100%", disableToday = false, size = DEFAULT_CONTROL_SIZE, dayStates, renderDayContent, } = 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 range";
     const inputRef = useRef(null);
+    const mergedInputRef = useMergeRefs(inputRef, ref);
     const triggerRef = useRef(null);
     const popoverRef = useRef(null);
     const today = new Date();
@@ -91,8 +104,20 @@ export const RangeDatePicker = (props) => {
         onClose();
     };
     const handleOpen = () => {
+        requestExclusiveOpen();
         onOpen();
     };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+            return;
+        }
+        if (!isOpen && (e.key === "ArrowDown" || e.key === "Enter")) {
+            e.preventDefault();
+            handleOpen();
+        }
+    };
     const handleDaySelect = (day) => {
         const updated = new Date(day);
         if (selectingStart) {
@@ -118,31 +143,14 @@ export const RangeDatePicker = (props) => {
         setCurrentMonthState(from);
         setInputValue(`${format(from, dateFormat)} - ${format(to, dateFormat)}`);
     };
-    const presets = [
-        { label: "Today", getRange: () => [today, today] },
-        { label: "Yesterday", getRange: () => { const d = subDays(today, 1); return [d, d]; } },
-        { label: "Last 7 days", getRange: () => [subDays(today, 6), today] },
-        { label: "Last 30 days", getRange: () => [subDays(today, 29), today] },
-        { label: "This month", getRange: () => [startOfMonth(today), endOfMonth(today)] },
+    const presets = (_e = props.presets) !== null && _e !== void 0 ? _e : [
+        { label: "Today", range: { from: today, to: today } },
+        { label: "Yesterday", range: { from: subDays(today, 1), to: subDays(today, 1) } },
+        { label: "Last 7 days", range: { from: subDays(today, 6), to: today } },
+        { label: "Last 30 days", range: { from: subDays(today, 29), to: today } },
+        { label: "This month", range: { from: startOfMonth(today), to: endOfMonth(today) } },
     ];
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handleMouseDownOutside = (event) => {
-            const target = event.target;
-            const inputEl = inputRef.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, tempRangeStart, tempRangeEnd]);
+    useOutsideMouseDown([inputRef, triggerRef, popoverRef], () => requestClose(), { enabled: isOpen, capture: true });
     const handleClear = () => {
         setTempRangeStart(null);
         setTempRangeEnd(null);
@@ -159,48 +167,47 @@ export const RangeDatePicker = (props) => {
             return `${format(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return (_jsxs(FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: 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: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: () => {
+    return (_jsxs(FormControl, { id: ids.inputId, isInvalid: error, isRequired: isRequired, isDisabled: disabled, 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: requestClose, 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: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
                                             if (!isOpen)
                                                 handleOpen();
-                                        }, borderColor: error ? theme.colors.semanticText.error : undefined, _focus: {
-                                            borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                                            boxShadow: error
-                                                ? `0 0 0 1px ${theme.colors.semanticText.error}`
-                                                : `0 0 0 1px ${theme.colors.primary[500]}`,
-                                        }, _hover: {
-                                            borderColor: error ? theme.colors.semanticText.error : undefined,
-                                        }, cursor: "pointer" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
-                                            const [from, to] = p.getRange();
-                                            applyPreset(from, to);
-                                        }, children: p.label }, p.label))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
-                                                        if (!tempRangeStart) {
-                                                            setTempRangeStart(updated);
-                                                            return;
-                                                        }
-                                                        const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                                        setTempRangeStart(withStartDate);
-                                                    }, dateFormat: dateFormat, disabled: disabled || !tempRangeStart })) : (_jsx(TimePickerInput, { value: tempRangeStart, onChange: (t) => {
-                                                        if (!t) {
-                                                            setTempRangeStart(null);
-                                                            return;
-                                                        }
-                                                        setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
-                                                        if (!tempRangeEnd) {
-                                                            setTempRangeEnd(updated);
-                                                            return;
-                                                        }
-                                                        const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                                        setTempRangeEnd(withEndDate);
-                                                    }, dateFormat: dateFormat, disabled: disabled || !tempRangeEnd })) : (_jsx(TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
-                                                        if (!t) {
-                                                            setTempRangeEnd(null);
-                                                            return;
-                                                        }
-                                                        setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _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: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-};
+                                        }, sx: readOnlyTriggerSx(theme.colors), cursor: "pointer" }), _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, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.surfaceRaised, role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [presets.length > 0 && (_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => applyPreset(p.range.from, p.range.to), children: p.label }, p.label))) })), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
+                                                            if (!tempRangeStart) {
+                                                                setTempRangeStart(updated);
+                                                                return;
+                                                            }
+                                                            const withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                                            setTempRangeStart(withStartDate);
+                                                        }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeStart })) : (_jsx(TimePickerInput, { value: tempRangeStart, onChange: (t) => {
+                                                            if (!t) {
+                                                                setTempRangeStart(null);
+                                                                return;
+                                                            }
+                                                            setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeStart, size: sizeKey }))] }), _jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "End time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: endTimeBaseDate, onChange: (updated) => {
+                                                            if (!tempRangeEnd) {
+                                                                setTempRangeEnd(updated);
+                                                                return;
+                                                            }
+                                                            const withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
+                                                            setTempRangeEnd(withEndDate);
+                                                        }, dateFormat: dateFormat, isDisabled: disabled || !tempRangeEnd })) : (_jsx(TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
+                                                            if (!t) {
+                                                                setTempRangeEnd(null);
+                                                                return;
+                                                            }
+                                                            setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
+                                                        }, dateFormat: timePickerFormat, isDisabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _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: handleClear, 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 })] }));
+});
+RangeDatePicker.displayName = "RangeDatePicker";
 export default RangeDatePicker;