@cntrl-site/sdk-nextjs 0.15.5-2 → 0.15.5-3

package/lib/components/Item.js

@@ -35,6 +35,11 @@ const itemsMap = {
     [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
 };
+const RichTextWrapper = ({ isRichText, children }) => {
+    if (!isRichText)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' } }, { children: children })));
+};
 const noop = () => null;
 const Item = ({ item, sectionId }) => {
     var _a, _b;
@@ -43,6 +48,7 @@ const Item = ({ item, sectionId }) => {
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (_b = (_a = layouts.find(l => l.id === layout)) === null || _a === void 0 ? void 0 : _a.exemplary) !== null && _b !== void 0 ? _b : 1;
     const [wrapperHeight, setWrapperHeight] = (0, react_1.useState)(undefined);
+    const [itemHeight, setItemHeight] = (0, react_1.useState)(undefined);
     const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item, sectionId);
     const { top, left } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
@@ -69,43 +75,45 @@ const Item = ({ item, sectionId }) => {
             return;
         }
         const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+        setItemHeight(height);
         setWrapperHeight(wrapperHeight);
     };
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
-    const scaleIfRichText = isRichText
-        ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
-        : {};
-    const styles = Object.assign(Object.assign({}, scaleIfRichText), { top: stickyTop });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { 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)("div", Object.assign({ className: `item-${item.id}-inner`, style: {
-                        width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
-                            ? isRichText
-                                ? `${width * exemplary}px`
-                                : `${width * 100}vw`
-                            : 'max-content'}`,
-                        height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-                        transform: `scale(${scale})`,
-                        transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
-                    } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
+    const styles = {
+        top: stickyTop,
+        height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `item-wrapper-${item.id}`, style: isInitialRef.current ? {} : Object.assign({ top, left }, (wrapperHeight ? { 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: {
+                            width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual
+                                ? isRichText
+                                    ? `${width * exemplary}px`
+                                    : `${width * 100}vw`
+                                : 'max-content'}`,
+                            height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+                            transform: `scale(${scale})`,
+                            transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]
+                        } }, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize }) })) })) })), (0, jsx_runtime_1.jsx)(style_1.default, Object.assign({ id: id }, { children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
-              width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${scale});
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
-              --webkit-backface-visibility: hidden;
               cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+              height: fit-content;
             }
             .item-${item.id}-inner {
               transition: ${(0, HoverStyles_1.getTransitions)(['width', 'height', 'scale'], hoverParams)};
+              width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
+              transform: scale(${scale});
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: absolute;

package/lib/components/items/RichTextItem.js

@@ -14,11 +14,10 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
 const RichTextItem = ({ item, sectionId, onResize }) => {
-    const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const className = preset ? `cntrl-preset-${preset.id}` : undefined;
     const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
@@ -32,7 +31,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
             observer.unobserve(ref);
         };
     }, [ref, onResize]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
                     filter: `blur(${blur * 100}vw)`
                 } }, { children: content })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {

package/lib/components/items/useRichTextItemValues.js

@@ -5,7 +5,7 @@ const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
 const useRichTextItemValues = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
+    const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
     const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
         if (!layoutId)
             return 0;

package/package.json

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

package/src/components/Item.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, FC, useEffect, useId, useRef, useState } from 'react';
+import { ComponentType, FC, PropsWithChildren, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
   AnchorSide,
@@ -45,6 +45,19 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Custom]: CustomItem
 };
 
+interface RTWrapperProps {
+  isRichText: boolean;
+}
+
+const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children }) => {
+  if (!isRichText) return <>{children}</>;
+  return (
+    <div style={{ transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }}>
+      {children}
+    </div>
+  );
+};
+
 const noop = () => null;
 
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
@@ -53,6 +66,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const layout = useLayoutContext();
   const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
+  const [itemHeight, setItemHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
   const { top, left } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
@@ -79,7 +93,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
       setWrapperHeight(undefined);
       return;
     }
-    const wrapperHeight = getStickyItemWrapperHeight(sticky, height)
+    const wrapperHeight = getStickyItemWrapperHeight(sticky, height);
+    setItemHeight(height);
     setWrapperHeight(wrapperHeight);
   };
 
@@ -88,13 +103,10 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   }, []);
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
-  const scaleIfRichText = isRichText
-    ? { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }
-    : {};
 
   const styles = {
-    ...scaleIfRichText,
-    top: stickyTop
+    top: stickyTop,
+    height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 
   return (
@@ -107,21 +119,23 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
         className={`item-${item.id}`}
         style={isInitialRef.current ? {} : styles }
       >
-        <div
-          className={`item-${item.id}-inner`}
-          style={{
-            width: `${sizingAxis.x === SizingType.Manual
-              ? isRichText
-                ? `${width * exemplary}px`
-                : `${width * 100}vw`
-              : 'max-content'}`,
-            height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
-            transform: `scale(${scale})`,
-            transformOrigin: ScaleAnchorMap[scaleAnchor]
-          }}
-        >
-          <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
-        </div>
+        <RichTextWrapper isRichText={isRichText}>
+          <div
+            className={`item-${item.id}-inner`}
+            style={{
+              width: `${sizingAxis.x === SizingType.Manual
+                ? isRichText
+                  ? `${width * exemplary}px`
+                  : `${width * 100}vw`
+                : 'max-content'}`,
+              height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+              transform: `scale(${scale})`,
+              transformOrigin: ScaleAnchorMap[scaleAnchor]
+            }}
+          >
+            <ItemComponent item={item} sectionId={sectionId} onResize={handleItemResize} />
+          </div>
+        </RichTextWrapper>
       </div>
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
@@ -129,18 +143,19 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
-              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
-              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
-              transform: scale(${scale});
               top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               pointer-events: auto;
-              --webkit-backface-visibility: hidden;
               cursor: ${hoverParams ? 'pointer' : 'default'};
               visibility: ${hidden ? 'hidden' : 'visible'};
+              height: fit-content;
             }
             .item-${item.id}-inner {
               transition: ${getTransitions(['width', 'height', 'scale'], hoverParams)};
+              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
+              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
+              transform: scale(${scale});
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              --webkit-backface-visibility: hidden;
             }
             .item-wrapper-${item.id} {
               position: absolute;

package/src/components/items/RichTextItem.tsx

@@ -9,11 +9,10 @@ import { useRichTextItemValues } from './useRichTextItemValues';
 import ResizeObserver from 'resize-observer-polyfill';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
-  const [content, styles, preset] = useRichTextItem(item);
+  const [content, styles] = useRichTextItem(item);
   const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
-  const className = preset ? `cntrl-preset-${preset.id}` : undefined;
   const { angle, blur } = useRichTextItemValues(item, sectionId);
 
   useEffect(() => {
@@ -32,7 +31,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     <>
       <div
         ref={setRef}
-        className={`${className} rich-text-wrapper-${item.id}`}
+        className={`rich-text-wrapper-${item.id}`}
         style={{
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * 100}vw)`

package/src/components/items/useRichTextItemValues.ts

@@ -4,7 +4,7 @@ import { useLayoutContext } from '../useLayoutContext';
 
 export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
   const layoutId = useLayoutContext();
-  const angle = useKeyframeValue(
+  const { angle } = useKeyframeValue(
     item,
     (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
     (animator, scroll, value) => animator.getRotation(value, scroll),