pixelize-design-library 2.2.153 → 2.2.155

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 (7) hide show
  1. package/dist/Components/KanbanBoard/KanbanBoard.js +22 -7
  2. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +4 -1
  3. package/dist/Components/Table/Components/useTable.js +11 -5
  4. package/dist/Components/Table/TableSettings/ManageColumns.d.ts +3 -1
  5. package/dist/Components/Table/TableSettings/ManageColumns.js +65 -22
  6. package/dist/Components/Table/TableSettings/TableSettings.js +52 -18
  7. package/package.json +1 -1
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -152,18 +152,31 @@ var KanbanBoard = function (_a) {
152
152
  var copiedItems = __spreadArray([], sourceCol.items, true);
153
153
  copiedItems.splice(source.index, 1);
154
154
  copiedItems.splice(destination.index, 0, draggedItem);
155
- setColumns(__assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a)));
155
+ var nextColumns = __assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a));
156
+ setColumns(nextColumns);
157
+ onDrag === null || onDrag === void 0 ? void 0 : onDrag({
158
+ from: source.droppableId,
159
+ to: destination.droppableId,
160
+ item: draggedItem,
161
+ columns: nextColumns,
162
+ fromIndex: source.index,
163
+ toIndex: destination.index,
164
+ });
156
165
  }
157
166
  else {
158
167
  var sourceItems = __spreadArray([], sourceCol.items, true);
159
168
  var destItems = __spreadArray([], destCol.items, true);
160
169
  sourceItems.splice(source.index, 1);
161
170
  destItems.splice(destination.index, 0, draggedItem);
162
- setColumns(__assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b)));
171
+ var nextColumns = __assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b));
172
+ setColumns(nextColumns);
163
173
  onDrag === null || onDrag === void 0 ? void 0 : onDrag({
164
174
  from: source.droppableId,
165
175
  to: destination.droppableId,
166
176
  item: draggedItem,
177
+ columns: nextColumns,
178
+ fromIndex: source.index,
179
+ toIndex: destination.index,
167
180
  });
168
181
  }
169
182
  };
@@ -175,8 +188,11 @@ var KanbanBoard = function (_a) {
175
188
  // row renderer
176
189
  var Row = function (_a) {
177
190
  var index = _a.index, style = _a.style, data = _a.data;
178
- var items = data.items, colId = data.colId, placeholder = data.placeholder;
191
+ var items = data.items, colId = data.colId;
179
192
  var account = items[index];
193
+ if (!account) {
194
+ return react_1.default.createElement("div", { style: style });
195
+ }
180
196
  return (react_1.default.createElement("div", { style: style },
181
197
  react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
182
198
  react_1.default.createElement("div", { style: { marginBottom: 12 } },
@@ -185,8 +201,7 @@ var KanbanBoard = function (_a) {
185
201
  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 () {
186
202
  return toggleExpand(account.id, colId, index);
187
203
  }, isDeletable: canDelete }))));
188
- }))),
189
- index === items.length - 1 && placeholder));
204
+ })))));
190
205
  };
191
206
  var NoItemsTemplate = function (_a) {
192
207
  var _b;
@@ -304,12 +319,12 @@ var KanbanBoard = function (_a) {
304
319
  virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
305
320
  if (el)
306
321
  listRefs.current[colId] = el;
307
- }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) {
322
+ }, height: containerHeight - 150, itemCount: column.items.length +
323
+ (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
308
324
  return getItemSize(index, column.items, colId);
309
325
  }, width: "100%", itemData: {
310
326
  items: column.items,
311
327
  colId: colId,
312
- placeholder: provided.placeholder,
313
328
  } }, Row)) : (react_1.default.createElement(react_2.Box, null,
314
329
  column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
315
330
  react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -27,10 +27,13 @@ export type KanbanBoardProps = {
27
27
  onDelete?: (account: Account) => void;
28
28
  onOpen?: (account: Account) => void;
29
29
  onColumnDelete?: (colId: (string | number)[]) => void;
30
- onDrag?: ({ from, to, item, }: {
30
+ onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
31
31
  from: string;
32
32
  to: string;
33
33
  item: Account;
34
+ columns: Record<string, ColumnType>;
35
+ fromIndex: number;
36
+ toIndex: number;
34
37
  }) => void;
35
38
  isLoading?: boolean;
36
39
  kanbanSelect?: {
package/dist/Components/Table/Components/useTable.js CHANGED
@@ -35,15 +35,21 @@ var useTable = function (_a) {
35
35
  var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
36
36
  var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
37
37
  var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
38
- var _h = (0, react_1.useState)(columns), columnsList = _h[0], setColumnsList = _h[1];
38
+ var _h = (0, react_1.useState)(function () {
39
+ return columns.map(function (col) { return (__assign({}, col)); });
40
+ }), columnsList = _h[0], setColumnsList = _h[1];
39
41
  (0, react_1.useEffect)(function () {
40
42
  if (tablePreferences) {
41
- var columnPreference = tablePreferences.columns;
42
- if (columnPreference === null || columnPreference === void 0 ? void 0 : columnPreference.length) {
43
- setColumnsList(columnPreference);
43
+ var columnPreference_1 = tablePreferences.columns;
44
+ if (columnPreference_1 === null || columnPreference_1 === void 0 ? void 0 : columnPreference_1.length) {
45
+ var mergedColumns = columns.map(function (originalCol) {
46
+ var prefCol = columnPreference_1.find(function (c) { return c.id === originalCol.id; });
47
+ return prefCol ? __assign(__assign({}, originalCol), prefCol) : __assign({}, originalCol);
48
+ });
49
+ setColumnsList(mergedColumns);
44
50
  }
45
51
  }
46
- }, [tablePreferences]);
52
+ }, [tablePreferences, columns]);
47
53
  (0, react_1.useEffect)(function () {
48
54
  setFilteredData(tableData);
49
55
  }, [tableData]);
package/dist/Components/Table/TableSettings/ManageColumns.d.ts CHANGED
@@ -3,8 +3,10 @@ import { TableProps } from "../TableProps";
3
3
  type ManageColumnsMethods = {
4
4
  getManageColumnsData: () => TableProps["columns"];
5
5
  };
6
- declare const ManageColumns: ({ columns, childInputMethodsRef, }: {
6
+ declare const ManageColumns: ({ columns, items, setItems, childInputMethodsRef, }: {
7
7
  columns: TableProps["columns"];
8
+ items: TableProps["columns"];
9
+ setItems: React.Dispatch<React.SetStateAction<TableProps["columns"]>>;
8
10
  childInputMethodsRef: React.Ref<ManageColumnsMethods>;
9
11
  }) => React.JSX.Element;
10
12
  export default ManageColumns;
package/dist/Components/Table/TableSettings/ManageColumns.js CHANGED
@@ -62,13 +62,14 @@ var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
62
62
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
63
63
  var lucide_react_1 = require("lucide-react");
64
64
  var ManageColumns = function (_a) {
65
- var columns = _a.columns, childInputMethodsRef = _a.childInputMethodsRef;
65
+ var columns = _a.columns, items = _a.items, setItems = _a.setItems, childInputMethodsRef = _a.childInputMethodsRef;
66
66
  var theme = (0, useCustomTheme_1.useCustomTheme)();
67
- // ✅ keep isHidden as it is (true = hidden, false = visible)
68
- var _b = (0, react_1.useState)(columns), items = _b[0], setItems = _b[1];
69
- var _c = (0, react_1.useState)(""), searchTerm = _c[0], setSearchTerm = _c[1];
70
- var _d = (0, react_1.useState)(null), draggedItemIndex = _d[0], setDraggedItemIndex = _d[1];
71
- var _e = (0, react_1.useState)(null), error = _e[0], setError = _e[1];
67
+ var _b = (0, react_1.useState)(""), searchTerm = _b[0], setSearchTerm = _b[1];
68
+ var _c = (0, react_1.useState)(null), draggedItemIndex = _c[0], setDraggedItemIndex = _c[1];
69
+ var _d = (0, react_1.useState)(null), error = _d[0], setError = _d[1];
70
+ var visibleCount = (0, react_1.useMemo)(function () {
71
+ return items.filter(function (i) { return !i.isHidden; }).length;
72
+ }, [items]);
72
73
  (0, react_1.useImperativeHandle)(childInputMethodsRef, function () {
73
74
  return {
74
75
  getManageColumnsData: function () {
@@ -89,12 +90,11 @@ var ManageColumns = function (_a) {
89
90
  setItems(newItems);
90
91
  };
91
92
  var handleDragEnd = function () { return setDraggedItemIndex(null); };
92
- // ✅ Prevent unchecking last visible column
93
93
  var toggleCheckbox = function (index) {
94
94
  var newItems = __spreadArray([], items, true);
95
- var visibleCount = newItems.filter(function (i) { return !i.isHidden; }).length; // count visible
96
- if (!newItems[index].isHidden && visibleCount === 1) {
97
- setError("At least one column must remain visible.");
95
+ var currentVisibleCount = newItems.filter(function (i) { return !i.isHidden; }).length;
96
+ if (!newItems[index].isHidden && currentVisibleCount === 2) {
97
+ setError("At least two columns must remain visible.");
98
98
  return;
99
99
  }
100
100
  newItems[index].isHidden = !newItems[index].isHidden;
@@ -104,28 +104,71 @@ var ManageColumns = function (_a) {
104
104
  var filteredItems = items.filter(function (item) {
105
105
  return item.label.toString().toLowerCase().includes(searchTerm.toLowerCase());
106
106
  });
107
- // ✅ Select all logic
108
107
  var allChecked = items.every(function (item) { return !item.isHidden; });
109
108
  var someChecked = items.some(function (item) { return !item.isHidden; }) && !allChecked;
110
109
  var handleSelectAll = function () {
111
110
  if (allChecked) {
112
- // if all visible → keep first visible, hide rest
113
- setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i === 0 ? false : true })); }));
114
- setError("At least one column must remain visible.");
111
+ setItems(items.map(function (item, i) { return (__assign(__assign({}, item), { isHidden: i >= 2 ? true : false })); }));
112
+ setError("At least two columns must remain visible.");
115
113
  }
116
114
  else {
117
- // make all visible
118
115
  setItems(items.map(function (item) { return (__assign(__assign({}, item), { isHidden: false })); }));
119
116
  setError(null);
120
117
  }
121
118
  };
122
119
  return (react_1.default.createElement(react_2.Box, { mt: "5" },
123
- react_1.default.createElement(react_2.Input, { placeholder: "Search", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); } }),
124
- !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "2" },
125
- react_1.default.createElement(Checkbox_1.default, { label: "Select all", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
126
- react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14, px: "2", py: "1" },
127
- react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
128
- react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } }))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found"))),
129
- error && (react_1.default.createElement(react_2.Text, { color: "red.500", mt: "3", fontSize: "sm" }, error))));
120
+ error && (react_1.default.createElement(react_2.Box, { mb: "4", p: 3, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200] },
121
+ react_1.default.createElement(react_2.Text, { color: theme.colors.red[600], fontSize: "sm", fontWeight: 500 }, error))),
122
+ react_1.default.createElement(react_2.Input, { placeholder: "Search columns...", mb: "4", value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, size: "md", borderRadius: "md" }),
123
+ !searchTerm.length && (react_1.default.createElement(react_2.Flex, { align: "center", mb: "3", bg: theme.colors.gray[100], p: 2, borderRadius: "md" },
124
+ react_1.default.createElement(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }))),
125
+ react_1.default.createElement(react_2.List, { spacing: "2", maxH: "300px", overflowY: "auto", sx: {
126
+ '&::-webkit-scrollbar': {
127
+ width: '3px',
128
+ height: '3px',
129
+ },
130
+ '&::-webkit-scrollbar-track': {
131
+ background: theme.colors.gray[100],
132
+ borderRadius: '2px',
133
+ },
134
+ '&::-webkit-scrollbar-thumb': {
135
+ background: theme.colors.gray[400],
136
+ borderRadius: '2px',
137
+ },
138
+ '&::-webkit-scrollbar-thumb:hover': {
139
+ background: theme.colors.gray[500],
140
+ },
141
+ scrollbarWidth: 'thin',
142
+ scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
143
+ } }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) {
144
+ var isDraggingThisItem = draggedItemIndex === index;
145
+ var isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
146
+ return (react_1.default.createElement(react_2.ListItem, { key: "".concat(item.id, "-").concat(index), draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: isDraggingThisItem
147
+ ? theme.colors.primary[100]
148
+ : isDropZone
149
+ ? theme.colors.primary[50]
150
+ : theme.colors.white, display: "flex", alignItems: "center", borderRadius: "md", border: "2px solid", borderColor: isDraggingThisItem
151
+ ? theme.colors.primary[400]
152
+ : isDropZone
153
+ ? theme.colors.primary[300]
154
+ : theme.colors.border[200], cursor: "grab", position: "relative", fontSize: 14, px: "3", py: "2", transition: "all 0.2s ease", _hover: {
155
+ bg: theme.colors.gray[50],
156
+ borderColor: theme.colors.primary[300],
157
+ boxShadow: theme.shadows.sm,
158
+ }, _active: {
159
+ cursor: "grabbing",
160
+ } },
161
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "2", color: theme.colors.gray[400], _hover: {
162
+ color: theme.colors.primary[500],
163
+ bg: "transparent",
164
+ } }),
165
+ react_1.default.createElement(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: function () { return toggleCheckbox(index); }, sx: { marginRight: "4" } })));
166
+ })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center", py: 8 }, "No columns found"))),
167
+ react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "center", mt: "4", bg: theme.colors.gray[50], p: 3, borderRadius: "md" },
168
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600], fontWeight: 500 },
169
+ visibleCount,
170
+ " of ",
171
+ items.length,
172
+ " columns visible"))));
130
173
  };
131
174
  exports.default = ManageColumns;
package/dist/Components/Table/TableSettings/TableSettings.js CHANGED
@@ -38,52 +38,86 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
38
38
  Object.defineProperty(exports, "__esModule", { value: true });
39
39
  var react_1 = require("@chakra-ui/react");
40
40
  var react_2 = __importStar(require("react"));
41
+ var framer_motion_1 = require("framer-motion");
41
42
  var ManageColumns_1 = __importDefault(require("./ManageColumns"));
42
43
  var Button_1 = __importDefault(require("../../Button/Button"));
43
44
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
44
45
  var lucide_react_1 = require("lucide-react");
45
46
  var TableFilters_1 = __importDefault(require("./TableFilters"));
47
+ var MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
46
48
  var TableSettings = function (_a) {
47
- var _b, _c;
49
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
48
50
  var columns = _a.columns, onSave = _a.onSave, tableSettings = _a.tableSettings;
49
51
  var theme = (0, useCustomTheme_1.useCustomTheme)();
50
52
  var childInputMethodsRef = (0, react_2.useRef)({});
51
53
  var childFilterMethodsRef = (0, react_2.useRef)(null);
52
- var _d = (0, react_2.useState)(false), settingsOpen = _d[0], setSettingsOpen = _d[1];
53
- var _e = (0, react_2.useState)(0), selectedIndex = _e[0], setSelectedIndex = _e[1];
54
+ var _m = (0, react_2.useState)(false), settingsOpen = _m[0], setSettingsOpen = _m[1];
55
+ var _o = (0, react_2.useState)(0), selectedIndex = _o[0], setSelectedIndex = _o[1];
56
+ var _p = (0, react_2.useState)(columns), items = _p[0], setItems = _p[1];
54
57
  var filters = (0, react_2.useMemo)(function () {
55
58
  var _a;
56
59
  return (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters) !== null && _a !== void 0 ? _a : [];
57
60
  }, [tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filters]);
58
61
  var handleSave = (0, react_2.useCallback)(function () {
59
- var _a, _b, _c, _d, _e, _f, _g;
60
- onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);
61
- (_d = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _d === void 0 ? void 0 : _d.call(tableSettings, (_g = (_f = (_e = childFilterMethodsRef.current) === null || _e === void 0 ? void 0 : _e.getSelectedFilters) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : []);
62
+ var _a, _b, _c, _d;
63
+ onSave(items);
64
+ (_a = tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.onFilterSelection) === null || _a === void 0 ? void 0 : _a.call(tableSettings, (_d = (_c = (_b = childFilterMethodsRef.current) === null || _b === void 0 ? void 0 : _b.getSelectedFilters) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : []);
62
65
  setSettingsOpen(false);
63
- }, [onSave, tableSettings]);
66
+ }, [onSave, tableSettings, items]);
67
+ var handleOpen = (0, react_2.useCallback)(function () {
68
+ setItems(columns);
69
+ setSettingsOpen(true);
70
+ }, [columns]);
64
71
  return (react_2.default.createElement(react_1.Box, null,
65
- react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer" },
66
- react_2.default.createElement(lucide_react_1.Settings, { onClick: function () { return setSettingsOpen(true); }, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
72
+ react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", _hover: { transform: "scale(1.1)" } },
73
+ react_2.default.createElement(lucide_react_1.Settings, { onClick: handleOpen, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
67
74
  react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
68
75
  react_2.default.createElement(react_1.ModalOverlay, null),
69
- react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },
70
- react_2.default.createElement(react_1.ModalHeader, null, "Table Settings"),
76
+ react_2.default.createElement(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "0", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "2px 3px", minW: "700px", minH: "600px", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50] },
77
+ react_2.default.createElement(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border) === null || _g === void 0 ? void 0 : _g[200], pb: 3 },
78
+ react_2.default.createElement(react_1.Text, { fontWeight: 600, fontSize: "lg" }, "Table Settings")),
71
79
  react_2.default.createElement(react_1.ModalCloseButton, null),
72
- react_2.default.createElement(react_1.ModalBody, null,
80
+ react_2.default.createElement(react_1.ModalBody, { py: 4 },
73
81
  react_2.default.createElement(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, orientation: "vertical", variant: "unstyled" },
74
- react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: "gray.200" },
82
+ react_2.default.createElement(react_1.TabList, { whiteSpace: "nowrap", minWidth: 160, height: "fit-content", borderRight: "1px solid", borderColor: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.border) === null || _j === void 0 ? void 0 : _j[200], pr: 2 },
75
83
  filters && filters.length > 0 && (react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
76
84
  borderLeft: "2px solid ".concat(theme.colors.primary[600]),
77
- }, fontSize: "14px", justifyContent: "flex-start" }, "Filters")),
85
+ bg: theme.colors.primary[50],
86
+ fontWeight: 600,
87
+ }, _hover: {
88
+ bg: theme.colors.gray[100],
89
+ }, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Filters")),
78
90
  react_2.default.createElement(react_1.Tab, { borderLeft: "2px solid transparent", _selected: {
79
91
  borderLeft: "2px solid ".concat(theme.colors.primary[600]),
80
- }, fontSize: "14px", justifyContent: "flex-start" }, "Manage columns")),
81
- react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50] },
92
+ bg: theme.colors.primary[50],
93
+ fontWeight: 600,
94
+ }, _hover: {
95
+ bg: theme.colors.gray[100],
96
+ }, fontSize: "14px", justifyContent: "flex-start", py: 2, borderRadius: "md", mb: 1 }, "Manage columns")),
97
+ react_2.default.createElement(react_1.TabPanels, { pl: 4, maxH: "450px", overflowY: "auto", backgroundColor: theme.colors.gray[50], borderRadius: "md", sx: {
98
+ '&::-webkit-scrollbar': {
99
+ width: '3px',
100
+ height: '3px',
101
+ },
102
+ '&::-webkit-scrollbar-track': {
103
+ background: theme.colors.gray[100],
104
+ borderRadius: '2px',
105
+ },
106
+ '&::-webkit-scrollbar-thumb': {
107
+ background: theme.colors.gray[400],
108
+ borderRadius: '2px',
109
+ },
110
+ '&::-webkit-scrollbar-thumb:hover': {
111
+ background: theme.colors.gray[500],
112
+ },
113
+ scrollbarWidth: 'thin',
114
+ scrollbarColor: "".concat(theme.colors.gray[400], " ").concat(theme.colors.gray[100]),
115
+ } },
82
116
  filters.length > 0 && (react_2.default.createElement(react_1.TabPanel, null,
83
117
  react_2.default.createElement(TableFilters_1.default, { filters: filters, childFilterMethodsRef: childFilterMethodsRef, filterSelected: tableSettings === null || tableSettings === void 0 ? void 0 : tableSettings.filterSelected }))),
84
118
  react_2.default.createElement(react_1.TabPanel, null,
85
- react_2.default.createElement(ManageColumns_1.default, { columns: columns, childInputMethodsRef: childInputMethodsRef }))))),
86
- react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem" },
119
+ react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
120
+ react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.border) === null || _l === void 0 ? void 0 : _l[200], pt: 3 },
87
121
  react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "gray" }),
88
122
  react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))));
89
123
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.153",
3
+ "version": "2.2.155",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",