tee3apps-cms-sdk-react 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tee3apps-cms-sdk-react",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Uses JSON to dynamically generate and render UI pages in a website",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/PageComponents/BoxComponent.tsx

@@ -71,63 +71,18 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
     return null;
   }
 
-  // Check if children contain image/video components for dynamic height
-  const hasMediaComponents = (): boolean => {
-    const checkChild = (child: React.ReactNode): boolean => {
-      if (!React.isValidElement(child)) return false;
-      
-      const componentName = (child.type as any)?.name || (child.type as any)?.displayName;
-      const mediaComponents = [
-        'ImageComponent',
-        'CarouselComponent',
-        'VideoComponent',
-        'TabComponent',
-        'GroupImageComponent',
-        'GroupVideoComponent'
-      ];
-      
-      if (componentName && mediaComponents.includes(componentName)) {
-        return true;
-      }
-      
-      // Check nested children
-      if (child.props && typeof child.props === 'object' && 'children' in child.props) {
-        const children = (child.props as any).children;
-        if (children) {
-          const nestedChildren = React.Children.toArray(children);
-          return nestedChildren.some(checkChild);
-        }
-      }
-      
-      return false;
-    };
-    
-    return React.Children.toArray(children).some(checkChild);
-  };
-
-  // Check if we have media components
-  const hasMedia = hasMediaComponents();
-
-  const getBoxHeight = (): string | undefined => {
+  const getBoxHeight = (): string => {
     if (!autoAdjustForImages) {
       return currentMode.height || 'auto';
     }
     
-    if (hasMedia) {
-      return 'auto';
-    }
+    const hasImageComponent = React.Children.toArray(children).some(child => 
+      React.isValidElement(child) && 
+      (child.type as any)?.name === 'ImageComponent' || 'CarouselComponent'
+    );
     
-    return currentMode.height || 'auto';
-  };
-
-  // Get dynamic minHeight based on media components
-  const getBoxMinHeight = (): string | undefined => {
-    if (!autoAdjustForImages) {
-      return currentMode.height || 'auto';
-    }
-    
-    if (hasMedia) {
-      return undefined; // Remove minHeight constraint for media components
+    if (hasImageComponent) {
+      return 'auto';
     }
     
     return currentMode.height || 'auto';
@@ -176,15 +131,12 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   // Get children as array
   const childrenArray = React.Children.toArray(children);
   
-  // Check if we should use auto height for layouts
-  const useAutoHeight = autoAdjustForImages && hasMedia;
-
   // Layout styles
   const rowLayout = {
     display: 'flex',
     flexDirection: 'row' as const,
     width: '100%',
-    height: useAutoHeight ? 'auto' : '100%',
+    height: '100%',
     margin: 0,
     padding: 0,
     boxSizing: 'border-box' as const
@@ -197,7 +149,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
     justifyContent: 'center',
     padding: '5px',
     boxSizing: 'border-box' as const,
-    flex: useAutoHeight ? 'none' : 1
+    flex: 1
   };
 
   // Render layout based on the layout prop
@@ -224,7 +176,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
         return (
           <div style={{ 
             width: "100%",
-                    height: useAutoHeight ? 'auto' : "100%",
+                    height: "100%",
                     minHeight: "50px",
                     boxSizing: "border-box",
                     overflow: "hidden",
@@ -238,7 +190,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                   display:"flex",
                   justifyContent:props.justify,
                   alignItems:props.align,
-                  height: useAutoHeight ? 'auto' : "100%"
+height: "100%" 
                  }}>
                   <div style={{width:'100%'}}> {children}</div>
                  </div>
@@ -251,7 +203,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
       display: 'flex', 
       flexDirection: 'column', // Changed to column to stack vertically
       width: '100%',
-      height: useAutoHeight ? 'auto' : '100%',
+      height: '100%',
       margin: 0,
       padding: 0,
       boxSizing: 'border-box'
@@ -261,9 +213,9 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
           key={`BOX-LAYOUT2-${idx}`}
           style={{
             ...colLayout,
-            minHeight: useAutoHeight ? "50px" : "50%",
+            minHeight: "50%",
             width: '100%',
-            flex: useAutoHeight ? 'none' : 1
+            flex: 1
           }}
         >
           {!isEmpty(childrenArray[idx]) ? (
@@ -279,15 +231,15 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
   );
       case "layout3":
         return (
-          <div style={{ ...rowLayout, flexDirection: 'column' }}>
-            <div style={{ ...rowLayout, flex: useAutoHeight ? 'none' : 1 }}>
+          <div style={{ ...rowLayout, flexDirection: 'column', height: '100%' }}>
+            <div style={{ ...rowLayout, flex: 1 }}>
               {[0, 1].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-TOP-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 1
+                    flex: 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -300,14 +252,14 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                 </div>
               ))}
             </div>
-            <div style={{ ...rowLayout, flex: useAutoHeight ? 'none' : 1 }}>
+            <div style={{ ...rowLayout, flex: 1 }}>
               {[2, 3].map((idx) => (
                 <div
                   key={`BOX-LAYOUT3-BOTTOM-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 1
+                    flex: 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -330,7 +282,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
               style={{
                 ...colLayout,
                 minHeight: "50px",
-                flex: useAutoHeight ? 'none' : 1
+                flex: 1
               }}
             >
               {!isEmpty(childrenArray[0]) ? (
@@ -341,14 +293,14 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
                 </div>
               )}
             </div>
-            <div style={{ display: 'flex', flexDirection: 'column', flex: useAutoHeight ? 'none' : 1 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
               {[1, 2].map((idx) => (
                 <div
                   key={`BOX-LAYOUT4-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 1
+                    flex: 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -367,14 +319,14 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
       case "layout5":
         return (
           <div style={rowLayout}>
-            <div style={{ display: 'flex', flexDirection: 'column', flex: useAutoHeight ? 'none' : 1 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
               {[0, 1].map((idx) => (
                 <div
                   key={`BOX-LAYOUT5-${idx}`}
                   style={{
                     ...colLayout,
                     minHeight: "50px",
-                    flex: useAutoHeight ? 'none' : 1
+                    flex: 1
                   }}
                 >
                   {!isEmpty(childrenArray[idx]) ? (
@@ -391,7 +343,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
               style={{
                 ...colLayout,
                 minHeight: "50px",
-                flex: useAutoHeight ? 'none' : 1
+                flex: 1
               }}
             >
               {!isEmpty(childrenArray[2]) ? (
@@ -416,7 +368,7 @@ const getAlignItems = (align: React.CSSProperties['alignItems']): React.CSSPrope
         backgroundColor: props.bgColor,
         backgroundSize: props.bgsize || 'cover',
         height: getBoxHeight(),
-        minHeight: getBoxMinHeight(),
+        minHeight: autoAdjustForImages ? 'auto' : (currentMode.height || 'auto'),
         borderRadius: currentMode.radius || '0px',
         width: `calc(${(colspan / 12) * 100}% - 1px)`,
         maxWidth: `calc(${(colspan / 12) * 100}% - 1px)`,