@marktiderman/genesis-forms-web 0.6.1 → 0.6.2

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { ReactNode, ComponentType } from 'react';
 import { FormDefinition, FormEngine, CreateFormOptions, HostOptions, LinkParams, FormState, FormProgress, FieldBlock, PhotoRef, SignedUpload } from '@marktiderman/genesis-forms';
 import * as _marktiderman_genesis_forms_react from '@marktiderman/genesis-forms-react';
 import { RendererRegistry, FieldRendererProps, RendererEntry } from '@marktiderman/genesis-forms-react';
+export { CLASSIC_PROGRESS_DELAY_MS, PROGRESS_DELAY_MS } from '@marktiderman/genesis-forms-react';
 
 /**
  * How `<Form>` sits on the page. `"embedded"` is a block inside your app's own
@@ -257,10 +258,7 @@ interface FormProps {
     className?: string | undefined;
     testID?: string | undefined;
 }
-/** How long after a step forward `onProgress` waits, so quick steps save once. */
-declare const PROGRESS_DELAY_MS = 400;
-/** In classic layout, how long after the last answer changed. */
-declare const CLASSIC_PROGRESS_DELAY_MS = 1500;
+
 declare function Form(props: FormProps): react.JSX.Element;
 
 interface FieldChromeProps {
@@ -414,4 +412,4 @@ declare function hideQueryOnLoad(win: HiddenQueryWindow, isReload: boolean, now?
 /** Whether this page load was a reload (Navigation Timing), in the browser; false elsewhere. */
 declare const wasReload: () => boolean;
 
-export { type BrandSlotProps, CLASSIC_PROGRESS_DELAY_MS, DefaultEnding, type EndingSlotProps, type ErrorSummaryItem, type ErrorSummarySlotProps, FieldChrome, type FieldChromeProps, Form, type FormBrand, type FormPresentation, type FormPresentationValue, type FormProps, type FormSlotMap, type FormTheme, HIDDEN_QUERY_KEEP_MS, type HeaderSlotProps, type HiddenQueryWindow, type MediaTime, MediaTimeContext, type NavigationSlotProps, PROGRESS_DELAY_MS, type ProgressSlotProps, type SignedUploadHost, type SignedUploadHostOptions, SourceTextContext, type ThemeColors, UPLOAD_WAIT_MESSAGE, type UploadClaim, UploadContext, type UploadHost, builtInRenderers, defaultRegistry, describedBy, hideQueryOnLoad, photoAccept, photoFileProblem, photoFileType, signedUploadHost, themeColors, themeCss, useFormPresentation, useMediaTime, useSourceText, useUpload, wasReload };
+export { type BrandSlotProps, DefaultEnding, type EndingSlotProps, type ErrorSummaryItem, type ErrorSummarySlotProps, FieldChrome, type FieldChromeProps, Form, type FormBrand, type FormPresentation, type FormPresentationValue, type FormProps, type FormSlotMap, type FormTheme, HIDDEN_QUERY_KEEP_MS, type HeaderSlotProps, type HiddenQueryWindow, type MediaTime, MediaTimeContext, type NavigationSlotProps, type ProgressSlotProps, type SignedUploadHost, type SignedUploadHostOptions, SourceTextContext, type ThemeColors, UPLOAD_WAIT_MESSAGE, type UploadClaim, UploadContext, type UploadHost, builtInRenderers, defaultRegistry, describedBy, hideQueryOnLoad, photoAccept, photoFileProblem, photoFileType, signedUploadHost, themeColors, themeCss, useFormPresentation, useMediaTime, useSourceText, useUpload, wasReload };

package/dist/index.js

@@ -1,10 +1,11 @@
 "use client";
-import { createContext, useState, useEffect, useRef, useId, useContext, useMemo, useLayoutEffect } from 'react';
+import { createContext, useState, useEffect, useRef, useId, useContext, useMemo } from 'react';
 import { Button } from '@marktiderman/genesis-ui/button';
 import { Progress } from '@marktiderman/genesis-ui/progress';
 import { cn } from '@marktiderman/genesis-ui/utils';
-import { ratingDisplay, numberLimits, dateLimits, listLimits, tableColumns, tableLimits, parseTimestamp, formatTimestamp, formatCalculated, photoLimits, photoRefs, getFieldType, scaleLabels, isSearchable, otherOption, choiceOptions, searchOptions, OTHER_MAX_LENGTH, photoCountMessage, isPhotoRef, photoTypeMessage, photoSizeMessage, respondentPath, formProgress } from '@marktiderman/genesis-forms';
-import { createRendererRegistry, useFormSelector, useChoiceOptions, useForm, FormRuntime, useFormContext, FieldRenderer } from '@marktiderman/genesis-forms-react';
+import { ratingDisplay, numberLimits, dateLimits, listLimits, tableColumns, tableLimits, parseTimestamp, formatTimestamp, formatCalculated, photoLimits, photoRefs, getFieldType, scaleLabels, isSearchable, otherOption, choiceOptions, searchOptions, OTHER_MAX_LENGTH, photoCountMessage, isPhotoRef, photoTypeMessage, photoSizeMessage, contentText } from '@marktiderman/genesis-forms';
+import { createRendererRegistry, useFormSelector, useChoiceOptions, formEngineOptions, useForm, FormRuntime, useFormContext, useFormController, FieldRenderer } from '@marktiderman/genesis-forms-react';
+export { CLASSIC_PROGRESS_DELAY_MS, PROGRESS_DELAY_MS } from '@marktiderman/genesis-forms-react';
 import { Checkbox } from '@marktiderman/genesis-ui/checkbox';
 import { Input } from '@marktiderman/genesis-ui/input';
 import { Label } from '@marktiderman/genesis-ui/label';
@@ -2208,9 +2209,6 @@ function DefaultErrorSummary({ count, errors, className }) {
     )
   );
 }
-var ADVANCE_DELAY_MS = 250;
-var PROGRESS_DELAY_MS = 400;
-var CLASSIC_PROGRESS_DELAY_MS = 1500;
 var engineKeys = /* @__PURE__ */ new WeakMap();
 var nextEngineKey = 0;
 function keyOf(engine) {
@@ -2225,11 +2223,7 @@ function Form(props) {
   return props.engine ? /* @__PURE__ */ jsx(FormWithEngine, { ...props, engine: props.engine }) : /* @__PURE__ */ jsx(OwnedForm, { ...props });
 }
 function OwnedForm(props) {
-  const options = props.hostOptions || props.linkParams ? {
-    ...props.options,
-    ...props.hostOptions ? { hostOptions: props.hostOptions } : {},
-    ...props.linkParams ? { linkParams: props.linkParams } : {}
-  } : props.options;
+  const options = formEngineOptions(props.options, { hostOptions: props.hostOptions, linkParams: props.linkParams });
   const engine = useForm(props.form, options);
   return /* @__PURE__ */ jsx(FormWithEngine, { ...props, engine });
 }
@@ -2269,157 +2263,58 @@ function FormBody({
 }) {
   const { idPrefix } = useFormContext();
   const def = engine.definition;
-  const layout = layoutProp ?? def.layout?.mode ?? "classic";
-  const status = useFormSelector(engine, (s) => s.status);
-  const current = useFormSelector(engine, (s) => s.current);
-  const pathKey = useFormSelector(engine, (s) => JSON.stringify(respondentPath(def, s)));
-  const errorsKey = useFormSelector(engine, (s) => JSON.stringify(s.errors));
-  const ending = useFormSelector(engine, (s) => s.ending);
-  const historyLength = useFormSelector(engine, (s) => s.history.length);
-  const description = useFormSelector(engine, () => def.description ? engine.text(def.description) : void 0);
-  const path = JSON.parse(pathKey);
-  const errors = JSON.parse(errorsKey);
   const formRef = useRef(null);
   const stepRef = useRef(null);
   const endingRef = useRef(null);
-  const advanceTimer = useRef(void 0);
-  const previousCurrent = useRef(current);
-  const [phase, setPhase] = useState("idle");
-  const [announcement, setAnnouncement] = useState("");
-  const [summaryRequest, setSummaryRequest] = useState(0);
-  const sending = useRef(false);
-  const direction = useRef("forward");
   const [modKey, setModKey] = useState("Ctrl");
   const page = presentation === "page";
+  const focus = (target) => {
+    if (target.kind === "step") focusWithin(stepRef.current);
+    else if (target.kind === "ending") focusWithin(endingRef.current);
+    else if (target.kind === "errorSummary") {
+      const form = formRef.current;
+      const summary = form?.querySelector("[data-gf-error-summary]");
+      if (summary) summary.focus();
+      else form?.querySelector('[aria-invalid="true"]')?.focus();
+    } else {
+      const form = formRef.current;
+      if (form && !form.contains(document.activeElement)) form.querySelector('[type="submit"]')?.focus();
+    }
+  };
+  const controller = useFormController(engine, {
+    layout: layoutProp,
+    onSubmit,
+    onChange,
+    onProgress,
+    autoAdvance,
+    waitFor: () => pendingUploads.count() === 0 ? null : UPLOAD_WAIT_MESSAGE,
+    focus
+  });
+  const {
+    layout,
+    status,
+    current,
+    path,
+    historyLength,
+    description,
+    phase,
+    announcement,
+    showEnding,
+    locked,
+    saveProgress
+  } = controller;
   useEffect(() => {
     if (/Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent)) setModKey("\u2318");
   }, []);
-  const showEnding = status === "completed" && (phase === "sent" || !onSubmit);
-  const locked = status === "completed";
-  useEffect(() => {
-    if (!onChange) return;
-    return engine.subscribe(() => onChange(engine.getState(), engine));
-  }, [engine, onChange]);
-  const saveProgress = def.settings?.saveProgress === true && !!onProgress;
-  const onProgressRef = useRef(onProgress);
-  onProgressRef.current = onProgress;
+  const { flushProgress } = controller;
   useEffect(() => {
     if (!saveProgress) return;
-    let timer;
-    let last = engine.getState();
-    const fire = () => {
-      timer = void 0;
-      if (engine.getState().status === "completed") return;
-      try {
-        void Promise.resolve(onProgressRef.current?.(engine, formProgress(engine))).catch(() => {
-        });
-      } catch {
-      }
-    };
-    const schedule = (delay) => {
-      clearTimeout(timer);
-      timer = setTimeout(fire, delay);
-    };
-    const unsubscribe = engine.subscribe(() => {
-      const state = engine.getState();
-      const previous = last;
-      last = state;
-      if (state.status === "completed") {
-        clearTimeout(timer);
-        timer = void 0;
-        return;
-      }
-      const event = state.events[state.events.length - 1];
-      if (layout === "focus") {
-        if (event?.type === "next" && state.current !== previous.current) schedule(PROGRESS_DELAY_MS);
-      } else if (event?.type === "answer") schedule(CLASSIC_PROGRESS_DELAY_MS);
-    });
-    const flush = () => {
-      if (timer === void 0) return;
-      clearTimeout(timer);
-      fire();
-    };
-    window.addEventListener("pagehide", flush);
-    return () => {
-      unsubscribe();
-      window.removeEventListener("pagehide", flush);
-      flush();
-    };
-  }, [engine, saveProgress, layout]);
-  useLayoutEffect(() => {
-    if (previousCurrent.current === current) return;
-    previousCurrent.current = current;
-    clearTimeout(advanceTimer.current);
-    if (layout === "focus") focusWithin(stepRef.current);
-  }, [current, layout]);
-  useLayoutEffect(() => {
-    if (showEnding) focusWithin(endingRef.current);
-  }, [showEnding]);
-  useLayoutEffect(() => {
-    if (!summaryRequest) return;
-    const form = formRef.current;
-    const summary = form?.querySelector("[data-gf-error-summary]");
-    if (summary) summary.focus();
-    else form?.querySelector('[aria-invalid="true"]')?.focus();
-  }, [summaryRequest]);
-  useLayoutEffect(() => {
-    if (phase !== "failed") return;
-    const form = formRef.current;
-    if (form && !form.contains(document.activeElement)) form.querySelector('[type="submit"]')?.focus();
-  }, [phase]);
-  useEffect(() => () => clearTimeout(advanceTimer.current), []);
-  const announce = (message) => setAnnouncement((previous) => previous === message ? `${message}\xA0` : message);
-  const announceStepError = () => {
-    const state = engine.getState();
-    const message = state.current ? state.errors[state.current] : void 0;
-    if (message) announce(message);
-  };
-  const waitingForUploads = () => {
-    if (pendingUploads.count() === 0) return false;
-    announce(UPLOAD_WAIT_MESSAGE);
-    return true;
-  };
-  const finish = async () => {
-    if (sending.current) return;
-    if (engine.getState().status !== "completed" && waitingForUploads()) return;
-    if (engine.getState().status !== "completed" && !engine.submit()) {
-      if (layout === "classic") setSummaryRequest((n) => n + 1);
-      else announceStepError();
-      return;
-    }
-    if (!onSubmit) {
-      setPhase("sent");
-      return;
-    }
-    sending.current = true;
-    setPhase("sending");
-    try {
-      await onSubmit(engine);
-      setPhase("sent");
-    } catch {
-      setPhase("failed");
-    } finally {
-      sending.current = false;
-    }
-  };
-  const isLastStep = (state) => {
-    const shown = respondentPath(def, state);
-    return state.current === shown[shown.length - 1];
-  };
-  const advance = () => {
-    if (waitingForUploads()) return;
-    direction.current = "forward";
-    if (isLastStep(engine.getState())) void finish();
-    else if (!engine.next()) announceStepError();
-  };
-  const submit = () => {
-    clearTimeout(advanceTimer.current);
-    if (layout === "focus") advance();
-    else void finish();
-  };
+    window.addEventListener("pagehide", flushProgress);
+    return () => window.removeEventListener("pagehide", flushProgress);
+  }, [saveProgress, flushProgress]);
   const handleSubmit = (e) => {
     e.preventDefault();
-    submit();
+    controller.submit();
   };
   const handleKeyDown = (e) => {
     if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
@@ -2427,29 +2322,17 @@ function FormBody({
     if (target instanceof HTMLTextAreaElement) {
       if (e.metaKey || e.ctrlKey) {
         e.preventDefault();
-        submit();
+        controller.submit();
       }
       return;
     }
     if (layout === "focus" && target.matches('[role="radio"], [role="checkbox"]')) {
       e.preventDefault();
-      submit();
+      controller.submit();
     }
   };
-  const scheduleAdvance = layout === "focus" && autoAdvance ? () => {
-    clearTimeout(advanceTimer.current);
-    advanceTimer.current = setTimeout(() => {
-      const state = engine.getState();
-      if (state.status === "completed" || isLastStep(state)) return;
-      direction.current = "forward";
-      if (!engine.next()) announceStepError();
-    }, ADVANCE_DELAY_MS);
-  } : void 0;
-  const goBack = () => {
-    clearTimeout(advanceTimer.current);
-    direction.current = "back";
-    engine.back();
-  };
+  const scheduleAdvance = controller.onAdvance;
+  const goBack = controller.back;
   const liveRegion = /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", "data-gf-live": "", children: announcement });
   const presentationValue = { presentation, layout };
   const themeId = `gf-theme-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
@@ -2458,7 +2341,7 @@ function FormBody({
   const styleNode = themeStyle ? /* @__PURE__ */ jsx("style", { children: themeStyle }) : null;
   const brandNode = brand ? renderSlot(DefaultBrand, slots?.brand, { name: brand.name, logo: brand.logo }, slotProps?.brand) : null;
   if (showEnding) {
-    const end = def.endings?.find((x) => x.id === ending) ?? def.endings?.[0];
+    const end = controller.ending;
     const endingNode = renderSlot(
       DefaultEnding,
       slots?.ending,
@@ -2493,11 +2376,11 @@ function FormBody({
   const pageFocus = page && layout === "focus";
   const pageClassic = page && layout === "classic";
   const notice = saveProgress && progressNotice && historyLength === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-gf-progress-notice": "", children: progressNotice }) : null;
-  const renderBlock = (id, focus) => {
+  const renderBlock = (id, focus2) => {
     const block = engine.block(id);
     if (!block || block.kind === "page-break") return null;
     if (block.kind === "content") {
-      const focusable = focus ? { tabIndex: -1, "data-gf-question": "" } : {};
+      const focusable = focus2 ? { tabIndex: -1, "data-gf-question": "" } : {};
       const content = block.type === "heading" ? /* @__PURE__ */ jsx(
         "h2",
         {
@@ -2507,7 +2390,7 @@ function FormBody({
             focusRing
           ),
           ...focusable,
-          children: engine.text(block.text)
+          children: engine.text(contentText(block))
         },
         id
       ) : /* @__PURE__ */ jsx(
@@ -2515,23 +2398,17 @@ function FormBody({
         {
           className: cn("rounded-sm text-muted-foreground", pageFocus && "text-lg sm:text-xl text-pretty", focusRing),
           ...focusable,
-          children: engine.text(block.text)
+          children: engine.text(contentText(block))
         },
         id
       );
       return pageClassic ? /* @__PURE__ */ jsx("section", { className: classicSection, children: content }, id) : content;
     }
-    const field = /* @__PURE__ */ jsx(FieldRenderer, { id, onAdvance: focus ? scheduleAdvance : void 0 });
+    const field = /* @__PURE__ */ jsx(FieldRenderer, { id, onAdvance: focus2 ? scheduleAdvance : void 0 });
     return /* @__PURE__ */ jsx("div", { "data-block": id, className: pageClassic ? classicSection : void 0, children: field }, id);
   };
-  const step = current ? Math.max(1, path.indexOf(current) + 1) : 1;
-  const isLast = layout === "classic" || current === path[path.length - 1];
-  const errorItems = path.filter((id) => errors[id]).map((id) => ({
-    id,
-    label: engine.text(engine.field(id)?.label ?? id),
-    message: errors[id],
-    href: `#${idPrefix}-${id}`
-  }));
+  const { step, isLast } = controller;
+  const errorItems = controller.errorList.map((e) => ({ ...e, href: `#${idPrefix}-${e.id}` }));
   const currentField = pageFocus && current ? engine.field(current) : void 0;
   const keyHint = currentField ? currentField.type === "long-text" ? `${modKey} + Enter` : "Enter \u21B5" : void 0;
   const hasRequired = def.blocks.some((b) => b.kind === "field" && b.required === true);
@@ -2570,7 +2447,7 @@ function FormBody({
         className: cn(
           "outline-none",
           pageFocus && "transition-[opacity,translate] duration-300 ease-out starting:opacity-0 motion-reduce:transition-none",
-          pageFocus && (direction.current === "back" ? "starting:-translate-y-6" : "starting:translate-y-6")
+          pageFocus && (controller.direction === "back" ? "starting:-translate-y-6" : "starting:translate-y-6")
         ),
         children: current ? renderBlock(current, true) : null
       },
@@ -2586,7 +2463,7 @@ function FormBody({
     DefaultNavigation,
     slots?.navigation,
     {
-      canGoBack: layout === "focus" && historyLength > 0 && !locked,
+      canGoBack: controller.canGoBack,
       isLast: isLast || status === "completed",
       busy: phase === "sending",
       failed: phase === "failed",
@@ -2727,6 +2604,6 @@ function nativeReplaceState(history) {
 }
 var wasReload = () => typeof performance !== "undefined" && performance.getEntriesByType?.("navigation")[0]?.type === "reload";
 
-export { CLASSIC_PROGRESS_DELAY_MS, DefaultEnding, FieldChrome, Form, HIDDEN_QUERY_KEEP_MS, MediaTimeContext, PROGRESS_DELAY_MS, SourceTextContext, UPLOAD_WAIT_MESSAGE, UploadContext, builtInRenderers, defaultRegistry, describedBy, hideQueryOnLoad, photoAccept, photoFileProblem, photoFileType, signedUploadHost, themeColors, themeCss, useFormPresentation, useMediaTime, useSourceText, useUpload, wasReload };
+export { DefaultEnding, FieldChrome, Form, HIDDEN_QUERY_KEEP_MS, MediaTimeContext, SourceTextContext, UPLOAD_WAIT_MESSAGE, UploadContext, builtInRenderers, defaultRegistry, describedBy, hideQueryOnLoad, photoAccept, photoFileProblem, photoFileType, signedUploadHost, themeColors, themeCss, useFormPresentation, useMediaTime, useSourceText, useUpload, wasReload };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map