pixelize-design-library 2.2.24 → 2.2.25

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -9,7 +9,7 @@ export type ButtonGroupIconProps = {
     onButtongroupClick?: () => void;
     size?: "lg" | "md" | "sm" | "xs";
     variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     buttonGroupStyle?: React.CSSProperties;
     buttonGroupLeftIconStyle?: React.CSSProperties;
     buttonGroupRightIconStyle?: React.CSSProperties;

package/dist/Components/Common/FormLabel.js

@@ -12,7 +12,7 @@ var TextLabel = function (_a) {
     var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_2.Box, null,
-        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem" },
+        react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem", mb: "0" },
             react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
                 label,
                 isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500] } }, "*")),

package/dist/Components/DatePicker/DatePicker.js

@@ -56,9 +56,6 @@ function CustomDatePicker(props) {
     var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
     var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
     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)
@@ -67,46 +64,123 @@ 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 handleOpen = function () {
-        if (!isRange && !selectedDate) {
-            // setTempDate(new Date());
+    var _r = (0, react_1.useState)(false), isManualOpen = _r[0], setIsManualOpen = _r[1];
+    // Initialize input value based on selected date
+    (0, react_1.useEffect)(function () {
+        if (!isRange) {
+            if (selectedDate instanceof Date) {
+                setTempDate(new Date(selectedDate));
+                setInputValue((0, date_fns_1.format)(selectedDate, dateFormat));
+            }
+            else {
+                setTempDate(null);
+                setInputValue("");
+            }
+        }
+    }, [selectedDate, isRange, disableToday, dateFormat]);
+    var handleInputChange = function (e) {
+        var value = e.target.value;
+        setInputValue(value);
+        setIsTyping(true);
+    };
+    var handleInputKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            e.currentTarget.blur();
+        }
+    };
+    var handleInputBlur = function () {
+        setIsTyping(false);
+        if (!inputValue.trim()) {
+            setTempDate(null);
+            props.onChange(null);
+            return;
+        }
+        try {
+            var parsed = (0, date_fns_1.parse)(inputValue, dateFormat, new Date());
+            if ((0, date_fns_1.isValid)(parsed)) {
+                var isValidDate = true;
+                if (minDate && (0, date_fns_1.isBefore)(parsed, minDate))
+                    isValidDate = false;
+                if (maxDate && (0, date_fns_1.isAfter)(parsed, maxDate))
+                    isValidDate = false;
+                if (disablePastDates && (0, date_fns_1.isBefore)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
+                    isValidDate = false;
+                if (disableFutureDates && (0, date_fns_1.isAfter)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
+                    isValidDate = false;
+                if (disableToday && (0, date_fns_1.isSameDay)(parsed, today))
+                    isValidDate = false;
+                if (isValidDate) {
+                    var finalDate = parsed;
+                    if (showTime && tempDate) {
+                        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));
+                    props.onChange(finalDate);
+                    return;
+                }
+            }
+        }
+        catch (error) {
+            // Parsing failed
+        }
+        if (tempDate) {
+            setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
+        }
+        else {
+            setInputValue("");
+            setTempDate(null);
+            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());
         }
-        if (showTime) {
-            // setTempDate(new Date()); // add new
-            //  setTempDate(disableToday ? tomorrow : new Date());
-            // console.log(selectedDate,"selectedDateselectedDate")
-            setTempDate(disableToday ? tomorrow : selectedDate ? selectedDate : new Date());
+        // Toggle popover
+        if (isOpen) {
+            onClose();
+        }
+        else {
+            onOpen();
         }
-        onOpen();
     };
     (0, react_1.useEffect)(function () {
         if (!isRange) {
             if (selectedDate instanceof Date) {
                 setTempDate(new Date(selectedDate));
-                // const corrected = disableToday && isSameDay(selectedDate, today)
-                //   ? tomorrow
-                //   : selectedDate;
-                // setTempDate(new Date(corrected));
+                setInputValue((0, date_fns_1.format)(selectedDate, dateFormat));
             }
             else {
                 setTempDate(null);
-                // setTempDate(disableToday ? tomorrow : null);
+                setInputValue("");
             }
         }
-    }, [selectedDate, isRange, disableToday]);
+    }, [selectedDate, isRange, disableToday, dateFormat]);
     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;
         }
@@ -133,6 +207,7 @@ function CustomDatePicker(props) {
                 ? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
                 : updated;
             setTempDate(updatedDate);
+            setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
             props.onChange(updatedDate);
         }
     };
@@ -185,19 +260,19 @@ function CustomDatePicker(props) {
             : tempRangeStart
                 ? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " -")
                 : ""
-        : tempDate
-            ? (0, date_fns_1.format)(tempDate, dateFormat)
-            : "";
+        : isTyping
+            ? inputValue
+            : 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))) {
-                if (tempDate) {
-                    props.onChange(tempDate); // add new
-                }
                 onClose();
+                setIsManualOpen(false);
             }
         };
         if (isOpen) {
@@ -209,13 +284,13 @@ function CustomDatePicker(props) {
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [isOpen, onClose, props, tempDate]);
+    }, [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", initialFocusRef: inputRef, closeOnBlur: true },
+        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.PopoverTrigger, null,
-                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.Box, { onClick: handleTriggerClick },
+                    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,
                     showDate && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -238,34 +313,21 @@ 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 ?? 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) {
+                    !isRange && showTime && (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: function (updatedDate) {
                             setTempDate(updatedDate);
+                            setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
                             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);
-                                // setTempDate(disableToday ? tomorrow : null);
+                                setInputValue("");
                                 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 () {

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -80,15 +80,15 @@ function ProfilePhotoViewer(_a) {
                     transition: "opacity 0.3s",
                 } },
                 isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
                             transform: "scale(1.1)",
-                            color: theme.colors.gray[300],
+                            color: theme.colors.white,
                             boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
                         } }))),
                 isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
                             transform: "scale(1.1)",
-                            color: theme.colors.gray[300],
+                            color: theme.colors.white,
                             boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
                         } })))),
             isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));

package/dist/Components/SearchSelect/SearchSelect.js

@@ -217,15 +217,14 @@ var SearchSelect = function (_a) {
                     ? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
                             ? item.label.slice(0, chip.maxText) + '…'
                             : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
-                    : selectedValues.length === 1 &&
-                        inputValue === '' && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
+                    : selectedValues.length === 1 && !isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
                 (chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
                     isMultiple &&
                     selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
-                (isMultiple || inputValue || !selectedValues.length || !isMultiple) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
+                (isMultiple || inputValue || !selectedValues.length || isOpen) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
                         setFocused(true);
                         setIsOpen(true);
-                    }, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length ? "" : placeholder })),
+                    }, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })),
                 react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
                     isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
                         react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";

package/dist/index.js

@@ -1,5 +1,4 @@
 "use strict";
-// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
+require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));

package/package.json

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