@cntrl-site/sdk-nextjs 0.28.2 → 0.28.3

package/lib/components/Item.js

@@ -39,13 +39,17 @@ const itemsMap = {
     [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
     [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem
 };
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+`;
 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", { style: { transformOrigin: 'top left', transform: 'scale(var(--layout-deviation))' }, children: children }));
 };
 const noop = () => null;
-const Item = ({ item, sectionId, articleHeight }) => {
+const Item = ({ item, sectionId, articleHeight, isInGroup = false }) => {
     const itemWrapperRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const id = (0, react_1.useId)();
@@ -131,8 +135,7 @@ const Item = ({ item, sectionId, articleHeight }) => {
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
               z-index: ${area.zIndex};
-              -webkit-transform: translate3d(0, 0, 0);
-              transform: translate3d(0, 0, 0);
+              ${!isInGroup && stickyFix}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};

package/lib/components/items/GroupItem.js

@@ -27,7 +27,7 @@ const GroupItem = ({ item, sectionId, onResize, articleHeight }) => {
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_a = item.link) === null || _a === void 0 ? void 0 : _a.url, target: (_b = item.link) === null || _b === void 0 ? void 0 : _b.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: {
                         opacity,
                         transform: `rotate(${angle}deg)`,
-                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                    }, children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, articleHeight: articleHeight, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/package.json

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

package/src/components/Item.tsx

@@ -39,6 +39,7 @@ export interface ItemProps<I extends ItemAny> {
 
 export interface ItemWrapperProps extends ItemProps<ItemAny> {
   articleHeight: number;
+  isInGroup?: boolean;
 }
 
 const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
@@ -56,6 +57,11 @@ interface RTWrapperProps {
   isRichText: boolean;
 }
 
+const stickyFix = `
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+`;
+
 const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children }) => {
   if (!isRichText) return <>{children}</>;
   return (
@@ -67,7 +73,7 @@ const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, ch
 
 const noop = () => null;
 
-export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) => {
+export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isInGroup = false }) => {
   const itemWrapperRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
   const id = useId();
@@ -177,8 +183,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight }) =
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed': 'absolute'};
               z-index: ${area.zIndex};
-              -webkit-transform: translate3d(0, 0, 0);
-              transform: translate3d(0, 0, 0);
+              ${!isInGroup && stickyFix}
               pointer-events: none;
               bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
               top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};

package/src/components/items/GroupItem.tsx

@@ -35,6 +35,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
               key={item.id}
               sectionId={sectionId}
               articleHeight={articleHeight}
+              isInGroup
             />
           ))}
         </div>