@cntrl-site/sdk-nextjs 0.28.1 → 0.28.3

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<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>

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/lib/utils/RichTextConverter/RichTextConverter.js

@@ -31,7 +31,8 @@ class RichTextConverter {
             const content = text.slice(block.start, block.end);
             const entities = (_a = block.entities.sort((a, b) => a.start - b.start)) !== null && _a !== void 0 ? _a : [];
             if (content.length === 0) {
-                root.push((0, jsx_runtime_1.jsx)("div", { className: `rt_${richText.id}_br_${blockIndex}`, children: (0, jsx_runtime_1.jsx)("br", {}) }));
+                const id = `rt_${richText.id}_br_${blockIndex}`;
+                root.push((0, jsx_runtime_1.jsx)("div", { className: id, children: (0, jsx_runtime_1.jsx)("br", {}) }, id));
                 layouts.forEach(l => {
                     const lhForLayout = currentLineHeight[l.id];
                     if (lhForLayout === undefined)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.28.1",
+  "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>

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -59,7 +59,8 @@ export class RichTextConverter {
       const content = text.slice(block.start, block.end);
       const entities = block.entities!.sort((a, b) => a.start - b.start) ?? [];
       if (content.length === 0) {
-        root.push(<div className={`rt_${richText.id}_br_${blockIndex}`}><br /></div>);
+        const id = `rt_${richText.id}_br_${blockIndex}`;
+        root.push(<div key={id} className={id}><br /></div>);
         layouts.forEach(l => {
           const lhForLayout = currentLineHeight[l.id];
           if (lhForLayout === undefined) return;