@cntrl-site/sdk-nextjs 1.9.7 → 1.9.8

package/lib/components/Section/useSectionHeightMap.js

@@ -4,12 +4,12 @@ exports.getSectionHeightMap = exports.useSectionHeightData = void 0;
 const react_1 = require("react");
 const CntrlContext_1 = require("../../provider/CntrlContext");
 const Section_1 = require("./Section");
-const useSectionHeightData = (sectionId) => {
+function useSectionHeightData(sectionId) {
     const sectionHeightContext = (0, react_1.useContext)(CntrlContext_1.CntrlContext);
     const layouts = sectionHeightContext.layouts;
     const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
     return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
-};
+}
 exports.useSectionHeightData = useSectionHeightData;
 function getSectionHeightMap(sectionHeight) {
     return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, (0, Section_1.getSectionHeight)(heightData)]));

package/lib/components/items/Item.js

@@ -60,14 +60,16 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
         width: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.width,
         height: (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height
     });
-    const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
+    const sectionHeightLayoutMap = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
+    const sectionHeight = layout && sectionHeightLayoutMap[layout] ? sectionHeightLayoutMap[layout] : '0';
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.top);
     const layoutValues = [item.area, item.hidden];
     layoutValues.push(item.sticky);
-    layoutValues.push(sectionHeight);
+    layoutValues.push(sectionHeightLayoutMap);
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
+    const sticky = layout ? item.sticky[layout] : undefined;
     const sizingAxis = (0, useSizing_1.useSizing)(item);
     const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
     const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
@@ -117,8 +119,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
         }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), 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 !== undefined ? `${itemHeight * 100}vw` : 'unset',
+                    top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
+                    height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
                 }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
                             ? {
                                 width: `${sizingAxis.x === 'manual'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/Section/useSectionHeightMap.ts

@@ -3,17 +3,17 @@ import { CntrlContext } from '../../provider/CntrlContext';
 import { Layout, SectionHeight } from '@cntrl-site/sdk';
 import { getSectionHeight } from './Section';
 
-export const useSectionHeightData = (sectionId: string): Record<string, string> => {
+export function useSectionHeightData(sectionId: string): Record<string, string> {
   const sectionHeightContext = useContext(CntrlContext);
   const layouts = sectionHeightContext.layouts;
   const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
   return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
-};
+}
 
 export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
   return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
 }
 
 function getDefaultHeightData(layouts: Layout[]) {
-  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
+  return layouts.reduce((acc, layout) => ({ ...acc, [layout.id]: '0' }), {});
 }

package/src/components/items/Item.tsx

@@ -90,14 +90,16 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
     width: innerStateProps?.styles?.width as number,
     height: innerStateProps?.styles?.height as number
   });
-  const sectionHeight = useSectionHeightData(sectionId);
+  const sectionHeightLayoutMap = useSectionHeightData(sectionId);
+  const sectionHeight = layout && sectionHeightLayoutMap[layout] ? sectionHeightLayoutMap[layout] : '0';
   const stickyTop = useStickyItemTop(item, sectionId, wrapperStateProps?.styles?.top as number);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden];
   layoutValues.push(item.sticky);
-  layoutValues.push(sectionHeight);
+  layoutValues.push(sectionHeightLayoutMap);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
+  const sticky = layout ? item.sticky[layout] : undefined;
   const sizingAxis = useSizing(item);
   const ItemComponent = itemsMap[item.type] || noop;
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
@@ -161,8 +163,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
         className={`item-${item.id}`}
         style={{
           opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
-          top: `${stickyTop * 100}vw`,
-          height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset',
+          top: sticky ?getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
+          height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
         }}
       >
         <RichTextWrapper isRichText={isRichText}>

package/src/components/items/useItemArea.ts

@@ -13,7 +13,7 @@ export function useItemArea(
     KeyframeType.Position,
     (item, layoutId) => {
       if (!layoutId) return;
-      return item.area[layoutId]
+      return item.area[layoutId];
     },
     (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
     sectionId,

package/src/components/items/useStickyItemTop.ts

@@ -2,7 +2,7 @@ import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { useLayoutContext } from '../useLayoutContext';
 
-  export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
+export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
   const layoutId = useLayoutContext();
   const data = useKeyframeValue<{ top: number; left: number } | undefined>(
     item,

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/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/sdk-nextjs.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>