@cntrl-site/sdk-nextjs 1.9.38 → 1.9.39

package/lib/components/Article.js

@@ -28,9 +28,10 @@ const Article = ({ article, sectionData }) => {
         });
     }, [articleRectObserver]);
     const webglContextManager = (0, react_1.useMemo)(() => new effects_1.WebGLContextManager(), []);
+    const sectionsLength = article.sections.length;
     return ((0, jsx_runtime_1.jsx)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: (0, jsx_runtime_1.jsxs)(InteractionsContext_1.InteractionsProvider, { article: article, children: [(0, jsx_runtime_1.jsx)(ArticleWrapper_1.ArticleWrapper, { children: (0, jsx_runtime_1.jsxs)("div", { className: "article", ref: articleRef, children: [(0, jsx_runtime_1.jsx)(WebGLContextManagerContext_1.WebglContextManagerContext.Provider, { value: webglContextManager, children: article.sections.map((section, i) => {
                                     const data = section.name ? sectionData[section.name] : {};
-                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
+                                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, zIndex: sectionsLength - i, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: section.id, articleHeight: articleHeight }, item.id))) }, section.id));
                                 }) }), (0, jsx_runtime_1.jsx)("div", { id: "component-portal" })] }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
          position: relative;

package/lib/components/Section/Section.js

@@ -16,7 +16,7 @@ const SectionVideo_1 = require("./SectionVideo");
 const SectionImage_1 = require("./SectionImage");
 const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-const Section = ({ section, data, children }) => {
+const Section = ({ section, data, children, zIndex }) => {
     var _a;
     const id = (0, react_1.useId)();
     const sectionRef = (0, react_1.useRef)(null);
@@ -49,7 +49,7 @@ const Section = ({ section, data, children }) => {
     };
     if (SectionComponent)
         return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, style: { zIndex }, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
             height: ${getSectionHeight(height)};

package/package.json

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

package/src/components/Article.tsx

@@ -29,6 +29,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
   }, [articleRectObserver]);
 
   const webglContextManager = useMemo(() => new WebGLContextManager(), []);
+  const sectionsLength = article.sections.length;
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
@@ -43,6 +44,7 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
                     section={section}
                     key={section.id}
                     data={data}
+                    zIndex={sectionsLength - i}
                   >
                     {article.sections[i].items.map(item => (
                       <Item

package/src/components/Section/Section.tsx

@@ -21,10 +21,11 @@ const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 interface Props {
   section: TSection;
   children: SectionChild[];
+  zIndex: number;
   data?: any;
 }
 
-export const Section: FC<Props> = ({ section, data, children }) => {
+export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
   const id = useId();
   const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
@@ -68,6 +69,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         className={`section-${section.id}`}
         id={section.name}
         ref={sectionRef}
+        style={{ zIndex }}
       >
         {media && media.size !== 'none' && sectionRef.current && (
           <div className={`section-background-overlay-${section.id}`}>

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>