pixelize-design-library 2.2.51 → 2.2.53

package/dist/Components/DatePicker/CalendarPanel.js

@@ -13,6 +13,8 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var CalendarPanel = function (_a) {
     var currentMonth = _a.currentMonth, setCurrentMonth = _a.setCurrentMonth, today = _a.today, isRange = _a.isRange, tempDate = _a.tempDate, tempRangeStart = _a.tempRangeStart, tempRangeEnd = _a.tempRangeEnd, isSameDay = _a.isSameDay, isBefore = _a.isBefore, isAfter = _a.isAfter, minDate = _a.minDate, maxDate = _a.maxDate, disablePastDates = _a.disablePastDates, disableFutureDates = _a.disableFutureDates, disableToday = _a.disableToday, onDaySelect = _a.onDaySelect, renderWeekdays = _a.renderWeekdays;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
     var renderDays = function () {
         var monthStart = (0, date_fns_1.startOfMonth)(currentMonth);
         var monthEnd = (0, date_fns_1.endOfMonth)(currentMonth);
@@ -96,8 +98,15 @@ var CalendarPanel = function (_a) {
                     var year = new Date().getFullYear() - 50 + i;
                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                 }))),
-            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
-                react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 20 }))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 2 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "sm", color: "gray.600", py: 2 }, day)); }))),
+            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
+                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
+                        setCurrentMonth(function (_prev) { return new Date(today.getFullYear(), today.getMonth(), 1); });
+                        if (!disableToday) {
+                            onDaySelect(new Date(today));
+                        }
+                    }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
+                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), prev.getMonth() + 1, 1); }); }, "aria-label": "Next month" },
+                    react_1.default.createElement(lucide_react_1.ChevronRightIcon, { size: 20 })))), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 2 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day, fontSize: "sm", color: "gray.600", py: 2 }, day)); }))),
         renderDays()));
 };
 exports.CalendarPanel = CalendarPanel;

package/dist/Components/DatePicker/DatePicker.js

@@ -75,6 +75,8 @@ function CustomDatePicker(props) {
     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 popoverRef = (0, react_1.useRef)(null);
+    var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
+        currentMonth.getMonth() === today.getMonth();
     var handleOpen = function () {
         if (!isRange && !selectedDate) {
             // setTempDate(new Date());
@@ -234,8 +236,15 @@ function CustomDatePicker(props) {
                                     var year = new Date().getFullYear() - 50 + i;
                                     return (react_1.default.createElement("option", { key: year, value: year }, year));
                                 }))),
-                            react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
-                                react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
+                            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
+                                !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
+                                        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 }, "Today")),
+                                react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
+                                    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

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -266,10 +266,10 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
     return { value: buf, completed: buf.length >= segmentLength };
 };
 var SingleDatePicker = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    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, _k = props.dateFormat, dateFormat = _k === void 0 ? "dd/MM/yyyy" : _k, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _l = props.autoComplete, autoComplete = _l === void 0 ? "off" : _l, disabled = props.disabled, _m = props.width, width = _m === void 0 ? "100%" : _m, _o = props.disableToday, disableToday = _o === void 0 ? false : _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    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, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _p = (0, react_2.useDisclosure)(), isOpen = _p.isOpen, onOpen = _p.onOpen, onClose = _p.onClose;
+    var _q = (0, react_2.useDisclosure)(), isOpen = _q.isOpen, onOpen = _q.onOpen, onClose = _q.onClose;
     var inputRef = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
@@ -327,18 +327,18 @@ var SingleDatePicker = function (props) {
         resolvedDateFormat.toLowerCase().includes("mm") ||
         resolvedDateFormat.toLowerCase().includes("ss");
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _q = (0, react_1.useState)(selectedDate
+    var _r = (0, react_1.useState)(selectedDate
         ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
             ? tomorrow
             : selectedDate
         : disableToday
             ? tomorrow
-            : today), currentMonth = _q[0], setCurrentMonth = _q[1];
-    var _r = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _r[0], setTempDate = _r[1];
-    var _s = (0, react_1.useState)(""), inputValue = _s[0], setInputValue = _s[1];
-    var _t = (0, react_1.useState)(false), isTyping = _t[0], setIsTyping = _t[1];
-    var _u = (0, react_1.useState)(false), isMaskActive = _u[0], setIsMaskActive = _u[1];
-    var _v = (0, react_1.useState)(0), currentSegmentIndex = _v[0], setCurrentSegmentIndex = _v[1];
+            : today), currentMonth = _r[0], setCurrentMonth = _r[1];
+    var _s = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _s[0], setTempDate = _s[1];
+    var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
+    var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
+    var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
+    var _w = (0, react_1.useState)(0), currentSegmentIndex = _w[0], setCurrentSegmentIndex = _w[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -948,11 +948,11 @@ var SingleDatePicker = function (props) {
                         react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
                                 borderColor: error ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500] : theme.colors.primary[500],
                                 boxShadow: error
-                                    ? "0 0 0 1px ".concat((_g = (_f = theme.colors.semantic) === null || _f === void 0 ? void 0 : _f.error) === null || _g === void 0 ? void 0 : _g[500])
-                                    : "0 0 0 1px ".concat(theme.colors.primary[500]),
+                                    ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
+                                    : "0 0 0 0.125rem ".concat((_g = theme.colors.boxShadow) === null || _g === void 0 ? void 0 : _g.primary),
                             }, _hover: {
                                 borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
-                            }, cursor: "text" }),
+                            }, cursor: "text", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
                         react_1.default.createElement(react_2.InputRightElement, { pr: 3, pointerEvents: "auto", onClick: function (e) {
                                 e.stopPropagation();
                                 if (!isOpen) {

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -69,6 +69,9 @@ var TimeOnlyPicker = function (props) {
         // Do not close; user asked only outside-click and OK to close
     };
     var handleOk = function () {
+        var commitValue = tempDate !== null && tempDate !== void 0 ? tempDate : new Date(resolvedTempDate.getFullYear(), resolvedTempDate.getMonth(), resolvedTempDate.getDate(), resolvedTempDate.getHours(), resolvedTempDate.getMinutes(), resolvedTempDate.getSeconds(), resolvedTempDate.getMilliseconds());
+        setTempDate(commitValue);
+        props.onChange(commitValue);
         onClose();
     };
     (0, react_1.useEffect)(function () {

package/dist/Components/DatePicker/TimePickerInput.js

@@ -111,7 +111,9 @@ var caretFromDigitIndex = function (digitIndex, digitsLen) {
         return 3;
     return digitIndex + 1;
 };
-var formatToPlaceholder = function (formatStr) { return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM"); };
+var formatToPlaceholder = function (formatStr) {
+    return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
+};
 var TimePickerInput = function (_a) {
     var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -123,6 +125,8 @@ var TimePickerInput = function (_a) {
     var _e = (0, react_1.useState)("hour"), activeSegment = _e[0], setActiveSegment = _e[1];
     var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
     var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
+    var ampmRef = (0, react_1.useRef)("AM");
+    var _f = (0, react_1.useState)(""), ampm = _f[0], setAmpm = _f[1];
     var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
         requestAnimationFrame(function () {
             var el = inputRef.current;
@@ -142,7 +146,8 @@ var TimePickerInput = function (_a) {
         var nextDigitIndex = Math.max(0, Math.min(desiredDigitIndex, maxDigitIndex));
         setInputValueAndCaret(formatted, nextDigitIndex);
         if (clamped.length === 4) {
-            var parsed = (0, date_fns_1.parse)(formatted, dateFormat, new Date());
+            var formattedInput = is12Hour ? "".concat(formatted, " ").concat(ampmRef.current || "AM") : formatted;
+            var parsed = (0, date_fns_1.parse)(formattedInput, dateFormat, new Date());
             if ((0, date_fns_1.isValid)(parsed))
                 onChange(parsed);
         }
@@ -282,6 +287,7 @@ var TimePickerInput = function (_a) {
             var el = inputRef.current;
             if (!el)
                 return;
+            el.value = formatDigits(digitsRef.current);
             el.focus();
             el.setSelectionRange(0, Math.min(2, el.value.length));
         });
@@ -290,8 +296,16 @@ var TimePickerInput = function (_a) {
     var handleBlur = (0, react_1.useCallback)(function () {
         setIsFocused(false);
         isFocusedRef.current = false;
+        var el = inputRef.current;
+        if (el) {
+            var formatted = formatDigits(digitsRef.current);
+            el.value =
+                is12Hour && formatted
+                    ? "".concat(formatted, " ").concat(ampmRef.current || ampm || "AM")
+                    : formatted;
+        }
         onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
+    }, [onBlur, is12Hour, ampm]);
     var handleClick = (0, react_1.useCallback)(function () {
         var _a;
         var el = inputRef.current;
@@ -330,19 +344,33 @@ var TimePickerInput = function (_a) {
     }, [applyDigits]);
     (0, react_1.useEffect)(function () {
         if (value) {
-            var newDigits = adjustDigits((0, date_fns_1.format)(value, dateFormat).replace(/\D/g, ""), is12Hour);
+            var formattedValue = (0, date_fns_1.format)(value, dateFormat);
+            var newDigits = adjustDigits(formattedValue.replace(/\D/g, ""), is12Hour);
             digitsRef.current = newDigits;
             setDigits(newDigits);
+            if (is12Hour) {
+                var newAmpm = (0, date_fns_1.format)(value, "a").toUpperCase();
+                ampmRef.current = newAmpm;
+                setAmpm(newAmpm);
+            }
+            else {
+                ampmRef.current = "";
+                setAmpm("");
+            }
             if (!isFocusedRef.current) {
                 var formatted = formatDigits(newDigits);
                 if (inputRef.current) {
-                    inputRef.current.value = formatted;
+                    inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampmRef.current) : formatted;
                 }
             }
         }
         else {
             digitsRef.current = "";
             setDigits("");
+            if (is12Hour) {
+                ampmRef.current = "";
+                setAmpm("");
+            }
             if (inputRef.current && !isFocusedRef.current) {
                 inputRef.current.value = "";
             }
@@ -351,9 +379,9 @@ var TimePickerInput = function (_a) {
     (0, react_1.useEffect)(function () {
         var formatted = formatDigits(digits);
         if (!isFocusedRef.current && inputRef.current) {
-            inputRef.current.value = formatted;
+            inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampm) : formatted;
         }
-    }, [digits]);
+    }, [digits, ampm, is12Hour]);
     return (react_1.default.createElement(react_2.InputGroup, null,
         react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off" }),
         react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none" },

package/package.json

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