pixelize-design-library 2.2.141 → 2.2.143

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.d.ts +1 -1
  2. package/dist/Components/KanbanBoard/KanbanBoard.js +116 -101
  3. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +7 -0
  4. package/dist/Components/SideBar/SideBar.js +6 -4
  5. package/dist/Components/Table/Components/TableActions.d.ts +2 -1
  6. package/dist/Components/Table/Components/TableActions.js +3 -2
  7. package/package.json +1 -1
package/dist/Components/KanbanBoard/KanbanBoard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { KanbanBoardProps } from "./KanbanBoardProps";
3
- declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, }: KanbanBoardProps) => React.JSX.Element | null;
3
+ declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, }: KanbanBoardProps) => React.JSX.Element | null;
4
4
  export default KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -68,16 +68,20 @@ var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
68
68
  var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
69
69
  var Button_1 = __importDefault(require("../Button/Button"));
70
70
  var KanbanBoard = function (_a) {
71
- var _b, _c, _d, _e, _f, _g, _h;
72
- var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems;
71
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
72
+ var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems;
73
73
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
74
74
  var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
75
75
  var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
76
76
  var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
77
77
  var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
78
- var _k = (0, react_1.useState)(data), columns = _k[0], setColumns = _k[1];
79
- var _l = (0, react_1.useState)(600), containerHeight = _l[0], setContainerHeight = _l[1];
80
- var _m = (0, react_1.useState)(null), hoveredColumn = _m[0], setHoveredColumn = _m[1];
78
+ var mergedColumns = (0, react_1.useMemo)(function () { return (__assign(__assign({}, data), (customColumns !== null && customColumns !== void 0 ? customColumns : {}))); }, [data, customColumns]);
79
+ var _v = (0, react_1.useState)(mergedColumns), columns = _v[0], setColumns = _v[1];
80
+ var _w = (0, react_1.useState)(600), containerHeight = _w[0], setContainerHeight = _w[1];
81
+ var _x = (0, react_1.useState)(null), hoveredColumn = _x[0], setHoveredColumn = _x[1];
82
+ (0, react_1.useEffect)(function () {
83
+ setColumns(mergedColumns);
84
+ }, [mergedColumns]);
81
85
  // Responsive column width
82
86
  var columnWidth = (0, react_2.useBreakpointValue)({
83
87
  base: "16rem",
@@ -85,12 +89,12 @@ var KanbanBoard = function (_a) {
85
89
  lg: "19rem",
86
90
  });
87
91
  // track expanded cards
88
- var _o = (0, react_1.useState)({}), expanded = _o[0], setExpanded = _o[1];
92
+ var _y = (0, react_1.useState)({}), expanded = _y[0], setExpanded = _y[1];
89
93
  // ref for lists
90
94
  var listRefs = (0, react_1.useRef)({});
91
95
  var containerRef = (0, react_1.useRef)(null);
92
96
  // store measured heights
93
- var _p = (0, react_1.useState)({}), sizes = _p[0], setSizes = _p[1];
97
+ var _z = (0, react_1.useState)({}), sizes = _z[0], setSizes = _z[1];
94
98
  // update height for an item
95
99
  var setSize = (0, react_1.useCallback)(function (index, size, colId) {
96
100
  var key = "".concat(colId, "-").concat(index);
@@ -188,14 +192,20 @@ var KanbanBoard = function (_a) {
188
192
  return (react_1.default.createElement(react_2.Box, null,
189
193
  react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
190
194
  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"),
191
- 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"))));
195
+ !(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")))));
192
196
  };
193
197
  if (!canView)
194
198
  return null;
199
+ var showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
200
+ var hasAnyColumns = Object.keys(columns).length > 0;
195
201
  return (react_1.default.createElement(react_1.default.Fragment, null,
196
202
  react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
197
203
  react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
198
204
  react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
205
+ showAddColumn && !isLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
206
+ react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "0.75rem", bg: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100], border: "0.125rem dashed ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[300]), _hover: { borderColor: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
207
+ react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[700] }),
208
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_g = colors === null || colors === void 0 ? void 0 : colors.text) === null || _g === void 0 ? void 0 : _g[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column")))),
199
209
  react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
200
210
  ///////////////////////////////////////////////////////////////////////////////
201
211
  sx: {
@@ -203,108 +213,113 @@ var KanbanBoard = function (_a) {
203
213
  height: "6px", // Consistent size - 6px
204
214
  },
205
215
  "&::-webkit-scrollbar-track": {
206
- background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100],
216
+ background: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100],
207
217
  borderRadius: "3px",
208
218
  margin: "0 4px", // Add gap on sides
209
219
  },
210
220
  "&::-webkit-scrollbar-thumb": {
211
- background: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[400],
221
+ background: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[400],
212
222
  borderRadius: "3px",
213
- border: "1px solid ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[100]),
223
+ border: "1px solid ".concat((_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[100]),
214
224
  },
215
225
  "&::-webkit-scrollbar-thumb:hover": {
216
- background: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500],
226
+ background: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500],
217
227
  },
218
228
  // For Firefox
219
229
  scrollbarWidth: "thin",
220
- scrollbarColor: "".concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], " ").concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100]),
221
- } }, isLoading
222
- ? Array.from({ length: 5 }).map(function (_, idx) {
223
- var _a, _b;
224
- return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
225
- react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
226
- react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
227
- })
228
- : Object.entries(columns).map(function (_a) {
229
- var colId = _a[0], column = _a[1];
230
- return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
231
- var item = column.items[rubric.source.index];
232
- return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
233
- react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
234
- return toggleExpand(item.id, colId, rubric.source.index);
235
- } })));
236
- } }, function (provided, snapshot) {
237
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
238
- return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
239
- ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
240
- : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
241
- ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
242
- : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
243
- react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
244
- react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700], noOfLines: 1, w: "100%" },
245
- react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
246
- react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, px: "8px", mr: { base: "6px", md: "10px" }, borderRadius: "999px", border: "1px solid gray", display: "flex", alignItems: "center", justifyContent: "center", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_k = column === null || column === void 0 ? void 0 : column.items) === null || _k === void 0 ? void 0 : _k.length),
247
- canDelete &&
248
- hoveredColumn === colId &&
249
- column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[600], _hover: { color: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
250
- !(canDelete &&
251
- hoveredColumn === colId &&
252
- column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" })),
253
- react_1.default.createElement(react_2.Box, { px: 2,
254
- // pb={2}
255
- flex: "1", overflowY: "auto", width: "100%",
256
- // mr={1} // Add right margin to create gap for scrollbar
257
- /////LIST/////////////////////////////
258
- sx: {
259
- overflowY: "auto",
260
- overflowX: "hidden", // optional — hides horizontal scrollbar
261
- /* === Firefox === */
262
- scrollbarWidth: "thin",
263
- scrollbarColor: "var(--chakra-colors-gray-300) transparent",
264
- /* === Chrome, Edge, Safari === */
265
- "&::-webkit-scrollbar": {
266
- width: "6px !important", // force small vertical scrollbar
267
- height: "6px !important", // for horizontal scrollbar if any
268
- },
269
- "&::-webkit-scrollbar-track": {
270
- background: "gray.100",
271
- borderRadius: "3px",
272
- marginTop: "4px",
273
- marginBottom: "4px",
274
- },
275
- "&::-webkit-scrollbar-thumb": {
276
- background: "gray.300",
277
- borderRadius: "3px",
278
- border: "1px solid",
279
- borderColor: "gray.100",
280
- },
281
- "&::-webkit-scrollbar-thumb:hover": {
282
- background: "gray.400",
283
- },
284
- /* === Prevent scrollbar expansion in Chrome === */
285
- "&": {
286
- scrollbarGutter: "stable both-edges",
287
- },
288
- cursor: canDrag ? "grab" : "not-allowed",
289
- } },
290
- (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
291
- virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
292
- if (el)
293
- listRefs.current[colId] = el;
294
- }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) {
295
- return getItemSize(index, column.items, colId);
296
- }, width: "100%", itemData: {
297
- items: column.items,
298
- colId: colId,
299
- placeholder: provided.placeholder,
300
- } }, Row)) : (react_1.default.createElement(react_2.Box, null,
301
- column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
302
- react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
303
- react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
304
- return toggleExpand(account.id, colId, index);
305
- }, isDeletable: canDelete }))); }))); }),
306
- provided.placeholder)))));
307
- }));
308
- }))))));
230
+ scrollbarColor: "".concat((_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[400], " ").concat((_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[100]),
231
+ } },
232
+ isLoading
233
+ ? Array.from({ length: 5 }).map(function (_, idx) {
234
+ var _a, _b;
235
+ return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
236
+ react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
237
+ react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
238
+ })
239
+ : Object.entries(columns).map(function (_a) {
240
+ var colId = _a[0], column = _a[1];
241
+ return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
242
+ var item = column.items[rubric.source.index];
243
+ return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
244
+ react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
245
+ return toggleExpand(item.id, colId, rubric.source.index);
246
+ } })));
247
+ } }, function (provided, snapshot) {
248
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
249
+ return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
250
+ ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
251
+ : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
252
+ ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
253
+ : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
254
+ react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
255
+ react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700], noOfLines: 1, w: "100%" },
256
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
257
+ react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, px: "8px", mr: { base: "6px", md: "10px" }, borderRadius: "999px", border: "1px solid gray", display: "flex", alignItems: "center", justifyContent: "center", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_k = column === null || column === void 0 ? void 0 : column.items) === null || _k === void 0 ? void 0 : _k.length),
258
+ canDelete &&
259
+ hoveredColumn === colId &&
260
+ column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[600], _hover: { color: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
261
+ !(canDelete &&
262
+ hoveredColumn === colId &&
263
+ column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" })),
264
+ react_1.default.createElement(react_2.Box, { px: 2,
265
+ // pb={2}
266
+ flex: "1", overflowY: "auto", width: "100%",
267
+ // mr={1} // Add right margin to create gap for scrollbar
268
+ /////LIST/////////////////////////////
269
+ sx: {
270
+ overflowY: "auto",
271
+ overflowX: "hidden", // optional — hides horizontal scrollbar
272
+ /* === Firefox === */
273
+ scrollbarWidth: "thin",
274
+ scrollbarColor: "var(--chakra-colors-gray-300) transparent",
275
+ /* === Chrome, Edge, Safari === */
276
+ "&::-webkit-scrollbar": {
277
+ width: "6px !important", // force small vertical scrollbar
278
+ height: "6px !important", // for horizontal scrollbar if any
279
+ },
280
+ "&::-webkit-scrollbar-track": {
281
+ background: "gray.100",
282
+ borderRadius: "3px",
283
+ marginTop: "4px",
284
+ marginBottom: "4px",
285
+ },
286
+ "&::-webkit-scrollbar-thumb": {
287
+ background: "gray.300",
288
+ borderRadius: "3px",
289
+ border: "1px solid",
290
+ borderColor: "gray.100",
291
+ },
292
+ "&::-webkit-scrollbar-thumb:hover": {
293
+ background: "gray.400",
294
+ },
295
+ /* === Prevent scrollbar expansion in Chrome === */
296
+ "&": {
297
+ scrollbarGutter: "stable both-edges",
298
+ },
299
+ cursor: canDrag ? "grab" : "not-allowed",
300
+ } },
301
+ (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
302
+ virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
303
+ if (el)
304
+ listRefs.current[colId] = el;
305
+ }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) {
306
+ return getItemSize(index, column.items, colId);
307
+ }, width: "100%", itemData: {
308
+ items: column.items,
309
+ colId: colId,
310
+ placeholder: provided.placeholder,
311
+ } }, Row)) : (react_1.default.createElement(react_2.Box, null,
312
+ column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
313
+ react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
314
+ react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
315
+ return toggleExpand(account.id, colId, index);
316
+ }, isDeletable: canDelete }))); }))); }),
317
+ provided.placeholder)))));
318
+ }));
319
+ }),
320
+ !isLoading && showAddColumn && hasAnyColumns && (react_1.default.createElement(react_2.Box, { width: columnWidth, borderRadius: "0.5rem", border: "0.125rem dashed ".concat((_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[300]), bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], flexShrink: 0, height: "".concat(containerHeight - 60, "px"), display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
321
+ react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
322
+ react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[700] }),
323
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_t = colors === null || colors === void 0 ? void 0 : colors.text) === null || _t === void 0 ? void 0 : _t[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column")))))))));
309
324
  };
310
325
  exports.default = KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -11,6 +11,12 @@ export type ColumnType = {
11
11
  };
12
12
  export type KanbanBoardProps = {
13
13
  data: Record<string, ColumnType>;
14
+ customColumns?: Record<string, ColumnType>;
15
+ customizeColumn?: {
16
+ isVisible?: boolean;
17
+ buttonText?: string;
18
+ onAddColumn?: () => void;
19
+ };
14
20
  onDelete?: (account: Account) => void;
15
21
  onOpen?: (account: Account) => void;
16
22
  onColumnDelete?: (colId: (string | number)[]) => void;
@@ -50,5 +56,6 @@ export type KanbanBoardProps = {
50
56
  text?: string;
51
57
  buttonText?: string;
52
58
  onClick?: (column: ColumnType) => void;
59
+ isEmptyTextOnly?: boolean;
53
60
  };
54
61
  };
package/dist/Components/SideBar/SideBar.js CHANGED
@@ -67,14 +67,16 @@ var SidebarHeader = function (_a) {
67
67
  react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
68
68
  }
69
69
  if (logo) {
70
- return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
70
+ return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
71
71
  react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
72
- !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))));
72
+ !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
73
+ react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2, isTruncated: true, width: "100%" }, companyName)))));
73
74
  }
74
- return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
75
+ return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
75
76
  react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
76
77
  react_1.default.createElement(defaultLogo_1.default, null)),
77
- !toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : ""))));
78
+ !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
79
+ react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "left", color: theme.colors.white, lineHeight: 2, as: "p", width: "100%" }, companyName !== null && companyName !== void 0 ? companyName : "")))));
78
80
  };
79
81
  var SkeletonMenuRow = function (_a) {
80
82
  var toggle = _a.toggle;
package/dist/Components/Table/Components/TableActions.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import React from "react";
1
+ import React, { ReactNode } from "react";
2
2
  type TableRowActions = {
3
3
  onLink?: (row: any) => void;
4
4
  onEdit?: (row: any) => void;
5
5
  onDelete?: (row: any) => void;
6
+ actions?: () => ReactNode;
6
7
  [key: string]: any;
7
8
  };
8
9
  declare const TableActions: ({ row }: {
package/dist/Components/Table/Components/TableActions.js CHANGED
@@ -38,9 +38,9 @@ var react_2 = require("@chakra-ui/react");
38
38
  var lucide_react_1 = require("lucide-react");
39
39
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
40
40
  var TableActions = function (_a) {
41
- var _b, _c;
41
+ var _b, _c, _d;
42
42
  var row = _a.row;
43
- var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
43
+ var _e = (0, react_1.useState)(false), isOpen = _e[0], setIsOpen = _e[1];
44
44
  var ref = (0, react_1.useRef)(null);
45
45
  var theme = (0, useCustomTheme_1.useCustomTheme)();
46
46
  // Listen for "close-all-popovers"
@@ -101,6 +101,7 @@ var TableActions = function (_a) {
101
101
  } },
102
102
  react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
103
103
  " Delete")),
104
+ row.actions && ((_d = row === null || row === void 0 ? void 0 : row.actions) === null || _d === void 0 ? void 0 : _d.call(row)),
104
105
  !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
105
106
  };
106
107
  exports.default = TableActions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.141",
3
+ "version": "2.2.143",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",