@cntrl-site/sdk-nextjs 0.26.0 → 0.26.1

package/lib/components/Item.js

@@ -55,7 +55,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
     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 { top, left, bottom } = (0, useItemPosition_1.useItemPosition)(item, sectionId);
     const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
     const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
     const { width, height } = (0, useItemDimensions_1.useItemDimensions)(item, sectionId);
@@ -99,7 +99,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
         top: `${stickyTop * 100}vw`,
         height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset'
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { 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", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, style: isInitialRef.current ? {} : Object.assign({ top, left, bottom }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: isInitialRef.current ? {} : styles, children: (0, jsx_runtime_1.jsx)(RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: {
                             width: `${sizingAxis.x === 'manual'
                                 ? isRichText
                                     ? `${width * exemplary}px`
@@ -111,12 +111,12 @@ const Item = ({ item, sectionId, articleHeight }) => {
                         }, 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]) => {
                     const sizingAxis = parseSizing(layoutParams.sizing);
+                    const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
                     return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${(0, getAnchoredItemTop_1.getAnchoredItemTop)(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
-              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -134,7 +134,8 @@ const Item = ({ item, sectionId, articleHeight }) => {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              top: ${(0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${(0, HoverStyles_1.getTransitions)(['left', 'top'], hoverParams)};
             }

package/lib/components/useItemPosition.js

@@ -13,8 +13,12 @@ const useItemPosition = (item, sectionId) => {
         return item.area[layoutId];
     }, (animator, scroll, value) => animator.getPositions(value, scroll), sectionId, [layoutId]);
     const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
+    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
+    // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
     return {
-        top: (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
+        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
         left: `${left * 100}vw`
     };
 };

package/package.json

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

package/src/components/Item.tsx

@@ -1,6 +1,7 @@
 import { ComponentType, FC, PropsWithChildren, useContext, useEffect, useId, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import {
+  AnchorSide,
   ArticleItemType,
   getLayoutStyles,
   Item as TItem,
@@ -76,7 +77,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
   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 { top, left, bottom } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
   const { width, height } = useItemDimensions(item, sectionId);
@@ -128,7 +129,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
     <div
       className={`item-wrapper-${item.id}`}
       ref={itemWrapperRef}
-      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      style={isInitialRef.current ? {} : { top, left, bottom, ...(wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}
@@ -156,12 +157,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, hoverParams, sticky, sectionHeight, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
+        const isScreenBasedBottom = area.positionType === PositionType.ScreenBased && area.anchorSide === AnchorSide.Bottom;
           return (`
             .item-${item.id} {
               position: ${sticky ? 'sticky' : 'absolute'};
               top: ${sticky ? `${getAnchoredItemTop(area.top - sticky.from, sectionHeight, area.anchorSide)}` : 0};
               pointer-events: auto;
-              cursor: ${hoverParams ? 'pointer' : 'default'};
               display: ${hidden ? 'none' : 'block'};
               height: fit-content;
             }
@@ -179,7 +180,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
               pointer-events: none;
-              top: ${getItemTopStyle(area.top, area.anchorSide)};
+              bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
+              top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               transition: ${getTransitions(['left', 'top'], hoverParams)};
             }

package/src/components/useItemPosition.ts

@@ -1,4 +1,4 @@
-import { AnchorSide, ItemAny } from '@cntrl-site/sdk';
+import { AnchorSide, ItemAny, PositionType } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
@@ -16,8 +16,12 @@ export const useItemPosition = (item: ItemAny, sectionId: string) => {
     [layoutId]
   );
   const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
+  const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
+  // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+  const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
   return {
-    top:  getItemTopStyle(top, anchorSide),
+    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
     left: `${left * 100}vw`
   };
 };

package/.idea/codeStyles/codeStyleConfig.xml

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