@cntrl-site/sdk-nextjs 1.9.123 → 1.9.125

package/lib/components/StructuredBlockItem/StructuredBlockItem.js

@@ -36,7 +36,7 @@ const StructuredBlockItem = ({ block, maxWidthMap }) => {
                   align-self: ${getAlignSelf((_a = area.alignment) !== null && _a !== void 0 ? _a : 'center')};
                   width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth !== null && maxWidth !== void 0 ? maxWidth : 'max-content'};
                   height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
-                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
+                  margin-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
                   outline: none;
                   left: ${((_b = area.horizontalOffset) !== null && _b !== void 0 ? _b : 0) * 100}vw;
                   position: relative;

package/lib/components/items/Item.js

@@ -28,6 +28,7 @@ const useSizing_1 = require("./useSizing");
 const useItemPointerEvents_1 = require("./useItemPointerEvents");
 const useItemArea_1 = require("./useItemArea");
 const useDraggable_1 = require("./useDraggable");
+const getViewportHeightUnit_1 = require("../../utils/getViewportHeightUnit");
 const ItemGeometryContext_1 = require("../../ItemGeometry/ItemGeometryContext");
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
@@ -119,7 +120,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
     const dimensionsType = layout ? item.area[layout].dimensionsType : sdk_1.DimensionsType.PixelsBased;
     const isContainItem = dimensionsType === sdk_1.DimensionsType.PercentageBased;
-    const itemInnerHeight = isContainItem ? `${height}vh` : `${height * 100}vw`;
+    const vhUnit = (0, getViewportHeightUnit_1.getViewportHeightUnit)();
+    const itemInnerHeight = isContainItem ? `${height}${vhUnit}` : `${height * 100}vw`;
     const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
     const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
@@ -128,7 +130,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(top, height, anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(top, height, anchorSide, vhUnit) : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), (blendMode && { mixBlendMode: blendMode })), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, `${sectionHeight}px`, anchorSide) : 0,
                     height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
@@ -152,7 +154,9 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     const scaleAnchor = area.scaleAnchor;
-                    const innerHeight = (area === null || area === void 0 ? void 0 : area.dimensionsType) && (area === null || area === void 0 ? void 0 : area.dimensionsType) === sdk_1.DimensionsType.PercentageBased ? `${area.height}vh` : `${area.height * 100}vw`;
+                    const isAreaContainItem = (area === null || area === void 0 ? void 0 : area.dimensionsType) === sdk_1.DimensionsType.PercentageBased;
+                    const innerHeightFallback = isAreaContainItem ? `${area.height}vh` : `${area.height * 100}vw`;
+                    const innerHeight = isAreaContainItem ? `${area.height}svh` : `${area.height * 100}vw`;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -166,6 +170,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
               width: ${sizingAxis.x === 'manual'
                         ? `${area.width * 100}vw`
                         : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? innerHeightFallback : 'unset'};
               height: ${sizingAxis.y === 'manual' ? innerHeight : 'unset'};
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
@@ -177,6 +182,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
               ${!isInGroup && sticky ? stickyFix : ''}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(area.top, area.height, area.anchorSide, 'vh') : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               top: ${isScreenBasedBottom ? 'unset' : isContainItem ? (0, getItemTopStyle_1.getPercentageBasedTopStyle)(area.top, area.height, area.anchorSide) : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
             }

package/lib/utils/getItemTopStyle.js

@@ -14,7 +14,7 @@ function getAnchorSideShift(anchorSide, height) {
             return 0;
     }
 }
-function getPercentageBasedTopStyle(top, height, anchorSide) {
+function getPercentageBasedTopStyle(top, height, anchorSide, unit = 'svh') {
     const defaultValue = `${top * 100}vw`;
     if (!anchorSide)
         return defaultValue;
@@ -22,9 +22,9 @@ function getPercentageBasedTopStyle(top, height, anchorSide) {
         case sdk_1.AnchorSide.Top:
             return defaultValue;
         case sdk_1.AnchorSide.Center:
-            return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+            return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}${unit})`;
         case sdk_1.AnchorSide.Bottom:
-            return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+            return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}${unit})`;
     }
 }
 exports.getPercentageBasedTopStyle = getPercentageBasedTopStyle;

package/lib/utils/getViewportHeightUnit.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getViewportHeightUnit = void 0;
+let cachedUnit;
+// Inline styles hold a single value, so the CSS fallback-declaration trick
+// doesn't apply there — pick the unit at runtime instead.
+function getViewportHeightUnit() {
+    if (cachedUnit !== undefined)
+        return cachedUnit;
+    if (typeof window === 'undefined')
+        return 'svh';
+    const supportsSvh = typeof CSS !== 'undefined' && CSS.supports
+        ? CSS.supports('height', '1svh')
+        : false;
+    cachedUnit = supportsSvh ? 'svh' : 'vh';
+    return cachedUnit;
+}
+exports.getViewportHeightUnit = getViewportHeightUnit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.123",
+  "version": "1.9.125",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/StructuredBlockItem/StructuredBlockItem.tsx

@@ -44,7 +44,7 @@ export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
                   align-self: ${getAlignSelf(area.alignment ?? 'center')};
                   width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth ?? 'max-content'};
                   height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
-                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
+                  margin-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
                   outline: none;
                   left: ${(area.horizontalOffset ?? 0) * 100}vw;
                   position: relative;

package/src/components/items/Item.tsx

@@ -36,6 +36,7 @@ import { parseSizing, useSizing } from './useSizing';
 import { useItemPointerEvents } from './useItemPointerEvents';
 import { useItemArea } from './useItemArea';
 import { useDraggable } from './useDraggable';
+import { getViewportHeightUnit } from '../../utils/getViewportHeightUnit';
 import { ItemGeometryContext } from '../../ItemGeometry/ItemGeometryContext';
 
 export interface ItemProps<I extends ItemAny> {
@@ -150,7 +151,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const anchorSide = layout ? item.area[layout].anchorSide : AnchorSide.Top;
   const dimensionsType = layout ? item.area[layout].dimensionsType : DimensionsType.PixelsBased;
   const isContainItem = dimensionsType === DimensionsType.PercentageBased;
-  const itemInnerHeight = isContainItem ? `${height}vh` : `${height! * 100}vw`;
+  const vhUnit = getViewportHeightUnit();
+  const itemInnerHeight = isContainItem ? `${height}${vhUnit}` : `${height! * 100}vw`;
   const positionType = layout ? item.area[layout].positionType : PositionType.ScreenBased;
   const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   const scale = innerStateProps?.styles?.scale ?? itemScale;
@@ -164,7 +166,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         interactionCtrl?.handleTransitionEnd?.(e.propertyName);
       }}
       style={{
-        ...(top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? getPercentageBasedTopStyle(top, height, anchorSide) : getItemTopStyle(top, anchorSide) } : {}),
+        ...(top !== undefined ? { top: isScreenBasedBottom ? 'unset' : isContainItem ? getPercentageBasedTopStyle(top, height, anchorSide, vhUnit) : getItemTopStyle(top, anchorSide) } : {}),
         ...(left !== undefined ? { left: `${left * 100}vw` } : {}),
         ...(top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {}),
         ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}),
@@ -231,7 +233,9 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
       const sizingAxis = parseSizing(layoutParams.sizing);
       const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
       const scaleAnchor = area.scaleAnchor as AreaAnchor;
-      const innerHeight = area?.dimensionsType && area?.dimensionsType === DimensionsType.PercentageBased ? `${area.height}vh` : `${area.height * 100}vw`;
+      const isAreaContainItem = area?.dimensionsType === DimensionsType.PercentageBased;
+      const innerHeightFallback = isAreaContainItem ? `${area.height}vh` : `${area.height * 100}vw`;
+      const innerHeight = isAreaContainItem ? `${area.height}svh` : `${area.height * 100}vw`;
       return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
@@ -245,6 +249,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               width: ${sizingAxis.x === 'manual'
           ? `${area.width * 100}vw`
           : 'max-content'};
+              height: ${sizingAxis.y === 'manual' ? innerHeightFallback : 'unset'};
               height: ${sizingAxis.y === 'manual' ? innerHeight : 'unset'};
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
@@ -256,6 +261,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               ${!isInGroup && sticky ? stickyFix : ''}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : isContainItem ? getPercentageBasedTopStyle(area.top, area.height, area.anchorSide, 'vh') : getItemTopStyle(area.top, area.anchorSide)};
               top: ${isScreenBasedBottom ? 'unset' : isContainItem ? getPercentageBasedTopStyle(area.top, area.height, area.anchorSide) : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
             }

package/src/utils/getItemTopStyle.ts

@@ -12,16 +12,16 @@ function getAnchorSideShift(anchorSide: AnchorSide, height?: number) {
   }
 }
 
-export function getPercentageBasedTopStyle(top: number, height?: number, anchorSide?: AnchorSide) {
+export function getPercentageBasedTopStyle(top: number, height?: number, anchorSide?: AnchorSide, unit: 'vh' | 'svh' = 'svh') {
   const defaultValue = `${top * 100}vw`;
   if (!anchorSide) return defaultValue;
   switch (anchorSide) {
     case AnchorSide.Top:
       return defaultValue;
     case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+      return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}${unit})`;
     case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}${unit})`;
   }
 }
 

package/src/utils/getViewportHeightUnit.ts

@@ -0,0 +1,13 @@
+let cachedUnit: 'vh' | 'svh' | undefined;
+
+// Inline styles hold a single value, so the CSS fallback-declaration trick
+// doesn't apply there — pick the unit at runtime instead.
+export function getViewportHeightUnit(): 'vh' | 'svh' {
+  if (cachedUnit !== undefined) return cachedUnit;
+  if (typeof window === 'undefined') return 'svh';
+  const supportsSvh = typeof CSS !== 'undefined' && CSS.supports
+    ? CSS.supports('height', '1svh')
+    : false;
+  cachedUnit = supportsSvh ? 'svh' : 'vh';
+  return cachedUnit;
+}