@gtkx/react 0.1.50 → 0.1.52

package/dist/nodes/stack.js

@@ -0,0 +1,178 @@
+import { isStackPageContainer, } from "../container-interfaces.js";
+import { Node } from "../node.js";
+export class StackNode extends Node {
+    static matches(type) {
+        return type === "Stack" || type === "Stack.Root";
+    }
+    pendingVisibleChildName = null;
+    addStackPage(child, props) {
+        const { name, title } = props;
+        let stackPage;
+        if (title !== undefined) {
+            stackPage = this.widget.addTitled(child, title, name ?? null);
+        }
+        else if (name !== undefined) {
+            stackPage = this.widget.addNamed(child, name);
+        }
+        else {
+            stackPage = this.widget.addChild(child);
+        }
+        this.applyStackPageProps(stackPage, props);
+        this.applyPendingVisibleChild();
+    }
+    applyPendingVisibleChild() {
+        if (this.pendingVisibleChildName !== null) {
+            const child = this.widget.getChildByName(this.pendingVisibleChildName);
+            if (child) {
+                this.widget.setVisibleChild(child);
+                this.pendingVisibleChildName = null;
+            }
+        }
+    }
+    insertStackPageBefore(child, props, _beforeChild) {
+        // Stack doesn't have insertBefore, so we add and rely on order
+        // For now, just add at the end - GTK Stack doesn't support insertion at position
+        this.addStackPage(child, props);
+    }
+    removeStackPage(child) {
+        this.widget.remove(child);
+    }
+    updateStackPageProps(child, props) {
+        const stackPage = this.widget.getPage(child);
+        this.applyStackPageProps(stackPage, props);
+    }
+    applyStackPageProps(stackPage, props) {
+        if (props.name !== undefined) {
+            stackPage.setName(props.name);
+        }
+        if (props.title !== undefined) {
+            stackPage.setTitle(props.title);
+        }
+        if (props.iconName !== undefined) {
+            stackPage.setIconName(props.iconName);
+        }
+        if (props.needsAttention !== undefined) {
+            stackPage.setNeedsAttention(props.needsAttention);
+        }
+        if (props.visible !== undefined) {
+            stackPage.setVisible(props.visible);
+        }
+        if (props.useUnderline !== undefined) {
+            stackPage.setUseUnderline(props.useUnderline);
+        }
+    }
+    attachChild(child) {
+        this.widget.addChild(child);
+    }
+    insertChildBefore(child, _before) {
+        // Stack doesn't support insertion at position
+        this.widget.addChild(child);
+    }
+    detachChild(child) {
+        this.widget.remove(child);
+    }
+    consumedProps() {
+        const consumed = super.consumedProps();
+        consumed.add("visibleChildName");
+        return consumed;
+    }
+    updateProps(oldProps, newProps) {
+        if (newProps.visibleChildName !== undefined) {
+            const name = newProps.visibleChildName;
+            const child = this.widget.getChildByName(name);
+            if (child) {
+                this.widget.setVisibleChild(child);
+                this.pendingVisibleChildName = null;
+            }
+            else {
+                // Child not yet added, defer until it's added
+                this.pendingVisibleChildName = name;
+            }
+        }
+        super.updateProps(oldProps, newProps);
+    }
+}
+export class StackPageNode extends Node {
+    static matches(type) {
+        return type === "Stack.Page";
+    }
+    isVirtual() {
+        return true;
+    }
+    pageProps = {};
+    childWidget = null;
+    parentContainer = null;
+    initialize(props) {
+        this.pageProps = this.extractPageProps(props);
+        super.initialize(props);
+    }
+    extractPageProps(props) {
+        return {
+            name: typeof props.name === "string" ? props.name : undefined,
+            title: typeof props.title === "string" ? props.title : undefined,
+            iconName: typeof props.iconName === "string" ? props.iconName : undefined,
+            needsAttention: typeof props.needsAttention === "boolean" ? props.needsAttention : undefined,
+            visible: typeof props.visible === "boolean" ? props.visible : undefined,
+            useUnderline: typeof props.useUnderline === "boolean" ? props.useUnderline : undefined,
+        };
+    }
+    getChildWidget() {
+        return this.childWidget;
+    }
+    appendChild(child) {
+        const childWidget = child.getWidget();
+        if (childWidget) {
+            this.childWidget = childWidget;
+        }
+    }
+    attachToParent(parent) {
+        if (isStackPageContainer(parent) && this.childWidget) {
+            this.parentContainer = parent;
+            parent.addStackPage(this.childWidget, this.pageProps);
+        }
+    }
+    attachToParentBefore(parent, before) {
+        if (isStackPageContainer(parent) && this.childWidget) {
+            this.parentContainer = parent;
+            const beforePage = before instanceof StackPageNode ? before.getChildWidget() : before.getWidget();
+            if (beforePage) {
+                parent.insertStackPageBefore(this.childWidget, this.pageProps, beforePage);
+            }
+            else {
+                parent.addStackPage(this.childWidget, this.pageProps);
+            }
+        }
+    }
+    detachFromParent(parent) {
+        if (isStackPageContainer(parent) && this.childWidget) {
+            parent.removeStackPage(this.childWidget);
+            this.parentContainer = null;
+        }
+    }
+    consumedProps() {
+        const consumed = super.consumedProps();
+        consumed.add("name");
+        consumed.add("title");
+        consumed.add("iconName");
+        consumed.add("needsAttention");
+        consumed.add("visible");
+        consumed.add("useUnderline");
+        return consumed;
+    }
+    updateProps(oldProps, newProps) {
+        const newPageProps = this.extractPageProps(newProps);
+        const propsChanged = oldProps.name !== newProps.name ||
+            oldProps.title !== newProps.title ||
+            oldProps.iconName !== newProps.iconName ||
+            oldProps.needsAttention !== newProps.needsAttention ||
+            oldProps.visible !== newProps.visible ||
+            oldProps.useUnderline !== newProps.useUnderline;
+        if (propsChanged) {
+            this.pageProps = newPageProps;
+            if (this.parentContainer && this.childWidget) {
+                this.parentContainer.updateStackPageProps(this.childWidget, this.pageProps);
+            }
+        }
+        super.updateProps(oldProps, newProps);
+    }
+}

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

@@ -3,7 +3,6 @@ import type { Props } from "../factory.js";
 import { Node } from "../node.js";
 export declare class TextViewNode extends Node<Gtk.TextView> {
     static matches(type: string): boolean;
-    constructor(type: string, props: Props);
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
 }

package/dist/nodes/text-view.js

@@ -3,13 +3,6 @@ export class TextViewNode extends Node {
     static matches(type) {
         return type === "TextView";
     }
-    constructor(type, props) {
-        super(type, props);
-        const buffer = props.buffer;
-        if (buffer) {
-            this.widget.setBuffer(buffer);
-        }
-    }
     consumedProps() {
         const consumed = super.consumedProps();
         consumed.add("buffer");

package/dist/types.d.ts

@@ -7,7 +7,12 @@ import type { ReactElement, ReactNode } from "react";
 export interface SlotProps {
     children?: ReactNode;
 }
+/**
+ * Props passed to list item components.
+ * @typeParam I - The type of the data item
+ */
 export interface ListItemProps<I = unknown> {
+    /** The data item to render. */
     item: I;
 }
 export interface GridChildProps extends SlotProps {
@@ -21,7 +26,12 @@ export interface GridChildProps extends SlotProps {
  * Called with null during setup (for loading state) and with the actual item during bind.
  */
 export type RenderItemFn<T> = (item: T | null) => ReactElement;
+/**
+ * Props for ListView and GridView components.
+ * @typeParam T - The type of the data items in the list
+ */
 export interface ListViewRenderProps<T = unknown> {
+    /** Render function called for each item in the list. */
     renderItem: RenderItemFn<T>;
 }
 /**
@@ -32,11 +42,20 @@ export interface ListViewRenderProps<T = unknown> {
  * @param columnId - The ID of the column being sorted
  */
 export type ColumnSortFn<T, C extends string = string> = (a: T, b: T, columnId: C) => number;
+/**
+ * Props for individual columns in a ColumnView.
+ * @typeParam T - The type of the data items displayed in the column
+ */
 export interface ColumnViewColumnProps<T = unknown> {
+    /** The column header title. */
     title?: string;
+    /** Whether the column should expand to fill available space. */
     expand?: boolean;
+    /** Whether the column can be resized by the user. */
     resizable?: boolean;
+    /** Fixed width in pixels. Overrides automatic sizing. */
     fixedWidth?: number;
+    /** Unique identifier for the column. Used for sorting. */
     id?: string;
     /**
      * Render function for column cells.
@@ -45,12 +64,69 @@ export interface ColumnViewColumnProps<T = unknown> {
      */
     renderCell: (item: T | null) => ReactElement;
 }
+/**
+ * Props for the ColumnView root component.
+ * @typeParam T - The type of the data items in the view
+ * @typeParam C - The union type of column IDs
+ */
 export interface ColumnViewRootProps<T = unknown, C extends string = string> {
+    /** The ID of the currently sorted column, or null if unsorted. */
     sortColumn?: C | null;
+    /** The current sort direction. */
     sortOrder?: SortType;
+    /** Callback fired when the user changes the sort column or order. */
     onSortChange?: (column: C | null, order: SortType) => void;
+    /** Custom comparison function for sorting items. */
     sortFn?: ColumnSortFn<T, C>;
 }
 export interface NotebookPageProps extends SlotProps {
     label: string;
 }
+export interface StackRootProps extends SlotProps {
+    visibleChildName?: string;
+}
+export interface StackPageProps extends SlotProps {
+    name?: string;
+    title?: string;
+    iconName?: string;
+    needsAttention?: boolean;
+    visible?: boolean;
+    useUnderline?: boolean;
+}
+/**
+ * Props for the Menu.Root component.
+ * Root container for declarative menu structures.
+ */
+export interface MenuRootProps {
+    children?: ReactNode;
+}
+/**
+ * Props for Menu.Item components.
+ * Represents a single menu item with an action.
+ */
+export interface MenuItemProps {
+    /** The visible label for the menu item. */
+    label: string;
+    /** Callback invoked when the menu item is activated. */
+    onActivate?: () => void;
+    /** Keyboard accelerators for this menu item (e.g., `"<Control>q"` or `["<Control>q", "<Control>w"]`). */
+    accels?: string | string[];
+}
+/**
+ * Props for Menu.Section components.
+ * Groups related menu items with optional label.
+ */
+export interface MenuSectionProps {
+    /** Optional section label displayed as a header. */
+    label?: string;
+    children?: ReactNode;
+}
+/**
+ * Props for Menu.Submenu components.
+ * Creates a nested submenu with its own items.
+ */
+export interface MenuSubmenuProps {
+    /** The submenu label shown in parent menu. */
+    label: string;
+    children?: ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.1.50",
+  "version": "0.1.52",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtk",
@@ -36,10 +36,10 @@
   ],
   "dependencies": {
     "react-reconciler": "0.33.0",
-    "@gtkx/ffi": "0.1.50"
+    "@gtkx/ffi": "0.1.52"
   },
   "devDependencies": {
-    "@gtkx/gir": "0.1.50"
+    "@gtkx/gir": "0.1.52"
   },
   "peerDependencies": {
     "react": "^19"