@carlonicora/nextjs-jsonapi 1.123.2 → 1.124.1

package/src/components/forms/FormLayout.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from "react";
+import { cn } from "../../utils";
+
+// FormBody — the rhythm container; replaces an editor's root <div className="flex w-full flex-col">
+export function FormBody({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("flex w-full flex-col gap-4", className)}>{children}</div>;
+}
+
+// FormSection — titled/untitled group; pt-4 (first:pt-0) yields 32px before the header
+export function FormSection({
+  title,
+  children,
+  className,
+}: {
+  title?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={cn("flex flex-col gap-4 pt-4 first:pt-0", className)}>
+      {title && <h3 className="text-lg font-semibold">{title}</h3>}
+      {children}
+    </section>
+  );
+}
+
+// FormRow — responsive column grid, both axes gapped
+export function FormRow({
+  children,
+  columns = 2,
+  className,
+}: {
+  children: ReactNode;
+  columns?: 2 | 3;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("grid grid-cols-1 gap-x-4 gap-y-4", columns === 3 ? "md:grid-cols-3" : "md:grid-cols-2", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+// FormCol — column span for a child inside FormRow (replaces <div className="md:col-span-2">)
+export function FormCol({
+  children,
+  span = 1,
+  className,
+}: {
+  children: ReactNode;
+  span?: 1 | 2 | 3;
+  className?: string;
+}) {
+  const spanClass = span === 3 ? "md:col-span-3" : span === 2 ? "md:col-span-2" : "";
+  return <div className={cn(spanClass, className)}>{children}</div>;
+}

package/src/components/forms/index.ts

@@ -1,22 +1,24 @@
+export { FormFeatures } from "../../features/feature/components/forms/FormFeatures";
 export * from "./CommonAssociationForm";
-export * from "./EntityMultiSelector";
 export * from "./CommonDeleter";
 export * from "./CommonEditorButtons";
-export * from "./CommonEditorHeader";
 export * from "./CommonEditorDiscardDialog";
+export * from "./CommonEditorHeader";
 export * from "./CommonEditorTrigger";
-export * from "./useEditorDialog";
-export * from "./EditorSheet";
+export * from "./CurrencyInput";
 export * from "./DatePickerPopover";
 export * from "./DateRangeSelector";
+export * from "./EditorSheet";
+export * from "./EntityMultiSelector";
+export { default as EntitySelector } from "./EntitySelector";
 export * from "./FileUploader";
-export * from "./CurrencyInput";
-export * from "./FormCheckbox";
 export * from "./FormBlockNote";
-export * from "./FormFieldWrapper";
+export * from "./FormCheckbox";
 export * from "./FormDate";
 export * from "./FormDateTime";
+export * from "./FormFieldWrapper";
 export * from "./FormInput";
+export * from "./FormLayout";
 export * from "./FormPassword";
 export * from "./FormPlaceAutocomplete";
 export * from "./FormSelect";
@@ -26,4 +28,4 @@ export * from "./FormTextarea";
 export * from "./GdprConsentCheckbox";
 export * from "./MultiFileUploader";
 export * from "./PasswordInput";
-export { FormFeatures } from "../../features/feature/components/forms/FormFeatures";
+export * from "./useEditorDialog";

package/src/components/forms/useEditorDialog.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 type UseEditorDialogOptions = {
   dialogOpen?: boolean;
@@ -24,15 +24,32 @@ export function useEditorDialog(isFormDirty: () => boolean, options?: UseEditorD
   const [open, setOpen] = useState<boolean>(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState<boolean>(false);
 
-  // Sync open state from external dialogOpen prop
+  // Marks that the pending `open` change originated FROM the dialogOpen prop
+  // (the sync effect below), so the notify effect must not echo it back to the
+  // parent. Without this guard the two effects form an unguarded two-way
+  // binding: on mount `open` (false) and `dialogOpen` (true) disagree, so one
+  // effect pushes open→parent while the other pulls parent→open, and they chase
+  // each other every render → "Maximum update depth exceeded".
+  const syncingFromProp = useRef(false);
+
+  // Sync open state from external dialogOpen prop.
+  // `open` is intentionally NOT a dependency: this effect must run only when the
+  // prop changes. Adding `open` would re-fire on internal closes and immediately
+  // re-open the dialog (dialogOpen still true while open just went false).
   useEffect(() => {
-    if (options?.dialogOpen !== undefined) {
+    if (options?.dialogOpen !== undefined && options.dialogOpen !== open) {
+      syncingFromProp.current = true;
       setOpen(options.dialogOpen);
     }
   }, [options?.dialogOpen]);
 
-  // Notify parent when open state changes
+  // Notify parent when open state changes — but skip the echo when this change
+  // was driven by the dialogOpen prop above (otherwise it ping-pongs).
   useEffect(() => {
+    if (syncingFromProp.current) {
+      syncingFromProp.current = false;
+      return;
+    }
     if (typeof options?.onDialogOpenChange === "function") {
       options.onDialogOpenChange(open);
     }