pixelize-design-library 2.3.6 → 2.3.8

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -1,112 +1,80 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeDatePicker = void 0;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var date_fns_1 = require("date-fns");
-var lucide_react_1 = require("lucide-react");
-var Button_1 = __importDefault(require("../Button/Button"));
-var FormLabel_1 = require("../Common/FormLabel");
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var textInputIconSize_1 = require("../Input/textInputIconSize");
-var TimePicker_1 = __importDefault(require("./TimePicker"));
-var TimePickerInput_1 = require("./TimePickerInput");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const date_fns_1 = require("date-fns");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const FormLabel_1 = require("../Common/FormLabel");
+const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const textInputIconSize_1 = require("../Input/textInputIconSize");
+const TimePicker_1 = __importDefault(require("./TimePicker"));
+const TimePickerInput_1 = require("./TimePickerInput");
 // helper to set time on date while preserving date part
-var setTimeFrom = function (base, time) {
-    var b = base ? new Date(base) : new Date();
+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);
 };
-var RangeDatePicker = function (props) {
+const RangeDatePicker = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _q = props.dateFormat, dateFormat = _q === void 0 ? "dd/MM/yyyy" : _q, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _r = props.autoComplete, autoComplete = _r === void 0 ? "off" : _r, disabled = props.disabled, _s = props.width, width = _s === void 0 ? "100%" : _s, _t = props.disableToday, disableToday = _t === void 0 ? false : _t, _u = props.size, size = _u === void 0 ? "md" : _u;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var sizeKey = typeof size === "string" ? size : "md";
-    var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
-    var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
-    var _v = (0, react_2.useDisclosure)(), isOpen = _v.isOpen, onOpen = _v.onOpen, onClose = _v.onClose;
-    var inputRef = (0, react_1.useRef)(null);
-    var triggerRef = (0, react_1.useRef)(null);
-    var popoverRef = (0, react_1.useRef)(null);
-    var today = new Date();
-    var placeholder = (0, react_1.useMemo)(function () { return placeholderText || "".concat(dateFormat, " - ").concat(dateFormat); }, [placeholderText, dateFormat]);
-    var selectedRange = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null;
-    var _w = (0, react_1.useState)(new Date()), currentMonth = _w[0], setCurrentMonthState = _w[1];
-    var _x = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _x[0], setTempRangeStart = _x[1];
-    var _y = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _y[0], setTempRangeEnd = _y[1];
-    var _z = (0, react_1.useState)(true), selectingStart = _z[0], setSelectingStart = _z[1];
-    var _0 = (0, react_1.useState)(""), inputValue = _0[0], setInputValue = _0[1];
-    var _1 = (0, react_1.useState)(null), hoveredDate = _1[0], setHoveredDate = _1[1];
-    var formatHasTime = (0, react_1.useMemo)(function () { return /(h{1,2}|H{1,2})/.test(dateFormat); }, [dateFormat]);
-    var formatHasSeconds = (0, react_1.useMemo)(function () { return /s{1,2}/i.test(dateFormat); }, [dateFormat]);
-    var shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
-    var timePickerFormat = (0, react_1.useMemo)(function () {
-        var has24Hour = /H{1,2}/.test(dateFormat);
-        var has12Hour = !has24Hour && /h{1,2}/.test(dateFormat);
-        var hasMeridiem = /a/i.test(dateFormat);
+    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 = (0, useCustomTheme_1.useCustomTheme)();
+    const sizeKey = typeof size === "string" ? size : "md";
+    const calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
+    const calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const inputRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const popoverRef = (0, react_1.useRef)(null);
+    const today = new Date();
+    const placeholder = (0, react_1.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] = (0, react_1.useState)(new Date());
+    const [tempRangeStart, setTempRangeStart] = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null);
+    const [tempRangeEnd, setTempRangeEnd] = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null);
+    const [selectingStart, setSelectingStart] = (0, react_1.useState)(true);
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [hoveredDate, setHoveredDate] = (0, react_1.useState)(null);
+    const formatHasTime = (0, react_1.useMemo)(() => /(h{1,2}|H{1,2})/.test(dateFormat), [dateFormat]);
+    const formatHasSeconds = (0, react_1.useMemo)(() => /s{1,2}/i.test(dateFormat), [dateFormat]);
+    const shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
+    const timePickerFormat = (0, react_1.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) {
-            var base = "hh:mm";
-            return hasMeridiem ? "".concat(base, " a") : base;
+            const base = "hh:mm";
+            return hasMeridiem ? `${base} a` : base;
         }
         return "HH:mm";
     }, [dateFormat]);
-    var startTimeBaseDate = (0, react_1.useMemo)(function () { var _a; return (_a = tempRangeStart !== null && tempRangeStart !== void 0 ? tempRangeStart : tempRangeEnd) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeStart, tempRangeEnd]);
-    var endTimeBaseDate = (0, react_1.useMemo)(function () { var _a; return (_a = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tempRangeStart) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeEnd, tempRangeStart]);
-    (0, react_1.useEffect)(function () {
+    const startTimeBaseDate = (0, react_1.useMemo)(() => { var _a; return (_a = tempRangeStart !== null && tempRangeStart !== void 0 ? tempRangeStart : tempRangeEnd) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeStart, tempRangeEnd]);
+    const endTimeBaseDate = (0, react_1.useMemo)(() => { var _a; return (_a = tempRangeEnd !== null && tempRangeEnd !== void 0 ? tempRangeEnd : tempRangeStart) !== null && _a !== void 0 ? _a : new Date(); }, [tempRangeEnd, tempRangeStart]);
+    (0, react_1.useEffect)(() => {
         if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
-            var start = new Date(selectedRange.from);
-            var end = new Date(selectedRange.to);
+            const start = new Date(selectedRange.from);
+            const end = new Date(selectedRange.to);
             setTempRangeStart(start);
             setTempRangeEnd(end);
-            setInputValue("".concat((0, date_fns_1.format)(start, dateFormat), " - ").concat((0, date_fns_1.format)(end, dateFormat)));
+            setInputValue(`${(0, date_fns_1.format)(start, dateFormat)} - ${(0, date_fns_1.format)(end, dateFormat)}`);
             setCurrentMonthState(start);
         }
         else if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) {
-            var start = new Date(selectedRange.from);
+            const start = new Date(selectedRange.from);
             setTempRangeStart(start);
             setTempRangeEnd(null);
-            setInputValue("".concat((0, date_fns_1.format)(start, dateFormat), " -"));
+            setInputValue(`${(0, date_fns_1.format)(start, dateFormat)} -`);
             setCurrentMonthState(start);
         }
         else {
@@ -115,32 +83,32 @@ var RangeDatePicker = function (props) {
             setInputValue("");
         }
     }, [selectedRange, dateFormat]);
-    var commitValue = function (value) {
+    const commitValue = (value) => {
         props.onChange(value);
     };
-    var finalize = function () {
+    const finalize = () => {
         if (tempRangeStart && tempRangeEnd) {
-            setInputValue("".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " - ").concat((0, date_fns_1.format)(tempRangeEnd, dateFormat)));
+            setInputValue(`${(0, date_fns_1.format)(tempRangeStart, dateFormat)} - ${(0, date_fns_1.format)(tempRangeEnd, dateFormat)}`);
             commitValue({ from: tempRangeStart, to: tempRangeEnd });
         }
     };
-    var requestClose = function () {
+    const requestClose = () => {
         finalize();
         onClose();
     };
-    var handleOpen = function () {
+    const handleOpen = () => {
         onOpen();
     };
-    var handleDaySelect = function (day) {
-        var updated = new Date(day);
+    const handleDaySelect = (day) => {
+        const updated = new Date(day);
         if (selectingStart) {
             setTempRangeStart(updated);
             setTempRangeEnd(null);
             setSelectingStart(false);
         }
         else {
-            var finalStart = tempRangeStart && updated < tempRangeStart ? updated : tempRangeStart !== null && tempRangeStart !== void 0 ? tempRangeStart : updated;
-            var finalEnd = tempRangeStart && updated < tempRangeStart ? tempRangeStart : updated;
+            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);
@@ -148,123 +116,98 @@ var RangeDatePicker = function (props) {
             // no auto-close; wait for OK
         }
     };
-    var applyPreset = function (from, to) {
+    const applyPreset = (from, to) => {
         setTempRangeStart(from);
         setTempRangeEnd(to);
         setSelectingStart(true);
         setHoveredDate(null);
         setCurrentMonthState(from);
-        setInputValue("".concat((0, date_fns_1.format)(from, dateFormat), " - ").concat((0, date_fns_1.format)(to, dateFormat)));
+        setInputValue(`${(0, date_fns_1.format)(from, dateFormat)} - ${(0, date_fns_1.format)(to, dateFormat)}`);
     };
-    var presets = [
-        { label: "Today", getRange: function () { return [today, today]; } },
-        { label: "Yesterday", getRange: function () { var d = (0, date_fns_1.subDays)(today, 1); return [d, d]; } },
-        { label: "Last 7 days", getRange: function () { return [(0, date_fns_1.subDays)(today, 6), today]; } },
-        { label: "Last 30 days", getRange: function () { return [(0, date_fns_1.subDays)(today, 29), today]; } },
-        { label: "This month", getRange: function () { return [(0, date_fns_1.startOfMonth)(today), (0, date_fns_1.endOfMonth)(today)]; } },
+    const presets = [
+        { label: "Today", getRange: () => [today, today] },
+        { label: "Yesterday", getRange: () => { const d = (0, date_fns_1.subDays)(today, 1); return [d, d]; } },
+        { label: "Last 7 days", getRange: () => [(0, date_fns_1.subDays)(today, 6), today] },
+        { label: "Last 30 days", getRange: () => [(0, date_fns_1.subDays)(today, 29), today] },
+        { label: "This month", getRange: () => [(0, date_fns_1.startOfMonth)(today), (0, date_fns_1.endOfMonth)(today)] },
     ];
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!isOpen)
             return;
-        var handleMouseDownOutside = function (event) {
-            var target = event.target;
-            var inputEl = inputRef.current;
-            var triggerEl = triggerRef.current;
-            var popoverEl = popoverRef.current;
-            var insideInput = !!inputEl && inputEl.contains(target);
-            var insideTrigger = !!triggerEl && triggerEl.contains(target);
-            var insidePopover = !!popoverEl && popoverEl.contains(target);
+        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 function () { return document.removeEventListener("mousedown", handleMouseDownOutside, true); };
+        return () => document.removeEventListener("mousedown", handleMouseDownOutside, true);
     }, [isOpen, onClose, tempRangeStart, tempRangeEnd]);
-    var handleClear = function () {
+    const handleClear = () => {
         setTempRangeStart(null);
         setTempRangeEnd(null);
         setSelectingStart(true);
         setInputValue("");
         props.onChange(null);
     };
-    var displayValue = (0, react_1.useMemo)(function () {
+    const displayValue = (0, react_1.useMemo)(() => {
         if (inputValue)
             return inputValue;
         if (tempRangeStart && tempRangeEnd)
-            return "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " - ").concat((0, date_fns_1.format)(tempRangeEnd, dateFormat));
+            return `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} - ${(0, date_fns_1.format)(tempRangeEnd, dateFormat)}`;
         if (tempRangeStart)
-            return "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " -");
+            return `${(0, date_fns_1.format)(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return (react_1.default.createElement(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
-            react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
-                    react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
-                        react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: function () {
-                                if (!isOpen)
-                                    handleOpen();
-                            }, onClick: function () {
-                                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 ".concat((_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 ".concat(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" }),
-                        react_1.default.createElement(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
-                            react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
-                                react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
-            react_1.default.createElement(react_2.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] },
-                react_1.default.createElement(react_2.PopoverBody, { p: 0 },
-                    react_1.default.createElement(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3 }, presets.map(function (p) { return (react_1.default.createElement(Button_1.default, { key: p.label, size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: function () {
-                            var _a = p.getRange(), from = _a[0], to = _a[1];
-                            applyPreset(from, to);
-                        } }, p.label)); })),
-                    react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
-                    formatHasTime && (react_1.default.createElement(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2 },
-                        react_1.default.createElement(react_2.Box, null,
-                            react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "Start time"),
-                            shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: startTimeBaseDate, onChange: function (updated) {
-                                    if (!tempRangeStart) {
-                                        setTempRangeStart(updated);
-                                        return;
-                                    }
-                                    var withStartDate = new Date(tempRangeStart.getFullYear(), tempRangeStart.getMonth(), tempRangeStart.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                    setTempRangeStart(withStartDate);
-                                }, dateFormat: dateFormat, disabled: disabled || !tempRangeStart })) : (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: function (t) {
-                                    if (!t) {
-                                        setTempRangeStart(null);
-                                        return;
-                                    }
-                                    setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
-                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))),
-                        react_1.default.createElement(react_2.Box, null,
-                            react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "End time"),
-                            shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: endTimeBaseDate, onChange: function (updated) {
-                                    if (!tempRangeEnd) {
-                                        setTempRangeEnd(updated);
-                                        return;
-                                    }
-                                    var withEndDate = new Date(tempRangeEnd.getFullYear(), tempRangeEnd.getMonth(), tempRangeEnd.getDate(), updated.getHours(), updated.getMinutes(), 0, 0);
-                                    setTempRangeEnd(withEndDate);
-                                }, dateFormat: dateFormat, disabled: disabled || !tempRangeEnd })) : (react_1.default.createElement(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: function (t) {
-                                    if (!t) {
-                                        setTempRangeEnd(null);
-                                        return;
-                                    }
-                                    setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))))),
-                    react_1.default.createElement(react_2.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] },
-                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear }, "Clear"),
-                        react_1.default.createElement(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose }, "Apply"))))),
-        error && errorMessage && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: triggerRef, as: "div", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.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" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.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], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { 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))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { 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 })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeStart, onChange: (t) => {
+                                                        if (!t) {
+                                                            setTempRangeStart(null);
+                                                            return;
+                                                        }
+                                                        setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1, children: "End time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { 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 })) : ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempRangeEnd, onChange: (t) => {
+                                                        if (!t) {
+                                                            setTempRangeEnd(null);
+                                                            return;
+                                                        }
+                                                        setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.RangeDatePicker = RangeDatePicker;
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { SingleDatePickerProps } from "./DatePickerProps";
 export declare const SingleDatePicker: React.FC<SingleDatePickerProps>;
 export default SingleDatePicker;
+//# sourceMappingURL=SingleDatePicker.d.ts.map

package/dist/Components/DatePicker/SingleDatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleDatePicker.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/SingleDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AA6BlG,OAAO,EAAE,qBAAqB,EAAc,MAAM,mBAAmB,CAAC;AA2OtE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+7B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}