pixelize-design-library 2.2.38 → 2.2.39

package/dist/Components/DatePicker/DatePicker.js

@@ -55,7 +55,11 @@ function CustomDatePicker(props) {
     var tomorrow = (0, date_fns_1.addDays)(today, 1);
     var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
+    var formatHasTime = dateFormat.toLowerCase().includes("hh") || dateFormat.toLowerCase().includes("mm") || dateFormat.toLowerCase().includes("ss");
     var selectedDate = !isRange ? props.selectedDate : null;
+    // const [currentMonth, setCurrentMonth] = useState<Date>(
+    //   isRange ? new Date() : selectedDate ?? new Date()
+    // );
     var _g = (0, react_1.useState)(isRange ? new Date() :
         selectedDate
             ? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
@@ -64,12 +68,30 @@ function CustomDatePicker(props) {
     var _j = (0, react_1.useState)(null), rangeEnd = _j[0], setRangeEnd = _j[1];
     var _k = (0, react_1.useState)(true), selectingStart = _k[0], setSelectingStart = _k[1];
     var _l = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _l[0], setTempDate = _l[1];
+    //   const [tempDate, setTempDate] = useState<Date | null>(
+    //   selectedDate
+    //     ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
+    //     : (disableToday ? tomorrow : null)
+    // );
     var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
     var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
     var _p = (0, react_1.useState)(""), inputValue = _p[0], setInputValue = _p[1];
     var _q = (0, react_1.useState)(false), isTyping = _q[0], setIsTyping = _q[1];
     var popoverRef = (0, react_1.useRef)(null);
-    var _r = (0, react_1.useState)(false), isManualOpen = _r[0], setIsManualOpen = _r[1];
+    var triggerRef = (0, react_1.useRef)(null);
+    var handleOpen = function () {
+        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();
+    };
     // Initialize input value based on selected date
     (0, react_1.useEffect)(function () {
         if (!isRange) {
@@ -87,12 +109,31 @@ function CustomDatePicker(props) {
         var value = e.target.value;
         setInputValue(value);
         setIsTyping(true);
+        if (!value.trim()) {
+            setTempDate(null);
+            setTempRangeStart(null);
+            setTempRangeEnd(null);
+            setRangeStart(null);
+            setRangeEnd(null);
+            setSelectingStart(true);
+            props.onChange(null);
+            setIsTyping(false);
+            onClose();
+            return;
+        }
     };
     var handleInputKeyDown = function (e) {
         if (e.key === 'Enter') {
             e.currentTarget.blur();
         }
     };
+    var handleInputFocus = function (e) {
+        e.stopPropagation();
+        setIsTyping(true);
+        if (!isOpen) {
+            onOpen();
+        }
+    };
     var handleInputBlur = function () {
         setIsTyping(false);
         if (!inputValue.trim()) {
@@ -116,13 +157,10 @@ function CustomDatePicker(props) {
                     isValidDate = false;
                 if (isValidDate) {
                     var finalDate = parsed;
-                    if (showTime && tempDate) {
+                    // Only preserve previous time if the input format does NOT include time tokens
+                    if (showTime && tempDate && !formatHasTime) {
                         finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
                     }
-                    else if (showTime && !tempDate) {
-                        var now = new Date();
-                        finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
-                    }
                     setTempDate(finalDate);
                     setCurrentMonth(finalDate);
                     setInputValue((0, date_fns_1.format)(finalDate, dateFormat));
@@ -131,9 +169,7 @@ function CustomDatePicker(props) {
                 }
             }
         }
-        catch (error) {
-            // Parsing failed
-        }
+        catch (_a) { }
         if (tempDate) {
             setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
         }
@@ -143,44 +179,25 @@ function CustomDatePicker(props) {
             props.onChange(null);
         }
     };
-    var handleInputFocus = function (e) {
-        e.stopPropagation();
-        setIsTyping(true);
-        // Only open on focus if it's not already open and not a manual click
-        if (!isOpen && !isManualOpen) {
-            onOpen();
-        }
-        setIsManualOpen(false);
-    };
-    var handleTriggerClick = function (e) {
-        e.stopPropagation();
-        setIsManualOpen(true);
-        // Initialize tempDate if needed
-        if (!isRange && !tempDate) {
-            setTempDate(disableToday ? tomorrow : new Date());
-        }
-        // Toggle popover
-        if (isOpen) {
-            onClose();
-        }
-        else {
-            onOpen();
-        }
-    };
     (0, react_1.useEffect)(function () {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
-                setInputValue((0, date_fns_1.format)(selectedDate, dateFormat));
+                // const corrected = disableToday && isSameDay(selectedDate, today)
+                //   ? tomorrow
+                //   : selectedDate;
+                // setTempDate(new Date(corrected));
             }
             else {
                 setTempDate(null);
-                setInputValue("");
+                // setTempDate(disableToday ? tomorrow : null);
             }
         }
-    }, [selectedDate, isRange, disableToday, dateFormat]);
+    }, [selectedDate, isRange, disableToday]);
     var handleDaySelect = function (day) {
+        // const updated = new Date(day);
         var updated = new Date(day);
+        // 👇 Redirect selection from today → tomorrow
         if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
             updated = tomorrow;
         }
@@ -208,6 +225,7 @@ function CustomDatePicker(props) {
                 : updated;
             setTempDate(updatedDate);
             setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
+            setIsTyping(false);
             props.onChange(updatedDate);
         }
     };
@@ -267,12 +285,17 @@ function CustomDatePicker(props) {
                 : "";
     (0, react_1.useEffect)(function () {
         var handleClickOutside = function (event) {
-            var _a;
+            var _a, _b;
             if (popoverRef.current &&
                 !popoverRef.current.contains(event.target) &&
-                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+                !((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+                if (tempDate) {
+                    props.onChange(tempDate); // add new
+                    setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
+                    setIsTyping(false);
+                }
                 onClose();
-                setIsManualOpen(false);
             }
         };
         if (isOpen) {
@@ -284,12 +307,21 @@ function CustomDatePicker(props) {
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [isOpen, onClose]);
+    }, [isOpen, onClose, props, tempDate]);
     return (react_1.default.createElement(react_2.Box, { width: width, position: "relative" },
         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, onOpen: onOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: false },
+        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: false },
             react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, { onClick: handleTriggerClick },
+                react_1.default.createElement(react_2.Box, { ref: triggerRef, onMouseDown: function (e) {
+                        e.stopPropagation();
+                        if (!isOpen) {
+                            handleOpen();
+                        }
+                    }, onClick: function (e) {
+                        // Prevent Chakra PopoverTrigger from toggling (which would immediately close after open)
+                        e.preventDefault();
+                        e.stopPropagation();
+                    } },
                     react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, onChange: !isRange ? handleInputChange : undefined, onKeyDown: !isRange ? handleInputKeyDown : undefined, onFocus: !isRange ? handleInputFocus : undefined, onBlur: !isRange ? handleInputBlur : undefined, isReadOnly: isRange, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
             react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
                 react_1.default.createElement(react_2.PopoverBody, null,
@@ -313,21 +345,36 @@ function CustomDatePicker(props) {
                                 react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
                         react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
                         renderDays())),
-                    !isRange && showTime && (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: function (updatedDate) {
+                    !isRange && showTime && (react_1.default.createElement(TimePicker_1.default
+                    // 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);
+                        //   (props as any).onChange(corrected);
+                        // }}
+                        onChange: function (updatedDate) {
                             setTempDate(updatedDate);
                             setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
+                            setIsTyping(false);
                             props.onChange(updatedDate);
                         } })),
                     react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
                         react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
                                 setTempDate(null);
-                                setInputValue("");
+                                // setTempDate(disableToday ? tomorrow : null);
                                 setTempRangeStart(null);
                                 setTempRangeEnd(null);
                                 setRangeStart(null);
                                 setRangeEnd(null);
                                 setSelectingStart(true);
                                 props.onChange(null);
+                                // (props as any).onChange(disableToday ? tomorrow : null);
                                 onClose();
                             } }, "Clear"),
                         react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
@@ -338,6 +385,8 @@ function CustomDatePicker(props) {
                                 }
                                 else if (!isRange && tempDate) {
                                     props.onChange(tempDate);
+                                    setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
+                                    setIsTyping(false);
                                 }
                                 onClose();
                             } }, "OK")))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.38",
+  "version": "2.2.39",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",