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

package/src/hooks/use-installed-model.ts

@@ -1,20 +0,0 @@
-import type * as Gtk from "@gtkx/gi/gtk";
-import { useObjectAttachment } from "@gtkx/react/internal";
-import { type RefObject, useRef } from "react";
-
-export const useInstalledModel = <W extends Gtk.Widget, M>(
-    object: RefObject<W | null>,
-    model: M,
-    install: (widget: W, model: M) => void,
-): void => {
-    const installRef = useRef(install);
-    installRef.current = install;
-    useObjectAttachment<W, { widget: W; model: M }>(object, {
-        attach: (widget) => {
-            installRef.current(widget, model);
-            return { widget, model };
-        },
-        detach: () => {},
-        isSame: (attachment, widget) => attachment.widget === widget && attachment.model === model,
-    });
-};

package/src/hooks/use-list-model.ts

@@ -1,161 +0,0 @@
-import type * as Gio from "@gtkx/gi/gio";
-import type * as GObject from "@gtkx/gi/gobject";
-import type * as Gtk from "@gtkx/gi/gtk";
-import { useLayoutEffect, useMemo, useRef } from "react";
-import type { ItemNode, SectionNode } from "../types.js";
-import {
-    createFlatModel,
-    createSectionModel,
-    createTreeModel,
-    resizeFlatModel,
-    retagRows,
-} from "../utils/item-models.js";
-import {
-    createItemResolver,
-    createSectionHeaderResolver,
-    createTreeResolver,
-    type ItemResolver,
-    type RowValue,
-} from "../utils/item-resolver.js";
-import { detectStructure, type ListStructure, structuralSignature } from "../utils/list-item-flatten.js";
-
-type ListModelInput<T, S> = {
-    items: ItemNode<T>[] | undefined;
-    sections?: SectionNode<S, T>[] | undefined;
-};
-
-type ListModelResult<T, S> = {
-    model: Gio.ListModel;
-    treeModel: Gtk.TreeListModel | null;
-    resolver: ItemResolver<T, S>;
-    headerResolver: ItemResolver<T, S>;
-    rowValues: WeakMap<GObject.Object, RowValue<T>>;
-};
-
-type ListModelStructure = "sections" | ListStructure;
-
-type ListModelState<T, S> = {
-    model: Gio.ListModel;
-    treeModel: Gtk.TreeListModel | null;
-    flatModel: Gtk.StringList | undefined;
-    items: ItemNode<T>[] | undefined;
-    sections: SectionNode<S, T>[] | undefined;
-    structure: ListModelStructure;
-    signature: string;
-    rowValues: WeakMap<GObject.Object, RowValue<T>>;
-    placeholdersById: Map<string, GObject.Object>;
-};
-
-const sectionRows = <T, S>(sections: SectionNode<S, T>[] | undefined): ItemNode<T>[] => {
-    if (sections === undefined) return [];
-    const rows: ItemNode<T>[] = [];
-    for (const section of sections) rows.push(...section.data);
-    return rows;
-};
-
-const sectionSignature = <T, S>(sections: SectionNode<S, T>[] | undefined): string => {
-    if (sections === undefined) return "";
-    const parts: string[] = [];
-    for (const section of sections) {
-        parts.push(`${section.id}{${structuralSignature(section.data)}}`);
-    }
-    return parts.join(",");
-};
-
-const signatureOf = <T, S>(
-    structure: ListModelStructure,
-    items: ItemNode<T>[] | undefined,
-    sections: SectionNode<S, T>[] | undefined,
-): string => {
-    if (structure === "sections") return `sections|${sectionSignature(sections)}`;
-    return structure === "flat" ? "" : `${structure}|${structuralSignature(items)}`;
-};
-
-type ListModelInternalInput<T, S> = {
-    items: ItemNode<T>[] | undefined;
-    sections: SectionNode<S, T>[] | undefined;
-    structure: ListModelStructure;
-    signature: string;
-};
-
-const buildState = <T, S>(input: ListModelInternalInput<T, S>): ListModelState<T, S> => {
-    const { items, sections, structure, signature } = input;
-    const rowValues = new WeakMap<GObject.Object, RowValue<T>>();
-    const placeholdersById = new Map<string, GObject.Object>();
-    let model: Gio.ListModel;
-    let treeModel: Gtk.TreeListModel | null = null;
-    let flatModel: Gtk.StringList | undefined;
-    if (structure === "sections") {
-        model = createSectionModel(sections ?? []);
-    } else if (structure === "tree") {
-        treeModel = createTreeModel(items ?? [], rowValues, placeholdersById);
-        model = treeModel;
-    } else {
-        flatModel = createFlatModel(items?.length ?? 0);
-        model = flatModel;
-    }
-    return { model, treeModel, flatModel, items, sections, structure, signature, rowValues, placeholdersById };
-};
-
-const resolveState = <T, S>(
-    prev: ListModelState<T, S> | null,
-    items: ItemNode<T>[] | undefined,
-    sections: SectionNode<S, T>[] | undefined,
-): ListModelState<T, S> => {
-    if (prev !== null && prev.items === items && prev.sections === sections) {
-        return prev;
-    }
-    const structure: ListModelStructure = sections !== undefined ? "sections" : detectStructure(items);
-    const signature = signatureOf(structure, items, sections);
-    const input: ListModelInternalInput<T, S> = { items, sections, structure, signature };
-    if (prev === null || prev.structure !== structure) {
-        return buildState(input);
-    }
-    if (structure !== "flat" && prev.signature !== signature) {
-        return buildState(input);
-    }
-    if (structure === "tree") {
-        retagRows(items ?? [], prev.rowValues, prev.placeholdersById);
-    }
-    prev.items = items;
-    prev.sections = sections;
-    prev.signature = signature;
-    return prev;
-};
-
-export const useListModel = <T, S>(input: ListModelInput<T, S>): ListModelResult<T, S> => {
-    const { items, sections } = input;
-    const stateRef = useRef<ListModelState<T, S> | null>(null);
-    const state = resolveState(stateRef.current, items, sections);
-    stateRef.current = state;
-    const { structure, flatModel } = state;
-
-    useLayoutEffect(() => {
-        if (flatModel !== undefined) {
-            resizeFlatModel(flatModel, items?.length ?? 0);
-        }
-    }, [flatModel, items]);
-
-    const resolver = useMemo(() => {
-        if (structure === "sections") {
-            return createItemResolver<T, S>(sectionRows(sections), true, state.rowValues);
-        }
-        if (structure === "tree" && state.treeModel !== null) {
-            return createTreeResolver<T, S>(items, state.rowValues, state.treeModel);
-        }
-        return createItemResolver<T, S>(items, false, state.rowValues);
-    }, [items, sections, structure, state.rowValues, state.treeModel]);
-
-    const headerResolver = useMemo(
-        () => createSectionHeaderResolver<T, S>(structure === "sections" ? sections : undefined),
-        [sections, structure],
-    );
-
-    return {
-        model: state.model,
-        treeModel: state.treeModel,
-        resolver,
-        headerResolver,
-        rowValues: state.rowValues,
-    };
-};

package/src/hooks/use-placed-child.ts

@@ -1,79 +0,0 @@
-import type * as GObject from "@gtkx/gi/gobject";
-import { createPortal, rootElement } from "@gtkx/react";
-import { useMergeRefs } from "@gtkx/react/internal";
-import {
-    type Context,
-    createContext,
-    type ReactNode,
-    type Ref,
-    type RefCallback,
-    type RefObject,
-    useCallback,
-    useContext,
-    useLayoutEffect,
-    useRef,
-} from "react";
-
-export type ParentContext<T> = {
-    Context: Context<RefObject<T | null> | null>;
-    useParentRef: () => RefObject<T | null>;
-};
-
-export const createParentContext = <T>(orphanMessage: string): ParentContext<T> => {
-    const context = createContext<RefObject<T | null> | null>(null);
-    return {
-        Context: context,
-        useParentRef: (): RefObject<T | null> => {
-            const ref = useContext(context);
-            if (!ref) throw new Error(orphanMessage);
-            return ref;
-        },
-    };
-};
-
-export type PlacedChildRender<T> = (ref: RefCallback<T>) => ReactNode;
-
-export type PlacedChildOptions<T extends GObject.Object, P> = {
-    render: PlacedChildRender<T>;
-    ref?: Ref<T | null> | undefined;
-    placement: P;
-    samePlacement: (a: P, b: P) => boolean;
-    place: (object: T, placement: P, previous: P | undefined) => void;
-    release: (object: T) => void;
-};
-
-export const usePlacedChild = <T extends GObject.Object, P>(options: PlacedChildOptions<T, P>): ReactNode => {
-    const { render, ref, placement, samePlacement, place, release } = options;
-    const objectRef = useRef<T | null>(null);
-    const appliedRef = useRef<{ object: T; placement: P } | null>(null);
-    const captureObject = useCallback<RefCallback<T>>((object) => {
-        objectRef.current = object;
-    }, []);
-    const setObjectRef = useMergeRefs<T>(ref, captureObject);
-
-    useLayoutEffect(() => {
-        const object = objectRef.current;
-        const applied = appliedRef.current;
-        if (applied !== null && applied.object !== object) {
-            release(applied.object);
-            appliedRef.current = null;
-        }
-        if (object === null) return;
-        const current = appliedRef.current;
-        if (current === null || !samePlacement(current.placement, placement)) {
-            place(object, placement, current?.placement);
-            appliedRef.current = { object, placement };
-        }
-    });
-
-    useLayoutEffect(
-        () => () => {
-            const applied = appliedRef.current;
-            if (applied !== null) release(applied.object);
-            appliedRef.current = null;
-        },
-        [],
-    );
-
-    return createPortal(render(setObjectRef), rootElement);
-};

package/src/hooks/use-selection-model.ts

@@ -1,114 +0,0 @@
-import type * as Gio from "@gtkx/gi/gio";
-import * as Gtk from "@gtkx/gi/gtk";
-import { useSignal } from "@gtkx/react";
-import { isSameArray } from "@gtkx/utils";
-import { useLayoutEffect, useRef } from "react";
-import type { ItemResolver } from "../utils/item-resolver.js";
-
-type SelectionModelOptions<T, S> = {
-    base: Gio.ListModel;
-    selectionMode: Gtk.SelectionMode | null | undefined;
-    selectedIds: string[] | null | undefined;
-    onSelectionChanged: ((ids: string[]) => void) | null | undefined;
-    resolver: ItemResolver<T, S>;
-};
-
-type WrappingSelectionModel = (Gtk.SingleSelection | Gtk.MultiSelection | Gtk.NoSelection) & Gtk.SelectionModel;
-
-const createSelectionModel = (mode: Gtk.SelectionMode, base: Gio.ListModel): WrappingSelectionModel => {
-    if (mode === Gtk.SelectionMode.MULTIPLE) return Gtk.MultiSelection.new(base);
-    if (mode === Gtk.SelectionMode.NONE) return Gtk.NoSelection.new(base);
-    return new Gtk.SingleSelection({ model: base, autoselect: false, canUnselect: true });
-};
-
-const bitsetOf = (positions: number[]): Gtk.Bitset => {
-    const bitset = Gtk.Bitset.newEmpty();
-    for (const position of positions) {
-        if (position >= 0) bitset.add(position);
-    }
-    return bitset;
-};
-
-const applySelectedPositions = (model: Gtk.SelectionModel, positions: number[]): void => {
-    if (model instanceof Gtk.MultiSelection) {
-        if (positions.length === 0) {
-            const current = model.getSelection();
-            if (!current.isEmpty()) model.unselectAll();
-            return;
-        }
-        const requested = bitsetOf(positions);
-        const changed = model.getSelection().copy();
-        changed.difference(requested);
-        if (changed.isEmpty()) return;
-        model.setSelection(requested, changed);
-        return;
-    }
-    if (positions.length === 0) {
-        model.unselectAll();
-        return;
-    }
-    const first = positions[0];
-    if (first !== undefined && first >= 0) model.selectItem(first, true);
-};
-
-const readSelectedIds = <T, S>(model: Gtk.SelectionModel, resolver: ItemResolver<T, S>): string[] => {
-    const selection = model.getSelection();
-    const ids: string[] = [];
-    const count = Number(selection.getSize());
-    for (let index = 0; index < count; index++) {
-        const position = selection.getNth(index);
-        const id = resolver.idOf(position);
-        if (id !== undefined) ids.push(id);
-    }
-    return ids;
-};
-
-const idsToPositions = <T, S>(ids: string[] | null | undefined, resolver: ItemResolver<T, S>): number[] => {
-    if (ids === undefined || ids === null) return [];
-    const positions: number[] = [];
-    for (const id of ids) {
-        const position = resolver.positionOfId(id);
-        if (position >= 0) positions.push(position);
-    }
-    return positions;
-};
-
-export const useSelectionModel = <T, S>(options: SelectionModelOptions<T, S>): Gtk.SelectionModel => {
-    const { base, selectionMode, selectedIds, onSelectionChanged, resolver } = options;
-    const mode = selectionMode ?? Gtk.SelectionMode.SINGLE;
-
-    const modelRef = useRef<WrappingSelectionModel | null>(null);
-    const modeRef = useRef<Gtk.SelectionMode | null>(null);
-    if (modelRef.current === null || modeRef.current !== mode) {
-        modelRef.current = createSelectionModel(mode, base);
-        modeRef.current = mode;
-    }
-    const model = modelRef.current;
-
-    const onChangedRef = useRef(onSelectionChanged);
-    onChangedRef.current = onSelectionChanged;
-    const resolverRef = useRef(resolver);
-    resolverRef.current = resolver;
-    const lastReportedRef = useRef<string[] | null>(null);
-
-    const report = (): void => {
-        const callback = onChangedRef.current;
-        if (!callback) return;
-        const ids = readSelectedIds(model, resolverRef.current);
-        if (lastReportedRef.current !== null && isSameArray(lastReportedRef.current, ids)) return;
-        lastReportedRef.current = ids;
-        callback(ids);
-    };
-
-    useSignal(model, "selection-changed", report);
-
-    useLayoutEffect(() => {
-        if (model.getModel() !== base) model.setModel(base);
-        if (selectedIds !== undefined && selectedIds !== null) {
-            applySelectedPositions(model, idsToPositions(selectedIds, resolver));
-        }
-        report();
-    }, [model, base, selectedIds, resolver]);
-
-    return model;
-};

package/src/hooks/use-sort-handler.ts

@@ -1,107 +0,0 @@
-import * as Gtk from "@gtkx/gi/gtk";
-import { type ObjectProp, resolveObjectProp } from "@gtkx/react/internal";
-import { useLayoutEffect, useRef } from "react";
-
-export type ColumnRegistration = {
-    id: string;
-    column: Gtk.ColumnViewColumn;
-    sortable: boolean;
-};
-
-type SortHandlerOptions = {
-    columnView: ObjectProp<Gtk.ColumnView>;
-    sortColumn: string | null | undefined;
-    sortOrder: Gtk.SortType | null | undefined;
-    onSortChanged: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;
-    columns: ColumnRegistration[];
-};
-
-const neutralSorter = (): Gtk.CustomSorter => Gtk.CustomSorter.new(() => 0);
-
-const ensureColumnSorters = (columns: ColumnRegistration[], activeId: string | null): void => {
-    for (const registration of columns) {
-        const wantsSorter = registration.sortable || registration.id === activeId;
-        const hasSorter = registration.column.getSorter() !== null;
-        if (wantsSorter && !hasSorter) {
-            registration.column.setSorter(neutralSorter());
-        } else if (!wantsSorter && hasSorter) {
-            registration.column.setSorter(null);
-        }
-    }
-};
-
-const columnForId = (columns: ColumnRegistration[], id: string | null): Gtk.ColumnViewColumn | null => {
-    if (id === null) return null;
-    for (const registration of columns) {
-        if (registration.id === id) return registration.column;
-    }
-    return null;
-};
-
-const idForColumn = (columns: ColumnRegistration[], column: Gtk.ColumnViewColumn | null): string | null => {
-    if (column === null) return null;
-    for (const registration of columns) {
-        if (registration.column === column) return registration.id;
-    }
-    return column.getId();
-};
-
-const primarySort = (sorter: Gtk.Sorter): { column: Gtk.ColumnViewColumn | null; order: Gtk.SortType } =>
-    sorter instanceof Gtk.ColumnViewSorter
-        ? { column: sorter.getPrimarySortColumn(), order: sorter.getPrimarySortOrder() }
-        : { column: null, order: Gtk.SortType.ASCENDING };
-
-type SorterSubscription = {
-    sorter: Gtk.Sorter | null;
-    handler: ((change: Gtk.SorterChange) => void) | null;
-};
-
-const disconnectSorter = (subscription: SorterSubscription): void => {
-    if (subscription.sorter !== null && subscription.handler !== null) {
-        subscription.sorter.off("changed", subscription.handler);
-    }
-    subscription.sorter = null;
-    subscription.handler = null;
-};
-
-export const useSortHandler = (options: SortHandlerOptions): void => {
-    const { columnView, sortColumn, sortOrder, onSortChanged, columns } = options;
-    const activeId = sortColumn ?? null;
-    const order = sortOrder ?? Gtk.SortType.ASCENDING;
-
-    const onChangedRef = useRef(onSortChanged);
-    onChangedRef.current = onSortChanged;
-    const columnsRef = useRef(columns);
-    columnsRef.current = columns;
-    const suppressRef = useRef(false);
-    const subscriptionRef = useRef<SorterSubscription>({ sorter: null, handler: null });
-
-    const resubscribe = (sorter: Gtk.Sorter | null): void => {
-        const subscription = subscriptionRef.current;
-        if (sorter === subscription.sorter) return;
-        disconnectSorter(subscription);
-        if (sorter === null) return;
-        const handler = (): void => {
-            if (suppressRef.current) return;
-            const callback = onChangedRef.current;
-            if (!callback) return;
-            const { column, order: primaryOrder } = primarySort(sorter);
-            callback(idForColumn(columnsRef.current, column), primaryOrder);
-        };
-        subscription.sorter = sorter;
-        subscription.handler = handler;
-        sorter.on("changed", handler);
-    };
-
-    useLayoutEffect(() => {
-        const view = resolveObjectProp(columnView);
-        if (view === null) return;
-        ensureColumnSorters(columns, activeId);
-        suppressRef.current = true;
-        view.sortByColumn(columnForId(columns, activeId), order);
-        suppressRef.current = false;
-        resubscribe(view.getSorter());
-    });
-
-    useLayoutEffect(() => () => disconnectSorter(subscriptionRef.current), []);
-};

package/src/menu-items.ts

@@ -1,48 +0,0 @@
-import * as Gio from "@gtkx/gi/gio";
-import type { MenuEntry } from "./types.js";
-
-const buildMenuModel = (entries: MenuEntry[]): Gio.Menu => {
-    const menu = new Gio.Menu();
-    appendEntries(menu, entries);
-    return menu;
-};
-
-const appendEntries = (menu: Gio.Menu, entries: MenuEntry[]): void => {
-    for (const entry of entries) {
-        if (entry.section !== undefined) {
-            menu.appendSection(entry.label ?? null, buildMenuModel(entry.section));
-            continue;
-        }
-        if (entry.submenu !== undefined) {
-            menu.appendSubmenu(entry.label ?? null, buildMenuModel(entry.submenu));
-            continue;
-        }
-        const item = new Gio.MenuItem();
-        if (entry.label !== undefined) item.setLabel(entry.label);
-        if (entry.action !== undefined) item.setDetailedAction(entry.action);
-        menu.appendItem(item);
-    }
-};
-
-export const applyMenuItems = (menu: Gio.Menu, entries: MenuEntry[] | null): void => {
-    menu.removeAll();
-    if (entries) appendEntries(menu, entries);
-};
-
-const entryEqual = (a: MenuEntry, b: MenuEntry): boolean =>
-    a.label === b.label &&
-    a.action === b.action &&
-    entryListEqual(a.submenu, b.submenu) &&
-    entryListEqual(a.section, b.section);
-
-const entryListEqual = (a: MenuEntry[] | undefined, b: MenuEntry[] | undefined): boolean => {
-    if (a === b) return true;
-    if (a === undefined || b === undefined) return false;
-    return a.length === b.length && a.every((entry, index) => entryEqual(entry, b[index] as MenuEntry));
-};
-
-export const menuItemsEqual = (a: MenuEntry[] | null, b: MenuEntry[] | null): boolean => {
-    if (a === b) return true;
-    if (a === null || b === null) return false;
-    return entryListEqual(a, b);
-};

package/src/menu.tsx

@@ -1,32 +0,0 @@
-import type * as Gio from "@gtkx/gi/gio";
-import { GMenu, type GMenuProps } from "@gtkx/jsx/gio";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { type ReactNode, type Ref, useLayoutEffect, useRef } from "react";
-import { applyMenuItems, menuItemsEqual } from "./menu-items.js";
-import type { MenuEntry } from "./types.js";
-
-export type MenuItemsProps = {
-    items?: MenuEntry[] | null | undefined;
-};
-
-/** Props for {@link Menu}, combining Gio.Menu props with a declarative items array. */
-export type MenuProps = Omit<GMenuProps, keyof MenuItemsProps> & MenuItemsProps & { ref?: Ref<Gio.Menu | null> };
-
-/** Builds a Gio.Menu model from a declarative array of {@link MenuEntry} items. */
-export const Menu = (props: MenuProps): ReactNode => {
-    const { items, ref, ...rest } = props;
-    const menuRef = useRef<Gio.Menu | null>(null);
-    const mergedRef = useMergeRefs(ref, menuRef);
-    const appliedRef = useRef<MenuEntry[] | null>(null);
-
-    useLayoutEffect(() => {
-        const menu = menuRef.current;
-        if (!menu) return;
-        const entries = items ?? null;
-        if (menuItemsEqual(appliedRef.current, entries)) return;
-        appliedRef.current = entries;
-        applyMenuItems(menu, entries);
-    });
-
-    return <GMenu {...rest} ref={mergedRef} />;
-};

package/src/overlay.tsx

@@ -1,88 +0,0 @@
-import type * as Gtk from "@gtkx/gi/gtk";
-import { GtkOverlay, type GtkOverlayProps } from "@gtkx/jsx/gtk";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { Children, type ElementType, isValidElement, type ReactNode, type Ref, useRef } from "react";
-import { createParentContext, usePlacedChild } from "./hooks/use-placed-child.js";
-import type { ChildProps } from "./types.js";
-
-const { Context: OverlayContext, useParentRef: useOverlayRef } = createParentContext<Gtk.Overlay>(
-    "<Overlay.Child> must be a child of <Overlay>",
-);
-
-/** Props for {@link Overlay}. */
-export type OverlayProps = GtkOverlayProps & { ref?: Ref<Gtk.Overlay | null> };
-
-export type OverlayPlacementProps = {
-    /** Whether this overlay contributes to the Overlay's measured size. */
-    measure?: boolean | null | undefined;
-    /** Whether the overlay is clipped to the main child's allocation. */
-    clipOverlay?: boolean | null | undefined;
-};
-
-/** Adds a single widget as an overlay on top of an {@link Overlay}'s main child. */
-export type OverlayChildProps<C extends ElementType> = ChildProps<C, OverlayPlacementProps>;
-
-type OverlayPlacement = { measure: boolean; clipOverlay: boolean };
-
-const placementOf = (props: OverlayPlacementProps): OverlayPlacement => ({
-    measure: props.measure ?? false,
-    clipOverlay: props.clipOverlay ?? false,
-});
-
-const samePlacement = (a: OverlayPlacement, b: OverlayPlacement): boolean =>
-    a.measure === b.measure && a.clipOverlay === b.clipOverlay;
-
-const OverlayChild = <C extends ElementType>({
-    component,
-    measure,
-    clipOverlay,
-    ref,
-    ...rest
-}: OverlayChildProps<C>): ReactNode => {
-    const overlayRef = useOverlayRef();
-    const Component: ElementType = component;
-    return usePlacedChild<Gtk.Widget, OverlayPlacement>({
-        render: (placeRef) => <Component {...rest} ref={placeRef} />,
-        ref,
-        placement: placementOf({ measure, clipOverlay }),
-        samePlacement,
-        place: (widget, placement) => {
-            const overlay = overlayRef.current;
-            if (!overlay) return;
-            if (widget.getParent() !== overlay) overlay.addOverlay(widget);
-            overlay.setMeasureOverlay(widget, placement.measure);
-            overlay.setClipOverlay(widget, placement.clipOverlay);
-        },
-        release: (widget) => {
-            const overlay = overlayRef.current;
-            if (overlay && widget.getParent() === overlay) overlay.removeOverlay(widget);
-        },
-    });
-};
-
-const isOverlayChild = (node: ReactNode): boolean => isValidElement(node) && node.type === OverlayChild;
-
-/**
- * Renders a Gtk.Overlay: a main child with one or more widgets stacked on top,
- * declared via {@link Overlay.Child}. Non-Child children form the main content.
- */
-export const Overlay: ((props: OverlayProps) => ReactNode) & {
-    Child: <C extends ElementType>(props: OverlayChildProps<C>) => ReactNode;
-} = Object.assign(
-    ({ children, ref, ...rest }: OverlayProps): ReactNode => {
-        const overlayRef = useRef<Gtk.Overlay | null>(null);
-        const mergedRef = useMergeRefs<Gtk.Overlay>(ref, overlayRef);
-        const items = Children.toArray(children);
-        const overlays = items.filter(isOverlayChild);
-        const base = items.filter((node) => !isOverlayChild(node));
-        return (
-            <>
-                <GtkOverlay {...rest} ref={mergedRef}>
-                    {base}
-                </GtkOverlay>
-                <OverlayContext.Provider value={overlayRef}>{overlays}</OverlayContext.Provider>
-            </>
-        );
-    },
-    { Child: OverlayChild },
-);