pixelize-design-library 2.2.164 → 2.2.174
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.d.ts +2 -2
- package/dist/Components/KanbanBoard/AccountCard.js +10 -44
- package/dist/Components/KanbanBoard/AccountCard.test.js +11 -6
- package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.d.ts +3 -3
- package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js +6 -8
- package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.test.d.ts +1 -0
- package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.test.js +49 -0
- package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
- package/dist/Components/KanbanBoard/KanbanBoard.js +175 -127
- package/dist/Components/KanbanBoard/KanbanBoard.test.js +39 -0
- package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +13 -0
- package/dist/Components/Table/Components/useTable.js +1 -1
- package/dist/Components/Table/TableSettings/TableSettings.js +1 -1
- package/dist/Theme/fonts.d.ts +2 -0
- package/dist/Theme/fonts.js +2 -2
- package/package.json +9 -8
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Account, KanbanBoardProps } from "./KanbanBoardProps";
|
|
3
|
-
declare const AccountCard: ({ account,
|
|
3
|
+
declare const AccountCard: ({ account, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
|
|
4
4
|
account: Account;
|
|
5
|
-
index
|
|
5
|
+
index?: number;
|
|
6
6
|
onDelete: KanbanBoardProps["onDelete"];
|
|
7
7
|
onOpen: KanbanBoardProps["onOpen"];
|
|
8
8
|
isExpanded?: boolean;
|
|
@@ -1,66 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
35
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
4
|
};
|
|
38
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
var react_1 =
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
40
7
|
var react_2 = require("@chakra-ui/react");
|
|
41
8
|
var lucide_react_1 = require("lucide-react");
|
|
42
9
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
43
10
|
var AccountRow_1 = __importDefault(require("./AccountRow"));
|
|
44
11
|
var excludeKeys = ["id", "details"];
|
|
45
12
|
var AccountCard = function (_a) {
|
|
46
|
-
var _b, _c, _d, _e, _f, _g;
|
|
47
|
-
var account = _a.account,
|
|
13
|
+
var _b, _c, _d, _e, _f, _g, _h;
|
|
14
|
+
var account = _a.account, onDelete = _a.onDelete, onOpen = _a.onOpen, _j = _a.isExpanded, isExpanded = _j === void 0 ? false : _j, onToggleExpand = _a.onToggleExpand, _k = _a.isDeletable, isDeletable = _k === void 0 ? true : _k;
|
|
48
15
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
49
|
-
var _k = (0, react_1.useState)(false), showMore = _k[0], setShowMore = _k[1];
|
|
50
16
|
var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
|
|
51
17
|
var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
|
|
52
|
-
// Handle the show more/less toggle
|
|
53
18
|
var handleToggle = function () {
|
|
54
|
-
setShowMore(!showMore);
|
|
55
19
|
onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
|
|
56
20
|
};
|
|
57
|
-
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[
|
|
58
|
-
|
|
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" : "100px", transition: "border-color 0.15s ease", _hover: {
|
|
22
|
+
borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[200],
|
|
23
|
+
} },
|
|
24
|
+
react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, fontSize: "0.875rem", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[700] },
|
|
59
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] })); }),
|
|
60
26
|
react_1.default.createElement(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true },
|
|
61
27
|
react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),
|
|
62
28
|
react_1.default.createElement(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center" },
|
|
63
|
-
keys.length > 4 && (react_1.default.createElement(react_2.Text, { color: (
|
|
29
|
+
keys.length > 4 && (react_1.default.createElement(react_2.Text, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], fontSize: "sm", fontWeight: "medium", cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 2 },
|
|
64
30
|
"Show ",
|
|
65
31
|
isExpanded ? "less" : "more",
|
|
66
32
|
" ",
|
|
@@ -68,8 +34,8 @@ var AccountCard = function (_a) {
|
|
|
68
34
|
react_1.default.createElement(react_2.Spacer, null),
|
|
69
35
|
react_1.default.createElement(react_2.HStack, { spacing: 2 },
|
|
70
36
|
isDeletable && (react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
|
|
71
|
-
react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (
|
|
37
|
+
react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer", "aria-label": "Delete" }))),
|
|
72
38
|
react_1.default.createElement(react_2.Tooltip, { label: "Open" },
|
|
73
|
-
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (
|
|
39
|
+
react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_h = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _h === void 0 ? void 0 : _h[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer", "aria-label": "Open" })))))));
|
|
74
40
|
};
|
|
75
41
|
exports.default = AccountCard;
|
|
@@ -17,13 +17,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
var react_1 = __importDefault(require("react"));
|
|
18
18
|
var react_2 = require("@testing-library/react");
|
|
19
19
|
require("@testing-library/jest-dom");
|
|
20
|
+
var react_3 = require("@chakra-ui/react");
|
|
20
21
|
var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
21
22
|
jest.mock("../../Theme/useCustomTheme", function () { return ({
|
|
22
23
|
useCustomTheme: function () { return ({
|
|
23
24
|
colors: {
|
|
24
|
-
background: { 500: "#fff" },
|
|
25
|
+
background: { 50: "#fafafa", 100: "#f5f5f5", 500: "#fff" },
|
|
26
|
+
boxborder: { 300: "#e2e8f0" },
|
|
25
27
|
gray: { 200: "#eee", 700: "#333" },
|
|
26
|
-
primary: { 500: "#3182ce" },
|
|
28
|
+
primary: { 300: "#90cdf4", 500: "#3182ce" },
|
|
27
29
|
red: { 600: "#e53e3e" },
|
|
28
30
|
blue: { 600: "#3182ce" },
|
|
29
31
|
text: {},
|
|
@@ -41,22 +43,25 @@ var defaultProps = {
|
|
|
41
43
|
onDelete: jest.fn(),
|
|
42
44
|
onOpen: jest.fn(),
|
|
43
45
|
};
|
|
46
|
+
var renderCard = function (ui) {
|
|
47
|
+
return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
|
|
48
|
+
};
|
|
44
49
|
describe("AccountCard – permissions", function () {
|
|
45
50
|
it("renders the delete icon when isDeletable is true (default)", function () {
|
|
46
|
-
(
|
|
51
|
+
renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps)));
|
|
47
52
|
expect(react_2.screen.getByLabelText("Delete")).toBeInTheDocument();
|
|
48
53
|
});
|
|
49
54
|
it("hides the delete icon when isDeletable is false", function () {
|
|
50
|
-
(
|
|
55
|
+
renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
|
|
51
56
|
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
52
57
|
});
|
|
53
58
|
it("renders the open (ExternalLink) icon regardless of isDeletable", function () {
|
|
54
|
-
(
|
|
59
|
+
renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
|
|
55
60
|
expect(react_2.screen.getByLabelText("Open")).toBeInTheDocument();
|
|
56
61
|
});
|
|
57
62
|
it("calls onDelete when delete icon is clicked and isDeletable is true", function () {
|
|
58
63
|
var onDelete = jest.fn();
|
|
59
|
-
(
|
|
64
|
+
renderCard(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { onDelete: onDelete, isDeletable: true })));
|
|
60
65
|
react_2.fireEvent.click(react_2.screen.getByLabelText("Delete"));
|
|
61
66
|
expect(onDelete).toHaveBeenCalledWith(mockAccount);
|
|
62
67
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { OptionProp } from
|
|
3
|
-
declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate }: {
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { OptionProp } from "../../Select/SelectProps";
|
|
3
|
+
declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate, }: {
|
|
4
4
|
options: OptionProp[];
|
|
5
5
|
onSelectChange?: (option?: OptionProp) => void;
|
|
6
6
|
onEdit?: () => void;
|
|
@@ -9,18 +9,16 @@ var Select_1 = __importDefault(require("../../Select/Select"));
|
|
|
9
9
|
var lucide_react_1 = require("lucide-react");
|
|
10
10
|
var Divider_1 = __importDefault(require("../../Divider/Divider"));
|
|
11
11
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
12
|
+
var Button_1 = __importDefault(require("../../Button/Button"));
|
|
12
13
|
var KanbanActions = function (_a) {
|
|
13
|
-
var _b, _c
|
|
14
|
+
var _b, _c;
|
|
14
15
|
var options = _a.options, onSelectChange = _a.onSelectChange, onEdit = _a.onEdit, onCreate = _a.onCreate;
|
|
15
16
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
16
17
|
return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" },
|
|
17
18
|
react_2.default.createElement(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: function (option) { return onSelectChange && onSelectChange(option); } }),
|
|
18
|
-
react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.
|
|
19
|
-
react_2.default.createElement(lucide_react_1.SquarePen, { size: 20, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500] }),
|
|
20
|
-
react_2.default.createElement(
|
|
21
|
-
|
|
22
|
-
react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { return onCreate === null || onCreate === void 0 ? void 0 : onCreate(); } },
|
|
23
|
-
react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
|
|
24
|
-
react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, "Create New"))));
|
|
19
|
+
react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.5rem" },
|
|
20
|
+
react_2.default.createElement(Button_1.default, { size: "sm", variant: "ghost", leftIcon: react_2.default.createElement(lucide_react_1.SquarePen, { size: 20, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500] }), onClick: function () { return onEdit === null || onEdit === void 0 ? void 0 : onEdit(); } }, "Edit Layout"),
|
|
21
|
+
react_2.default.createElement(Divider_1.default, null),
|
|
22
|
+
react_2.default.createElement(Button_1.default, { size: "sm", variant: "solid", leftIcon: react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] }), onClick: function () { return onCreate === null || onCreate === void 0 ? void 0 : onCreate(); } }, "Create New"))));
|
|
25
23
|
};
|
|
26
24
|
exports.default = KanbanActions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = __importDefault(require("react"));
|
|
7
|
+
var react_2 = require("@testing-library/react");
|
|
8
|
+
require("@testing-library/jest-dom");
|
|
9
|
+
var react_3 = require("@chakra-ui/react");
|
|
10
|
+
var KanbanActions_1 = __importDefault(require("./KanbanActions"));
|
|
11
|
+
jest.mock("../../../Theme/useCustomTheme", function () { return ({
|
|
12
|
+
useCustomTheme: function () { return ({
|
|
13
|
+
colors: {
|
|
14
|
+
text: { 500: "#555" },
|
|
15
|
+
primary: { 500: "#3182ce" },
|
|
16
|
+
},
|
|
17
|
+
}); },
|
|
18
|
+
}); });
|
|
19
|
+
jest.mock("../../Select/Select", function () { return ({
|
|
20
|
+
__esModule: true,
|
|
21
|
+
default: function (_a) {
|
|
22
|
+
var placeholder = _a.placeholder;
|
|
23
|
+
return react_1.default.createElement("div", { "data-testid": "mock-select" }, placeholder);
|
|
24
|
+
},
|
|
25
|
+
}); });
|
|
26
|
+
jest.mock("../../Divider/Divider", function () { return ({
|
|
27
|
+
__esModule: true,
|
|
28
|
+
default: function () { return react_1.default.createElement("div", { "data-testid": "mock-divider" }); },
|
|
29
|
+
}); });
|
|
30
|
+
var options = [{ id: "1", label: "Open" }];
|
|
31
|
+
var renderActions = function (ui) {
|
|
32
|
+
return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
|
|
33
|
+
};
|
|
34
|
+
describe("KanbanActions", function () {
|
|
35
|
+
it("renders Edit Layout and Create New as buttons", function () {
|
|
36
|
+
renderActions(react_1.default.createElement(KanbanActions_1.default, { options: options, onEdit: jest.fn(), onCreate: jest.fn() }));
|
|
37
|
+
expect(react_2.screen.getByRole("button", { name: /edit layout/i })).toBeInTheDocument();
|
|
38
|
+
expect(react_2.screen.getByRole("button", { name: /create new/i })).toBeInTheDocument();
|
|
39
|
+
});
|
|
40
|
+
it("invokes onEdit and onCreate when buttons are clicked", function () {
|
|
41
|
+
var onEdit = jest.fn();
|
|
42
|
+
var onCreate = jest.fn();
|
|
43
|
+
renderActions(react_1.default.createElement(KanbanActions_1.default, { options: options, onEdit: onEdit, onCreate: onCreate }));
|
|
44
|
+
react_2.fireEvent.click(react_2.screen.getByRole("button", { name: /edit layout/i }));
|
|
45
|
+
react_2.fireEvent.click(react_2.screen.getByRole("button", { name: /create new/i }));
|
|
46
|
+
expect(onEdit).toHaveBeenCalledTimes(1);
|
|
47
|
+
expect(onCreate).toHaveBeenCalledTimes(1);
|
|
48
|
+
});
|
|
49
|
+
});
|
|
@@ -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, }: 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, enableColumnReorder, onColumnReorder, }: KanbanBoardProps) => React.JSX.Element | null;
|
|
4
4
|
export default KanbanBoard;
|
|
@@ -67,18 +67,26 @@ var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
|
67
67
|
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
|
+
/** Narrow rail width when a column is horizontally collapsed. */
|
|
71
|
+
var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
|
|
72
|
+
function reorderColumnEntries(entries, startIndex, endIndex) {
|
|
73
|
+
var result = Array.from(entries);
|
|
74
|
+
var removed = result.splice(startIndex, 1)[0];
|
|
75
|
+
result.splice(endIndex, 0, removed);
|
|
76
|
+
return result;
|
|
77
|
+
}
|
|
70
78
|
var KanbanBoard = function (_a) {
|
|
71
79
|
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;
|
|
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;
|
|
73
81
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
74
82
|
var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
|
|
75
83
|
var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
|
|
76
84
|
var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
|
|
77
85
|
var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
|
|
78
86
|
var mergedColumns = (0, react_1.useMemo)(function () { return (__assign(__assign({}, data), (customColumns !== null && customColumns !== void 0 ? customColumns : {}))); }, [data, customColumns]);
|
|
79
|
-
var
|
|
80
|
-
var
|
|
81
|
-
var
|
|
87
|
+
var _x = (0, react_1.useState)(mergedColumns), columns = _x[0], setColumns = _x[1];
|
|
88
|
+
var _y = (0, react_1.useState)(600), containerHeight = _y[0], setContainerHeight = _y[1];
|
|
89
|
+
var _z = (0, react_1.useState)(null), hoveredColumn = _z[0], setHoveredColumn = _z[1];
|
|
82
90
|
(0, react_1.useEffect)(function () {
|
|
83
91
|
setColumns(mergedColumns);
|
|
84
92
|
}, [mergedColumns]);
|
|
@@ -89,12 +97,22 @@ var KanbanBoard = function (_a) {
|
|
|
89
97
|
lg: "19rem",
|
|
90
98
|
});
|
|
91
99
|
// track expanded cards
|
|
92
|
-
var
|
|
100
|
+
var _0 = (0, react_1.useState)({}), expanded = _0[0], setExpanded = _0[1];
|
|
101
|
+
/** When true, column id maps to collapsed (body hidden). */
|
|
102
|
+
var _1 = (0, react_1.useState)(function () { return (__assign({}, defaultCollapsedColumns)); }), collapsedColumns = _1[0], setCollapsedColumns = _1[1];
|
|
103
|
+
var toggleColumnCollapsed = (0, react_1.useCallback)(function (colId) {
|
|
104
|
+
setCollapsedColumns(function (prev) {
|
|
105
|
+
var _a;
|
|
106
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[colId] = !prev[colId], _a)));
|
|
107
|
+
});
|
|
108
|
+
}, []);
|
|
109
|
+
/** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
|
|
110
|
+
var COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
|
|
93
111
|
// ref for lists
|
|
94
112
|
var listRefs = (0, react_1.useRef)({});
|
|
95
113
|
var containerRef = (0, react_1.useRef)(null);
|
|
96
114
|
// store measured heights
|
|
97
|
-
var
|
|
115
|
+
var _2 = (0, react_1.useState)({}), sizes = _2[0], setSizes = _2[1];
|
|
98
116
|
// update height for an item
|
|
99
117
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
100
118
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -140,13 +158,23 @@ var KanbanBoard = function (_a) {
|
|
|
140
158
|
// drag handler
|
|
141
159
|
var onDragEnd = function (result) {
|
|
142
160
|
var _a, _b;
|
|
143
|
-
var source = result.source, destination = result.destination;
|
|
161
|
+
var source = result.source, destination = result.destination, type = result.type;
|
|
144
162
|
if (!destination)
|
|
145
163
|
return;
|
|
164
|
+
if (type === "COLUMN") {
|
|
165
|
+
if (source.index === destination.index)
|
|
166
|
+
return;
|
|
167
|
+
var entries = Object.entries(columns);
|
|
168
|
+
var reordered = reorderColumnEntries(entries, source.index, destination.index);
|
|
169
|
+
var nextColumns = Object.fromEntries(reordered);
|
|
170
|
+
setColumns(nextColumns);
|
|
171
|
+
onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(nextColumns);
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
146
174
|
var sourceCol = columns[source.droppableId];
|
|
147
175
|
var destCol = columns[destination.droppableId];
|
|
148
|
-
var draggedItem = sourceCol.items[source.index];
|
|
149
|
-
if (!draggedItem)
|
|
176
|
+
var draggedItem = sourceCol === null || sourceCol === void 0 ? void 0 : sourceCol.items[source.index];
|
|
177
|
+
if (!draggedItem || !sourceCol || !destCol)
|
|
150
178
|
return;
|
|
151
179
|
if (source.droppableId === destination.droppableId) {
|
|
152
180
|
var copiedItems = __spreadArray([], sourceCol.items, true);
|
|
@@ -211,134 +239,154 @@ var KanbanBoard = function (_a) {
|
|
|
211
239
|
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"),
|
|
212
240
|
!(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")))));
|
|
213
241
|
};
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
242
|
+
var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
243
|
+
var _a;
|
|
244
|
+
var item = column.items[rubric.source.index];
|
|
245
|
+
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 () {
|
|
246
|
+
return toggleExpand(item.id, colId, rubric.source.index);
|
|
247
|
+
}, isDeletable: canDelete }))));
|
|
248
|
+
} }, 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;
|
|
250
|
+
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
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
|
|
252
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
253
|
+
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300])
|
|
254
|
+
: "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), transition: "width 0.2s ease", onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
|
|
255
|
+
isColCollapsed ? (react_1.default.createElement(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative" },
|
|
256
|
+
react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_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], bg: (_g = colors === null || colors === void 0 ? void 0 : colors.background) === null || _g === void 0 ? void 0 : _g[100], position: "relative", zIndex: 1 },
|
|
257
|
+
enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
|
|
258
|
+
react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[400] }))) : null,
|
|
259
|
+
enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 3 },
|
|
260
|
+
react_1.default.createElement(react_2.IconButton, { "aria-label": "Expand column", icon: react_1.default.createElement(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: function () { return toggleColumnCollapsed(colId); } }))),
|
|
261
|
+
react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700], sx: {
|
|
262
|
+
writingMode: "vertical-rl",
|
|
263
|
+
textOrientation: "mixed",
|
|
264
|
+
}, maxH: "".concat(Math.max(120, containerHeight - 200), "px"), overflow: "hidden", lineHeight: "1.2", title: column.title }, column.title),
|
|
265
|
+
react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[300], display: "flex", backgroundColor: (_m = colors === null || colors === void 0 ? void 0 : colors.background) === null || _m === void 0 ? void 0 : _m[100], alignItems: "center", justifyContent: "center", color: (_o = colors === null || colors === void 0 ? void 0 : colors.text) === null || _o === void 0 ? void 0 : _o[900], fontWeight: 600, fontSize: "10px" }, (_p = column === null || column === void 0 ? void 0 : column.items) === null || _p === void 0 ? void 0 : _p.length)),
|
|
266
|
+
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
|
+
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
|
+
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 },
|
|
270
|
+
enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
|
|
271
|
+
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.Text, { as: "span", fontWeight: "600", fontSize: "1rem", 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 },
|
|
273
|
+
react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
|
|
274
|
+
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: (_y = colors === null || colors === void 0 ? void 0 : colors.background) === null || _y === void 0 ? void 0 : _y[100], borderColor: (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_0 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _0 === void 0 ? void 0 : _0[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_1 = column === null || column === void 0 ? void 0 : column.items) === null || _1 === void 0 ? void 0 : _1.length),
|
|
275
|
+
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
|
+
canDelete &&
|
|
277
|
+
hoveredColumn === colId &&
|
|
278
|
+
column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_2 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _2 === void 0 ? void 0 : _2[600], _hover: { color: (_3 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _3 === void 0 ? void 0 : _3[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
|
|
279
|
+
!(canDelete &&
|
|
280
|
+
hoveredColumn === colId &&
|
|
281
|
+
column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 }))),
|
|
282
|
+
!isColCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
283
|
+
react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
|
|
284
|
+
overflowY: "auto",
|
|
285
|
+
overflowX: "hidden",
|
|
286
|
+
scrollbarWidth: "thin",
|
|
287
|
+
scrollbarColor: "var(--chakra-colors-gray-300) transparent",
|
|
229
288
|
"&::-webkit-scrollbar": {
|
|
230
|
-
|
|
289
|
+
width: "6px !important",
|
|
290
|
+
height: "6px !important",
|
|
231
291
|
},
|
|
232
292
|
"&::-webkit-scrollbar-track": {
|
|
233
|
-
background:
|
|
293
|
+
background: "gray.100",
|
|
234
294
|
borderRadius: "3px",
|
|
235
|
-
|
|
295
|
+
marginTop: "4px",
|
|
296
|
+
marginBottom: "4px",
|
|
236
297
|
},
|
|
237
298
|
"&::-webkit-scrollbar-thumb": {
|
|
238
|
-
background:
|
|
299
|
+
background: "gray.300",
|
|
239
300
|
borderRadius: "3px",
|
|
240
|
-
border: "1px solid
|
|
301
|
+
border: "1px solid",
|
|
302
|
+
borderColor: "gray.100",
|
|
241
303
|
},
|
|
242
304
|
"&::-webkit-scrollbar-thumb:hover": {
|
|
243
|
-
background:
|
|
305
|
+
background: "gray.400",
|
|
244
306
|
},
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
307
|
+
"&": {
|
|
308
|
+
scrollbarGutter: "stable both-edges",
|
|
309
|
+
},
|
|
310
|
+
cursor: canDrag ? "grab" : "not-allowed",
|
|
248
311
|
} },
|
|
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
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
} }, Row)) : (react_1.default.createElement(react_2.Box, null,
|
|
329
|
-
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
330
|
-
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
|
|
331
|
-
var _a;
|
|
332
|
-
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 () {
|
|
333
|
-
return toggleExpand(account.id, colId, index);
|
|
334
|
-
}, isDeletable: canDelete }))));
|
|
335
|
-
}))); }),
|
|
336
|
-
provided.placeholder)))));
|
|
337
|
-
}));
|
|
338
|
-
}),
|
|
339
|
-
!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); } },
|
|
340
|
-
react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
|
|
341
|
-
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] }),
|
|
342
|
-
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")))))))));
|
|
312
|
+
(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
|
|
313
|
+
virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
314
|
+
if (el)
|
|
315
|
+
listRefs.current[colId] = el;
|
|
316
|
+
}, height: containerHeight - 150, itemCount: column.items.length +
|
|
317
|
+
(snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
|
|
318
|
+
return getItemSize(index, column.items, colId);
|
|
319
|
+
}, width: "100%", itemData: {
|
|
320
|
+
items: column.items,
|
|
321
|
+
colId: colId,
|
|
322
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, null,
|
|
323
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
324
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
|
|
325
|
+
var _a;
|
|
326
|
+
return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.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 () {
|
|
327
|
+
return toggleExpand(account.id, colId, index);
|
|
328
|
+
}, isDeletable: canDelete }))));
|
|
329
|
+
}))); }),
|
|
330
|
+
provided.placeholder)))))));
|
|
331
|
+
})); };
|
|
332
|
+
if (!canView)
|
|
333
|
+
return null;
|
|
334
|
+
var showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
|
|
335
|
+
var hasAnyColumns = Object.keys(columns).length > 0;
|
|
336
|
+
var flexScrollSx = {
|
|
337
|
+
"&::-webkit-scrollbar": {
|
|
338
|
+
height: "6px",
|
|
339
|
+
},
|
|
340
|
+
"&::-webkit-scrollbar-track": {
|
|
341
|
+
background: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[100],
|
|
342
|
+
borderRadius: "3px",
|
|
343
|
+
margin: "0 4px",
|
|
344
|
+
},
|
|
345
|
+
"&::-webkit-scrollbar-thumb": {
|
|
346
|
+
background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[400],
|
|
347
|
+
borderRadius: "3px",
|
|
348
|
+
border: "1px solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100]),
|
|
349
|
+
},
|
|
350
|
+
"&::-webkit-scrollbar-thumb:hover": {
|
|
351
|
+
background: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500],
|
|
352
|
+
},
|
|
353
|
+
scrollbarWidth: "thin",
|
|
354
|
+
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
|
+
};
|
|
356
|
+
var addColumnBox = !isLoading && 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
|
+
react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
|
|
358
|
+
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
|
+
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"))));
|
|
360
|
+
var columnsList = Object.entries(columns).map(function (_a, colIndex) {
|
|
361
|
+
var colId = _a[0], column = _a[1];
|
|
362
|
+
var isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
|
|
363
|
+
if (enableColumnReorder) {
|
|
364
|
+
return (react_1.default.createElement(dnd_1.Draggable, { draggableId: colId, index: colIndex, key: colId }, function (dragProvided) {
|
|
365
|
+
var _a;
|
|
366
|
+
return (react_1.default.createElement(react_2.Box, __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: "width 0.2s ease", overflow: isColCollapsed ? "visible" : "hidden" }), renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed)));
|
|
367
|
+
}));
|
|
368
|
+
}
|
|
369
|
+
return renderColumnDroppable(colId, column, null, isColCollapsed);
|
|
370
|
+
});
|
|
371
|
+
var loadingSkeletonRow = Array.from({ length: 5 }).map(function (_, idx) {
|
|
372
|
+
var _a, _b;
|
|
373
|
+
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 },
|
|
374
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
375
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
376
|
+
});
|
|
377
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
378
|
+
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
|
|
379
|
+
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
380
|
+
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 && !isLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
|
|
382
|
+
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
|
+
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
|
+
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
|
+
isLoading ? (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
|
+
columnsList,
|
|
387
|
+
colReorderProvided.placeholder,
|
|
388
|
+
addColumnBox)); })) : (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx },
|
|
389
|
+
columnsList,
|
|
390
|
+
addColumnBox))))));
|
|
343
391
|
};
|
|
344
392
|
exports.default = KanbanBoard;
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
14
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
15
|
};
|
|
@@ -125,4 +136,32 @@ describe("KanbanBoard – permissions", function () {
|
|
|
125
136
|
expect(disabledDraggables.length).toBeGreaterThan(0);
|
|
126
137
|
});
|
|
127
138
|
});
|
|
139
|
+
describe("column collapse", function () {
|
|
140
|
+
it("shows a collapse control per column when enableColumnCollapse is true", function () {
|
|
141
|
+
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true }));
|
|
142
|
+
expect(react_2.screen.getAllByLabelText("Collapse column").length).toBeGreaterThan(0);
|
|
143
|
+
});
|
|
144
|
+
it("hides cards when a column is collapsed", function () {
|
|
145
|
+
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true }));
|
|
146
|
+
expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
|
|
147
|
+
react_2.fireEvent.click(react_2.screen.getAllByLabelText("Collapse column")[0]);
|
|
148
|
+
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
149
|
+
expect(react_2.screen.getByLabelText("Expand column")).toBeInTheDocument();
|
|
150
|
+
});
|
|
151
|
+
it("still shows column customNode when horizontally collapsed", function () {
|
|
152
|
+
var dataWithCustom = {
|
|
153
|
+
col1: __assign(__assign({}, sampleData.col1), { customNode: function () { return react_1.default.createElement("span", null, "Column summary line"); } }),
|
|
154
|
+
};
|
|
155
|
+
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: dataWithCustom, enableColumnCollapse: true }));
|
|
156
|
+
expect(react_2.screen.queryByText("Column summary line")).not.toBeInTheDocument();
|
|
157
|
+
react_2.fireEvent.click(react_2.screen.getByLabelText("Collapse column"));
|
|
158
|
+
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
159
|
+
expect(react_2.screen.getByText("Column summary line")).toBeInTheDocument();
|
|
160
|
+
});
|
|
161
|
+
it("starts with columns collapsed when collapsedColumns is set", function () {
|
|
162
|
+
renderWithChakra(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, enableColumnCollapse: true, collapsedColumns: { col1: true } }));
|
|
163
|
+
expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
|
|
164
|
+
expect(react_2.screen.getByLabelText("Expand column")).toBeInTheDocument();
|
|
165
|
+
});
|
|
166
|
+
});
|
|
128
167
|
});
|
|
@@ -15,6 +15,8 @@ export type ColumnType = {
|
|
|
15
15
|
title: string;
|
|
16
16
|
color: string;
|
|
17
17
|
items: Account[];
|
|
18
|
+
/** Column-level slot (e.g. totals). Only in the collapsed narrow rail; rotated 270° along the column. */
|
|
19
|
+
customNode?: () => ReactNode;
|
|
18
20
|
};
|
|
19
21
|
export type KanbanBoardProps = {
|
|
20
22
|
data: Record<string, ColumnType>;
|
|
@@ -68,4 +70,15 @@ export type KanbanBoardProps = {
|
|
|
68
70
|
onClick?: (column: ColumnType) => void;
|
|
69
71
|
isEmptyTextOnly?: boolean;
|
|
70
72
|
};
|
|
73
|
+
/** When true, columns can collapse to a narrow horizontal rail (full height). */
|
|
74
|
+
enableColumnCollapse?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
|
|
77
|
+
* Only read on first mount; remount the board or toggle in UI to change afterward.
|
|
78
|
+
*/
|
|
79
|
+
collapsedColumns?: Record<string, boolean>;
|
|
80
|
+
/** When true, columns can be reordered via the header grip handle. */
|
|
81
|
+
enableColumnReorder?: boolean;
|
|
82
|
+
/** Called after column order changes (same shape as `data` keys order). */
|
|
83
|
+
onColumnReorder?: (columns: Record<string, ColumnType>) => void;
|
|
71
84
|
};
|
|
@@ -24,7 +24,7 @@ var react_1 = require("react");
|
|
|
24
24
|
var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
|
|
25
25
|
var table_1 = require("../../../Utils/table");
|
|
26
26
|
var defaultPageSize = 50;
|
|
27
|
-
var mergeColumnWithPreference = function (
|
|
27
|
+
var mergeColumnWithPreference = function (pref, originalCol) {
|
|
28
28
|
if (!pref || typeof pref !== "object") {
|
|
29
29
|
return __assign({}, originalCol);
|
|
30
30
|
}
|
|
@@ -135,7 +135,7 @@ var TableSettings = function (_a) {
|
|
|
135
135
|
} },
|
|
136
136
|
react_2.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }))))),
|
|
137
137
|
react_2.default.createElement(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.border) === null || _s === void 0 ? void 0 : _s[200], pt: 3, pb: 3, px: 4 },
|
|
138
|
-
react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "
|
|
138
|
+
react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, variant: "outline", colorScheme: "red" }),
|
|
139
139
|
react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: handleSave }))))))));
|
|
140
140
|
};
|
|
141
141
|
exports.default = TableSettings;
|
package/dist/Theme/fonts.d.ts
CHANGED
package/dist/Theme/fonts.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
// Supports weights 100-900
|
|
3
|
-
// import "@fontsource-variable/inter";
|
|
4
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
|
|
4
|
+
require("@fontsource-variable/inter/index.css");
|
|
5
5
|
var fonts = {
|
|
6
6
|
fonts: {
|
|
7
7
|
body: "Inter Variable, sans-serif",
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixelize-design-library",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.174",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"dependencies": {
|
|
9
|
+
"@fontsource-variable/inter": "^5.2.8",
|
|
9
10
|
"@hello-pangea/dnd": "^18.0.1",
|
|
10
11
|
"jodit-react": "^5.2.38",
|
|
11
12
|
"lucide-react": "^0.487.0",
|
|
@@ -63,15 +64,12 @@
|
|
|
63
64
|
]
|
|
64
65
|
},
|
|
65
66
|
"devDependencies": {
|
|
66
|
-
"@chakra-ui/react": "^2.8.2",
|
|
67
67
|
"@babel/core": "^7.24.5",
|
|
68
68
|
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
|
|
69
69
|
"@babel/preset-env": "^7.24.5",
|
|
70
70
|
"@babel/preset-react": "^7.24.5",
|
|
71
71
|
"@babel/preset-typescript": "^7.24.5",
|
|
72
|
-
"
|
|
73
|
-
"jest": "^29.7.0",
|
|
74
|
-
"jest-environment-jsdom": "^29.7.0",
|
|
72
|
+
"@chakra-ui/react": "^2.8.2",
|
|
75
73
|
"@emotion/react": "^11.11.4",
|
|
76
74
|
"@emotion/styled": "^11.11.5",
|
|
77
75
|
"@testing-library/jest-dom": "^5.17.0",
|
|
@@ -84,19 +82,22 @@
|
|
|
84
82
|
"@types/react": "^18.3.2",
|
|
85
83
|
"@types/react-dom": "^18.3.0",
|
|
86
84
|
"@types/react-window": "^1.8.8",
|
|
85
|
+
"@vitejs/plugin-react": "^4.4.1",
|
|
87
86
|
"autoprefixer": "^10.4.21",
|
|
87
|
+
"babel-jest": "^29.7.0",
|
|
88
88
|
"copyfiles": "^2.4.1",
|
|
89
89
|
"framer-motion": "^10.18.0",
|
|
90
|
-
"
|
|
91
|
-
"
|
|
90
|
+
"jest": "^29.7.0",
|
|
91
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
92
92
|
"path": "^0.12.7",
|
|
93
93
|
"postcss": "^8.5.4",
|
|
94
94
|
"prettier": "^3.3.2",
|
|
95
95
|
"prop-types": "^15.8.1",
|
|
96
|
+
"react": "^18.3.1",
|
|
97
|
+
"react-dom": "^18.3.1",
|
|
96
98
|
"tailwindcss": "^3.4.17",
|
|
97
99
|
"typescript": "^5.9.3",
|
|
98
100
|
"vite": "^6.2.0",
|
|
99
|
-
"@vitejs/plugin-react": "^4.4.1",
|
|
100
101
|
"webpack": "^5.91.0"
|
|
101
102
|
},
|
|
102
103
|
"peerDependencies": {
|