pixelize-design-library 2.2.185 → 2.2.187

package/debug-storybook.log

@@ -0,0 +1,72 @@
+[14:50:38.093] [INFO] storybook v10.2.16
+[14:50:40.124] [DEBUG] Getting package.json info for /Users/mahesh/Applications/Pixelize/CRM/Micro-Components/package.json...
+[14:50:40.126] [WARN] You are currently using Storybook 10.2.16 but you have packages which are incompatible with it:
+
+- @storybook/addon-essentials@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials
+- @storybook/addon-interactions@8.6.14 which depends on 8.6.14
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/interactions
+- @storybook/test@8.6.15 which depends on 8.6.15
+ Repo: https://github.com/storybookjs/storybook/tree/next/code/lib/test
+
+Please consider updating your packages or contacting the maintainers for compatibility details.
+
+For more details on compatibility guidance, see:
+https://github.com/storybookjs/storybook/issues/32836
+[14:50:40.147] [ERROR] SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/react-vite/preset.
+
+Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.
+
+If you believe this is a bug, please open an issue on Github.
+
+Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/react-vite' imported from /Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-EBZ4DOUR.js
+    at packageResolve (node:internal/modules/esm/resolve:873:9)
+    at moduleResolve (node:internal/modules/esm/resolve:946:18)
+    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
+    at nextResolve (node:internal/modules/esm/hooks:864:28)
+    at Hooks.resolve (node:internal/modules/esm/hooks:306:30)
+    at MessagePort.handleMessage (node:internal/modules/esm/worker:196:24)
+    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:831:20)
+    at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)
+
+More info: 
+
+    at loadPreset (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10081:13)
+    at async Promise.all (index 0)
+    at async loadPresets (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10090:73)
+    at async getPresets (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-UXMBIWPQ.js:10121:23)
+    at async buildDevStandalone (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/core-server/index.js:7661:17)
+    at async withTelemetry (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/_node-chunks/chunk-CSGMAQQ4.js:218:12)
+    at async dev (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2734:3)
+    at async _Command.<anonymous> (file:///Users/mahesh/.npm/_npx/6fe9a9991b157df1/node_modules/storybook/dist/bin/core.js:2804:92)
+[14:50:40.152] [WARN] Broken build, fix the error above.
+You may need to refresh the browser.
+[14:50:40.159] [WARN]   Failed to load preset: {"name":"/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/node_modules/@storybook/addon-essentials/dist/preset.js"} on level 2
+[14:50:40.159] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- ./node_modules/@storybook/addon-essentials/dist/preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (./node_modules/@storybook/addon-essentials/dist/preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)
+[14:50:40.161] [WARN]   Failed to load preset: {"name":"/Users/mahesh/Applications/Pixelize/CRM/Micro-Components/node_modules/@storybook/addon-interactions/dist/preset.js"} on level 2
+[14:50:40.161] [ERROR] Error: Cannot find module 'storybook/internal/common'
+Require stack:
+- ./node_modules/@storybook/addon-interactions/dist/preset.js
+    at Module._resolveFilename (node:internal/modules/cjs/loader:1212:15)
+    at Module._load (node:internal/modules/cjs/loader:1043:27)
+    at Module.require (node:internal/modules/cjs/loader:1298:19)
+    at require (node:internal/modules/helpers:182:18)
+    at Object.<anonymous> (./node_modules/@storybook/addon-interactions/dist/preset.js:4:14)
+    at Module._compile (node:internal/modules/cjs/loader:1529:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
+    at Module.load (node:internal/modules/cjs/loader:1275:32)
+    at Module._load (node:internal/modules/cjs/loader:1096:12)
+    at cjsLoader (node:internal/modules/esm/translators:298:15)
+[14:50:40.164] [INFO] Storybook collects completely anonymous usage telemetry. We use it to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt out, at https://storybook.js.org/telemetry

package/dist/Assets/defaultLogo.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCustomTheme } from "../Theme/useCustomTheme";
+
+const DefaultLogo = () => {
+  const theme = useCustomTheme();
+  return (
+    <svg
+      width="12.09"
+      height="15.95"
+      viewBox="0 0 31 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
+        fill={theme.colors.black}
+      />
+      <path
+        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
+        fill={theme.colors.black}
+      />
+    </svg>
+
+  )
+};
+
+export default DefaultLogo;

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

@@ -44,50 +44,37 @@ var TableLoading_1 = require("./TableLoading");
 var TableActions_1 = __importDefault(require("./TableActions"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var EMPTY_SX = {};
+var EMPTY_HOVER = {};
 var TableRow = react_2.default.memo(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, columnWidths = _a.columnWidths, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var row = _a.row, rowIndex = _a.rowIndex, index = _a.index, isChecked = _a.isChecked, isExpanded = _a.isExpanded, isContent = _a.isContent, isLink = _a.isLink, isCheckbox = _a.isCheckbox, isLoading = _a.isLoading, isActionFreeze = _a.isActionFreeze, columns = _a.columns, leftOffsets = _a.leftOffsets, noBorders = _a.noBorders, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, theme = _a.theme, borderStyle = _a.borderStyle, hoverStyle = _a.hoverStyle, handleCheckbox = _a.handleCheckbox, onRowClick = _a.onRowClick, toggleRowExpansion = _a.toggleRowExpansion;
+    var checkedSx = (0, react_2.useMemo)(function () { return isChecked ? {
+        "& td": { backgroundColor: theme.colors.disabled[100] },
+    } : EMPTY_SX; }, [isChecked, theme.colors.disabled]);
+    var handleCellClick = (0, react_2.useCallback)(function (header) {
+        if (!header.node && onRowClick) {
+            onRowClick(row, { label: header.label, id: header.id });
+        }
+    }, [row, onRowClick]);
     return (react_2.default.createElement(react_2.default.Fragment, null,
-        react_2.default.createElement(react_1.Tr, { opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: isChecked
-                ? {
-                    "& td": {
-                        backgroundColor: theme.colors.disabled[100],
-                    },
-                }
-                : {} },
-            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
-            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], textTransform: "capitalize", backgroundColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j[50], position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+        react_2.default.createElement(react_1.Tr, { opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: checkedSx },
+            isContent && (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, !!(row === null || row === void 0 ? void 0 : row.content) && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" })))),
+            isCheckbox && (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f[50], textTransform: "capitalize", backgroundColor: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h[50], position: "sticky", borderBottom: borderStyle, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
                 react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked }))),
             columns.map(function (header, headerIndex) {
-                var _a, _b, _c, _d, _e, _f, _g;
+                var _a, _b, _c, _d, _e;
                 if (header.isHidden)
                     return null;
                 var isFrozen = header.isFreeze;
-                var leftOffset = (0, table_1.TableCellCalculation)({
-                    isFrozen: isFrozen,
-                    columnWidths: columnWidths,
-                    headerIndex: headerIndex,
-                    isCheckbox: isCheckbox,
-                    header: header,
-                    row: row,
-                    freezedBgColor: freezedBgColor,
-                    index: index,
-                    theme: theme,
-                }).leftOffset;
-                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
-                        return !header.node
-                            ? onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, { label: header.label, id: header.id })
-                            : null;
-                    }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
+                return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () { return handleCellClick(header); }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
                         ? "none"
                         : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
-                        ? {}
-                        : {
-                            backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
-                        } },
+                        ? EMPTY_HOVER
+                        : hoverStyle },
                     react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
             }),
-            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_m = (_l = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _l === void 0 ? void 0 : _l.background) === null || _m === void 0 ? void 0 : _m[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_o = theme.colors) === null || _o === void 0 ? void 0 : _o.border[500]), 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 }))))),
+            isLink && (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_k = (_j = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, 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 }))))),
         row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
             react_2.default.createElement(react_1.Td, { colSpan: columns.length +
                     (isCheckbox ? 1 : 0) +
@@ -96,10 +83,11 @@ var TableRow = react_2.default.memo(function (_a) {
                 react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
 });
 var TableBody = function (_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g, _h;
     var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, 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, loadingSkeletonRows = _a.loadingSkeletonRows;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_2.useState)(new Set()), expandedRows = _g[0], setExpandedRows = _g[1];
+    var _j = (0, react_2.useState)(new Set()), expandedRows = _j[0], setExpandedRows = _j[1];
+    var selectionsSet = (0, react_2.useMemo)(function () { return new Set(selections); }, [selections]);
     var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -118,26 +106,39 @@ var TableBody = function (_a) {
             (isContent ? 1 : 0) +
             (isLink ? 1 : 0);
     }, [columns, isCheckbox, isContent, isLink]);
+    var leftOffsets = (0, react_2.useMemo)(function () {
+        var checkboxOffset = isCheckbox ? 50 : 0;
+        return columnWidths.map(function (_, idx) {
+            return columnWidths.slice(0, idx).reduce(function (sum, w) { return sum + w; }, 0) + checkboxOffset;
+        });
+    }, [columnWidths, isCheckbox]);
+    var borderStyle = (0, react_2.useMemo)(function () { var _a; return noBorders ? "none" : "0.063rem solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]); }, [noBorders, (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border]);
+    var hoverStyle = (0, react_2.useMemo)(function () {
+        var _a, _b;
+        return ({
+            backgroundColor: (_b = (_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[4],
+        });
+    }, [(_c = theme.colors.secondary) === null || _c === void 0 ? void 0 : _c.opacity]);
     if (isLoading && data.length === 0) {
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
     if (!isLoading && data.length === 0) {
-        return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
+        return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_d = theme.colors.background) === null || _d === void 0 ? void 0 : _d[50] },
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
-                react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] },
+                react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500] },
                     react_2.default.createElement("p", null, "No data found")))));
     }
     return (react_2.default.createElement(react_2.default.Fragment, null,
         isLoading && data.length > 0 && (react_2.default.createElement(react_1.Tr, null,
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0 },
                 react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
-                    react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f[500]) || "blue.500" }))))),
+                    react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[500]) || "blue.500" }))))),
         data.map(function (row, index) {
             var _a;
             var rowIndex = startRow + index;
             var isExpanded = expandedRows.has(rowIndex);
-            var isChecked = selections.includes(row.id);
-            return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
+            var isChecked = selectionsSet.has(row.id);
+            return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
         })));
 };
 exports.default = TableBody;

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

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

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

@@ -55,18 +55,18 @@ var TableFilters_1 = __importDefault(require("./TableFilters"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableHeader = function (_a) {
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, 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, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, 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, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: theme.shadows.md },
-            react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
+        var _a, _b, _c, _d, _e;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: theme.shadows.md }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
     }, [
         checked,
         freezedTextColor,
         handleCheckbox,
         isLoading,
+        isSelecting,
         noBorders,
         theme.colors,
     ]);

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

@@ -12,8 +12,9 @@ type UseTableProps = {
     isServerPagination: boolean;
     totalRecords: number;
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
+    defaultVisibleColumns?: number;
 };
-declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, }: UseTableProps) => {
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: UseTableProps) => {
     tableData: DataObject[];
     tableContainerStyles: {
         borderRadius: string;
@@ -41,5 +42,6 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
     handleColumnPreferences: (columns: any) => void;
+    isSelecting: boolean;
 };
 export default useTable;

package/dist/Components/Table/Components/useTable.js

@@ -38,7 +38,7 @@ var mergeColumnWithPreference = function (pref, originalCol) {
     return next;
 };
 var useTable = function (_a) {
-    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange;
+    var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, defaultVisibleColumns = _a.defaultVisibleColumns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
     var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
@@ -55,7 +55,10 @@ var useTable = function (_a) {
     }
     var tableData = data;
     var _g = (0, react_1.useState)(function () {
-        return columns.map(function (col) { return (__assign({}, col)); });
+        return columns.map(function (col, i) {
+            var _a;
+            return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
+        });
     }), columnsList = _g[0], setColumnsList = _g[1];
     (0, react_1.useEffect)(function () {
         var _a;
@@ -70,9 +73,12 @@ var useTable = function (_a) {
             setColumnsList(mergedColumns);
         }
         else {
-            setColumnsList(columns.map(function (col) { return (__assign({}, col)); }));
+            setColumnsList(columns.map(function (col, i) {
+                var _a;
+                return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
+            }));
         }
-    }, [tablePreferences, columns]);
+    }, [tablePreferences, columns, defaultVisibleColumns]);
     var tableContainerStyles = (0, react_1.useMemo)(function () {
         var _a;
         return ({
@@ -139,25 +145,36 @@ var useTable = function (_a) {
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
+    var _h = (0, react_1.useState)(false), isSelecting = _h[0], setIsSelecting = _h[1];
+    var selectionRef = (0, react_1.useRef)(selection);
+    selectionRef.current = selection;
+    var onSelectionRef = (0, react_1.useRef)(onSelection);
+    onSelectionRef.current = onSelection;
     var handleCheckbox = (0, react_1.useCallback)(function (id) {
-        var selectedItems = [];
+        var _a;
+        var current = selectionRef.current;
         if (id === 0) {
-            if (selection.length === tableData.length) {
-                selectedItems = [];
+            setIsSelecting(true);
+            setTimeout(function () {
+                var _a;
+                var selectedItems = current.length === tableData.length ? [] : tableData.map(function (item) { return item.id; });
+                setSelection(selectedItems);
+                (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+                setIsSelecting(false);
+            }, 0);
+        }
+        else {
+            var selectedItems = void 0;
+            if (current.includes(id)) {
+                selectedItems = current.filter(function (item) { return item !== id; });
             }
             else {
-                selectedItems = tableData.map(function (item) { return item.id; });
+                selectedItems = __spreadArray(__spreadArray([], current, true), [id], false);
             }
+            setSelection(selectedItems);
+            (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
         }
-        else if (selection.includes(id)) {
-            selectedItems = selection.filter(function (item) { return item !== id; });
-        }
-        else {
-            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
-        }
-        setSelection(selectedItems);
-        onSelection && onSelection(selectedItems);
-    }, [onSelection, selection, tableData]);
+    }, [tableData]);
     var handleColumnPreferences = function (columns) {
         setColumnsList(columns);
         savePreferences &&
@@ -184,6 +201,7 @@ var useTable = function (_a) {
         setCurrentPage: setCurrentPage,
         columnsList: columnsList,
         handleColumnPreferences: handleColumnPreferences,
+        isSelecting: isSelecting,
     };
 };
 exports.default = useTable;

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, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -65,9 +65,7 @@ function Table(_a) {
         name: "",
         page: "",
         orgId: "",
-    } : _4, _5 = _a.paginationMode, paginationMode = _5 === void 0 ? "client" : _5, _6 = _a.noOfRowsPerPage, noOfRowsPerPage = _6 === void 0 ? 50 : _6, _7 = _a.totalRecords, totalRecords = _7 === void 0 ? 0 : _7, onPagination = _a.onPagination, _8 = _a.isTableSettings, isTableSettings = _8 === void 0 ? false : _8, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows
-    // onColumnFilter
-    ;
+    } : _4, _5 = _a.paginationMode, paginationMode = _5 === void 0 ? "client" : _5, _6 = _a.noOfRowsPerPage, noOfRowsPerPage = _6 === void 0 ? 50 : _6, _7 = _a.totalRecords, totalRecords = _7 === void 0 ? 0 : _7, onPagination = _a.onPagination, _8 = _a.isTableSettings, isTableSettings = _8 === void 0 ? false : _8, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, paginationSelectOptions = _a.paginationSelectOptions, tableMaxHeight = _a.tableMaxHeight, minVisibleRows = _a.minVisibleRows, maxVisibleRows = _a.maxVisibleRows, autoFitViewport = _a.autoFitViewport, tableSettings = _a.tableSettings, filterSidebar = _a.filterSidebar, loadingSkeletonRows = _a.loadingSkeletonRows, defaultVisibleColumns = _a.defaultVisibleColumns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _9 = (0, react_1.useState)({}), columnsSearch = _9[0], setColumnsSearch = _9[1];
     var tableContainerRef = (0, react_1.useRef)(null);
@@ -113,7 +111,8 @@ function Table(_a) {
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
         onNoOfRowsPerPageChange: onNoOfRowsPerPageChange,
-    }), tableData = _13.tableData, isContent = _13.isContent, isLink = _13.isLink, headerRefs = _13.headerRefs, columnWidths = _13.columnWidths, handleSort = _13.handleSort, handleCheckbox = _13.handleCheckbox, filteredData = _13.filteredData, startRow = _13.startRow, endRow = _13.endRow, selection = _13.selection, columnsSort = _13.columnsSort, currentPage = _13.currentPage, pages = _13.pages, rowsPerPage = _13.rowsPerPage, handlePageSizeChange = _13.handlePageSizeChange, setCurrentPage = _13.setCurrentPage, columnsList = _13.columnsList, handleColumnPreferences = _13.handleColumnPreferences;
+        defaultVisibleColumns: defaultVisibleColumns,
+    }), tableData = _13.tableData, isContent = _13.isContent, isLink = _13.isLink, headerRefs = _13.headerRefs, columnWidths = _13.columnWidths, handleSort = _13.handleSort, handleCheckbox = _13.handleCheckbox, filteredData = _13.filteredData, startRow = _13.startRow, endRow = _13.endRow, selection = _13.selection, columnsSort = _13.columnsSort, currentPage = _13.currentPage, pages = _13.pages, rowsPerPage = _13.rowsPerPage, handlePageSizeChange = _13.handlePageSizeChange, setCurrentPage = _13.setCurrentPage, columnsList = _13.columnsList, handleColumnPreferences = _13.handleColumnPreferences, isSelecting = _13.isSelecting;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -275,7 +274,7 @@ function Table(_a) {
                                     ? true
                                     : selection.length === 0
                                         ? false
-                                        : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
+                                        : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
                         react_1.default.createElement(react_3.Tbody, null,
                             react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
 }

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

@@ -30,6 +30,7 @@ export type TableProps = {
     minVisibleRows?: number;
     maxVisibleRows?: number;
     autoFitViewport?: boolean;
+    defaultVisibleColumns?: number;
     loadingSkeletonRows?: number;
     headerActions?: HeaderActionsProps;
     onGlobalSearch?: (searchVal: string) => void;
@@ -107,6 +108,7 @@ export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "
     isLink: boolean;
     setColumnsSearch: React.Dispatch<React.SetStateAction<Record<string, string>>>;
     columnsSearch: Record<string, string>;
+    isSelecting?: boolean;
 };
 export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading" | "loadingSkeletonRows" | "onRowClick" | "isActionFreeze"> & {
     startRow: number;