pixelize-design-library 2.2.174 → 2.2.177
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/AccountCard.js +2 -2
- package/dist/Components/KanbanBoard/AccountRow.js +4 -4
- package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
- package/dist/Components/KanbanBoard/KanbanBoard.js +99 -19
- package/dist/Components/KanbanBoard/KanbanBoard.test.js +19 -1
- package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +27 -2
- package/package.json +1 -1
|
@@ -18,10 +18,10 @@ var AccountCard = function (_a) {
|
|
|
18
18
|
var handleToggle = function () {
|
|
19
19
|
onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
|
|
20
20
|
};
|
|
21
|
-
return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[200], border: "0.1rem solid ".concat((_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]), p: 2, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "
|
|
21
|
+
return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[200], border: "0.1rem solid ".concat((_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]), p: 2, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease", _hover: {
|
|
22
22
|
borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[200],
|
|
23
23
|
} },
|
|
24
|
-
react_1.default.createElement(react_2.VStack, { align: "start", spacing:
|
|
24
|
+
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0.5, fontSize: "0.875rem", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[700] },
|
|
25
25
|
visibleKeys.map(function (key) { return (react_1.default.createElement(AccountRow_1.default, { key: key, label: key.replace(/\b\w/g, function (c) { return c.toUpperCase(); }), value: account[key] })); }),
|
|
26
26
|
react_1.default.createElement(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true },
|
|
27
27
|
react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),
|
|
@@ -11,11 +11,11 @@ var AccountRow = function (_a) {
|
|
|
11
11
|
var _b, _c;
|
|
12
12
|
var label = _a.label, value = _a.value;
|
|
13
13
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
14
|
-
return (react_1.default.createElement(react_2.Flex, { w: "full" },
|
|
14
|
+
return (react_1.default.createElement(react_2.Flex, { w: "full", gap: 1 },
|
|
15
15
|
react_1.default.createElement(react_2.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true },
|
|
16
|
-
react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "
|
|
17
|
-
react_1.default.createElement(react_2.Text, { w: "0.
|
|
16
|
+
react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "30%", noOfLines: 1, fontSize: "0.75rem" }, (0, functions_1.toWords)(label))),
|
|
17
|
+
react_1.default.createElement(react_2.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem" }, ":"),
|
|
18
18
|
react_1.default.createElement(react_2.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true },
|
|
19
|
-
react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[800], w: "calc(55% - 0.625rem)", noOfLines: 1 }, value))));
|
|
19
|
+
react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem" }, value))));
|
|
20
20
|
};
|
|
21
21
|
exports.default = AccountRow;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { KanbanBoardProps } from "./KanbanBoardProps";
|
|
3
|
-
declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, enableColumnReorder, onColumnReorder, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
3
|
+
declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -62,6 +62,7 @@ var dnd_1 = require("@hello-pangea/dnd");
|
|
|
62
62
|
var lucide_react_1 = require("lucide-react");
|
|
63
63
|
var react_window_1 = require("react-window");
|
|
64
64
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
65
|
+
var usePreferences_1 = require("../../Hooks/usePreferences");
|
|
65
66
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
66
67
|
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
67
68
|
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
@@ -77,16 +78,48 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
|
|
|
77
78
|
}
|
|
78
79
|
var KanbanBoard = function (_a) {
|
|
79
80
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
80
|
-
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, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder
|
|
81
|
+
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, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, onColumnCollapseChange = _a.onColumnCollapseChange, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder, _x = _a.preferences, preferences = _x === void 0 ? {
|
|
82
|
+
baseurl: "",
|
|
83
|
+
token: "",
|
|
84
|
+
key: "",
|
|
85
|
+
name: "",
|
|
86
|
+
page: "",
|
|
87
|
+
orgId: "",
|
|
88
|
+
} : _x;
|
|
81
89
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
82
90
|
var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
|
|
83
91
|
var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
|
|
84
92
|
var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
|
|
85
93
|
var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
|
|
86
94
|
var mergedColumns = (0, react_1.useMemo)(function () { return (__assign(__assign({}, data), (customColumns !== null && customColumns !== void 0 ? customColumns : {}))); }, [data, customColumns]);
|
|
87
|
-
var
|
|
88
|
-
|
|
89
|
-
|
|
95
|
+
var _y = (0, usePreferences_1.useGetPreferences)({
|
|
96
|
+
baseUrl: preferences.baseurl,
|
|
97
|
+
page: preferences.page,
|
|
98
|
+
key: preferences.key,
|
|
99
|
+
name: preferences.name,
|
|
100
|
+
authToken: preferences.token,
|
|
101
|
+
orgId: preferences.orgId,
|
|
102
|
+
}), kanbanPreferencesData = _y.preferences, preferencesLoading = _y.loading;
|
|
103
|
+
var savePreferences = (0, usePreferences_1.useSavePreferences)({
|
|
104
|
+
baseUrl: preferences.baseurl,
|
|
105
|
+
page: preferences.page,
|
|
106
|
+
key: preferences.key,
|
|
107
|
+
name: preferences.name,
|
|
108
|
+
authToken: preferences.token,
|
|
109
|
+
orgId: preferences.orgId,
|
|
110
|
+
}).savePreferences;
|
|
111
|
+
var kanbanPreferencesJson = (0, react_1.useMemo)(function () {
|
|
112
|
+
if (kanbanPreferencesData === null || kanbanPreferencesData === void 0 ? void 0 : kanbanPreferencesData.length) {
|
|
113
|
+
return kanbanPreferencesData[0].json;
|
|
114
|
+
}
|
|
115
|
+
return {};
|
|
116
|
+
}, [kanbanPreferencesData]);
|
|
117
|
+
var kanbanPreferencesJsonRef = (0, react_1.useRef)(kanbanPreferencesJson);
|
|
118
|
+
kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
|
|
119
|
+
var isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
|
|
120
|
+
var _z = (0, react_1.useState)(mergedColumns), columns = _z[0], setColumns = _z[1];
|
|
121
|
+
var _0 = (0, react_1.useState)(600), containerHeight = _0[0], setContainerHeight = _0[1];
|
|
122
|
+
var _1 = (0, react_1.useState)(null), hoveredColumn = _1[0], setHoveredColumn = _1[1];
|
|
90
123
|
(0, react_1.useEffect)(function () {
|
|
91
124
|
setColumns(mergedColumns);
|
|
92
125
|
}, [mergedColumns]);
|
|
@@ -97,22 +130,67 @@ var KanbanBoard = function (_a) {
|
|
|
97
130
|
lg: "19rem",
|
|
98
131
|
});
|
|
99
132
|
// track expanded cards
|
|
100
|
-
var
|
|
133
|
+
var _2 = (0, react_1.useState)({}), expanded = _2[0], setExpanded = _2[1];
|
|
101
134
|
/** When true, column id maps to collapsed (body hidden). */
|
|
102
|
-
var
|
|
135
|
+
var _3 = (0, react_1.useState)(function () { return (__assign({}, defaultCollapsedColumns)); }), collapsedColumns = _3[0], setCollapsedColumns = _3[1];
|
|
136
|
+
(0, react_1.useEffect)(function () {
|
|
137
|
+
if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
if (!("collapsedColumns" in kanbanPreferencesJson)) {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
var saved = kanbanPreferencesJson.collapsedColumns;
|
|
144
|
+
if (saved === null ||
|
|
145
|
+
typeof saved !== "object" ||
|
|
146
|
+
Array.isArray(saved)) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
var validIds = new Set(Object.keys(mergedColumns));
|
|
150
|
+
var next = {};
|
|
151
|
+
for (var _i = 0, _a = Object.entries(saved); _i < _a.length; _i++) {
|
|
152
|
+
var _b = _a[_i], k = _b[0], v = _b[1];
|
|
153
|
+
if (validIds.has(k) && typeof v === "boolean") {
|
|
154
|
+
next[k] = v;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
setCollapsedColumns(__assign(__assign({}, defaultCollapsedColumns), next));
|
|
158
|
+
}, [
|
|
159
|
+
enableColumnCollapse,
|
|
160
|
+
preferences.baseurl,
|
|
161
|
+
preferencesLoading,
|
|
162
|
+
kanbanPreferencesJson,
|
|
163
|
+
mergedColumns,
|
|
164
|
+
defaultCollapsedColumns,
|
|
165
|
+
]);
|
|
103
166
|
var toggleColumnCollapsed = (0, react_1.useCallback)(function (colId) {
|
|
104
167
|
setCollapsedColumns(function (prev) {
|
|
105
168
|
var _a;
|
|
106
|
-
|
|
169
|
+
var collapsed = !prev[colId];
|
|
170
|
+
var next = __assign(__assign({}, prev), (_a = {}, _a[colId] = collapsed, _a));
|
|
171
|
+
onColumnCollapseChange === null || onColumnCollapseChange === void 0 ? void 0 : onColumnCollapseChange({
|
|
172
|
+
colId: colId,
|
|
173
|
+
collapsed: collapsed,
|
|
174
|
+
collapsedColumns: next,
|
|
175
|
+
});
|
|
176
|
+
if (preferences.baseurl && enableColumnCollapse) {
|
|
177
|
+
savePreferences(__assign(__assign({}, kanbanPreferencesJsonRef.current), { collapsedColumns: next }));
|
|
178
|
+
}
|
|
179
|
+
return next;
|
|
107
180
|
});
|
|
108
|
-
}, [
|
|
181
|
+
}, [
|
|
182
|
+
onColumnCollapseChange,
|
|
183
|
+
preferences.baseurl,
|
|
184
|
+
enableColumnCollapse,
|
|
185
|
+
savePreferences,
|
|
186
|
+
]);
|
|
109
187
|
/** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
|
|
110
188
|
var COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
|
|
111
189
|
// ref for lists
|
|
112
190
|
var listRefs = (0, react_1.useRef)({});
|
|
113
191
|
var containerRef = (0, react_1.useRef)(null);
|
|
114
192
|
// store measured heights
|
|
115
|
-
var
|
|
193
|
+
var _4 = (0, react_1.useState)({}), sizes = _4[0], setSizes = _4[1];
|
|
116
194
|
// update height for an item
|
|
117
195
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
118
196
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -143,7 +221,7 @@ var KanbanBoard = function (_a) {
|
|
|
143
221
|
return function () {
|
|
144
222
|
window.removeEventListener("resize", calculateDimensions);
|
|
145
223
|
};
|
|
146
|
-
}, [
|
|
224
|
+
}, [isBoardLoading]);
|
|
147
225
|
// toggle expand/collapse
|
|
148
226
|
var toggleExpand = function (id, colId, index) {
|
|
149
227
|
setExpanded(function (prev) {
|
|
@@ -246,7 +324,7 @@ var KanbanBoard = function (_a) {
|
|
|
246
324
|
return toggleExpand(item.id, colId, rubric.source.index);
|
|
247
325
|
}, isDeletable: canDelete }))));
|
|
248
326
|
} }, function (provided, snapshot) {
|
|
249
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
|
|
327
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
|
|
250
328
|
return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
|
|
251
329
|
? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
|
|
252
330
|
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
@@ -266,16 +344,18 @@ var KanbanBoard = function (_a) {
|
|
|
266
344
|
column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], "aria-hidden": true })) : null,
|
|
267
345
|
column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: (_r = colors === null || colors === void 0 ? void 0 : colors.background) === null || _r === void 0 ? void 0 : _r[100], position: "relative", zIndex: 2 },
|
|
268
346
|
react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
|
|
269
|
-
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_t = column.color) !== null && _t !== void 0 ? _t : (_u = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _u === void 0 ? void 0 : _u[500], background: (_v = colors === null || colors === void 0 ? void 0 : colors.background) === null || _v === void 0 ? void 0 : _v[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
|
|
347
|
+
react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: !isColCollapsed && column.customNode ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_t = column.color) !== null && _t !== void 0 ? _t : (_u = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _u === void 0 ? void 0 : _u[500], background: (_v = colors === null || colors === void 0 ? void 0 : colors.background) === null || _v === void 0 ? void 0 : _v[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
|
|
270
348
|
enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
|
|
271
349
|
react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_w = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _w === void 0 ? void 0 : _w[400] }))) : null,
|
|
272
|
-
react_1.default.createElement(react_2.
|
|
273
|
-
react_1.default.createElement(
|
|
274
|
-
|
|
350
|
+
react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && column.customNode ? "1" : "0" },
|
|
351
|
+
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[700], noOfLines: 1, flex: "1", minW: 0 },
|
|
352
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
|
|
353
|
+
!isColCollapsed && column.customNode ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_y = colors === null || colors === void 0 ? void 0 : colors.text) === null || _y === void 0 ? void 0 : _y[600] }, column.customNode())) : null),
|
|
354
|
+
react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_z = colors === null || colors === void 0 ? void 0 : colors.background) === null || _z === void 0 ? void 0 : _z[100], borderColor: (_0 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _0 === void 0 ? void 0 : _0[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_2 = column === null || column === void 0 ? void 0 : column.items) === null || _2 === void 0 ? void 0 : _2.length),
|
|
275
355
|
enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
|
|
276
356
|
canDelete &&
|
|
277
357
|
hoveredColumn === colId &&
|
|
278
|
-
column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (
|
|
358
|
+
column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_3 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _3 === void 0 ? void 0 : _3[600], _hover: { color: (_4 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _4 === void 0 ? void 0 : _4[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
|
|
279
359
|
!(canDelete &&
|
|
280
360
|
hoveredColumn === colId &&
|
|
281
361
|
column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 }))),
|
|
@@ -353,7 +433,7 @@ var KanbanBoard = function (_a) {
|
|
|
353
433
|
scrollbarWidth: "thin",
|
|
354
434
|
scrollbarColor: "".concat((_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[400], " ").concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100]),
|
|
355
435
|
};
|
|
356
|
-
var addColumnBox = !
|
|
436
|
+
var addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (react_1.default.createElement(react_2.Box, { width: columnWidth, borderRadius: "0.5rem", border: "0.125rem dashed ".concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[300]), bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], flexShrink: 0, height: "".concat(containerHeight - 60, "px"), display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[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); } },
|
|
357
437
|
react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
|
|
358
438
|
react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[700] }),
|
|
359
439
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column"))));
|
|
@@ -378,11 +458,11 @@ var KanbanBoard = function (_a) {
|
|
|
378
458
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
|
|
379
459
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
380
460
|
react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
|
|
381
|
-
showAddColumn && !
|
|
461
|
+
showAddColumn && !isBoardLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
|
|
382
462
|
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.5rem", bg: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], border: "0.125rem dashed ".concat((_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[300]), _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); } },
|
|
383
463
|
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] }),
|
|
384
464
|
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")))),
|
|
385
|
-
|
|
465
|
+
isBoardLoading ? (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }, loadingSkeletonRow)) : enableColumnReorder ? (react_1.default.createElement(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN" }, function (colReorderProvided) { return (react_1.default.createElement(react_2.Flex, __assign({ ref: colReorderProvided.innerRef }, colReorderProvided.droppableProps, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }),
|
|
386
466
|
columnsList,
|
|
387
467
|
colReorderProvided.placeholder,
|
|
388
468
|
addColumnBox)); })) : (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx },
|
|
@@ -153,7 +153,7 @@ describe("KanbanBoard – permissions", function () {
|
|
|
153
153
|
col1: __assign(__assign({}, sampleData.col1), { customNode: function () { return react_1.default.createElement("span", null, "Column summary line"); } }),
|
|
154
154
|
};
|
|
155
155
|
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: dataWithCustom, enableColumnCollapse: true }));
|
|
156
|
-
expect(react_2.screen.
|
|
156
|
+
expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
|
|
157
157
|
react_2.fireEvent.click(react_2.screen.getByLabelText("Collapse column"));
|
|
158
158
|
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
159
159
|
expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
|
|
@@ -163,5 +163,23 @@ describe("KanbanBoard – permissions", function () {
|
|
|
163
163
|
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
164
164
|
expect(react_2.screen.getByLabelText("Expand column")).toBeInTheDocument();
|
|
165
165
|
});
|
|
166
|
+
it("calls onColumnCollapseChange when collapsing and expanding", function () {
|
|
167
|
+
var onColumnCollapseChange = jest.fn();
|
|
168
|
+
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true, onColumnCollapseChange: onColumnCollapseChange }));
|
|
169
|
+
react_2.fireEvent.click(react_2.screen.getAllByLabelText("Collapse column")[0]);
|
|
170
|
+
expect(onColumnCollapseChange).toHaveBeenCalledTimes(1);
|
|
171
|
+
expect(onColumnCollapseChange).toHaveBeenLastCalledWith({
|
|
172
|
+
colId: "col1",
|
|
173
|
+
collapsed: true,
|
|
174
|
+
collapsedColumns: { col1: true },
|
|
175
|
+
});
|
|
176
|
+
react_2.fireEvent.click(react_2.screen.getByLabelText("Expand column"));
|
|
177
|
+
expect(onColumnCollapseChange).toHaveBeenCalledTimes(2);
|
|
178
|
+
expect(onColumnCollapseChange).toHaveBeenLastCalledWith({
|
|
179
|
+
colId: "col1",
|
|
180
|
+
collapsed: false,
|
|
181
|
+
collapsedColumns: { col1: false },
|
|
182
|
+
});
|
|
183
|
+
});
|
|
166
184
|
});
|
|
167
185
|
});
|
|
@@ -15,9 +15,19 @@ export type ColumnType = {
|
|
|
15
15
|
title: string;
|
|
16
16
|
color: string;
|
|
17
17
|
items: Account[];
|
|
18
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* Column-level slot (e.g. totals). Shown below the title when expanded, and in the collapsed narrow rail (rotated).
|
|
20
|
+
*/
|
|
19
21
|
customNode?: () => ReactNode;
|
|
20
22
|
};
|
|
23
|
+
/** Fired after a column rail is collapsed or expanded via the board UI. */
|
|
24
|
+
export type ColumnCollapseChangePayload = {
|
|
25
|
+
colId: string;
|
|
26
|
+
/** True when the column is in the narrow collapsed rail. */
|
|
27
|
+
collapsed: boolean;
|
|
28
|
+
/** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
|
|
29
|
+
collapsedColumns: Record<string, boolean>;
|
|
30
|
+
};
|
|
21
31
|
export type KanbanBoardProps = {
|
|
22
32
|
data: Record<string, ColumnType>;
|
|
23
33
|
customColumns?: Record<string, ColumnType>;
|
|
@@ -74,11 +84,26 @@ export type KanbanBoardProps = {
|
|
|
74
84
|
enableColumnCollapse?: boolean;
|
|
75
85
|
/**
|
|
76
86
|
* Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
|
|
77
|
-
*
|
|
87
|
+
* Merged on mount; when `preferences.url` is set, server `json.collapsedColumns` overrides these keys after load.
|
|
78
88
|
*/
|
|
79
89
|
collapsedColumns?: Record<string, boolean>;
|
|
90
|
+
/** Called when the user collapses or expands a column (after internal state updates). */
|
|
91
|
+
onColumnCollapseChange?: (payload: ColumnCollapseChangePayload) => void;
|
|
80
92
|
/** When true, columns can be reordered via the header grip handle. */
|
|
81
93
|
enableColumnReorder?: boolean;
|
|
82
94
|
/** Called after column order changes (same shape as `data` keys order). */
|
|
83
95
|
onColumnReorder?: (columns: Record<string, ColumnType>) => void;
|
|
96
|
+
/**
|
|
97
|
+
* Optional user-preferences API (same shape as `Table` `preferences`).
|
|
98
|
+
* When `url` is set, column collapse state is loaded from and saved to `json.collapsedColumns`
|
|
99
|
+
* (record of column id → collapsed).
|
|
100
|
+
*/
|
|
101
|
+
preferences?: {
|
|
102
|
+
baseurl: string;
|
|
103
|
+
token: string;
|
|
104
|
+
key?: string;
|
|
105
|
+
name?: string;
|
|
106
|
+
page?: string;
|
|
107
|
+
orgId?: string;
|
|
108
|
+
};
|
|
84
109
|
};
|