@gtkx/react 0.17.2 → 0.18.0

package/dist/nodes/column-view-column.d.ts

@@ -1,18 +1,20 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { ColumnViewColumnProps } from "../jsx.js";
+import type { Node } from "../node.js";
 import type { Container } from "../types.js";
-import type { ListStore } from "./internal/list-store.js";
+import type { TreeStore } from "./internal/tree-store.js";
 import { VirtualNode } from "./virtual.js";
-type Props = Partial<ColumnViewColumnProps>;
-export declare class ColumnViewColumnNode extends VirtualNode<Props> {
-    static priority: number;
-    static matches(type: string): boolean;
-    column: Gtk.ColumnViewColumn;
+import { WidgetNode } from "./widget.js";
+export declare class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, WidgetNode<Gtk.ColumnView>, never> {
+    isValidChild(_child: Node): boolean;
+    isValidParent(parent: Node): boolean;
+    private column;
     private itemRenderer;
-    constructor(typeName: string, props: Props, container: undefined, rootContainer: Container);
-    unmount(): void;
-    setStore(model: ListStore | null): void;
+    constructor(typeName: string, props: ColumnViewColumnProps, container: undefined, rootContainer: Container);
+    commitUpdate(oldProps: ColumnViewColumnProps | null, newProps: ColumnViewColumnProps): void;
+    detachDeletedInstance(): void;
+    getColumn(): Gtk.ColumnViewColumn;
+    setStore(model: TreeStore | null): void;
     setEstimatedRowHeight(height: number | null): void;
-    updateProps(oldProps: Props | null, newProps: Props): void;
+    private applyOwnProps;
 }
-export {};

package/dist/nodes/column-view-column.js

@@ -1,11 +1,14 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { registerNodeClass } from "../registry.js";
 import { ListItemRenderer } from "./internal/list-item-renderer.js";
+import { hasChanged } from "./internal/props.js";
 import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
 export class ColumnViewColumnNode extends VirtualNode {
-    static priority = 1;
-    static matches(type) {
-        return type === "ColumnViewColumn";
+    isValidChild(_child) {
+        return false;
+    }
+    isValidParent(parent) {
+        return parent instanceof WidgetNode && parent.container instanceof Gtk.ColumnView;
     }
     column;
     itemRenderer;
@@ -15,9 +18,16 @@ export class ColumnViewColumnNode extends VirtualNode {
         this.column = new Gtk.ColumnViewColumn();
         this.column.setFactory(this.itemRenderer.getFactory());
     }
-    unmount() {
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+    detachDeletedInstance() {
         this.itemRenderer.dispose();
-        super.unmount();
+        super.detachDeletedInstance();
+    }
+    getColumn() {
+        return this.column;
     }
     setStore(model) {
         this.itemRenderer.setStore(model);
@@ -25,30 +35,26 @@ export class ColumnViewColumnNode extends VirtualNode {
     setEstimatedRowHeight(height) {
         this.itemRenderer.setEstimatedItemHeight(height);
     }
-    updateProps(oldProps, newProps) {
-        if (!oldProps || oldProps.renderCell !== newProps.renderCell) {
-            if (newProps.renderCell) {
-                this.itemRenderer.setRenderFn(newProps.renderCell);
-            }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "renderCell")) {
+            this.itemRenderer.setRenderFn(newProps.renderCell);
         }
-        if (!oldProps || oldProps.title !== newProps.title) {
-            this.column.setTitle(newProps.title ?? "");
+        if (hasChanged(oldProps, newProps, "title")) {
+            this.column.setTitle(newProps.title);
         }
-        if (!oldProps || oldProps.expand !== newProps.expand) {
+        if (hasChanged(oldProps, newProps, "expand")) {
             this.column.setExpand(newProps.expand ?? false);
         }
-        if (!oldProps || oldProps.resizable !== newProps.resizable) {
+        if (hasChanged(oldProps, newProps, "resizable")) {
             this.column.setResizable(newProps.resizable ?? false);
         }
-        if (!oldProps || oldProps.fixedWidth !== newProps.fixedWidth) {
+        if (hasChanged(oldProps, newProps, "fixedWidth")) {
             this.column.setFixedWidth(newProps.fixedWidth ?? -1);
         }
-        if (!oldProps || oldProps.id !== newProps.id) {
-            if (newProps.id) {
-                this.column.setId(newProps.id);
-            }
+        if (hasChanged(oldProps, newProps, "id")) {
+            this.column.setId(newProps.id);
         }
-        if (!oldProps || oldProps.sortable !== newProps.sortable) {
+        if (hasChanged(oldProps, newProps, "sortable")) {
             if (newProps.sortable) {
                 this.column.setSorter(new Gtk.StringSorter());
             }
@@ -56,7 +62,5 @@ export class ColumnViewColumnNode extends VirtualNode {
                 this.column.setSorter(null);
             }
         }
-        super.updateProps(oldProps, newProps);
     }
 }
-registerNodeClass(ColumnViewColumnNode);

package/dist/nodes/column-view.d.ts

@@ -1 +1,32 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkColumnViewProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { ColumnViewColumnNode } from "./column-view-column.js";
+import { ListItemNode } from "./list-item.js";
+import { type ListModelProps } from "./models/list.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight"];
+type ColumnViewProps = Pick<GtkColumnViewProps, (typeof OWN_PROPS)[number]> & ListModelProps;
+type ColumnViewChild = ListItemNode | ColumnViewColumnNode;
+export declare class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps, ColumnViewChild> {
+    private handleSortChange;
+    private list;
+    isValidChild(child: Node): boolean;
+    private columnNodes;
+    private estimatedRowHeight;
+    constructor(typeName: string, props: ColumnViewProps, container: Gtk.ColumnView, rootContainer: Container);
+    appendChild(child: ColumnViewChild): void;
+    insertBefore(child: ColumnViewChild, before: ColumnViewChild): void;
+    removeChild(child: ColumnViewChild): void;
+    finalizeInitialChildren(props: ColumnViewProps): boolean;
+    commitUpdate(oldProps: ColumnViewProps | null, newProps: ColumnViewProps): void;
+    commitMount(): void;
+    detachDeletedInstance(): void;
+    private applyOwnProps;
+    private findColumn;
+    private getColumn;
+    private getColumnIndex;
+    private findColumnInView;
+}
 export {};

package/dist/nodes/column-view.js

@@ -1,21 +1,18 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { COLUMN_VIEW_CLASSES } from "../generated/internal.js";
-import { registerNodeClass } from "../registry.js";
 import { ColumnViewColumnNode } from "./column-view-column.js";
-import { filterProps, matchesAnyClass } from "./internal/utils.js";
+import { filterProps, hasChanged } from "./internal/props.js";
 import { ListItemNode } from "./list-item.js";
 import { ListModel } from "./models/list.js";
 import { WidgetNode } from "./widget.js";
-const PROP_NAMES = ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight"];
-class ColumnViewNode extends WidgetNode {
-    static priority = 1;
+const OWN_PROPS = ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight"];
+export class ColumnViewNode extends WidgetNode {
     handleSortChange = null;
     list;
+    isValidChild(child) {
+        return child instanceof ListItemNode || child instanceof ColumnViewColumnNode;
+    }
     columnNodes = new Set();
     estimatedRowHeight = null;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass(COLUMN_VIEW_CLASSES, containerOrClass);
-    }
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
         this.list = new ListModel({ owner: this, signalStore: this.signalStore }, {
@@ -24,82 +21,88 @@ class ColumnViewNode extends WidgetNode {
             onSelectionChanged: props.onSelectionChanged,
         });
     }
-    mount() {
-        super.mount();
-        this.container.setModel(this.list.getSelectionModel());
-    }
     appendChild(child) {
+        super.appendChild(child);
         if (child instanceof ListItemNode) {
             this.list.appendChild(child);
             return;
         }
-        if (!(child instanceof ColumnViewColumnNode)) {
-            throw new Error(`Cannot append '${child.typeName}' to 'ColumnView': expected x.ColumnViewColumn or x.ListItem`);
-        }
-        const existingColumn = this.findColumnInView(child.column);
+        const existingColumn = this.findColumnInView(child.getColumn());
         if (existingColumn) {
             this.container.removeColumn(existingColumn);
         }
         child.setStore(this.list.getStore());
         child.setEstimatedRowHeight(this.estimatedRowHeight);
-        this.container.appendColumn(child.column);
+        this.container.appendColumn(child.getColumn());
         this.columnNodes.add(child);
     }
     insertBefore(child, before) {
+        super.insertBefore(child, before);
         if (child instanceof ListItemNode) {
-            this.list.insertBefore(child, before);
+            if (before instanceof ListItemNode) {
+                this.list.insertBefore(child, before);
+            }
             return;
         }
-        if (!(child instanceof ColumnViewColumnNode)) {
-            throw new Error(`Cannot insert '${child.typeName}' into 'ColumnView': expected x.ColumnViewColumn or x.ListItem`);
-        }
-        const existingColumn = this.findColumnInView(child.column);
+        const existingColumn = this.findColumnInView(child.getColumn());
         if (existingColumn) {
             this.container.removeColumn(existingColumn);
         }
         child.setStore(this.list.getStore());
         child.setEstimatedRowHeight(this.estimatedRowHeight);
         if (before instanceof ColumnViewColumnNode) {
-            const beforeIndex = this.getColumnIndex(before.column);
-            this.container.insertColumn(beforeIndex, child.column);
+            const beforeIndex = this.getColumnIndex(before.getColumn());
+            this.container.insertColumn(beforeIndex, child.getColumn());
         }
         else {
-            this.container.appendColumn(child.column);
+            this.container.appendColumn(child.getColumn());
         }
         this.columnNodes.add(child);
     }
     removeChild(child) {
         if (child instanceof ListItemNode) {
             this.list.removeChild(child);
+            super.removeChild(child);
             return;
         }
-        if (!(child instanceof ColumnViewColumnNode)) {
-            throw new Error(`Cannot remove '${child.typeName}' from 'ColumnView': expected x.ColumnViewColumn or x.ListItem`);
-        }
-        const existingColumn = this.findColumnInView(child.column);
+        const existingColumn = this.findColumnInView(child.getColumn());
         if (existingColumn) {
             this.container.removeColumn(existingColumn);
         }
         child.setStore(null);
         this.columnNodes.delete(child);
+        super.removeChild(child);
     }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps ? filterProps(oldProps, PROP_NAMES) : null, filterProps(newProps, PROP_NAMES));
+    finalizeInitialChildren(props) {
+        super.finalizeInitialChildren(props);
+        return true;
+    }
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
         this.applyOwnProps(oldProps, newProps);
-        this.list.updateProps(oldProps, newProps);
+        this.list.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+    }
+    commitMount() {
+        super.commitMount();
+        this.list.flushBatch();
+        this.container.setModel(this.list.getSelectionModel());
+    }
+    detachDeletedInstance() {
+        this.columnNodes.clear();
+        super.detachDeletedInstance();
     }
     applyOwnProps(oldProps, newProps) {
-        if (!oldProps || oldProps.onSortChanged !== newProps.onSortChanged) {
+        if (hasChanged(oldProps, newProps, "onSortChanged")) {
             const sorter = this.container.getSorter();
             const onSortChanged = newProps.onSortChanged;
-            if (sorter) {
+            if (sorter instanceof Gtk.ColumnViewSorter) {
                 this.handleSortChange = () => {
                     onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
                 };
                 this.signalStore.set(this, sorter, "changed", this.handleSortChange);
             }
         }
-        if (!oldProps || oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
+        if (hasChanged(oldProps, newProps, "sortColumn") || hasChanged(oldProps, newProps, "sortOrder")) {
             const sortColumn = newProps.sortColumn;
             const sortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
             if (!sortColumn) {
@@ -109,7 +112,7 @@ class ColumnViewNode extends WidgetNode {
                 this.container.sortByColumn(sortOrder, this.getColumn(sortColumn));
             }
         }
-        if (!oldProps || oldProps.estimatedRowHeight !== newProps.estimatedRowHeight) {
+        if (hasChanged(oldProps, newProps, "estimatedRowHeight")) {
             this.estimatedRowHeight = newProps.estimatedRowHeight ?? null;
             for (const column of this.columnNodes) {
                 column.setEstimatedRowHeight(this.estimatedRowHeight);
@@ -120,6 +123,8 @@ class ColumnViewNode extends WidgetNode {
         const columns = this.container.getColumns();
         for (let i = 0; i < columns.getNItems(); i++) {
             const column = columns.getObject(i);
+            if (!(column instanceof Gtk.ColumnViewColumn))
+                continue;
             const result = predicate(column, i);
             if (result !== null)
                 return result;
@@ -129,7 +134,7 @@ class ColumnViewNode extends WidgetNode {
     getColumn(columnId) {
         const column = this.findColumn((col) => (col.getId() === columnId ? col : null));
         if (!column) {
-            throw new Error(`Unable to find column '${columnId}' in ColumnView`);
+            throw new Error(`Unable to find column '${columnId}' in ${this.typeName}`);
         }
         return column;
     }
@@ -137,7 +142,7 @@ class ColumnViewNode extends WidgetNode {
         const targetId = column.getId();
         const index = this.findColumn((col, i) => (col.getId() === targetId ? i : null));
         if (index === null) {
-            throw new Error(`Unable to find column '${targetId}' in ColumnView`);
+            throw new Error(`Unable to find column '${targetId}' in ${this.typeName}`);
         }
         return index;
     }
@@ -145,9 +150,4 @@ class ColumnViewNode extends WidgetNode {
         const targetId = column.getId();
         return this.findColumn((col) => (col.getId() === targetId ? col : null));
     }
-    unmount() {
-        this.columnNodes.clear();
-        super.unmount();
-    }
 }
-registerNodeClass(ColumnViewNode);

package/dist/nodes/container-slot.d.ts

@@ -0,0 +1,15 @@
+import type { ContainerSlotProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export declare class ContainerSlotNode extends VirtualNode<ContainerSlotProps, WidgetNode, WidgetNode> {
+    isValidChild(child: Node): boolean;
+    isValidParent(parent: Node): boolean;
+    setParent(parent: WidgetNode | null): void;
+    appendChild(child: WidgetNode): void;
+    insertBefore(child: WidgetNode, before: WidgetNode): void;
+    removeChild(child: WidgetNode): void;
+    detachDeletedInstance(): void;
+    private attachToParent;
+    private detachAllChildren;
+}

package/dist/nodes/container-slot.js

@@ -0,0 +1,68 @@
+import { isRemovable } from "./internal/predicates.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export class ContainerSlotNode extends VirtualNode {
+    isValidChild(child) {
+        return child instanceof WidgetNode;
+    }
+    isValidParent(parent) {
+        return parent instanceof WidgetNode;
+    }
+    setParent(parent) {
+        if (!parent && this.parent) {
+            this.detachAllChildren(this.parent.container);
+        }
+        super.setParent(parent);
+        if (parent) {
+            for (const child of this.children) {
+                this.attachToParent(parent.container, child.container);
+            }
+        }
+    }
+    appendChild(child) {
+        super.appendChild(child);
+        if (this.parent) {
+            this.attachToParent(this.parent.container, child.container);
+        }
+    }
+    insertBefore(child, before) {
+        super.insertBefore(child, before);
+        if (this.parent) {
+            this.attachToParent(this.parent.container, child.container);
+        }
+    }
+    removeChild(child) {
+        if (this.parent && isRemovable(this.parent.container)) {
+            const widget = child.container;
+            const currentParent = widget.getParent();
+            if (currentParent && currentParent === this.parent.container) {
+                this.parent.container.remove(widget);
+            }
+        }
+        super.removeChild(child);
+    }
+    detachDeletedInstance() {
+        if (this.parent) {
+            this.detachAllChildren(this.parent.container);
+        }
+        super.detachDeletedInstance();
+    }
+    attachToParent(parent, child) {
+        const methodName = this.props.id;
+        const method = parent[methodName];
+        if (typeof method !== "function") {
+            throw new Error(`Method '${methodName}' not found on '${parent.constructor.name}'`);
+        }
+        method.call(parent, child);
+    }
+    detachAllChildren(parent) {
+        if (!isRemovable(parent))
+            return;
+        for (const child of this.children) {
+            const currentParent = child.container.getParent();
+            if (currentParent && currentParent === parent) {
+                parent.remove(child.container);
+            }
+        }
+    }
+}

package/dist/nodes/dialog.d.ts

@@ -1,11 +1,9 @@
-import * as Adw from "@gtkx/ffi/adw";
-import type * as Gtk from "@gtkx/ffi/gtk";
-import type { Container, ContainerClass } from "../types.js";
+import type * as Adw from "@gtkx/ffi/adw";
+import type { Props } from "../types.js";
 import { WidgetNode } from "./widget.js";
 export declare class DialogNode extends WidgetNode<Adw.Dialog> {
-    static priority: number;
-    parent: Gtk.Window | null;
-    static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
-    mount(): void;
-    unmount(): void;
+    protected shouldAttachToParent(): boolean;
+    finalizeInitialChildren(props: Props): boolean;
+    commitMount(): void;
+    detachDeletedInstance(): void;
 }

package/dist/nodes/dialog.js

@@ -1,20 +1,19 @@
-import * as Adw from "@gtkx/ffi/adw";
-import { registerNodeClass } from "../registry.js";
-import { matchesAnyClass } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
+import { WindowNode } from "./window.js";
 export class DialogNode extends WidgetNode {
-    static priority = 1;
-    parent = null;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([Adw.Dialog], containerOrClass);
+    shouldAttachToParent() {
+        return false;
     }
-    mount() {
-        this.container.present(this.parent ?? undefined);
-        super.mount();
+    finalizeInitialChildren(props) {
+        this.commitUpdate(null, props);
+        return true;
     }
-    unmount() {
+    commitMount() {
+        const parent = this.parent instanceof WindowNode ? this.parent.container : undefined;
+        this.container.present(parent);
+    }
+    detachDeletedInstance() {
         this.container.forceClose();
-        super.unmount();
+        super.detachDeletedInstance();
     }
 }
-registerNodeClass(DialogNode);

package/dist/nodes/drawing-area.d.ts

@@ -1 +1,13 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkDrawingAreaProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { EventControllerNode } from "./event-controller.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["onDraw"];
+type DrawingAreaProps = Pick<GtkDrawingAreaProps, (typeof OWN_PROPS)[number]>;
+export declare class DrawingAreaNode extends WidgetNode<Gtk.DrawingArea, DrawingAreaProps, EventControllerNode> {
+    isValidChild(child: Node): boolean;
+    commitUpdate(oldProps: DrawingAreaProps | null, newProps: DrawingAreaProps): void;
+    private applyOwnProps;
+}
 export {};

package/dist/nodes/drawing-area.js

@@ -1,36 +1,36 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import { registerNodeClass } from "../registry.js";
-import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
+import { EventControllerNode } from "./event-controller.js";
+import { filterProps, hasChanged } from "./internal/props.js";
 import { WidgetNode } from "./widget.js";
 const OWN_PROPS = ["onDraw"];
-class DrawingAreaNode extends WidgetNode {
-    static priority = 1;
-    pendingDrawFunc = null;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([Gtk.DrawingArea], containerOrClass);
+const pendingDrawFuncs = [];
+function ensurePendingBatch() {
+    if (pendingDrawFuncs.length === 0) {
+        queueMicrotask(flushPendingDrawFuncs);
     }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+    return pendingDrawFuncs;
+}
+function flushPendingDrawFuncs() {
+    const batch = pendingDrawFuncs.splice(0);
+    for (const { container, fn } of batch) {
+        container.setDrawFunc(fn);
+    }
+}
+export class DrawingAreaNode extends WidgetNode {
+    isValidChild(child) {
+        return child instanceof EventControllerNode;
+    }
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
         this.applyOwnProps(oldProps, newProps);
     }
     applyOwnProps(oldProps, newProps) {
-        if (hasChanged(oldProps, newProps, "onDraw") && newProps.onDraw) {
-            if (this.container.getRealized()) {
+        if (hasChanged(oldProps, newProps, "onDraw")) {
+            if (this.container.getAllocatedWidth() > 0) {
                 this.container.setDrawFunc(newProps.onDraw);
             }
-            else {
-                this.pendingDrawFunc = newProps.onDraw;
-                this.signalStore.set(this, this.container, "realize", this.onRealize.bind(this));
+            else if (newProps.onDraw) {
+                ensurePendingBatch().push({ container: this.container, fn: newProps.onDraw });
             }
         }
     }
-    onRealize() {
-        if (this.pendingDrawFunc) {
-            const drawFunc = this.pendingDrawFunc;
-            this.pendingDrawFunc = null;
-            queueMicrotask(() => this.container.setDrawFunc(drawFunc));
-        }
-        this.signalStore.set(this, this.container, "realize", null);
-    }
 }
-registerNodeClass(DrawingAreaNode);

package/dist/nodes/drop-down.d.ts

@@ -0,0 +1,22 @@
+import type { AdwComboRowProps, GtkDropDownProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { DropDownWidget } from "../registry.js";
+import type { Container } from "../types.js";
+import { ListItemNode } from "./list-item.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["selectedId", "onSelectionChanged"];
+type DropDownProps = Pick<GtkDropDownProps | AdwComboRowProps, (typeof OWN_PROPS)[number]>;
+export declare class DropDownNode extends WidgetNode<DropDownWidget, DropDownProps, ListItemNode> {
+    private store;
+    private initialSelectedId;
+    isValidChild(child: Node): boolean;
+    constructor(typeName: string, props: DropDownProps, container: DropDownWidget, rootContainer: Container);
+    finalizeInitialChildren(props: DropDownProps): boolean;
+    private reapplyInitialSelectedId;
+    appendChild(child: ListItemNode): void;
+    insertBefore(child: ListItemNode, before: ListItemNode): void;
+    removeChild(child: ListItemNode): void;
+    commitUpdate(oldProps: DropDownProps | null, newProps: DropDownProps): void;
+    private applyOwnProps;
+}
+export {};

package/dist/nodes/drop-down.js

@@ -0,0 +1,72 @@
+import { filterProps, hasChanged } from "./internal/props.js";
+import { SimpleListStore } from "./internal/simple-list-store.js";
+import { ListItemNode } from "./list-item.js";
+import { WidgetNode } from "./widget.js";
+const OWN_PROPS = ["selectedId", "onSelectionChanged"];
+export class DropDownNode extends WidgetNode {
+    store = new SimpleListStore();
+    initialSelectedId;
+    isValidChild(child) {
+        return child instanceof ListItemNode;
+    }
+    constructor(typeName, props, container, rootContainer) {
+        super(typeName, props, container, rootContainer);
+        this.store.beginBatch();
+        this.initialSelectedId = props.selectedId;
+        this.container.setModel(this.store.getModel());
+    }
+    finalizeInitialChildren(props) {
+        super.finalizeInitialChildren(props);
+        this.store.flushBatch();
+        this.reapplyInitialSelectedId();
+        return false;
+    }
+    reapplyInitialSelectedId() {
+        if (this.initialSelectedId == null)
+            return;
+        const index = this.store.getIndexById(this.initialSelectedId);
+        this.initialSelectedId = undefined;
+        if (index !== null) {
+            this.container.setSelected(index);
+        }
+    }
+    appendChild(child) {
+        super.appendChild(child);
+        child.setStore(this.store);
+        this.store.addItem(child.props.id, child.props.value);
+    }
+    insertBefore(child, before) {
+        super.insertBefore(child, before);
+        child.setStore(this.store);
+        this.store.insertItemBefore(child.props.id, before.props.id, child.props.value);
+    }
+    removeChild(child) {
+        this.store.removeItem(child.props.id);
+        super.removeChild(child);
+    }
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "onSelectionChanged")) {
+            const onSelectionChanged = newProps.onSelectionChanged;
+            const handleSelectionChange = onSelectionChanged
+                ? () => {
+                    const selectedIndex = this.container.getSelected();
+                    const id = this.store.getIdAtIndex(selectedIndex);
+                    if (id !== null) {
+                        onSelectionChanged(id);
+                    }
+                }
+                : undefined;
+            this.signalStore.set(this, this.container, "notify::selected", handleSelectionChange);
+        }
+        if (hasChanged(oldProps, newProps, "selectedId")) {
+            const index = newProps.selectedId != null ? this.store.getIndexById(newProps.selectedId) : null;
+            if (index !== null) {
+                this.container.setSelected(index);
+            }
+        }
+    }
+}