pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

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

@@ -0,0 +1,252 @@
+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 { 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";
+import TextInput from "../Input/TextInput";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { TextLabel } from "../Common/FormLabel";
+import TimePicker from "./TimePicker";
+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;
+    const singleProps = !isRange ? props : null;
+    const rangeProps = isRange ? props : null;
+    const emitSingle = useCallback((date) => {
+        singleProps === null || singleProps === void 0 ? void 0 : singleProps.onChange(date);
+    }, [singleProps]);
+    const emitRange = (range) => {
+        rangeProps === null || rangeProps === void 0 ? void 0 : rangeProps.onChange(range);
+    };
+    const theme = useCustomTheme();
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
+    const inputRef = useRef(null);
+    const today = new Date();
+    const tomorrow = addDays(today, 1);
+    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
+        : 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)
+            : (disableToday ? tomorrow : today));
+    const [rangeStart, setRangeStart] = useState(null);
+    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);
+    const isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        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();
+    };
+    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;
+        }
+        if (isRange) {
+            if (selectingStart) {
+                setTempRangeStart(updated);
+                setTempRangeEnd(null);
+                setSelectingStart(false);
+            }
+            else {
+                const finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart;
+                const finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+                const safeStart = finalStart !== null && finalStart !== void 0 ? finalStart : updated;
+                setTempRangeStart(safeStart);
+                setTempRangeEnd(finalEnd);
+                setSelectingStart(true);
+                if (safeStart && finalEnd) {
+                    emitRange({ from: safeStart, to: finalEnd });
+                }
+            }
+        }
+        else {
+            const updatedDate = tempDate
+                ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
+                : updated;
+            setTempDate(updatedDate);
+            emitSingle(updatedDate);
+        }
+    };
+    const renderDays = () => {
+        const monthStart = startOfMonth(currentMonth);
+        const monthEnd = endOfMonth(currentMonth);
+        const startDate = startOfWeek(monthStart);
+        const endDate = endOfWeek(monthEnd);
+        const rows = [];
+        let day = startDate;
+        while (day <= endDate) {
+            const days = [];
+            for (let i = 0; i < 7; i++) {
+                const thisDay = day;
+                const isInCurrentMonth = thisDay.getMonth() === currentMonth.getMonth();
+                const isToday = isSameDay(thisDay, today);
+                const isStart = isRange && tempRangeStart && isSameDay(thisDay, tempRangeStart);
+                const isEnd = isRange && tempRangeEnd && isSameDay(thisDay, tempRangeEnd);
+                const isInRange = isRange &&
+                    tempRangeStart &&
+                    tempRangeEnd &&
+                    isAfter(thisDay, tempRangeStart) &&
+                    isBefore(thisDay, tempRangeEnd);
+                const isSelected = !isRange && tempDate && isSameDay(thisDay, tempDate);
+                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);
+                days.push(_jsx(Button, { size: "sm", variant: isStart || isEnd
+                        ? "solid"
+                        : isInRange
+                            ? "outline"
+                            : isSelected
+                                ? "solid"
+                                : "ghost", colorScheme: isStart || isEnd || isInRange || isSelected ? "primary" : "gray", opacity: isInCurrentMonth ? 1 : 0.4, onClick: () => !disabled && handleDaySelect(new Date(thisDay)), isDisabled: disabled, border: isToday ? `0.125rem solid ${theme.colors.primary[500]}` : undefined, borderRadius: "md", children: format(thisDay, "d") }, thisDay.toString()));
+                day = addDays(day, 1);
+            }
+            rows.push(_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, children: days }, day.toString()));
+        }
+        return rows;
+    };
+    const displayValue = isRange
+        ? tempRangeStart && tempRangeEnd
+            ? `${format(tempRangeStart, dateFormat)} - ${format(tempRangeEnd, dateFormat)}`
+            : tempRangeStart
+                ? `${format(tempRangeStart, dateFormat)} -`
+                : ""
+        : 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) => {
+                                                                    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) => {
+                                                                    const newYear = parseInt(e.target.value, 10);
+                                                                    setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
+                                                                }, children: Array.from({ length: 100 }).map((_, i) => {
+                                                                    const year = new Date().getFullYear() - 50 + i;
+                                                                    return (_jsx("option", { value: year, children: year }, year));
+                                                                }) })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [!isViewingCurrentMonth && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                                    setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+                                                                    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) => {
+                                            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);
+                                                    setRangeEnd(null);
+                                                    setSelectingStart(true);
+                                                    if (isRange) {
+                                                        emitRange(null);
+                                                    }
+                                                    else {
+                                                        emitSingle(null);
+                                                    }
+                                                    onClose();
+                                                }, children: "Clear" }), _jsx(Button, { size: "sm", colorScheme: "primary", onClick: () => {
+                                                    if (isRange && tempRangeStart && tempRangeEnd) {
+                                                        setRangeStart(tempRangeStart);
+                                                        setRangeEnd(tempRangeEnd);
+                                                        emitRange({ from: tempRangeStart, to: tempRangeEnd });
+                                                    }
+                                                    else if (!isRange && tempDate) {
+                                                        emitSingle(tempDate);
+                                                    }
+                                                    onClose();
+                                                }, children: "OK" })] })] }) }) })] })] }));
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,206 @@
+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 { format, isAfter, isBefore, isSameDay, subDays, startOfMonth, endOfMonth } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import Button from "../Button/Button";
+import { TextLabel } from "../Common/FormLabel";
+import HelperText from "../Common/HelperText";
+import ErrorMessage from "../Common/ErrorMessage";
+import CalendarPanel from "./CalendarPanel";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize";
+import TimePicker from "./TimePicker";
+import { TimePickerInput } from "./TimePickerInput";
+// 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, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    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;
+    const theme = useCustomTheme();
+    const sizeKey = typeof size === "string" ? size : "md";
+    const calendarIconPx = getTextInputIconSizePx(sizeKey);
+    const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const today = new Date();
+    const placeholder = useMemo(() => placeholderText || `${dateFormat} - ${dateFormat}`, [placeholderText, dateFormat]);
+    const selectedRange = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null;
+    const [currentMonth, setCurrentMonthState] = useState(new Date());
+    const [tempRangeStart, setTempRangeStart] = useState((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null);
+    const [tempRangeEnd, setTempRangeEnd] = useState((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null);
+    const [selectingStart, setSelectingStart] = useState(true);
+    const [inputValue, setInputValue] = useState("");
+    const [hoveredDate, setHoveredDate] = useState(null);
+    const formatHasTime = useMemo(() => /(h{1,2}|H{1,2})/.test(dateFormat), [dateFormat]);
+    const formatHasSeconds = useMemo(() => /s{1,2}/i.test(dateFormat), [dateFormat]);
+    const shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
+    const timePickerFormat = useMemo(() => {
+        const has24Hour = /H{1,2}/.test(dateFormat);
+        const has12Hour = !has24Hour && /h{1,2}/.test(dateFormat);
+        const hasMeridiem = /a/i.test(dateFormat);
+        if (has24Hour) {
+            return "HH:mm";
+        }
+        if (has12Hour) {
+            const base = "hh:mm";
+            return hasMeridiem ? `${base} a` : base;
+        }
+        return "HH:mm";
+    }, [dateFormat]);
+    const startTimeBaseDate = useMemo(() => { var _a; return (_a = tempRangeStart !== null && tempRangeStart !== void 0 ? tempRangeStart : tempRangeEnd) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeStart, tempRangeEnd]);
+    const endTimeBaseDate = useMemo(() => { var _a; return (_a = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tempRangeStart) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeEnd, tempRangeStart]);
+    useEffect(() => {
+        if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
+            const start = new Date(selectedRange.from);
+            const end = new Date(selectedRange.to);
+            setTempRangeStart(start);
+            setTempRangeEnd(end);
+            setInputValue(`${format(start, dateFormat)} - ${format(end, dateFormat)}`);
+            setCurrentMonthState(start);
+        }
+        else if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) {
+            const start = new Date(selectedRange.from);
+            setTempRangeStart(start);
+            setTempRangeEnd(null);
+            setInputValue(`${format(start, dateFormat)} -`);
+            setCurrentMonthState(start);
+        }
+        else {
+            setTempRangeStart(null);
+            setTempRangeEnd(null);
+            setInputValue("");
+        }
+    }, [selectedRange, dateFormat]);
+    const commitValue = (value) => {
+        props.onChange(value);
+    };
+    const finalize = () => {
+        if (tempRangeStart && tempRangeEnd) {
+            setInputValue(`${format(tempRangeStart, dateFormat)} - ${format(tempRangeEnd, dateFormat)}`);
+            commitValue({ from: tempRangeStart, to: tempRangeEnd });
+        }
+    };
+    const requestClose = () => {
+        finalize();
+        onClose();
+    };
+    const handleOpen = () => {
+        onOpen();
+    };
+    const handleDaySelect = (day) => {
+        const updated = new Date(day);
+        if (selectingStart) {
+            setTempRangeStart(updated);
+            setTempRangeEnd(null);
+            setSelectingStart(false);
+        }
+        else {
+            const finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart !== null && tempRangeStart !== void 0 ? tempRangeStart : updated;
+            const finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+            setTempRangeStart(finalStart);
+            setTempRangeEnd(finalEnd);
+            setSelectingStart(true);
+            setHoveredDate(null);
+            // no auto-close; wait for OK
+        }
+    };
+    const applyPreset = (from, to) => {
+        setTempRangeStart(from);
+        setTempRangeEnd(to);
+        setSelectingStart(true);
+        setHoveredDate(null);
+        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)] },
+    ];
+    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]);
+    const handleClear = () => {
+        setTempRangeStart(null);
+        setTempRangeEnd(null);
+        setSelectingStart(true);
+        setInputValue("");
+        props.onChange(null);
+    };
+    const displayValue = useMemo(() => {
+        if (inputValue)
+            return inputValue;
+        if (tempRangeStart && tempRangeEnd)
+            return `${format(tempRangeStart, dateFormat)} - ${format(tempRangeEnd, dateFormat)}`;
+        if (tempRangeStart)
+            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: () => {
+                                            if (!isOpen)
+                                                handleOpen();
+                                        }, onClick: () => {
+                                            if (!isOpen)
+                                                handleOpen();
+                                        }, borderColor: error ? (_f = (_e = theme.colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[500] : undefined, _focus: {
+                                            borderColor: error ? (_h = (_g = theme.colors.semantic) === null || _g === void 0 ? void 0 : _g.error) === null || _h === void 0 ? void 0 : _h[500] : theme.colors.primary[500],
+                                            boxShadow: error
+                                                ? `0 0 0 1px ${(_k = (_j = theme.colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]}`
+                                                : `0 0 0 1px ${theme.colors.primary[500]}`,
+                                        }, _hover: {
+                                            borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : 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.gray[500] }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "0.75rem", border: "1px solid", borderColor: (_o = theme.colors.boxborder) === null || _o === void 0 ? void 0 : _o[500], 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: "gray.600", 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: "gray.600", 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: (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[300], 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 })] }));
+};
+export default RangeDatePicker;