@cosmicdrift/kumiko-renderer-web 0.146.3 → 0.147.0

package/src/widgets/use-draft.ts

@@ -3,9 +3,13 @@ import { useCallback, useState } from "react";
 /** Formular-State für Rechner-Screens: ein Draft-Objekt + `patch` für
  *  Teil-Updates + `field(name)` das die `{ id, name, value, onChange }`-Props
  *  fertig für die Feld-Widgets (NumberField/MoneyField/PercentField) liefert.
- *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper. */
+ *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper.
+ *  `idPrefix` verhindert doppelte DOM-`id`s, wenn mehrere `useDraft`-Formulare
+ *  mit gleichnamigen Feldern auf derselben Seite gemountet werden — `name`
+ *  bleibt der reine Key fürs Form-Payload. */
 export function useDraft<T extends object>(
   defaults: T,
+  options?: { readonly idPrefix?: string },
 ): {
   readonly draft: T;
   readonly patch: (changes: Partial<T>) => void;
@@ -19,17 +23,18 @@ export function useDraft<T extends object>(
     readonly onChange: (v: T[K]) => void;
   };
 } {
+  const idPrefix = options?.idPrefix;
   const [draft, setDraft] = useState<T>(defaults);
   const patch = useCallback((changes: Partial<T>) => setDraft((d) => ({ ...d, ...changes })), []);
   const reset = useCallback(() => setDraft(defaults), [defaults]);
   const field = useCallback(
     <K extends keyof T>(name: K) => ({
-      id: String(name),
+      id: idPrefix !== undefined ? `${idPrefix}-${String(name)}` : String(name),
       name: String(name),
       value: draft[name],
       onChange: (v: T[K]) => setDraft((d) => ({ ...d, [name]: v })),
     }),
-    [draft],
+    [draft, idPrefix],
   );
   return { draft, patch, reset, field };
 }