@gtkx/react 0.9.0 → 0.9.2

package/dist/node.d.ts

@@ -15,10 +15,6 @@ export declare abstract class Node<T extends Gtk.Widget | undefined = Gtk.Widget
     protected isVirtual(): boolean;
     protected isStandalone(): boolean;
     constructor(type: string, widget?: Gtk.Widget);
-    /**
-     * Initializes the node with props. Called by the reconciler after construction.
-     * Subclasses can override to perform custom initialization.
-     */
     initialize(props: Props): void;
     protected createWidget(type: string, props: Props): T;
     getWidget(): T;

package/dist/node.js

@@ -62,10 +62,6 @@ export class Node {
             this.widget = widget;
         }
     }
-    /**
-     * Initializes the node with props. Called by the reconciler after construction.
-     * Subclasses can override to perform custom initialization.
-     */
     initialize(props) {
         if (!this.widget && !this.isVirtual()) {
             this.widget = this.createWidget(this.nodeType, props);
@@ -92,7 +88,7 @@ export class Node {
             this.attachChild(childWidget);
         }
         else if (this.widget && isAppendable(this.widget)) {
-            childWidget.insertBefore(this.widget, null);
+            childWidget.insertBefore(this.widget);
         }
         else if (this.widget && isAddable(this.widget)) {
             this.widget.add(childWidget);

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

@@ -1,4 +1,5 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import { StringSorter } from "@gtkx/ffi/gtk";
 import type { ColumnContainer } from "../containers.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
@@ -37,8 +38,9 @@ type ColumnViewColumnState = {
     factory: Gtk.SignalListItemFactory;
     factoryHandlers: ListItemFactoryHandlers | null;
     renderCell: RenderItemFn<unknown>;
-    columnId: string | null;
+    columnId?: string;
     listItemCache: Map<number, ListItemInfo>;
+    sorter?: StringSorter;
 };
 export declare class ColumnViewColumnNode extends Node<never, ColumnViewColumnState> {
     static consumedPropNames: string[];
@@ -47,7 +49,7 @@ export declare class ColumnViewColumnNode extends Node<never, ColumnViewColumnSt
     private columnView;
     initialize(props: Props): void;
     getColumn(): Gtk.ColumnViewColumn;
-    getId(): string | null;
+    getId(): string | undefined;
     setColumnView(columnView: ColumnViewNode | null): void;
     unmount(): void;
     updateProps(oldProps: Props, newProps: Props): void;

package/dist/nodes/column-view.js

@@ -1,6 +1,6 @@
-import { getObject } from "@gtkx/ffi";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
+import { StringSorter } from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 import { connectListItemFactorySignals } from "./list-item-factory.js";
 import { SelectableListNode } from "./selectable-list.js";
@@ -53,10 +53,9 @@ export class ColumnViewNode extends SelectableListNode {
     notifySortChange() {
         if (!this.state.onSortChange)
             return;
-        const baseSorter = this.widget.getSorter();
-        if (!baseSorter)
+        const sorter = this.widget.getSorter();
+        if (!sorter)
             return;
-        const sorter = getObject(baseSorter.id);
         const column = sorter.getPrimarySortColumn();
         const order = sorter.getPrimarySortOrder();
         const columnId = column?.getId() ?? null;
@@ -122,7 +121,7 @@ export class ColumnViewNode extends SelectableListNode {
     }
     applySortIndicator() {
         if (this.state.sortColumn === null) {
-            this.widget.sortByColumn(this.state.sortOrder, null);
+            this.widget.sortByColumn(this.state.sortOrder);
             return;
         }
         const column = this.state.columns.find((c) => c.getId() === this.state.sortColumn);
@@ -158,7 +157,7 @@ export class ColumnViewNode extends SelectableListNode {
     }
 }
 export class ColumnViewColumnNode extends Node {
-    static consumedPropNames = ["renderCell", "title", "expand", "resizable", "fixedWidth", "id"];
+    static consumedPropNames = ["renderCell", "title", "expand", "resizable", "fixedWidth", "id", "sortable"];
     static matches(type) {
         return type === "ColumnView.Column";
     }
@@ -169,7 +168,9 @@ export class ColumnViewColumnNode extends Node {
     initialize(props) {
         const factory = new Gtk.SignalListItemFactory();
         const column = new Gtk.ColumnViewColumn(props.title, factory);
-        const columnId = props.id ?? null;
+        const columnId = props.id ?? undefined;
+        const sortable = props.sortable;
+        const sorter = sortable ? new StringSorter() : undefined;
         this.state = {
             column,
             factory,
@@ -177,7 +178,11 @@ export class ColumnViewColumnNode extends Node {
             renderCell: props.renderCell,
             columnId,
             listItemCache: new Map(),
+            sorter,
         };
+        if (sorter) {
+            column.setSorter(sorter);
+        }
         super.initialize(props);
         if (columnId !== null) {
             column.setId(columnId);
@@ -228,9 +233,20 @@ export class ColumnViewColumnNode extends Node {
             this.state.column.setFixedWidth(newProps.fixedWidth);
         }
         if (oldProps.id !== newProps.id) {
-            this.state.columnId = newProps.id ?? null;
+            this.state.columnId = newProps.id ?? undefined;
             this.state.column.setId(this.state.columnId);
         }
+        if (oldProps.sortable !== newProps.sortable) {
+            const sortable = newProps.sortable;
+            if (sortable && !this.state.sorter) {
+                this.state.sorter = new StringSorter();
+                this.state.column.setSorter(this.state.sorter);
+            }
+            else if (!sortable && this.state.sorter) {
+                this.state.column.setSorter(undefined);
+                this.state.sorter = undefined;
+            }
+        }
     }
 }
 export class ColumnViewItemNode extends VirtualItemNode {

package/dist/nodes/flow-box.js

@@ -16,7 +16,7 @@ export class FlowBoxNode extends IndexedChildContainerNode {
         const parent = child.getParent();
         if (parent && isFlowBoxChild(parent)) {
             beginBatch();
-            parent.setChild(null);
+            parent.setChild(undefined);
             this.widget.remove(parent);
             endBatch();
         }

package/dist/nodes/list-box.js

@@ -16,7 +16,7 @@ export class ListBoxNode extends IndexedChildContainerNode {
         const parent = child.getParent();
         if (parent && isListBoxRow(parent)) {
             beginBatch();
-            parent.setChild(null);
+            parent.setChild(undefined);
             this.widget.remove(parent);
             endBatch();
         }
@@ -38,7 +38,7 @@ export class ListBoxNode extends IndexedChildContainerNode {
     detachChild(child) {
         if (isListBoxRow(child)) {
             beginBatch();
-            child.setChild(null);
+            child.setChild(undefined);
             this.widget.remove(child);
             endBatch();
             return;

package/dist/nodes/list-item-factory.js

@@ -1,4 +1,4 @@
-import { getObject, getObjectId } from "@gtkx/ffi";
+import { getObjectId } from "@gtkx/ffi";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { createFiberRoot } from "../fiber-root.js";
@@ -7,7 +7,7 @@ export function connectListItemFactorySignals(config) {
     const { factory, listItemCache, getRenderFn, getItemAtPosition } = config;
     const handlerIds = [];
     const setupId = factory.connect("setup", (_self, listItemObj) => {
-        const listItem = getObject(listItemObj.id);
+        const listItem = listItemObj;
         const id = getObjectId(listItemObj.id);
         const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
         listItem.setChild(box);
@@ -18,7 +18,7 @@ export function connectListItemFactorySignals(config) {
     });
     handlerIds.push(setupId);
     const bindId = factory.connect("bind", (_self, listItemObj) => {
-        const listItem = getObject(listItemObj.id);
+        const listItem = listItemObj;
         const id = getObjectId(listItemObj.id);
         const info = listItemCache.get(id);
         if (!info)

package/dist/nodes/menu.d.ts

@@ -37,7 +37,7 @@ declare abstract class MenuContainerNode<T extends Gtk.Widget | undefined> exten
     protected onMenuRebuilt(): void;
 }
 type MenuWidget = Gtk.Widget & {
-    setMenuModel(model: Gio.MenuModel | null): void;
+    setMenuModel(model?: Gio.MenuModel): void;
 };
 declare abstract class MenuWidgetNode<T extends MenuWidget> extends MenuContainerNode<T> {
     protected abstract createMenuWidget(menu: Gio.Menu): T;

package/dist/nodes/menu.js

@@ -1,4 +1,4 @@
-import { getCurrentApp, getInterface } from "@gtkx/ffi";
+import { getApplication, getNativeObject } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
@@ -67,13 +67,13 @@ class MenuContainerNode extends NodeClass {
         this.menu.removeAll();
         for (const entry of this.entries) {
             if (entry.type === "item") {
-                this.menu.append(entry.label ?? null, entry.action ?? null);
+                this.menu.append(entry.label, entry.action);
             }
             else if (entry.type === "section" && entry.menu) {
-                this.menu.appendSection(entry.menu, entry.label ?? null);
+                this.menu.appendSection(entry.menu, entry.label);
             }
             else if (entry.type === "submenu" && entry.menu) {
-                this.menu.appendSubmenu(entry.menu, entry.label ?? null);
+                this.menu.appendSubmenu(entry.menu, entry.label);
             }
         }
         this.onMenuRebuilt();
@@ -116,14 +116,14 @@ export class ApplicationMenuNode extends MenuContainerNode {
         if (!(this.parent instanceof RootNode)) {
             throw new Error("ApplicationMenu must be a direct child of a fragment at the root level");
         }
-        getCurrentApp().setMenubar(this.menu);
+        getApplication().setMenubar(this.menu);
     }
     unmount() {
-        getCurrentApp().setMenubar(null);
+        getApplication().setMenubar(undefined);
         super.unmount();
     }
     onMenuRebuilt() {
-        getCurrentApp().setMenubar(this.menu);
+        getApplication().setMenubar(this.menu);
     }
 }
 export class MenuItemNode extends NodeClass {
@@ -198,8 +198,8 @@ export class MenuItemNode extends NodeClass {
         this.actionName = generateActionName();
         this.action = new Gio.SimpleAction(this.actionName);
         this.signalHandlerId = this.action.connect("activate", () => this.invokeCurrentCallback());
-        const app = getCurrentApp();
-        const action = getInterface(this.action.id, Gio.Action);
+        const app = getApplication();
+        const action = getNativeObject(this.action.id, Gio.Action);
         if (!action) {
             throw new Error("Failed to get Gio.Action interface from SimpleAction");
         }
@@ -211,7 +211,7 @@ export class MenuItemNode extends NodeClass {
     }
     cleanupAction() {
         if (this.actionName) {
-            const app = getCurrentApp();
+            const app = getApplication();
             app.removeAction(this.actionName);
             if (this.currentAccels) {
                 app.setAccelsForAction(`app.${this.actionName}`, []);
@@ -228,7 +228,7 @@ export class MenuItemNode extends NodeClass {
     updateAccels(accels) {
         if (!this.actionName)
             return;
-        const app = getCurrentApp();
+        const app = getApplication();
         const accelArray = accels ? (Array.isArray(accels) ? accels : [accels]) : [];
         app.setAccelsForAction(`app.${this.actionName}`, accelArray);
     }

package/dist/nodes/notebook.js

@@ -34,15 +34,15 @@ export class NotebookNode extends Node {
         this.widget.setTabLabel(child, tabLabel);
     }
     attachChild(child) {
-        this.widget.appendPage(child, null);
+        this.widget.appendPage(child);
     }
     insertChildBefore(child, before) {
         const beforePageNum = this.widget.pageNum(before);
         if (beforePageNum >= 0) {
-            this.widget.insertPage(child, beforePageNum, null);
+            this.widget.insertPage(child, beforePageNum);
         }
         else {
-            this.widget.appendPage(child, null);
+            this.widget.appendPage(child);
         }
     }
     detachChild(child) {

package/dist/nodes/overlay.js

@@ -36,7 +36,7 @@ export class OverlayNode extends Node {
     }
     detachChild(childWidget) {
         if (this.mainChild === childWidget) {
-            this.widget.setChild(null);
+            this.widget.setChild(undefined);
             this.mainChild = null;
         }
         else {

package/dist/nodes/paged-stack.d.ts

@@ -10,22 +10,10 @@ type StackWidget = Gtk.Widget & {
     remove(child: Gtk.Widget): void;
     getPage(child: Gtk.Widget): StackPageLike;
 };
-/**
- * Abstract node for paged stack widgets (Gtk.Stack, Adw.ViewStack).
- * Handles visible child deferral and common page operations.
- */
 export declare abstract class PagedStackNode<T extends StackWidget> extends NodeClass<T> implements StackPageContainer, ChildContainer {
     static consumedPropNames: string[];
     private pendingVisibleChildName;
-    /**
-     * Add a page to the stack widget. Must be implemented by subclasses
-     * due to API differences between Gtk.Stack and Adw.ViewStack.
-     */
     abstract addStackPage(child: Gtk.Widget, props: StackPageProps): void;
-    /**
-     * Add a child directly to the stack widget (without page props).
-     * Must be implemented by subclasses due to API differences.
-     */
     protected abstract addChildToWidget(child: Gtk.Widget): void;
     protected applyPendingVisibleChild(): void;
     insertStackPageBefore(child: Gtk.Widget, props: StackPageProps, _beforeChild: Gtk.Widget): void;

package/dist/nodes/paged-stack.js

@@ -1,10 +1,6 @@
 import { Node as NodeClass } from "../node.js";
 import { StackPageNode } from "./stack.js";
 import { applyStackPageProps } from "./stack-page-props.js";
-/**
- * Abstract node for paged stack widgets (Gtk.Stack, Adw.ViewStack).
- * Handles visible child deferral and common page operations.
- */
 export class PagedStackNode extends NodeClass {
     static consumedPropNames = ["visibleChildName"];
     pendingVisibleChildName = null;

package/dist/nodes/selectable-list.js

@@ -1,4 +1,4 @@
-import { getInterface } from "@gtkx/ffi";
+import { getNativeObject } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
 import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
@@ -41,7 +41,7 @@ export class SelectableListNode extends NodeClass {
     initializeSelectionState(props) {
         const selectionMode = props.selectionMode ?? Gtk.SelectionMode.SINGLE;
         const stringList = new Gtk.StringList([]);
-        const listModel = getInterface(stringList.id, Gio.ListModel);
+        const listModel = getNativeObject(stringList.id, Gio.ListModel) ?? undefined;
         const selectionModel = selectionMode === Gtk.SelectionMode.MULTIPLE
             ? new Gtk.MultiSelection(listModel)
             : new Gtk.SingleSelection(listModel);
@@ -100,7 +100,7 @@ export class SelectableListNode extends NodeClass {
         const currentSelection = this.getSelectedIds();
         const hadHandler = this.state.selectionHandlerId !== null;
         this.disconnectSelectionHandler();
-        const listModel = getInterface(this.state.stringList.id, Gio.ListModel);
+        const listModel = getNativeObject(this.state.stringList.id, Gio.ListModel) ?? undefined;
         const newSelectionModel = newSelectionMode === Gtk.SelectionMode.MULTIPLE
             ? new Gtk.MultiSelection(listModel)
             : new Gtk.SingleSelection(listModel);

package/dist/nodes/stack.js

@@ -11,7 +11,7 @@ export class StackNode extends PagedStackNode {
         const { name, title } = props;
         let stackPage;
         if (title !== undefined) {
-            stackPage = this.widget.addTitled(child, title, name ?? null);
+            stackPage = this.widget.addTitled(child, title, name);
         }
         else if (name !== undefined) {
             stackPage = this.widget.addNamed(child, name);

package/dist/nodes/string-list-container.d.ts

@@ -12,7 +12,7 @@ type StringListContainerState = {
     hasAppliedInitialSelection: boolean;
 };
 type StringListWidget = Gtk.Widget & {
-    setModel(model: Gio.ListModel | null): void;
+    setModel(model?: Gio.ListModel): void;
     getSelected(): number;
     setSelected(position: number): void;
 };

package/dist/nodes/string-list-container.js

@@ -1,4 +1,4 @@
-import { getInterface } from "@gtkx/ffi";
+import { getNativeObject } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
 import { Node as NodeClass } from "../node.js";
 import { getCallbackChange } from "../props.js";
@@ -44,7 +44,7 @@ export class StringListContainerNode extends NodeClass {
         const initialSelection = props.selectedId;
         this.state = { store, onSelectionChanged, initialSelection, hasAppliedInitialSelection: false };
         super.initialize(props);
-        this.widget.setModel(getInterface(store.getModel().id, Gio.ListModel));
+        this.widget.setModel(getNativeObject(store.getModel().id, Gio.ListModel) ?? undefined);
     }
     connectSelectionHandler() {
         const handler = () => {

package/dist/nodes/toggle-button.d.ts

@@ -4,14 +4,6 @@ import { Node } from "../node.js";
 type ToggleButtonState = {
     lastPropsActive: boolean | undefined;
 };
-/**
- * Specialized node for GtkToggleButton that prevents signal feedback loops.
- *
- * When multiple ToggleButtons share the same state (controlled components),
- * React syncing the `active` prop via setActive() triggers the `toggled` signal.
- * This node guards against that by tracking the expected active state and
- * suppressing callbacks when the signal was caused by a programmatic update.
- */
 export declare class ToggleButtonNode extends Node<Gtk.ToggleButton, ToggleButtonState> {
     static consumedPropNames: string[];
     static matches(type: string): boolean;

package/dist/nodes/toggle-button.js

@@ -1,12 +1,4 @@
 import { Node } from "../node.js";
-/**
- * Specialized node for GtkToggleButton that prevents signal feedback loops.
- *
- * When multiple ToggleButtons share the same state (controlled components),
- * React syncing the `active` prop via setActive() triggers the `toggled` signal.
- * This node guards against that by tracking the expected active state and
- * suppressing callbacks when the signal was caused by a programmatic update.
- */
 export class ToggleButtonNode extends Node {
     static consumedPropNames = ["active"];
     static matches(type) {

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

@@ -1,8 +1,4 @@
 import { Node } from "../node.js";
-/**
- * Virtual node for AdwToolbarView Top and Bottom slots.
- * These slots use addTopBar/addBottomBar instead of setChild.
- */
 export declare class ToolbarViewSlotNode extends Node<never> {
     static matches(type: string): boolean;
     protected isVirtual(): boolean;

package/dist/nodes/toolbar-view.js

@@ -1,8 +1,4 @@
 import { Node } from "../node.js";
-/**
- * Virtual node for AdwToolbarView Top and Bottom slots.
- * These slots use addTopBar/addBottomBar instead of setChild.
- */
 export class ToolbarViewSlotNode extends Node {
     static matches(type) {
         if (!type.startsWith("AdwToolbarView."))

package/dist/nodes/view-stack.js

@@ -8,10 +8,10 @@ export class ViewStackNode extends PagedStackNode {
         const { name, title, iconName } = props;
         let page;
         if (title !== undefined && iconName !== undefined) {
-            page = this.widget.addTitledWithIcon(child, title, iconName, name ?? null);
+            page = this.widget.addTitledWithIcon(child, title, iconName, name);
         }
         else if (title !== undefined) {
-            page = this.widget.addTitled(child, title, name ?? null);
+            page = this.widget.addTitled(child, title, name);
         }
         else if (name !== undefined) {
             page = this.widget.addNamed(child, name);

package/dist/nodes/virtual-item.d.ts

@@ -2,11 +2,6 @@ import type { ItemContainer } from "../containers.js";
 import type { Props } from "../factory.js";
 import type { Node } from "../node.js";
 import { Node as NodeClass } from "../node.js";
-/**
- * Base class for virtual item nodes used in list-based containers.
- * Virtual nodes don't create GTK widgets directly but represent items
- * in list models (ListView, GridView, ColumnView).
- */
 export declare abstract class VirtualItemNode extends NodeClass<never> {
     static consumedPropNames: string[];
     protected isVirtual(): boolean;

package/dist/nodes/virtual-item.js

@@ -1,10 +1,5 @@
 import { Node as NodeClass } from "../node.js";
 import { isItemContainer } from "../predicates.js";
-/**
- * Base class for virtual item nodes used in list-based containers.
- * Virtual nodes don't create GTK widgets directly but represent items
- * in list models (ListView, GridView, ColumnView).
- */
 export class VirtualItemNode extends NodeClass {
     static consumedPropNames = ["id", "item"];
     isVirtual() {

package/dist/nodes/widget.d.ts

@@ -1,10 +1,5 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
-/**
- * Catch-all node for standard GTK widgets that don't need special handling.
- * Specialized widgets (Window, AboutDialog, ActionBar, FlowBox, ListBox, etc.)
- * are handled by their own dedicated Node classes.
- */
 export declare class WidgetNode extends Node<Gtk.Widget> {
     static matches(_type: string): boolean;
 }

package/dist/nodes/widget.js

@@ -1,9 +1,4 @@
 import { Node } from "../node.js";
-/**
- * Catch-all node for standard GTK widgets that don't need special handling.
- * Specialized widgets (Window, AboutDialog, ActionBar, FlowBox, ListBox, etc.)
- * are handled by their own dedicated Node classes.
- */
 export class WidgetNode extends Node {
     static matches(_type) {
         return true;

package/dist/nodes/window.js

@@ -1,4 +1,4 @@
-import { getCurrentApp } from "@gtkx/ffi";
+import { getApplication } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { Node, normalizeWidgetType } from "../node.js";
@@ -14,10 +14,10 @@ export class WindowNode extends Node {
     createWidget(type, _props) {
         const widgetType = normalizeWidgetType(type);
         if (widgetType === "ApplicationWindow") {
-            return new Gtk.ApplicationWindow(getCurrentApp());
+            return new Gtk.ApplicationWindow(getApplication());
         }
         if (widgetType === "AdwApplicationWindow") {
-            return new Adw.ApplicationWindow(getCurrentApp());
+            return new Adw.ApplicationWindow(getApplication());
         }
         if (widgetType === "AdwWindow") {
             return new Adw.Window();

package/dist/types.d.ts

@@ -61,6 +61,8 @@ export type ColumnViewColumnProps<T = unknown> = {
     fixedWidth?: number;
     /** Unique identifier for the column. Used for sorting. */
     id?: string;
+    /** Whether this column header can be clicked to trigger sorting. */
+    sortable?: boolean;
     /**
      * Render function for column cells.
      * Called with null during setup (for loading state) and with the actual item during bind.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -36,11 +36,11 @@
   ],
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@gtkx/ffi": "0.9.0"
+    "@gtkx/ffi": "0.9.2"
   },
   "devDependencies": {
-    "@gtkx/native": "0.9.0",
-    "@gtkx/gir": "0.9.0"
+    "@gtkx/gir": "0.9.2",
+    "@gtkx/native": "0.9.2"
   },
   "peerDependencies": {
     "react": "^19"
@@ -48,6 +48,6 @@
   "scripts": {
     "build": "tsc -b && cp ../../README.md .",
     "codegen": "tsx scripts/codegen.ts",
-    "test": "if [ -n \"$CI\" ]; then vitest run; else GDK_BACKEND=x11 xvfb-run -a vitest run; fi"
+    "test": "../../scripts/run-tests.sh"
   }
 }