pixelize-design-library 2.1.73 → 2.1.75

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ApexDonutChartProps } from "./ApexDonutChartProps";
+declare const ApexDonutChart: ({ data, labels, title, titlePosition, height, width, donutColors, chartColor, titleStyle, legendStyle, }: ApexDonutChartProps) => React.JSX.Element;
+export default ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ApexDonutChart = function (_a) {
+    var _b;
+    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _f, _g = _a.legendStyle, legendStyle = _g === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _g;
+    var options = {
+        chart: {
+            type: "donut",
+        },
+        labels: labels,
+        colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"],
+        legend: {
+            position: legendStyle.position,
+            labels: {
+                colors: legendStyle.colors,
+                useSeriesColors: legendStyle.useSeriesColors,
+            },
+        },
+        title: {
+            text: title,
+            align: titlePosition,
+            style: __assign(__assign({}, titleStyle), { fontSize: (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize)
+                    ? String(titleStyle.fontSize) // ✅ ensures string if number passed
+                    : undefined }),
+        },
+        dataLabels: {
+            enabled: true,
+        },
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "donut", height: height, width: width })));
+};
+exports.default = ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.d.ts

@@ -0,0 +1,21 @@
+export type ApexDonutChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    donutColors?: string[];
+    chartColor?: string[];
+    titleStyle?: {
+        color?: string;
+        fontSize?: string | number;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.js

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

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 import { ApexPieChartProps } from "./ApexPieChartProps";
-export default function ApexPieChart({ data, labels, title, titlePosition, height, width, chartColor, titleStyle, }: ApexPieChartProps): React.JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
+export default ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -1,29 +1,126 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 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 react_apexcharts_1 = __importDefault(require("react-apexcharts"));
-function ApexPieChart(_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, chartColor = _a.chartColor, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
+var ApexPieChart = function (_a) {
+    var _b, _c;
+    var data = _a.data, labels = _a.labels, title = _a.title, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titlePosition, titlePosition = _f === void 0 ? "center" : _f, _g = _a.titleStyle, titleStyle = _g === void 0 ? {
         color: "#3182ce",
-    } : _d;
-    var options = {
-        chart: {
-            type: "pie",
-            height: 350,
-        },
-        labels: labels,
-        title: {
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _g, _h = _a.legendStyle, legendStyle = _h === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _h, _j = _a.variant, variant = _j === void 0 ? "pie" : _j;
+    var extraOptions = {};
+    switch (variant) {
+        case "semi-donut":
+            extraOptions = {
+                plotOptions: {
+                    pie: {
+                        startAngle: -90,
+                        endAngle: 90,
+                        offsetY: 10,
+                    },
+                },
+            };
+            break;
+        case "monochrome-pie":
+            extraOptions = {
+                theme: {
+                    monochrome: {
+                        enabled: true,
+                        shadeTo: "light",
+                        shadeIntensity: 0.65,
+                    },
+                },
+            };
+            break;
+        case "gradient-donut":
+            extraOptions = {
+                fill: {
+                    type: "gradient",
+                },
+            };
+            break;
+        case "donut-with-pattern":
+            extraOptions = {
+                fill: {
+                    type: "pattern",
+                    pattern: {
+                        style: ["verticalLines", "squares", "horizontalLines", "circles"],
+                    },
+                },
+            };
+            break;
+        case "pie-with-image":
+            extraOptions = {
+                fill: {
+                    type: "image",
+                    image: {
+                        src: [
+                            "https://i.imgur.com/UM3mrju.jpg",
+                            "https://i.imgur.com/NpPOqQq.jpg",
+                        ],
+                    },
+                },
+            };
+            break;
+        case "update-donut":
+            extraOptions = {
+                plotOptions: {
+                    pie: {
+                        donut: {
+                            labels: {
+                                show: true,
+                                total: {
+                                    show: true,
+                                    label: "Total",
+                                },
+                            },
+                        },
+                    },
+                },
+            };
+            break;
+        case "pie":
+            extraOptions = {
+                chart: { type: "pie" },
+            };
+            break;
+        default:
+            break;
+    }
+    var options = __assign({ chart: {
+            type: variant.includes("pie") ? "pie" : "donut",
+        }, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
+            position: legendStyle.position,
+            labels: {
+                colors: legendStyle.colors,
+                useSeriesColors: legendStyle.useSeriesColors,
+            },
+        }, title: {
             text: title,
             align: titlePosition,
             style: titleStyle,
-        },
-        colors: chartColor,
-    };
-    var series = data;
+        }, dataLabels: { enabled: true } }, extraOptions);
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "pie", height: height, width: width })));
-}
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: (_c = options.chart) === null || _c === void 0 ? void 0 : _c.type, height: height, width: width })));
+};
 exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -1,41 +1,23 @@
 export type ApexPieChartProps = {
+    variant?: DonutPieVariant;
     data: number[];
     labels: string[];
     title?: string;
-    titlePosition?: "left" | "center" | "right";
     height?: number;
     width?: number;
+    donutColors?: string[];
     chartColor?: string[];
-    titleStyle?: StyleProps;
-};
-type StyleProps = {
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string | number;
-    color?: string;
+    titlePosition?: "left" | "center" | "right";
+    titleStyle?: {
+        color?: string;
+        fontSize?: string;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
 };
-export interface ApexOptions {
-    annotations?: ApexAnnotations;
-    chart?: ApexChart;
-    colors?: any[];
-    dataLabels?: ApexDataLabels;
-    fill?: ApexFill;
-    forecastDataPoints?: ApexForecastDataPoints;
-    grid?: ApexGrid;
-    labels?: string[];
-    legend?: ApexLegend;
-    markers?: ApexMarkers;
-    noData?: ApexNoData;
-    plotOptions?: ApexPlotOptions;
-    responsive?: ApexResponsive[];
-    series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
-    states?: ApexStates;
-    stroke?: ApexStroke;
-    subtitle?: ApexTitleSubtitle;
-    theme?: ApexTheme;
-    title?: ApexTitleSubtitle;
-    tooltip?: ApexTooltip;
-    xaxis?: ApexXAxis;
-    yaxis?: ApexYAxis | ApexYAxis[];
-}
-export {};
+export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,69 @@
+"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,111 @@
+"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

@@ -0,0 +1,23 @@
+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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,38 @@
+"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);

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
+export default _default;

package/dist/Components/KaTable/SelectionHeader.js

@@ -0,0 +1,56 @@
+"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 KaTable_1 = require("./KaTable");
+var SelectionHeader = function (_a) {
+    var onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey, selected = _a.selected;
+    var table = KaTable_1.TableFun.useTableInstance();
+    var selectAllRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate = selected === null || selected === void 0 ? void 0 : selected.intederminate;
+        }
+    }, [selected.intederminate]);
+    var handleSelectionChange = (0, react_1.useCallback)(function (checked) {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked);
+    }, [onSelectionChange]);
+    return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
+            var _a, _b;
+            var isChecked = event.currentTarget.checked;
+            // const action = isChecked ? "add" : "remove";
+            var totalIds = isChecked
+                ? (_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row[rowKey]; })
+                : [];
+            handleSelectionChange(totalIds);
+            if (isChecked) {
+                table.selectAllFilteredRows();
+            }
+            else {
+                table.deselectAllFilteredRows();
+            }
+        }, style: { marginLeft: "40%" } }));
+};
+exports.default = react_1.default.memo(SelectionHeader);