@open-mercato/ui 0.9.0 → 0.9.1-develop.7459.1.99e3accd30

package/dist/backend/CrudForm.js

@@ -553,7 +553,13 @@ function CrudForm({
   const navigationConfirmPendingRef = React.useRef(false);
   const submitNavigationBypassRef = React.useRef(false);
   const submitNavigationBypassTimeoutRef = React.useRef(null);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+  const [hasUnsavedChanges, setHasUnsavedChangesState] = React.useState(false);
+  const hasUnsavedChangesRef = React.useRef(false);
+  const setHasUnsavedChanges = React.useCallback((next) => {
+    if (hasUnsavedChangesRef.current === next) return;
+    hasUnsavedChangesRef.current = next;
+    setHasUnsavedChangesState(next);
+  }, []);
   const popStateRollbackRef = React.useRef(false);
   const shouldBypassUnsavedChangesGuardRef = React.useRef(shouldBypassUnsavedChangesGuard);
   React.useEffect(() => {
@@ -575,7 +581,7 @@ function CrudForm({
     const dirty = currentSnapshot !== snapshot;
     isDirtyRef.current = dirty;
     setHasUnsavedChanges(dirty);
-  }, [embedded, trackDirtyWhenEmbedded, values]);
+  }, [embedded, trackDirtyWhenEmbedded, values, setHasUnsavedChanges]);
   React.useEffect(() => {
     onDirtyChange?.(hasUnsavedChanges);
   }, [hasUnsavedChanges, onDirtyChange]);
@@ -619,7 +625,7 @@ function CrudForm({
     everEditedFieldIdsRef.current.clear();
     isDirtyRef.current = false;
     setHasUnsavedChanges(false);
-  }, []);
+  }, [setHasUnsavedChanges]);
   const confirmUnsavedChanges = React.useCallback(async () => {
     if (!isDirtyRef.current || typeof window === "undefined") return true;
     if (navigationPromptBypassRef.current || submitNavigationBypassRef.current) return true;
@@ -725,7 +731,7 @@ function CrudForm({
       window.history.pushState = originalPushState;
       window.history.replaceState = originalReplaceState;
     };
-  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded]);
+  }, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded, setHasUnsavedChanges]);
   const { widgets: primaryInjectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
     context: injectionContext,
     triggerOnLoad: true
@@ -1115,6 +1121,13 @@ function CrudForm({
     headerInjectionAction,
     extraActions
   ] }) : void 0;
+  const renderFooterActions = !hideFooterActions && !formReadOnly;
+  const embeddedExtraActions = renderFooterActions ? void 0 : extraActions;
+  const embeddedHeaderActions = versionHistoryEnabled || headerInjectionAction || embeddedExtraActions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    versionHistoryEnabled ? versionHistoryAction : null,
+    headerInjectionAction,
+    embeddedExtraActions
+  ] }) : void 0;
   React.useEffect(() => {
     let cancelled = false;
     async function load() {
@@ -1964,14 +1977,18 @@ function CrudForm({
       if (activeDispatch?.eventId === dispatchToken.eventId && activeDispatch.formGeneration === dispatchToken.formGeneration) {
         activeFieldChangeDispatchRef.current = null;
       }
-      if (fieldChangeDispatcherMountedRef.current && fieldChangeFormGenerationRef.current === dispatchToken.formGeneration) {
+      if (fieldChangeDispatcherMountedRef.current && fieldChangeFormGenerationRef.current === dispatchToken.formGeneration && pendingFieldChangeEventsRef.current.length > 0) {
         setFieldChangeDispatchVersion((version) => version + 1);
       }
     });
   }, [extendedInjectionEventsEnabled, fieldChangeDispatchVersion, triggerInjectionEvent, values]);
-  const onBlurRequest = React.useCallback((fieldId) => {
-    void validateFieldOnBlur(fieldId);
+  const validateFieldOnBlurRef = React.useRef(validateFieldOnBlur);
+  React.useLayoutEffect(() => {
+    validateFieldOnBlurRef.current = validateFieldOnBlur;
   }, [validateFieldOnBlur]);
+  const onBlurRequest = React.useCallback((fieldId) => {
+    void validateFieldOnBlurRef.current(fieldId);
+  }, []);
   const handleFieldsetSelectionChange = React.useCallback(
     (entityId2, nextCode) => {
       if (!nextCode) return;
@@ -2953,7 +2970,7 @@ function CrudForm({
             submit: formReadOnly ? void 0 : { formId, pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
           }
         }
-      ) : headerExtraActions ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mb-2", children: headerExtraActions }) : null,
+      ) : embeddedHeaderActions ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mb-2", children: embeddedHeaderActions }) : null,
       contentHeader,
       /* @__PURE__ */ jsx(
         DataLoader,
@@ -2986,7 +3003,7 @@ function CrudForm({
                 }
               ),
               formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-status-error-text", children: formError }) : null,
-              hideFooterActions || formReadOnly ? null : /* @__PURE__ */ jsx(
+              renderFooterActions ? /* @__PURE__ */ jsx(
                 FormFooter,
                 {
                   embedded,
@@ -3002,7 +3019,7 @@ function CrudForm({
                     submit: { pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
                   }
                 }
-              )
+              ) : null
             ] })
           )
         }
@@ -3031,7 +3048,7 @@ function CrudForm({
           submit: formReadOnly ? void 0 : { formId, pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
         }
       }
-    ) : headerExtraActions ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mb-2", children: headerExtraActions }) : null,
+    ) : embeddedHeaderActions ? /* @__PURE__ */ jsx("div", { className: "flex justify-end gap-2 mb-2", children: embeddedHeaderActions }) : null,
     contentHeader,
     /* @__PURE__ */ jsx(
       DataLoader,
@@ -3085,7 +3102,7 @@ function CrudForm({
                   );
                 }) }),
                 formError && !Object.keys(errors).length ? /* @__PURE__ */ jsx("div", { className: "text-sm text-status-error-text", children: formError }) : null,
-                hideFooterActions || formReadOnly ? null : /* @__PURE__ */ jsx(
+                renderFooterActions ? /* @__PURE__ */ jsx(
                   FormFooter,
                   {
                     embedded,
@@ -3101,7 +3118,7 @@ function CrudForm({
                       submit: { pending, label: resolvedSubmitLabel, pendingLabel: savingLabel, icon: submitIcon }
                     }
                   }
-                )
+                ) : null
               ]
             }
           ) })