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

package/src/internal/drop-down.tsx

@@ -0,0 +1,186 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import type { ElementType, ReactNode, Ref } from "react";
+import { GtkLabel, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import { applyWrite } from "@gtkx/react/internal";
+import { omit } from "@gtkx/utils";
+import { useEffectEvent, useLayoutEffect, useRef } from "react";
+import type { DropDownOwnProps, ListItemRenderArgs, ListItemRenderer } from "../types.js";
+import type { Collection } from "./collection.js";
+import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./cells.js";
+import { useCollectionData } from "./use-collection.js";
+import { useWidgetRef } from "./use-widget-ref.js";
+
+type SelectableWidget = GObject.Object & { getSelected: () => number; selected: number };
+
+type DropDownBaseProps = DropDownOwnProps<unknown, unknown> & {
+    onNotifySelected?: ((value: number | null, self: SelectableWidget) => void) | null | undefined;
+    ref?: Ref<SelectableWidget | null> | undefined;
+} & Record<string, unknown>;
+
+type SelectionOptions = {
+    widget: SelectableWidget | null;
+    collection: Collection;
+    props: DropDownBaseProps;
+};
+
+type NotifySelectedHandler = NonNullable<DropDownBaseProps["onNotifySelected"]>;
+
+type KnownSelection = {
+    known: { current: string | null };
+    onSelectionChanged: ((id: string) => void) | null | undefined;
+};
+
+const DROP_DOWN_PROPS: string[] = [
+    "component",
+    "items",
+    "sections",
+    "selectedId",
+    "onSelectionChanged",
+    "onNotifySelected",
+    "renderItem",
+    "renderListItem",
+    "renderHeader",
+    "ref",
+];
+
+const describeValue = (value: unknown): string => {
+    if (typeof value === "string") {
+        return value;
+    }
+
+    try {
+        return JSON.stringify(value);
+    } catch {
+        return String(value);
+    }
+};
+
+const defaultItemContent = (value: unknown): ReactNode =>
+    value == null ? null : <GtkLabel>{describeValue(value)}</GtkLabel>;
+
+const defaultRenderItem = ({ item }: ListItemRenderArgs<unknown>): ReactNode => defaultItemContent(item);
+const faceRenderer = (props: DropDownBaseProps): ListItemRenderer<never> => props.renderItem ?? defaultRenderItem;
+
+const listRenderer = (props: DropDownBaseProps): ListItemRenderer<never> =>
+    props.renderListItem ?? props.renderItem ?? defaultRenderItem;
+
+const resolvePosition = (
+    widget: SelectableWidget,
+    collection: Collection,
+    selectedId: string | null | undefined,
+): number => {
+    const requested = selectedId == null ? -1 : collection.positionFor(selectedId);
+
+    return requested >= 0 ? requested : widget.getSelected();
+};
+
+const updateKnownSelection = (
+    tracker: KnownSelection,
+    effectiveId: string,
+    selectedId: string | null | undefined,
+): void => {
+    const { known, onSelectionChanged } = tracker;
+    const expectedId = selectedId ?? known.current;
+    const isNew = effectiveId !== known.current;
+    known.current = effectiveId;
+
+    if (expectedId !== null && effectiveId !== expectedId && isNew) {
+        onSelectionChanged?.(effectiveId);
+    }
+};
+
+const reportKnownSelection = (tracker: KnownSelection, id: string | null): void => {
+    const { known, onSelectionChanged } = tracker;
+
+    if (id === null || id === known.current) {
+        return;
+    }
+
+    known.current = id;
+    onSelectionChanged?.(id);
+};
+
+const reportSelectedNotify = (options: SelectionOptions, tracker: KnownSelection): void => {
+    const { widget, collection } = options;
+
+    if (widget === null) {
+        return;
+    }
+
+    reportKnownSelection(tracker, collection.idAt(widget.getSelected()));
+};
+
+const applySelectedPosition = (widget: SelectableWidget, position: number): void => {
+    applyWrite(() => {
+        widget.selected = position;
+    });
+};
+
+const useDropDownSelection = (options: SelectionOptions): NotifySelectedHandler => {
+    const { widget, collection } = options;
+    const { selectedId } = options.props;
+    const known = useRef<string | null>(null);
+
+    const syncKnownSelection = useEffectEvent((position: number): void => {
+        const effectiveId = collection.idAt(position);
+
+        if (effectiveId === null) {
+            known.current = null;
+
+            return;
+        }
+
+        const { onSelectionChanged } = options.props;
+        updateKnownSelection({ known, onSelectionChanged }, effectiveId, selectedId);
+    });
+
+    useLayoutEffect(() => {
+        if (widget === null) {
+            return;
+        }
+
+        const position = resolvePosition(widget, collection, selectedId);
+        applySelectedPosition(widget, position);
+        syncKnownSelection(position);
+    }, [widget, collection, selectedId]);
+
+    return (value, self) => {
+        reportSelectedNotify(options, { known, onSelectionChanged: options.props.onSelectionChanged });
+        options.props.onNotifySelected?.(value, self);
+    };
+};
+
+function DropDownBase(props: DropDownBaseProps & { component: ElementType }): ReactNode {
+    const { component: Component, items, sections, renderListItem, renderHeader, ref } = props;
+    const rest = omit(props, DROP_DOWN_PROPS);
+    const [widget, refCallback] = useWidgetRef<SelectableWidget>(ref);
+    const collection = useCollectionData({ items, sections });
+    const faceCells = useItemCells({ width: -1, height: -1 });
+    const listCells = useItemCells({ width: -1, height: -1 });
+    const headerCells = useHeaderCells({ width: -1, height: -1 });
+    const handleNotifySelected = useDropDownSelection({ widget, collection, props });
+    const hasHeader = typeof renderHeader === "function";
+
+    return (
+        <>
+            <Component
+                ref={refCallback}
+                model={collection.model}
+                factory={<GtkSignalListItemFactory {...faceCells.handlers} />}
+                {...(renderListItem != null && {
+                    listFactory: <GtkSignalListItemFactory {...listCells.handlers} />,
+                })}
+                {...(hasHeader && { headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} /> })}
+                {...rest}
+                onNotifySelected={handleNotifySelected}
+            />
+            <ItemPortals store={faceCells} render={faceRenderer(props)} collection={collection} />
+            {renderListItem != null && (
+                <ItemPortals store={listCells} render={listRenderer(props)} collection={collection} />
+            )}
+            {hasHeader && <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />}
+        </>
+    );
+}
+
+export { DropDownBase, type DropDownBaseProps };

package/src/internal/expansion.ts

@@ -1,6 +1,5 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import type { RefObject } from "react";
-import { useSignal } from "@gtkx/react";
 import { useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import type { Collection } from "./collection.js";
 import { eachRow } from "./collection.js";
@@ -102,7 +101,7 @@ function runControlledExpansion(
     report();
 }
 
-function useExpansion(options: ExpansionOptions): void {
+function useExpansion(options: ExpansionOptions): () => void {
     const { collection, expandedIds, onExpandedChange } = options;
     const [last] = useState<LastExpansion>(newLastExpansion);
     const expanding = useRef(false);
@@ -111,13 +110,13 @@ function useExpansion(options: ExpansionOptions): void {
         reportWhenIdle(collection, last, expanding, onExpandedChange);
     });
 
-    useSignal(collection.isTree ? collection.model : null, "items-changed", () => {
-        reportWhenIdle(collection, last, expanding, onExpandedChange);
-    });
-
     useLayoutEffect(() => {
         runControlledExpansion(collection, expandedIds, expanding, report);
     }, [collection, expandedIds]);
+
+    return () => {
+        reportWhenIdle(collection, last, expanding, onExpandedChange);
+    };
 }
 
 export { useExpansion, type ExpansionOptions };

package/src/internal/selection.tsx

@@ -10,6 +10,7 @@ type SelectionOptions = {
     selectedIds?: string[] | null | undefined;
     onSelectionChanged?: ((ids: string[]) => void) | null | undefined;
     selectionMode?: Gtk.SelectionMode | null | undefined;
+    onItemsChanged: () => void;
 };
 
 type LastSelection = {
@@ -21,6 +22,7 @@ type SelectionElementProps = {
     ref: (value: Gtk.SelectionModel | null) => void;
     model: Gio.ListModel;
     onSelectionChanged: () => void;
+    onItemsChanged: () => void;
 };
 
 function getSelectedIds(selection: Gtk.SelectionModel, collection: Collection): string[] {
@@ -153,6 +155,7 @@ function useSelection(options: SelectionOptions): ReactElement {
         onSelectionChanged: () => {
             reportSelection(selection, collection, last, onSelectionChanged);
         },
+        onItemsChanged: options.onItemsChanged,
     });
 }
 

package/src/internal/use-collection.tsx

@@ -1,8 +1,6 @@
-import type { ReactElement, RefObject } from "react";
+import type { ReactElement } from "react";
 import { useLayoutEffect, useMemo, useState } from "react";
-import type { ExpansionProps, Item, Section, SelectionProps } from "../types.js";
-import type { CollectionIndex } from "./collection-index.js";
-import type { CollectionModel } from "./collection-model.js";
+import type { ExpansionProps, ListItem, ListSection, SelectionProps } from "../types.js";
 import type { Collection } from "./collection.js";
 import { createCollectionIndex } from "./collection-index.js";
 import { createCollectionModel } from "./collection-model.js";
@@ -11,10 +9,9 @@ import { useExpansion } from "./expansion.js";
 import { useSelection } from "./selection.js";
 
 type CollectionDataOptions = {
-    items?: Item[] | undefined;
-    sections?: Section[] | undefined;
-    flat?: boolean | undefined;
-    applying?: RefObject<boolean> | undefined;
+    items?: ListItem[] | undefined;
+    sections?: ListSection[] | undefined;
+    isFlat?: boolean | undefined;
 };
 
 type CollectionOptions = CollectionDataOptions & SelectionProps & ExpansionProps;
@@ -24,44 +21,34 @@ type CollectionResult = {
     selection: ReactElement;
 };
 
-function runSync(gtk: CollectionModel, index: CollectionIndex, applying: RefObject<boolean> | undefined): void {
-    if (applying === undefined) {
-        gtk.sync(index);
-
-        return;
-    }
-
-    applying.current = true;
-
-    try {
-        gtk.sync(index);
-    } finally {
-        applying.current = false;
-    }
-}
-
 function useCollectionData(options: CollectionDataOptions): Collection {
-    const { items, sections, flat, applying } = options;
+    const { items, sections, isFlat } = options;
     const [gtk] = useState(createCollectionModel);
-    const index = useMemo(() => createCollectionIndex(items, sections, flat === true), [items, sections, flat]);
+    const index = useMemo(() => createCollectionIndex(items, sections, isFlat === true), [items, sections, isFlat]);
     const collection = useMemo(() => createCollection(gtk, index), [gtk, index]);
 
     useLayoutEffect(() => {
-        runSync(gtk, index, applying);
-    }, [gtk, index, applying]);
+        gtk.sync(index);
+    }, [gtk, index]);
 
     return collection;
 }
 
 function useCollection(options: CollectionOptions): CollectionResult {
     const collection = useCollectionData(options);
-    useExpansion({ collection, expandedIds: options.expandedIds, onExpandedChange: options.onExpandedChange });
+
+    const onItemsChanged = useExpansion({
+        collection,
+        expandedIds: options.expandedIds,
+        onExpandedChange: options.onExpandedChange,
+    });
 
     const selection = useSelection({
         collection,
         selectedIds: options.selectedIds,
         onSelectionChanged: options.onSelectionChanged,
         selectionMode: options.selectionMode,
+        onItemsChanged,
     });
 
     return { collection, selection };

package/src/types.ts

@@ -2,31 +2,23 @@ import type * as Gtk from "@gtkx/gi/gtk";
 import type {
     GtkColumnViewColumnProps,
     GtkColumnViewProps,
-    GtkDropDown,
+    GtkDropDownProps,
     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>;
-
-/** Props of a component whose backing widget defaults to one type but can be swapped through `component`. */
-type WidgetProps<C extends ElementType, Own = unknown, ExtraOmit extends string = never> = Own & {
-    component?: C;
-} & Omit<ComponentPropsWithRef<C>, ExtraOmit | keyof Own>;
+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. */
@@ -36,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;
@@ -54,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;
     };
 
@@ -120,31 +137,41 @@ 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>
+> &
+DropDownOwnProps<T, S>;
+
 /**
- * Props for {@link DropDown}. The backing widget is chosen through the `component` prop, defaulting to
- * GtkDropDown, and its own props combine with the declarative collection props.
+ * Props for {@link DropDown}. Combines the underlying Gtk.DropDown props with the declarative
+ * collection props: flat items or grouped sections, controlled single selection, and renderers
+ * for the collapsed display, popup rows, and popup section headers.
  */
-type DropDownProps<T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown> = WidgetProps<
-    C,
-    DropDownOwnProps<T, S>,
-    "model" | "factory" | "listFactory" | "headerFactory"
->;
+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>;
     };
 
 /**
@@ -155,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;
     };
 
 /**
@@ -175,33 +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 WidgetProps,
-    type Item,
-    type Section,
-    type RenderItemArgs,
-    type RenderHeaderArgs,
-    type ItemRenderer,
-    type HeaderRenderer,
-    type Column,
+    type DropDownOwnProps,
+    type DropDownWidgetProps,
+    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"]}