@gtkx/react 0.19.0 → 0.20.0

package/src/generated/jsx.ts

@@ -12575,73 +12575,6 @@ export const GtkColorChooserWidget = "GtkColorChooserWidget" as const;
  * it gets the .color style class.
  */
 export const GtkColorDialogButton = "GtkColorDialogButton" as const;
-/**
- * Presents a large dynamic list of items using multiple columns with headers.
- *
- * `GtkColumnView` uses the factories of its columns to generate a cell widget for
- * each column, for each visible item and displays them together as the row for
- * this item.
- *
- * The {@link Gtk.ColumnView.show-row-separators} and
- * {@link Gtk.ColumnView.show-column-separators} properties offer a simple way
- * to display separators between the rows or columns.
- *
- * `GtkColumnView` allows the user to select items according to the selection
- * characteristics of the model. For models that allow multiple selected items,
- * it is possible to turn on *rubberband selection*, using
- * {@link Gtk.ColumnView.enable-rubberband}.
- *
- * The column view supports sorting that can be customized by the user by
- * clicking on column headers. To set this up, the `GtkSorter` returned by
- * {@link Gtk.ColumnView.get_sorter} must be attached to a sort model for the
- * data that the view is showing, and the columns must have sorters attached to
- * them by calling {@link Gtk.ColumnViewColumn.set_sorter}. The initial sort
- * order can be set with {@link Gtk.ColumnView.sort_by_column}.
- *
- * The column view also supports interactive resizing and reordering of
- * columns, via Drag-and-Drop of the column headers. This can be enabled or
- * disabled with the {@link Gtk.ColumnView.reorderable} and
- * {@link Gtk.ColumnViewColumn.resizable} properties.
- *
- * To learn more about the list widget framework, see the
- * overview.
- *
- * # CSS nodes
- *
- * ```
- * columnview[.column-separators][.rich-list][.navigation-sidebar][.data-table]
- * ├── header
- * │   ├── <column header>
- * ┊   ┊
- * │   ╰── <column header>
- * │
- * ├── listview
- * │
- * ┊
- * ╰── [rubberband]
- * ```
- *
- * `GtkColumnView` uses a single CSS node named columnview. It may carry the
- * .column-separators style class, when {@link Gtk.ColumnView.show-column-separators}
- * property is set. Header widgets appear below a node with name header.
- * The rows are contained in a `GtkListView` widget, so there is a listview
- * node with the same structure as for a standalone `GtkListView` widget.
- * If {@link Gtk.ColumnView.show-row-separators} is set, it will be passed
- * on to the list view, causing its CSS node to carry the .separators style class.
- * For rubberband selection, a node with name rubberband is used.
- *
- * The main columnview node may also carry style classes to select
- * the style of list presentation:
- * .rich-list, .navigation-sidebar or .data-table.
- *
- * # Accessibility
- *
- * `GtkColumnView` uses the {@link Gtk.AccessibleRole.tree_grid} role, header title
- * widgets are using the {@link Gtk.AccessibleRole.column_header} role. The row widgets
- * are using the {@link Gtk.AccessibleRole.row} role, and individual cells are using
- * the {@link Gtk.AccessibleRole.grid_cell} role
- */
-export const GtkColumnView = "GtkColumnView" as const;
 /**
  * A `GtkComboBox` is a widget that allows the user to choose from a list of
  * valid choices.
@@ -12763,53 +12696,6 @@ export const GtkComboBox = "GtkComboBox" as const;
  * children, and the .linked class to the node of its internal box.
  */
 export const GtkComboBoxText = "GtkComboBoxText" as const;
-/**
- * A {@link Gtk.ListBoxRow} used to choose from a list of items.
- *
- * ![combo-row](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/combo-row.png)
- *
- * The `AdwComboRow` widget allows the user to choose from a list of valid
- * choices. The row displays the selected choice. When activated, the row
- * displays a popover which allows the user to make a new choice.
- *
- * Example of an `AdwComboRow` UI definition:
- * ```xml
- * <object class="AdwComboRow">
- *   <property name="title" translatable="yes">Combo Row</property>
- *   <property name="model">
- *     <object class="GtkStringList">
- *       <items>
- *         <item translatable="yes">Foo</item>
- *         <item translatable="yes">Bar</item>
- *         <item translatable="yes">Baz</item>
- *       </items>
- *     </object>
- *   </property>
- * </object>
- * ```
- *
- * The {@link ComboRow.selected} and {@link ComboRow.selected-item}
- * properties can be used to keep track of the selected item and react to their
- * changes.
- *
- * `AdwComboRow` mirrors {@link Gtk.DropDown}, see that widget for details.
- *
- * `AdwComboRow` is {@link Gtk.ListBoxRow.activatable} if a model is set.
- *
- * ## CSS nodes
- *
- * `AdwComboRow` has a main CSS node with name `row` and the `.combo` style
- * class.
- *
- * Its popover has the node named `popover` with the `.menu` style class, it
- * contains a {@link Gtk.ScrolledWindow}, which in turn contains a
- * {@link Gtk.ListView}, both are accessible via their regular nodes.
- *
- * ## Accessibility
- *
- * `AdwComboRow` uses the `GTK_ACCESSIBLE_ROLE_COMBO_BOX` role.
- */
-export const AdwComboRow = "AdwComboRow" as const;
 /**
  * Widget for single cell of completion proposal.
  *
@@ -13101,64 +12987,6 @@ export const GtkDragIcon = "GtkDragIcon" as const;
  * creating your own `GtkWidget` subclass.
  */
 export const GtkDrawingArea = "GtkDrawingArea" as const;
-/**
- * Allows the user to choose an item from a list of options.
- *
- * ![An example GtkDropDown](https://docs.gtk.org/gtk4/drop-down.png)
- *
- * The `GtkDropDown` displays the [selected]{@link Gtk.DropDown.selected}
- * choice.
- *
- * The options are given to `GtkDropDown` in the form of `GListModel`
- * and how the individual options are represented is determined by
- * a {@link Gtk.ListItemFactory}. The default factory displays simple strings,
- * and adds a checkmark to the selected item in the popup.
- *
- * To set your own factory, use {@link Gtk.DropDown.set_factory}. It is
- * possible to use a separate factory for the items in the popup, with
- * {@link Gtk.DropDown.set_list_factory}.
- *
- * `GtkDropDown` knows how to obtain strings from the items in a
- * {@link Gtk.StringList}; for other models, you have to provide an expression
- * to find the strings via {@link Gtk.DropDown.set_expression}.
- *
- * `GtkDropDown` can optionally allow search in the popup, which is
- * useful if the list of options is long. To enable the search entry,
- * use {@link Gtk.DropDown.set_enable_search}.
- *
- * Here is a UI definition example for `GtkDropDown` with a simple model:
- *
- * ```xml
- * <object class="GtkDropDown">
- *   <property name="model">
- *     <object class="GtkStringList">
- *       <items>
- *         <item translatable="yes">Factory</item>
- *         <item translatable="yes">Home</item>
- *         <item translatable="yes">Subway</item>
- *       </items>
- *     </object>
- *   </property>
- * </object>
- * ```
- *
- * If a `GtkDropDown` is created in this manner, or with
- * {@link Gtk.DropDown.new_from_strings}, for instance, the object returned from
- * {@link Gtk.DropDown.get_selected_item} will be a {@link Gtk.StringObject}.
- *
- * To learn more about the list widget framework, see the
- * overview.
- *
- * ## CSS nodes
- *
- * `GtkDropDown` has a single CSS node with name dropdown,
- * with the button and popover nodes as children.
- *
- * ## Accessibility
- *
- * `GtkDropDown` uses the {@link Gtk.AccessibleRole.combo_box} role.
- */
-export const GtkDropDown = "GtkDropDown" as const;
 /**
  * Allows users to edit the displayed text by switching to an “edit mode”.
  *
@@ -14230,51 +14058,6 @@ export const GtkGraphicsOffload = "GtkGraphicsOffload" as const;
  * Starting from GTK 4.12, `GtkGrid` uses the {@link Gtk.AccessibleRole.generic} role.
  */
 export const GtkGrid = "GtkGrid" as const;
-/**
- * Presents a large dynamic grid of items.
- *
- * `GtkGridView` uses its factory to generate one child widget for each
- * visible item and shows them in a grid. The orientation of the grid view
- * determines if the grid reflows vertically or horizontally.
- *
- * `GtkGridView` allows the user to select items according to the selection
- * characteristics of the model. For models that allow multiple selected items,
- * it is possible to turn on _rubberband selection_, using
- * {@link Gtk.GridView.enable-rubberband}.
- *
- * To learn more about the list widget framework, see the
- * overview.
- *
- * # Actions
- *
- * `GtkGridView` defines a set of built-in actions:
- *
- * - `list.activate-item` activates the item at given position by emitting the
- *   the {@link Gtk.GridView.:activate} signal.
- *
- * # CSS nodes
- *
- * ```
- * gridview
- * ├── child[.activatable]
- * │
- * ├── child[.activatable]
- * │
- * ┊
- * ╰── [rubberband]
- * ```
- *
- * `GtkGridView` uses a single CSS node with name `gridview`. Each child uses
- * a single CSS node with name `child`. If the {@link Gtk.ListItem.activatable}
- * property is set, the corresponding row will have the `.activatable` style
- * class. For rubberband selection, a subnode with name `rubberband` is used.
- *
- * # Accessibility
- *
- * `GtkGridView` uses the {@link Gtk.AccessibleRole.grid} role, and the items
- * use the {@link Gtk.AccessibleRole.grid_cell} role.
- */
-export const GtkGridView = "GtkGridView" as const;
 /**
  * Gutter object for {@link View}.
  *
@@ -15235,113 +15018,6 @@ export const GtkListBox = "GtkListBox" as const;
  * when necessary.
  */
 export const GtkListBoxRow = "GtkListBoxRow" as const;
-/**
- * Presents a large dynamic list of items.
- *
- * `GtkListView` uses its factory to generate one row widget for each visible
- * item and shows them in a linear display, either vertically or horizontally.
- *
- * The {@link Gtk.ListView.show-separators} property offers a simple way to
- * display separators between the rows.
- *
- * `GtkListView` allows the user to select items according to the selection
- * characteristics of the model. For models that allow multiple selected items,
- * it is possible to turn on _rubberband selection_, using
- * {@link Gtk.ListView.enable-rubberband}.
- *
- * If you need multiple columns with headers, see {@link Gtk.ColumnView}.
- *
- * To learn more about the list widget framework, see the
- * overview.
- *
- * An example of using `GtkListView`:
- * ```c
- * static void
- * setup_listitem_cb (GtkListItemFactory *factory,
- *                    GtkListItem        *list_item)
- * {
- *   GtkWidget *image;
- *
- *   image = gtk_image_new ();
- *   gtk_image_set_icon_size (GTK_IMAGE (image), GTK_ICON_SIZE_LARGE);
- *   gtk_list_item_set_child (list_item, image);
- * }
- *
- * static void
- * bind_listitem_cb (GtkListItemFactory *factory,
- *                   GtkListItem        *list_item)
- * {
- *   GtkWidget *image;
- *   GAppInfo *app_info;
- *
- *   image = gtk_list_item_get_child (list_item);
- *   app_info = gtk_list_item_get_item (list_item);
- *   gtk_image_set_from_gicon (GTK_IMAGE (image), g_app_info_get_icon (app_info));
- * }
- *
- * static void
- * activate_cb (GtkListView  *list,
- *              guint         position,
- *              gpointer      unused)
- * {
- *   GAppInfo *app_info;
- *
- *   app_info = g_list_model_get_item (G_LIST_MODEL (gtk_list_view_get_model (list)), position);
- *   g_app_info_launch (app_info, NULL, NULL, NULL);
- *   g_object_unref (app_info);
- * }
- *
- * ...
- *
- *   model = create_application_list ();
- *
- *   factory = gtk_signal_list_item_factory_new ();
- *   g_signal_connect (factory, "setup", G_CALLBACK (setup_listitem_cb), NULL);
- *   g_signal_connect (factory, "bind", G_CALLBACK (bind_listitem_cb), NULL);
- *
- *   list = gtk_list_view_new (GTK_SELECTION_MODEL (gtk_single_selection_new (model)), factory);
- *
- *   g_signal_connect (list, "activate", G_CALLBACK (activate_cb), NULL);
- *
- *   gtk_scrolled_window_set_child (GTK_SCROLLED_WINDOW (sw), list);
- * ```
- *
- * # Actions
- *
- * `GtkListView` defines a set of built-in actions:
- *
- * - `list.activate-item` activates the item at given position by emitting
- *   the {@link Gtk.ListView.:activate} signal.
- *
- * # CSS nodes
- *
- * ```
- * listview[.separators][.rich-list][.navigation-sidebar][.data-table]
- * ├── row[.activatable]
- * │
- * ├── row[.activatable]
- * │
- * ┊
- * ╰── [rubberband]
- * ```
- *
- * `GtkListView` uses a single CSS node named `listview`. It may carry the
- * `.separators` style class, when {@link Gtk.ListView.show-separators}
- * property is set. Each child widget uses a single CSS node named `row`.
- * If the {@link Gtk.ListItem.activatable} property is set, the
- * corresponding row will have the `.activatable` style class. For
- * rubberband selection, a node with name `rubberband` is used.
- *
- * The main listview node may also carry style classes to select
- * the style of list presentation:
- * .rich-list, .navigation-sidebar or .data-table.
- *
- * # Accessibility
- *
- * `GtkListView` uses the {@link Gtk.AccessibleRole.list} role, and the list
- * items use the {@link Gtk.AccessibleRole.list_item} role.
- */
-export const GtkListView = "GtkListView" as const;
 /**
  * `GtkLockButton` is a widget to obtain and revoke authorizations
  * needed to operate the controls.

package/src/host-config.ts

@@ -73,6 +73,8 @@ export function createHostConfig(): HostConfig {
         supportsMutation: true,
         supportsPersistence: false,
         supportsHydration: false,
+        supportsMicrotasks: true,
+        scheduleMicrotask: (fn: () => unknown) => queueMicrotask(fn),
         isPrimaryRenderer: true,
         noTimeout: -1,
         getRootHostContext: () => ({}),

package/src/jsx.ts

@@ -7,14 +7,7 @@ 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 {
-    AdwComboRowProps as IntrinsicAdwComboRowProps,
-    GtkColumnViewProps as IntrinsicGtkColumnViewProps,
-    GtkDropDownProps as IntrinsicGtkDropDownProps,
-    GtkGridViewProps as IntrinsicGtkGridViewProps,
-    GtkListViewProps as IntrinsicGtkListViewProps,
-    WidgetSlotNames,
-} from "./generated/jsx.js";
+import type { WidgetSlotNames } from "./generated/jsx.js";
 
 /**
  * CSS properties that can be animated on a widget.
@@ -377,45 +370,36 @@ export type ContainerSlotProps = {
 };
 
 /**
- * Props for items in a GtkListView, GtkGridView, or GtkColumnView.
+ * A data item for list/grid/column views and dropdowns.
  *
- * When used inside a GtkListView, items can be nested to create tree hierarchies.
- * Tree-specific props (`indentForDepth`, `indentForIcon`, `hideExpander`) only
- * apply when items are used inside a GtkListView with nested children.
+ * Uses a discriminated union on the `section` field:
+ * - Regular items have `value: T` and optional tree-mode properties
+ * - Section headers have `value: S`, `section: true`, and required `children`
  *
- * @typeParam T - The type of data associated with this list item
- */
-export type ListItemProps<T = unknown> = {
-    /** Unique identifier for this item */
-    id: string;
-    /** The data value for this item */
-    value: T;
-    /** Whether to indent based on tree depth (default: true) */
-    indentForDepth?: boolean;
-    /** Whether to indent for expander icon width */
-    indentForIcon?: boolean;
-    /** Whether to hide the expand/collapse arrow */
-    hideExpander?: boolean;
-    /** Nested list items (children of this item in a tree) */
-    children?: ReactNode;
-};
-
-/**
- * Props for section headers in a GtkListView, GtkGridView, or GtkColumnView.
+ * Mode is detected from data shape:
+ * - Any item has `section: true` → section mode
+ * - Any item has non-empty `children` (without `section`) → tree mode
+ * - Otherwise → flat mode
  *
- * 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
+ * @typeParam T - The type of data for regular items
+ * @typeParam S - The type of data for section headers
  */
-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;
-};
+export type ListItem<T = unknown, S = unknown> =
+    | {
+          id: string;
+          value: T;
+          section?: false | undefined;
+          children?: ListItem<T, S>[];
+          hideExpander?: boolean;
+          indentForDepth?: boolean;
+          indentForIcon?: boolean;
+      }
+    | {
+          id: string;
+          value: S;
+          section: true;
+          children: ListItem<T, S>[];
+      };
 
 /**
  * Props for positioning children within a GtkGrid.
@@ -474,7 +458,7 @@ export type ColumnViewColumnProps<T = unknown> = {
     /** Whether this column is visible */
     visible?: boolean;
     /** Function to render the cell content for each row */
-    renderCell: (item: T | null) => ReactNode;
+    renderCell: (item: T) => ReactNode;
     /** Menu items for the column header context menu */
     children?: ReactNode;
 };
@@ -688,6 +672,8 @@ export type TextBufferProps = {
 type BaseListViewProps = {
     /** Estimated item height in pixels for virtualization */
     estimatedItemHeight?: number;
+    /** Estimated item width in pixels for virtualization */
+    estimatedItemWidth?: number;
     /** Array of selected item IDs */
     selected?: string[] | null;
     /** Callback fired when the selection changes */
@@ -697,33 +683,39 @@ type BaseListViewProps = {
 };
 
 export type ListViewProps<T = unknown, S = unknown> = BaseListViewProps & {
+    /** Data items to display in the list */
+    items?: ListItem<T, S>[];
     /** Function to render each list item. The `row` parameter provides tree state for hierarchical lists. */
-    renderItem: (item: T | null, row?: Gtk.TreeListRow | null) => ReactNode;
+    renderItem: (item: T, 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;
+    /** Function to render section headers when items contain section entries */
+    renderHeader?: ((item: S) => ReactNode) | null;
 };
 
 export type GridViewProps<T = unknown> = BaseListViewProps & {
+    /** Data items to display in the grid */
+    items?: ListItem<T>[];
     /** Function to render each grid item */
-    renderItem: (item: T | null) => ReactNode;
+    renderItem: (item: T) => ReactNode;
 };
 
 /**
  * Props shared by single-selection dropdown widgets (GtkDropDown, AdwComboRow).
  */
 export type DropDownProps<T = unknown, S = unknown> = {
+    /** Data items to display in the dropdown */
+    items?: ListItem<T, S>[];
     /** 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;
+    renderItem?: ((item: T) => 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;
+    renderListItem?: ((item: T) => ReactNode) | null;
+    /** Function to render section headers when items contain section entries */
+    renderHeader?: ((item: S) => ReactNode) | null;
 };
 
 /**
@@ -767,18 +759,13 @@ export type AdjustableProps = {
  *
  * @example
  * ```tsx
- * import { x, GtkHeaderBar, GtkDropDown } from "@gtkx/react";
+ * import { x, GtkHeaderBar } from "@gtkx/react";
  *
  * <GtkHeaderBar>
  *   <x.Slot for={GtkHeaderBar} id="titleWidget">
  *     <GtkLabel label="App Title" />
  *   </x.Slot>
  * </GtkHeaderBar>
- *
- * <GtkDropDown>
- *   <x.ListItem id="opt1" value="Option 1" />
- *   <x.ListItem id="opt2" value="Option 2" />
- * </GtkDropDown>
  * ```
  */
 export const x = {
@@ -866,53 +853,6 @@ export const x = {
      */
     NotebookPageTab: "NotebookPageTab" as const,
 
-    /**
-     * Element type for items in a GtkListView, GtkGridView, or GtkColumnView.
-     *
-     * Items can be nested to create tree hierarchies inside a GtkListView.
-     *
-     * @example
-     * ```tsx
-     * // Flat list
-     * <GtkListView renderItem={(item) => <GtkLabel label={item.name} />}>
-     *   <x.ListItem id="1" value={{ name: "Item 1" }} />
-     * </GtkListView>
-     *
-     * // Tree list (nested items)
-     * <GtkListView renderItem={(item, row) => <GtkLabel label={item.name} />} autoexpand>
-     *   <x.ListItem id="parent" value={{ name: "Parent" }}>
-     *     <x.ListItem id="child" value={{ name: "Child" }} />
-     *   </x.ListItem>
-     * </GtkListView>
-     * ```
-     */
-    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).
      *
@@ -1181,8 +1121,6 @@ declare global {
                 ColumnViewColumn: ColumnViewColumnProps;
                 FixedChild: FixedChildProps;
                 GridChild: GridChildProps;
-                ListItem: ListItemProps;
-                ListSection: ListSectionProps;
                 MenuItem: MenuItemProps;
                 MenuSection: MenuSectionProps;
                 MenuSubmenu: MenuSubmenuProps;
@@ -1316,6 +1254,8 @@ declare module "./generated/jsx.js" {
     interface GtkGridViewProps extends GridViewProps {}
 
     interface GtkColumnViewProps {
+        /** Data items to display in the column view */
+        items?: ListItem[];
         /** Array of selected row IDs */
         selected?: string[] | null;
         /** Callback fired when the selection changes */
@@ -1330,7 +1270,7 @@ 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 */
+        /** Function to render section headers when items contain section entries */
         renderHeader?: ((item: unknown) => ReactNode) | null;
     }
 
@@ -1411,37 +1351,5 @@ 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 { AdwComboRow, GtkColumnView, GtkDropDown, GtkGridView, GtkListView } from "./components/list.js";
 export * from "./generated/jsx.js";

package/src/metadata.ts

@@ -1,5 +1,5 @@
 import type { NativeClass } from "@gtkx/ffi";
-import { CONSTRUCT_ONLY_PROPS, PROPS, SIGNALS } from "./generated/internal.js";
+import { CONSTRUCTION_META, PROPS, SIGNALS } from "./generated/internal.js";
 import type { Container } from "./types.js";
 
 const walkPrototypeChain = <T>(instance: Container, lookup: (typeName: string) => T | null): T | null => {
@@ -31,8 +31,11 @@ export const resolvePropMeta = (instance: Container, key: string): [string | nul
     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;
+    walkPrototypeChain(instance, (typeName) => {
+        const meta = CONSTRUCTION_META[typeName];
+        if (!meta || !(key in meta)) return null;
+        return meta[key]?.constructOnly === true;
+    }) ?? false;
 
 export const resolveSignal = (instance: Container, propName: string): string | null => {
     if (propName === "onNotify") return "notify";