blixify-ui-web 1.2.122 → 1.2.124

package/lib/components/display/newGrid/index.js

@@ -0,0 +1,248 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewGrid = void 0;
+var outline_1 = require("@heroicons/react/24/outline");
+var react_1 = __importStar(require("react"));
+var link_1 = require("../../structure/link");
+var emptyState_1 = require("../emptyState");
+var loading_1 = require("../loading");
+var newPagination_1 = require("../newPagination");
+var tag_1 = require("../tag");
+// INFO: matches legacy Grid's default (5) for drop-in parity. Intentionally
+// differs from NewPagination's own default (10) — NewGrid always forwards an
+// explicit limit below, so NewPagination's fallback is never reached from here.
+var defaultLimit = 5;
+var NewGrid = function (props) {
+    var _a, _b, _c;
+    var _d = (0, react_1.useState)(false), dragging = _d[0], setDragging = _d[1];
+    var _e = (0, react_1.useState)(false), infinityLoading = _e[0], setInfinityLoading = _e[1];
+    var scrollRef = (0, react_1.useRef)(null);
+    var pos = (0, react_1.useRef)({ top: 0, left: 0, x: 0, y: 0 });
+    var grabbing = (0, react_1.useRef)(false);
+    var bg = props.darkMode ? ((_a = props.darkModeBg) !== null && _a !== void 0 ? _a : "bg-gray-900") : "bg-white";
+    var borderColor = props.darkMode ? "border-gray-700" : "border-gray-100";
+    var titleColor = props.darkMode ? "text-primary-300" : "text-primary-600";
+    // INFO: same body-text tokens as NewTable/NewList so cards and rows read
+    // identically inside the same dashboard
+    var textColor = props.darkMode ? "text-gray-200" : "text-gray-700";
+    var imgClass = props.imgContain ? "object-contain" : "object-cover";
+    // INFO: cursor reset stops the append spinner once the next page has arrived
+    (0, react_1.useEffect)(function () {
+        setInfinityLoading(false);
+    }, [props.cursor]);
+    // ─── horizontal scroll: grab-to-pan + infinite load ─────────────────────────
+    // INFO: shared trigger — fires from both wheel/trackpad scroll and grab-to-pan
+    // drag, matching legacy Grid which loaded the next page in both paths.
+    var handleMaybeLoadNext = function () {
+        var _a;
+        var el = scrollRef.current;
+        if (props.cursor &&
+            props.paginationType === "scroll" &&
+            props.horizontalScroll &&
+            !infinityLoading &&
+            el &&
+            el.clientWidth + el.scrollLeft >= el.scrollWidth - 50) {
+            setInfinityLoading(true);
+            (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, "next");
+        }
+    };
+    var handleScroll = function () {
+        handleMaybeLoadNext();
+    };
+    var handleSeedGrab = function (e) {
+        var el = scrollRef.current;
+        if (!el)
+            return;
+        grabbing.current = true;
+        pos.current = {
+            left: el.scrollLeft,
+            top: el.scrollTop,
+            x: e.clientX,
+            y: e.clientY,
+        };
+    };
+    var handleMouseDown = function (e) {
+        var el = scrollRef.current;
+        if (!el || !props.horizontalScroll)
+            return;
+        el.style.cursor = "grabbing";
+        el.style.userSelect = "none";
+        handleSeedGrab(e);
+    };
+    // INFO: re-seed when the pointer re-enters mid-drag, otherwise the stale origin
+    // in pos.current makes the row jump on the next mousemove
+    var handleMouseEnter = function (e) {
+        if (!props.horizontalScroll || e.buttons !== 1)
+            return;
+        handleSeedGrab(e);
+    };
+    var handleMouseMove = function (e) {
+        var el = scrollRef.current;
+        // INFO: only pan while a grab is active (left button held since a seeded mousedown/enter)
+        if (!el || !props.horizontalScroll || e.buttons !== 1 || !grabbing.current)
+            return;
+        var dx = e.clientX - pos.current.x;
+        var dy = e.clientY - pos.current.y;
+        if (Math.abs(dx) > 3 || Math.abs(dy) > 3)
+            setDragging(true);
+        el.scrollTop = pos.current.top - dy;
+        el.scrollLeft = pos.current.left - dx;
+        // INFO: onScroll does not reliably fire during a grab-pan, so check the
+        // right-edge threshold here too or scroll-paginated grids never auto-load.
+        handleMaybeLoadNext();
+    };
+    var handleMouseUp = function () {
+        var el = scrollRef.current;
+        grabbing.current = false;
+        if (el && props.horizontalScroll) {
+            el.style.cursor = "grab";
+            el.style.removeProperty("user-select");
+        }
+        // INFO: defer clearing so the click handler can suppress a pan-release click
+        setTimeout(function () { return setDragging(false); }, 150);
+    };
+    // ─── drag & drop between cards ──────────────────────────────────────────────
+    var handleDragStart = function (e, id) {
+        e.dataTransfer.setData("itemId", id);
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+    };
+    var handleDrop = function (e, id) {
+        e.preventDefault();
+        var dragId = e.dataTransfer.getData("itemId");
+        if (props.onDropData)
+            props.onDropData(dragId, id);
+    };
+    var handleClickData = function (id, e) {
+        // INFO: cmd/ctrl-click never reaches here — Link stops propagation and opens
+        // the new tab itself, so this only ever runs for a plain click.
+        e.preventDefault();
+        e.stopPropagation();
+        // INFO: a grab-to-pan release must not register as a card click
+        if (props.onClickData && !dragging)
+            props.onClickData(id);
+    };
+    // ─── which items are visible for the current page ───────────────────────────
+    var handleGetVisibleData = function () {
+        var _a, _b;
+        var limit = (_a = props.limit) !== null && _a !== void 0 ? _a : defaultLimit;
+        if (props.paginationType === "cursor" ||
+            props.paginationType === "scroll") {
+            var minIndex_1 = ((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) * limit;
+            return props.data
+                .map(function (item, index) { return ({ item: item, index: index }); })
+                .filter(function (_a) {
+                var index = _a.index;
+                if (props.paginationType === "scroll")
+                    return true;
+                return index >= minIndex_1 && index < minIndex_1 + limit;
+            });
+        }
+        return props.data.map(function (item, index) { return ({ item: item, index: index }); });
+    };
+    var renderTags = function (item) {
+        if (!item.tags || item.tags.length === 0)
+            return null;
+        return (react_1.default.createElement("div", { className: "mb-2 flex flex-wrap gap-1" }, item.tags.map(function (tag, i) { return (react_1.default.createElement(tag_1.Tag, { key: "".concat(tag, "-").concat(i), tagText: tag, size: "small", variant: "flat", color: "primary", rounded: "md" })); })));
+    };
+    var renderCardInner = function (item) {
+        var _a, _b;
+        var customGridItem = (_a = props.customGridItems) === null || _a === void 0 ? void 0 : _a[item.id];
+        if (customGridItem)
+            return customGridItem;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            item.imageUrl && (react_1.default.createElement("div", { className: "relative overflow-hidden" },
+                item.ribbonText ? (react_1.default.createElement("div", { className: "absolute top-5 left-[12%] -translate-x-1/2 w-full bg-primary-500 text-white text-xs font-bold p-2 text-center -rotate-45" },
+                    react_1.default.createElement("span", null, item.ribbonText))) : ((_b = props.renderImgRibbon) === null || _b === void 0 ? void 0 : _b.call(props, item.id)),
+                react_1.default.createElement("img", { src: item.imageUrl, alt: "", draggable: false, className: "h-48 w-full ".concat(imgClass) }))),
+            item.imageElement && react_1.default.createElement("div", null, item.imageElement),
+            react_1.default.createElement("div", { className: "flex flex-grow flex-col space-y-1 p-4" },
+                renderTags(item),
+                react_1.default.createElement("h3", { className: "text-base font-bold ".concat(titleColor) }, item.title),
+                react_1.default.createElement("div", { className: "text-sm ".concat(textColor, " break-words whitespace-pre-line") }, typeof item.description === "string"
+                    ? item.description.substring(0, 350)
+                    : item.description),
+                item.extra && item.extra)));
+    };
+    var renderCard = function (item, index) {
+        var _a, _b, _c, _d;
+        var isSelected = (_a = props.selectedItemsId) === null || _a === void 0 ? void 0 : _a.includes(item.id);
+        var clickable = !!(props.newTabUrl || props.onClickData);
+        var cardClassName = "flex flex-col overflow-hidden rounded-2xl border shadow-sm transition-shadow hover:shadow-md ".concat(borderColor, " ").concat(bg, " ").concat(clickable ? "cursor-pointer" : "");
+        // INFO: the card is overflow-hidden so rounded-2xl clips the image, which zeroes its
+        // automatic minimum size as a flex item — without an explicit width and shrink-0 every
+        // card collapses to fit the scroll port and the horizontal row becomes unscrollable.
+        // A fixed width (not min-w) keeps every card the same size regardless of description
+        // length, since descriptions wrap rather than truncate.
+        if (props.horizontalScroll)
+            cardClassName += " ".concat((_b = props.cardWidth) !== null && _b !== void 0 ? _b : "w-72", " shrink-0");
+        if (props.itemClassName)
+            cardClassName += " ".concat(props.itemClassName);
+        if (isSelected && props.selectedItemClassName)
+            cardClassName += " ".concat(props.selectedItemClassName);
+        var cardBody = (react_1.default.createElement("div", { draggable: props.draggable, onDragStart: function (e) { return handleDragStart(e, item.id); }, onDragOver: handleDragOver, onDrop: props.droppable ? function (e) { return handleDrop(e, item.id); } : undefined, className: "flex h-full flex-col" }, renderCardInner(item)));
+        return (react_1.default.createElement("li", { key: (_c = item.id) !== null && _c !== void 0 ? _c : index, "data-testid": "new-grid-card", "data-dtw-record-id": item.id, className: cardClassName, onClick: function (e) { return handleClickData(item.id, e); } }, props.newTabUrl ? (react_1.default.createElement(link_1.Link, { href: props.newTabUrl + item.id + ((_d = props.addNewTabUrl) !== null && _d !== void 0 ? _d : ""), className: "block h-full w-full", linkType: props.linkType, custom: props.custom }, cardBody)) : (cardBody)));
+    };
+    // ─── loading state ──────────────────────────────────────────────────────────
+    var renderLoading = function () { return (react_1.default.createElement("div", { className: "my-10 text-center" },
+        react_1.default.createElement(loading_1.Loading, null),
+        react_1.default.createElement("p", { className: "mt-5 text-sm ".concat(textColor) }, "Loading..."))); };
+    // ─── empty state ────────────────────────────────────────────────────────────
+    var renderEmpty = function () {
+        var _a;
+        return (react_1.default.createElement("div", { className: "my-10" },
+            react_1.default.createElement(emptyState_1.EmptyState, { darkMode: props.darkMode, text: (_a = props.emptyTitle) !== null && _a !== void 0 ? _a : "There is no data available at the moment", icon: react_1.default.createElement(outline_1.InformationCircleIcon, { className: "h-10 text-gray-600" }) })));
+    };
+    var gridColClassName = "gap-6 ".concat(props.horizontalScroll
+        ? "flex flex-row w-full cursor-grab overflow-x-auto overflow-y-hidden overscroll-x-contain pb-2 chat-scrollbar"
+        : "grid");
+    if (props.gridColClassName)
+        gridColClassName += " ".concat(props.gridColClassName);
+    else if (!props.horizontalScroll)
+        gridColClassName += " sm:grid-cols-2 lg:grid-cols-3";
+    var visibleData = handleGetVisibleData();
+    var renderGrid = function () { return (react_1.default.createElement("ul", { ref: scrollRef, "data-testid": "new-grid-scroll-container", className: gridColClassName, onScroll: handleScroll, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp },
+        visibleData.map(function (_a) {
+            var item = _a.item, index = _a.index;
+            return renderCard(item, index);
+        }),
+        infinityLoading && (react_1.default.createElement("li", { className: "flex flex-row flex-wrap items-center" },
+            react_1.default.createElement(loading_1.Loading, null))))); };
+    // INFO: loading and empty render inside the wrapper, not as early returns, so
+    // the pagination footer always stays mounted. An empty page on a non-zero
+    // pageIndex would otherwise strip every control and leave no way back.
+    return (react_1.default.createElement("div", { "data-testid": "new-grid-root", className: "w-full min-w-0 ".concat((_b = props.className) !== null && _b !== void 0 ? _b : "") },
+        props.loading
+            ? renderLoading()
+            : props.data.length === 0
+                ? renderEmpty()
+                : renderGrid(),
+        react_1.default.createElement(newPagination_1.NewPagination, { paginationType: props.paginationType, pageIndex: props.pageIndex, limit: (_c = props.limit) !== null && _c !== void 0 ? _c : defaultLimit, size: props.size, cursor: props.cursor, resultCount: props.data.length, customPaginationSize: props.customPaginationSize, hidePagination: props.hidePagination, darkMode: props.darkMode, darkModeBg: props.darkModeBg, handleUpdatePageIndex: props.handleUpdatePageIndex })));
+};
+exports.NewGrid = NewGrid;
+exports.default = exports.NewGrid;
+//# sourceMappingURL=index.js.map

package/lib/components/display/newGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/display/newGrid/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/display/newKanban/index.d.ts

@@ -8,12 +8,18 @@ export interface NewKanbanColumn {
     color?: string;
     cards: NewKanbanCard[];
 }
-export interface NewKanbanProps {
-    columns?: NewKanbanColumn[];
-    data?: NewKanbanCard[];
+type NewKanbanSource = {
+    columns: NewKanbanColumn[];
+    data?: undefined;
+    groupId?: undefined;
+} | {
+    columns?: undefined;
+    data: NewKanbanCard[];
+    groupId: string;
+};
+interface NewKanbanBaseProps {
     groupBy?: string[];
     groupLabel?: string[];
-    groupId?: string;
     loading?: boolean;
     mobileView?: boolean;
     draggable?: boolean;
@@ -34,5 +40,6 @@ export interface NewKanbanProps {
     darkModeBg?: string;
     className?: string;
 }
+export type NewKanbanProps = NewKanbanBaseProps & NewKanbanSource;
 export declare const NewKanban: (props: NewKanbanProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/display/newKanban/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/newKanban/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EACZ,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAE5B,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;IAE7C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IAEV,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,eAAe,KAAK,SAAS,CAAC;IACzE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuED,eAAO,MAAM,SAAS,UAAW,cAAc,sBA6X9C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/newKanban/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EACZ,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAKD,KAAK,eAAe,GAChB;IAAE,OAAO,EAAE,eAAe,EAAE,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,GACrE;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,aAAa,EAAE,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,UAAU,kBAAkB;IAE1B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,EAAE,CAAC;IAE7C,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,OAAO,CAAC;IAIrB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,KACf,IAAI,CAAC;IAEV,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,eAAe,KAAK,SAAS,CAAC;IACzE,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,eAAe,CAAC;AAoElE,eAAO,MAAM,SAAS,UAAW,cAAc,sBA+a9C,CAAC"}

package/lib/components/display/newKanban/index.js

@@ -28,13 +28,15 @@ var react_1 = __importStar(require("react"));
 var tag_1 = require("../tag");
 var UNASSIGNED_ID = "data-unassigned";
 var useStableColumns = function (props) {
-    var _a, _b, _c;
+    var _a;
     if (props.columns)
         return props.columns;
     if (!props.data)
         return [];
-    var key = (_c = (_a = props.groupId) !== null && _a !== void 0 ? _a : (_b = props.groupBy) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : "";
+    var key = (_a = props.groupId) !== null && _a !== void 0 ? _a : "";
     var groups = {};
+    if (props.nullColumn)
+        groups[UNASSIGNED_ID] = { cards: [], label: "Unassigned" };
     // INFO: groupCluster mode — merge multiple group values into visual columns
     if (props.groupCluster && props.groupCluster.length > 0) {
         props.groupCluster.forEach(function (cluster) {
@@ -74,10 +76,6 @@ var useStableColumns = function (props) {
                 groups[colValue] = { cards: [], label: label };
             });
         }
-        // INFO: if nullColumn is enabled, pre-create the unassigned bucket
-        if (props.nullColumn) {
-            groups[UNASSIGNED_ID] = { cards: [], label: "Unassigned" };
-        }
         props.data.forEach(function (card) {
             var rawValue = card[key];
             var bucket = rawValue ? String(rawValue) : UNASSIGNED_ID;
@@ -98,9 +96,13 @@ var useStableColumns = function (props) {
     });
 };
 var NewKanban = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     var columns = useStableColumns(props);
-    var _j = (0, react_1.useState)((_b = (_a = columns[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ""), activeTab = _j[0], setActiveTab = _j[1];
+    // INFO: match the solid dark surface used by Grid/List/NewList/DetailList
+    // (bg-gray-900) instead of a translucent white overlay
+    var darkSurface = (_a = props.darkModeBg) !== null && _a !== void 0 ? _a : "bg-gray-900";
+    var _k = (0, react_1.useState)((_c = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : ""), activeTab = _k[0], setActiveTab = _k[1];
+    var _l = (0, react_1.useState)(), heldListHeight = _l[0], setHeldListHeight = _l[1];
     // INFO: columns are empty on the first render while the list is still
     // loading, so the initial tab has to be re-pointed once data arrives
     (0, react_1.useEffect)(function () {
@@ -121,10 +123,10 @@ var NewKanban = function (props) {
     // INFO: when groupCluster is set, disable drag-and-drop (same as legacy Kanban)
     var hasCluster = props.groupCluster && props.groupCluster.length > 0;
     var isDraggable = props.draggable && !hasCluster;
-    var isDroppable = ((_c = props.droppable) !== null && _c !== void 0 ? _c : props.draggable) && !hasCluster;
+    var isDroppable = ((_d = props.droppable) !== null && _d !== void 0 ? _d : props.draggable) && !hasCluster;
     var imgClass = props.imgContain ? "object-contain" : "object-cover";
     var defaultRenderCard = function (card) { return (react_1.default.createElement("div", { className: "overflow-hidden rounded-xl border shadow-sm transition-shadow hover:shadow-md ".concat(props.darkMode
-            ? "border-gray-700 bg-white/10"
+            ? "border-gray-700 ".concat(darkSurface)
             : "border-gray-100 bg-white"), onClick: function () { var _a; return (_a = props.onClickData) === null || _a === void 0 ? void 0 : _a.call(props, card.id); }, style: { cursor: props.onClickData ? "pointer" : undefined } },
         card.imageElement
             ? card.imageElement
@@ -133,13 +135,40 @@ var NewKanban = function (props) {
             react_1.default.createElement("p", { className: "text-sm font-medium ".concat(props.darkMode ? "text-gray-100" : "text-gray-800") }, card.title),
             card.description && (react_1.default.createElement("div", { className: "mt-0.5 text-xs ".concat(props.darkMode ? "text-gray-400" : "text-gray-500") }, card.description)),
             card.tags && card.tags.length > 0 && (react_1.default.createElement("div", { className: "mt-2 flex flex-wrap gap-1" }, card.tags.map(function (tag) { return (react_1.default.createElement("span", { key: tag, className: "rounded-full bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700" }, tag)); })))))); };
-    var renderCard = (_d = props.renderCard) !== null && _d !== void 0 ? _d : defaultRenderCard;
+    var renderCard = (_e = props.renderCard) !== null && _e !== void 0 ? _e : defaultRenderCard;
     // ─── drag state ─────────────────────────────────────────────────────────────
-    var _k = (0, react_1.useState)(null), dragCardId = _k[0], setDragCardId = _k[1];
-    var _l = (0, react_1.useState)(null), dragFromColId = _l[0], setDragFromColId = _l[1];
-    var _m = (0, react_1.useState)(null), dragOverColId = _m[0], setDragOverColId = _m[1];
-    var _o = (0, react_1.useState)(null), pointerGhost = _o[0], setPointerGhost = _o[1];
+    var _m = (0, react_1.useState)(null), dragCardId = _m[0], setDragCardId = _m[1];
+    var _o = (0, react_1.useState)(null), dragFromColId = _o[0], setDragFromColId = _o[1];
+    var _p = (0, react_1.useState)(null), dragOverColId = _p[0], setDragOverColId = _p[1];
+    var _q = (0, react_1.useState)(null), pointerGhost = _q[0], setPointerGhost = _q[1];
     var tabsRef = (0, react_1.useRef)(null);
+    var cardListRef = (0, react_1.useRef)(null);
+    // INFO: a different set of cards (filter, search, page) is a new list, so the
+    // held height goes — a card moving between columns keeps the same set
+    var cardIdsKey = columns
+        .flatMap(function (eachColumn) { return eachColumn.cards.map(function (eachCard) { return eachCard.id; }); })
+        .sort()
+        .join("|");
+    (0, react_1.useEffect)(function () {
+        setHeldListHeight(undefined);
+    }, [cardIdsKey]);
+    // INFO: keeps the mobile card list at least as tall as before the switch, so a
+    // shorter column cannot shrink the page and jump the scroll position
+    var handleSelectTab = function (colId) {
+        var _a, _b;
+        var height = (_b = (_a = cardListRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        setHeldListHeight(function (prev) { return Math.max(prev !== null && prev !== void 0 ? prev : 0, height); });
+        setActiveTab(colId);
+    };
+    // INFO: without nullColumn the group field is required, so its automatic
+    // Unassigned column only shows cards — dropping there would clear the field
+    var handleCanDropOn = function (colId) {
+        return colId !== UNASSIGNED_ID || !!props.nullColumn;
+    };
+    var handleEmitMove = function (cardId, fromColId, toColId) {
+        var _a;
+        return (_a = props.onUpdateData) === null || _a === void 0 ? void 0 : _a.call(props, cardId, fromColId === UNASSIGNED_ID ? "" : fromColId, toColId === UNASSIGNED_ID ? "" : toColId);
+    };
     // ─── desktop HTML5 drag handlers ───────────────────────────────────────────
     var handleDragStart = function (e, cardId, fromCol) {
         if (!isDraggable)
@@ -150,20 +179,19 @@ var NewKanban = function (props) {
         setDragFromColId(fromCol);
     };
     var handleDragOver = function (e, overColId) {
-        if (!isDroppable)
+        if (!isDroppable || !handleCanDropOn(overColId))
             return;
         e.preventDefault();
         e.dataTransfer.dropEffect = "move";
         setDragOverColId(overColId);
     };
     var handleDrop = function (e, toColId) {
-        var _a;
-        if (!isDroppable)
+        if (!isDroppable || !handleCanDropOn(toColId))
             return;
         e.preventDefault();
         var cardId = e.dataTransfer.getData("text/plain") || dragCardId;
         if (cardId && dragFromColId && dragFromColId !== toColId) {
-            (_a = props.onUpdateData) === null || _a === void 0 ? void 0 : _a.call(props, cardId, dragFromColId, toColId);
+            handleEmitMove(cardId, dragFromColId, toColId);
         }
         setDragCardId(null);
         setDragFromColId(null);
@@ -199,7 +227,8 @@ var NewKanban = function (props) {
                     e.clientX <= r.right &&
                     e.clientY >= r.top &&
                     e.clientY <= r.bottom) {
-                    setDragOverColId((_a = btn.dataset.colId) !== null && _a !== void 0 ? _a : null);
+                    var colId = (_a = btn.dataset.colId) !== null && _a !== void 0 ? _a : "";
+                    setDragOverColId(colId && handleCanDropOn(colId) ? colId : null);
                     return;
                 }
             }
@@ -207,13 +236,12 @@ var NewKanban = function (props) {
         setDragOverColId(null);
     };
     var handlePointerUp = function () {
-        var _a;
         if (dragCardId &&
             dragFromColId &&
             dragOverColId &&
             dragFromColId !== dragOverColId) {
-            (_a = props.onUpdateData) === null || _a === void 0 ? void 0 : _a.call(props, dragCardId, dragFromColId, dragOverColId);
-            setActiveTab(dragOverColId);
+            handleEmitMove(dragCardId, dragFromColId, dragOverColId);
+            handleSelectTab(dragOverColId);
         }
         setDragCardId(null);
         setDragFromColId(null);
@@ -222,7 +250,7 @@ var NewKanban = function (props) {
     };
     // ─── loading state ──────────────────────────────────────────────────────────
     if (props.loading) {
-        return (react_1.default.createElement("div", { className: "text-center py-10 ".concat((_e = props.className) !== null && _e !== void 0 ? _e : "") },
+        return (react_1.default.createElement("div", { className: "text-center py-10 ".concat((_f = props.className) !== null && _f !== void 0 ? _f : "") },
             react_1.default.createElement("p", { className: "text-sm text-gray-500" }, "Loading...")));
     }
     // ─── cluster info banner ────────────────────────────────────────────────────
@@ -245,19 +273,19 @@ var NewKanban = function (props) {
             return null;
         return (react_1.default.createElement("div", { className: "mt-1 flex flex-wrap gap-1" }, values.map(function (v, i) { return (react_1.default.createElement(tag_1.Tag, { key: i, tagText: v, size: "small", color: "dark", variant: "flat", className: "mx-0 bg-gray-200", rounded: "md" })); })));
     };
-    var colWidth = (_f = props.columnWidth) !== null && _f !== void 0 ? _f : "min-w-48 sm:min-w-64";
+    var colWidth = (_g = props.columnWidth) !== null && _g !== void 0 ? _g : "min-w-48 sm:min-w-64";
     // ─── mobile view ────────────────────────────────────────────────────────────
     if (props.mobileView) {
         var activeCol_1 = columns.find(function (c) { return c.id === activeTab; });
         return (react_1.default.createElement("div", { 
             // INFO: className targets the desktop column row (DataTemplate passes
             // inline-flex); the stacked phone layout must stay a block
-            className: "relative w-full pb-16", onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp },
-            props.alertMessage && (react_1.default.createElement(tag_1.Tag, { tagText: props.alertMessage, className: "mb-3" })),
+            className: "relative w-full min-w-0 pb-16", onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp },
+            props.alertMessage && (react_1.default.createElement(tag_1.Tag, { tagText: props.alertMessage, size: "small", className: "mb-3" })),
             renderClusterBanner(),
-            react_1.default.createElement("div", { ref: tabsRef, className: "mb-4 flex gap-1 overflow-x-auto rounded-xl p-1 ".concat(props.darkMode ? "bg-white/10" : "bg-gray-100") }, columns.map(function (col) { return (react_1.default.createElement("button", { key: col.id, type: "button", "data-col-id": col.id, onClick: function () { return setActiveTab(col.id); }, className: "flex flex-1 flex-shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-lg py-2 px-2 text-xs font-semibold transition-all ".concat(activeTab === col.id
+            react_1.default.createElement("div", { ref: tabsRef, className: "mb-4 flex gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain rounded-xl p-1 ".concat(props.darkMode ? "bg-gray-800" : "bg-gray-100") }, columns.map(function (col) { return (react_1.default.createElement("button", { key: col.id, type: "button", "data-col-id": col.id, onClick: function () { return handleSelectTab(col.id); }, className: "flex flex-1 flex-shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-lg py-2 px-2 text-xs font-semibold transition-all ".concat(activeTab === col.id
                     ? props.darkMode
-                        ? "bg-white/20 text-white shadow-sm"
+                        ? "bg-gray-700 text-white shadow-sm"
                         : "bg-white text-gray-900 shadow-sm"
                     : props.darkMode
                         ? "text-gray-400 hover:text-gray-200"
@@ -268,37 +296,41 @@ var NewKanban = function (props) {
                             ? "bg-primary-500/30 text-primary-200"
                             : "bg-primary-100 text-primary-600"
                         : props.darkMode
-                            ? "bg-white/10 text-gray-300"
+                            ? "bg-gray-700 text-gray-300"
                             : "bg-gray-200 text-gray-500") }, col.cards.length))); })),
             isDraggable && (react_1.default.createElement("p", { className: "mb-2 text-center text-xs text-gray-400" }, "Long-press a card and drag onto a column tab to move it.")),
-            react_1.default.createElement("div", { className: "space-y-2" }, activeCol_1 === null || activeCol_1 === void 0 ? void 0 : activeCol_1.cards.map(function (card) { return (react_1.default.createElement("div", { key: card.id, onPointerDown: function (e) { return handlePointerDown(e, card.id, activeCol_1.id); }, onClick: function () { var _a; return (_a = props.onClickData) === null || _a === void 0 ? void 0 : _a.call(props, card.id); }, className: "".concat(dragCardId === card.id ? "opacity-40" : "", " touch-none") }, renderCard(card, activeCol_1))); })),
+            react_1.default.createElement("div", { ref: cardListRef, className: "space-y-2", style: { minHeight: heldListHeight } }, activeCol_1 === null || activeCol_1 === void 0 ? void 0 : activeCol_1.cards.map(function (card) { return (react_1.default.createElement("div", { key: card.id, "data-dtw-record-id": card.id, onPointerDown: function (e) { return handlePointerDown(e, card.id, activeCol_1.id); }, onClick: function () { var _a; return (_a = props.onClickData) === null || _a === void 0 ? void 0 : _a.call(props, card.id); }, className: "".concat(dragCardId === card.id ? "opacity-40" : "", " touch-none") }, renderCard(card, activeCol_1))); })),
             pointerGhost && dragCardId && (react_1.default.createElement("div", { className: "pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-1/2 opacity-80 shadow-2xl", style: { left: pointerGhost.x, top: pointerGhost.y, width: 240 } }, (function () {
                 var card = columns
                     .flatMap(function (c) { return c.cards; })
                     .find(function (c) { return c.id === dragCardId; });
                 return card ? renderCard(card, activeCol_1) : null;
             })())),
-            props.onAddCard && (react_1.default.createElement("button", { type: "button", onClick: function () { var _a; return (_a = props.onAddCard) === null || _a === void 0 ? void 0 : _a.call(props, activeTab); }, className: "absolute bottom-2 right-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-transform hover:scale-105", "aria-label": "Add card" }, (_g = props.fabIcon) !== null && _g !== void 0 ? _g : react_1.default.createElement("span", { className: "text-xl" }, "+")))));
+            props.onAddCard && (react_1.default.createElement("button", { type: "button", onClick: function () { var _a; return (_a = props.onAddCard) === null || _a === void 0 ? void 0 : _a.call(props, activeTab); }, className: "absolute bottom-2 right-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary-500 text-white shadow-lg transition-transform hover:scale-105", "aria-label": "Add card" }, (_h = props.fabIcon) !== null && _h !== void 0 ? _h : react_1.default.createElement("span", { className: "text-xl" }, "+")))));
     }
     // ─── desktop view ───────────────────────────────────────────────────────────
-    return (react_1.default.createElement("div", null,
-        props.alertMessage && (react_1.default.createElement(tag_1.Tag, { tagText: props.alertMessage, className: "my-2" })),
+    // INFO: min-w-0 so a flex parent cannot stretch to the board's full width —
+    // the board scrolls inside instead of widening the page on a phone
+    return (react_1.default.createElement("div", { className: "w-full min-w-0" },
+        props.alertMessage && (react_1.default.createElement(tag_1.Tag, { tagText: props.alertMessage, size: "small", className: "my-2" })),
         renderClusterBanner(),
-        react_1.default.createElement("div", { className: "flex w-full gap-4 overflow-x-auto pb-2 ".concat((_h = props.className) !== null && _h !== void 0 ? _h : "") }, columns.map(function (col) { return (react_1.default.createElement("div", { key: col.id, className: "".concat(colWidth, " flex-shrink-0 rounded-lg p-2 transition-colors ").concat(props.darkMode
-                ? col.id === UNASSIGNED_ID
-                    ? "bg-white/5"
-                    : "bg-white/10"
+        react_1.default.createElement("div", { className: "flex w-full gap-4 overflow-x-auto overflow-y-hidden overscroll-x-contain pb-2 ".concat((_j = props.className) !== null && _j !== void 0 ? _j : "") }, columns.map(function (col) { return (react_1.default.createElement("div", { key: col.id, "data-testid": "new-kanban-column-".concat(col.id), className: "".concat(colWidth, " flex-shrink-0 rounded-lg p-2 transition-colors ").concat(props.darkMode
+                ? "border border-gray-700"
                 : col.id === UNASSIGNED_ID
                     ? "bg-gray-200"
-                    : "bg-gray-100", " ").concat(dragOverColId === col.id ? "bg-primary-50 ring-2 ring-primary-300" : ""), onDragOver: isDroppable ? function (e) { return handleDragOver(e, col.id); } : undefined, onDrop: isDroppable ? function (e) { return handleDrop(e, col.id); } : undefined },
+                    : "bg-gray-100", " ").concat(
+            // INFO: opaque so cards sliding underneath do not show through
+            props.nullColumn && col.id === UNASSIGNED_ID
+                ? "sticky left-0 z-10 shadow-md ".concat(props.darkMode ? darkSurface : "")
+                : "", " ").concat(dragOverColId === col.id ? "bg-primary-50 ring-2 ring-primary-300" : ""), onDragOver: isDroppable ? function (e) { return handleDragOver(e, col.id); } : undefined, onDrop: isDroppable ? function (e) { return handleDrop(e, col.id); } : undefined },
             react_1.default.createElement("div", { className: "sticky top-0 flex flex-col pt-2 pb-4" },
-                react_1.default.createElement("h2", { className: "text-lg font-bold" },
+                react_1.default.createElement("h2", { className: "text-lg font-bold ".concat(props.darkMode ? "text-white" : "") },
                     col.title,
                     " (",
                     col.cards.length,
                     ")"),
                 renderClusterTags(col.id)),
-            react_1.default.createElement("div", { className: "space-y-2" }, col.cards.map(function (card) { return (react_1.default.createElement("div", { key: card.id, draggable: !!isDraggable, onDragStart: function (e) { return handleDragStart(e, card.id, col.id); }, onDragEnd: handleDragEnd, onClick: function () { var _a; return (_a = props.onClickData) === null || _a === void 0 ? void 0 : _a.call(props, card.id); }, className: "".concat(dragCardId === card.id ? "opacity-40" : "", " ").concat(isDraggable ? "cursor-grab active:cursor-grabbing" : "", " ").concat(props.onClickData ? "cursor-pointer" : "") }, renderCard(card, col))); })))); }))));
+            react_1.default.createElement("div", { className: "space-y-2" }, col.cards.map(function (card) { return (react_1.default.createElement("div", { key: card.id, "data-dtw-record-id": card.id, draggable: !!isDraggable, onDragStart: function (e) { return handleDragStart(e, card.id, col.id); }, onDragEnd: handleDragEnd, onClick: function () { var _a; return (_a = props.onClickData) === null || _a === void 0 ? void 0 : _a.call(props, card.id); }, className: "".concat(dragCardId === card.id ? "opacity-40" : "", " ").concat(isDraggable ? "cursor-grab active:cursor-grabbing" : "", " ").concat(props.onClickData ? "cursor-pointer" : "") }, renderCard(card, col))); })))); }))));
 };
 exports.NewKanban = NewKanban;
 //# sourceMappingURL=index.js.map