@gtkx/components 1.0.0-rc.3 → 1.0.0-rc.4

package/src/types.ts

@@ -6,22 +6,19 @@ import type {
     GtkGridViewProps,
     GtkListViewProps,
 } from "@gtkx/jsx/gtk";
-import type { ComponentPropsWithRef, ElementType, ReactNode, Ref } from "react";
-
-/** Props of a container's Child component: the widget to render and its own props. */
-type ChildProps<C extends ElementType> = {
-    component: C;
-} & ComponentPropsWithRef<C>;
+import type { ReactNode } from "react";
 
 /**
  * A single item in a collection model, identified by a stable id and holding an
  * arbitrary value. Nested items form a tree.
  */
-type Item<T = unknown> = {
+type ListItem<T = unknown> = {
     /** Stable identifier used to track the item across updates and selection. */
     id: string;
+    /** Payload handed to the cell renderer as `ListItemRenderArgs.item`. */
     value: T;
-    children?: Item<T>[] | undefined;
+    /** Child items nested under this one, which turn a plain item list into a tree. */
+    children?: ListItem<T>[] | undefined;
     /** Hides the tree expander arrow even when the item has children. */
     hideExpander?: boolean | undefined;
     /** Adds indentation matching the item's depth in the tree. */
@@ -31,17 +28,20 @@ type Item<T = unknown> = {
 };
 
 /** A group of items rendered under a shared section header. */
-type Section<S = unknown, T = unknown> = {
+type ListSection<S = unknown, T = unknown> = {
     /** Stable identifier used to track the section across updates. */
     id: string;
+    /** Payload handed to the section header renderer as `ListSectionRenderArgs.section`. */
     value: S;
     /** Items belonging to this section. */
-    data: Item<T>[];
+    data: ListItem<T>[];
 };
 
-/** Arguments passed to an {@link ItemRenderer} when rendering one cell. */
-type RenderItemArgs<T> = {
+/** Arguments passed to a {@link ListItemRenderer} when rendering one cell. */
+type ListItemRenderArgs<T> = {
+    /** Value of the `ListItem` being rendered. */
     item: T;
+    /** Position of the item in the flattened item list, which excludes section headers and collapsed tree rows. */
     index: number;
     /** Depth of the item within a tree, starting at zero for top-level items. */
     depth?: number | undefined;
@@ -49,57 +49,79 @@ type RenderItemArgs<T> = {
     isExpanded?: boolean | undefined;
 };
 
-/** Arguments passed to a {@link HeaderRenderer} when rendering one section header. */
-type RenderHeaderArgs<S> = {
+/** Arguments passed to a {@link ListSectionRenderer} when rendering one section header. */
+type ListSectionRenderArgs<S> = {
+    /** Value of the `ListSection` whose header is being rendered. */
     section: S;
 };
 
 /** Renders the contents of one cell of a collection view. */
-type ItemRenderer<T> = (args: RenderItemArgs<T>) => ReactNode;
+type ListItemRenderer<T> = (args: ListItemRenderArgs<T>) => ReactNode;
 /** Renders the contents of one section header of a collection view. */
-type HeaderRenderer<S> = (args: RenderHeaderArgs<S>) => ReactNode;
+type ListSectionRenderer<S> = (args: ListSectionRenderArgs<S>) => ReactNode;
 
+/** Size a collection view requests for each cell before its contents render, keeping scroll estimates steady. */
 type ItemSizeProps = {
+    /** Height in pixels every cell asks for until its contents render; unset lets each cell size itself. */
     estimatedItemHeight?: number | undefined;
+    /** Width in pixels every cell asks for until its contents render; unset lets each cell size itself. */
     estimatedItemWidth?: number | undefined;
 };
 
+/** Controlled selection shared by the multi-item collection views. */
 type SelectionProps = {
+    /** Ids of the items to keep selected; omitting it leaves the view's own selection alone. */
     selectedIds?: string[] | null | undefined;
+    /** Called with the ids of every selected item whenever the selection changes, and once on mount. */
     onSelectionChanged?: ((ids: string[]) => void) | null | undefined;
+    /** How much the user may select, one item at a time unless `MULTIPLE` or `NONE` is given. */
     selectionMode?: Gtk.SelectionMode | null | undefined;
 };
 
+/** Controlled expansion for the views that turn nested `ListItem.children` into a tree. */
 type ExpansionProps = {
+    /** Ids of the items to keep expanded; omitting it leaves the rows' own expanded state alone. */
     expandedIds?: string[] | null | undefined;
+    /** Called with the ids of every expanded row whenever expansion changes. */
     onExpandedChange?: ((ids: string[]) => void) | null | undefined;
 };
 
+/** The data a collection view renders, either as a plain item list or grouped into sections. */
 type SourceProps<T, S> = {
-    items?: Item<T>[] | undefined;
-    sections?: Section<S, T>[] | undefined;
+    /** Items to render, nesting through `ListItem.children` for a tree; ignored once `sections` is given. */
+    items?: ListItem<T>[] | undefined;
+    /** Items grouped under section headers, rendered in place of `items`. */
+    sections?: ListSection<S, T>[] | undefined;
 };
 
 /** One column of a {@link ColumnView}, pairing Gtk.ColumnViewColumn props with a cell renderer. */
-type Column<T = unknown> = Omit<GtkColumnViewColumnProps, "factory" | "sorter" | "id" | "title"> & {
+type ColumnViewColumn<T = unknown> = Omit<GtkColumnViewColumnProps, "factory" | "sorter" | "id" | "title"> & {
     /** Stable identifier, also used to address the column through sorting props. */
     id: string;
+    /** Text shown in the column header. */
     title: string;
-    renderCell: ItemRenderer<T>;
-    /** Whether clicking the column header sorts by it. */
-    sortable?: boolean | undefined;
+    /** Renders the contents of this column's cell for one item. */
+    renderCell: ListItemRenderer<T>;
+    /** Makes the column header clickable, reporting the choice through `onSortChanged`. */
+    isSortable?: boolean | undefined;
+    /** Menu element popped up as the column header's context menu, on a right-click. */
     headerMenu?: ReactNode;
 };
 
+/** The declarative collection props {@link ColumnView} adds on top of Gtk.ColumnView's own. */
 type ColumnViewOwnProps<T, S> = SelectionProps &
     ExpansionProps &
     SourceProps<T, S> &
     Omit<ItemSizeProps, "estimatedItemWidth"> & {
-        columns: Column<T>[];
-        renderHeader?: HeaderRenderer<S> | null | undefined;
+        /** Columns to render, in order; each carries its own cell renderer. */
+        columns: ColumnViewColumn<T>[];
+        /** Renders the header shown above each section. */
+        renderHeader?: ListSectionRenderer<S> | null | undefined;
         /** Id of the column the view is sorted by, making sorting controlled. */
         sortColumn?: string | null | undefined;
+        /** Direction `sortColumn` is sorted in, defaulting to ascending. */
         sortOrder?: Gtk.SortType | null | undefined;
+        /** Called when the user sorts from a header, with the primary column's id, or null, and its order. */
         onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;
     };
 
@@ -115,17 +137,21 @@ type ColumnViewProps<T = unknown, S = unknown> = Omit<
 > &
 ColumnViewOwnProps<T, S>;
 
+/** The declarative collection props {@link DropDown} and `ComboRow` add on top of their widget's own. */
 type DropDownOwnProps<T, S> = SourceProps<T, S> & {
     /** Id of the currently selected item, making the selection controlled. */
     selectedId?: string | null | undefined;
+    /** Called with the id of the item that became selected. */
     onSelectionChanged?: ((id: string) => void) | null | undefined;
-    renderItem?: ItemRenderer<T> | null | undefined;
+    /** Renders the collapsed display, and the popup rows too unless `renderListItem` is given. */
+    renderItem?: ListItemRenderer<T> | null | undefined;
     /** Renderer for items in the open popup list, falling back to renderItem when omitted. */
-    renderListItem?: ItemRenderer<T> | null | undefined;
+    renderListItem?: ListItemRenderer<T> | null | undefined;
     /** Renderer for section headers in the popup list. */
-    renderHeader?: HeaderRenderer<S> | null | undefined;
+    renderHeader?: ListSectionRenderer<S> | null | undefined;
 };
 
+/** A drop-down-shaped widget's props with its model and factories swapped for the declarative collection props. */
 type DropDownWidgetProps<Widget, T, S> = Omit<
     Widget,
     "model" | "factory" | "listFactory" | "headerFactory" | keyof DropDownOwnProps<T, S>
@@ -139,10 +165,13 @@ DropDownOwnProps<T, S>;
  */
 type DropDownProps<T = unknown, S = unknown> = DropDownWidgetProps<GtkDropDownProps, T, S>;
 
+/** The declarative collection props {@link GridView} adds on top of Gtk.GridView's own. */
 type GridViewOwnProps<T> = ItemSizeProps &
     SelectionProps & {
-        items?: Item<T>[] | undefined;
-        renderItem: ItemRenderer<T>;
+        /** Items to render as cells; a grid is always flat, so `ListItem.children` is ignored. */
+        items?: ListItem<T>[] | undefined;
+        /** Renders the contents of one cell. */
+        renderItem: ListItemRenderer<T>;
     };
 
 /**
@@ -153,12 +182,15 @@ type GridViewOwnProps<T> = ItemSizeProps &
 type GridViewProps<T = unknown> = Omit<GtkGridViewProps, "model" | "factory" | keyof GridViewOwnProps<T>> &
     GridViewOwnProps<T>;
 
+/** The declarative collection props {@link ListView} adds on top of Gtk.ListView's own. */
 type ListViewOwnProps<T, S> = ItemSizeProps &
     SelectionProps &
     ExpansionProps &
     SourceProps<T, S> & {
-        renderItem: ItemRenderer<T>;
-        renderHeader?: HeaderRenderer<S> | null | undefined;
+        /** Renders the contents of one row. */
+        renderItem: ListItemRenderer<T>;
+        /** Renders the header shown above each section. */
+        renderHeader?: ListSectionRenderer<S> | null | undefined;
     };
 
 /**
@@ -173,34 +205,20 @@ type ListViewProps<T = unknown, S = unknown> = Omit<
 > &
 ListViewOwnProps<T, S>;
 
-/** Props for {@link SizeGroup}. */
-type SizeGroupProps = {
-    /** How the group equalizes sizes: horizontal, vertical, or both. */
-    mode?: Gtk.SizeGroupMode | null | undefined;
-    ref?: Ref<Gtk.SizeGroup | null>;
-    children?: ReactNode;
-};
-
-/** Adds a single widget, rendered by the given component, to the enclosing {@link SizeGroup}. */
-type SizeGroupChildProps<C extends ElementType> = ChildProps<C>;
-
 export {
     type SelectionProps,
     type ExpansionProps,
-    type ChildProps,
     type DropDownOwnProps,
     type DropDownWidgetProps,
-    type Item,
-    type Section,
-    type RenderItemArgs,
-    type RenderHeaderArgs,
-    type ItemRenderer,
-    type HeaderRenderer,
-    type Column,
+    type ListItem,
+    type ListSection,
+    type ListItemRenderArgs,
+    type ListSectionRenderArgs,
+    type ListItemRenderer,
+    type ListSectionRenderer,
+    type ColumnViewColumn,
     type ColumnViewProps,
     type DropDownProps,
     type GridViewProps,
     type ListViewProps,
-    type SizeGroupProps,
-    type SizeGroupChildProps,
 };

package/dist/size-group.d.ts

@@ -1,12 +0,0 @@
-import type { ElementType, ReactNode } from "react";
-import type { SizeGroupChildProps, SizeGroupProps } from "./types.js";
-type SizeGroupComponent = ((props: SizeGroupProps) => ReactNode) & {
-    Child: <C extends ElementType>(props: SizeGroupChildProps<C>) => ReactNode;
-};
-/**
- * Creates a Gtk.SizeGroup that keeps widgets joined through `SizeGroup.Child`
- * at a common size in the given mode, without contributing a widget of its own.
- */
-declare const SizeGroup: SizeGroupComponent;
-export { SizeGroup };
-//# sourceMappingURL=size-group.d.ts.map

package/dist/size-group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"size-group.d.ts","sourceRoot":"","sources":["../src/size-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAItE,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAStE,KAAK,kBAAkB,GAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,SAAS,CAAC,GAAG;IAC/D,KAAK,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CAC9E,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,SAAS,EAAE,kBAA4E,CAAC;AAoD9F,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/size-group.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { GtkSizeGroup } from "@gtkx/jsx/gtk";
-import { useMergedRef } from "@gtkx/react/internal";
-import { createContext, useCallback, useContext, useState } from "react";
-const SizeGroupContext = createContext(null);
-const SizeGroupChild = SizeGroupChildImpl;
-/**
- * Creates a Gtk.SizeGroup that keeps widgets joined through `SizeGroup.Child`
- * at a common size in the given mode, without contributing a widget of its own.
- */
-const SizeGroup = Object.assign(SizeGroupRoot, { Child: SizeGroupChild });
-const useRegister = () => {
-    const register = useContext(SizeGroupContext);
-    if (register === null) {
-        throw new Error("<SizeGroup.Child> must be a child of <SizeGroup>");
-    }
-    return register;
-};
-function SizeGroupChildImpl(props) {
-    const { component: Component, ref, ...rest } = props;
-    const refCallback = useMergedRef(ref, useRegister());
-    return _jsx(Component, { ...rest, ref: refCallback });
-}
-const addWidget = (widgets, widget) => widgets.includes(widget) ? widgets : [...widgets, widget];
-const removeWidget = (widgets, widget) => widgets.filter((entry) => entry !== widget);
-function SizeGroupRoot(props) {
-    const { mode, ref, children } = props;
-    const [widgets, setWidgets] = useState([]);
-    const register = useCallback((widget) => {
-        if (widget === null) {
-            return;
-        }
-        setWidgets((previous) => addWidget(previous, widget));
-        return () => {
-            setWidgets((previous) => removeWidget(previous, widget));
-        };
-    }, [setWidgets]);
-    return (_jsxs(_Fragment, { children: [_jsx(GtkSizeGroup, { ref: ref, mode: mode, widgets: widgets }), _jsx(SizeGroupContext.Provider, { value: register, children: children })] }));
-}
-export { SizeGroup };
-//# sourceMappingURL=size-group.js.map

package/dist/size-group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"size-group.js","sourceRoot":"","sources":["../src/size-group.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAczE,MAAM,gBAAgB,GAAG,aAAa,CAAkB,IAAI,CAAC,CAAC;AAC9D,MAAM,cAAc,GAAG,kBAAyF,CAAC;AACjH;;;GAGG;AACH,MAAM,SAAS,GAAuB,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,CAAC;AAE9F,MAAM,WAAW,GAAG,GAAa,EAAE;IAC/B,MAAM,QAAQ,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE9C,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QACpB,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;IACxE,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,SAAS,kBAAkB,CAAC,KAAiC;IACzD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,WAAW,GAAG,YAAY,CAAoB,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;IAExE,OAAO,KAAC,SAAS,OAAK,IAAI,EAAE,GAAG,EAAE,WAAW,GAAI,CAAC;AACrD,CAAC;AAED,MAAM,SAAS,GAAG,CAAC,OAAqB,EAAE,MAAkB,EAAgB,EAAE,CAC1E,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,YAAY,GAAG,CAAC,OAAqB,EAAE,MAAkB,EAAgB,EAAE,CAC7E,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC;AAEhD,SAAS,aAAa,CAAC,KAAqB;IACxC,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAEzD,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,MAAM,EAAE,EAAE;QACP,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YAClB,OAAO;QACX,CAAC;QAED,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACR,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC;IACN,CAAC,EACD,CAAC,UAAU,CAAC,CACf,CAAC;IAEF,OAAO,CACH,8BACI,KAAC,YAAY,IAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,EACxD,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAAG,QAAQ,GAA6B,IACnF,CACN,CAAC;AACN,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC","sourcesContent":["import type * as Gtk from \"@gtkx/gi/gtk\";\nimport type { ElementType, ReactNode, Ref, RefCallback } from \"react\";\nimport { GtkSizeGroup } from \"@gtkx/jsx/gtk\";\nimport { useMergedRef } from \"@gtkx/react/internal\";\nimport { createContext, useCallback, useContext, useState } from \"react\";\nimport type { SizeGroupChildProps, SizeGroupProps } from \"./types.js\";\n\ntype Register = RefCallback<Gtk.Widget | null>;\n\ntype SizeGroupChildRuntimeProps = {\n    component: ElementType;\n    ref?: Ref<Gtk.Widget | null> | undefined;\n} & Record<string, unknown>;\n\ntype SizeGroupComponent = ((props: SizeGroupProps) => ReactNode) & {\n    Child: <C extends ElementType>(props: SizeGroupChildProps<C>) => ReactNode;\n};\n\nconst SizeGroupContext = createContext<Register | null>(null);\nconst SizeGroupChild = SizeGroupChildImpl as <C extends ElementType>(props: SizeGroupChildProps<C>) => ReactNode;\n/**\n * Creates a Gtk.SizeGroup that keeps widgets joined through `SizeGroup.Child`\n * at a common size in the given mode, without contributing a widget of its own.\n */\nconst SizeGroup: SizeGroupComponent = Object.assign(SizeGroupRoot, { Child: SizeGroupChild });\n\nconst useRegister = (): Register => {\n    const register = useContext(SizeGroupContext);\n\n    if (register === null) {\n        throw new Error(\"<SizeGroup.Child> must be a child of <SizeGroup>\");\n    }\n\n    return register;\n};\n\nfunction SizeGroupChildImpl(props: SizeGroupChildRuntimeProps): ReactNode {\n    const { component: Component, ref, ...rest } = props;\n    const refCallback = useMergedRef<Gtk.Widget | null>(ref, useRegister());\n\n    return <Component {...rest} ref={refCallback} />;\n}\n\nconst addWidget = (widgets: Gtk.Widget[], widget: Gtk.Widget): Gtk.Widget[] =>\n    widgets.includes(widget) ? widgets : [...widgets, widget];\n\nconst removeWidget = (widgets: Gtk.Widget[], widget: Gtk.Widget): Gtk.Widget[] =>\n    widgets.filter((entry) => entry !== widget);\n\nfunction SizeGroupRoot(props: SizeGroupProps): ReactNode {\n    const { mode, ref, children } = props;\n    const [widgets, setWidgets] = useState<Gtk.Widget[]>([]);\n\n    const register = useCallback<Register>(\n        (widget) => {\n            if (widget === null) {\n                return;\n            }\n\n            setWidgets((previous) => addWidget(previous, widget));\n\n            return () => {\n                setWidgets((previous) => removeWidget(previous, widget));\n            };\n        },\n        [setWidgets],\n    );\n\n    return (\n        <>\n            <GtkSizeGroup ref={ref} mode={mode} widgets={widgets} />\n            <SizeGroupContext.Provider value={register}>{children}</SizeGroupContext.Provider>\n        </>\n    );\n}\n\nexport { SizeGroup };\n"]}

package/src/size-group.tsx

@@ -1,77 +0,0 @@
-import type * as Gtk from "@gtkx/gi/gtk";
-import type { ElementType, ReactNode, Ref, RefCallback } from "react";
-import { GtkSizeGroup } from "@gtkx/jsx/gtk";
-import { useMergedRef } from "@gtkx/react/internal";
-import { createContext, useCallback, useContext, useState } from "react";
-import type { SizeGroupChildProps, SizeGroupProps } from "./types.js";
-
-type Register = RefCallback<Gtk.Widget | null>;
-
-type SizeGroupChildRuntimeProps = {
-    component: ElementType;
-    ref?: Ref<Gtk.Widget | null> | undefined;
-} & Record<string, unknown>;
-
-type SizeGroupComponent = ((props: SizeGroupProps) => ReactNode) & {
-    Child: <C extends ElementType>(props: SizeGroupChildProps<C>) => ReactNode;
-};
-
-const SizeGroupContext = createContext<Register | null>(null);
-const SizeGroupChild = SizeGroupChildImpl as <C extends ElementType>(props: SizeGroupChildProps<C>) => ReactNode;
-/**
- * Creates a Gtk.SizeGroup that keeps widgets joined through `SizeGroup.Child`
- * at a common size in the given mode, without contributing a widget of its own.
- */
-const SizeGroup: SizeGroupComponent = Object.assign(SizeGroupRoot, { Child: SizeGroupChild });
-
-const useRegister = (): Register => {
-    const register = useContext(SizeGroupContext);
-
-    if (register === null) {
-        throw new Error("<SizeGroup.Child> must be a child of <SizeGroup>");
-    }
-
-    return register;
-};
-
-function SizeGroupChildImpl(props: SizeGroupChildRuntimeProps): ReactNode {
-    const { component: Component, ref, ...rest } = props;
-    const refCallback = useMergedRef<Gtk.Widget | null>(ref, useRegister());
-
-    return <Component {...rest} ref={refCallback} />;
-}
-
-const addWidget = (widgets: Gtk.Widget[], widget: Gtk.Widget): Gtk.Widget[] =>
-    widgets.includes(widget) ? widgets : [...widgets, widget];
-
-const removeWidget = (widgets: Gtk.Widget[], widget: Gtk.Widget): Gtk.Widget[] =>
-    widgets.filter((entry) => entry !== widget);
-
-function SizeGroupRoot(props: SizeGroupProps): ReactNode {
-    const { mode, ref, children } = props;
-    const [widgets, setWidgets] = useState<Gtk.Widget[]>([]);
-
-    const register = useCallback<Register>(
-        (widget) => {
-            if (widget === null) {
-                return;
-            }
-
-            setWidgets((previous) => addWidget(previous, widget));
-
-            return () => {
-                setWidgets((previous) => removeWidget(previous, widget));
-            };
-        },
-        [setWidgets],
-    );
-
-    return (
-        <>
-            <GtkSizeGroup ref={ref} mode={mode} widgets={widgets} />
-            <SizeGroupContext.Provider value={register}>{children}</SizeGroupContext.Provider>
-        </>
-    );
-}
-
-export { SizeGroup };