pixelize-design-library 2.0.8 → 2.0.10

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/Components/KanbanBoard/AccountCard.js

@@ -50,7 +50,7 @@ var AccountCard = function (_a) {
     var _b = (0, react_1.useState)(false), showMore = _b[0], setShowMore = _b[1];
     var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
     var visibleKeys = showMore ? keys : keys.slice(0, 4);
-    return (react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id, index: index }, function (provided) {
+    return (react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index }, function (provided) {
         var _a, _b, _c, _d, _e, _f;
         return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { width: "16.5rem", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[500], border: "0.1rem solid ".concat((_b = colors.gray) === null || _b === void 0 ? void 0 : _b[200]), p: 2, mt: 3 }),
             react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, fontSize: "0.875rem", color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[700], overflow: "none" },

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -88,17 +88,22 @@ var KanbanBoard = function (_a) {
             });
         }
     };
+    var handleColumnDelete = function (colId) {
+        var _a;
+        var columnIds = ((_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items.map(function (item) { return item.id; })) || [];
+        onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
+    };
     return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
         react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, Object.entries(columns).map(function (_a) {
             var colId = _a[0], column = _a[1];
-            return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId }, function (provided, snapshot) {
+            return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
                         ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
                         : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver ? "0.5px dashed" + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500]) : "0.125rem solid" + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column" }),
                     react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, display: "flex", justifyContent: "space-between" },
                         react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", lineHeight: "100%", letterSpacing: "0%", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(colId); } })),
+                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); } })),
                     react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" },
                         column.items.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
                         provided.placeholder)));

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -17,7 +17,7 @@ export type KanbanBoardProps = {
     data: Record<string, ColumnType>;
     onDelete?: (account: Account) => void;
     onOpen?: (account: Account) => void;
-    onColumnDelete?: (colId: string | number) => void;
+    onColumnDelete?: (colId: (string | number)[]) => void;
     onDrag?: ({ from, to, item, }: {
         from: string;
         to: string;

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.10",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/Components/KaTable/CustomHeader.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type CustomHeaderProps = {
-    column: any;
-    onSortChange?: (sortState: string, columnName: string) => void;
-    menuItems?: Array<{
-        label: string;
-        onClick: () => void;
-        submenu?: any[];
-    }>;
-    isSort?: boolean;
-    sortDirection: string;
-};
-declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
-export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -1,69 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var bs_1 = require("react-icons/bs");
-var fa_1 = require("react-icons/fa");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var CustomHeader = (0, react_1.memo)(function (_a) {
-    var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
-    var handleSortClick = (0, react_1.useCallback)(function () {
-        var sortOrder = "none";
-        if (sortDirection === "none")
-            sortOrder = "asc";
-        else if (sortDirection === "asc")
-            sortOrder = "desc";
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
-    }, [sortDirection, column.key, onSortChange]);
-    return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
-        react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
-        react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-            isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
-            menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
-                react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
-                react_1.default.createElement(react_2.Portal, null,
-                    react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                        react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
-                        item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
-});
-var SortingIcon = (0, react_1.memo)(function (_a) {
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
-        sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
-        sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
-});
-var Submenu = (0, react_1.memo)(function (_a) {
-    var items = _a.items;
-    return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
-            pl: 6,
-            fontSize: "sm",
-            color: "gray.600",
-            _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
-        } }, subItem.label)); })));
-});
-exports.default = CustomHeader;

package/dist/Components/KaTable/KaTable.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import * as TableEnums from "ka-table/enums";
-import * as TableProps from "ka-table/props";
-import * as TableActionCreator from "ka-table/actionCreators";
-import * as TableModel from "ka-table/models";
-import * as TableUtils from "ka-table/utils";
-import * as TableFun from "ka-table";
-import "ka-table/style.css";
-import "./ka-table.css";
-import { KaTableProps } from "./KaTableProps";
-declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, selected, columnVisibility, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, }: KaTableProps) => React.JSX.Element>;
-export default _default;
-export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };

package/dist/Components/KaTable/KaTable.js

@@ -1,111 +0,0 @@
-"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 (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importStar(require("react"));
-var ka_table_1 = require("ka-table");
-var TableEnums = __importStar(require("ka-table/enums"));
-exports.TableEnums = TableEnums;
-var TableProps = __importStar(require("ka-table/props"));
-exports.TableProps = TableProps;
-var TableActionCreator = __importStar(require("ka-table/actionCreators"));
-exports.TableActionCreator = TableActionCreator;
-var TableModel = __importStar(require("ka-table/models"));
-exports.TableModel = TableModel;
-var TableUtils = __importStar(require("ka-table/utils"));
-exports.TableUtils = TableUtils;
-var TableFun = __importStar(require("ka-table"));
-exports.TableFun = TableFun;
-require("ka-table/style.css");
-require("./ka-table.css");
-var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var table_1 = require("../../Utils/table");
-var selectionCellColumn = {
-    key: "select-cell",
-    width: 50,
-    columnFreeze: true,
-    customHeader: false,
-    className: "select-cell",
-};
-var KaTable = function (_a) {
-    var _b, _c;
-    var columns = _a.columns, data = _a.data, _d = _a.rowKey, rowKey = _d === void 0 ? "id" : _d, Edit = _a.Edit, 
-    // sorting,
-    format = _a.format, 
-    // paging,
-    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, selected = _a.selected, columnVisibility = _a.columnVisibility, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_1.useState)([]), sortState = _e[0], setSortState = _e[1];
-    if (checkSelect &&
-        !columns.some(function (column) { return column.key === "select-cell"; })) {
-        columns.unshift(selectionCellColumn);
-    }
-    var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
-    // const columnVisibilitys = columnVisibility ?? false;
-    var handleSort = function (sort) {
-        setSortState(sort);
-    };
-    var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
-    var mergedChildComponents = (0, useMergedChildComponents_1.default)({
-        childComponents: childComponents,
-        onSortChange: handleSort,
-        handleSelection: onSelectionChange,
-        rowKey: rowKey,
-        onRowClick: onRowClick,
-        selected: selected,
-        dataLength: dataLength,
-        columns: columns,
-        headerBgColor: headerBgColor,
-        freezedBgColor: freezedBgColor,
-        headerTextColor: headerTextColor,
-        freezedTextColor: freezedTextColor,
-        sortState: sortState,
-    });
-    return (react_1.default.createElement("div", { style: {
-            borderRadius: "10px 0 0 10px",
-            borderWidth: "0px 0px 0px 5px",
-            borderColor: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[500],
-            boxShadow: theme.shadows.lg,
-        } },
-        react_1.default.createElement(ka_table_1.Table, { columns: columns, data: sortedData, rowKeyField: rowKey, editingMode: Edit, key: columns, sortingMode: TableEnums.SortingMode.MultipleRemote, format: format, 
-            // paging={paging}
-            filteringMode: undefined, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
-                enabled: true,
-            } })));
-};
-exports.default = react_1.default.memo(KaTable);

package/dist/Components/KaTable/KaTableProps.d.ts

@@ -1,23 +0,0 @@
-export type KaTableProps = {
-    columns: any;
-    data: any;
-    rowKey?: any;
-    Edit?: any;
-    format?: (props: any) => void;
-    validation?: (props: any) => void;
-    filter?: any;
-    childComponents?: any;
-    columnReorder?: any;
-    columnResizing?: any;
-    editableCells?: any;
-    loading?: any;
-    checkSelect?: any;
-    onRowClick?: (rowData: any, column: any) => void;
-    onSelectionChange?: (selectedIds: any[]) => void;
-    selected?: any;
-    columnVisibility?: boolean;
-    headerBgColor?: string;
-    headerTextColor?: string;
-    freezedBgColor?: string;
-    freezedTextColor?: string;
-};

package/dist/Components/KaTable/KaTableProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { TableProps } from "./KaTable";
-declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
-    onSelectionChange: (ids: any[], type: string) => void;
-    rowKey: any;
-    selected: any;
-}) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -1,38 +0,0 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var KaTable_1 = require("./KaTable");
-var SelectionCell = function (_a) {
-    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var onChangeHandle = function (event) {
-        if (event.nativeEvent.shiftKey) {
-            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
-        }
-        else {
-            var isChecked = event.currentTarget.checked;
-            var action = isChecked ? "add" : "remove";
-            onSelectionChange(rowKeyValue, action);
-            if (isChecked) {
-                table.selectRow(rowKeyValue);
-            }
-            else {
-                table.deselectRow(rowKeyValue);
-            }
-        }
-    };
-    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
-};
-exports.default = react_1.default.memo(SelectionCell);