@wix/origami-system-components 1.10.12 → 1.10.13

package/dist/Footer.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
+import type { RootClassName } from '@wix/origami-runtime';
 export interface FooterProps {
     id: string;
-    className?: string | undefined;
+    className?: RootClassName;
     children?: ReactNode;
 }
 /**

package/dist/Footer.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { resolvedRootClass } from './rootClassName.js';
 /**
  * Footer landmark, the element Thunderbolt's RefComponent renders.
  * It is the root of the shared Footer_<sharedCompId> definition and wraps its
@@ -8,6 +9,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * fixed positioning and z-index.
  */
 export function Footer({ id, className, children }) {
-    return (_jsx("footer", { id: id, className: className, children: children }));
+    return (_jsx("footer", { id: id, className: resolvedRootClass(undefined, className), children: children }));
 }
 export default Footer;

package/dist/Header.d.ts

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
+import type { RootClassName } from '@wix/origami-runtime';
 export interface HeaderProps {
     id: string;
-    className?: string | undefined;
+    className?: RootClassName;
     children?: ReactNode;
 }
 /**

package/dist/Header.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { resolvedRootClass } from './rootClassName.js';
 /**
  * Header landmark, the element Thunderbolt's RefComponent renders.
  * It is the root of the shared Header_<sharedCompId> definition and wraps its
@@ -8,6 +9,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * sticky/fixed positioning and z-index.
  */
 export function Header({ id, className, children }) {
-    return (_jsx("header", { id: id, className: className, children: children }));
+    return (_jsx("header", { id: id, className: resolvedRootClass(undefined, className), children: children }));
 }
 export default Header;

package/dist/InternalContainer.d.ts

@@ -1,8 +1,9 @@
 import type { AriaRole, ReactNode } from 'react';
 import './InternalContainer.css';
+import type { RootClassName } from '@wix/origami-runtime';
 export interface InternalContainerProps {
     id: string;
-    className?: string;
+    className?: RootClassName;
     role?: AriaRole;
     tabIndex?: number;
     'data-scope'?: string;

package/dist/InternalContainer.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import BaseInternalContainer from './layout/BaseInternalContainer.js';
 import './InternalContainer.css';
+import { resolvedRootClass } from './rootClassName.js';
 import { buildContainerClasses } from './layout/container-contract.js';
 import { LAYOUT_FLAGS } from './layout/layout-constants.js';
 export function InternalContainer(props) {
@@ -16,6 +17,6 @@ export function InternalContainer(props) {
         pinnedLayer: props.pinnedLayer,
         children: props.children,
     };
-    return (_jsx(BaseInternalContainer, { ...supportedProps, className: [props.id, props.className].filter(Boolean).join(' '), hasOverflow: LAYOUT_FLAGS.HAS_OVERFLOW, hasScrollOverflow: LAYOUT_FLAGS.HAS_SCROLL_OVERFLOW, shouldOmitWrapperLayers: LAYOUT_FLAGS.SHOULD_OMIT_WRAPPER_LAYERS, containerLayoutClassName: classes.contentClass, overlowWrapperClassName: classes.overflowClass }));
+    return (_jsx(BaseInternalContainer, { ...supportedProps, className: resolvedRootClass(props.id, props.className), hasOverflow: LAYOUT_FLAGS.HAS_OVERFLOW, hasScrollOverflow: LAYOUT_FLAGS.HAS_SCROLL_OVERFLOW, shouldOmitWrapperLayers: LAYOUT_FLAGS.SHOULD_OMIT_WRAPPER_LAYERS, containerLayoutClassName: classes.contentClass, overlowWrapperClassName: classes.overflowClass }));
 }
 export default InternalContainer;

package/dist/Page.d.ts

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
+import type { RootClassName } from '@wix/origami-runtime';
 import './PinnedToScreen.css';
 import './Page.css';
 export interface PageProps {
     id: string;
-    className?: string | undefined;
+    className?: RootClassName;
     /** Background nodes overlap in one cell. Supply stable keys for array entries. */
     backgroundLayer?: Array<ReactNode> | undefined;
     /** At most one Header-producing element, including a shared definition. */

package/dist/Page.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolvedRootClass } from './rootClassName.js';
 import './PinnedToScreen.css';
 import './Page.css';
 /**
@@ -11,6 +12,6 @@ import './Page.css';
  * targets, so popups must not render it.
  */
 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", { id: "top", className: "origami-page__anchor origami-page__anchor--top" }), _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, _jsx("div", { id: "bottom", className: "origami-page__anchor origami-page__anchor--bottom" })] }));
+    return (_jsxs("div", { id: id, className: resolvedRootClass(undefined, className, 'origami-page'), children: [_jsx("div", { id: "top", className: "origami-page__anchor origami-page__anchor--top" }), _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, _jsx("div", { id: "bottom", className: "origami-page__anchor origami-page__anchor--bottom" })] }));
 }
 export default Page;

package/dist/Section.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
+import { type RootClassName } from '@wix/origami-runtime';
 import './Section.css';
 export interface SectionProps {
     id: string;
-    className?: string | undefined;
+    className?: RootClassName;
     children?: ReactNode;
     wix?: {
         compPath?: string | undefined;

package/dist/Section.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { withInteractions } from '@wix/origami-runtime';
+import { resolvedRootClass } from './rootClassName.js';
 import './Section.css';
 /**
  * The authored InternalContainer child owns its
@@ -8,7 +9,7 @@ import './Section.css';
  * It owns the constant single-cell grid that hosts that InternalContainer.
  */
 function BaseSection({ id, className, children }) {
-    return (_jsx("section", { id: id, className: ['origami-section', className].filter(Boolean).join(' '), tabIndex: -1, children: children }));
+    return (_jsx("section", { id: id, className: resolvedRootClass(undefined, className, 'origami-section'), tabIndex: -1, children: children }));
 }
 const InteractiveSection = withInteractions(BaseSection);
 export function Section(props) {

package/dist/rootClassName.d.ts

@@ -0,0 +1,6 @@
+import { type RootClassName } from '@wix/origami-runtime';
+/**
+ * The class a system component renders for DM's `className`: its own classes, then `rootClass()`.
+ * These components don't run under `withOrigami`, so the className's bindings (`ctx()`, `is()`) resolve here.
+ */
+export declare const resolvedRootClass: (id: string | undefined, className: RootClassName, ...ownClasses: string[]) => string | undefined;

package/dist/rootClassName.js

@@ -0,0 +1,6 @@
+import { resolve, rootClass } from '@wix/origami-runtime';
+/**
+ * The class a system component renders for DM's `className`: its own classes, then `rootClass()`.
+ * These components don't run under `withOrigami`, so the className's bindings (`ctx()`, `is()`) resolve here.
+ */
+export const resolvedRootClass = (id, className, ...ownClasses) => [...ownClasses, rootClass(id, resolve(className))].filter(Boolean).join(' ') || undefined;

package/dist/site.global.css

@@ -3,3 +3,15 @@
 :root {
     --above-all-z-index: 100000;
 }
+
+/* DM's `wix-visibility-*` className terms, as Thunderbolt defines them (same names, the doubled collapsed selector and
+   `--l_display`). Scoped to the page root, as Thunderbolt scopes to #main_MF, so they beat a component's #id rules,
+   e.g. a layout container's `display: grid`. */
+#root .wix-visibility-hidden {
+    visibility: hidden;
+}
+
+#root .wix-visibility-collapsed.wix-visibility-collapsed {
+    --l_display: none;
+    display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-system-components",
-  "version": "1.10.12",
+  "version": "1.10.13",
   "description": "Editor structural and system components for standalone Origami sites",
   "sideEffects": [
     "**/*.css"
@@ -19,7 +19,7 @@
     "@testing-library/react": "^16.3.0",
     "@types/react": "^18.3.1",
     "@wix/editor-system-components": "^1.1573.0",
-    "@wix/origami-runtime": "0.19.1",
+    "@wix/origami-runtime": "0.20.0",
     "@wix/services-manager": "^1.0.7",
     "@wix/services-manager-react": "^1.0.8",
     "@wix/site-service-interactions": "^1.0.28",
@@ -32,7 +32,7 @@
     "vitest": "^4.1.11"
   },
   "peerDependencies": {
-    "@wix/origami-runtime": "^0.19.1",
+    "@wix/origami-runtime": "^0.20.0",
     "react": "^18.3.1"
   },
   "publishUnscoped": false,
@@ -114,5 +114,5 @@
   "dependencies": {
     "@wix/editor-components": "^1.16.0"
   },
-  "falconPackageHash": "570b6a20aac14202f1ebbac53908728e7201b2852232b23c22c1e740"
+  "falconPackageHash": "9bccf7dfd04e4ed15e4674b4baa1b37d23d6bc0ee4969d4b92bdaa2a"
 }