@wix/origami-system-components 1.10.6 → 1.10.7

package/README.md

@@ -142,7 +142,28 @@ props are forwarded. `backgroundLayer` is an optional array of React nodes; `hea
 Header-producing element and one Footer-producing element in their named slots,
 and Section-producing children in authored order. Shared definitions are supported.
 Page does not inspect component types or validate cardinality. Arrays require
-caller-supplied stable keys. Additional slots and page-pinned content are out of scope.
+caller-supplied stable keys. Additional slots are out of scope.
+
+### Pinned to screen
+
+A page child pinned to the screen (`FixedItemLayout`) is rendered in one of two ways.
+A pinned Section, header or footer stays in its slot, wrapped in
+`@wix/origami-system-components/layout/PinnedToScreen`
+(`header={<PinnedToScreen><SharedHeader /></PinnedToScreen>}`, or among the
+children). The wrapper takes exactly one child and no props, and goes outside the
+child's `<interact-element>`. Every other pinned page child (buttons, boxes, widgets)
+goes in Page's `viewportLayer` array, in its saved relative order. The layer renders
+after the footer, only when the array is non-empty.
+
+Both are fixed, screen-covering one-cell grids with `pointer-events: none`. The child
+docks with its own `align-self`, `justify-self`, margins and size. Both give their
+direct children `grid-area: 1 / 1` and `pointer-events: auto` at zero specificity, so
+a child's own values still win. A child's `<interact-element>` and a comp's
+`.wix-presets-wrapper` are `display: contents`, so the element inside them (either or
+both) gets the rule instead. The z-index depends only on the slot:
+header wrapper and viewport layer 52, footer wrapper 49, Section wrappers `auto`. Content z-indexes
+must stay at 51 or below. Only direct page children can be pinned, on every breakpoint
+or on none.
 
 During the DM transition, `structure.jsx` also accepts Header, Footer, and Background
 elements as Page children. The site's JSX compatibility pass moves these into

package/dist/layout/Page.css

@@ -21,3 +21,14 @@
 .origami-page__background > * {
     grid-area: 1 / 1 / 2 / 2;
 }
+
+/* Pinned Sections stack with the page content; a pinned footer stays below a pinned
+   header (52) and the viewport layer (52, later in the DOM), as on live sites.
+   Custom properties inherit through main's `display: contents`. */
+.origami-page__main {
+    --pin-z-index: auto;
+}
+
+.origami-page__main ~ .origami-pinned-to-screen {
+    --pin-z-index: 49;
+}

package/dist/layout/Page.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import './PinnedToScreen.css';
 import './Page.css';
 export interface PageProps {
     id: string;
@@ -11,6 +12,12 @@ export interface PageProps {
     footer?: ReactNode;
     /** Section-producing elements. The site build routes legacy DM landmark/background children to slots. */
     children?: ReactNode;
+    /**
+     * Page children pinned to the screen other than Sections, header and footer, in
+     * their saved relative order. They share one screen-covering layer after the
+     * footer, rendered only when non-empty. Supply stable keys for array entries.
+     */
+    viewportLayer?: Array<ReactNode> | undefined;
     /** The DM page data the converter writes on the Page. Accepted, not rendered. */
     data?: any;
 }
@@ -19,5 +26,5 @@ export interface PageProps {
  * supplied nodes are rendered without component-type or cardinality validation.
  * Authored CSS owns foreground layout and positioning. Main has no layout box.
  */
-export declare function Page({ id, className, backgroundLayer, header, footer, children }: PageProps): import("react").JSX.Element;
+export declare function Page({ id, className, backgroundLayer, header, footer, children, viewportLayer }: PageProps): import("react").JSX.Element;
 export default Page;

package/dist/layout/Page.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './PinnedToScreen.css';
 import './Page.css';
 /**
  * Experimental page composition. Slot semantics are the caller's responsibility;
  * supplied nodes are rendered without component-type or cardinality validation.
  * Authored CSS owns foreground layout and positioning. Main has no layout box.
  */
-export function Page({ id, className, backgroundLayer, header, footer, children }) {
-    return (_jsxs("div", { id: id, className: ['origami-page', className].filter(Boolean).join(' '), children: [_jsx("div", { className: "origami-page__background", children: backgroundLayer }), header, _jsx("main", { className: "origami-page__main", children: children }), footer] }));
+export function Page({ id, className, backgroundLayer, header, footer, children, viewportLayer }) {
+    return (_jsxs("div", { id: id, className: ['origami-page', className].filter(Boolean).join(' '), children: [_jsx("div", { className: "origami-page__background", children: backgroundLayer }), header, _jsx("main", { className: "origami-page__main", children: children }), footer, viewportLayer?.length ? _jsx("div", { className: "origami-page__viewport-layer", children: viewportLayer }) : null] }));
 }
 export default Page;

package/dist/layout/PinnedToScreen.css

@@ -0,0 +1,24 @@
+/* Shared by each pinned wrapper and the Page's viewportLayer. The z-index depends
+   only on where the Page renders the wrapper (see Page.css). */
+.origami-pinned-to-screen,
+.origami-page__viewport-layer {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    grid-template: 1fr / 1fr;
+    pointer-events: none;
+    z-index: var(--pin-z-index, 52);
+}
+
+/* Each child sits in the one cell, so several children overlap instead of stacking
+   in implicit rows, and turns clicks back on. Zero specificity, so a child's own
+   grid-area and pointer-events win, and direct children only, so intentional `none`
+   deeper in a component is kept. A child's interactions boundary and a comp's presets
+   wrapper are `display: contents`, so the element inside them is the grid item and gets
+   the same rule. */
+:where(.origami-pinned-to-screen, .origami-page__viewport-layer) > *,
+:where(.origami-pinned-to-screen, .origami-page__viewport-layer) > :where(interact-element, .wix-presets-wrapper) > *,
+:where(.origami-pinned-to-screen, .origami-page__viewport-layer) > :where(interact-element) > :where(.wix-presets-wrapper) > * {
+    grid-area: 1 / 1;
+    pointer-events: auto;
+}

package/dist/layout/PinnedToScreen.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/layout/PinnedToScreen.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import './PinnedToScreen.css';
+export interface PinnedToScreenProps {
+    /** Exactly one pinned Section, Header or Footer instance. */
+    children?: ReactNode;
+}
+/**
+ * Experimental screen-pinned wrapper for a page's Section, header or footer, rendered
+ * in place in its Page slot. It always covers the screen and lets clicks through;
+ * the child gets clicks back from PinnedToScreen.css and docks itself in the single
+ * grid cell with its own alignment, margins and size. The stacking order comes from the
+ * slot (see Page.css).
+ * Wrap outside the child's interactions boundary, so an entrance transform cannot
+ * become the fixed element's containing block. Other pinned comps go in Page's viewportLayer.
+ */
+export declare function PinnedToScreen({ children }: PinnedToScreenProps): import("react").JSX.Element;
+export default PinnedToScreen;

package/dist/layout/PinnedToScreen.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import './PinnedToScreen.css';
+/**
+ * Experimental screen-pinned wrapper for a page's Section, header or footer, rendered
+ * in place in its Page slot. It always covers the screen and lets clicks through;
+ * the child gets clicks back from PinnedToScreen.css and docks itself in the single
+ * grid cell with its own alignment, margins and size. The stacking order comes from the
+ * slot (see Page.css).
+ * Wrap outside the child's interactions boundary, so an entrance transform cannot
+ * become the fixed element's containing block. Other pinned comps go in Page's viewportLayer.
+ */
+export function PinnedToScreen({ children }) {
+    return _jsx("div", { className: "origami-pinned-to-screen", children: children });
+}
+export default PinnedToScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-system-components",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "description": "Editor structural and system components for standalone Origami sites",
   "sideEffects": [
     "**/*.css"
@@ -120,6 +120,10 @@
     "./layout/Footer": {
       "types": "./dist/layout/Footer.d.ts",
       "default": "./dist/layout/Footer.js"
+    },
+    "./layout/PinnedToScreen": {
+      "types": "./dist/layout/PinnedToScreen.d.ts",
+      "default": "./dist/layout/PinnedToScreen.js"
     }
   },
   "type": "module",
@@ -128,5 +132,5 @@
     "@wix/builder-state": "^1.49.3",
     "@wix/editor-components": "^1.16.0"
   },
-  "falconPackageHash": "95ee1438a566d8b9d88cdff5589e5acda9a7a4a7266d2f5d502e2b61"
+  "falconPackageHash": "48530f45cf02030c472beb10f31a0861ee155004ae5753a20b0a2a8a"
 }