pixelize-design-library 2.0.8 → 2.0.9

package/dist/Components/Checkbox/Checkbox.js

@@ -13,7 +13,7 @@ function CheckBox(_a) {
     var label = _a.label, spacing = _a.spacing, isInvalid = _a.isInvalid, color = _a.color, iconColor = _a.iconColor, iconSize = _a.iconSize, isChecked = _a.isChecked, isIndeterminate = _a.isIndeterminate, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, sx = _a.sx, isRequired = _a.isRequired, error = _a.error, errorMessage = _a.errorMessage, isInformation = _a.isInformation, informationMessage = _a.informationMessage, id = _a.id, helperText = _a.helperText;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.FormControl, { isInvalid: error },
-        react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, isRequired: isRequired, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
+        react_1.default.createElement(react_2.Checkbox, { spacing: spacing, isInvalid: isInvalid, isRequired: isRequired, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], sx: sx, display: "flex", alignItems: "inherit" }, label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }))),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/DatePicker/DatePicker.js

@@ -62,17 +62,23 @@ function CustomDatePicker(props) {
     var _k = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _k[0], setTempDate = _k[1];
     var _l = (0, react_1.useState)(rangeStart), tempRangeStart = _l[0], setTempRangeStart = _l[1];
     var _m = (0, react_1.useState)(rangeEnd), tempRangeEnd = _m[0], setTempRangeEnd = _m[1];
-    // ✅ Ensure default tempDate if null and pickerType is "time"
+    var popoverRef = (0, react_1.useRef)(null);
+    var handleOpen = function () {
+        if (!isRange && !selectedDate) {
+            setTempDate(new Date());
+        }
+        onOpen();
+    };
     (0, react_1.useEffect)(function () {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
             }
-            else if (resolvedPickerType === "time" || resolvedPickerType === "datetime") {
-                setTempDate(new Date());
+            else {
+                setTempDate(null);
             }
         }
-    }, [selectedDate, isRange, resolvedPickerType]);
+    }, [selectedDate, isRange]);
     var handleDaySelect = function (day) {
         var updated = new Date(day);
         if (isRange) {
@@ -93,8 +99,7 @@ function CustomDatePicker(props) {
             setTempDate(function (prev) {
                 if (!prev)
                     return updated;
-                var newDateWithTime = new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), prev.getHours(), prev.getMinutes(), prev.getSeconds());
-                return newDateWithTime;
+                return new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), prev.getHours(), prev.getMinutes(), prev.getSeconds());
             });
         }
     };
@@ -149,28 +154,32 @@ function CustomDatePicker(props) {
         : tempDate
             ? (0, date_fns_1.format)(tempDate, dateFormat)
             : "";
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            var _a;
+            if (popoverRef.current &&
+                !popoverRef.current.contains(event.target) &&
+                !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose]);
     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, onClose: onClose, placement: "bottom-start", modifiers: [
-                {
-                    name: "flip",
-                    enabled: true,
-                    options: {
-                        fallbackPlacements: ["top-start", "right-start", "left-start"],
-                    },
-                },
-                {
-                    name: "preventOverflow",
-                    enabled: true,
-                    options: {
-                        boundary: "viewport",
-                    },
-                },
-            ] },
+        react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true },
             react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, { onClick: onOpen },
+                react_1.default.createElement(react_2.Box, { onClick: handleOpen },
                     react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
-            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2 },
+            react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
                 react_1.default.createElement(react_2.PopoverBody, null,
                     showDate && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mb: 2 },
@@ -187,8 +196,7 @@ function CustomDatePicker(props) {
                         } })),
                     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 () {
-                                var now = new Date();
-                                setTempDate(now);
+                                setTempDate(null);
                                 setTempRangeStart(null);
                                 setTempRangeEnd(null);
                                 setRangeStart(null);
@@ -201,10 +209,7 @@ function CustomDatePicker(props) {
                                 if (isRange && tempRangeStart && tempRangeEnd) {
                                     setRangeStart(tempRangeStart);
                                     setRangeEnd(tempRangeEnd);
-                                    props.onChange({
-                                        from: tempRangeStart,
-                                        to: tempRangeEnd,
-                                    });
+                                    props.onChange({ from: tempRangeStart, to: tempRangeEnd });
                                 }
                                 else if (!isRange && tempDate) {
                                     props.onChange(tempDate);

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

@@ -25,12 +25,13 @@ export interface SingleDatePickerProps extends BaseDatePickerProps {
     selectedDate?: Date | null;
     onChange: (date: Date | null) => void;
 }
+export interface RangeDate {
+    from: Date | null;
+    to: Date | null;
+}
 export interface RangeDatePickerProps extends BaseDatePickerProps {
     isRange: true;
-    selectedDate?: Date | null;
-    onChange: ((date: Date | null) => void) | ((range: {
-        from: Date | null;
-        to: Date | null;
-    } | null) => void);
+    selectedDate?: RangeDate | null;
+    onChange: (range: RangeDate | null) => void;
 }
 export type DatePickerProps = SingleDatePickerProps | RangeDatePickerProps;

package/dist/Components/DatePicker/TimePicker.js

@@ -24,7 +24,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var padZero = function (num) { return (num < 10 ? "0".concat(num) : "".concat(num)); };
 var TimePicker = function (_a) {
     var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
     var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
@@ -36,12 +35,9 @@ var TimePicker = function (_a) {
         setMinute(date.getMinutes());
     }, [date]);
     var convertTo24Hour = function (hr, meridiem) {
-        if (meridiem === "AM") {
+        if (meridiem === "AM")
             return hr === 12 ? 0 : hr;
-        }
-        else {
-            return hr === 12 ? 12 : hr + 12;
-        }
+        return hr === 12 ? 12 : hr + 12;
     };
     var updateTime = function (hrInput, min, meridiem) {
         var newHour = is12HourFormat ? convertTo24Hour(hrInput, meridiem || ampm) : hrInput;
@@ -70,8 +66,7 @@ var TimePicker = function (_a) {
         setMinute(min);
         updateTime(hour, min, ampm);
     };
-    var handleAmpmToggle = function (e) {
-        e.preventDefault();
+    var handleAmpmToggle = function () {
         var newMeridiem = ampm === "AM" ? "PM" : "AM";
         var displayHr = hour % 12 === 0 ? 12 : hour % 12;
         var newHr = convertTo24Hour(displayHr, newMeridiem);
@@ -80,9 +75,9 @@ var TimePicker = function (_a) {
     };
     var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
     return (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "1.25rem" } },
-        react_1.default.createElement("input", { type: "number", value: padZero(displayHour), onChange: handleHourChange, min: is12HourFormat ? 1 : 0, max: is12HourFormat ? 12 : 23, style: { width: "3rem", textAlign: "center" } }),
+        react_1.default.createElement("input", { type: "number", value: displayHour, onChange: handleHourChange, min: is12HourFormat ? 1 : 0, max: is12HourFormat ? 12 : 23, style: { width: "3rem", textAlign: "center" } }),
         ":",
-        react_1.default.createElement("input", { type: "number", value: padZero(minute), onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
-        is12HourFormat && (react_1.default.createElement("button", { onClick: function () { return handleAmpmToggle; }, style: { fontWeight: "bold", padding: "0.25rem 0.5rem" } }, ampm))));
+        react_1.default.createElement("input", { type: "number", value: minute, onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
+        is12HourFormat && (react_1.default.createElement("button", { onClick: handleAmpmToggle, style: { fontWeight: "bold", padding: "0.25rem 0.5rem" } }, ampm))));
 };
 exports.default = TimePicker;

package/dist/Components/Input/TextInput.styles.js

@@ -39,24 +39,31 @@ exports.Input = {
                     borderColor: borderColor,
                     _hover: {
                         borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
                     },
                     _focus: {
                         borderColor: primary,
                         boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
+                        outline: "0"
                     },
                     _invalid: {
                         borderColor: errorColor,
                         boxShadow: "0 0 0 0.125rem ".concat(shadowError),
                         _hover: {
                             borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
                         },
                         _focus: {
                             borderColor: errorColor,
                             boxShadow: "0 0 0 0.125rem ".concat(shadowError),
+                            outline: "0"
                         },
                     },
+                    _readOnly: {
+                        boxShadow: 'inherit',
+                    },
                 },
             };
         },

package/dist/Pages/datePick.js

@@ -29,32 +29,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var DatePicker_1 = __importDefault(require("../Components/DatePicker/DatePicker"));
 var DatePick = function () {
-    var _a = (0, react_1.useState)(new Date()), selectedDate = _a[0], setSelectedDate = _a[1];
+    var _a = (0, react_1.useState)(null), selectedDate = _a[0], setSelectedDate = _a[1];
+    var _b = (0, react_1.useState)(null), selectedTime = _b[0], setSelectedTime = _b[1];
+    var _c = (0, react_1.useState)(null), selectedDateTime = _c[0], setSelectedDateTime = _c[1];
+    var _d = (0, react_1.useState)(null), selectedDateRange = _d[0], setSelectedDateRange = _d[1];
     var handleDateChange = function (value) {
-        console.log("Date change event:", value);
-        if (!value) {
-            console.log("Date cleared");
-            return;
-        }
-        if ("from" in value && "to" in value) {
-            var from = value.from, to = value.to;
-            if (from && to) {
-                console.log("Range selected:", from, to);
-            }
-            else {
-                console.log("Incomplete range selected:", value);
-            }
+        setSelectedDate(value);
+        console.log("Date selected:", value);
+    };
+    var handleTimeChange = function (value) {
+        setSelectedTime(value);
+        console.log("Time selected:", value);
+    };
+    var handleDateTimeChange = function (value) {
+        setSelectedDateTime(value);
+        console.log("DateTime selected:", value);
+    };
+    var handleDateRangeChange = function (value) {
+        if (value && "from" in value && "to" in value) {
+            setSelectedDateRange(value);
+            console.log("Date range selected:", value.from, value.to);
         }
         else {
-            setSelectedDate(value);
-            console.log("Date selected:", value);
+            setSelectedDateRange(null);
+            console.log("Date range cleared");
         }
     };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("h2", null, "Single Date Picker"),
-        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "HH:mm", pickerType: "time", width: "300px" }),
+        react_1.default.createElement("h2", null, "Date "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDate, onChange: handleDateChange, dateFormat: "dd/MM/yyyy", pickerType: "date", width: "300px", error: true, errorMessage: "Invalid date" }),
+        react_1.default.createElement("h2", null, "time "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedTime, onChange: handleTimeChange, dateFormat: "HH:mm", pickerType: "time", width: "300px", error: true, errorMessage: "Invalid date" }),
+        react_1.default.createElement("h2", null, "datetime "),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy HH:mm", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
         react_1.default.createElement("br", null),
         react_1.default.createElement("h2", null, "Date Range Picker"),
-        react_1.default.createElement(DatePicker_1.default, { isRange: true, dateFormat: "dd/MM/yyyy", pickerType: "datetime", onChange: handleDateChange })));
+        react_1.default.createElement(DatePicker_1.default, { isRange: true, dateFormat: "dd/MM/yyyy", pickerType: "date", onChange: handleDateRangeChange, selectedDate: selectedDateRange, width: "300px", error: true, errorMessage: "Invalid date" })));
 };
 exports.default = DatePick;

package/package.json

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