jfs-components 0.0.67 → 0.0.68

package/lib/module/components/Image/Image.js

@@ -30,9 +30,10 @@ function normalizeSource(imageSource) {
  *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
  *    most common usage in this library (background media, hero images).
  */
+const DEFAULT_RATIO = 16 / 9;
 function Image({
   imageSource,
-  ratio,
+  ratio = DEFAULT_RATIO,
   resizeMode = 'cover',
   width,
   height,
@@ -44,15 +45,21 @@ function Image({
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
   const layoutStyle = useMemo(() => {
-    const s = {};
-    if (ratio != null) {
-      s.aspectRatio = ratio;
-      s.width = width ?? '100%';
-      if (height != null) s.height = height;
-    } else {
-      s.width = width ?? '100%';
-      s.height = height ?? '100%';
-    }
+    // If the caller has fully specified width AND height, they're doing a
+    // non-aspect layout (e.g. "fill the parent") — respect that and skip
+    // `aspectRatio` so it doesn't conflict.
+    const isExplicitBox = width != null && height != null;
+    const s = {
+      width: width ?? '100%',
+      ...(isExplicitBox ? {
+        height: height
+      } : {
+        aspectRatio: ratio,
+        ...(height != null ? {
+          height
+        } : {})
+      })
+    };
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
   }, [ratio, width, height, borderRadius]);

package/lib/module/components/MediaCard/MediaCard.js

@@ -25,18 +25,21 @@ export function MediaCard({
   style
 }) {
   const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
-  const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0');
+
+  // No magic minHeight, no aspectRatio on the container. The card simply
+  // hugs whatever the background renders at: the <Image> sits in normal
+  // flow with `aspectRatio: ratio`, so its rendered height becomes the
+  // card's height. Header and Footer are absolutely positioned overlays
+  // and don't contribute to layout.
   const containerStyle = {
     borderRadius: radius,
-    gap,
     overflow: 'hidden',
-    position: 'relative',
-    minHeight: 308
+    position: 'relative'
   };
 
-  // `media` wins for back-compat / custom nodes; otherwise we delegate to
-  // the shared <Image> for image-source backgrounds. All raster-rendering
-  // concerns (URL-vs-{uri}, resizeMode, aspect-ratio) live in <Image>.
+  // `media` wins as an escape hatch (gradient/video/etc.). Otherwise we
+  // delegate to the shared <Image> for image-source backgrounds. The
+  // background renders in normal flow so its height drives the card.
   const background = media ?? (imageSource != null ? /*#__PURE__*/_jsx(Image, {
     imageSource: imageSource,
     ratio: ratio,
@@ -50,10 +53,11 @@ export function MediaCard({
     },
     children: /*#__PURE__*/_jsxs(View, {
       style: [containerStyle, style],
-      children: [background ? /*#__PURE__*/_jsx(View, {
+      children: [background, children != null ? /*#__PURE__*/_jsx(View, {
         style: StyleSheet.absoluteFill,
-        children: background
-      }) : null, children]
+        pointerEvents: "box-none",
+        children: children
+      }) : null]
     })
   });
 }