@vertesia/ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/widgets/form/Form.tsx

@@ -1,12 +1,17 @@
-
-import type { JSONSchemaObject } from "@vertesia/common";
-import { Button, FormItem } from "@vertesia/ui/core";
-import clsx from "clsx";
-import { Plus, Trash2 } from "lucide-react";
-import { ComponentType, ReactNode, SyntheticEvent, useState } from "react";
-import { FormContext, FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
-import { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from "./ManagedObject.js";
-import { Input } from "./inputs.js";
+import type { JSONSchemaObject } from '@vertesia/common';
+import { Button, FormItem } from '@vertesia/ui/core';
+import clsx from 'clsx';
+import { Plus, Trash2 } from 'lucide-react';
+import { type ComponentType, type ReactNode, type SyntheticEvent, useRef, useState } from 'react';
+import {
+    FormContext,
+    FormContextProvider,
+    type InputChangeEvent,
+    type InputComponentProps,
+    useForm,
+} from './FormContext.js';
+import { Input } from './inputs.js';
+import type { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from './ManagedObject.js';
 
 interface FormProps {
     object: ManagedObject;
@@ -20,27 +25,21 @@ export function Form({ object, components, onSubmit, children, onChange, disable
     const _onSubmit = (evt: SyntheticEvent) => {
         evt.stopPropagation();
         evt.preventDefault();
-        onSubmit && onSubmit(object.value);
-    }
+        onSubmit?.(object.value);
+    };
     object.observer = onChange;
     return (
         <FormContextProvider value={new FormContext(object, components || {}, disabled ?? false)}>
             <form className="w-full" onSubmit={_onSubmit}>
                 {children}
             </form>
-        </FormContextProvider >
-    )
+        </FormContextProvider>
+    );
 }
 
 function GeneratedFormFields() {
     const ctx = useForm();
-    return (
-        <div className='flex flex-col gap-4 w-full'>
-            {
-                ctx.object.properties.map(renderProperty)
-            }
-        </div>
-    )
+    return <div className="flex flex-col gap-4 w-full">{ctx.object.properties.map(renderProperty)}</div>;
 }
 
 export function GeneratedForm({ children, ...props }: FormProps) {
@@ -49,26 +48,26 @@ export function GeneratedForm({ children, ...props }: FormProps) {
             <GeneratedFormFields />
             {children}
         </Form>
-    )
+    );
 }
 
 function renderProperty(prop: Node) {
     if (prop.isList) {
-        return <ListField key={prop.name} object={prop as ManagedListProperty} />
+        return <ListField key={prop.name} object={prop as ManagedListProperty} />;
     } else if (prop.isObject) {
-        return <CompositeField key={prop.name} object={prop as ManagedObjectBase} />
+        return <CompositeField key={prop.name} object={prop as ManagedObjectBase} />;
     } else {
-        return <ScalarField key={prop.name} object={prop as ManagedProperty} />
+        return <ScalarField key={prop.name} object={prop as ManagedProperty} />;
     }
 }
 
 function renderItemProperty(prop: Node, editor?: string) {
     if (prop.isList) {
-        return <ListField object={prop as ManagedListProperty} />
+        return <ListField object={prop as ManagedListProperty} />;
     } else if (prop.isObject) {
-        return <CompositeField object={prop as ManagedObjectBase} />
+        return <CompositeField object={prop as ManagedObjectBase} />;
     } else {
-        return <ScalarField object={prop as ManagedProperty} editor={editor} />
+        return <ScalarField object={prop as ManagedProperty} editor={editor} />;
     }
 }
 
@@ -88,16 +87,16 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
         inline = true;
     }
 
-    const handleOnChange = (event: any) => {
+    const handleOnChange = (event: InputChangeEvent) => {
         if (disabled) return;
         if (object.schema.isBoolean) {
-            object.value = event.target.checked;
+            object.value = event.target instanceof HTMLInputElement ? event.target.checked : false;
         } else if (object.schema.isNumber) {
             object.value = parseFloat(event.target.value);
         } else {
             object.value = event.target.value;
         }
-    }
+    };
 
     if (object.isListItem) {
         // List items don't need the FormItem wrapper (no label, description, etc.)
@@ -105,11 +104,15 @@ export function ScalarField({ object, editor, inline = false }: ScalarFieldProps
     }
 
     return (
-        <FormItem label={object.title} required={object.schema.isRequired} description={object.schema.description}
-            className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}>
+        <FormItem
+            label={object.title}
+            required={object.schema.isRequired}
+            description={object.schema.description}
+            className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}
+        >
             <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />
         </FormItem>
-    )
+    );
 }
 
 interface ObjectFormProps {
@@ -117,47 +120,57 @@ interface ObjectFormProps {
 }
 function CompositeField({ object }: ObjectFormProps) {
     return (
-        <div className="flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600">
-            {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
-            {
-                object.properties.map(renderProperty)
-            }
+        <div className="flex flex-col gap-4 my-4 py-2 ps-4 border-s-4 border-s-solid border-s-slate-100 dark:border-s-slate-600">
+            {!object.isListItem && <div className="text-gray-900 dark:text-gray-200 font-semibold">{object.title}</div>}
+            {object.properties.map(renderProperty)}
         </div>
-    )
+    );
 }
 
 interface ListFieldProps {
     object: ManagedListProperty;
 }
 function ListField({ object }: ListFieldProps) {
-    const [value, setValue] = useState<any[]>(object.value || []);
     const { disabled } = useForm();
+    // Assign each row a stable id on creation so React keys survive add/remove
+    // without relying on the array index (which breaks input focus/state on edit).
+    const nextRowId = useRef((object.value ?? []).length);
+    const [rowIds, setRowIds] = useState<number[]>(() => (object.value ?? []).map((_, i) => i));
 
     const addItem = () => {
         if (disabled) return;
         object.add();
-        setValue([...object.value]);
+        setRowIds((ids) => [...ids, nextRowId.current++]);
     };
 
     const deleteItem = (index: number) => {
         if (disabled) return;
         object.remove(index);
-        setValue([...object.value]);
+        setRowIds((ids) => ids.filter((_, i) => i !== index));
     };
 
     return (
-        <div className="flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 darK:border-l-slate-600">
-            {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
-            {
-                object.items.map((item, index) => {
-                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} disabled={disabled} />;
-                })
-            }
+        <div className="flex flex-col gap-4 my-4 py-2 ps-4 border-s-4 border-s-solid border-s-slate-100 darK:border-s-slate-600">
+            {!object.isListItem && <div className="text-gray-900 dark:text-gray-200 font-semibold">{object.title}</div>}
+            {object.items.map((item, index) => {
+                const rowId = rowIds[index];
+                return (
+                    <ListItem
+                        key={rowId}
+                        object={item}
+                        list={object}
+                        onDelete={() => deleteItem(index)}
+                        disabled={disabled}
+                    />
+                );
+            })}
             <div>
-                <Button variant='outline' onClick={addItem} disabled={disabled}><Plus className="size-6" /> Add</Button>
+                <Button variant="outline" onClick={addItem} disabled={disabled}>
+                    <Plus className="size-6" /> Add
+                </Button>
             </div>
         </div>
-    )
+    );
 }
 
 interface ListItemProps {
@@ -167,14 +180,13 @@ interface ListItemProps {
     disabled?: boolean;
 }
 function ListItem({ list, object, onDelete, disabled }: ListItemProps) {
+    const editor = typeof list.schema.arraySchema.editor === 'string' ? list.schema.arraySchema.editor : undefined;
     return (
-        <div className='flex gap-2 w-full'>
-            <div className="flex-1">
-                {
-                    renderItemProperty(object, list.schema.arraySchema.editor)
-                }
-            </div>
-            <Button variant='ghost' onClick={onDelete} disabled={disabled} alt="Delete"><Trash2 className='size-4 text-destructive' /></Button>
+        <div className="flex gap-2 w-full">
+            <div className="flex-1">{renderItemProperty(object, editor)}</div>
+            <Button variant="ghost" onClick={onDelete} disabled={disabled} alt="Delete">
+                <Trash2 className="size-4 text-destructive" />
+            </Button>
         </div>
-    )
+    );
 }

package/src/widgets/form/FormContext.ts

@@ -1,5 +1,5 @@
-import { ComponentType, createContext, useContext } from "react";
-import { ManagedObject, ManagedObjectBase, Node } from "./ManagedObject.js";
+import { type ChangeEvent, type ComponentType, createContext, useContext } from 'react';
+import type { ManagedObject, ManagedObjectBase, Node } from './ManagedObject.js';
 
 const FieldSetContext = createContext<ManagedObjectBase | undefined>(undefined);
 const FieldSetContextProvider = FieldSetContext.Provider;
@@ -12,18 +12,20 @@ export function useFieldSet() {
     return ctx;
 }
 
+export type InputChangeEvent = ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+
 export interface InputComponentProps {
     object: Node;
     type: string; // the editor/input type
-    onChange?: (event: any) => void;
+    onChange?: (event: InputChangeEvent) => void;
     disabled?: boolean;
 }
 export class FormContext {
-    constructor(public object: ManagedObject,
+    constructor(
+        public object: ManagedObject,
         public components: Record<string, ComponentType<InputComponentProps>> = {},
-        public disabled: boolean = false) {
-    }
-
+        public disabled: boolean = false,
+    ) {}
 }
 
 const _FormContext = createContext<FormContext | undefined>(undefined);

package/src/widgets/form/ManagedObject.ts

@@ -1,8 +1,8 @@
-import type { JSONSchema, JSONSchemaArray, JSONSchemaObject, JSONSchemaType } from "@vertesia/common";
-import { ArrayPropertySchema, PropertySchema, Schema } from "./schema.js";
+import type { JSONSchema, JSONSchemaArray, JSONSchemaObject, JSONSchemaType } from '@vertesia/common';
+import { type ArrayPropertySchema, type PropertySchema, Schema } from './schema.js';
 
 export function computeTitleFromName(name: string) {
-    name = name.replace(/_/g, ' ').replace(/([a-z0-9])&([A-Z])/g, "$1 $2");
+    name = name.replace(/_/g, ' ').replace(/([a-z0-9])&([A-Z])/g, '$1 $2');
     return name[0].toUpperCase() + name.slice(1);
 }
 
@@ -21,28 +21,31 @@ function getInputType(_name: string, schema: PropertySchema) {
         case 'boolean':
             return 'checkbox';
         case 'string':
-            return "text";
+            return 'text';
         default:
             return 'text';
     }
 }
 
-
 export abstract class Node<SchemaT extends Schema = Schema, ValueT = JSONSchemaType> {
     // change observer
+    // biome-ignore lint/suspicious/noConfusingVoidType: void in union is intentional — observers may return nothing or false to stop bubbling
     observer?: (node: Node) => void | false; // return false to stop bubbling
 
     abstract value: ValueT;
 
-    constructor(public parent: Node | null, public schema: SchemaT, public name: string) {
-    }
+    constructor(
+        public parent: Node | null,
+        public schema: SchemaT,
+        public name: string,
+    ) {}
 
     get isRoot() {
         return !this.parent;
     }
 
     get root(): Node {
-        return this.parent ? this.parent.root : this as Node;
+        return this.parent ? this.parent.root : (this as Node);
     }
 
     get path(): string[] {
@@ -73,20 +76,15 @@ export abstract class Node<SchemaT extends Schema = Schema, ValueT = JSONSchemaT
         if (this.observer) {
             if (this.observer(this as Node) === false) {
                 return;
-            };
+            }
         }
-        this.parent && this.parent.onChange(node);
+        this.parent?.onChange(node);
     }
-
 }
 
 export abstract class ManagedObjectBase<SchemaT extends Schema = Schema> extends Node<SchemaT, JSONSchemaObject> {
     abstract value: JSONSchemaObject;
 
-    constructor(parent: Node | null, schema: SchemaT, name: string) {
-        super(parent, schema, name);
-    }
-
     get isObject(): boolean {
         return true;
     }
@@ -134,9 +132,17 @@ export abstract class ManagedObjectBase<SchemaT extends Schema = Schema> extends
         const out: Node[] = [];
         for (const schema of Object.values(this.schema.properties)) {
             if (schema.isMulti) {
-                out.push(new ManagedListProperty(this, schema as ArrayPropertySchema, this.getOrInitArrayProperty(schema.name)));
+                out.push(
+                    new ManagedListProperty(
+                        this,
+                        schema as ArrayPropertySchema,
+                        this.getOrInitArrayProperty(schema.name),
+                    ),
+                );
             } else if (schema.isObject) {
-                out.push(new ManagedObjectProperty(this, schema, schema.name, this.getOrInitObjectProperty(schema.name)));
+                out.push(
+                    new ManagedObjectProperty(this, schema, schema.name, this.getOrInitObjectProperty(schema.name)),
+                );
             } else {
                 out.push(new ManagedProperty(this, schema));
             }
@@ -147,28 +153,29 @@ export abstract class ManagedObjectBase<SchemaT extends Schema = Schema> extends
     [Symbol.iterator]() {
         return this.properties[Symbol.iterator]();
     }
-
 }
 
 export class ManagedObject extends ManagedObjectBase<Schema> {
-
-    constructor(schema: Schema | JSONSchema, public value: JSONSchemaObject = {}) {
+    constructor(
+        schema: Schema | JSONSchema,
+        public value: JSONSchemaObject = {},
+    ) {
         super(null, schema instanceof Schema ? schema : new Schema(schema), '#root');
     }
-
 }
 
 export class ManagedObjectProperty extends ManagedObjectBase<PropertySchema> {
-
-    constructor(parent: Node, schema: PropertySchema, name: string, public value: JSONSchemaObject) {
+    constructor(
+        parent: Node,
+        schema: PropertySchema,
+        name: string,
+        public value: JSONSchemaObject,
+    ) {
         super(parent, schema, name);
     }
-
 }
 
-
 export class ManagedProperty extends Node<PropertySchema> {
-
     constructor(parent: ManagedObjectBase, schema: PropertySchema) {
         super(parent, schema, schema.name);
         if (parent.value[this.name] === undefined && schema.defaultValue !== undefined) {
@@ -194,14 +201,16 @@ export class ManagedProperty extends Node<PropertySchema> {
     getInputType() {
         return getInputType(this.name, this.schema);
     }
-
 }
 
 export class ManagedListProperty extends Node<ArrayPropertySchema, JSONSchemaArray> {
-
     items: MangedListItem[] = [];
 
-    constructor(parent: ManagedObjectBase, schema: ArrayPropertySchema, public value: JSONSchemaArray) {
+    constructor(
+        parent: ManagedObjectBase,
+        schema: ArrayPropertySchema,
+        public value: JSONSchemaArray,
+    ) {
         super(parent, schema, schema.name);
         for (const _v of this.value) {
             this.add();
@@ -229,7 +238,7 @@ export class ManagedListProperty extends Node<ArrayPropertySchema, JSONSchemaArr
     //TODO change is fired even if the removed item is transient
     // how to mark an item as transient (an added item not yet set by the user)
     remove(index: number) {
-        const value = this.value
+        const value = this.value;
         if (index >= 0 && index < this.items.length) {
             this.items.splice(index, 1);
             // update indexes
@@ -270,19 +279,20 @@ export class ManagedListProperty extends Node<ArrayPropertySchema, JSONSchemaArr
             this.items.pop();
         }
     }
-
 }
 
 export class ManageObjectEntry extends ManagedObjectBase {
-
     key: string;
 
-    constructor(parent: ManagedListProperty, public index: number) {
+    constructor(
+        parent: ManagedListProperty,
+        public index: number,
+    ) {
         super(parent, parent.schema, String(index));
         if (parent.value[index] === undefined) {
             parent.value[index] = {};
         }
-        this.key = this.name + '@' + Date.now();
+        this.key = `${this.name}@${Date.now()}`;
     }
 
     get isListItem(): boolean {
@@ -296,19 +306,20 @@ export class ManageObjectEntry extends ManagedObjectBase {
     get value() {
         return (this.parent as ManagedListProperty).value[this.index] as JSONSchemaObject;
     }
-
 }
 
 export class ManagedScalarEntry extends Node<ArrayPropertySchema> {
-
     key: string;
 
-    constructor(parent: ManagedListProperty, public index: number) {
+    constructor(
+        parent: ManagedListProperty,
+        public index: number,
+    ) {
         super(parent, parent.schema, String(index));
         if (parent.value[index] === undefined && parent.schema.defaultValue !== undefined) {
             parent.value[index] = parent.schema.defaultValue;
         }
-        this.key = this.name + '@' + Date.now();
+        this.key = `${this.name}@${Date.now()}`;
     }
 
     get isScalar(): boolean {
@@ -330,7 +341,6 @@ export class ManagedScalarEntry extends Node<ArrayPropertySchema> {
     getInputType() {
         return getInputType(this.name, this.schema);
     }
-
 }
 
-export type MangedListItem = ManagedScalarEntry | ManageObjectEntry;
+export type MangedListItem = ManagedScalarEntry | ManageObjectEntry;

package/src/widgets/form/fields.tsx

@@ -1,4 +1,4 @@
-import { FormItem } from "@vertesia/ui/core";
+import { FormItem } from '@vertesia/ui/core';
 
 interface FormLabelProps {
     label?: string;
@@ -17,20 +17,12 @@ interface FormHelperProps {
     children: React.ReactNode | React.ReactNode[];
 }
 export function FormHelper({ children }: FormHelperProps) {
-    return (
-        <p className="mt-2 text-sm text-gray-500">
-            {children}
-        </p>
-    )
+    return <p className="mt-2 text-sm text-gray-500">{children}</p>;
 }
 
 interface FormErrorProps {
     children: React.ReactNode | React.ReactNode[];
 }
 export function FormError({ children }: FormErrorProps) {
-    return (
-        <p className="mt-2 text-sm text-red-600">
-            {children}
-        </p>
-    )
+    return <p className="mt-2 text-sm text-red-600">{children}</p>;
 }

package/src/widgets/form/index.ts

@@ -1,6 +1,6 @@
-export * from "./Form.js";
-export * from "./FormContext.js";
-export * from "./ManagedObject.js";
-export * from "./fields.js";
-export * from "./inputs.js";
-export * from "./schema.js";
+export * from './Form.js';
+export * from './FormContext.js';
+export * from './fields.js';
+export * from './inputs.js';
+export * from './ManagedObject.js';
+export * from './schema.js';

package/src/widgets/form/inputs.tsx

@@ -1,45 +1,65 @@
-import clsx from "clsx";
-import React, { ChangeEvent, InputHTMLAttributes, useState } from "react";
-import { ManagedProperty } from "./ManagedObject.js";
-import { Styles } from "@vertesia/ui/core";
+import { Styles } from '@vertesia/ui/core';
+import clsx from 'clsx';
+import React, { type ChangeEvent, type InputHTMLAttributes, useState } from 'react';
+import type { ManagedProperty } from './ManagedObject.js';
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     object: ManagedProperty;
 }
-const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(({ object, type = 'text', onChange, ...props }, ref) => {
-    const [actualValue, setValue] = useState(object.value != null ? String(object.value) : '');
-    const [booleanValue, setBooleanValue] = useState(object.schema.isBoolean && object.value === true);
+const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
+    ({ object, type = 'text', onChange, ...props }, ref) => {
+        const [actualValue, setValue] = useState(object.value != null ? String(object.value) : '');
+        const [booleanValue, setBooleanValue] = useState(object.schema.isBoolean && object.value === true);
 
-    if (props.className) {
-        props.className = clsx(Styles.INPUT, props.className);
-    } else {
-        props.className = Styles.INPUT;
-    }
+        if (props.className) {
+            props.className = clsx(Styles.INPUT, props.className);
+        } else {
+            props.className = Styles.INPUT;
+        }
 
-    const _onChange = (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (props.disabled) return;
-        setValue(ev.target.value);
-        if (object.schema.isBoolean) {
-            object.value = (ev.target as HTMLInputElement).checked;
-            setBooleanValue(object.value)
+        const _onChange = (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            if (props.disabled) return;
+            setValue(ev.target.value);
+            if (object.schema.isBoolean) {
+                object.value = (ev.target as HTMLInputElement).checked;
+                setBooleanValue(object.value);
+            } else {
+                object.value = ev.target.value;
+            }
+            onChange?.(ev);
+        };
+        if (type === 'textarea') {
+            return (
+                <textarea
+                    ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+                    {...props}
+                    value={actualValue}
+                    onChange={_onChange}
+                />
+            );
+        } else if (type === 'checkbox') {
+            return (
+                <input
+                    ref={ref as React.ForwardedRef<HTMLInputElement>}
+                    {...props}
+                    type="checkbox"
+                    checked={booleanValue}
+                    onChange={_onChange}
+                    className="form-check-input"
+                />
+            );
         } else {
-            object.value = ev.target.value;
+            return (
+                <input
+                    ref={ref as React.ForwardedRef<HTMLInputElement>}
+                    {...props}
+                    type={type}
+                    value={actualValue}
+                    onChange={_onChange}
+                />
+            );
         }
-        onChange && onChange(ev);
-    }
-    if (type === 'textarea') {
-        return (
-            <textarea ref={ref as React.ForwardedRef<HTMLTextAreaElement>} {...props} value={actualValue} onChange={_onChange} />
-        )
-    } else if (type === 'checkbox') {
-        return (
-            <input ref={ref as React.ForwardedRef<HTMLInputElement>} {...props} type="checkbox" checked={booleanValue} onChange={_onChange} className="form-check-input" />
-        )
-    } else {
-        return (
-            <input ref={ref as React.ForwardedRef<HTMLInputElement>} {...props} type={type} value={actualValue} onChange={_onChange} />
-        )
-    }
-});
+    },
+);
 
 export { Input };