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

package/src/column-view.tsx

@@ -1,190 +1,206 @@
-import type * as Gtk from "@gtkx/gi/gtk";
-import { GtkColumnView, type GtkColumnViewProps } from "@gtkx/jsx/gtk";
-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";
-
-export type { ColumnDef, ColumnDefDeclarativeProps } from "./column-view-column.js";
-
-const headerFactoryInstaller = makeFactoryInstaller<Gtk.ColumnView>((widget, factory) =>
-    widget.setHeaderFactory(factory),
-);
-
-export type ColumnViewSortProps = {
+import type { ReactNode } from "react";
+import * as Gtk from "@gtkx/gi/gtk";
+import { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import { useSignal } from "@gtkx/react";
+import { omit } from "@gtkx/utils";
+import { useLayoutEffect, useRef } from "react";
+import type { CellSize } from "./internal/cells.js";
+import type { Collection } from "./internal/collection.js";
+import type { Column, ColumnViewProps } from "./types.js";
+import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./internal/cells.js";
+import { useCollection } from "./internal/use-collection.js";
+import { useWidgetRef } from "./internal/use-widget-ref.js";
+
+type SortProps = {
     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>[];
-    };
+type SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn | null };
 
-/**
- * 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 ColumnViewProps<T = unknown, S = unknown> = Omit<
-    GtkColumnViewProps,
-    "columns" | "model" | "headerFactory" | keyof ColumnViewDeclarativeProps<T, S>
-> &
-    ColumnViewDeclarativeProps<T, S>;
-
-type NormalizedColumnViewProps<T, S> = ColumnViewDeclarativeProps<T, S> & {
-    ref?: Ref<Gtk.ColumnView | null>;
-    [key: string]: unknown;
+type ColumnCellsProps = {
+    column: Column<never>;
+    collection: Collection;
+    expandedIds: string[] | null | undefined;
+    size: CellSize;
 };
 
-interface ColumnViewWiring<T, S> {
-    setRef: (value: Gtk.ColumnView | null) => void;
-    useHeader: boolean;
-    headerStore: CellContainerStore;
-    headerResolver: ItemResolver<T, S>;
-    resolver: ItemResolver<unknown, unknown>;
-    tree: TreeRenderContext;
-    setInstance: (id: string, column: Gtk.ColumnViewColumn | null) => void;
-}
+type ColumnListProps = Omit<ColumnCellsProps, "column"> & {
+    columns: Column<never>[];
+};
+
+const COLUMN_VIEW_PROPS = [
+    "items",
+    "sections",
+    "renderHeader",
+    "columns",
+    "selectedIds",
+    "onSelectionChanged",
+    "selectionMode",
+    "expandedIds",
+    "onExpandedChange",
+    "sortColumn",
+    "sortOrder",
+    "onSortChanged",
+    "estimatedItemHeight",
+    "children",
+    "ref",
+] as const satisfies (keyof ColumnViewProps)[];
+
+const columnById = (view: Gtk.ColumnView, id: string): Gtk.ColumnViewColumn | null => {
+    const columns = view.getColumns();
+
+    for (let index = 0; index < columns.getNItems(); index++) {
+        const column = columns.getItem(index);
+
+        if (column instanceof Gtk.ColumnViewColumn && column.getId() === id) {
+            return column;
+        }
+    }
 
-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;
-        });
-    }, []);
-    return { instances, setInstance };
+    return null;
 };
 
-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 });
+const getSortTarget = (view: Gtk.ColumnView | null, sortColumn: string | null | undefined): SortTarget | null => {
+    if (view === null || sortColumn === undefined) {
+        return null;
+    }
+
+    if (sortColumn === null) {
+        return { view, column: null };
     }
-    return result;
+
+    const column = columnById(view, sortColumn);
+
+    return column === null ? null : { view, column };
 };
 
-const useColumnViewWiring = <T, S>(props: NormalizedColumnViewProps<T, S>): ColumnViewWiring<T, S> => {
-    const { widgetRef, setRef, collection } = useCollectionWidget<Gtk.ColumnView, T, S>(props);
+const applySort = (
+    sorting: { current: boolean },
+    view: Gtk.ColumnView,
+    column: Gtk.ColumnViewColumn | null,
+    order: Gtk.SortType | null | undefined,
+): void => {
+    sorting.current = true;
+
+    try {
+        view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);
+    } finally {
+        sorting.current = false;
+    }
+};
 
-    const useHeader = collection.useHeader;
-    const headerStore = useCellContainers<Gtk.ColumnView>({
-        object: useHeader ? widgetRef : null,
-        installer: headerFactoryInstaller,
-        estimatedHeight: props.estimatedItemHeight,
-    });
+const emitSortChanged = (
+    sorter: Gtk.ColumnViewSorter | null,
+    sorting: { current: boolean },
+    sort: SortProps,
+): void => {
+    if (sorter === null || sorting.current) {
+        return;
+    }
 
-    const { instances, setInstance } = useColumnInstances();
-    const registrations = useMemo<ColumnRegistration[]>(
-        () => buildRegistrations(props.columns, instances),
-        [props.columns, instances],
-    );
+    sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+};
+
+const syncSort = (
+    sorting: { current: boolean },
+    view: Gtk.ColumnView | null,
+    sortColumn: string | null | undefined,
+    sortOrder: Gtk.SortType | null | undefined,
+): void => {
+    const target = getSortTarget(view, sortColumn);
+
+    if (target === null) {
+        return;
+    }
 
-    useSortHandler({
-        columnView: widgetRef,
-        sortColumn: props.sortColumn,
-        sortOrder: props.sortOrder,
-        onSortChanged: props.onSortChanged,
-        columns: registrations,
+    applySort(sorting, target.view, target.column, sortOrder);
+};
+
+const useColumnSorting = (view: Gtk.ColumnView | null, sort: SortProps, columns: Column<never>[]): void => {
+    const sorting = useRef(false);
+    const sorter = view?.getSorter() ?? null;
+    const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;
+
+    useSignal(columnSorter, "changed", (): void => {
+        emitSortChanged(columnSorter, sorting, sort);
     });
 
-    const expandedIds = props.expandedIds;
-    const tree = useMemo<TreeRenderContext>(
-        () => createTreeRenderContext(expandedIds, collection.rowId),
-        [expandedIds, collection.rowId],
-    );
+    const { sortColumn, sortOrder } = sort;
 
-    return {
-        setRef,
-        useHeader,
-        headerStore,
-        headerResolver: collection.headerResolver,
-        resolver: collection.resolver as ItemResolver<unknown, unknown>,
-        tree,
-        setInstance,
-    };
+    useLayoutEffect(() => {
+        syncSort(sorting, view, sortColumn, sortOrder);
+    }, [view, sortColumn, sortOrder, columns]);
+};
+
+const ColumnCells = ({ column, collection, expandedIds, size }: ColumnCellsProps): ReactNode => {
+    const cells = useItemCells(size);
+    const rest = omit(column, ["id", "renderCell", "sortable"]);
+
+    return (
+        <>
+            <GtkColumnViewColumn
+                id={column.id}
+                factory={<GtkSignalListItemFactory {...cells.handlers} />}
+                sorter={column.sortable === true ? <GtkCustomSorter /> : null}
+                {...rest}
+            />
+            <ItemPortals
+                store={cells}
+                render={column.renderCell}
+                collection={collection}
+                expandedIds={expandedIds}
+            />
+        </>
+    );
 };
 
+const ColumnList = ({ columns, collection, expandedIds, size }: ColumnListProps): ReactNode =>
+    columns.map((column) => (
+        <ColumnCells
+            key={column.id}
+            column={column}
+            collection={collection}
+            expandedIds={expandedIds}
+            size={size}
+        />
+    ));
+
 /**
- * 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}.
+ * Renders a Gtk.ColumnView from declarative items or sections and a columns array,
+ * with controlled selection, expansion, and sorting, per-column header menus, and
+ * section header rendering.
  */
-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,
-        sections,
-        columns,
-        selectedIds,
-        selectionMode,
-        onSelectionChanged,
-        expandedIds,
-        onExpandedChange,
-        sortColumn,
-        sortOrder,
-        onSortChanged,
-        renderHeader,
-        estimatedItemHeight,
-        ...intrinsicProps
-    } = normalized;
+function ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {
+    const { renderHeader, columns, expandedIds, sortColumn, sortOrder, onSortChanged, estimatedItemHeight, ref } =
+        props;
+
+    const rest = omit(props, COLUMN_VIEW_PROPS);
+    const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);
+    const size = { width: -1, height: estimatedItemHeight ?? -1 };
+    const { collection, selection } = useCollection(props);
+    const headerCells = useHeaderCells(size);
+    const columnList = columns as Column<never>[];
+    useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);
 
     return (
         <>
-            <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
+                ref={refCallback}
+                model={selection}
+                {...(renderHeader != null && {
+                    headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} />,
+                })}
+                {...rest}
+            >
+                <ColumnList columns={columnList} collection={collection} expandedIds={expandedIds} size={size} />
             </GtkColumnView>
-            <HeaderRenderHost
-                useHeader={wiring.useHeader}
-                store={wiring.headerStore}
-                resolver={wiring.headerResolver}
-                renderHeader={renderHeader}
-            />
+            {renderHeader != null && (
+                <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />
+            )}
         </>
     );
-};
+}
+
+export { ColumnView };

package/src/drop-down.tsx

@@ -1,192 +1,19 @@
-import type * as Gtk from "@gtkx/gi/gtk";
-import { GtkDropDown, GtkLabel } from "@gtkx/jsx/gtk";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { type ElementType, type ReactNode, type Ref, useCallback, useRef, useState } from "react";
-import { type CellRenderer, CellRenderHost, HeaderRenderHost, itemRenderer } from "./cell.js";
-import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
-import { useDropDownSelection } from "./hooks/use-drop-down-selection.js";
-import { useInstalledModel } from "./hooks/use-installed-model.js";
-import { useListModel } from "./hooks/use-list-model.js";
-import type { ItemNode, RenderItemProps, SectionNode, WidgetProps } from "./types.js";
-import type { CellContainerStore } from "./utils/cell-container-store.js";
-import type { ItemResolver } from "./utils/item-resolver.js";
+import type { ReactNode } from "react";
+import { GtkDropDown } from "@gtkx/jsx/gtk";
+import type { DropDownBaseProps } from "./internal/drop-down.js";
+import type { DropDownProps } from "./types.js";
+import { DropDownBase } from "./internal/drop-down.js";
 
-export type DropDownItemRenderer<T> = (props: RenderItemProps<T>) => ReactNode;
-
-const itemFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) => widget.setFactory(factory));
-
-const listFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) => widget.setListFactory(factory));
-
-const headerFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) =>
-    widget.setHeaderFactory(factory),
-);
-
-const defaultRenderer: CellRenderer<unknown, unknown> = (value) => {
-    if (value === undefined || value === null) return null;
-    return <GtkLabel>{String(value)}</GtkLabel>;
-};
-
-const toItemRenderer = <T, S>(renderItem: DropDownItemRenderer<T> | null | undefined): CellRenderer<T, S> => {
-    if (typeof renderItem !== "function") return defaultRenderer as CellRenderer<T, S>;
-    return itemRenderer<T, S>(renderItem);
-};
-
-const toListRenderer = <T, S>(
-    renderListItem: DropDownItemRenderer<T> | null | undefined,
-    renderItem: DropDownItemRenderer<T> | null | undefined,
-): CellRenderer<T, S> => {
-    if (typeof renderListItem === "function") return itemRenderer<T, S>(renderListItem);
-    return toItemRenderer<T, S>(renderItem);
-};
-
-const createSelectionResolver = <T, S>(resolver: ItemResolver<T, S>, selectedPosition: number): ItemResolver<T, S> => ({
-    positionOfId: (id) => resolver.positionOfId(id),
-    idOf: (position) => resolver.idOf(position),
-    resolve: (_position, treeRow) => resolver.resolve(selectedPosition, treeRow),
-});
-
-/** Declarative props for {@link DropDown}'s backing collection and cell rendering. */
-export type DropDownDeclarativeProps<T = unknown, S = unknown> = {
-    items?: ItemNode<T>[] | undefined;
-    sections?: SectionNode<S, T>[] | undefined;
-    /** Id of the currently selected item, making the selection controlled. */
-    selectedId?: string | null | undefined;
-    onSelectionChanged?: ((id: string) => void) | null | undefined;
-    renderItem?: DropDownItemRenderer<T> | null | undefined;
-    /** Renderer for items in the open popup list, falling back to renderItem when omitted. */
-    renderListItem?: DropDownItemRenderer<T> | null | undefined;
-    /** Renderer for section headers in the popup list. */
-    renderHeader?: ((info: { section: S }) => ReactNode) | null | undefined;
-};
+type DropDownComponent = <T = unknown, S = unknown>(props: DropDownProps<T, S>) => ReactNode;
 
 /**
- * Props for {@link DropDown}. The backing widget is chosen through the `component` prop, defaulting to
- * GtkDropDown, and its own props combine with {@link DropDownDeclarativeProps}.
+ * Renders a `Gtk.DropDown` backed by a collection model, with customizable renderers for the
+ * collapsed display, popup rows, and popup section headers, and controlled selection.
  */
-export type DropDownProps<T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown> = WidgetProps<
-    C,
-    DropDownDeclarativeProps<T, S>,
-    "model" | "factory" | "listFactory" | "headerFactory"
->;
+const DropDown: DropDownComponent = DropDownImpl as DropDownComponent;
 
-interface NormalizedDropDownProps<T, S> {
-    ref: Ref<Gtk.DropDown | null> | undefined;
-    items: ItemNode<T>[] | undefined;
-    sections: SectionNode<S, T>[] | undefined;
-    selectedId: string | null | undefined;
-    onSelectionChanged: ((id: string) => void) | null | undefined;
-    renderHeader: ((info: { section: S }) => ReactNode) | null | undefined;
+function DropDownImpl(props: DropDownBaseProps): ReactNode {
+    return <DropDownBase {...props} component={GtkDropDown} />;
 }
 
-interface DropDownWiring<T, S> {
-    setRef: (value: Gtk.DropDown | null) => void;
-    resolver: ItemResolver<T, S>;
-    selectionResolver: ItemResolver<T, S>;
-    headerResolver: ItemResolver<T, S>;
-    selectionStore: CellContainerStore;
-    listStore: CellContainerStore;
-    headerStore: CellContainerStore;
-    useHeader: boolean;
-}
-
-const useDropDownWiring = <T, S>(props: NormalizedDropDownProps<T, S>): DropDownWiring<T, S> => {
-    const widgetRef = useRef<Gtk.DropDown | null>(null);
-    const [widget, setWidget] = useState<Gtk.DropDown | null>(null);
-    const captureWidget = useCallback((value: Gtk.DropDown | null) => {
-        widgetRef.current = value;
-        setWidget(value);
-    }, []);
-    const setRef = useMergeRefs<Gtk.DropDown>(props.ref, captureWidget);
-
-    const listModel = useListModel<T, S>({ items: props.items, sections: props.sections });
-
-    const useHeader = typeof props.renderHeader === "function";
-
-    const selectionStore = useCellContainers<Gtk.DropDown>({ object: widgetRef, installer: itemFactoryInstaller });
-    const listStore = useCellContainers<Gtk.DropDown>({ object: widgetRef, installer: listFactoryInstaller });
-    const headerStore = useCellContainers<Gtk.DropDown>({
-        object: useHeader ? widgetRef : null,
-        installer: headerFactoryInstaller,
-    });
-
-    useInstalledModel(widgetRef, listModel.model, (widget, value) => widget.setModel(value));
-
-    const selectedPosition = useDropDownSelection<T, S>({
-        widget,
-        resolver: listModel.resolver,
-        selectedId: props.selectedId,
-        onSelectionChanged: props.onSelectionChanged,
-    });
-
-    const controlledPosition =
-        props.selectedId === undefined || props.selectedId === null
-            ? -1
-            : listModel.resolver.positionOfId(props.selectedId);
-    const selectionPosition =
-        controlledPosition >= 0 ? controlledPosition : selectedPosition < 0 ? 0 : selectedPosition;
-
-    return {
-        setRef,
-        resolver: listModel.resolver,
-        selectionResolver: createSelectionResolver(listModel.resolver, selectionPosition),
-        headerResolver: listModel.headerResolver,
-        selectionStore,
-        listStore,
-        headerStore,
-        useHeader,
-    };
-};
-
-/**
- * Renders a drop-down widget (Gtk.DropDown by default, or the widget given as `component`) backed by a
- * collection model, with customizable rendering for the selected item, the popup list rows, and section
- * headers.
- */
-export const DropDown = <T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown>(
-    props: DropDownProps<T, S, C>,
-): ReactNode => {
-    const {
-        component,
-        ref,
-        items,
-        sections,
-        renderItem,
-        renderListItem,
-        renderHeader,
-        selectedId,
-        onSelectionChanged,
-        ...intrinsicProps
-    } = props;
-    const Component: ElementType = component ?? GtkDropDown;
-
-    const wiring = useDropDownWiring<T, S>({
-        ref,
-        items,
-        sections,
-        selectedId,
-        onSelectionChanged,
-        renderHeader,
-    });
-
-    return (
-        <>
-            <Component {...intrinsicProps} ref={wiring.setRef} />
-            <CellRenderHost
-                store={wiring.selectionStore}
-                resolver={wiring.selectionResolver}
-                render={toItemRenderer<T, S>(renderItem)}
-            />
-            <CellRenderHost
-                store={wiring.listStore}
-                resolver={wiring.resolver}
-                render={toListRenderer<T, S>(renderListItem, renderItem)}
-            />
-            <HeaderRenderHost
-                useHeader={wiring.useHeader}
-                store={wiring.headerStore}
-                resolver={wiring.headerResolver}
-                renderHeader={renderHeader}
-            />
-        </>
-    );
-};
+export { DropDown };