pixelize-design-library 2.2.187 → 2.2.189

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/Components/Editor/Editor.d.ts +2 -1
  2. package/dist/Components/Editor/Editor.js +39 -5
  3. package/dist/Components/KanbanBoard/AccountCard.d.ts +2 -2
  4. package/dist/Components/KanbanBoard/AccountCard.js +37 -4
  5. package/dist/Components/KanbanBoard/KanbanBoard.js +70 -34
  6. package/dist/Components/MultiSelect/MultiSelect.js +10 -19
  7. package/dist/Components/SearchSelect/SearchSelect.js +23 -16
  8. package/dist/Components/Table/Components/ActiveFilters.js +63 -22
  9. package/dist/Components/Table/Components/Pagination.d.ts +1 -1
  10. package/dist/Components/Table/Components/Pagination.js +41 -9
  11. package/dist/Components/Table/Components/TableFilters.js +11 -5
  12. package/dist/Components/Table/Components/useTable.js +36 -24
  13. package/dist/Components/Table/Table.js +3 -1
  14. package/package.json +1 -1
package/dist/Components/Editor/Editor.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import React from "react";
2
2
  import { EditorProps } from "./EditorProps";
3
- export default function Editor({ value, key, config, editorRef, className, onChange, onBlur, }: EditorProps): React.JSX.Element;
3
+ declare const Editor: React.NamedExoticComponent<EditorProps>;
4
+ export default Editor;
package/dist/Components/Editor/Editor.js CHANGED
@@ -1,12 +1,46 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
2
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
37
  };
5
38
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = Editor;
7
- var react_1 = __importDefault(require("react"));
39
+ var react_1 = __importStar(require("react"));
8
40
  var jodit_react_1 = __importDefault(require("jodit-react"));
9
- function Editor(_a) {
41
+ var Editor = react_1.default.memo(function Editor(_a) {
10
42
  var value = _a.value, key = _a.key, config = _a.config, editorRef = _a.editorRef, className = _a.className, onChange = _a.onChange, onBlur = _a.onBlur;
11
- return (react_1.default.createElement(jodit_react_1.default, { key: key, config: config, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
12
- }
43
+ var stableConfig = (0, react_1.useMemo)(function () { return config; }, [JSON.stringify(config)]); // eslint-disable-line react-hooks/exhaustive-deps
44
+ return (react_1.default.createElement(jodit_react_1.default, { key: key, config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }));
45
+ });
46
+ exports.default = Editor;
package/dist/Components/KanbanBoard/AccountCard.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { Account, KanbanBoardProps } from "./KanbanBoardProps";
3
- declare const AccountCard: ({ account, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
3
+ declare const AccountCard: React.MemoExoticComponent<({ account, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
4
4
  account: Account;
5
5
  index?: number;
6
6
  onDelete: KanbanBoardProps["onDelete"];
@@ -8,5 +8,5 @@ declare const AccountCard: ({ account, onDelete, onOpen, isExpanded, onToggleExp
8
8
  isExpanded?: boolean;
9
9
  onToggleExpand?: () => void;
10
10
  isDeletable?: boolean;
11
- }) => React.JSX.Element;
11
+ }) => React.JSX.Element>;
12
12
  export default AccountCard;
package/dist/Components/KanbanBoard/AccountCard.js CHANGED
@@ -1,19 +1,52 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
2
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
37
  };
5
38
  Object.defineProperty(exports, "__esModule", { value: true });
6
- var react_1 = __importDefault(require("react"));
39
+ var react_1 = __importStar(require("react"));
7
40
  var react_2 = require("@chakra-ui/react");
8
41
  var lucide_react_1 = require("lucide-react");
9
42
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
10
43
  var AccountRow_1 = __importDefault(require("./AccountRow"));
11
44
  var excludeKeys = ["id", "details"];
12
- var AccountCard = function (_a) {
45
+ var AccountCard = react_1.default.memo(function (_a) {
13
46
  var _b, _c, _d, _e, _f, _g, _h;
14
47
  var account = _a.account, onDelete = _a.onDelete, onOpen = _a.onOpen, _j = _a.isExpanded, isExpanded = _j === void 0 ? false : _j, onToggleExpand = _a.onToggleExpand, _k = _a.isDeletable, isDeletable = _k === void 0 ? true : _k;
15
48
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
16
- var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
49
+ var keys = (0, react_1.useMemo)(function () { return Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); }); }, [account]);
17
50
  var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
18
51
  var handleToggle = function () {
19
52
  onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
@@ -37,5 +70,5 @@ var AccountCard = function (_a) {
37
70
  react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer", "aria-label": "Delete" }))),
38
71
  react_1.default.createElement(react_2.Tooltip, { label: "Open" },
39
72
  react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_h = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _h === void 0 ? void 0 : _h[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer", "aria-label": "Open" })))))));
40
- };
73
+ });
41
74
  exports.default = AccountCard;
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -70,6 +70,31 @@ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/Overf
70
70
  var Button_1 = __importDefault(require("../Button/Button"));
71
71
  /** Narrow rail width when a column is horizontally collapsed. */
72
72
  var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
73
+ var KanbanRow = react_1.default.memo(function (_a) {
74
+ var index = _a.index, style = _a.style, data = _a.data;
75
+ var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
76
+ var account = items[index];
77
+ if (!account) {
78
+ return react_1.default.createElement("div", { style: style });
79
+ }
80
+ return (react_1.default.createElement("div", { style: style },
81
+ react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
82
+ react_1.default.createElement("div", { style: { marginBottom: 12 } },
83
+ react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
84
+ var _a;
85
+ return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
86
+ return toggleExpand(account.id, colId, index);
87
+ }, isDeletable: canDelete }))));
88
+ })))));
89
+ });
90
+ var NoItemsTemplate = react_1.default.memo(function (_a) {
91
+ var _b;
92
+ var column = _a.column, noItems = _a.noItems, colors = _a.colors;
93
+ return (react_1.default.createElement(react_2.Box, null,
94
+ react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
95
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
96
+ !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && (react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item")))));
97
+ });
73
98
  function reorderColumnEntries(entries, startIndex, endIndex) {
74
99
  var result = Array.from(entries);
75
100
  var removed = result.splice(startIndex, 1)[0];
@@ -191,6 +216,37 @@ var KanbanBoard = function (_a) {
191
216
  var containerRef = (0, react_1.useRef)(null);
192
217
  // store measured heights
193
218
  var _4 = (0, react_1.useState)({}), sizes = _4[0], setSizes = _4[1];
219
+ var hasMountedSizes = (0, react_1.useRef)(false);
220
+ // Prune stale size entries when columns change (skip first render)
221
+ (0, react_1.useEffect)(function () {
222
+ if (!hasMountedSizes.current) {
223
+ hasMountedSizes.current = true;
224
+ return;
225
+ }
226
+ setSizes(function (prev) {
227
+ if (Object.keys(prev).length === 0)
228
+ return prev;
229
+ var validKeys = new Set();
230
+ for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
231
+ var _b = _a[_i], colId = _b[0], col = _b[1];
232
+ for (var i = 0; i < col.items.length; i++) {
233
+ validKeys.add("".concat(colId, "-").concat(i));
234
+ }
235
+ }
236
+ var pruned = {};
237
+ var changed = false;
238
+ for (var _c = 0, _d = Object.keys(prev); _c < _d.length; _c++) {
239
+ var key = _d[_c];
240
+ if (validKeys.has(key)) {
241
+ pruned[key] = prev[key];
242
+ }
243
+ else {
244
+ changed = true;
245
+ }
246
+ }
247
+ return changed ? pruned : prev;
248
+ });
249
+ }, [columns]);
194
250
  // update height for an item
195
251
  var setSize = (0, react_1.useCallback)(function (index, size, colId) {
196
252
  var key = "".concat(colId, "-").concat(index);
@@ -204,10 +260,10 @@ var KanbanBoard = function (_a) {
204
260
  listRefs.current[colId].resetAfterIndex(index);
205
261
  }
206
262
  }, []);
207
- var getItemSize = function (index, _items, colId) {
263
+ var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
208
264
  var key = "".concat(colId, "-").concat(index);
209
- return (sizes[key] || 180) + 12; // Add margin to the measured height
210
- };
265
+ return (sizes[key] || 80) + 12;
266
+ }, [sizes]);
211
267
  // Calculate container height
212
268
  (0, react_1.useEffect)(function () {
213
269
  var calculateDimensions = function () {
@@ -291,32 +347,15 @@ var KanbanBoard = function (_a) {
291
347
  var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
292
348
  onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
293
349
  };
294
- // row renderer
295
- var Row = function (_a) {
296
- var index = _a.index, style = _a.style, data = _a.data;
297
- var items = data.items, colId = data.colId;
298
- var account = items[index];
299
- if (!account) {
300
- return react_1.default.createElement("div", { style: style });
301
- }
302
- return (react_1.default.createElement("div", { style: style },
303
- react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
304
- react_1.default.createElement("div", { style: { marginBottom: 12 } },
305
- react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
306
- var _a;
307
- return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
308
- return toggleExpand(account.id, colId, index);
309
- }, isDeletable: canDelete }))));
310
- })))));
311
- };
312
- var NoItemsTemplate = function (_a) {
313
- var _b;
314
- var column = _a.column;
315
- return (react_1.default.createElement(react_2.Box, null,
316
- react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
317
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
318
- !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && (react_1.default.createElement(Button_1.default, { onClick: function () { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item")))));
319
- };
350
+ var rowBaseProps = (0, react_1.useMemo)(function () { return ({
351
+ canDrag: canDrag,
352
+ expanded: expanded,
353
+ onDelete: onDelete,
354
+ onOpen: onOpen,
355
+ canDelete: canDelete,
356
+ setSize: setSize,
357
+ toggleExpand: toggleExpand,
358
+ }); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
320
359
  var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
321
360
  var _a;
322
361
  var item = column.items[rubric.source.index];
@@ -391,17 +430,14 @@ var KanbanBoard = function (_a) {
391
430
  },
392
431
  cursor: canDrag ? "grab" : "not-allowed",
393
432
  } },
394
- (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
433
+ (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
395
434
  virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
396
435
  if (el)
397
436
  listRefs.current[colId] = el;
398
437
  }, height: containerHeight - 150, itemCount: column.items.length +
399
438
  (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
400
439
  return getItemSize(index, column.items, colId);
401
- }, width: "100%", itemData: {
402
- items: column.items,
403
- colId: colId,
404
- } }, Row)) : (react_1.default.createElement(react_2.Box, null,
440
+ }, width: "100%", itemData: __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId }) }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
405
441
  column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
406
442
  react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
407
443
  var _a;
package/dist/Components/MultiSelect/MultiSelect.js CHANGED
@@ -78,17 +78,14 @@ function MultiSelect(_a) {
78
78
  var value = _a.value, onValueChange = _a.onValueChange, _d = _a.width, width = _d === void 0 ? "100%" : _d, _e = _a.label, label = _e === void 0 ? "label" : _e, _f = _a.isRequired, isRequired = _f === void 0 ? true : _f, _g = _a.isInformation, isInformation = _g === void 0 ? false : _g, _h = _a.informationMessage, informationMessage = _h === void 0 ? "" : _h, name = _a.name, id = _a.id, _j = _a.placeholderText, placeholderText = _j === void 0 ? "Type valid email and press enter" : _j, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _k = _a.size, size = _k === void 0 ? "md" : _k, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
79
79
  var theme = (0, useCustomTheme_1.useCustomTheme)();
80
80
  var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
81
- var _l = (0, react_1.useState)(value), options = _l[0], setOptions = _l[1];
82
- var _m = (0, react_1.useState)(""), inputValue = _m[0], setInputValue = _m[1];
83
- var _o = (0, react_1.useState)(""), localError = _o[0], setLocalError = _o[1];
81
+ var options = value;
82
+ var _l = (0, react_1.useState)(""), inputValue = _l[0], setInputValue = _l[1];
83
+ var _m = (0, react_1.useState)(""), localError = _m[0], setLocalError = _m[1];
84
84
  var inputRef = (0, react_1.useRef)(null);
85
- (0, react_1.useEffect)(function () {
86
- setOptions(value);
87
- }, [value]);
88
- var handleInputChange = function (e) {
85
+ var handleInputChange = (0, react_1.useCallback)(function (e) {
89
86
  setInputValue(e.target.value);
90
87
  setLocalError("");
91
- };
88
+ }, []);
92
89
  var validateEmail = function (email) {
93
90
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
94
91
  return emailRegex.test(email);
@@ -102,23 +99,17 @@ function MultiSelect(_a) {
102
99
  var existingOption = options.find(function (option) { return option.label === inputValue; });
103
100
  if (!existingOption) {
104
101
  var newOption = { id: generateUniqueId(), label: inputValue };
105
- var updatedOptions = __spreadArray(__spreadArray([], options, true), [newOption], false);
106
- setOptions(updatedOptions);
107
- onValueChange(updatedOptions);
102
+ onValueChange(__spreadArray(__spreadArray([], options, true), [newOption], false));
108
103
  setInputValue("");
109
104
  }
110
105
  }
111
106
  else if (e.key === "Backspace" && inputValue === "") {
112
- var updatedOptions = options.slice(0, -1); // Remove the last item
113
- setOptions(updatedOptions);
114
- onValueChange(updatedOptions);
107
+ onValueChange(options.slice(0, -1));
115
108
  }
116
109
  };
117
- var handleRemove = function (optionToRemove) {
118
- var updatedOptions = options.filter(function (option) { return option.id !== optionToRemove.id; });
119
- setOptions(updatedOptions);
120
- onValueChange(updatedOptions);
121
- };
110
+ var handleRemove = (0, react_1.useCallback)(function (optionToRemove) {
111
+ onValueChange(options.filter(function (option) { return option.id !== optionToRemove.id; }));
112
+ }, [options, onValueChange]);
122
113
  return (react_1.default.createElement(react_2.Box, { width: width },
123
114
  label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
124
115
  react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "1px solid", borderColor: error || localError
package/dist/Components/SearchSelect/SearchSelect.js CHANGED
@@ -67,6 +67,7 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
67
67
  var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
68
68
  var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
69
69
  var searchSelectSize_1 = require("./searchSelectSize");
70
+ var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
70
71
  var normalizeSingleValue = function (val) {
71
72
  if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
72
73
  return val;
@@ -110,13 +111,16 @@ var SearchSelect = function (_a) {
110
111
  : normalizeSingleValue(value)
111
112
  ? [normalizeSingleValue(value)]
112
113
  : [];
113
- var filteredOptions = options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); });
114
+ var filteredOptions = (0, react_1.useMemo)(function () { return options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); }); }, [options, inputValue]);
115
+ var onSearchRef = (0, react_1.useRef)(onSearch);
116
+ onSearchRef.current = onSearch;
114
117
  (0, react_1.useEffect)(function () {
115
118
  var delayDebounce = setTimeout(function () {
116
- onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
119
+ var _a;
120
+ (_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, inputValue);
117
121
  }, 1000);
118
122
  return function () { return clearTimeout(delayDebounce); };
119
- }, [inputValue, onSearch]);
123
+ }, [inputValue]);
120
124
  (0, react_1.useEffect)(function () {
121
125
  if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
122
126
  setHasMore(options.length % pagination.limit === 0);
@@ -142,8 +146,8 @@ var SearchSelect = function (_a) {
142
146
  else {
143
147
  onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
144
148
  setIsOpen(false);
149
+ setInputValue("");
145
150
  }
146
- setInputValue("");
147
151
  };
148
152
  var handleRemove = function (id) {
149
153
  var updated = selectedValues.filter(function (v) { return v.id !== id; });
@@ -167,16 +171,15 @@ var SearchSelect = function (_a) {
167
171
  }
168
172
  setInputValue("");
169
173
  };
170
- var isSelected = function (id) {
171
- return selectedValues.some(function (v) { return v.id === id; });
172
- };
174
+ var selectedIdsSet = (0, react_1.useMemo)(function () { return new Set(selectedValues.map(function (v) { return v.id; })); }, [selectedValues]);
175
+ var isSelected = (0, react_1.useCallback)(function (id) { return selectedIdsSet.has(id); }, [selectedIdsSet]);
173
176
  var isValidIcon = function (icon) {
174
177
  return react_1.default.isValidElement(icon);
175
178
  };
176
- var allFilteredSelected = filteredOptions.length > 0 &&
177
- filteredOptions.every(function (opt) {
178
- return selectedValues.some(function (sel) { return sel.id === opt.id; });
179
- });
179
+ var allFilteredSelected = (0, react_1.useMemo)(function () {
180
+ return filteredOptions.length > 0 &&
181
+ filteredOptions.every(function (opt) { return selectedIdsSet.has(opt.id); });
182
+ }, [filteredOptions, selectedIdsSet]);
180
183
  var handleScroll = (0, react_1.useCallback)(function (e) {
181
184
  if (!pagination ||
182
185
  !pagination.onScroll ||
@@ -274,13 +277,17 @@ var SearchSelect = function (_a) {
274
277
  }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))))))),
275
278
  isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
276
279
  isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
277
- react_1.default.createElement(react_2.Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", size: s.checkboxSize }),
280
+ react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
278
281
  react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
279
- react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
282
+ react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
280
283
  react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
281
- react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
282
- isMultiple && (react_1.default.createElement(react_2.Checkbox, { isChecked: isSelected(option.id), pointerEvents: "none", colorScheme: "blue", size: s.checkboxSize })),
283
- option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }))),
284
+ react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
285
+ filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
286
+ isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
287
+ option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
288
+ ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
289
+ react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
290
+ react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
284
291
  (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
285
292
  addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
286
293
  react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New"))))),
package/dist/Components/Table/Components/ActiveFilters.js CHANGED
@@ -10,47 +10,88 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ var desc = Object.getOwnPropertyDescriptor(m, k);
16
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
17
+ desc = { enumerable: true, get: function() { return m[k]; } };
18
+ }
19
+ Object.defineProperty(o, k2, desc);
20
+ }) : (function(o, m, k, k2) {
21
+ if (k2 === undefined) k2 = k;
22
+ o[k2] = m[k];
23
+ }));
24
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
25
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
26
+ }) : function(o, v) {
27
+ o["default"] = v;
28
+ });
29
+ var __importStar = (this && this.__importStar) || (function () {
30
+ var ownKeys = function(o) {
31
+ ownKeys = Object.getOwnPropertyNames || function (o) {
32
+ var ar = [];
33
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
34
+ return ar;
35
+ };
36
+ return ownKeys(o);
37
+ };
38
+ return function (mod) {
39
+ if (mod && mod.__esModule) return mod;
40
+ var result = {};
41
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
42
+ __setModuleDefault(result, mod);
43
+ return result;
44
+ };
45
+ })();
13
46
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
47
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
48
  };
16
49
  Object.defineProperty(exports, "__esModule", { value: true });
17
- var react_1 = __importDefault(require("react"));
50
+ var react_1 = __importStar(require("react"));
18
51
  var react_2 = require("@chakra-ui/react");
19
52
  var lucide_react_1 = require("lucide-react");
20
53
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
21
54
  var Divider_1 = __importDefault(require("../../Divider/Divider"));
22
- var ActiveFilters = function (_a) {
55
+ var ActiveFilters = react_1.default.memo(function (_a) {
23
56
  var _b, _c, _d, _e, _f, _g, _h, _j;
24
57
  var columns = _a.columns, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch;
25
58
  var theme = (0, useCustomTheme_1.useCustomTheme)();
26
- // Get active filters (columns that have a search value)
27
- var activeFilters = Object.entries(columnsSearch)
28
- .filter(function (_a) {
29
- var _ = _a[0], value = _a[1];
30
- return value && value.trim() !== "";
31
- })
32
- .map(function (_a) {
33
- var columnId = _a[0], value = _a[1];
34
- var column = columns.find(function (col) { return col.id === columnId; });
35
- return {
36
- columnId: columnId,
37
- label: (column === null || column === void 0 ? void 0 : column.label) || columnId,
38
- value: value.trim(),
39
- };
40
- });
59
+ var columnLabelMap = (0, react_1.useMemo)(function () {
60
+ var map = new Map();
61
+ for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
62
+ var col = columns_1[_i];
63
+ map.set(col.id, col.label);
64
+ }
65
+ return map;
66
+ }, [columns]);
67
+ var activeFilters = (0, react_1.useMemo)(function () {
68
+ return Object.entries(columnsSearch)
69
+ .filter(function (_a) {
70
+ var _ = _a[0], value = _a[1];
71
+ return value && value.trim() !== "";
72
+ })
73
+ .map(function (_a) {
74
+ var columnId = _a[0], value = _a[1];
75
+ return ({
76
+ columnId: columnId,
77
+ label: columnLabelMap.get(columnId) || columnId,
78
+ value: value.trim(),
79
+ });
80
+ });
81
+ }, [columnsSearch, columnLabelMap]);
41
82
  if (activeFilters.length === 0) {
42
83
  return null;
43
84
  }
44
- var handleRemoveFilter = function (columnId) {
85
+ var handleRemoveFilter = (0, react_1.useCallback)(function (columnId) {
45
86
  setColumnsSearch(function (prev) {
46
87
  var newSearch = __assign({}, prev);
47
88
  delete newSearch[columnId];
48
89
  return newSearch;
49
90
  });
50
- };
51
- var handleClearAll = function () {
91
+ }, [setColumnsSearch]);
92
+ var handleClearAll = (0, react_1.useCallback)(function () {
52
93
  setColumnsSearch({});
53
- };
94
+ }, [setColumnsSearch]);
54
95
  return (react_1.default.createElement(react_2.Box, { px: 2, py: 1, bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[100]) || ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[50]), overflowX: "auto", sx: {
55
96
  '&::-webkit-scrollbar': {
56
97
  height: '6px',
@@ -87,5 +128,5 @@ var ActiveFilters = function (_a) {
87
128
  activeFilters.length > 1 && (react_1.default.createElement(react_2.Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.blue) === null || _g === void 0 ? void 0 : _g[600]) || ((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
88
129
  textDecoration: "underline",
89
130
  }, flexShrink: 0, whiteSpace: "nowrap" }, "Clear All")))));
90
- };
131
+ });
91
132
  exports.default = ActiveFilters;
package/dist/Components/Table/Components/Pagination.d.ts CHANGED
@@ -10,5 +10,5 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationS
10
10
  dataLength: number;
11
11
  isServerPagination: boolean;
12
12
  };
13
- declare const Pagination: ({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element;
13
+ declare const Pagination: React.MemoExoticComponent<({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => React.JSX.Element>;
14
14
  export default Pagination;
package/dist/Components/Table/Components/Pagination.js CHANGED
@@ -1,17 +1,49 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
5
35
  Object.defineProperty(exports, "__esModule", { value: true });
6
- var react_1 = __importDefault(require("react"));
36
+ var react_1 = __importStar(require("react"));
7
37
  var react_2 = require("@chakra-ui/react");
8
38
  var table_1 = require("../../../Utils/table");
9
39
  var lucide_react_1 = require("lucide-react");
10
- var Pagination = function (_a) {
40
+ var Pagination = react_1.default.memo(function (_a) {
11
41
  var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
12
- var computedOptions = paginationSelectOptions && paginationSelectOptions.length
13
- ? paginationSelectOptions
14
- : (0, table_1.pageSizeCalculation)(dataLength);
42
+ var computedOptions = (0, react_1.useMemo)(function () {
43
+ return paginationSelectOptions && paginationSelectOptions.length
44
+ ? paginationSelectOptions
45
+ : (0, table_1.pageSizeCalculation)(dataLength);
46
+ }, [paginationSelectOptions, dataLength]);
15
47
  // const isLeftDisabled = currentPage === 0;
16
48
  // const isRightDisabled = currentPage >= pages - 1;
17
49
  var isLeftDisabled = dataLength === 0 || currentPage === 0;
@@ -32,5 +64,5 @@ var Pagination = function (_a) {
32
64
  react_1.default.createElement(lucide_react_1.ChevronRight, null)),
33
65
  react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
34
66
  react_1.default.createElement(lucide_react_1.ChevronsRight, null))))));
35
- };
67
+ });
36
68
  exports.default = Pagination;
package/dist/Components/Table/Components/TableFilters.js CHANGED
@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
35
35
  Object.defineProperty(exports, "__esModule", { value: true });
36
36
  var react_1 = __importStar(require("react"));
37
37
  var react_2 = require("@chakra-ui/react");
38
- var table_1 = require("../../../Utils/table");
39
38
  var lucide_react_1 = require("lucide-react");
40
39
  var TableFilters = (0, react_1.memo)(function (_a) {
41
40
  var _b, _c;
@@ -43,9 +42,16 @@ var TableFilters = (0, react_1.memo)(function (_a) {
43
42
  var theme = (0, react_2.useTheme)();
44
43
  var searchRef = (0, react_1.useRef)(null);
45
44
  var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
46
- var debounceRef = (0, table_1.debounce)(function (value) {
47
- setColumnsSearch(value);
48
- }, 700);
45
+ var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
46
+ setColumnsSearchRef.current = setColumnsSearch;
47
+ var debounceTimerRef = (0, react_1.useRef)(null);
48
+ var debouncedSearch = (0, react_1.useCallback)(function (value) {
49
+ if (debounceTimerRef.current)
50
+ clearTimeout(debounceTimerRef.current);
51
+ debounceTimerRef.current = setTimeout(function () {
52
+ setColumnsSearchRef.current(value);
53
+ }, 700);
54
+ }, []);
49
55
  (0, react_1.useEffect)(function () {
50
56
  if (columnsSearch.length && searchRef.current) {
51
57
  searchRef.current.value = columnsSearch;
@@ -77,7 +83,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
77
83
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
78
84
  react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
79
85
  e.stopPropagation();
80
- debounceRef(e.target.value);
86
+ debouncedSearch(e.target.value);
81
87
  }, onFocus: function (e) { return e.stopPropagation(); } })))))));
82
88
  });
83
89
  exports.default = TableFilters;
package/dist/Components/Table/Components/useTable.js CHANGED
@@ -38,14 +38,15 @@ var mergeColumnWithPreference = function (pref, originalCol) {
38
38
  return next;
39
39
  };
40
40
  var useTable = function (_a) {
41
+ var _b, _c;
41
42
  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;
42
43
  var theme = (0, useCustomTheme_1.useCustomTheme)();
43
44
  var headerRefs = (0, react_1.useRef)([]);
44
- var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
45
- var _c = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _c[0], setSelection = _c[1];
46
- var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
47
- var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
48
- var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
45
+ var _d = (0, react_1.useState)([]), columnWidths = _d[0], setColumnWidths = _d[1];
46
+ var _e = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _e[0], setSelection = _e[1];
47
+ var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
48
+ var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
49
+ var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
49
50
  var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
50
51
  if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
51
52
  prevRowsPerPageProp.current = noOfRowsPerPage;
@@ -54,12 +55,12 @@ var useTable = function (_a) {
54
55
  }
55
56
  }
56
57
  var tableData = data;
57
- var _g = (0, react_1.useState)(function () {
58
+ var _j = (0, react_1.useState)(function () {
58
59
  return columns.map(function (col, i) {
59
60
  var _a;
60
61
  return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
61
62
  });
62
- }), columnsList = _g[0], setColumnsList = _g[1];
63
+ }), columnsList = _j[0], setColumnsList = _j[1];
63
64
  (0, react_1.useEffect)(function () {
64
65
  var _a;
65
66
  var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -90,8 +91,18 @@ var useTable = function (_a) {
90
91
  overflowY: "auto",
91
92
  });
92
93
  }, [tableBorderColor, theme]);
93
- var isContent = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.content; }); }, [tableData]);
94
- var isLink = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [tableData]);
94
+ var prevIsContent = (0, react_1.useRef)(false);
95
+ var prevIsLink = (0, react_1.useRef)(false);
96
+ var isContent = (0, react_1.useMemo)(function () {
97
+ var result = tableData.some(function (o) { return o.content; });
98
+ prevIsContent.current = result;
99
+ return result;
100
+ }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
101
+ var isLink = (0, react_1.useMemo)(function () {
102
+ var result = tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; });
103
+ prevIsLink.current = result;
104
+ return result;
105
+ }, [tableData.length === 0 ? 0 : (_c = tableData[0]) === null || _c === void 0 ? void 0 : _c.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
95
106
  (0, react_1.useEffect)(function () {
96
107
  var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
97
108
  setColumnWidths(widths);
@@ -128,24 +139,25 @@ var useTable = function (_a) {
128
139
  var handleSort = (0, react_1.useCallback)(function (field, sort) {
129
140
  if (!sort)
130
141
  return;
131
- var newSortState = __spreadArray([], columnsSort, true);
132
- var existingIndex = newSortState.findIndex(function (sort) { return sort.column === field; });
133
- if (existingIndex === -1) {
134
- newSortState.push({
135
- column: field,
136
- direction: "asc", // Default to ascending when adding a column
137
- });
138
- }
139
- else {
140
- var existingSort = newSortState[existingIndex];
141
- existingSort.direction = sort;
142
- }
143
- setColumnsSort(newSortState);
144
- }, [columnsSort]);
142
+ setColumnsSort(function (prev) {
143
+ var newSortState = __spreadArray([], prev, true);
144
+ var existingIndex = newSortState.findIndex(function (s) { return s.column === field; });
145
+ if (existingIndex === -1) {
146
+ newSortState.push({
147
+ column: field,
148
+ direction: "asc",
149
+ });
150
+ }
151
+ else {
152
+ newSortState[existingIndex] = __assign(__assign({}, newSortState[existingIndex]), { direction: sort });
153
+ }
154
+ return newSortState;
155
+ });
156
+ }, []);
145
157
  (0, react_1.useEffect)(function () {
146
158
  setSelection(selections !== null && selections !== void 0 ? selections : []);
147
159
  }, [selections]);
148
- var _h = (0, react_1.useState)(false), isSelecting = _h[0], setIsSelecting = _h[1];
160
+ var _k = (0, react_1.useState)(false), isSelecting = _k[0], setIsSelecting = _k[1];
149
161
  var selectionRef = (0, react_1.useRef)(selection);
150
162
  selectionRef.current = selection;
151
163
  var onSelectionRef = (0, react_1.useRef)(onSelection);
package/dist/Components/Table/Table.js CHANGED
@@ -142,7 +142,9 @@ function Table(_a) {
142
142
  prevPageRef.current = currentPage;
143
143
  }
144
144
  }, [currentPage, rowsPerPage]);
145
- var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
145
+ var tablePaginationText = (0, react_1.useMemo)(function () { return isServerPagination
146
+ ? "".concat(startRow + 1, " - ").concat(Math.min(startRow + rowsPerPage, totalRecords), " of ").concat(totalRecords)
147
+ : "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(tableData.length); }, [startRow, rowsPerPage, totalRecords, endRow, tableData.length]);
146
148
  var controlsHeight = 45;
147
149
  var estimatedRowHeight = 45;
148
150
  var actualRows = _filteredData.length;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.187",
3
+ "version": "2.2.189",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",