@gem-sdk/components 2.5.3-staging.6 → 2.5.3-staging.9

package/dist/cjs/carousel/components/CarouselItem.js

@@ -71,7 +71,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

package/dist/cjs/carousel/components/CarouselItem.liquid.js

@@ -82,7 +82,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/cjs/grid/components/Row.js

@@ -50,7 +50,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -69,7 +69,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...core.makeStyleResponsive('cg', verticalGutter),
             ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
-            ...core.makeStyleResponsive('w', styleObject.content)
+            ...core.makeStyleResponsive('w', styleObject.content),
+            ...core.makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -123,7 +124,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
+        className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {

package/dist/cjs/grid/components/Row.liquid.js

@@ -8,7 +8,7 @@ var helpers = require('../../helpers.js');
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = helpers$1.createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = core.splitStyle([
         'pos',
@@ -31,6 +31,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...core.makeStyleResponsive('pc', horizontalAlign),
         ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
         ...core.makeStyleResponsive('w', styleObject.content),
+        ...core.makeStyleResponsive('h', height),
         ...core.getStyleBackgroundByDevice(background, {
             liquid: true
         }),

package/dist/cjs/grid/setting/Row.js

@@ -254,6 +254,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space around'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Auto-resize <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -408,6 +429,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

package/dist/cjs/image/components/Image.js

@@ -21,6 +21,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = shape ? core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape)) : core.makeStyleResponsive('w', core.makeWidth(styles?.width, styles?.fullWidth));
     const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = core.getFlexGrowClassByShapeGlobalSize(shape);
     const overwriteDefaultRadius = (cornerRadius)=>{
         const radius = {
             ...cornerRadius
@@ -61,7 +62,9 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         "data-id": builderProps?.uid,
         onClick: onClick,
         role: "presentation",
-        className: core.cls('gp-group/image gp-relative', builderProps?.uid),
+        className: core.cls('gp-group/image gp-relative', builderProps?.uid, {
+            ...imageFlexGrowClass
+        }),
         style: {
             ...style,
             ...core.makeStyleResponsive('ta', styles?.align)

package/dist/cjs/image/helpers/getSrcSet.js

@@ -34,7 +34,7 @@ const getSrcSetLink = (link)=>{
 // return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
-    let src = image?.backupFilePath;
+    let src = image?.backupFilePath ?? image?.src;
     if (image?.backupFileKey) {
         const newBackupFileKey = getNewBackupFileKey(image.backupFileKey, image?.src ?? '');
         if (image.storage === 'THEME' || !image.storage) {
@@ -53,7 +53,7 @@ const getImageSrc = (image, currentDevice)=>{
                 break;
         }
     }
-    return src ?? image?.src;
+    return src;
 };
 const regexReplaceEndDot = /\.(?=[^.]*$)/;
 const replaceBackupFileKeyFileContent = (backupFileKey)=>{

package/dist/cjs/image/setting/Image.js

@@ -148,6 +148,15 @@ const config = {
                             displayOptions: [
                                 'full'
                             ]
+                        },
+                        height: {
+                            displayOptions: [
+                                'full'
+                            ],
+                            units: [
+                                'px',
+                                '%'
+                            ]
                         }
                     },
                     hiddenSettings: [

package/dist/esm/carousel/components/CarouselItem.js

@@ -67,7 +67,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

package/dist/esm/carousel/components/CarouselItem.liquid.js

@@ -78,7 +78,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/esm/grid/components/Row.js

@@ -46,7 +46,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -65,7 +65,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...makeStyleResponsive('cg', verticalGutter),
             ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
-            ...makeStyleResponsive('w', styleObject.content)
+            ...makeStyleResponsive('w', styleObject.content),
+            ...makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -119,7 +120,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
+        className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {

package/dist/esm/grid/components/Row.liquid.js

@@ -4,7 +4,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = splitStyle([
         'pos',
@@ -27,6 +27,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...makeStyleResponsive('pc', horizontalAlign),
         ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
         ...makeStyleResponsive('w', styleObject.content),
+        ...makeStyleResponsive('h', height),
         ...getStyleBackgroundByDevice(background, {
             liquid: true
         }),

package/dist/esm/grid/setting/Row.js

@@ -250,6 +250,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space around'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Auto-resize <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -404,6 +425,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

package/dist/esm/image/components/Image.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, getFlexGrowClassByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
@@ -17,6 +17,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = shape ? makeStyleResponsive('w', getWidthByShapeGlobalSize(shape)) : makeStyleResponsive('w', makeWidth(styles?.width, styles?.fullWidth));
     const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
     const overwriteDefaultRadius = (cornerRadius)=>{
         const radius = {
             ...cornerRadius
@@ -57,7 +58,9 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         "data-id": builderProps?.uid,
         onClick: onClick,
         role: "presentation",
-        className: cls('gp-group/image gp-relative', builderProps?.uid),
+        className: cls('gp-group/image gp-relative', builderProps?.uid, {
+            ...imageFlexGrowClass
+        }),
         style: {
             ...style,
             ...makeStyleResponsive('ta', styles?.align)

package/dist/esm/image/helpers/getSrcSet.js

@@ -32,7 +32,7 @@ const getSrcSetLink = (link)=>{
 // return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
-    let src = image?.backupFilePath;
+    let src = image?.backupFilePath ?? image?.src;
     if (image?.backupFileKey) {
         const newBackupFileKey = getNewBackupFileKey(image.backupFileKey, image?.src ?? '');
         if (image.storage === 'THEME' || !image.storage) {
@@ -51,7 +51,7 @@ const getImageSrc = (image, currentDevice)=>{
                 break;
         }
     }
-    return src ?? image?.src;
+    return src;
 };
 const regexReplaceEndDot = /\.(?=[^.]*$)/;
 const replaceBackupFileKeyFileContent = (backupFileKey)=>{

package/dist/esm/image/setting/Image.js

@@ -144,6 +144,15 @@ const config = {
                             displayOptions: [
                                 'full'
                             ]
+                        },
+                        height: {
+                            displayOptions: [
+                                'full'
+                            ],
+                            units: [
+                                'px',
+                                '%'
+                            ]
                         }
                     },
                     hiddenSettings: [

package/dist/types/index.d.ts

@@ -548,6 +548,7 @@ type RowProps$1 = BaseProps<{
 }, {
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
+    height?: ObjectDevices<'auto' | '100%'>;
     verticalGutter?: ObjectDevices<string>;
     background?: ObjectDevices<Background>;
     preloadBgImage?: boolean;
@@ -5536,6 +5537,7 @@ type RowProps = BaseProps<{
 }, {
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
+    height?: ObjectDevices<'auto' | '100%'>;
     verticalGutter?: ObjectDevices<string>;
     background?: ObjectDevices<Background>;
     preloadBgImage?: boolean;
@@ -5681,6 +5683,7 @@ declare const Product: ({ children, setting, styles, style, builderProps, rawChi
 }, {
     fullWidth?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
     width?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
+    height?: Partial<Record<_gem_sdk_core.NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
     background?: Partial<Record<_gem_sdk_core.NameDevices, _gem_sdk_core.Background>> | undefined;
     preloadBgImage?: boolean | undefined;
@@ -6480,6 +6483,7 @@ declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style,
 } & Pick<{
     fullWidth?: Partial<Record<NameDevices, boolean>> | undefined;
     width?: Partial<Record<NameDevices, string>> | undefined;
+    height?: Partial<Record<NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<NameDevices, string>> | undefined;
     background?: Partial<Record<NameDevices, Background>> | undefined;
     preloadBgImage?: boolean | undefined;
@@ -6723,6 +6727,7 @@ declare const CollectionBanner: ({ builderAttrs, builderProps, setting, style, c
 }, "layout" | "verticalAlign" | "horizontalAlign"> & Pick<{
     fullWidth?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
     width?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
+    height?: Partial<Record<_gem_sdk_core.NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
     background?: Partial<Record<_gem_sdk_core.NameDevices, _gem_sdk_core.Background>> | undefined;
     preloadBgImage?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.5.3-staging.6",
+  "version": "2.5.3-staging.9",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.5.3-staging.5",
+    "@gem-sdk/core": "2.5.3-staging.9",
     "@gem-sdk/styles": "2.4.8",
     "@types/react-transition-group": "^4.4.5"
   },