@uniweb/runtime 1.1.13 → 1.1.15

package/dist/ssr.js

@@ -291,6 +291,7 @@ function ensureThemeCss(uniweb, foundation) {
   }
 }
 const STICKY_TOP = "0px";
+const STICKY_SECTION_TOP = "var(--uw-sticky-top, 0px)";
 function stickyStyle(top, zIndex) {
   const style = { position: "sticky", top: top || STICKY_TOP };
   if (zIndex != null) style.zIndex = zIndex;
@@ -305,8 +306,22 @@ function layoutStickiness(areas) {
   for (const [name, blocks] of Object.entries(areas || {})) sticky[name] = areaStickiness(blocks);
   return sticky;
 }
+function zoneProps(stickiness, layer) {
+  return stickiness ? { style: stickyStyle(stickiness.top, layer), "data-uw-sticky": "area" } : null;
+}
 function sectionStickyStyle(block) {
-  return block?.sticky ? stickyStyle(block.stickyTop, 1) : null;
+  return block?.sticky ? { ...stickyStyle(block.stickyTop || STICKY_SECTION_TOP, 1), alignSelf: "start" } : null;
+}
+function hasStickyArea(page) {
+  const areas = page?.getLayoutAreas?.() || {};
+  return Object.values(areas).some((blocks) => areaStickiness(blocks) !== null);
+}
+function sectionScrollMargin(block, kind) {
+  return kind && hasStickyArea(block?.page) ? { scrollMarginTop: STICKY_SECTION_TOP } : null;
+}
+function sectionStickyProps(block, kind) {
+  const style = kind ? sectionStickyStyle(block) : null;
+  return style ? { style, "data-uw-sticky": kind === "child" ? "child" : "section" } : null;
 }
 const NS = "uw-";
 const toIdent = (name) => NS + String(name).replace(/[^a-zA-Z0-9_-]/g, "-");
@@ -342,16 +357,20 @@ function areaWrapperStyle(region, transitions, layers, sticky = null) {
   }
   return Object.keys(style).length > 0 ? style : null;
 }
+function areaWrapperProps(region, transitions, layers, sticky = null) {
+  const style = areaWrapperStyle(region, transitions, layers, sticky);
+  if (!style) return null;
+  return sticky ? { style, "data-uw-sticky": "area" } : { style };
+}
 const COLUMN = { display: "flex", flexDirection: "column", minHeight: "100vh" };
 const GROW = { flex: 1 };
 function DefaultLayout({ header, body, footer, zones }) {
-  const zone = (name) => zones?.[name] ? { style: zones[name] } : null;
   return React.createElement(
     "div",
     { style: COLUMN },
-    header && React.createElement("header", zone("header"), header),
+    header && React.createElement("header", zones?.header || null, header),
     body && React.createElement("main", { style: GROW }, body),
-    footer && React.createElement("footer", zone("footer"), footer)
+    footer && React.createElement("footer", zones?.footer || null, footer)
   );
 }
 function applyBootScheme(respectSystem, fallback) {
@@ -552,8 +571,13 @@ function renderBlock(block, { as = "section", stickySelf = false } = {}) {
     return React.createElement(Component, componentProps);
   }
   const { background, ...wrapperProps } = getWrapperProps(block);
-  const sticky = stickySelf ? sectionStickyStyle(block) : null;
-  if (sticky) wrapperProps.style = { ...wrapperProps.style, ...sticky };
+  const sticky = sectionStickyProps(block, stickySelf);
+  if (sticky) {
+    wrapperProps.style = { ...wrapperProps.style, ...sticky.style };
+    wrapperProps["data-uw-sticky"] = sticky["data-uw-sticky"];
+  }
+  const margin = sectionScrollMargin(block, stickySelf);
+  if (margin) wrapperProps.style = { ...wrapperProps.style, ...margin };
   const componentClassName = Component.className;
   if (componentClassName) {
     wrapperProps.className = wrapperProps.className ? `${wrapperProps.className} ${componentClassName}` : componentClassName;
@@ -603,10 +627,10 @@ function renderLayout(page, website) {
   const sticky = layoutStickiness(areas);
   const layers = resolveLayoutLayers(areaNames, layoutMeta?.layers, sticky);
   const wrapArea = (name, element) => {
-    const style = areaWrapperStyle(name, transitions, layers, RemoteLayout ? sticky[name] : null);
-    return style ? React.createElement("div", { style }, element) : element;
+    const props = areaWrapperProps(name, transitions, layers, RemoteLayout ? sticky[name] : null);
+    return props ? React.createElement("div", props, element) : element;
   };
-  const bodyElement = bodyBlocks ? wrapArea("body", renderBlocks(bodyBlocks, { stickySelf: true })) : null;
+  const bodyElement = bodyBlocks ? wrapArea("body", renderBlocks(bodyBlocks, { stickySelf: "section" })) : null;
   const areaElements = {};
   for (const [name, blocks] of Object.entries(areas)) {
     areaElements[name] = wrapArea(name, renderBlocks(blocks));
@@ -621,7 +645,7 @@ function renderLayout(page, website) {
       ...areaElements
     });
   }
-  const zone = (name) => sticky[name] ? stickyStyle(sticky[name].top, layers?.[name]) : null;
+  const zone = (name) => zoneProps(sticky[name], layers?.[name]);
   return React.createElement(DefaultLayout, {
     body: bodyElement,
     ...areaElements,
@@ -659,7 +683,7 @@ function initPrerender(content, foundation, extensionsOrOptions, maybeOptions) {
       (childBlock, index) => React.createElement(
         React.Fragment,
         { key: childBlock.id || index },
-        renderBlock(childBlock, { as: wrapAs || null })
+        renderBlock(childBlock, { as: wrapAs || null, stickySelf: wrapAs ? "child" : false })
       )
     );
   };