pixelize-design-library 1.1.49 → 1.1.50

package/dist/Components/Table/Components/TableActions.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TableActions: ({ row }: any) => React.JSX.Element;
+export default TableActions;

package/dist/Components/Table/Components/TableActions.js

@@ -0,0 +1,30 @@
+"use strict";
+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_2 = require("@chakra-ui/react");
+var fa_1 = require("react-icons/fa");
+var md_1 = require("react-icons/md");
+var icons_1 = require("@chakra-ui/icons");
+var TableActions = function (_a) {
+    var row = _a.row;
+    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start" },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(fa_1.FaEllipsisV, { fontSize: 12 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
+                react_1.default.createElement(react_2.PopoverBody, null,
+                    react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
+                        row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); } },
+                            react_1.default.createElement(icons_1.ExternalLinkIcon, null),
+                            " View")),
+                        row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
+                            react_1.default.createElement(icons_1.EditIcon, null),
+                            " Edit")),
+                        row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
+                            react_1.default.createElement(md_1.MdDelete, null),
+                            "Delete"))))))));
+};
+exports.default = TableActions;

package/dist/Components/Table/Components/TableBody.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, }: TableBodyPageProps) => React.JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;

package/dist/Components/Table/Components/TableBody.js

@@ -22,6 +22,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importStar(require("react"));
@@ -29,10 +32,10 @@ var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TableLoading_1 = require("./TableLoading");
 var fa_1 = require("react-icons/fa");
-var icons_1 = require("@chakra-ui/icons");
+var TableActions_1 = __importDefault(require("./TableActions"));
 var TableBody = function (_a) {
     var _b;
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _c = (0, react_2.useState)(new Set()), expandedRows = _c[0], setExpandedRows = _c[1];
     var toggleRowExpansion = function (rowIndex) {
@@ -68,10 +71,10 @@ var TableBody = function (_a) {
         return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(fa_1.FaAngleDown, { fontSize: 16 })) : (react_2.default.createElement(fa_1.FaAngleRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
     }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
     var RenderView = (0, react_2.useCallback)(function (_a) {
-        var _b, _c;
-        var row = _a.row;
-        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns" }, !!row.onLink && (react_2.default.createElement(react_1.IconButton, { "aria-label": "Link", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.blue[500], icon: react_2.default.createElement(icons_1.ExternalLinkIcon, { fontSize: 16 }), size: "sm", onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); }, variant: "ghost", _hover: { transform: "scale(1.1)" } }))));
-    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors]);
+        var _b;
+        var row = _a.row, bgcolor = _a.bgcolor;
+        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: isActionFreeze ? freezedBgColor : bgcolor, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
+    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors, isActionFreeze]);
     if (isLoading) {
         var totalVisibleColumns = Object.values(visibleColumns).filter(Boolean).length +
             (isCheckbox ? 1 : 0);
@@ -91,6 +94,7 @@ var TableBody = function (_a) {
         var rowIndex = startRow + index;
         var isExpanded = expandedRows.has(rowIndex);
         var isChecked = selections.includes(row.id);
+        var freezeViewColor = index % 2 === 1 ? theme.colors.backgroundColor.light : "white";
         return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
             react_2.default.createElement(react_1.Tr, { key: index + 1, sx: isChecked
                     ? {
@@ -128,7 +132,7 @@ var TableBody = function (_a) {
                             : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
                         react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
                 }),
-                isLink && react_2.default.createElement(RenderView, { row: row })),
+                isLink && react_2.default.createElement(RenderView, { row: row, bgcolor: freezeViewColor })),
             row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
                 react_2.default.createElement(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +

package/dist/Components/Table/Components/TableHeader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, onColumnSearch, columnFilters, }: TableHeaderPageProps) => React.JSX.Element;
+declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, onColumnSearch, columnFilters, isActionFreeze, }: TableHeaderPageProps) => React.JSX.Element;
 export default TableHeader;

package/dist/Components/Table/Components/TableHeader.js

@@ -33,7 +33,7 @@ var pi_1 = require("react-icons/pi");
 var lu_1 = require("react-icons/lu");
 var TableHeader = function (_a) {
     var _b;
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, onColumnSearch = _a.onColumnSearch, _c = _a.columnFilters, columnFilters = _c === void 0 ? {} : _c;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, onColumnSearch = _a.onColumnSearch, _c = _a.columnFilters, columnFilters = _c === void 0 ? {} : _c, isActionFreeze = _a.isActionFreeze;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _d = (0, react_2.useState)(null), openPopoverId = _d[0], setOpenPopoverId = _d[1];
     var handleSearchChange = (0, react_2.useCallback)(function (columnId, value) {
@@ -80,10 +80,17 @@ var TableHeader = function (_a) {
     }, [freezedBgColor, noBorders, theme.colors.gray]);
     var RenderView = (0, react_2.useCallback)(function () {
         var _a;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+        var BgColor = isActionFreeze ? freezedBgColor : headerBgColor;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
             react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
                 react_2.default.createElement(lu_1.LuFileSymlink, { fontSize: 16 }))));
-    }, [freezedBgColor, noBorders, theme.colors.gray]);
+    }, [
+        freezedBgColor,
+        noBorders,
+        theme.colors.gray,
+        headerBgColor,
+        isActionFreeze,
+    ]);
     var Sorting = (0, react_2.useCallback)(function (_a) {
         var _b;
         var isSorting = _a.isSorting, header = _a.header;

package/dist/Components/Table/Table.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, selections, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagintaion, onRowClick, selections, isActionFreeze, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -58,23 +58,23 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var defaultPageSize = 5;
 function Table(_a) {
     var _b;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _c = _a.isCheckbox, isCheckbox = _c === void 0 ? false : _c, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _d = _a.noBorders, noBorders = _d === void 0 ? false : _d, _e = _a.isPagintaion, isPagintaion = _e === void 0 ? true : _e, onRowClick = _a.onRowClick, selections = _a.selections;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _c = _a.isCheckbox, isCheckbox = _c === void 0 ? false : _c, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _d = _a.noBorders, noBorders = _d === void 0 ? false : _d, _e = _a.isPagintaion, isPagintaion = _e === void 0 ? true : _e, onRowClick = _a.onRowClick, selections = _a.selections, _f = _a.isActionFreeze, isActionFreeze = _f === void 0 ? true : _f;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_4.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _f[0], setSelection = _f[1];
-    var _g = (0, react_4.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
-    var _h = (0, react_4.useState)(defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
-    var _j = (0, react_4.useState)({}), columnFilters = _j[0], setColumnFilters = _j[1];
-    var _k = (0, react_4.useState)(data), filteredData = _k[0], setFilteredData = _k[1];
+    var _g = (0, react_4.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _g[0], setSelection = _g[1];
+    var _h = (0, react_4.useState)(0), currentPage = _h[0], setCurrentPage = _h[1];
+    var _j = (0, react_4.useState)(defaultPageSize), rowsPerPage = _j[0], setRowsPerPage = _j[1];
+    var _k = (0, react_4.useState)({}), columnFilters = _k[0], setColumnFilters = _k[1];
+    var _l = (0, react_4.useState)(data), filteredData = _l[0], setFilteredData = _l[1];
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
-    var _l = (0, react_4.useState)(columns.reduce(function (acc, curr) {
+    var _m = (0, react_4.useState)(columns.reduce(function (acc, curr) {
         var _a;
         return (__assign(__assign({}, acc), (_a = {}, _a[curr.label] = true, _a)));
-    }, {})), visibleColumns = _l[0], setVisibleColumns = _l[1];
-    var _m = (0, react_4.useState)([]), columnWidths = _m[0], setColumnWidths = _m[1];
+    }, {})), visibleColumns = _m[0], setVisibleColumns = _m[1];
+    var _o = (0, react_4.useState)([]), columnWidths = _o[0], setColumnWidths = _o[1];
     var headerRefs = (0, react_1.useRef)([]);
-    var _o = (0, react_4.useState)([]), columnsSort = _o[0], setColumnsSort = _o[1];
+    var _p = (0, react_4.useState)([]), columnsSort = _p[0], setColumnsSort = _p[1];
     (0, react_1.useEffect)(function () {
         // Measure widths after the component mounts
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
@@ -103,24 +103,24 @@ function Table(_a) {
         setColumnsSort(newSortState);
     }, [columnsSort]);
     var handleCheckbox = function (id) {
+        var selectedItems = [];
         if (id === 0) {
             if (selection.length === data.length) {
-                setSelection([]);
+                selectedItems = [];
             }
             else {
-                setSelection(data.map(function (item) { return item.id; }));
+                selectedItems = data.map(function (item) { return item.id; });
             }
         }
         else if (selection.includes(id)) {
-            setSelection(selection.filter(function (item) { return item !== id; }));
+            selectedItems = selection.filter(function (item) { return item !== id; });
         }
         else {
-            setSelection(__spreadArray(__spreadArray([], selection, true), [id], false));
+            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
         }
+        setSelection(selectedItems);
+        onSelection && onSelection(selectedItems);
     };
-    (0, react_1.useEffect)(function () {
-        onSelection && onSelection(selection);
-    }, [selection, onSelection]);
     var pages = isPagintaion ? Math.ceil(data.length / rowsPerPage) : 0;
     var startRow = !isPagintaion ? 0 : currentPage * rowsPerPage;
     var endRow = !isPagintaion ? data.length : startRow + rowsPerPage;
@@ -153,19 +153,19 @@ function Table(_a) {
         setFilteredData(filtered);
     };
     var isContent = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.content; }); }, [data]);
-    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink; }); }, [data]);
+    var isLink = (0, react_1.useMemo)(function () { return data.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [data]);
     var RenderTable = function (_a) {
         var _b, _c, _d;
         var columns = _a.columns;
         return (react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "sticky-columns" },
-            react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 9 },
+            react_1.default.createElement(react_3.Thead, { position: "sticky", top: 0, zIndex: 2 },
                 react_1.default.createElement(TableHeader_1.default, { columns: columns, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], visibleColumns: visibleColumns, handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isLoading, checked: data.length !== 0 && selection.length === data.length
                         ? true
                         : selection.length === 0
                             ? false
-                            : "indeterminate", isContent: isContent, isLink: isLink, onColumnSearch: handleColumnSearch, columnFilters: columnFilters })),
+                            : "indeterminate", isContent: isContent, isLink: isLink, onColumnSearch: handleColumnSearch, columnFilters: columnFilters, isActionFreeze: isActionFreeze })),
             react_1.default.createElement(react_3.Tbody, null,
-                react_1.default.createElement(TableBody_1.default, { data: filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink }))));
+                react_1.default.createElement(TableBody_1.default, { data: filteredData, columns: columns, startRow: startRow, endRow: endRow, visibleColumns: visibleColumns, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))));
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_2.TableContainer, { sx: {

package/dist/Components/Table/TableProps.d.ts

@@ -18,6 +18,7 @@ export type TableProps = {
     isPagintaion?: boolean;
     selections?: (string | number)[];
     onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
+    isActionFreeze?: boolean;
 };
 export type DataObject = {
     [key: string]: string | number | any;
@@ -38,7 +39,7 @@ export type ColumnSortingProps = {
     column: string | number;
     direction: "asc" | "desc" | "none";
 };
-export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading"> & {
+export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "isActionFreeze"> & {
     visibleColumns: Record<string, boolean>;
     handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
@@ -56,7 +57,7 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     onColumnSearch?: (columnId: string, searchValue: string) => void;
     columnFilters?: Record<string, string>;
 };
-export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick"> & {
+export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "onRowClick" | "isActionFreeze"> & {
     visibleColumns: Record<string, boolean>;
     startRow: number;
     endRow: number;

package/package.json

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