@cntrl-site/sdk-nextjs 0.17.1 → 0.17.2

package/lib/common/useRegisterResize.js

@@ -12,7 +12,7 @@ const useRegisterResize = (ref, onResize) => {
             return;
         const observer = new resize_observer_polyfill_1.default((entries) => {
             const [entry] = entries;
-            onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+            onResize(entry.target.clientHeight / window.innerWidth);
         });
         observer.observe(ref);
         return () => {

package/lib/components/Item.js

@@ -71,8 +71,6 @@ const Item = ({ item, sectionId, articleHeight }) => {
     const ItemComponent = itemsMap[item.type] || noop;
     const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
     const handleItemResize = (height) => {
-        var _a, _b;
-        const itemSectionTop = (_b = (_a = itemWrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
         if (!layout)
             return;
         const sticky = item.sticky[layout];
@@ -80,7 +78,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
             setWrapperHeight(undefined);
             return;
         }
-        const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+        const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
         const maxStickyTo = articleHeight - itemArticleOffset - height;
         const end = sticky.to
             ? Math.min(maxStickyTo, sticky.to)
@@ -93,8 +91,10 @@ const Item = ({ item, sectionId, articleHeight }) => {
         isInitialRef.current = false;
     }, []);
     const isRichText = isItemType(item, sdk_1.ArticleItemType.RichText);
+    if (!layout)
+        return null;
     const styles = {
-        top: stickyTop,
+        top: `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
         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: {

package/lib/components/items/useStickyItemTop.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyItemTop = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
-const getAnchoredItemTop_1 = require("../../utils/getAnchoredItemTop");
 const useLayoutContext_1 = require("../useLayoutContext");
 function useStickyItemTop(item, sectionHeightMap, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -13,8 +11,6 @@ function useStickyItemTop(item, sectionHeightMap, sectionId) {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const sticky = layoutId ? item.sticky[layoutId] : undefined;
-    const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
-    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
-    return sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(top - sticky.from, sectionHeight, anchorSide)}` : 0;
+    return sticky ? top - sticky.from : 0;
 }
 exports.useStickyItemTop = useStickyItemTop;

package/package.json

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

package/src/common/useRegisterResize.ts

@@ -6,7 +6,7 @@ export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: n
     if (!ref || !onResize) return;
     const observer = new ResizeObserver((entries) => {
       const [entry] = entries;
-      onResize(entry.target.getBoundingClientRect().height / window.innerWidth);
+      onResize(entry.target.clientHeight / window.innerWidth);
     });
     observer.observe(ref);
     return () => {

package/src/components/Item.tsx

@@ -5,7 +5,6 @@ import {
   ArticleItemType,
   getLayoutStyles,
   TArticleItem,
-  TStickyParams,
   TArticleItemAny,
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
@@ -94,14 +93,13 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
 
   const handleItemResize = (height: number) => {
-    const itemSectionTop = itemWrapperRef.current?.offsetTop ?? 0;
     if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
       return;
     }
-    const itemArticleOffset = (sectionTop + itemSectionTop) / window.innerWidth;
+    const itemArticleOffset = sectionTop / window.innerWidth + stickyTop;
     const maxStickyTo = articleHeight - itemArticleOffset - height;
     const end = sticky.to
       ? Math.min(maxStickyTo, sticky.to)
@@ -117,8 +115,10 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
 
   const isRichText = isItemType(item, ArticleItemType.RichText);
 
+  if (!layout) return null;
+
   const styles = {
-    top: stickyTop,
+    top: `${getAnchoredItemTop(stickyTop, sectionHeight[layout], item.area[layout].anchorSide)}`,
     height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
   };
 

package/src/components/items/useStickyItemTop.ts

@@ -1,6 +1,5 @@
-import { AnchorSide, TArticleItemAny } from '@cntrl-site/sdk';
+import { TArticleItemAny } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
 import { useLayoutContext } from '../useLayoutContext';
 
 export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record<string, string>, sectionId: string) {
@@ -16,7 +15,5 @@ export function useStickyItemTop(item: TArticleItemAny, sectionHeightMap: Record
     [layoutId]
   );
   const sticky = layoutId ? item.sticky[layoutId] : undefined;
-  const sectionHeight = layoutId ? sectionHeightMap[layoutId] : '0vh';
-  const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
-  return sticky ? `${getAnchoredItemTop(top - sticky.from, sectionHeight, anchorSide)}` : 0
+  return sticky ? top - sticky.from : 0
 }

package/.idea/codeStyles/codeStyleConfig.xml

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

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>