@gtkx/react 0.18.8 → 0.19.0

package/src/jsx.ts

@@ -7,7 +7,14 @@ import type * as GtkSource from "@gtkx/ffi/gtksource";
 import type * as Pango from "@gtkx/ffi/pango";
 import type { ReactElement, ReactNode } from "react";
 import { createElement } from "react";
-import type { WidgetSlotNames } from "./generated/jsx.js";
+import type {
+    AdwComboRowProps as IntrinsicAdwComboRowProps,
+    GtkColumnViewProps as IntrinsicGtkColumnViewProps,
+    GtkDropDownProps as IntrinsicGtkDropDownProps,
+    GtkGridViewProps as IntrinsicGtkGridViewProps,
+    GtkListViewProps as IntrinsicGtkListViewProps,
+    WidgetSlotNames,
+} from "./generated/jsx.js";
 
 /**
  * CSS properties that can be animated on a widget.
@@ -132,15 +139,15 @@ export type AnimationProps = {
 /**
  * Props for the Shortcut virtual element.
  *
- * Defines a keyboard shortcut. Must be a child of `x.ShortcutController`.
+ * Defines a keyboard shortcut. Must be a child of `<GtkShortcutController>`.
  *
  * @example
  * ```tsx
- * <x.ShortcutController>
+ * <GtkShortcutController>
  *     <x.Shortcut trigger="<Control>s" onActivate={save} />
  *     <x.Shortcut trigger={["F5", "<Control>r"]} onActivate={refresh} />
  *     <x.Shortcut trigger="Escape" onActivate={cancel} disabled={!canCancel} />
- * </x.ShortcutController>
+ * </GtkShortcutController>
  * ```
  */
 export type ShortcutProps = {
@@ -174,6 +181,8 @@ export type ShortcutProps = {
  * ```
  */
 export type TextAnchorProps = {
+    /** Replacement character displayed when the widget is not visible (e.g. in serialized text) */
+    replacementChar?: string;
     /** The widget to embed at this anchor position */
     children?: ReactNode;
 };
@@ -359,8 +368,6 @@ export type ContainerSlotNames = {
 
 /**
  * Props for method-based container slot child positioning.
- *
- * @see {@link x.ContainerSlot} for type-safe usage
  */
 export type ContainerSlotProps = {
     /** The method name to call on the parent widget */
@@ -393,6 +400,23 @@ export type ListItemProps<T = unknown> = {
     children?: ReactNode;
 };
 
+/**
+ * Props for section headers in a GtkListView, GtkGridView, or GtkColumnView.
+ *
+ * Wraps ListItems to group them into sections. When used with `renderHeader`,
+ * the view displays a header at the top of each section.
+ *
+ * @typeParam T - The type of data associated with this section header
+ */
+export type ListSectionProps<T = unknown> = {
+    /** Unique identifier for this section */
+    id: string;
+    /** The data value passed to `renderHeader` for this section */
+    value: T;
+    /** ListItem children belonging to this section */
+    children?: ReactNode;
+};
+
 /**
  * Props for positioning children within a GtkGrid.
  *
@@ -447,6 +471,8 @@ export type ColumnViewColumnProps<T = unknown> = {
     id: string;
     /** Whether clicking the header sorts by this column */
     sortable?: boolean;
+    /** Whether this column is visible */
+    visible?: boolean;
     /** Function to render the cell content for each row */
     renderCell: (item: T | null) => ReactNode;
     /** Menu items for the column header context menu */
@@ -670,28 +696,34 @@ type BaseListViewProps = {
     selectionMode?: Gtk.SelectionMode | null;
 };
 
-export type ListViewProps = BaseListViewProps & {
+export type ListViewProps<T = unknown, S = unknown> = BaseListViewProps & {
     /** Function to render each list item. The `row` parameter provides tree state for hierarchical lists. */
-    // biome-ignore lint/suspicious/noExplicitAny: contravariant parameter requires any for typed callbacks
-    renderItem: (item: any, row?: Gtk.TreeListRow | null) => ReactNode;
+    renderItem: (item: T | null, row?: Gtk.TreeListRow | null) => ReactNode;
     /** Whether to automatically expand new tree rows (default: false) */
     autoexpand?: boolean;
+    /** Function to render section headers when using ListSection children */
+    renderHeader?: ((item: S | null) => ReactNode) | null;
 };
 
-export type GridViewProps = BaseListViewProps & {
+export type GridViewProps<T = unknown> = BaseListViewProps & {
     /** Function to render each grid item */
-    // biome-ignore lint/suspicious/noExplicitAny: contravariant parameter requires any for typed callbacks
-    renderItem: (item: any) => ReactNode;
+    renderItem: (item: T | null) => ReactNode;
 };
 
 /**
  * Props shared by single-selection dropdown widgets (GtkDropDown, AdwComboRow).
  */
-export type DropDownProps = {
+export type DropDownProps<T = unknown, S = unknown> = {
     /** ID of the currently selected item */
     selectedId?: string | null;
     /** Callback fired when the selected item changes */
     onSelectionChanged?: ((id: string) => void) | null;
+    /** Function to render each item. Sets the primary factory, used for both button and popup list unless overridden by renderListItem. */
+    renderItem?: ((item: T | null) => ReactNode) | null;
+    /** Function to render items in the popup list only, overriding renderItem for the list. */
+    renderListItem?: ((item: T | null) => ReactNode) | null;
+    /** Function to render section headers when using ListSection children */
+    renderHeader?: ((item: S | null) => ReactNode) | null;
 };
 
 /**
@@ -854,7 +886,32 @@ export const x = {
      * </GtkListView>
      * ```
      */
-    ListItem: "ListItem" as const,
+    ListItem<T = unknown>(props: ListItemProps<T>): ReactElement {
+        return createElement("ListItem", props, props.children);
+    },
+
+    /**
+     * Component for defining section headers in list/grid views.
+     *
+     * Wraps ListItems to group them into sections with headers.
+     * Requires `renderHeader` on the parent view to render the header content.
+     *
+     * @example
+     * ```tsx
+     * <GtkGridView
+     *   renderItem={(item) => <GtkLabel label={item.name} />}
+     *   renderHeader={(header) => <GtkLabel label={header.title} />}
+     * >
+     *   <x.ListSection id="section1" value={{ title: "Section 1" }}>
+     *     <x.ListItem id="a" value={{ name: "Item A" }} />
+     *     <x.ListItem id="b" value={{ name: "Item B" }} />
+     *   </x.ListSection>
+     * </GtkGridView>
+     * ```
+     */
+    ListSection<T = unknown>(props: ListSectionProps<T>): ReactElement {
+        return createElement("ListSection", props, props.children);
+    },
 
     /**
      * Component for defining columns in a ColumnView (table widget).
@@ -1078,7 +1135,7 @@ export const x = {
     /**
      * A keyboard shortcut definition.
      *
-     * Must be a child of `x.ShortcutController`.
+     * Must be a child of `<GtkShortcutController>`.
      *
      * @example
      * ```tsx
@@ -1125,6 +1182,7 @@ declare global {
                 FixedChild: FixedChildProps;
                 GridChild: GridChildProps;
                 ListItem: ListItemProps;
+                ListSection: ListSectionProps;
                 MenuItem: MenuItemProps;
                 MenuSection: MenuSectionProps;
                 MenuSubmenu: MenuSubmenuProps;
@@ -1144,7 +1202,61 @@ declare global {
     }
 }
 
+export type AccessibleProps = {
+    accessibleAutocomplete?: Gtk.AccessibleAutocomplete;
+    accessibleDescription?: string;
+    accessibleHasPopup?: boolean;
+    accessibleKeyShortcuts?: string;
+    accessibleLabel?: string;
+    accessibleLevel?: number;
+    accessibleModal?: boolean;
+    accessibleMultiLine?: boolean;
+    accessibleMultiSelectable?: boolean;
+    accessibleOrientation?: Gtk.Orientation;
+    accessiblePlaceholder?: string;
+    accessibleReadOnly?: boolean;
+    accessibleRequired?: boolean;
+    accessibleRoleDescription?: string;
+    accessibleSort?: Gtk.AccessibleSort;
+    accessibleValueMax?: number;
+    accessibleValueMin?: number;
+    accessibleValueNow?: number;
+    accessibleValueText?: string;
+    accessibleHelpText?: string;
+
+    accessibleBusy?: boolean;
+    accessibleChecked?: Gtk.AccessibleTristate;
+    accessibleDisabled?: boolean;
+    accessibleExpanded?: boolean;
+    accessibleHidden?: boolean;
+    accessibleInvalid?: Gtk.AccessibleInvalidState;
+    accessiblePressed?: Gtk.AccessibleTristate;
+    accessibleSelected?: boolean;
+    accessibleVisited?: boolean;
+
+    accessibleActiveDescendant?: Gtk.Widget;
+    accessibleColCount?: number;
+    accessibleColIndex?: number;
+    accessibleColIndexText?: string;
+    accessibleColSpan?: number;
+    accessibleControls?: Gtk.Widget[];
+    accessibleDescribedBy?: Gtk.Widget[];
+    accessibleDetails?: Gtk.Widget[];
+    accessibleErrorMessage?: Gtk.Widget[];
+    accessibleFlowTo?: Gtk.Widget[];
+    accessibleLabelledBy?: Gtk.Widget[];
+    accessibleOwns?: Gtk.Widget[];
+    accessiblePosInSet?: number;
+    accessibleRowCount?: number;
+    accessibleRowIndex?: number;
+    accessibleRowIndexText?: string;
+    accessibleRowSpan?: number;
+    accessibleSetSize?: number;
+};
+
 declare module "./generated/jsx.js" {
+    interface WidgetProps extends AccessibleProps {}
+
     interface GtkRangeProps extends Omit<AdjustableProps, "onValueChanged"> {
         /** Callback fired when the range value changes */
         onValueChanged?: ((value: number, self: Gtk.Range) => void) | null;
@@ -1218,6 +1330,8 @@ declare module "./generated/jsx.js" {
         onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null;
         /** Estimated row height in pixels for virtualization */
         estimatedRowHeight?: number | null;
+        /** Function to render section headers when using ListSection children */
+        renderHeader?: ((item: unknown) => ReactNode) | null;
     }
 
     interface GtkDropDownProps extends DropDownProps {}
@@ -1261,6 +1375,10 @@ declare module "./generated/jsx.js" {
     interface GtkFontDialogButtonProps extends DialogButtonProps {
         /** Callback fired when the selected font changes */
         onFontDescChanged?: ((fontDesc: Pango.FontDescription) => void) | null;
+        /** Filter to restrict which fonts are shown in the dialog */
+        filter?: Gtk.Filter | null;
+        /** Custom font map to select fonts from */
+        fontMap?: Pango.FontMap | null;
     }
 
     interface GtkAboutDialogProps {
@@ -1293,4 +1411,37 @@ declare module "./generated/jsx.js" {
     }
 }
 
+export function GtkListView<T = unknown, S = unknown>(
+    props: Omit<IntrinsicGtkListViewProps, keyof ListViewProps> & ListViewProps<T, S> & { children?: ReactNode },
+): ReactElement {
+    return createElement("GtkListView", props);
+}
+
+export function GtkGridView<T = unknown>(
+    props: Omit<IntrinsicGtkGridViewProps, keyof GridViewProps> & GridViewProps<T> & { children?: ReactNode },
+): ReactElement {
+    return createElement("GtkGridView", props);
+}
+
+export function GtkDropDown<T = unknown, S = unknown>(
+    props: Omit<IntrinsicGtkDropDownProps, keyof DropDownProps> & DropDownProps<T, S> & { children?: ReactNode },
+): ReactElement {
+    return createElement("GtkDropDown", props);
+}
+
+export function AdwComboRow<T = unknown, S = unknown>(
+    props: Omit<IntrinsicAdwComboRowProps, keyof DropDownProps> & DropDownProps<T, S> & { children?: ReactNode },
+): ReactElement {
+    return createElement("AdwComboRow", props);
+}
+
+export function GtkColumnView<T = unknown>(
+    props: Omit<IntrinsicGtkColumnViewProps, "renderHeader"> & {
+        renderHeader?: ((item: T | null) => ReactNode) | null;
+        children?: ReactNode;
+    },
+): ReactElement {
+    return createElement("GtkColumnView", props);
+}
+
 export * from "./generated/jsx.js";

package/src/metadata.ts

@@ -1,5 +1,5 @@
 import type { NativeClass } from "@gtkx/ffi";
-import { PROPS, SIGNALS } from "./generated/internal.js";
+import { CONSTRUCT_ONLY_PROPS, PROPS, SIGNALS } from "./generated/internal.js";
 import type { Container } from "./types.js";
 
 const walkPrototypeChain = <T>(instance: Container, lookup: (typeName: string) => T | null): T | null => {
@@ -30,6 +30,10 @@ const walkPrototypeChain = <T>(instance: Container, lookup: (typeName: string) =
 export const resolvePropMeta = (instance: Container, key: string): [string | null, string] | null =>
     walkPrototypeChain(instance, (typeName) => PROPS[typeName]?.[key] ?? null);
 
+export const isConstructOnlyProp = (instance: Container, key: string): boolean =>
+    walkPrototypeChain(instance, (typeName) => (CONSTRUCT_ONLY_PROPS[typeName]?.[key] !== undefined ? true : null)) ??
+    false;
+
 export const resolveSignal = (instance: Container, propName: string): string | null => {
     if (propName === "onNotify") return "notify";
     return walkPrototypeChain(instance, (typeName) => SIGNALS[typeName]?.[propName] ?? null);

package/src/node.ts

@@ -15,6 +15,7 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
     parent: TParent | null = null;
     children: TChild[] = [];
     private childIndices = new Map<TChild, number>();
+    private childrenDirty = false;
 
     constructor(typeName: string, props: TProps, container: TContainer, rootContainer: Container) {
         this.typeName = typeName;
@@ -44,6 +45,7 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
     }
 
     public appendChild(child: TChild): void {
+        if (this.childrenDirty) this.flushChildRemovals();
         if (!this.isValidChild(child)) {
             throw new Error(`Cannot append '${child.typeName}' to '${this.typeName}'`);
         }
@@ -53,16 +55,18 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
     }
 
     public removeChild(child: TChild): void {
-        const index = this.childIndices.get(child);
-        if (index !== undefined) {
-            child.setParent(null);
-            this.children.splice(index, 1);
-            this.childIndices.delete(child);
-            this.rebuildChildIndices(index);
+        if (!this.childIndices.has(child)) return;
+        child.setParent(null);
+        this.childIndices.delete(child);
+        if (!this.childrenDirty) {
+            this.childrenDirty = true;
+            queueMicrotask(() => this.flushChildRemovals());
         }
     }
 
     public insertBefore(child: TChild, before: TChild): void {
+        if (this.childrenDirty) this.flushChildRemovals();
+
         const beforeIndex = this.childIndices.get(before);
         if (beforeIndex === undefined) {
             throw new Error(`Cannot find 'before' child '${before.typeName}' in '${this.typeName}'`);
@@ -86,6 +90,16 @@ export class Node<TContainer = any, TProps = any, TParent extends Node = any, TC
         child.setParent(this);
     }
 
+    private flushChildRemovals(): void {
+        if (!this.childrenDirty) return;
+        this.childrenDirty = false;
+        this.children = this.children.filter((c) => this.childIndices.has(c));
+        this.childIndices.clear();
+        for (let i = 0; i < this.children.length; i++) {
+            this.childIndices.set(this.children[i] as TChild, i);
+        }
+    }
+
     private rebuildChildIndices(fromIndex: number): void {
         for (let i = fromIndex; i < this.children.length; i++) {
             this.childIndices.set(this.children[i] as TChild, i);

package/src/nodes/column-view-column.ts

@@ -3,7 +3,9 @@ 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 { GridItemRenderer } from "./internal/grid-item-renderer.js";
 import { ListItemRenderer } from "./internal/list-item-renderer.js";
+import type { ListStore } from "./internal/list-store.js";
 import { hasChanged } from "./internal/props.js";
 import type { TreeStore } from "./internal/tree-store.js";
 import { MenuNode } from "./menu.js";
@@ -20,16 +22,17 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
         return parent instanceof WidgetNode && parent.container instanceof Gtk.ColumnView;
     }
     private column: Gtk.ColumnViewColumn;
-    private itemRenderer: ListItemRenderer;
+    private treeRenderer: ListItemRenderer | null;
+    private flatRenderer: GridItemRenderer | null = null;
     private menu: MenuModel | null = null;
     private actionGroup: Gio.SimpleActionGroup | null = null;
     private columnView: Gtk.ColumnView | null = null;
 
     constructor(typeName: string, props: ColumnViewColumnProps, container: undefined, rootContainer: Container) {
         super(typeName, props, container, rootContainer);
-        this.itemRenderer = new ListItemRenderer(this.signalStore);
+        this.treeRenderer = new ListItemRenderer(this.signalStore);
         this.column = new Gtk.ColumnViewColumn();
-        this.column.setFactory(this.itemRenderer.getFactory());
+        this.column.setFactory(this.treeRenderer.getFactory());
     }
 
     public override appendChild(child: MenuNode): void {
@@ -61,7 +64,8 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
 
     public override detachDeletedInstance(): void {
         this.cleanupMenu();
-        this.itemRenderer.dispose();
+        this.treeRenderer?.dispose();
+        this.flatRenderer?.dispose();
         super.detachDeletedInstance();
     }
 
@@ -69,12 +73,31 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
         return this.column;
     }
 
+    public rebindItem(id: string): void {
+        this.treeRenderer?.rebindItem(id);
+        this.flatRenderer?.rebindItem(id);
+    }
+
     public setStore(model: TreeStore | null): void {
-        this.itemRenderer.setStore(model);
+        this.treeRenderer?.setStore(model);
+    }
+
+    public setFlatStore(store: ListStore): void {
+        if (this.treeRenderer) {
+            this.treeRenderer.dispose();
+            this.treeRenderer = null;
+        }
+        if (!this.flatRenderer) {
+            this.flatRenderer = new GridItemRenderer(this.signalStore);
+            this.flatRenderer.setRenderFn(this.props.renderCell);
+            this.column.setFactory(this.flatRenderer.getFactory());
+        }
+        this.flatRenderer.setStore(store);
     }
 
     public setEstimatedRowHeight(height: number | null): void {
-        this.itemRenderer.setEstimatedItemHeight(height);
+        this.treeRenderer?.setEstimatedItemHeight(height);
+        this.flatRenderer?.setEstimatedItemHeight(height);
     }
 
     public attachToColumnView(columnView: Gtk.ColumnView): void {
@@ -121,7 +144,8 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
 
     private applyOwnProps(oldProps: ColumnViewColumnProps | null, newProps: ColumnViewColumnProps): void {
         if (hasChanged(oldProps, newProps, "renderCell")) {
-            this.itemRenderer.setRenderFn(newProps.renderCell);
+            this.treeRenderer?.setRenderFn(newProps.renderCell);
+            this.flatRenderer?.setRenderFn(newProps.renderCell);
         }
 
         if (hasChanged(oldProps, newProps, "title")) {
@@ -153,6 +177,10 @@ export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, Wid
             }
         }
 
+        if (hasChanged(oldProps, newProps, "visible")) {
+            this.column.setVisible(newProps.visible ?? true);
+        }
+
         if (hasChanged(oldProps, newProps, "sortable")) {
             if (newProps.sortable) {
                 this.column.setSorter(new Gtk.StringSorter());

package/src/nodes/column-view.ts

@@ -5,24 +5,34 @@ import type { Container } from "../types.js";
 import { ColumnViewColumnNode } from "./column-view-column.js";
 import { ContainerSlotNode } from "./container-slot.js";
 import { EventControllerNode } from "./event-controller.js";
+import type { HeaderItemRenderer } from "./internal/header-item-renderer.js";
+import { updateHeaderRenderer } from "./internal/header-renderer-manager.js";
 import { filterProps, hasChanged } from "./internal/props.js";
 import { ListItemNode } from "./list-item.js";
+import { ListSectionNode } from "./list-section.js";
 import { ListModel, type ListModelProps } from "./models/list.js";
 import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
 
-const OWN_PROPS = ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight"] as const;
+const OWN_PROPS = ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight", "renderHeader"] as const;
 
 type ColumnViewProps = Pick<GtkColumnViewProps, (typeof OWN_PROPS)[number]> & ListModelProps;
-type ColumnViewChild = ListItemNode | ColumnViewColumnNode | EventControllerNode | SlotNode | ContainerSlotNode;
+type ColumnViewChild =
+    | ListItemNode
+    | ListSectionNode
+    | ColumnViewColumnNode
+    | EventControllerNode
+    | SlotNode
+    | ContainerSlotNode;
 
 export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps, ColumnViewChild> {
-    private handleSortChange: (() => void) | null = null;
     private list: ListModel;
+    private headerRenderer: HeaderItemRenderer | null = null;
 
     public override isValidChild(child: Node): boolean {
         return (
             child instanceof ListItemNode ||
+            child instanceof ListSectionNode ||
             child instanceof ColumnViewColumnNode ||
             child instanceof EventControllerNode ||
             child instanceof SlotNode ||
@@ -34,6 +44,9 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
 
     constructor(typeName: string, props: ColumnViewProps, container: Gtk.ColumnView, rootContainer: Container) {
         super(typeName, props, container, rootContainer);
+
+        const flat = props.renderHeader != null;
+
         this.list = new ListModel(
             { owner: this, signalStore: this.signalStore },
             {
@@ -41,13 +54,19 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
                 selected: props.selected,
                 onSelectionChanged: props.onSelectionChanged,
             },
+            flat,
         );
+        this.list.setOnItemUpdated((id) => {
+            for (const column of this.columnNodes) {
+                column.rebindItem(id);
+            }
+        });
     }
 
     public override appendChild(child: ColumnViewChild): void {
         super.appendChild(child);
 
-        if (child instanceof ListItemNode) {
+        if (child instanceof ListItemNode || child instanceof ListSectionNode) {
             this.list.appendChild(child);
             return;
         }
@@ -60,7 +79,11 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
             this.container.removeColumn(existingColumn);
         }
 
-        child.setStore(this.list.getStore());
+        if (this.list.isFlatMode()) {
+            child.setFlatStore(this.list.getFlatStore());
+        } else {
+            child.setStore(this.list.getStore());
+        }
         child.setEstimatedRowHeight(this.estimatedRowHeight);
         this.container.appendColumn(child.getColumn());
         child.attachToColumnView(this.container);
@@ -70,8 +93,8 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
     public override insertBefore(child: ColumnViewChild, before: ColumnViewChild): void {
         super.insertBefore(child, before);
 
-        if (child instanceof ListItemNode) {
-            if (before instanceof ListItemNode) {
+        if (child instanceof ListItemNode || child instanceof ListSectionNode) {
+            if (before instanceof ListItemNode || before instanceof ListSectionNode) {
                 this.list.insertBefore(child, before);
             }
             return;
@@ -85,7 +108,11 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
             this.container.removeColumn(existingColumn);
         }
 
-        child.setStore(this.list.getStore());
+        if (this.list.isFlatMode()) {
+            child.setFlatStore(this.list.getFlatStore());
+        } else {
+            child.setStore(this.list.getStore());
+        }
         child.setEstimatedRowHeight(this.estimatedRowHeight);
 
         if (before instanceof ColumnViewColumnNode) {
@@ -100,7 +127,7 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
     }
 
     public override removeChild(child: ColumnViewChild): void {
-        if (child instanceof ListItemNode) {
+        if (child instanceof ListItemNode || child instanceof ListSectionNode) {
             this.list.removeChild(child);
             super.removeChild(child);
             return;
@@ -130,7 +157,14 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
     public override commitUpdate(oldProps: ColumnViewProps | null, newProps: ColumnViewProps): void {
         super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
         this.applyOwnProps(oldProps, newProps);
+
+        const previousModel = this.list.getSelectionModel();
         this.list.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        const currentModel = this.list.getSelectionModel();
+
+        if (previousModel !== currentModel) {
+            this.container.setModel(currentModel);
+        }
     }
 
     public override commitMount(): void {
@@ -141,6 +175,7 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
 
     public override detachDeletedInstance(): void {
         this.columnNodes.clear();
+        this.headerRenderer?.dispose();
         super.detachDeletedInstance();
     }
 
@@ -150,11 +185,13 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
             const onSortChanged = newProps.onSortChanged;
 
             if (sorter instanceof Gtk.ColumnViewSorter) {
-                this.handleSortChange = () => {
-                    onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
-                };
+                const handleSortChange = onSortChanged
+                    ? () => {
+                          onSortChanged(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+                      }
+                    : undefined;
 
-                this.signalStore.set(this, sorter, "changed", this.handleSortChange);
+                this.signalStore.set(this, sorter, "changed", handleSortChange);
             }
         }
 
@@ -175,6 +212,19 @@ export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps,
                 column.setEstimatedRowHeight(this.estimatedRowHeight);
             }
         }
+
+        if (hasChanged(oldProps, newProps, "renderHeader")) {
+            this.headerRenderer = updateHeaderRenderer(
+                this.headerRenderer,
+                {
+                    signalStore: this.signalStore,
+                    isEnabled: () => this.list.isFlatMode(),
+                    resolveItem: (id) => this.list.getFlatStore().getHeaderValue(id),
+                    setFactory: (factory) => this.container.setHeaderFactory(factory),
+                },
+                newProps.renderHeader,
+            );
+        }
     }
 
     private findColumn<T>(predicate: (column: Gtk.ColumnViewColumn, index: number) => T | null): T | null {