@petrarca/sonnet-forms 0.6.0 → 0.7.0

package/dist/index.js

@@ -1483,16 +1483,18 @@ function FormActions({
   disabled = false,
   hasChanges,
   isValid,
+  saveWhenInvalid = "reveal",
   saveLabel = "Save",
   cancelLabel = "Cancel",
   showCancel = true,
   leadingActions
 }) {
+  const saveDisabled = disabled || !hasChanges || saveWhenInvalid === "disable" && !isValid;
   return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mt-4", children: [
     /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: leadingActions }),
     /* @__PURE__ */ jsxs9(SimpleGroup, { justify: "flex-end", children: [
       showCancel && /* @__PURE__ */ jsx10(Button3, { variant: "outline", onClick: onCancel, disabled, children: cancelLabel }),
-      /* @__PURE__ */ jsx10(Button3, { onClick: onSave, disabled: disabled || !hasChanges || !isValid, children: saveLabel })
+      /* @__PURE__ */ jsx10(Button3, { onClick: onSave, disabled: saveDisabled, children: saveLabel })
     ] })
   ] });
 }
@@ -1533,7 +1535,7 @@ function ExtraPropertiesCard({ properties, schema }) {
 var ExtraPropertiesCard_default = ExtraPropertiesCard;
 
 // src/JsonSchemaFormRenderer.tsx
-import React13, { useCallback as useCallback8, useMemo as useMemo8 } from "react";
+import React13, { useCallback as useCallback8, useContext as useContext2, useMemo as useMemo8 } from "react";
 import { SimpleStack } from "@petrarca/sonnet-ui";
 import { AlertCircle as AlertCircle2 } from "lucide-react";
 import {
@@ -2194,9 +2196,11 @@ function resolveLayout(uiSchema, propertySchema) {
   return uiSchema?.["x-ui-layout"] ?? propertySchema["x-ui-layout"];
 }
 function ObjectWidget({
+  id,
   propertySchema,
   value,
   onChange,
+  onBlur,
   registry,
   uiSchema,
   disabled,
@@ -2233,7 +2237,9 @@ function ObjectWidget({
       readOnly: readonly,
       widgets: registry,
       uiSchema: effectiveUiSchema,
-      displayContents
+      displayContents,
+      idPrefix: id,
+      onBlur: onBlur ? () => onBlur(id, value) : void 0
     }
   );
   if (displayContents) return /* @__PURE__ */ jsx21(Fragment3, { children: content });
@@ -2991,7 +2997,8 @@ function OneOfWidget({
             disabled,
             readOnly: readonly,
             widgets: registry,
-            uiSchema: subUiSchema
+            uiSchema: subUiSchema,
+            idPrefix: id
           }
         )
       }
@@ -3414,7 +3421,8 @@ function FormFieldRenderer({
   registry,
   globalOptions = {},
   formData,
-  idPrefix = "field"
+  idPrefix = "field",
+  rawErrors
 }) {
   const label = getFieldTitle(fieldName, property);
   const { description, placeholder } = resolvePresentationText(
@@ -3455,7 +3463,8 @@ function FormFieldRenderer({
       disabled: flags.disabled,
       readonly: flags.readOnly,
       options: mergedOptions,
-      formData
+      formData,
+      rawErrors
     }
   );
   return applyFieldWidth(widget, uiSchema, mergedOptions);
@@ -3471,7 +3480,8 @@ import {
   resolveSchema,
   resolveRefs,
   validateFormData,
-  diffFormData
+  diffFormData,
+  ensureFormItemIds
 } from "@petrarca/sonnet-core/schema";
 
 // src/hooks/orderProperties.ts
@@ -3537,8 +3547,14 @@ function useFormEngine({
     () => resolveRefs(schema, refResolver),
     [schema, refResolver]
   );
+  const seed = useState9(
+    () => ensureFormItemIds(
+      applySchemaDefaults2(data, refResolvedSchema),
+      refResolvedSchema
+    )
+  )[0];
   const [originalData, setOriginalData] = useState9(
-    () => applySchemaDefaults2(data, refResolvedSchema)
+    () => seed
   );
   const [originalDataInitialized, setOriginalDataInitialized] = useState9(false);
   const [nonSchemaData, setNonSchemaData] = useState9(
@@ -3550,9 +3566,7 @@ function useFormEngine({
       );
     }
   );
-  const [formData, setFormData] = useState9(
-    () => applySchemaDefaults2(data, refResolvedSchema)
-  );
+  const [formData, setFormData] = useState9(() => seed);
   const formDataRef = useRef5(formData);
   formDataRef.current = formData;
   const [pendingChanges, setPendingChanges] = useState9({});
@@ -3567,6 +3581,9 @@ function useFormEngine({
     return orderProperties(properties2, orderArray);
   }, [resolvedSchema, uiSchema]);
   const [initialDefaultsSent, setInitialDefaultsSent] = useState9(false);
+  const [edited, setEdited] = useState9({});
+  const [touched, setTouched] = useState9({});
+  const [submitAttempted, setSubmitAttempted] = useState9(false);
   const properties = getSchemaProperties(resolvedSchema);
   useEffect3(() => {
     if (!initialDefaultsSent) {
@@ -3597,7 +3614,10 @@ function useFormEngine({
   useEffect3(() => {
     if (isEqual(prevDataRef.current, data)) return;
     prevDataRef.current = data;
-    const newData = applySchemaDefaults2(data, refResolvedSchema);
+    const newData = ensureFormItemIds(
+      applySchemaDefaults2(data, refResolvedSchema),
+      refResolvedSchema
+    );
     setFormData(newData);
     const schemaPropertyNames = Object.keys(properties);
     const result = computeBaselineUpdate(
@@ -3644,6 +3664,9 @@ function useFormEngine({
   const handleFieldChange = useCallback7(
     (fieldName, value) => {
       if (readOnly) return;
+      setEdited(
+        (prev) => prev[fieldName] ? prev : { ...prev, [fieldName]: true }
+      );
       const immediate = isImmediateField(fieldName, properties);
       if (deferStateUpdates && !immediate) {
         setPendingChanges((prev) => ({ ...prev, [fieldName]: value }));
@@ -3684,6 +3707,11 @@ function useFormEngine({
   const handleFieldBlur = useCallback7(
     (fieldName) => {
       if (readOnly) return;
+      if (edited[fieldName]) {
+        setTouched(
+          (prev) => prev[fieldName] ? prev : { ...prev, [fieldName]: true }
+        );
+      }
       flushPendingField(fieldName);
       const latest = formDataRef.current;
       if (!showActions && deferChanges && onChange) {
@@ -3697,6 +3725,7 @@ function useFormEngine({
     },
     [
       readOnly,
+      edited,
       pendingChanges,
       deferChanges,
       deferStateUpdates,
@@ -3707,6 +3736,7 @@ function useFormEngine({
     ]
   );
   const handleSave = useCallback7(() => {
+    setSubmitAttempted(true);
     if (!hasChanges && !allowPristineSave) return;
     const finalData = deferStateUpdates && Object.keys(pendingChanges).length > 0 ? { ...formData, ...pendingChanges } : formData;
     const completeData = { ...nonSchemaData, ...finalData };
@@ -3736,6 +3766,9 @@ function useFormEngine({
   const handleCancel = useCallback7(() => {
     setFormData({ ...originalData });
     setPendingChanges({});
+    setEdited({});
+    setTouched({});
+    setSubmitAttempted(false);
     onCancel?.();
   }, [originalData, onCancel]);
   return {
@@ -3746,6 +3779,8 @@ function useFormEngine({
     hasChanges,
     isValid,
     fieldErrors,
+    touched,
+    submitAttempted,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -3754,6 +3789,10 @@ function useFormEngine({
 }
 
 // src/JsonSchemaFormRenderer.tsx
+import {
+  useValidationDisplay,
+  useSaveWhenInvalid
+} from "@petrarca/sonnet-core/config";
 import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function stripFids(data) {
   const result = {};
@@ -3901,6 +3940,22 @@ function layoutFieldsInRows(fields, rowDefs, defaultRowGap) {
   );
   return elements.concat(collectUnplacedFields(fields, placed));
 }
+function useRootFormData(ownData) {
+  return useContext2(NestedFormContext)?.rootData ?? ownData;
+}
+function blurHandlerNeeded({
+  deferStateUpdates,
+  deferChanges,
+  hasOnBlur,
+  validationDisplay
+}) {
+  return deferStateUpdates || deferChanges || hasOnBlur || validationDisplay === "onTouched";
+}
+function fieldErrorsVisible(validationDisplay, submitAttempted, isTouched) {
+  if (validationDisplay === "always") return true;
+  if (submitAttempted) return true;
+  return validationDisplay === "onTouched" && !!isTouched;
+}
 function pointerRoot(pointer) {
   const token = pointer.split("/")[1] ?? "";
   return token.replace(/~1/g, "/").replace(/~0/g, "~");
@@ -3973,6 +4028,7 @@ function FormContainer({
   disabled,
   hasChanges,
   isValid,
+  saveWhenInvalid,
   saveLabel,
   cancelLabel,
   showCancel,
@@ -3995,6 +4051,7 @@ function FormContainer({
         disabled,
         hasChanges,
         isValid,
+        saveWhenInvalid,
         saveLabel,
         cancelLabel,
         showCancel,
@@ -4037,6 +4094,8 @@ function JsonSchemaFormRenderer(props) {
     hasChanges,
     isValid,
     fieldErrors,
+    touched,
+    submitAttempted,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -4081,15 +4140,35 @@ function JsonSchemaFormRenderer(props) {
     ),
     [resolvedTemplates]
   );
+  const rootData = useRootFormData(displayData);
   const contextValue = useMemo8(
-    () => ({ renderer: nestedRenderer, templates: resolvedTemplates }),
-    [nestedRenderer, resolvedTemplates]
+    () => ({
+      renderer: nestedRenderer,
+      templates: resolvedTemplates,
+      rootData
+    }),
+    [nestedRenderer, resolvedTemplates, rootData]
+  );
+  const validationDisplay = useValidationDisplay(props.validationDisplay);
+  const saveWhenInvalid = useSaveWhenInvalid(props.saveWhenInvalid);
+  const needsBlurHandler = blurHandlerNeeded({
+    deferStateUpdates,
+    deferChanges,
+    hasOnBlur: !!onBlur,
+    validationDisplay
+  });
+  const showFieldErrors = useCallback8(
+    (fieldName) => fieldErrorsVisible(
+      validationDisplay,
+      submitAttempted,
+      touched[fieldName]
+    ),
+    [validationDisplay, submitAttempted, touched]
   );
-  const needsBlurHandler = deferStateUpdates || !!onBlur;
   const fields = useMemo8(
     () => orderedProperties.flatMap(([fieldName, property]) => {
       const rule = uiSchema[fieldName]?.["x-ui-rule"] ?? property["x-ui-rule"];
-      const { visible, enabled } = evaluateUiRule(rule, displayData);
+      const { visible, enabled } = evaluateUiRule(rule, rootData);
       if (!visible) return [];
       return [
         /* @__PURE__ */ jsx37(
@@ -4108,7 +4187,8 @@ function JsonSchemaFormRenderer(props) {
             registry: widgets,
             globalOptions,
             formData: displayData,
-            idPrefix
+            idPrefix,
+            rawErrors: showFieldErrors(fieldName) ? fieldErrors.filter((e) => pointerRoot(e.pointer) === fieldName).map((e) => e.message) : void 0
           },
           fieldName
         )
@@ -4117,6 +4197,7 @@ function JsonSchemaFormRenderer(props) {
     [
       orderedProperties,
       displayData,
+      rootData,
       resolvedSchema,
       disabled,
       readOnly,
@@ -4126,6 +4207,8 @@ function JsonSchemaFormRenderer(props) {
       globalOptions,
       idPrefix,
       needsBlurHandler,
+      showFieldErrors,
+      fieldErrors,
       handleFieldChange,
       handleFieldBlur
     ]
@@ -4145,7 +4228,8 @@ function JsonSchemaFormRenderer(props) {
         groupDefs,
         defaultRowGap,
         fieldErrors,
-        displayData,
+        // Tab rules are x-ui-rule too: root-anchored like field rules.
+        rootData,
         groupTemplate
       );
     }
@@ -4159,15 +4243,15 @@ function JsonSchemaFormRenderer(props) {
     groupDefs,
     defaultRowGap,
     fieldErrors,
-    displayData,
+    rootData,
     groupTemplate
   ]);
   const hiddenErrorCount = useMemo8(() => {
     if (!groupDefs?.length || fieldErrors.length === 0) return 0;
-    const hidden = hiddenGroupFieldNames(groupDefs, displayData);
+    const hidden = hiddenGroupFieldNames(groupDefs, rootData);
     if (hidden.size === 0) return 0;
     return fieldErrors.filter((e) => hidden.has(pointerRoot(e.pointer))).length;
-  }, [groupDefs, fieldErrors, displayData]);
+  }, [groupDefs, fieldErrors, rootData]);
   return /* @__PURE__ */ jsx37(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx37(
     FormContainer,
     {
@@ -4181,6 +4265,7 @@ function JsonSchemaFormRenderer(props) {
       disabled,
       hasChanges: hasChanges || allowPristineSave,
       isValid,
+      saveWhenInvalid,
       saveLabel,
       cancelLabel,
       showCancel,