@cntrl-site/sdk-nextjs 0.18.0 → 0.19.1

package/lib/components/Item.js

@@ -94,7 +94,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     if (!layout)
         return null;
     const styles = {
-        top: `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
+        top: stickyTop,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles }, { children: (0, jsx_runtime_1.jsx)(RichTextWrapper, Object.assign({ isRichText: isRichText }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
@@ -127,7 +127,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
               --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
-              position: absolute;
+              position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
               z-index: ${area.zIndex};
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);

package/lib/components/items/CustomItem.js

@@ -23,9 +23,14 @@ const CustomItem = ({ item, onResize }) => {
                     return (`
             .custom-component-${item.id} {
               transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
+              height: 100%;
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
             }
             .custom-component-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)};
             }
           `);
                 })}` }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/sdk": "^1.3.0",
+    "@cntrl-site/sdk": "^1.4.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/Item.tsx

@@ -5,6 +5,7 @@ import {
   getLayoutStyles,
   Item as TItem,
   ItemAny,
+  PositionType
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -115,9 +116,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   const isRichText = isItemType(item, ArticleItemType.RichText);
 
   if (!layout) return null;
-
   const styles = {
-    top: `${getAnchoredItemTop(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
+    top: stickyTop,
     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 
@@ -171,7 +171,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
               --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
-              position: absolute;
+              position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
               z-index: ${area.zIndex};
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);

package/src/components/items/CustomItem.tsx

@@ -21,9 +21,14 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize }) => {
           return (`
             .custom-component-${item.id} {
               transition: ${getTransitions<ArticleItemType.Custom>(['angle'], hoverParams)};
+              height: 100%;
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
             }
             .custom-component-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Custom>(['angle'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Custom>(['angle'], hoverParams)};
             }
           `);
         })}`}