@bettercms-ai/next 0.21.0 → 0.22.0

package/dist/blocks.d.ts

@@ -29,8 +29,19 @@ interface BcmsBlocksProps {
     apiBase?: string;
     /** Class for the wrapping <div>. */
     className?: string;
+    /**
+     * The instant block windows (`block.window`) are read against. Defaults to the render time: the
+     * build for a static page, the request for a server-rendered one.
+     */
+    now?: Date;
+    /**
+     * Draw the blocks outside their window too, marked `data-bcms-window="pending|expired"`.
+     * For a draft preview, where an author must be able to find what they scheduled. Off, a block
+     * outside its window is not rendered, at any depth.
+     */
+    showScheduled?: boolean;
 }
 /** Render a page's blocks. Unknown/empty blocks render nothing (fail-soft). */
-declare function BcmsBlocks({ blocks, forms, components, turnstileSiteKey, apiBase, className, }: BcmsBlocksProps): ReactElement;
+declare function BcmsBlocks({ blocks: all, forms, components, turnstileSiteKey, apiBase, className, now, showScheduled, }: BcmsBlocksProps): ReactElement;
 
 export { BcmsBlocks, type BcmsBlocksProps };

package/dist/blocks.js

@@ -7,7 +7,7 @@ import {
   isValidElement,
   useState as useState2
 } from "react";
-import { blockStyleToCss, blockStyleToInnerCss, splitButtonStyle, buttonIconOf, buttonIconSvg, buttonVariantOf, headingPaintCss, withButtonLookProps } from "@bettercms-ai/types";
+import { RESPONSIVE_CSS, blockStyleToCss, blockStyleToInnerCss, hideOnAttr, usesHideOn, visibleBlocks, windowState, splitButtonStyle, buttonIconOf, buttonIconSvg, buttonVariantOf, headingPaintCss, withButtonLookProps } from "@bettercms-ai/types";
 import { componentInstanceAddresses } from "@bettercms-ai/types";
 import { applyOverrides } from "@bettercms-ai/ui/resolve";
 import { PortableText } from "@bettercms-ai/ui/blocks";
@@ -15,7 +15,7 @@ import { embeddedComponentBlock, readStructuredContent } from "@bettercms-ai/ric
 import { headingParts, richtextHeadingLevel } from "@bettercms-ai/richtext/heading";
 
 // src/form.tsx
-import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
 import {
   submitForm,
   shouldShowField,
@@ -23,7 +23,7 @@ import {
   asStringArray,
   toggleOption
 } from "@bettercms-ai/sdk";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var TURNSTILE_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js";
 var PhoneField = lazy(() => import("./phone-field.js"));
 var INPUT_TYPES = {
@@ -42,6 +42,21 @@ function readPrefill() {
   });
   return out;
 }
+function splitSteps(fields) {
+  if (!fields.some((f) => f.type === "step")) return null;
+  const pages = [];
+  let cur = { label: null, key: null, fields: [] };
+  for (const f of fields) {
+    if (f.type !== "step") {
+      cur.fields.push(f);
+      continue;
+    }
+    if (cur.fields.length) pages.push(cur);
+    cur = { label: f.label, key: f.key, fields: [] };
+  }
+  if (cur.fields.length) pages.push(cur);
+  return pages;
+}
 function resetTurnstile() {
   const t = globalThis.turnstile;
   if (t) {
@@ -66,6 +81,37 @@ function BcmsForm({
   });
   const [status, setStatus] = useState({ state: "idle" });
   const [fieldErrors, setFieldErrors] = useState({});
+  const pages = useMemo(() => splitSteps(form.fields), [form.fields]);
+  const [enhanced, setEnhanced] = useState(false);
+  const [step, setStep] = useState(0);
+  const pageRefs = useRef([]);
+  const headingRefs = useRef([]);
+  const moveFocus = useRef(false);
+  const last = pages ? pages.length - 1 : 0;
+  const paged = Boolean(pages && enhanced);
+  useEffect(() => setEnhanced(true), []);
+  useEffect(() => {
+    if (!moveFocus.current) return;
+    moveFocus.current = false;
+    headingRefs.current[step]?.focus();
+  }, [step]);
+  function pageInvalid(i) {
+    const controls = pageRefs.current[i]?.querySelectorAll("input,select,textarea") ?? [];
+    for (const c of controls) {
+      if (!c.checkValidity()) {
+        c.reportValidity();
+        return true;
+      }
+    }
+    return false;
+  }
+  function goTo(i) {
+    moveFocus.current = true;
+    setStep(i);
+  }
+  function next() {
+    if (!pageInvalid(step)) goTo(step + 1);
+  }
   useEffect(() => {
     if (!showTurnstile || document.querySelector(`script[src="${TURNSTILE_SRC}"]`)) return;
     const script = document.createElement("script");
@@ -75,12 +121,13 @@ function BcmsForm({
     document.head.appendChild(script);
   }, [showTurnstile]);
   const visibleFields = useMemo(
-    () => form.fields.filter((f) => f.type !== "hidden" && shouldShowField(f, values)),
+    () => form.fields.filter((f) => f.type !== "hidden" && f.type !== "step" && shouldShowField(f, values)),
     [form.fields, values]
   );
   const setValue = (key, value) => setValues((prev) => ({ ...prev, [key]: value }));
   async function handleSubmit(e) {
     e.preventDefault();
+    if (paged && step < last) return next();
     setStatus({ state: "submitting" });
     setFieldErrors({});
     const tokenEl = e.currentTarget.querySelector(
@@ -89,6 +136,7 @@ function BcmsForm({
     const turnstileToken = tokenEl?.value || void 0;
     const data = {};
     for (const field of form.fields) {
+      if (field.type === "step") continue;
       if (field.type === "hidden" || shouldShowField(field, values)) {
         data[field.key] = values[field.key];
       }
@@ -104,6 +152,7 @@ function BcmsForm({
       const reset = formInitialValues(form);
       if (form.honeypotField) reset[form.honeypotField] = "";
       setValues(reset);
+      setStep(0);
       setStatus({
         state: "success",
         message: form.successMessage ?? "Thanks! Your submission was received."
@@ -111,7 +160,11 @@ function BcmsForm({
       resetTurnstile();
     } catch (err) {
       const e2 = err;
-      if (e2.fieldErrors) setFieldErrors(e2.fieldErrors);
+      if (e2.fieldErrors) {
+        setFieldErrors(e2.fieldErrors);
+        const bad = pages?.findIndex((p) => p.fields.some((f) => e2.fieldErrors?.[f.key]));
+        if (bad !== void 0 && bad >= 0) goTo(bad);
+      }
       setStatus({ state: "error", message: e2.message || "Something went wrong. Please try again." });
       resetTurnstile();
     }
@@ -121,7 +174,59 @@ function BcmsForm({
     // preview frame and patch its copy live. Valued rather than bare: the runtime
     // selectors are `form[data-bcms-form]`, which a valued attribute still matches.
     /* @__PURE__ */ jsxs("form", { className, onSubmit: handleSubmit, noValidate: true, "data-bcms-form": form.id, children: [
-      visibleFields.map((field) => /* @__PURE__ */ jsx(
+      pages ? pages.map((page, i) => /* @__PURE__ */ jsxs(
+        "fieldset",
+        {
+          ref: (el) => {
+            pageRefs.current[i] = el;
+          },
+          className: "bcms-step",
+          "data-bcms-step": i + 1,
+          hidden: paged && i !== step,
+          "aria-labelledby": `bcms-step-${form.id}-${i + 1}`,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "h3",
+              {
+                id: `bcms-step-${form.id}-${i + 1}`,
+                className: "bcms-step-title",
+                tabIndex: -1,
+                ref: (el) => {
+                  headingRefs.current[i] = el;
+                },
+                "data-bcms-form-field": page.key ?? void 0,
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "bcms-step-count", children: [
+                    "Step ",
+                    i + 1,
+                    " of ",
+                    pages.length
+                  ] }),
+                  page.label ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    " ",
+                    /* @__PURE__ */ jsx("span", { "data-bcms-form-part": "label", children: page.label })
+                  ] }) : null
+                ]
+              }
+            ),
+            visibleFields.filter((f) => page.fields.includes(f)).map((field) => /* @__PURE__ */ jsx(
+              Field,
+              {
+                field,
+                value: values[field.key],
+                error: fieldErrors[field.key],
+                onChange: (v) => setValue(field.key, v)
+              },
+              field.key
+            )),
+            paged ? /* @__PURE__ */ jsxs("div", { className: "bcms-step-nav", children: [
+              i > 0 ? /* @__PURE__ */ jsx("button", { type: "button", "data-bcms-step-back": true, onClick: () => goTo(i - 1), children: "Back" }) : null,
+              i < last ? /* @__PURE__ */ jsx("button", { type: "button", "data-bcms-step-next": true, onClick: next, children: "Next" }) : null
+            ] }) : null
+          ]
+        },
+        page.key ?? "first"
+      )) : visibleFields.map((field) => /* @__PURE__ */ jsx(
         Field,
         {
           field,
@@ -143,7 +248,16 @@ function BcmsForm({
         }
       ) }) : null,
       showTurnstile ? /* @__PURE__ */ jsx("div", { className: "cf-turnstile", "data-sitekey": turnstileSiteKey }) : null,
-      /* @__PURE__ */ jsx("button", { type: "submit", disabled: status.state === "submitting", "data-bcms-form-part": "submit", children: status.state === "submitting" ? "Submitting\u2026" : form.submitLabel ?? "Submit" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          hidden: paged && step < last,
+          disabled: status.state === "submitting",
+          "data-bcms-form-part": "submit",
+          children: status.state === "submitting" ? "Submitting\u2026" : form.submitLabel ?? "Submit"
+        }
+      ),
       status.message ? /* @__PURE__ */ jsx(
         "p",
         {
@@ -310,16 +424,20 @@ function bindProps(id, entries, ctx) {
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var MAX_COMPONENT_DEPTH = 10;
 function BcmsBlocks({
-  blocks,
+  blocks: all,
   forms,
   components,
   turnstileSiteKey,
   apiBase,
-  className
+  className,
+  now,
+  showScheduled
 }) {
   const formsById = new Map((forms ?? []).map((f) => [f.id, f]));
   const componentsById = new Map((components ?? []).map((cmp) => [cmp.id, cmp]));
-  const ctx = { formsById, componentsById, turnstileSiteKey, apiBase, depth: 0, seen: /* @__PURE__ */ new Set() };
+  const at = now ?? /* @__PURE__ */ new Date();
+  const blocks = showScheduled ? all : visibleBlocks(all, at);
+  const ctx = { formsById, componentsById, turnstileSiteKey, apiBase, depth: 0, seen: /* @__PURE__ */ new Set(), now: at, showScheduled };
   return (
     /**
      * 🔴 `data-bcms-page` marks THIS SUBTREE as ours to edit — the SDK's equivalent of the hosted
@@ -335,7 +453,10 @@ function BcmsBlocks({
      * NO blocks yet is still recognised — otherwise there is no way to add the first section,
      * which is exactly the state a new page starts in.
      */
-    /* @__PURE__ */ jsx2("div", { className, "data-bcms-page": "", children: blocks.map((block) => tagTopLevel(block, renderBlock(block, ctx))) })
+    /* @__PURE__ */ jsxs2("div", { className, "data-bcms-page": "", children: [
+      usesHideOn([blocks, components]) && /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: RESPONSIVE_CSS } }),
+      blocks.map((block) => tagTopLevel(block, renderBlock(block, ctx)))
+    ] })
   );
 }
 function tagTopLevel(block, node) {
@@ -345,14 +466,21 @@ function tagTopLevel(block, node) {
   });
 }
 function renderBlock(block, ctx) {
+  const node = renderStyledBlock(block, ctx);
+  const state = ctx.showScheduled && ctx.now ? windowState(block, ctx.now) : "live";
+  if (state === "live" || !isValidElement(node)) return node;
+  return cloneElement(node, { "data-bcms-window": state });
+}
+function renderStyledBlock(block, ctx) {
   const node = renderBlockInner(block, ctx);
   const own = block.type === "button" ? splitButtonStyle(block.style).placement : block.style;
   const style = blockStyleToCss(own);
   const inner = blockStyleToInnerCss(own);
-  if (!style && !inner || node == null) return node;
+  const hide = hideOnAttr(own);
+  if (!style && !inner && !hide || node == null) return node;
   const column = inner ? /* @__PURE__ */ jsx2("div", { className: "bcms-block-inner", style: inner, children: node }, block.id) : node;
-  if (!style) return column;
-  return /* @__PURE__ */ jsx2("div", { style, children: column }, block.id);
+  if (!style && !hide) return column;
+  return /* @__PURE__ */ jsx2("div", { style, ...hide ? { "data-bcms-hide": hide } : {}, children: column }, block.id);
 }
 function renderBlockInner(block, ctx) {
   switch (block.type) {
@@ -626,6 +754,7 @@ function renderComponent({ id, props }, ctx) {
   if (!def) return renderMissingComponent(props.componentId, ctx);
   if (ctx.depth >= MAX_COMPONENT_DEPTH || ctx.seen.has(def.id)) return null;
   const resolved = applyOverrides(def.blockJson, withButtonLookProps(def), props.overrides ?? {});
+  const shown = ctx.showScheduled || !ctx.now ? resolved : visibleBlocks(resolved, ctx.now);
   const childCtx = {
     ...ctx,
     depth: ctx.depth + 1,
@@ -640,7 +769,7 @@ function renderComponent({ id, props }, ctx) {
       "data-bcms-component": def.id,
       "data-bcms-variant": "base",
       "data-bcms-instance": id,
-      children: resolved.map((child) => renderBlock(child, childCtx))
+      children: shown.map((child) => renderBlock(child, childCtx))
     },
     id
   );