pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Components/InputTextArea/InputTextArea.js

@@ -7,10 +7,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-/** Labelled multi-line text field; `width` defaults to a literal `500` (px, not responsive) and there's no `...rest` escape hatch. */
-const InputTextArea = (0, react_1.forwardRef)(function InputTextArea({ label, placeholder, value, onChange, onBlur, name, size = "md", resize = "both", width = 500, isDisabled, isReadOnly, isRequired = false, error, errorMessage, helperText, rows, height, isInformation, informationMessage, id, autoComplete = "" }, ref) {
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: ref, id: id, name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, size: size, resize: resize, isDisabled: isDisabled, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height, autoComplete: autoComplete }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const useAriaRequired_1 = require("../Input/useAriaRequired");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+/** Labelled multi-line text field — full width by default, label always bound (auto id), helper/error row, rest props reach the `<textarea>`. */
+const InputTextArea = (0, react_1.forwardRef)(function InputTextArea({ label, size = controlSizes_1.DEFAULT_CONTROL_SIZE, resize = "both", width = "100%", isRequired = false, error, errorMessage, helperText, isInformation, informationMessage, id, autoComplete = "", ...rest }, ref) {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const mergedRef = (0, react_2.useMergeRefs)(ref, (0, useAriaRequired_1.useAriaRequired)(isRequired));
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { w: width, children: [label && (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }), (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: mergedRef, size: size, resize: resize, isInvalid: error, width: "100%", autoComplete: autoComplete, ...ids.controlProps, ...rest }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.default = InputTextArea;

package/dist/Components/InputTextArea/InputTextArea.style.js

@@ -1,80 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
-const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const TextInput_styles_1 = require("../Input/TextInput.styles");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const PADDING_Y = { xs: "0.25rem", sm: "0.375rem", md: "0.5rem", lg: "0.75rem" };
 exports.Textarea = {
-    baseStyle: ({ theme }) => ({
-        fontWeight: 500,
-        fontSize: "0.875rem",
-        letterSpacing: "0.044rem",
-        pt: "0.813rem",
-        pb: "0.813rem",
-        borderRadius: "lg",
-        transition: "border-color 0.2s, box-shadow 0.2s",
-        _placeholder: {
-            color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-        },
-    }),
-    sizes: {
-        md: {
-            fontSize: "0.875rem",
-            h: "2.75rem",
-        },
+    baseStyle: {
+        h: "auto",
+        minH: "5rem",
+        lineHeight: "short",
+        verticalAlign: "top",
     },
+    sizes: Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [
+        size,
+        { fontSize: controlSizes_1.CONTROL_SIZES[size].fontSize, px: controlSizes_1.CONTROL_SIZES[size].paddingX, py: PADDING_Y[size], h: "auto" },
+    ])),
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                border: "0.063rem solid",
-                borderColor,
-                bg: theme.colors.background[50],
-                _placeholder: {
-                    color: (0, placeholderInk_1.placeholderInk)(theme.colors),
-                },
-                _hover: {
-                    borderColor: primary,
-                    outline: "0",
-                },
-                _focus: {
-                    borderColor: primary,
-                    boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                    outline: "0",
-                },
-                _invalid: {
-                    borderColor: errorColor,
-                    boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                    _hover: {
-                        borderColor: errorColor,
-                        outline: "0",
-                    },
-                    _focus: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        outline: "0",
-                    },
-                },
-                _readOnly: {
-                    boxShadow: 'inherit',
-                },
-                _disabled: {
-                    bg: theme.colors.background[100],
-                    opacity: 1,
-                    cursor: "not-allowed",
-                    _hover: {
-                        border: "0.063rem solid",
-                        borderColor,
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => (0, TextInput_styles_1.fieldPartStyles)(theme.colors),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: controlSizes_1.DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/Components/InputTextArea/InputTextAreaProps.d.ts

@@ -1,13 +1,20 @@
 import { TextareaProps } from "@chakra-ui/react";
-/** width defaults to 500 → literal "500px", not responsive (pass "100%"); id is required or the label has no accessible association. */
-export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "onBlur" | "name" | "id" | "size" | "resize" | "isDisabled" | "isReadOnly" | "isRequired" | "variant" | "autoComplete"> & {
+/** Multi-line field; every other Chakra `Textarea` prop (`maxLength`, `onKeyDown`, `sx`, `aria-*`…) is spread onto the `<textarea>`. */
+export type InputTextAreaProps = Omit<TextareaProps, "width" | "isInvalid"> & {
     label?: string;
+    /** Marks the textarea invalid (error border + `aria-invalid`) and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Shown while `error` is true. Omitting it renders no message and still hides `helperText`. */
     errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
     helperText?: string;
+    /** Width of the whole field (label + textarea + message). Defaults to `"100%"`. */
     width?: string | number;
     rows?: number;
+    /** Height of the `<textarea>` itself; the field grows with the message row. */
     height?: string | number;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
 };

package/dist/Components/KanbanBoard/AccountCard.js

@@ -42,24 +42,27 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
 const excludeKeys = ["id", "details"];
+const ACTION_TRANSITION = (0, motion_1.transitionFor)(["background-color", "color"]);
 /** Renders one card; if `account.customNode` is set it fully replaces this (and the built-in delete/open/expand) — not exported from the package. */
 const AccountCard = react_1.default.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
     const keys = (0, react_1.useMemo)(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "lg", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "sm", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
             transform: "translateY(-0.063rem)",
-        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: colors.primary[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "md", cursor: "pointer", color: colors.textMuted, transition: "background 0.15s ease, color 0.15s ease", _hover: {
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: colors.text[500], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: colors.text[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: (0, motion_2.reducedMotionSx)(), children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, _hover: {
                                             bg: colors.primary[50],
                                             color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
                                         }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));

package/dist/Components/KanbanBoard/AccountRow.d.ts

@@ -1,4 +1,4 @@
-/** Renders one label:value row; `label` is re-run through `toWords`, which only splits snake_case — a camelCase key like `nextFollowUp` displays as `Nextfollowup`. */
+/** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 declare const AccountRow: ({ label, value }: {
     label: string;
     value: string;

package/dist/Components/KanbanBoard/AccountRow.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const functions_1 = require("../../Utils/functions");
-/** Renders one label:value row; `label` is re-run through `toWords`, which only splits snake_case — a camelCase key like `nextFollowUp` displays as `Nextfollowup`. */
+/** Renders one label:value row; `label` is re-run through `toWords`, which splits snake_case, kebab-case and camelCase. */
 const AccountRow = ({ label, value }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: "full", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.text[700], w: "30%", noOfLines: 1, fontSize: "0.75rem", children: (0, functions_1.toWords)(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { w: "0.75rem", textAlign: "center", fontSize: "0.75rem", children: ":" }), (0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[800], w: "calc(55% - 0.625rem)", noOfLines: 1, fontSize: "0.75rem", children: value }) })] }));

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,4 +1,4 @@
 import { KanbanBoardProps } from "./KanbanBoardProps";
 /** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
-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) => import("react/jsx-runtime").JSX.Element | null;
+declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, height, maxH, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -44,6 +44,9 @@ const lucide_react_1 = require("lucide-react");
 const react_window_1 = require("react-window");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const usePreferences_1 = require("../../Hooks/usePreferences");
 const AccountCard_1 = __importDefault(require("./AccountCard"));
 const HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
@@ -53,11 +56,27 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+const CARD_LABEL_EXCLUDE = ["id", "details"];
+/** Accessible name for a draggable card: first visible string field, else its id. */
+const getCardAccessibleName = (account) => {
+    if (typeof account.name === "string" && account.name)
+        return account.name;
+    const key = Object.keys(account).find((k) => !CARD_LABEL_EXCLUDE.includes(k) && typeof account[k] === "string" && account[k]);
+    return key ? account[key] : `Card ${account.id}`;
+};
 const KANBAN_CARD_GAP = 12;
+const COLUMN_HEIGHT = "calc(100% - 1.25rem)";
+const MIN_LIST_HEIGHT = 120;
+// Matches Table's own row threshold (TableBody.tsx) so both components agree on when DOM size needs virtualizing.
+const KANBAN_VIRTUALIZE_THRESHOLD = 30;
+const COLUMN_TRANSITION = `${(0, motion_1.transitionFor)(["background-color", "border-color"])}, ${(0, motion_1.transitionFor)(["width"], "base")}`;
+const SKELETON_ROWS = [3, 4, 3];
+const CardSkeleton = ({ colors, rows }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "kanban-card-skeleton", borderRadius: "lg", bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, p: 3, minH: "5rem", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 2.5, children: Array.from({ length: rows }).map((_, i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, w: "30%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, flex: "1", maxW: i % 2 ? "40%" : "55%", borderRadius: "sm" })] }, i))) }) }));
 // Top buffer above the first card so its border + hover lift aren't clipped by the
 // scroll/virtualized list's top edge.
 const KANBAN_LIST_TOP_PAD = 6;
 const KanbanRow = react_1.default.memo(({ index, style, data }) => {
+    const { colors: rowColors } = (0, useCustomTheme_1.useCustomTheme)();
     const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
     const account = items[index];
     if (!account) {
@@ -65,7 +84,7 @@ const KanbanRow = react_1.default.memo(({ index, style, data }) => {
     }
     return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(MeasuredItem_1.default, { index: index, setSize: (i, h) => setSize(i, h, colId), children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => {
                         var _a;
-                        return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, children: (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) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
+                        return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: provided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(rowColors), children: (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) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
                     } }, account.id) }) }) }));
 });
 const NoItemsTemplate = react_1.default.memo(({ column, noItems, colors }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], textAlign: "center", mt: 4, children: (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column" }), !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => { 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", children: (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item" }))] }) })));
@@ -83,7 +102,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     name: "",
     page: "",
     orgId: "",
-}, }) => {
+}, height, maxH, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
     const canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
@@ -116,7 +135,8 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
     const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
     const [columns, setColumns] = (0, react_1.useState)(mergedColumns);
-    const [containerHeight, setContainerHeight] = (0, react_1.useState)(600);
+    const [viewportHeight, setViewportHeight] = (0, react_1.useState)(600);
+    const [measuredHeight, setMeasuredHeight] = (0, react_1.useState)(0);
     const [hoveredColumn, setHoveredColumn] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         setColumns(mergedColumns);
@@ -278,13 +298,11 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         const key = `${colId}-${index}`;
         return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
     }, [sizes]);
-    // Calculate container height
     (0, react_1.useEffect)(() => {
+        if (height !== undefined)
+            return;
         const calculateDimensions = () => {
-            if (containerRef.current) {
-                const availableHeight = window.innerHeight - 100;
-                setContainerHeight(Math.max(500, availableHeight));
-            }
+            setViewportHeight(Math.max(500, window.innerHeight - 100));
         };
         calculateDimensions();
         const onResize = (0, rafThrottle_1.rafThrottle)(calculateDimensions);
@@ -293,7 +311,21 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
             onResize.cancel();
             window.removeEventListener("resize", onResize);
         };
-    }, [isBoardLoading]);
+    }, [height]);
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        setMeasuredHeight(el.getBoundingClientRect().height);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver((entries) => {
+            setMeasuredHeight(entries[0].contentRect.height);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [canView]);
+    const containerHeight = measuredHeight > 0 ? measuredHeight : viewportHeight;
     // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
     // every render (which would re-render every virtualized row).
     const toggleExpand = (0, react_1.useCallback)((id, colId, index) => {
@@ -387,59 +419,63 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         }
         return map;
     }, [columns, rowBaseProps]);
-    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: colId, mode: virtualization ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
-            var _a;
-            const item = column.items[rubric.source.index];
-            return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-                    ...provided.draggableProps.style,
-                    width: columnWidth,
-                    paddingBottom: KANBAN_CARD_GAP,
-                }, children: (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) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: () => toggleExpand(item.id, colId, rubric.source.index), isDeletable: canDelete }, item.id)) }));
-        }, children: (provided, snapshot) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "xl", background: snapshot.isDraggingOver
-                    ? colors.primary[50]
-                    : colors.background[100], border: `0.063rem ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
-                    ? colors.primary[300]
-                    : colors.boxborder[200]}`, transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: `${containerHeight - 60}px`, onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: colors.text[700], sx: {
-                                            writingMode: "vertical-rl",
-                                            textOrientation: "mixed",
-                                        }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "full", border: "1px solid", borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "10px", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(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: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "full", backgroundColor: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[700], fontWeight: 600, fontSize: "0.625rem", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
-                                        hoveredColumn === colId &&
-                                        column.items.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => handleColumnDelete(colId), transition: "color 0.2s ease", flexShrink: 0 })), !(canDelete &&
-                                        hoveredColumn === colId &&
-                                        column.items.length > 0) && (0, jsx_runtime_1.jsx)(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
-                            ...(0, scrollbar_1.scrollbarStyles)(colors),
-                            overflowY: "auto",
-                            overflowX: "hidden",
-                            "&": { scrollbarGutter: "stable both-edges" },
-                            cursor: canDrag ? "grab" : "not-allowed",
-                        }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && ((0, jsx_runtime_1.jsx)(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { ref: (el) => {
-                                    if (el)
-                                        listRefs.current[colId] = el;
-                                }, height: containerHeight - 150, itemCount: column.items.length +
-                                    (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
-                                                var _a;
-                                                return ((0, jsx_runtime_1.jsx)("div", { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, style: dragProvided.draggableProps.style, children: (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) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete })) }));
-                                            } }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
-        } }, colId));
+    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => {
+        const shouldVirtualize = virtualization !== null && virtualization !== void 0 ? virtualization : column.items.length > KANBAN_VIRTUALIZE_THRESHOLD;
+        return ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: colId, mode: shouldVirtualize ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
+                var _a;
+                const item = column.items[rubric.source.index];
+                return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": item ? getCardAccessibleName(item) : undefined, style: {
+                        ...provided.draggableProps.style,
+                        width: columnWidth,
+                        paddingBottom: KANBAN_CARD_GAP,
+                    }, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (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) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: () => toggleExpand(item.id, colId, rubric.source.index), isDeletable: canDelete }, item.id)) }));
+            }, children: (provided, snapshot) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "xl", background: snapshot.isDraggingOver
+                        ? colors.primary[50]
+                        : colors.background[100], border: `0.063rem ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
+                        ? colors.primary[300]
+                        : colors.boxborder[200]}`, transition: COLUMN_TRANSITION, display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: COLUMN_HEIGHT, sx: (0, motion_2.reducedMotionSx)(), onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), onFocus: () => setHoveredColumn(colId), onBlur: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget))
+                            setHoveredColumn(null);
+                    }, children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: colors.text[700], sx: {
+                                                writingMode: "vertical-rl",
+                                                textOrientation: "mixed",
+                                            }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 5, h: 5, borderRadius: "full", border: "0.063rem solid", borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "xs", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(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: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 2.5, borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 6, h: 6, px: 2, borderRadius: "full", backgroundColor: colors.backgroundColor.subtle, display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[500], fontWeight: 600, fontSize: "xs", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
+                                            hoveredColumn === colId &&
+                                            column.items.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Delete all cards in ${column.title}`, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: 4, borderRadius: "sm", cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => handleColumnDelete(colId), transition: (0, motion_1.transitionFor)(["color"]), sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 4, flexShrink: 0 }))] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                                ...(0, scrollbar_1.scrollbarStyles)(colors),
+                                overflowY: "auto",
+                                overflowX: "hidden",
+                                "&": { scrollbarGutter: "stable both-edges" },
+                                cursor: canDrag ? "grab" : "not-allowed",
+                            }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && ((0, jsx_runtime_1.jsx)(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), shouldVirtualize ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { ref: (el) => {
+                                        if (el)
+                                            listRefs.current[colId] = el;
+                                    }, height: Math.max(MIN_LIST_HEIGHT, containerHeight - 150), itemCount: column.items.length +
+                                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
+                                                    var _a;
+                                                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: dragProvided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (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) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete })) }));
+                                                } }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
+            } }, colId));
+    };
     if (!canView)
         return null;
     const showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
     const hasAnyColumns = Object.keys(columns).length > 0;
     const flexScrollSx = (0, scrollbar_1.scrollbarStyles)(colors);
-    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: `${containerHeight - 60}px`, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
+    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: COLUMN_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
     const columnsList = Object.entries(columns).map(([colId, column], colIndex) => {
         const isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
         if (enableColumnReorder) {
             return ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: colId, index: colIndex, children: (dragProvided) => {
                     var _a;
-                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: "width 0.2s ease", overflow: isColCollapsed ? "visible" : "hidden", children: renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed) }));
+                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: (0, motion_1.transitionFor)(["width"], "base"), sx: (0, motion_2.reducedMotionSx)(), overflow: isColCollapsed ? "visible" : "hidden", children: renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed) }));
                 } }, colId));
         }
         return renderColumnDroppable(colId, column, null, isColCollapsed);
     });
-    const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: columnWidth, p: 4, borderRadius: "lg", bg: colors.background[100], border: `0.125rem solid ${colors.boxborder[200]}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "base" }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })] }, idx)));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, bg: colors.backgroundColor.main, minH: `${containerHeight}px`, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "lg", bg: colors.background[100], border: `0.125rem dashed ${colors.boxborder[500]}`, _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
+    const loadingSkeletonRow = Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { "aria-hidden": true, width: columnWidth, borderRadius: "xl", bg: colors.background[100], border: `0.063rem solid ${colors.boxborder[200]}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "2.5" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 3, w: "40%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 6, w: 6, ml: "auto", borderRadius: "full" })] }), (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 3, px: 2, pt: 1.5, pb: 3, children: SKELETON_ROWS.slice(0, 3 - (idx % 2)).map((rows, i) => ((0, jsx_runtime_1.jsx)(CardSkeleton, { colors: colors, rows: rows }, i))) })] }, idx)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, "data-testid": "kanban-board", "aria-busy": isBoardLoading || undefined, bg: colors.backgroundColor.main, h: height !== null && height !== void 0 ? height : `${viewportHeight}px`, maxH: maxH, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "lg", bg: colors.background[100], border: `0.125rem dashed ${colors.boxborder[500]}`, _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading board", gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
 };
 exports.default = KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -34,6 +34,26 @@ export type ColumnCollapseChangePayload = {
     /** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
     collapsedColumns: Record<string, boolean>;
 };
+/** Payload of `onDrag` — the moved card, its source/target column ids and indexes, and the next column map. */
+export type KanbanDragPayload = {
+    from: string;
+    to: string;
+    item: Account;
+    columns: Record<string, ColumnType>;
+    fromIndex: number;
+    toIndex: number;
+};
+/** Board permission gates; every flag defaults to true when omitted. */
+export type KanbanPermissions = {
+    /** Also gates the `kanbanEdit` button and card drag; column-reorder drag ignores this. */
+    isEditable?: boolean;
+    /** Also gates the `kanbanCreate` button. */
+    isCreatable?: boolean;
+    /** Also hides the column-delete trash icon on column-header hover, not just per-card delete. */
+    isDeletable?: boolean;
+    /** false returns null for the whole board — nothing renders, not even header actions. */
+    isViewable?: boolean;
+};
 /** Props for KanbanBoard — keyed columns (`data`) of draggable `Account` cards. */
 export type KanbanBoardProps = {
     /** Base columns; `customColumns` below is merged on top, not into, this. */
@@ -55,20 +75,15 @@ export type KanbanBoardProps = {
     /** Receives the deleted column's item ids, not the column's own id — the column identity itself is not passed. */
     onColumnDelete?: (colId: (string | number)[]) => void;
     /** Fires after `columns` state already updated internally — a notification, not a gate; it cannot veto or revert the move. */
-    onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
-        from: string;
-        to: string;
-        item: Account;
-        columns: Record<string, ColumnType>;
-        fromIndex: number;
-        toIndex: number;
-    }) => void;
+    onDrag?: (payload: KanbanDragPayload) => void;
     /** Also true (skeletons show) whenever `preferences.baseurl` is set and its own fetch is still loading. */
     isLoading?: boolean;
+    /** Header filter select; renders only when `isSelect` is true. */
     kanbanSelect?: {
         /** Gates the whole select — unlike `kanbanEdit`/`kanbanCreate`, never checked against `permissions`. */
         isSelect?: boolean;
         options?: OptionProp[];
+        /** Never fires with undefined — picking the placeholder row again fires nothing. */
         onSelectChange?: (option?: OptionProp) => void;
         selectPlaceholderText?: string;
         /** Defaults to `"12.5rem"` when omitted. */
@@ -80,26 +95,20 @@ export type KanbanBoardProps = {
     kanbanEdit?: {
         isEditable?: boolean;
         onEdit?: () => void;
+        /** Defaults to "Edit Layout". */
         label?: string;
     };
     /** Same `permissions.isCreatable` AND-gate as `kanbanEdit`. */
     kanbanCreate?: {
         isCreatable?: boolean;
         onCreate?: () => void;
+        /** Defaults to "Create New". */
         label?: string;
     };
-    /** true renders cards via a virtualized react-window list; otherwise all cards mount directly. */
+    /** Renders cards via a virtualized react-window list; omitted, it auto-enables above 30 cards in that column — true/false always overrides. */
     virtualization?: boolean;
-    permissions?: {
-        /** Also gates the `kanbanEdit` button and card drag; column-reorder drag ignores this. */
-        isEditable?: boolean;
-        /** Also gates the `kanbanCreate` button. */
-        isCreatable?: boolean;
-        /** Also hides the column-delete trash icon on column-header hover, not just per-card delete. */
-        isDeletable?: boolean;
-        /** false returns null for the whole board — nothing renders, not even header actions. */
-        isViewable?: boolean;
-    };
+    permissions?: KanbanPermissions;
+    /** Per-column empty state for columns with no items. */
     noItems?: {
         /** Also requires the column to have zero items — evaluated per column, not board-wide. */
         isVisible?: boolean;
@@ -107,6 +116,7 @@ export type KanbanBoardProps = {
         text?: string;
         /** Defaults to "Add Item"; hidden entirely when `isEmptyTextOnly` is true. */
         buttonText?: string;
+        /** Receives the empty column the button was clicked in. */
         onClick?: (column: ColumnType) => void;
         /** When true, the button never renders — only the text line shows. */
         isEmptyTextOnly?: boolean;
@@ -121,11 +131,17 @@ export type KanbanBoardProps = {
     enableColumnReorder?: boolean;
     /** Called after column order changes (same shape as `data` keys order). */
     onColumnReorder?: (columns: Record<string, ColumnType>) => void;
+    /** Board height (CSS length, e.g. `"100%"` to fill a sized parent); columns fill it. Defaults to the viewport minus 100px, min 500px. */
+    height?: string | number;
+    /** Caps the board height; columns shrink to fit. */
+    maxH?: string | number;
     /** Same shape as Table's `preferences`; collapse state loads/saves to `json.collapsedColumns` only when `baseurl` is set. */
     preferences?: {
         /** Must be non-empty to activate preferences loading/saving at all. */
         baseurl: string;
+        /** Sent verbatim as the `Authorization` header — include any `Bearer ` prefix yourself. */
         token: string;
+        /** The load fetch re-runs only when `baseurl` changes — changing key/name/page/orgId alone never refetches. */
         key?: string;
         name?: string;
         page?: string;

package/dist/Components/KanbanBoard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./KanbanBoard";
+export type { Account, ColumnType, ColumnCollapseChangePayload, KanbanBoardProps, KanbanDragPayload, KanbanPermissions, } from "./KanbanBoardProps";