@cntrl-site/sdk-nextjs 0.30.0 → 0.30.1

package/lib/components/Item.js

@@ -102,18 +102,14 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
-                    opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
-                    top: `${stickyTop * 100}vw`,
-                    height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
-                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign(Object.assign({}, (dimensions ? {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (position ? { top: position.top } : {})), (position ? { left: position.left } : {})), (position ? { bottom: position.bottom } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: Object.assign({ opacity: (keyframes.length !== 0 && !layout) ? 0 : 1, top: `${stickyTop * 100}vw`, height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset' }, (scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (dimensions ? {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${dimensions.width * exemplary}px`
                                     : `${dimensions.width * 100}vw`
                                 : 'max-content'}`,
                             height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}`
-                        } : {})), (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                        } : {})), children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight }) }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams], exemplary) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
@@ -126,6 +122,8 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
               transition: opacity 0.1s linear;
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
             }
             .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
@@ -135,9 +133,6 @@ const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
                             : `${area.width * 100}vw`
                         : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${area.scale});
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Item.tsx

@@ -147,7 +147,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
         style={{
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
           top: `${stickyTop * 100}vw`,
-          height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
+          height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
+          ...(scale !== undefined ? { transform: `scale(${scale}) translateZ(0)`, '-webkit-transform': `scale(${scale}) translateZ(0)` } : {}),
         }}
       >
         <RichTextWrapper isRichText={isRichText}>
@@ -160,8 +161,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
                     ? `${dimensions.width * exemplary}px`
                     : `${dimensions.width * 100}vw`
                   : 'max-content'}`,
-                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {}),
-              ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
+                height: `${sizingAxis.y === 'manual' ? `${dimensions.height * 100}vw` : 'unset'}` } : {})
             }}
           >
             <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} articleHeight={articleHeight} />
@@ -181,6 +181,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
               transition: opacity 0.1s linear;
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
             }
             .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
@@ -190,9 +192,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isI
                   : `${area.width * 100}vw`
                 : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${area.scale});
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
-              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>