@cntrl-site/sdk-nextjs 0.5.0 → 0.5.1

package/lib/components/Item.js

@@ -31,7 +31,7 @@ const Item = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const position = (0, useItemPosition_1.useItemPosition)(item);
-    const ref = (0, react_1.useRef)(null);
+    const [ref, setRef] = (0, react_1.useState)(null);
     const [parentOffsetTop, setParentOffsetTop] = (0, react_1.useState)(0);
     const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, parentOffsetTop, item);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item);
@@ -46,11 +46,11 @@ const Item = ({ item }) => {
         isInitialRef.current = false;
     }, []);
     (0, react_1.useEffect)(() => {
-        if (!ref.current)
+        if (!ref)
             return;
-        const offsetParent = (0, castObject_1.castObject)(ref.current.offsetParent, HTMLElement);
+        const offsetParent = (0, castObject_1.castObject)(ref.offsetParent, HTMLElement);
         setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-    }, []);
+    }, [ref]);
     const styles = {
         transform: `rotate(${angle}deg)`,
         left: `${position.left * 100}vw`,
@@ -58,7 +58,7 @@ const Item = ({ item }) => {
         height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
         top
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: ref, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;

package/lib/components/items/useItemSticky.js

@@ -16,7 +16,7 @@ const useItemSticky = (top, parentOffsetTop, item) => {
     const handleSticky = (0, react_1.useCallback)((scroll) => {
         setIsFixed(stickyManager.getIsSticky(scroll));
         setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
-    }, [top, stickyManager]);
+    }, [top, stickyManager, parentOffsetTop]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;

package/package.json

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

package/src/components/Item.tsx

@@ -39,7 +39,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item);
   const position = useItemPosition(item);
-  const ref = useRef<HTMLDivElement | null>(null);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [parentOffsetTop, setParentOffsetTop] = useState(0);
   const { top, isFixed } = useItemSticky(position.top, parentOffsetTop, item);
   const { width, height } = useItemDimensions(item);
@@ -57,10 +57,10 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   }, []);
 
   useEffect(() => {
-    if (!ref.current) return;
-    const offsetParent = castObject(ref.current.offsetParent, HTMLElement);
+    if (!ref) return;
+    const offsetParent = castObject(ref.offsetParent, HTMLElement);
     setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
-  }, []);
+  }, [ref]);
 
   const styles = {
     transform: `rotate(${angle}deg)`,
@@ -74,7 +74,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     <div
       suppressHydrationWarning={true}
       className={`item-${item.id}`}
-      ref={ref}
+      ref={setRef}
       style={isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed': 'absolute' } }
     >
       <ItemComponent item={item} />

package/src/components/items/useItemSticky.ts

@@ -19,7 +19,7 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
       top,
       parentOffsetTop
     ));
-  }, [top, stickyManager]);
+  }, [top, stickyManager, parentOffsetTop]);
 
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;