pixelize-design-library 2.2.142 → 2.2.144
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.
- package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
- package/dist/Components/KanbanBoard/KanbanBoard.js +122 -103
- package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +15 -1
- package/dist/Components/Table/Components/TableFilters.js +4 -2
- package/dist/Constants/Sidebar.js +1 -1
- package/dist/Theme/Default/palette.js +5 -5
- package/dist/Theme/Meadow/palette.d.ts +97 -95
- package/dist/Theme/Meadow/palette.js +97 -332
- package/dist/Theme/Radiant/palette.d.ts +95 -93
- package/dist/Theme/Radiant/palette.js +97 -332
- package/dist/Theme/Skyline/palette.d.ts +97 -95
- package/dist/Theme/Skyline/palette.js +97 -332
- package/dist/Theme/buildBrandTokens.d.ts +15 -0
- package/dist/Theme/buildBrandTokens.js +33 -0
- package/dist/Theme/buildBrandTokens.test.d.ts +1 -0
- package/dist/Theme/buildBrandTokens.test.js +31 -0
- package/dist/Theme/themeProps.d.ts +2 -0
- package/dist/global.css +31 -17
- package/package.json +1 -1
|
@@ -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;
|
|
@@ -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,
|
|
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
|
|
79
|
-
var
|
|
80
|
-
var
|
|
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
|
|
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
|
|
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);
|
|
@@ -176,10 +180,12 @@ var KanbanBoard = function (_a) {
|
|
|
176
180
|
return (react_1.default.createElement("div", { style: style },
|
|
177
181
|
react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
|
|
178
182
|
react_1.default.createElement("div", { style: { marginBottom: 12 } },
|
|
179
|
-
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
|
|
180
|
-
|
|
183
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
|
|
184
|
+
var _a;
|
|
185
|
+
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 () {
|
|
181
186
|
return toggleExpand(account.id, colId, index);
|
|
182
|
-
}, isDeletable: canDelete })));
|
|
187
|
+
}, isDeletable: canDelete }))));
|
|
188
|
+
}))),
|
|
183
189
|
index === items.length - 1 && placeholder));
|
|
184
190
|
};
|
|
185
191
|
var NoItemsTemplate = function (_a) {
|
|
@@ -188,14 +194,20 @@ var KanbanBoard = function (_a) {
|
|
|
188
194
|
return (react_1.default.createElement(react_2.Box, null,
|
|
189
195
|
react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
|
|
190
196
|
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"))));
|
|
197
|
+
!(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
198
|
};
|
|
193
199
|
if (!canView)
|
|
194
200
|
return null;
|
|
201
|
+
var showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
|
|
202
|
+
var hasAnyColumns = Object.keys(columns).length > 0;
|
|
195
203
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
196
204
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
|
|
197
205
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
198
206
|
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 },
|
|
207
|
+
showAddColumn && !isLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
|
|
208
|
+
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); } },
|
|
209
|
+
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] }),
|
|
210
|
+
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
211
|
react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
|
|
200
212
|
///////////////////////////////////////////////////////////////////////////////
|
|
201
213
|
sx: {
|
|
@@ -203,108 +215,115 @@ var KanbanBoard = function (_a) {
|
|
|
203
215
|
height: "6px", // Consistent size - 6px
|
|
204
216
|
},
|
|
205
217
|
"&::-webkit-scrollbar-track": {
|
|
206
|
-
background: (
|
|
218
|
+
background: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100],
|
|
207
219
|
borderRadius: "3px",
|
|
208
220
|
margin: "0 4px", // Add gap on sides
|
|
209
221
|
},
|
|
210
222
|
"&::-webkit-scrollbar-thumb": {
|
|
211
|
-
background: (
|
|
223
|
+
background: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[400],
|
|
212
224
|
borderRadius: "3px",
|
|
213
|
-
border: "1px solid ".concat((
|
|
225
|
+
border: "1px solid ".concat((_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[100]),
|
|
214
226
|
},
|
|
215
227
|
"&::-webkit-scrollbar-thumb:hover": {
|
|
216
|
-
background: (
|
|
228
|
+
background: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500],
|
|
217
229
|
},
|
|
218
230
|
// For Firefox
|
|
219
231
|
scrollbarWidth: "thin",
|
|
220
|
-
scrollbarColor: "".concat((
|
|
221
|
-
} },
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
react_1.default.createElement(react_2.
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
232
|
+
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]),
|
|
233
|
+
} },
|
|
234
|
+
isLoading
|
|
235
|
+
? Array.from({ length: 5 }).map(function (_, idx) {
|
|
236
|
+
var _a, _b;
|
|
237
|
+
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 },
|
|
238
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
239
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
240
|
+
})
|
|
241
|
+
: Object.entries(columns).map(function (_a) {
|
|
242
|
+
var colId = _a[0], column = _a[1];
|
|
243
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
244
|
+
var _a;
|
|
245
|
+
var item = column.items[rubric.source.index];
|
|
246
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }), (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : (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
247
|
return toggleExpand(item.id, colId, rubric.source.index);
|
|
235
|
-
} })));
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
248
|
+
} }))));
|
|
249
|
+
} }, function (provided, snapshot) {
|
|
250
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
251
|
+
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
|
|
252
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
253
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
254
|
+
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
255
|
+
: "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); } }),
|
|
256
|
+
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" },
|
|
257
|
+
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%" },
|
|
258
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
|
|
259
|
+
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),
|
|
260
|
+
canDelete &&
|
|
261
|
+
hoveredColumn === colId &&
|
|
262
|
+
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" })),
|
|
263
|
+
!(canDelete &&
|
|
264
|
+
hoveredColumn === colId &&
|
|
265
|
+
column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" })),
|
|
266
|
+
react_1.default.createElement(react_2.Box, { px: 2,
|
|
267
|
+
// pb={2}
|
|
268
|
+
flex: "1", overflowY: "auto", width: "100%",
|
|
269
|
+
// mr={1} // Add right margin to create gap for scrollbar
|
|
270
|
+
/////LIST/////////////////////////////
|
|
271
|
+
sx: {
|
|
272
|
+
overflowY: "auto",
|
|
273
|
+
overflowX: "hidden", // optional — hides horizontal scrollbar
|
|
274
|
+
/* === Firefox === */
|
|
275
|
+
scrollbarWidth: "thin",
|
|
276
|
+
scrollbarColor: "var(--chakra-colors-gray-300) transparent",
|
|
277
|
+
/* === Chrome, Edge, Safari === */
|
|
278
|
+
"&::-webkit-scrollbar": {
|
|
279
|
+
width: "6px !important", // force small vertical scrollbar
|
|
280
|
+
height: "6px !important", // for horizontal scrollbar if any
|
|
281
|
+
},
|
|
282
|
+
"&::-webkit-scrollbar-track": {
|
|
283
|
+
background: "gray.100",
|
|
284
|
+
borderRadius: "3px",
|
|
285
|
+
marginTop: "4px",
|
|
286
|
+
marginBottom: "4px",
|
|
287
|
+
},
|
|
288
|
+
"&::-webkit-scrollbar-thumb": {
|
|
289
|
+
background: "gray.300",
|
|
290
|
+
borderRadius: "3px",
|
|
291
|
+
border: "1px solid",
|
|
292
|
+
borderColor: "gray.100",
|
|
293
|
+
},
|
|
294
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
295
|
+
background: "gray.400",
|
|
296
|
+
},
|
|
297
|
+
/* === Prevent scrollbar expansion in Chrome === */
|
|
298
|
+
"&": {
|
|
299
|
+
scrollbarGutter: "stable both-edges",
|
|
300
|
+
},
|
|
301
|
+
cursor: canDrag ? "grab" : "not-allowed",
|
|
302
|
+
} },
|
|
303
|
+
(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
|
|
304
|
+
virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
305
|
+
if (el)
|
|
306
|
+
listRefs.current[colId] = el;
|
|
307
|
+
}, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) {
|
|
308
|
+
return getItemSize(index, column.items, colId);
|
|
309
|
+
}, width: "100%", itemData: {
|
|
310
|
+
items: column.items,
|
|
311
|
+
colId: colId,
|
|
312
|
+
placeholder: provided.placeholder,
|
|
313
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, null,
|
|
314
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
315
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
|
|
316
|
+
var _a;
|
|
317
|
+
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, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
318
|
+
return toggleExpand(account.id, colId, index);
|
|
319
|
+
}, isDeletable: canDelete }))));
|
|
320
|
+
}))); }),
|
|
321
|
+
provided.placeholder)))));
|
|
322
|
+
}));
|
|
323
|
+
}),
|
|
324
|
+
!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); } },
|
|
325
|
+
react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
|
|
326
|
+
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] }),
|
|
327
|
+
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
328
|
};
|
|
310
329
|
exports.default = KanbanBoard;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
1
2
|
import { OptionProp } from "../Select/SelectProps";
|
|
3
|
+
/** Index allows extra scalar fields; known string fields are explicit so they do not widen to `() => ReactNode`. */
|
|
2
4
|
export type Account = {
|
|
3
5
|
id: string;
|
|
4
|
-
|
|
6
|
+
customNode?: () => ReactNode;
|
|
7
|
+
details?: string;
|
|
8
|
+
name?: string;
|
|
9
|
+
email?: string;
|
|
10
|
+
rating?: string;
|
|
11
|
+
[key: string]: string | number | null | undefined | (() => ReactNode);
|
|
5
12
|
};
|
|
6
13
|
export type ColumnType = {
|
|
7
14
|
id: string;
|
|
@@ -11,6 +18,12 @@ export type ColumnType = {
|
|
|
11
18
|
};
|
|
12
19
|
export type KanbanBoardProps = {
|
|
13
20
|
data: Record<string, ColumnType>;
|
|
21
|
+
customColumns?: Record<string, ColumnType>;
|
|
22
|
+
customizeColumn?: {
|
|
23
|
+
isVisible?: boolean;
|
|
24
|
+
buttonText?: string;
|
|
25
|
+
onAddColumn?: () => void;
|
|
26
|
+
};
|
|
14
27
|
onDelete?: (account: Account) => void;
|
|
15
28
|
onOpen?: (account: Account) => void;
|
|
16
29
|
onColumnDelete?: (colId: (string | number)[]) => void;
|
|
@@ -50,5 +63,6 @@ export type KanbanBoardProps = {
|
|
|
50
63
|
text?: string;
|
|
51
64
|
buttonText?: string;
|
|
52
65
|
onClick?: (column: ColumnType) => void;
|
|
66
|
+
isEmptyTextOnly?: boolean;
|
|
53
67
|
};
|
|
54
68
|
};
|
|
@@ -38,9 +38,11 @@ var react_2 = require("@chakra-ui/react");
|
|
|
38
38
|
var table_1 = require("../../../Utils/table");
|
|
39
39
|
var lucide_react_1 = require("lucide-react");
|
|
40
40
|
var TableFilters = (0, react_1.memo)(function (_a) {
|
|
41
|
+
var _b, _c;
|
|
41
42
|
var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose, isOpen = _a.isOpen, onOpen = _a.onOpen;
|
|
43
|
+
var theme = (0, react_2.useTheme)();
|
|
42
44
|
var searchRef = (0, react_1.useRef)(null);
|
|
43
|
-
var
|
|
45
|
+
var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
|
|
44
46
|
var debounceRef = (0, table_1.debounce)(function (value) {
|
|
45
47
|
setColumnsSearch(value);
|
|
46
48
|
}, 700);
|
|
@@ -66,7 +68,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
|
|
|
66
68
|
};
|
|
67
69
|
return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen },
|
|
68
70
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
69
|
-
react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
|
|
71
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
|
|
70
72
|
react_1.default.createElement(react_2.Portal, null,
|
|
71
73
|
react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
|
|
72
74
|
react_1.default.createElement(react_2.PopoverBody, { p: 2 },
|
|
@@ -10,7 +10,7 @@ var palette = {
|
|
|
10
10
|
500: "#9A4FE5", // primary shade
|
|
11
11
|
600: "#8c48d0",
|
|
12
12
|
700: "#6d38a3",
|
|
13
|
-
800: "#
|
|
13
|
+
800: "#55277e",
|
|
14
14
|
900: "#412160",
|
|
15
15
|
opacity: {
|
|
16
16
|
4: "#9A4FE50a",
|
|
@@ -98,7 +98,7 @@ var palette = {
|
|
|
98
98
|
200: "#ffccb7",
|
|
99
99
|
300: "#ffb596",
|
|
100
100
|
400: "#ffa781",
|
|
101
|
-
500: "#
|
|
101
|
+
500: "#ff9162", // Main warning color
|
|
102
102
|
600: "#e88459",
|
|
103
103
|
700: "#b56746",
|
|
104
104
|
800: "#8c5036",
|
|
@@ -110,7 +110,7 @@ var palette = {
|
|
|
110
110
|
200: "#b5e4f0",
|
|
111
111
|
300: "#94d7e9",
|
|
112
112
|
400: "#7fd0e5",
|
|
113
|
-
500: "#
|
|
113
|
+
500: "#5fc4de", // Main info color
|
|
114
114
|
600: "#56b2ea",
|
|
115
115
|
700: "#438b9e",
|
|
116
116
|
800: "#346c78",
|
|
@@ -147,7 +147,7 @@ var palette = {
|
|
|
147
147
|
200: "#ffccb7",
|
|
148
148
|
300: "#ffb596",
|
|
149
149
|
400: "#ffa781",
|
|
150
|
-
500: "#
|
|
150
|
+
500: "#ff9162", // Main warning color
|
|
151
151
|
600: "#e88459",
|
|
152
152
|
700: "#b56746",
|
|
153
153
|
800: "#8c5036",
|
|
@@ -183,7 +183,7 @@ var palette = {
|
|
|
183
183
|
200: "#b5e4f0",
|
|
184
184
|
300: "#94d7e9",
|
|
185
185
|
400: "#7fd0e5",
|
|
186
|
-
500: "#
|
|
186
|
+
500: "#5fc4de", // Main info color
|
|
187
187
|
600: "#56b2ea",
|
|
188
188
|
700: "#438b9e",
|
|
189
189
|
800: "#346c78",
|