pixelize-design-library 2.2.196 → 2.2.198

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -70,6 +70,7 @@ var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/Overf
 var Button_1 = __importDefault(require("../Button/Button"));
 /** Narrow rail width when a column is horizontally collapsed. */
 var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+var KANBAN_CARD_GAP = 12;
 var KanbanRow = react_1.default.memo(function (_a) {
     var index = _a.index, style = _a.style, data = _a.data;
     var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
@@ -78,8 +79,8 @@ var KanbanRow = react_1.default.memo(function (_a) {
         return react_1.default.createElement("div", { style: style });
     }
     return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
-            react_1.default.createElement("div", { style: { marginBottom: 12 } },
+        react_1.default.createElement("div", { style: { paddingBottom: KANBAN_CARD_GAP } },
+            react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
                     var _a;
                     return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
@@ -247,7 +248,8 @@ var KanbanBoard = function (_a) {
             return changed ? pruned : prev;
         });
     }, [columns]);
-    var DEFAULT_ITEM_HEIGHT = 130;
+    // AccountCard's minHeight floor — kept tight so unmeasured rows don't reserve excess space; KANBAN_CARD_GAP is added below.
+    var DEFAULT_ITEM_HEIGHT = 80;
     // update height for an item
     var setSize = (0, react_1.useCallback)(function (index, size, colId) {
         var key = "".concat(colId, "-").concat(index);
@@ -263,7 +265,7 @@ var KanbanBoard = function (_a) {
     }, []);
     var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
         var key = "".concat(colId, "-").concat(index);
-        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + 12;
+        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP;
     }, [sizes]);
     // Calculate container height
     (0, react_1.useEffect)(function () {
@@ -360,7 +362,7 @@ var KanbanBoard = function (_a) {
     var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
             var _a;
             var item = column.items[rubric.source.index];
-            return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }), (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : (react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
+            return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, paddingBottom: KANBAN_CARD_GAP }) }), (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : (react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
                     return toggleExpand(item.id, colId, rubric.source.index);
                 }, isDeletable: canDelete }))));
         } }, function (provided, snapshot) {
@@ -439,7 +441,7 @@ var KanbanBoard = function (_a) {
                             (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
                             return getItemSize(index, column.items, colId);
                         }, width: "100%", itemData: __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId }) }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
-                        column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
+                        column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { paddingBottom: KANBAN_CARD_GAP } },
                             react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
                                 var _a;
                                 return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -38,19 +38,26 @@ var MeasuredItem = function (_a) {
     var index = _a.index, setSize = _a.setSize, children = _a.children;
     var ref = (0, react_1.useRef)(null);
     var prevHeight = (0, react_1.useRef)(null);
+    // Stable ref to the latest setSize so we don't tear down the ResizeObserver on every render.
+    var setSizeRef = (0, react_1.useRef)(setSize);
+    setSizeRef.current = setSize;
+    var indexRef = (0, react_1.useRef)(index);
+    indexRef.current = index;
     var measure = function () {
         if (ref.current) {
-            var height = Math.round(ref.current.getBoundingClientRect().height);
-            if (prevHeight.current !== height) {
+            // offsetHeight is the integer border-box layout height — more reliable than getBoundingClientRect for our purposes.
+            var height = ref.current.offsetHeight;
+            if (height > 0 && prevHeight.current !== height) {
                 prevHeight.current = height;
-                setSize(index, height);
+                setSizeRef.current(indexRef.current, height);
             }
         }
     };
     (0, react_1.useLayoutEffect)(function () {
-        var element = ref.current; // ✅ Capture the current ref value
-        // Initial measure
+        var element = ref.current;
         measure();
+        // A second measure after paint catches any layout that finishes after the synchronous tick (font loads, async CSS, etc).
+        var raf = requestAnimationFrame(measure);
         var ro;
         if (typeof ResizeObserver !== "undefined" && element) {
             ro = new ResizeObserver(function () {
@@ -59,18 +66,24 @@ var MeasuredItem = function (_a) {
             ro.observe(element);
         }
         else {
-            // Fallback for browsers without ResizeObserver
             window.addEventListener("resize", measure);
         }
         return function () {
-            // ✅ Use captured element instead of ref.current
+            cancelAnimationFrame(raf);
             if (ro && element)
                 ro.unobserve(element);
             if (!ro)
                 window.removeEventListener("resize", measure);
         };
+        // Intentionally empty deps — setSize/index are read through refs so the observer is set up exactly once per mount.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [index, setSize]);
+    }, []);
+    // If index changes for the same DOM node (item shuffled), re-report the cached size under the new index.
+    (0, react_1.useEffect)(function () {
+        if (prevHeight.current != null) {
+            setSizeRef.current(indexRef.current, prevHeight.current);
+        }
+    }, [index]);
     return react_1.default.createElement("div", { ref: ref }, children);
 };
 exports.default = MeasuredItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.196",
+  "version": "2.2.198",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",