pixelize-design-library 2.2.197 → 2.2.198

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -79,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: { paddingBottom: KANBAN_CARD_GAP } },
+        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 () {
@@ -248,8 +248,8 @@ var KanbanBoard = function (_a) {
             return changed ? pruned : prev;
         });
     }, [columns]);
-    // AccountCard floor (80px minHeight) + KANBAN_CARD_GAP — kept tight so unmeasured rows don't reserve excess space.
-    var DEFAULT_ITEM_HEIGHT = 80 + KANBAN_CARD_GAP;
+    // 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);
@@ -265,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;
+        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP;
     }, [sizes]);
     // Calculate container height
     (0, react_1.useEffect)(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.197",
+  "version": "2.2.198",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",