@snapdragonsnursery/react-components 1.19.2 → 1.19.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.19.2",
+  "version": "1.19.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchModal.jsx

@@ -107,8 +107,8 @@ const ChildSearchModal = ({
       const viewportHeight = window.innerHeight;
       const expectedHeight = viewportHeight * 0.9;
       const expectedContentHeight = expectedHeight - 300;
-      
-      console.log('🔍 Modal Debug:', {
+
+      console.log("🔍 Modal Debug:", {
         modalHeight: rect.height,
         modalTop: rect.top,
         modalBottom: rect.bottom,
@@ -119,15 +119,15 @@ const ChildSearchModal = ({
         loading,
         error,
         modalStyle: modal.style,
-        modalComputedStyle: window.getComputedStyle(modal)
+        modalComputedStyle: window.getComputedStyle(modal),
       });
-      
+
       // Check if modal is overflowing
       if (rect.bottom > window.innerHeight) {
-        console.warn('⚠️ Modal is overflowing bottom of viewport!');
+        console.warn("⚠️ Modal is overflowing bottom of viewport!");
       }
       if (rect.top < 0) {
-        console.warn('⚠️ Modal is overflowing top of viewport!');
+        console.warn("⚠️ Modal is overflowing top of viewport!");
       }
     }
   }, [isOpen, children.length, loading, error]);
@@ -363,14 +363,87 @@ const ChildSearchModal = ({
   };
 
   const formatAge = (years, months) => {
-    if (years && months) {
-      return `${years}y ${months}m`;
-    } else if (years) {
-      return `${years}y`;
-    } else if (months) {
-      return `${months}m`;
+    const numericYears =
+      typeof years === "number" && Number.isFinite(years)
+        ? years
+        : typeof years === "string" && years.trim() !== ""
+        ? Number.parseInt(years, 10)
+        : null;
+    const numericMonths =
+      typeof months === "number" && Number.isFinite(months)
+        ? months
+        : typeof months === "string" && months.trim() !== ""
+        ? Number.parseInt(months, 10)
+        : null;
+
+    let displayYears = numericYears;
+    let displayMonths = numericMonths;
+
+    const normaliseMonths = (yearsValue, monthsValue) => {
+      if (monthsValue === null || Number.isNaN(monthsValue)) return null;
+      if (yearsValue === null || Number.isNaN(yearsValue)) {
+        return {
+          years: Math.floor(monthsValue / 12),
+          months: monthsValue % 12,
+        };
+      }
+
+      const expectedMonthsTotal = yearsValue * 12;
+      let remainder = monthsValue;
+
+      if (remainder >= expectedMonthsTotal) {
+        remainder = remainder - expectedMonthsTotal;
+      }
+
+      if (remainder >= 12) {
+        remainder = remainder % 12;
+      }
+
+      if (remainder < 0) {
+        remainder = 0;
+      }
+
+      return {
+        years: yearsValue,
+        months: remainder,
+      };
+    };
+
+    if (displayMonths !== null && !Number.isNaN(displayMonths)) {
+      const normalised = normaliseMonths(
+        displayYears ?? null,
+        displayMonths ?? null
+      );
+
+      if (normalised) {
+        displayYears =
+          normalised.years !== undefined ? normalised.years : displayYears;
+        displayMonths = normalised.months ?? null;
+      }
     }
-    return "";
+
+    if (
+      (displayYears === null || Number.isNaN(displayYears)) &&
+      displayMonths !== null &&
+      displayMonths >= 12
+    ) {
+      displayYears = Math.floor(displayMonths / 12);
+      displayMonths = displayMonths % 12;
+    }
+
+    const parts = [];
+    if (displayYears !== null && !Number.isNaN(displayYears)) {
+      parts.push(`${displayYears}y`);
+    }
+    if (
+      displayMonths !== null &&
+      !Number.isNaN(displayMonths) &&
+      displayMonths > 0
+    ) {
+      parts.push(`${displayMonths}m`);
+    }
+
+    return parts.join(" ");
   };
 
   const formatDate = (dateString) => {
@@ -381,16 +454,19 @@ const ChildSearchModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 overflow-hidden" style={{ zIndex }}>
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 overflow-hidden"
+      style={{ zIndex }}
+    >
       <div
         ref={modalRef}
         className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full flex flex-col overflow-hidden ${className}`}
         style={{
           maxHeight: `${maxHeightVh}vh`,
           height: `${maxHeightVh}vh`,
-          display: 'flex',
-          flexDirection: 'column',
-          position: 'relative'
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
         }}
       >
         {/* Header */}
@@ -688,20 +764,20 @@ const ChildSearchModal = ({
         </div>
 
         {/* Content */}
-        <div 
+        <div
           className="overflow-hidden"
-          style={{ 
-            height: 'calc(90vh - 300px)',
-            maxHeight: 'calc(90vh - 300px)',
-            overflow: 'hidden',
-            flex: 'none',
-            position: 'relative'
+          style={{
+            height: "calc(90vh - 300px)",
+            maxHeight: "calc(90vh - 300px)",
+            overflow: "hidden",
+            flex: "none",
+            position: "relative",
           }}
           ref={(el) => {
             if (el) {
               const rect = el.getBoundingClientRect();
               const computedStyle = window.getComputedStyle(el);
-              console.log('📦 Content Area Debug:', {
+              console.log("📦 Content Area Debug:", {
                 contentHeight: rect.height,
                 contentTop: rect.top,
                 contentBottom: rect.bottom,
@@ -712,7 +788,7 @@ const ChildSearchModal = ({
                 height: computedStyle.height,
                 overflow: computedStyle.overflow,
                 styleMaxHeight: el.style.maxHeight,
-                styleHeight: el.style.height
+                styleHeight: el.style.height,
               });
             }
           }}
@@ -732,18 +808,18 @@ const ChildSearchModal = ({
           )}
 
           {!loading && !error && (
-            <div 
+            <div
               className="overflow-y-auto h-full max-h-full"
-              style={{ 
-                maxHeight: '100% !important',
-                height: '100% !important',
-                overflowY: 'auto !important'
+              style={{
+                maxHeight: "100% !important",
+                height: "100% !important",
+                overflowY: "auto !important",
               }}
               ref={(el) => {
                 if (el) {
                   const rect = el.getBoundingClientRect();
                   const computedStyle = window.getComputedStyle(el);
-                  console.log('📜 Scrollable Content Debug:', {
+                  console.log("📜 Scrollable Content Debug:", {
                     scrollHeight: el.scrollHeight,
                     clientHeight: el.clientHeight,
                     scrollTop: el.scrollTop,
@@ -754,7 +830,7 @@ const ChildSearchModal = ({
                     height: computedStyle.height,
                     overflowY: computedStyle.overflowY,
                     styleMaxHeight: el.style.maxHeight,
-                    styleHeight: el.style.height
+                    styleHeight: el.style.height,
                   });
                 }
               }}
@@ -909,7 +985,8 @@ const ChildSearchModal = ({
         {multiSelect && (
           <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
             <div className="text-sm text-gray-600 dark:text-gray-300">
-              {selectedChildrenState.length} selected{maxSelections ? ` / ${maxSelections}` : ''}
+              {selectedChildrenState.length} selected
+              {maxSelections ? ` / ${maxSelections}` : ""}
             </div>
             <div className="flex items-center gap-2">
               <button