@gtkx/components 0.21.0 → 1.0.0-rc.1

package/src/column-view-column.tsx

@@ -1,72 +1,81 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import { GtkColumnViewColumn, type GtkColumnViewColumnProps } from "@gtkx/jsx/gtk";
-import { createElement, type ReactNode, useLayoutEffect, useRef, useState } from "react";
-import { useColumnViewContext } from "./contexts/column-view-context.js";
+import { useMergeRefs } from "@gtkx/react/internal";
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+import { type CellRenderer, CellRenderHost, itemRenderer, type TreeRenderContext } from "./cell.js";
+import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
 import { useHeaderMenu } from "./hooks/use-header-menu.js";
-import { type FactoryBinding, useRealizedSlots } from "./hooks/use-realized-slots.js";
-import { ListPortalHost } from "./list-portal-host.js";
-import type { SlotRenderer } from "./list-slot.js";
-import type { ColumnViewColumnProps } from "./types.js";
+import type { RenderItemProps } from "./types.js";
+import type { ItemResolver } from "./utils/item-resolver.js";
 
-const factoryBinding: FactoryBinding<Gtk.ColumnViewColumn> = {
-    install: (column, factory) => column.setFactory(factory),
-    uninstall: (column) => column.setFactory(null),
+const factoryInstaller = makeFactoryInstaller<Gtk.ColumnViewColumn>((column, factory) => column.setFactory(factory));
+
+export type ColumnDefDeclarativeProps<T = unknown> = {
+    title: string;
+    expand?: boolean | undefined;
+    resizable?: boolean | undefined;
+    fixedWidth?: number | undefined;
+    id: string;
+    sortable?: boolean | undefined;
+    visible?: boolean | undefined;
+    renderCell: (props: RenderItemProps<T>) => ReactNode;
+    headerMenu?: ReactNode;
 };
 
-/**
- * Props for the {@link ColumnViewColumn} component: the raw
- * `GtkColumnViewColumn` element surface (minus its imperative `factory` and
- * `sorter` properties) with its cell wiring replaced by the declarative
- * {@link ColumnViewColumnProps} API.
- */
-export type ColumnViewColumnComponentProps<T = unknown> = Omit<GtkColumnViewColumnProps, "factory" | "sorter"> &
-    ColumnViewColumnProps<T>;
+export type ColumnDef<T = unknown> = Omit<GtkColumnViewColumnProps, "factory" | "sorter"> &
+    ColumnDefDeclarativeProps<T>;
+
+type ColumnViewColumnProps<T = unknown> = ColumnDef<T> & {
+    resolver: ItemResolver<unknown, unknown>;
+    tree: TreeRenderContext;
+    estimatedItemHeight?: number | undefined;
+    onInstance: (id: string, column: Gtk.ColumnViewColumn | null) => void;
+};
 
-/**
- * A single column of a {@link ColumnView}, rendering each row's cell through
- * the declarative `renderCell` callback and optionally attaching a header
- * context menu.
- */
-export const ColumnViewColumn = <T = unknown>(props: ColumnViewColumnComponentProps<T>): ReactNode => {
-    const { id, title, expand, resizable, fixedWidth, visible, sortable, renderCell, headerMenu } = props;
-    const context = useColumnViewContext();
+export const ColumnViewColumn = <T = unknown>(props: ColumnViewColumnProps<T>): ReactNode => {
+    const {
+        id,
+        title,
+        sortable,
+        renderCell,
+        headerMenu,
+        resolver,
+        tree,
+        estimatedItemHeight,
+        onInstance,
+        ref,
+        ...intrinsicProps
+    } = props as ColumnViewColumnProps<T> & { [key: string]: unknown };
     const [column, setColumn] = useState<Gtk.ColumnViewColumn | null>(null);
 
-    const captureColumn = useRef((value: Gtk.ColumnViewColumn | null) => {
-        setColumn(value);
-    }).current;
+    const captureColumn = useMergeRefs<Gtk.ColumnViewColumn>(ref, setColumn);
 
-    const { store } = useRealizedSlots<Gtk.ColumnViewColumn>({
-        target: column,
-        binding: factoryBinding,
+    const store = useCellContainers<Gtk.ColumnViewColumn>({
+        object: column,
+        installer: factoryInstaller,
+        estimatedHeight: estimatedItemHeight,
     });
 
-    const registerRef = useRef(context.register);
-    registerRef.current = context.register;
-    const unregisterRef = useRef(context.unregister);
-    unregisterRef.current = context.unregister;
+    const onInstanceRef = useRef(onInstance);
+    onInstanceRef.current = onInstance;
 
     useLayoutEffect(() => {
         if (column === null) return;
-        registerRef.current({ id, column, sortable: sortable ?? false });
-        return () => unregisterRef.current(id);
-    }, [column, id, sortable]);
+        onInstanceRef.current(id, column);
+        return () => onInstanceRef.current(id, null);
+    }, [column, id]);
 
     const headerMenuPortal = useHeaderMenu(column, headerMenu);
 
-    const slotRenderer: SlotRenderer<unknown, unknown> = (value, _treeRow, isHeader) =>
-        isHeader ? null : renderCell(value as T);
-
-    const intrinsicProps: Record<string, unknown> = { id, title, ref: captureColumn };
-    if (expand !== undefined) intrinsicProps["expand"] = expand;
-    if (resizable !== undefined) intrinsicProps["resizable"] = resizable;
-    if (fixedWidth !== undefined) intrinsicProps["fixedWidth"] = fixedWidth;
-    if (visible !== undefined) intrinsicProps["visible"] = visible;
+    const cellRenderer: CellRenderer<unknown, unknown> = itemRenderer<unknown, unknown>(
+        (cellProps) => renderCell({ ...cellProps, item: cellProps.item as T }),
+        tree,
+    );
 
     return (
         <>
-            {createElement(GtkColumnViewColumn, intrinsicProps)}
-            <ListPortalHost store={store} resolver={context.resolver} render={slotRenderer} />
+            <GtkColumnViewColumn {...intrinsicProps} id={id} title={title} ref={captureColumn} />
+            <CellRenderHost store={store} resolver={resolver} render={cellRenderer} />
             {headerMenuPortal}
         </>
     );

package/src/column-view.tsx

@@ -1,206 +1,190 @@
-import type * as Gio from "@gtkx/gi/gio";
 import type * as Gtk from "@gtkx/gi/gtk";
 import { GtkColumnView, type GtkColumnViewProps } from "@gtkx/jsx/gtk";
-import { useForwardedRef } from "@gtkx/react";
-import { createElement, type ReactNode, type Ref, useCallback, useMemo, useRef, useState } from "react";
-import {
-    type ColumnRegistration,
-    ColumnViewContext,
-    type ColumnViewContextValue,
-} from "./contexts/column-view-context.js";
-import { useListModel } from "./hooks/use-list-model.js";
-import { useModelInstallation } from "./hooks/use-model-installation.js";
-import { type FactoryBinding, useRealizedSlots } from "./hooks/use-realized-slots.js";
-import { useSelectionModel } from "./hooks/use-selection-model.js";
-import { useSortHandler } from "./hooks/use-sort-handler.js";
-import { ListPortalHost } from "./list-portal-host.js";
-import type { SlotRenderer } from "./list-slot.js";
-import type { ColumnViewProps } from "./types.js";
+import { type ReactNode, type Ref, useCallback, useMemo, useState } from "react";
+import { createTreeRenderContext, HeaderRenderHost, type TreeRenderContext } from "./cell.js";
+import { type ColumnDef, ColumnViewColumn } from "./column-view-column.js";
+import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
+import { useCollectionWidget } from "./hooks/use-collection-widget.js";
+import { type ColumnRegistration, useSortHandler } from "./hooks/use-sort-handler.js";
+import type {
+    CollectionItemSizeProps,
+    ControlledExpansionProps,
+    ControlledSelectionProps,
+    ItemNode,
+    SectionNode,
+} from "./types.js";
+import type { CellContainerStore } from "./utils/cell-container-store.js";
 import type { ItemResolver } from "./utils/item-resolver.js";
 
-const headerFactoryBinding: FactoryBinding<Gtk.ColumnView> = {
-    install: (widget, factory) => widget.setHeaderFactory(factory),
-    uninstall: (widget) => widget.setHeaderFactory(null),
-};
+export type { ColumnDef, ColumnDefDeclarativeProps } from "./column-view-column.js";
 
-interface ColumnRegistry {
-    columns: ColumnRegistration[];
-    register(registration: ColumnRegistration): void;
-    unregister(id: string): void;
-}
+const headerFactoryInstaller = makeFactoryInstaller<Gtk.ColumnView>((widget, factory) =>
+    widget.setHeaderFactory(factory),
+);
 
-const useColumnRegistry = (): ColumnRegistry => {
-    const [registrations, setRegistrations] = useState<Map<string, ColumnRegistration>>(() => new Map());
-    const register = useCallback((registration: ColumnRegistration): void => {
-        setRegistrations((current) => {
-            const next = new Map(current);
-            next.set(registration.id, registration);
-            return next;
-        });
-    }, []);
-    const unregister = useCallback((id: string): void => {
-        setRegistrations((current) => {
-            if (!current.has(id)) return current;
-            const next = new Map(current);
-            next.delete(id);
-            return next;
-        });
-    }, []);
-    const columns = useMemo(() => [...registrations.values()], [registrations]);
-    return { columns, register, unregister };
+export type ColumnViewSortProps = {
+    sortColumn?: string | null | undefined;
+    sortOrder?: Gtk.SortType | null | undefined;
+    onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;
 };
 
+export type ColumnViewDeclarativeProps<T = unknown, S = unknown> = ColumnViewSortProps &
+    Omit<CollectionItemSizeProps, "estimatedItemWidth"> &
+    ControlledSelectionProps &
+    ControlledExpansionProps & {
+        items?: ItemNode<T>[] | undefined;
+        sections?: SectionNode<S, T>[] | undefined;
+        renderHeader?: ((info: { section: S }) => ReactNode) | null | undefined;
+        columns: ColumnDef<T>[];
+    };
+
 /**
- * Props for the {@link ColumnView} component: the raw `GtkColumnView` element
- * surface (minus its imperative `columns` property) with its model/sort wiring
- * replaced by the declarative {@link ColumnViewProps} API. Columns are declared
- * as {@link ColumnViewColumn} children.
+ * Props for {@link ColumnView}. Combines the underlying Gtk.ColumnView props with
+ * declarative collection props: flat items or grouped sections, controlled selection
+ * and expansion, sorting (sortColumn, sortOrder, onSortChanged), an optional section
+ * header renderer, and the columns to render.
  */
-export type ColumnViewComponentProps<T = unknown, S = unknown> = Omit<
+export type ColumnViewProps<T = unknown, S = unknown> = Omit<
     GtkColumnViewProps,
-    "columns" | keyof ColumnViewProps<T, S>
+    "columns" | "model" | "headerFactory" | keyof ColumnViewDeclarativeProps<T, S>
 > &
-    ColumnViewProps<T, S>;
+    ColumnViewDeclarativeProps<T, S>;
 
-type NormalizedColumnViewProps<T, S> = ColumnViewProps<T, S> & {
+type NormalizedColumnViewProps<T, S> = ColumnViewDeclarativeProps<T, S> & {
     ref?: Ref<Gtk.ColumnView | null>;
-    renderHeader?: ((value: S) => ReactNode) | null;
-    children?: ReactNode;
     [key: string]: unknown;
 };
 
-const headerRenderer =
-    <T, S>(renderHeader: ((value: S) => ReactNode) | null | undefined): SlotRenderer<T, S> =>
-    (value) =>
-        renderHeader ? renderHeader(value as S) : null;
-
 interface ColumnViewWiring<T, S> {
     setRef: (value: Gtk.ColumnView | null) => void;
-    resolver: ItemResolver<T, S>;
-    headerResolver: ItemResolver<T, S>;
-    headerStore: ReturnType<typeof useRealizedSlots>["store"];
     useHeader: boolean;
-    contextValue: ColumnViewContextValue;
+    headerStore: CellContainerStore;
+    headerResolver: ItemResolver<T, S>;
+    resolver: ItemResolver<unknown, unknown>;
+    tree: TreeRenderContext;
+    setInstance: (id: string, column: Gtk.ColumnViewColumn | null) => void;
 }
 
-const useColumnViewWiring = <T, S>(
-    props: NormalizedColumnViewProps<T, S>,
-    registry: ColumnRegistry,
-): ColumnViewWiring<T, S> => {
-    const widgetRef = useRef<Gtk.ColumnView | null>(null);
-    const captureWidget = useCallback((value: Gtk.ColumnView | null) => {
-        widgetRef.current = value;
+const useColumnInstances = (): {
+    instances: Map<string, Gtk.ColumnViewColumn>;
+    setInstance: (id: string, column: Gtk.ColumnViewColumn | null) => void;
+} => {
+    const [instances, setInstances] = useState<Map<string, Gtk.ColumnViewColumn>>(() => new Map());
+    const setInstance = useCallback((id: string, column: Gtk.ColumnViewColumn | null): void => {
+        setInstances((current) => {
+            if (column === null) {
+                if (!current.has(id)) return current;
+                const next = new Map(current);
+                next.delete(id);
+                return next;
+            }
+            if (current.get(id) === column) return current;
+            const next = new Map(current);
+            next.set(id, column);
+            return next;
+        });
     }, []);
-    const [, setRef] = useForwardedRef<Gtk.ColumnView>(props.ref, captureWidget);
+    return { instances, setInstance };
+};
 
-    const externalModel = props.model as Gio.ListModel | undefined;
-    const listModel = useListModel<T, S>(
-        externalModel === undefined ? { items: props.items } : { model: externalModel },
-    );
+const buildRegistrations = <T,>(
+    columns: ColumnDef<T>[],
+    instances: Map<string, Gtk.ColumnViewColumn>,
+): ColumnRegistration[] => {
+    const result: ColumnRegistration[] = [];
+    for (const column of columns) {
+        const instance = instances.get(column.id);
+        if (instance) result.push({ id: column.id, column: instance, sortable: column.sortable ?? false });
+    }
+    return result;
+};
 
-    const controlledSelection = useSelectionModel<T, S>({
-        base: listModel.model,
-        selectionMode: props.selectionMode,
-        selected: props.selected,
-        onSelectionChanged: props.onSelectionChanged,
-        resolver: listModel.resolver,
-    });
-    const installedModel: Gtk.SelectionModel =
-        externalModel === undefined ? controlledSelection : (externalModel as Gtk.SelectionModel);
-    useModelInstallation(widgetRef, installedModel, (widget, model) => widget.setModel(model));
-
-    const useHeader = externalModel === undefined && typeof props.renderHeader === "function";
-    const headers = useRealizedSlots<Gtk.ColumnView>({
-        target: useHeader ? widgetRef : null,
-        binding: headerFactoryBinding,
-        estimatedHeight: props.estimatedRowHeight ?? undefined,
+const useColumnViewWiring = <T, S>(props: NormalizedColumnViewProps<T, S>): ColumnViewWiring<T, S> => {
+    const { widgetRef, setRef, collection } = useCollectionWidget<Gtk.ColumnView, T, S>(props);
+
+    const useHeader = collection.useHeader;
+    const headerStore = useCellContainers<Gtk.ColumnView>({
+        object: useHeader ? widgetRef : null,
+        installer: headerFactoryInstaller,
+        estimatedHeight: props.estimatedItemHeight,
     });
 
+    const { instances, setInstance } = useColumnInstances();
+    const registrations = useMemo<ColumnRegistration[]>(
+        () => buildRegistrations(props.columns, instances),
+        [props.columns, instances],
+    );
+
     useSortHandler({
         columnView: widgetRef,
         sortColumn: props.sortColumn,
         sortOrder: props.sortOrder,
         onSortChanged: props.onSortChanged,
-        columns: registry.columns,
+        columns: registrations,
     });
 
-    const contextValue = useMemo<ColumnViewContextValue>(
-        () => ({
-            columnView: widgetRef,
-            resolver: listModel.resolver as ItemResolver<unknown, unknown>,
-            register: registry.register,
-            unregister: registry.unregister,
-        }),
-        [listModel.resolver, registry.register, registry.unregister],
+    const expandedIds = props.expandedIds;
+    const tree = useMemo<TreeRenderContext>(
+        () => createTreeRenderContext(expandedIds, collection.rowId),
+        [expandedIds, collection.rowId],
     );
 
     return {
         setRef,
-        resolver: listModel.resolver,
-        headerResolver: listModel.headerResolver,
-        headerStore: headers.store,
         useHeader,
-        contextValue,
+        headerStore,
+        headerResolver: collection.headerResolver,
+        resolver: collection.resolver as ItemResolver<unknown, unknown>,
+        tree,
+        setInstance,
     };
 };
 
 /**
- * A `GtkColumnView` driven by a declarative `items` model with optional
- * controlled selection, controlled sorting, and section headers. Columns are
- * declared as {@link ColumnViewColumn} children. Supplying an external `model`
- * switches to the uncontrolled form.
+ * Renders a Gtk.ColumnView: a multi-column, scrollable list backed by a collection
+ * model. Columns are declared through the columns prop, each a {@link ColumnDef}.
  */
-export const ColumnView = <T = unknown, S = unknown>(props: ColumnViewComponentProps<T, S>): ReactNode => {
+export const ColumnView = <T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode => {
+    const normalized = props as NormalizedColumnViewProps<T, S>;
+    const wiring = useColumnViewWiring<T, S>(normalized);
     const {
         ref,
         items,
-        model,
-        selected,
+        sections,
+        columns,
+        selectedIds,
         selectionMode,
         onSelectionChanged,
+        expandedIds,
+        onExpandedChange,
         sortColumn,
         sortOrder,
         onSortChanged,
         renderHeader,
-        estimatedRowHeight,
-        children,
+        estimatedItemHeight,
         ...intrinsicProps
-    } = props as NormalizedColumnViewProps<T, S>;
-
-    const registry = useColumnRegistry();
-    const wiring = useColumnViewWiring<T, S>(
-        {
-            ref,
-            items,
-            model,
-            selected,
-            selectionMode,
-            onSelectionChanged,
-            sortColumn,
-            sortOrder,
-            onSortChanged,
-            renderHeader,
-            estimatedRowHeight,
-        } as NormalizedColumnViewProps<T, S>,
-        registry,
-    );
-
-    const intrinsic = createElement(
-        GtkColumnView,
-        { ...intrinsicProps, ref: wiring.setRef },
-        <ColumnViewContext.Provider value={wiring.contextValue}>{children}</ColumnViewContext.Provider>,
-    );
+    } = normalized;
 
     return (
         <>
-            {intrinsic}
-            {wiring.useHeader ? (
-                <ListPortalHost
-                    store={wiring.headerStore}
-                    resolver={wiring.headerResolver}
-                    render={headerRenderer<T, S>(renderHeader)}
-                />
-            ) : null}
+            <GtkColumnView {...intrinsicProps} ref={wiring.setRef}>
+                {columns.map((column) => (
+                    <ColumnViewColumn
+                        key={column.id}
+                        {...column}
+                        resolver={wiring.resolver}
+                        tree={wiring.tree}
+                        estimatedItemHeight={estimatedItemHeight}
+                        onInstance={wiring.setInstance}
+                    />
+                ))}
+            </GtkColumnView>
+            <HeaderRenderHost
+                useHeader={wiring.useHeader}
+                store={wiring.headerStore}
+                resolver={wiring.headerResolver}
+                renderHeader={renderHeader}
+            />
         </>
     );
 };

package/src/constraint-layout-apply.ts

@@ -1,6 +1,58 @@
 import * as GObject from "@gtkx/gi/gobject";
 import * as Gtk from "@gtkx/gi/gtk";
-import type { ConstraintGuideProps, ConstraintProps, ConstraintVflProps } from "./types.js";
+
+/**
+ * Describes one constraint added by `<ConstraintLayout.Constraint>`, relating a
+ * target widget attribute to a source attribute of another widget or guide.
+ */
+export type ConstraintProps = {
+    /** Name of the target widget or guide. Use "super" or omit to reference the layout's own widget. */
+    target?: string;
+    targetAttribute: Gtk.ConstraintAttribute;
+    /** Relation between the target and source attributes (defaults to equality). */
+    relation?: Gtk.ConstraintRelation;
+    /** Name of the source widget or guide. Use "super" or omit for a constant constraint. */
+    source?: string;
+    sourceAttribute?: Gtk.ConstraintAttribute;
+    /** Factor applied to the source attribute (defaults to 1). */
+    multiplier?: number;
+    /** Constant offset added to the relation (defaults to 0). */
+    constant?: number;
+    /** Constraint strength, higher values winning conflicts (defaults to required). */
+    strength?: number;
+};
+
+/**
+ * Describes an invisible spacing guide added by `<ConstraintLayout.Guide>`,
+ * usable as a constraint target under its id.
+ */
+export type ConstraintGuideProps = {
+    /** Identifier used to reference this guide from constraints. */
+    id: string;
+    minWidth?: number;
+    minHeight?: number;
+    /** Preferred (natural) width. */
+    natWidth?: number;
+    /** Preferred (natural) height. */
+    natHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /** Strength of the guide's own size constraints. */
+    strength?: Gtk.ConstraintStrength;
+};
+
+/**
+ * Describes constraints authored with the Visual Format Language (VFL), applied by
+ * `<ConstraintLayout.Vfl>`.
+ */
+export type ConstraintVflProps = {
+    /** VFL lines describing the constraints between named widgets and guides. */
+    lines: string[];
+    /** Default horizontal spacing used by the layout operator (defaults to 0). */
+    hspacing?: number;
+    /** Default vertical spacing used by the layout operator (defaults to 0). */
+    vspacing?: number;
+};
 
 const SUPER_ID = "super";
 

package/src/constraint-layout.tsx

@@ -1,21 +1,25 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import { GtkConstraintLayout } from "@gtkx/jsx/gtk";
-import { useForwardedRef } from "@gtkx/react";
+import { useMergeRefs } from "@gtkx/react/internal";
 import {
     type Context,
     createContext,
-    createElement,
     type ReactNode,
     type Ref,
     type RefObject,
-    useCallback,
     useContext,
     useEffect,
     useLayoutEffect,
     useRef,
 } from "react";
-import { applyConstraint, applyGuide, applyVfl } from "./constraint-layout-apply.js";
-import type { ConstraintGuideProps, ConstraintProps, ConstraintVflProps } from "./types.js";
+import {
+    applyConstraint,
+    applyGuide,
+    applyVfl,
+    type ConstraintGuideProps,
+    type ConstraintProps,
+    type ConstraintVflProps,
+} from "./constraint-layout-apply.js";
 
 const ORPHAN_MESSAGE = "<ConstraintLayout.Constraint> / <Guide> / <Vfl> must be a child of <ConstraintLayout>";
 
@@ -28,6 +32,7 @@ const useConstraintLayoutRef = (): RefObject<Gtk.ConstraintLayout | null> => {
     return ref;
 };
 
+/** Props for {@link ConstraintLayout}. */
 export type ConstraintLayoutProps = {
     children?: ReactNode;
     ref?: Ref<Gtk.ConstraintLayout | null>;
@@ -68,6 +73,12 @@ const useDeferredContribution = (apply: (layout: Gtk.ConstraintLayout) => () =>
     }, deps);
 };
 
+/**
+ * Installs a Gtk.ConstraintLayout on a host widget and exposes child components to
+ * populate it: {@link ConstraintProps | ConstraintLayout.Constraint} for individual constraints,
+ * {@link ConstraintGuideProps | ConstraintLayout.Guide} for spacing guides, and {@link ConstraintVflProps | ConstraintLayout.Vfl}
+ * for constraints authored in the Visual Format Language.
+ */
 export const ConstraintLayout: ((props: ConstraintLayoutProps) => ReactNode) & {
     Guide: (props: ConstraintGuideProps) => ReactNode;
     Constraint: (props: ConstraintProps) => ReactNode;
@@ -75,16 +86,10 @@ export const ConstraintLayout: ((props: ConstraintLayoutProps) => ReactNode) & {
 } = Object.assign(
     ({ children, ref }: ConstraintLayoutProps): ReactNode => {
         const layoutRef = useRef<Gtk.ConstraintLayout | null>(null);
-        const captureLayout = useCallback(
-            (layout: Gtk.ConstraintLayout | null): void => {
-                layoutRef.current = layout;
-            },
-            [layoutRef],
-        );
-        const [, mergedRef] = useForwardedRef<Gtk.ConstraintLayout>(ref, captureLayout);
+        const mergedRef = useMergeRefs<Gtk.ConstraintLayout>(ref, layoutRef);
         return (
             <>
-                {createElement(GtkConstraintLayout, { ref: mergedRef })}
+                <GtkConstraintLayout ref={mergedRef} />
                 <ConstraintLayoutContext.Provider value={layoutRef}>{children}</ConstraintLayoutContext.Provider>
             </>
         );