@carlonicora/nextjs-jsonapi 1.123.1 → 1.124.0

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);
     }

package/src/components/tables/ContentTableSearch.tsx

@@ -69,6 +69,7 @@ export function ContentTableSearch({ data }: ContentTableSearchProps) {
       }`}
     >
       <Search
+        data-testid="content-table-search-trigger"
         className={`absolute top-1 left-1 h-4 w-4 transition-colors ${
           isExpanded ? "text-muted-foreground" : "text-muted-foreground hover:text-foreground cursor-pointer"
         }`}
@@ -76,6 +77,7 @@ export function ContentTableSearch({ data }: ContentTableSearchProps) {
       />
       {isExpanded && (
         <Input
+          data-testid="content-table-search-input"
           ref={inputRef}
           onKeyDown={(e) => {
             if (e.key === "Escape") {