pixelize-design-library 2.2.197 → 2.2.199

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PaymentCardProps } from "./PaymentCardProps";
-declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, }: PaymentCardProps) => React.JSX.Element;
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, isRenewal, }: PaymentCardProps) => React.JSX.Element;
 export default PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -52,9 +52,9 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     };
 };
 var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d;
+    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.isRenewal, isRenewal = _e === void 0 ? false : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _e.badgeText, badgeColor = _e.badgeColor, buttonColor = _e.buttonColor, buttonColor50 = _e.buttonColor50;
+    var _f = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _f.badgeText, badgeColor = _f.badgeColor, buttonColor = _f.buttonColor, buttonColor50 = _f.buttonColor50;
     var variantStyles = plan.buttonVariant === "outline"
         ? {
             borderColor: buttonColor,
@@ -93,7 +93,7 @@ var PaymentCard = function (_a) {
                         react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
                 plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.green[800], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
                 react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
-            !isActive && plan.buttonText && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
+            ((!isActive && plan.buttonText) || isRenewal) && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
             react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
                 react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
                 react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -7,6 +7,7 @@ export type PaymentCardProps = {
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
     buttonLoading?: number;
     isLoading?: boolean;
+    isRenewal?: boolean;
 };
 export type Plan = {
     plan_id: number;

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.199",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",