pixelize-design-library 2.2.177 → 2.2.179

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

@@ -324,7 +324,7 @@ var KanbanBoard = function (_a) {
                     return toggleExpand(item.id, colId, rubric.source.index);
                 }, isDeletable: canDelete }))));
         } }, function (provided, snapshot) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
         return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
                 ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
                 : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
@@ -344,21 +344,23 @@ var KanbanBoard = function (_a) {
                 column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], "aria-hidden": true })) : null,
                 column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_r = colors === null || colors === void 0 ? void 0 : colors.background) === null || _r === void 0 ? void 0 : _r[100], position: "relative", zIndex: 2 },
                     react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
-                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: !isColCollapsed && column.customNode ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_t = column.color) !== null && _t !== void 0 ? _t : (_u = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _u === void 0 ? void 0 : _u[500], background: (_v = colors === null || colors === void 0 ? void 0 : colors.background) === null || _v === void 0 ? void 0 : _v[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
-                enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                    react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_w = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _w === void 0 ? void 0 : _w[400] }))) : null,
-                react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && column.customNode ? "1" : "0" },
-                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[700], noOfLines: 1, flex: "1", minW: 0 },
-                        react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
-                    !isColCollapsed && column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_y = colors === null || colors === void 0 ? void 0 : colors.text) === null || _y === void 0 ? void 0 : _y[600] }, column.customNode())) : null),
-                react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_z = colors === null || colors === void 0 ? void 0 : colors.background) === null || _z === void 0 ? void 0 : _z[100], borderColor: (_0 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _0 === void 0 ? void 0 : _0[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_2 = column === null || column === void 0 ? void 0 : column.items) === null || _2 === void 0 ? void 0 : _2.length),
-                enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
-                canDelete &&
-                    hoveredColumn === colId &&
-                    column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[600], _hover: { color: (_4 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _4 === void 0 ? void 0 : _4[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
-                !(canDelete &&
-                    hoveredColumn === colId &&
-                    column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 }))),
+                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: !isColCollapsed && !!((_t = column.customNode) === null || _t === void 0 ? void 0 : _t.call(column)) ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_u = column.color) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500], background: (_w = colors === null || colors === void 0 ? void 0 : colors.background) === null || _w === void 0 ? void 0 : _w[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
+                    enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
+                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_x = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _x === void 0 ? void 0 : _x[400] }))) : null,
+                    react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && !!((_y = column.customNode) === null || _y === void 0 ? void 0 : _y.call(column)) ? "1" : "0" },
+                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_z = colors === null || colors === void 0 ? void 0 : colors.text) === null || _z === void 0 ? void 0 : _z[700], noOfLines: 1, flex: "1", minW: 0 },
+                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
+                        !!((_0 = column.customNode) === null || _0 === void 0 ? void 0 : _0.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[600] }, column.customNode())) : null)),
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
+                    react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_2 = colors === null || colors === void 0 ? void 0 : colors.background) === null || _2 === void 0 ? void 0 : _2[100], borderColor: (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_4 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _4 === void 0 ? void 0 : _4[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_5 = column === null || column === void 0 ? void 0 : column.items) === null || _5 === void 0 ? void 0 : _5.length),
+                    enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
+                    canDelete &&
+                        hoveredColumn === colId &&
+                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_6 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _6 === void 0 ? void 0 : _6[600], _hover: { color: (_7 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _7 === void 0 ? void 0 : _7[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
+                    !(canDelete &&
+                        hoveredColumn === colId &&
+                        column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
             !isColCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
                         overflowY: "auto",

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

@@ -94,7 +94,6 @@ var TableBody = function (_a) {
                     react_2.default.createElement("p", null, "No data found")))));
     }
     return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {
-        var _a;
         var rowIndex = startRow + index;
         var isExpanded = expandedRows.has(rowIndex);
         var isChecked = selections.includes(row.id);
@@ -106,7 +105,7 @@ var TableBody = function (_a) {
                         },
                     }
                     : {} },
-                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!((_a = row === null || row === void 0 ? void 0 : row.content) === null || _a === void 0 ? void 0 : _a.call(row)) })),
+                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
                 isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
                     var _a, _b, _c, _d, _e, _f, _g;
@@ -122,6 +121,7 @@ var TableBody = function (_a) {
                         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

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

@@ -40,7 +40,7 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     rowsPerPage: number;
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
-    handleColumnPreferences: (columns: any) => void;
+    handleColumnPreferences: (cols: any) => void;
     handleGlobalSearch: (query: string) => void;
 };
 export default useTable;

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

@@ -46,11 +46,18 @@ var useTable = function (_a) {
     var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
     var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
     var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
-    var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
-    var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
-    var _h = (0, react_1.useState)(function () {
+    var _g = (0, react_1.useState)(function () {
         return columns.map(function (col) { return (__assign({}, col)); });
-    }), columnsList = _h[0], setColumnsList = _h[1];
+    }), columnsList = _g[0], setColumnsList = _g[1];
+    // Stable refs for callbacks that shouldn't appear in deps
+    var onSelectionRef = (0, react_1.useRef)(onSelection);
+    onSelectionRef.current = onSelection;
+    var dataRef = (0, react_1.useRef)(data);
+    dataRef.current = data;
+    var tablePreferencesRef = (0, react_1.useRef)(tablePreferences);
+    tablePreferencesRef.current = tablePreferences;
+    var savePreferencesRef = (0, react_1.useRef)(savePreferences);
+    savePreferencesRef.current = savePreferences;
     (0, react_1.useEffect)(function () {
         var _a;
         var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -67,9 +74,6 @@ var useTable = function (_a) {
             setColumnsList(columns.map(function (col) { return (__assign({}, col)); }));
         }
     }, [tablePreferences, columns]);
-    (0, react_1.useEffect)(function () {
-        setFilteredData(tableData);
-    }, [tableData]);
     var tableContainerStyles = (0, react_1.useMemo)(function () {
         var _a;
         return ({
@@ -81,8 +85,8 @@ var useTable = function (_a) {
             overflowY: "auto",
         });
     }, [tableBorderColor, theme]);
-    var isContent = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.content; }); }, [tableData]);
-    var isLink = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [tableData]);
+    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 || o.onDelete || o.onEdit; }); }, [data]);
     (0, react_1.useEffect)(function () {
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
         setColumnWidths(widths);
@@ -91,84 +95,89 @@ var useTable = function (_a) {
         if (isServerPagination) {
             return Math.ceil(totalRecords / (noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : 1));
         }
-        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+        return isPagination ? Math.ceil(data.length / rowsPerPage) : 0;
     }, [
         isPagination,
         rowsPerPage,
-        tableData.length,
+        data.length,
         totalRecords,
         isServerPagination,
         noOfRowsPerPage,
     ]);
     var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
-    var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
-    (0, react_1.useEffect)(function () {
-        if (isServerPagination) {
-            return setFilteredData(tableData);
-        }
-        var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
-        var data = sortedData.slice(startRow, endRow);
-        return setFilteredData(data);
-    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
-    var handlePageSizeChange = function (event) {
+    var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? data.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, data.length]);
+    // Sort once (only re-runs when data or sort config changes, not on page change)
+    var sortedData = (0, react_1.useMemo)(function () {
+        if (isServerPagination)
+            return data;
+        return (0, table_1.SortMultiColumnData)(data, columnsSort);
+    }, [data, columnsSort, isServerPagination]);
+    // Paginate from the already-sorted data
+    var filteredData = (0, react_1.useMemo)(function () {
+        if (isServerPagination)
+            return sortedData;
+        return sortedData.slice(startRow, endRow);
+    }, [sortedData, startRow, endRow, isServerPagination]);
+    var handlePageSizeChange = (0, react_1.useCallback)(function (event) {
         var value = Number(event.target.value);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
         if (onNoOfRowsPerPageChange) {
             onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);
         }
         setCurrentPage(0);
-    };
+    }, [onNoOfRowsPerPageChange]);
+    // Stable: uses functional updater so columnsSort is not a dependency
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        var newSortState = __spreadArray([], columnsSort, true);
-        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === field; });
-        if (existingIndex === -1) {
-            newSortState.push({
-                column: field,
-                direction: "asc", // Default to ascending when adding a column
-            });
-        }
-        else {
-            var existingSort = newSortState[existingIndex];
-            existingSort.direction = sort;
-        }
-        setColumnsSort(newSortState);
-    }, [columnsSort]);
+        setColumnsSort(function (prev) {
+            var next = __spreadArray([], prev, true);
+            var existingIndex = next.findIndex(function (s) { return s.column === field; });
+            if (existingIndex === -1) {
+                next.push({ column: field, direction: "asc" });
+            }
+            else {
+                next[existingIndex] = __assign(__assign({}, next[existingIndex]), { direction: sort });
+            }
+            return next;
+        });
+    }, []);
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
+    // Stable: uses functional updater + refs so selection/data are not dependencies
     var handleCheckbox = (0, react_1.useCallback)(function (id) {
-        var selectedItems = [];
-        if (id === 0) {
-            if (selection.length === tableData.length) {
-                selectedItems = [];
+        setSelection(function (prev) {
+            var _a;
+            var currentData = dataRef.current;
+            var selectedItems;
+            if (id === 0) {
+                selectedItems =
+                    prev.length === currentData.length
+                        ? []
+                        : currentData.map(function (item) { return item.id; });
+            }
+            else if (prev.includes(id)) {
+                selectedItems = prev.filter(function (item) { return item !== id; });
             }
             else {
-                selectedItems = tableData.map(function (item) { return item.id; });
+                selectedItems = __spreadArray(__spreadArray([], prev, true), [id], false);
             }
-        }
-        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]);
-    var handleColumnPreferences = function (columns) {
-        setColumnsList(columns);
-        savePreferences &&
-            savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
-    };
-    var handleGlobalSearch = function (query) {
-        if (!query)
-            setFilteredData(tableData);
-        setFilteredData((0, table_1.globalSearchFilter)(tableData, query));
-    };
+            (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+            return selectedItems;
+        });
+    }, []);
+    var handleColumnPreferences = (0, react_1.useCallback)(function (cols) {
+        var _a;
+        setColumnsList(cols);
+        (_a = savePreferencesRef.current) === null || _a === void 0 ? void 0 : _a.call(savePreferencesRef, __assign(__assign({}, tablePreferencesRef.current), { columns: cols }));
+    }, []);
+    var handleGlobalSearch = (0, react_1.useCallback)(function (query) {
+        // Not used inside Table.tsx render path (Table uses its own _filteredData memo),
+        // but kept for API compatibility.
+    }, []);
     return {
-        tableData: tableData,
+        tableData: data,
         tableContainerStyles: tableContainerStyles,
         isContent: isContent,
         isLink: isLink,

package/dist/Components/Table/Table.js

@@ -56,16 +56,17 @@ var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
 var ActiveFilters_1 = __importDefault(require("./Components/ActiveFilters"));
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)(react_2.Box);
+var DEFAULT_PREFERENCES = {
+    url: "",
+    token: "",
+    key: "",
+    name: "",
+    page: "",
+    orgId: "",
+};
 function Table(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _0 = _a.isCheckbox, isCheckbox = _0 === void 0 ? false : _0, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _1 = _a.noBorders, noBorders = _1 === void 0 ? false : _1, _2 = _a.isPagination, isPagination = _2 === void 0 ? true : _2, onRowClick = _a.onRowClick, selections = _a.selections, _3 = _a.isActionFreeze, isActionFreeze = _3 === void 0 ? true : _3, _4 = _a.preferences, preferences = _4 === void 0 ? {
-        url: "",
-        token: "",
-        key: "",
-        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
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _0 = _a.isCheckbox, isCheckbox = _0 === void 0 ? false : _0, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _1 = _a.noBorders, noBorders = _1 === void 0 ? false : _1, _2 = _a.isPagination, isPagination = _2 === void 0 ? true : _2, onRowClick = _a.onRowClick, selections = _a.selections, _3 = _a.isActionFreeze, isActionFreeze = _3 === void 0 ? true : _3, _4 = _a.preferences, preferences = _4 === void 0 ? DEFAULT_PREFERENCES : _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
     ;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -117,11 +118,12 @@ function Table(_a) {
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
+    var onPaginationRef = (0, react_1.useRef)(onPagination);
+    onPaginationRef.current = onPagination;
     (0, react_1.useEffect)(function () {
-        if (onPagination) {
-            onPagination(currentPage + 1, noOfRowsPerPage);
-        }
-    }, [currentPage, onPagination, noOfRowsPerPage]);
+        var _a;
+        (_a = onPaginationRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationRef, currentPage + 1, noOfRowsPerPage);
+    }, [currentPage, noOfRowsPerPage]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;

package/dist/Hooks/usePreferences.js

@@ -28,17 +28,32 @@ var useGetPreferences = function (_a) {
         if (!baseUrl) {
             return;
         }
+        var controller = new AbortController();
         setLoading(true);
         var url = constructUrl({ baseUrl: baseUrl, key: key, page: page, name: name, orgId: orgId });
         fetch(url, {
             headers: {
                 Authorization: authToken,
             },
+            signal: controller.signal,
         })
             .then(function (response) { return response.json(); })
-            .then(function (data) { return setPreferences(data); })
-            .catch(function (error) { return console.error(error); })
-            .finally(function () { return setLoading(false); });
+            .then(function (data) {
+            if (!controller.signal.aborted) {
+                setPreferences(data);
+            }
+        })
+            .catch(function (error) {
+            if (!controller.signal.aborted) {
+                console.error(error);
+            }
+        })
+            .finally(function () {
+            if (!controller.signal.aborted) {
+                setLoading(false);
+            }
+        });
+        return function () { return controller.abort(); };
         /* eslint-disable */
     }, [baseUrl]);
     return { preferences: preferences, loading: loading };