@open-mercato/ui 0.6.6-develop.5727.1.f3ae90ed42 → 0.6.6-develop.5751.1.39143f001b

package/dist/backend/CrudForm.js

@@ -678,6 +678,15 @@ function CrudForm({
   );
   const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? "", injectionWidgets);
   const extendedInjectionEventsEnabled = CRUDFORM_EXTENDED_EVENTS_ENABLED && Boolean(resolvedInjectionSpotId);
+  const widgetRequiredFieldIds = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const widget of injectionWidgets ?? []) {
+      const metadata = widget.module?.metadata;
+      if (!metadata || metadata.enabled === false) continue;
+      for (const fieldId of metadata.requiredFields ?? []) ids.add(fieldId);
+    }
+    return ids;
+  }, [injectionWidgets]);
   const transformValidationErrors = React.useCallback(
     async (fieldErrors) => {
       if (!extendedInjectionEventsEnabled || !Object.keys(fieldErrors).length) return fieldErrors;
@@ -1656,6 +1665,28 @@ function CrudForm({
       lastErrorFieldRef.current = fieldId;
     }
   }, [errors, formId]);
+  const scrollToInjectionBlockedTarget = React.useCallback(
+    (fieldErrors) => {
+      if (typeof document === "undefined") return;
+      const form = document.getElementById(formId);
+      if (!form) return;
+      let target = null;
+      for (const fieldId of fieldErrors ? Object.keys(fieldErrors) : []) {
+        const fieldContainer = form.querySelector(`[data-crud-field-id="${fieldId}"]`);
+        if (fieldContainer) {
+          target = fieldContainer;
+          break;
+        }
+      }
+      if (!target) {
+        target = form.querySelector("[data-crud-injection-region]");
+      }
+      if (target && typeof target.scrollIntoView === "function") {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    },
+    [formId]
+  );
   const updateEditedFieldMarker = React.useCallback((id, nextValue, baselineSource = dirtyBaselineValuesRef.current) => {
     if (baselineSource && createDirtyValueSnapshot(baselineSource[id]) === createDirtyValueSnapshot(nextValue)) {
       userEditedFieldIdsRef.current.delete(id);
@@ -2078,6 +2109,7 @@ function CrudForm({
             }
             const message = result.message || t("ui.forms.flash.saveBlocked", "Save blocked by validation");
             flash(message, "error");
+            scrollToInjectionBlockedTarget(result.fieldErrors);
             setPending(false);
             return;
           }
@@ -2315,7 +2347,8 @@ function CrudForm({
           onSubmitRequest: requestSubmit,
           wrapperClassName,
           entityIdForField: primaryEntityId ?? void 0,
-          recordId
+          recordId,
+          markRequired: widgetRequiredFieldIds.has(f.id)
         },
         f.id
       );
@@ -2554,7 +2587,7 @@ function CrudForm({
           const customFieldsInnerNodes = [];
           if (g.component) {
             customFieldsInnerNodes.push(
-              /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card px-4 py-3", children: g.component({ values, setValue, errors }) }, `${g.id}-component`)
+              /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card px-4 py-3", children: g.component({ values, setValue, errors, requiredFieldIds: widgetRequiredFieldIds }) }, `${g.id}-component`)
             );
           }
           const renderedSections = renderCustomFieldsContent();
@@ -2604,7 +2637,7 @@ function CrudForm({
           }
           continue;
         }
-        const componentNode = g.component ? g.component({ values, setValue, errors }) : null;
+        const componentNode = g.component ? g.component({ values, setValue, errors, requiredFieldIds: widgetRequiredFieldIds }) : null;
         if (g.bare) {
           if (componentNode) {
             nodes.push(/* @__PURE__ */ jsx(React.Fragment, { children: componentNode }, g.id));
@@ -2710,7 +2743,7 @@ function CrudForm({
                   className: hasSecondaryColumn ? "grid grid-cols-1 lg:grid-cols-[7fr_3fr] gap-4" : "grid grid-cols-1 gap-4",
                   children: [
                     sortableGroupsEnabled ? /* @__PURE__ */ jsx(DndContext, { sensors: sortableSensors, collisionDetection: closestCenter, onDragEnd: handleGroupDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: col1Ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: col1Content }) }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: col1Content }),
-                    hasSecondaryColumn ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: col2Content }) : null
+                    hasSecondaryColumn ? /* @__PURE__ */ jsx("div", { className: "space-y-3", "data-crud-injection-region": true, children: col2Content }) : null
                   ]
                 }
               ),
@@ -2806,7 +2839,8 @@ function CrudForm({
                       onSubmitRequest: requestSubmit,
                       wrapperClassName,
                       entityIdForField: primaryEntityId ?? void 0,
-                      recordId
+                      recordId,
+                      markRequired: widgetRequiredFieldIds.has(f.id)
                     },
                     f.id
                   );
@@ -3261,7 +3295,8 @@ const FieldControl = React.memo(
     onSubmitRequest,
     wrapperClassName,
     entityIdForField,
-    recordId
+    recordId,
+    markRequired
   }) {
     const t = useT();
     const fieldSetValue = React.useCallback(
@@ -3304,7 +3339,7 @@ const FieldControl = React.memo(
         children: [
           field.type !== "checkbox" && field.label.trim().length > 0 ? /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium", children: [
             field.label,
-            field.required ? /* @__PURE__ */ jsx("span", { className: "text-status-error-text", children: " *" }) : null
+            field.required || markRequired ? /* @__PURE__ */ jsx("span", { className: "text-status-error-text", children: " *" }) : null
           ] }) : null,
           field.type === "text" && /* @__PURE__ */ jsx(
             TextInput,
@@ -3560,7 +3595,7 @@ const FieldControl = React.memo(
       }
     );
   },
-  (prev, next) => prev.field.id === next.field.id && prev.field.type === next.field.type && prev.field.label === next.field.label && prev.field.description === next.field.description && prev.field.required === next.field.required && prev.value === next.value && prev.error === next.error && prev.options === next.options && prev.loadFieldOptions === next.loadFieldOptions && prev.autoFocus === next.autoFocus && prev.onSubmitRequest === next.onSubmitRequest && prev.setValue === next.setValue && prev.onBlurRequest === next.onBlurRequest && prev.wrapperClassName === next.wrapperClassName && prev.entityIdForField === next.entityIdForField && prev.recordId === next.recordId && (prev.field.type !== "custom" || prev.values === next.values && prev.field.component === next.field.component)
+  (prev, next) => prev.field.id === next.field.id && prev.field.type === next.field.type && prev.field.label === next.field.label && prev.field.description === next.field.description && prev.field.required === next.field.required && prev.markRequired === next.markRequired && prev.value === next.value && prev.error === next.error && prev.options === next.options && prev.loadFieldOptions === next.loadFieldOptions && prev.autoFocus === next.autoFocus && prev.onSubmitRequest === next.onSubmitRequest && prev.setValue === next.setValue && prev.onBlurRequest === next.onBlurRequest && prev.wrapperClassName === next.wrapperClassName && prev.entityIdForField === next.entityIdForField && prev.recordId === next.recordId && (prev.field.type !== "custom" || prev.values === next.values && prev.field.component === next.field.component)
 );
 export {
   CrudForm