@gtkx/components 0.21.0 → 1.0.0-rc.2

package/dist/adw/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/adw/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,GAAG,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD;;;GAGG;AACH,KAAK,YAAY,GAAG,GAAG,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,GAAG,aAAa,CAAC,CAAC;AAEvG,+EAA+E;AAC/E,KAAK,eAAe,GAAG;IACnB,oEAAoE;IACpE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,GAAG,CAAC,KAAK,CAAC;IAC5C,wFAAwF;IACxF,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,2FAA2F;AAC3F,KAAK,sBAAsB,GAAG;IAC1B,sDAAsD;IACtD,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,uCAAuC;AACvC,KAAK,kBAAkB,GAAG;IACtB,sEAAsE;IACtE,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,eAAe,EAAE,KAAK,sBAAsB,EAAE,KAAK,kBAAkB,EAAE,CAAC"}

package/dist/adw/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/adw/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/adw/types.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAiG,CAAC","sourcesContent":["import type * as Adw from \"@gtkx/gi/adw\";\nimport type { AdwToastProps } from \"@gtkx/jsx/adw\";\nimport type { ReactNode, RefObject } from \"react\";\n\n/**\n * Describes a toast raised through {@link useToast}: the construct-time properties of an\n * `Adw.Toast` plus its `button-clicked` and `dismissed` handlers.\n */\ntype ToastOptions = Adw.ToastConstructorProps & Pick<AdwToastProps, \"onButtonClicked\" | \"onDismissed\">;\n\n/** Imperative controls for individual toasts, returned by {@link useToast}. */\ntype ToastController = {\n    /** Builds a toast, shows it through the overlay, and returns it. */\n    show: (options?: ToastOptions) => Adw.Toast;\n    /** Dismisses a single toast, typically one returned by {@link ToastController.show}. */\n    dismiss: (toast: Adw.Toast) => void;\n};\n\n/** Imperative controls for the overlay as a whole, returned by {@link useToastOverlay}. */\ntype ToastOverlayController = {\n    /** Dismisses the shown toast and every queued one. */\n    dismissAll: () => void;\n};\n\n/** Props for {@link ToastProvider}. */\ntype ToastProviderProps = {\n    /** Ref also given to the `AdwToastOverlay` the toasts appear over. */\n    overlayRef: RefObject<Adw.ToastOverlay | null>;\n    children?: ReactNode | undefined;\n};\n\nexport { type ToastOptions, type ToastController, type ToastOverlayController, type ToastProviderProps };\n"]}

package/dist/column-view.d.ts

@@ -1,18 +1,10 @@
-import { type GtkColumnViewProps } from "@gtkx/jsx/gtk";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { ColumnViewProps } from "./types.js";
 /**
- * Props for the {@link ColumnView} component: the raw `GtkColumnView` element
- * surface (minus its imperative `columns` property) with its model/sort wiring
- * replaced by the declarative {@link ColumnViewProps} API. Columns are declared
- * as {@link ColumnViewColumn} children.
+ * 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 type ColumnViewComponentProps<T = unknown, S = unknown> = Omit<GtkColumnViewProps, "columns" | keyof ColumnViewProps<T, S>> & ColumnViewProps<T, S>;
-/**
- * A `GtkColumnView` driven by a declarative `items` model with optional
- * controlled selection, controlled sorting, and section headers. Columns are
- * declared as {@link ColumnViewColumn} children. Supplying an external `model`
- * switches to the uncontrolled form.
- */
-export declare const ColumnView: <T = unknown, S = unknown>(props: ColumnViewComponentProps<T, S>) => ReactNode;
+declare function ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode;
+export { ColumnView };
 //# sourceMappingURL=column-view.d.ts.map

package/dist/column-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAiB,KAAK,SAAS,EAAoD,MAAM,OAAO,CAAC;AAaxG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAmClD;;;;;GAKG;AACH,MAAM,MAAM,wBAAwB,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,IAAI,IAAI,CACjE,kBAAkB,EAClB,SAAS,GAAG,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1C,GACG,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAoF1B;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,OAAO,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAG,SAqD5F,CAAC"}
+{"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,KAAK,EAAU,eAAe,EAAE,MAAM,YAAY,CAAC;AAiK1D;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CA6BrF;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/column-view.js

@@ -1,108 +1,106 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { GtkColumnView } from "@gtkx/jsx/gtk";
-import { useForwardedRef } from "@gtkx/react";
-import { createElement, useCallback, useMemo, useRef, useState } from "react";
-import { ColumnViewContext, } from "./contexts/column-view-context.js";
-import { useListModel } from "./hooks/use-list-model.js";
-import { useModelInstallation } from "./hooks/use-model-installation.js";
-import { useRealizedSlots } from "./hooks/use-realized-slots.js";
-import { useSelectionModel } from "./hooks/use-selection-model.js";
-import { useSortHandler } from "./hooks/use-sort-handler.js";
-import { ListPortalHost } from "./list-portal-host.js";
-const headerFactoryBinding = {
-    install: (widget, factory) => widget.setHeaderFactory(factory),
-    uninstall: (widget) => widget.setHeaderFactory(null),
+import * as Gtk from "@gtkx/gi/gtk";
+import { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import { useProperty, useSignal } from "@gtkx/react";
+import { omit } from "@gtkx/utils";
+import { useLayoutEffect, useRef } from "react";
+import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./internal/cells.js";
+import { useCollection } from "./internal/use-collection.js";
+import { useWidgetRef } from "./internal/use-widget-ref.js";
+const COLUMN_VIEW_PROPS = [
+    "items",
+    "sections",
+    "renderHeader",
+    "columns",
+    "selectedIds",
+    "onSelectionChanged",
+    "selectionMode",
+    "expandedIds",
+    "onExpandedChange",
+    "sortColumn",
+    "sortOrder",
+    "onSortChanged",
+    "estimatedItemHeight",
+    "children",
+    "ref",
+];
+const columnById = (view, id) => {
+    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;
+        }
+    }
+    return null;
 };
-const useColumnRegistry = () => {
-    const [registrations, setRegistrations] = useState(() => new Map());
-    const register = useCallback((registration) => {
-        setRegistrations((current) => {
-            const next = new Map(current);
-            next.set(registration.id, registration);
-            return next;
-        });
-    }, []);
-    const unregister = useCallback((id) => {
-        setRegistrations((current) => {
-            if (!current.has(id))
-                return current;
-            const next = new Map(current);
-            next.delete(id);
-            return next;
-        });
-    }, []);
-    const columns = useMemo(() => [...registrations.values()], [registrations]);
-    return { columns, register, unregister };
+const getSortTarget = (view, sortColumn) => {
+    if (view === null || sortColumn === undefined) {
+        return null;
+    }
+    if (sortColumn === null) {
+        return { view, column: null };
+    }
+    const column = columnById(view, sortColumn);
+    return column === null ? null : { view, column };
 };
-const headerRenderer = (renderHeader) => (value) => renderHeader ? renderHeader(value) : null;
-const useColumnViewWiring = (props, registry) => {
-    const widgetRef = useRef(null);
-    const captureWidget = useCallback((value) => {
-        widgetRef.current = value;
-    }, []);
-    const [, setRef] = useForwardedRef(props.ref, captureWidget);
-    const externalModel = props.model;
-    const listModel = useListModel(externalModel === undefined ? { items: props.items } : { model: externalModel });
-    const controlledSelection = useSelectionModel({
-        base: listModel.model,
-        selectionMode: props.selectionMode,
-        selected: props.selected,
-        onSelectionChanged: props.onSelectionChanged,
-        resolver: listModel.resolver,
-    });
-    const installedModel = externalModel === undefined ? controlledSelection : externalModel;
-    useModelInstallation(widgetRef, installedModel, (widget, model) => widget.setModel(model));
-    const useHeader = externalModel === undefined && typeof props.renderHeader === "function";
-    const headers = useRealizedSlots({
-        target: useHeader ? widgetRef : null,
-        binding: headerFactoryBinding,
-        estimatedHeight: props.estimatedRowHeight ?? undefined,
-    });
-    useSortHandler({
-        columnView: widgetRef,
-        sortColumn: props.sortColumn,
-        sortOrder: props.sortOrder,
-        onSortChanged: props.onSortChanged,
-        columns: registry.columns,
+const applySort = (sorting, view, column, order) => {
+    sorting.current = true;
+    try {
+        view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);
+    }
+    finally {
+        sorting.current = false;
+    }
+};
+const emitSortChanged = (sorter, sorting, sort) => {
+    if (sorter === null || sorting.current) {
+        return;
+    }
+    sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+};
+const syncSort = (sorting, view, sortColumn, sortOrder) => {
+    const target = getSortTarget(view, sortColumn);
+    if (target === null) {
+        return;
+    }
+    applySort(sorting, target.view, target.column, sortOrder);
+};
+const useColumnSorting = (view, sort, columns) => {
+    const sorting = useRef(false);
+    const sorter = useProperty(view, "sorter");
+    const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;
+    useSignal(columnSorter, "changed", () => {
+        emitSortChanged(columnSorter, sorting, sort);
     });
-    const contextValue = useMemo(() => ({
-        columnView: widgetRef,
-        resolver: listModel.resolver,
-        register: registry.register,
-        unregister: registry.unregister,
-    }), [listModel.resolver, registry.register, registry.unregister]);
-    return {
-        setRef,
-        resolver: listModel.resolver,
-        headerResolver: listModel.headerResolver,
-        headerStore: headers.store,
-        useHeader,
-        contextValue,
-    };
+    const { sortColumn, sortOrder } = sort;
+    useLayoutEffect(() => {
+        syncSort(sorting, view, sortColumn, sortOrder);
+    }, [view, sortColumn, sortOrder, columns]);
+};
+const ColumnCells = ({ column, collection, expandedIds, size }) => {
+    const cells = useItemCells(size);
+    const rest = omit(column, ["id", "renderCell", "sortable"]);
+    return (_jsxs(_Fragment, { children: [_jsx(GtkColumnViewColumn, { id: column.id, factory: _jsx(GtkSignalListItemFactory, { ...cells.handlers }), sorter: column.sortable === true ? _jsx(GtkCustomSorter, {}) : null, ...rest }), _jsx(ItemPortals, { store: cells, render: column.renderCell, collection: collection, expandedIds: expandedIds })] }));
 };
+const ColumnList = ({ columns, collection, expandedIds, size }) => columns.map((column) => (_jsx(ColumnCells, { column: column, collection: collection, expandedIds: expandedIds, size: size }, column.id)));
 /**
- * A `GtkColumnView` driven by a declarative `items` model with optional
- * controlled selection, controlled sorting, and section headers. Columns are
- * declared as {@link ColumnViewColumn} children. Supplying an external `model`
- * switches to the uncontrolled form.
+ * Renders a Gtk.ColumnView 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 = (props) => {
-    const { ref, items, model, selected, selectionMode, onSelectionChanged, sortColumn, sortOrder, onSortChanged, renderHeader, estimatedRowHeight, children, ...intrinsicProps } = props;
-    const registry = useColumnRegistry();
-    const wiring = useColumnViewWiring({
-        ref,
-        items,
-        model,
-        selected,
-        selectionMode,
-        onSelectionChanged,
-        sortColumn,
-        sortOrder,
-        onSortChanged,
-        renderHeader,
-        estimatedRowHeight,
-    }, registry);
-    const intrinsic = createElement(GtkColumnView, { ...intrinsicProps, ref: wiring.setRef }, _jsx(ColumnViewContext.Provider, { value: wiring.contextValue, children: children }));
-    return (_jsxs(_Fragment, { children: [intrinsic, wiring.useHeader ? (_jsx(ListPortalHost, { store: wiring.headerStore, resolver: wiring.headerResolver, render: headerRenderer(renderHeader) })) : null] }));
-};
+function ColumnView(props) {
+    const { renderHeader, columns, expandedIds, sortColumn, sortOrder, onSortChanged, estimatedItemHeight, ref } = props;
+    const rest = omit(props, COLUMN_VIEW_PROPS);
+    const [view, refCallback] = useWidgetRef(ref);
+    const size = { width: -1, height: estimatedItemHeight ?? -1 };
+    const { collection, selection } = useCollection(props);
+    const headerCells = useHeaderCells(size);
+    const columnList = columns;
+    useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);
+    return (_jsxs(_Fragment, { children: [_jsx(GtkColumnView, { ref: refCallback, model: selection, ...(renderHeader != null && {
+                    headerFactory: _jsx(GtkSignalListItemFactory, { ...headerCells.handlers }),
+                }), ...rest, children: _jsx(ColumnList, { columns: columnList, collection: collection, expandedIds: expandedIds, size: size }) }), renderHeader != null && (_jsx(HeaderPortals, { store: headerCells, render: renderHeader, collection: collection }))] }));
+}
+export { ColumnView };
 //# sourceMappingURL=column-view.js.map

package/dist/column-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,GAAG,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAC9G,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAqB5D,MAAM,iBAAiB,GAAG;IACtB,OAAO;IACP,UAAU;IACV,cAAc;IACd,SAAS;IACT,aAAa;IACb,oBAAoB;IACpB,eAAe;IACf,aAAa;IACb,kBAAkB;IAClB,YAAY;IACZ,WAAW;IACX,eAAe;IACf,qBAAqB;IACrB,UAAU;IACV,KAAK;CACqC,CAAC;AAE/C,MAAM,UAAU,GAAG,CAAC,IAAoB,EAAE,EAAU,EAA+B,EAAE;IACjF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAElC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC;QACvD,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAEtC,IAAI,MAAM,YAAY,GAAG,CAAC,gBAAgB,IAAI,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC;YAClE,OAAO,MAAM,CAAC;QAClB,CAAC;IACL,CAAC;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,IAA2B,EAAE,UAAqC,EAAqB,EAAE;IAC5G,IAAI,IAAI,KAAK,IAAI,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;QACtB,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAE5C,OAAO,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CACd,OAA6B,EAC7B,IAAoB,EACpB,MAAmC,EACnC,KAAsC,EAClC,EAAE;IACN,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAEvB,IAAI,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,IAAI,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC/D,CAAC;YAAS,CAAC;QACP,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;IAC5B,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CACpB,MAAmC,EACnC,OAA6B,EAC7B,IAAe,EACX,EAAE;IACN,IAAI,MAAM,KAAK,IAAI,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;QACrC,OAAO;IACX,CAAC;IAED,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,IAAI,IAAI,EAAE,MAAM,CAAC,mBAAmB,EAAE,CAAC,CAAC;AACvG,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CACb,OAA6B,EAC7B,IAA2B,EAC3B,UAAqC,EACrC,SAA0C,EACtC,EAAE;IACN,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAE/C,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;QAClB,OAAO;IACX,CAAC;IAED,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAA2B,EAAE,IAAe,EAAE,OAAwB,EAAQ,EAAE;IACtG,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,MAAM,GAAG,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC3C,MAAM,YAAY,GAAG,MAAM,YAAY,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5E,SAAS,CAAC,YAAY,EAAE,SAAS,EAAE,GAAS,EAAE;QAC1C,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAEvC,eAAe,CAAC,GAAG,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,EAAoB,EAAa,EAAE;IAC3F,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACjC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5D,OAAO,CACH,8BACI,KAAC,mBAAmB,IAChB,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,OAAO,EAAE,KAAC,wBAAwB,OAAK,KAAK,CAAC,QAAQ,GAAI,EACzD,MAAM,EAAE,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,CAAC,CAAC,CAAC,IAAI,KACzD,IAAI,GACV,EACF,KAAC,WAAW,IACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,CAAC,UAAU,EACzB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,GAC1B,IACH,CACN,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,IAAI,EAAmB,EAAa,EAAE,CAC1F,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACpB,KAAC,WAAW,IAER,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,IAJL,MAAM,CAAC,EAAE,CAKhB,CACL,CAAC,CAAC;AAEP;;;;GAIG;AACH,SAAS,UAAU,CAA2B,KAA4B;IACtE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,GAAG,EAAE,GACxG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC;IAC5C,MAAM,CAAC,IAAI,EAAE,WAAW,CAAC,GAAG,YAAY,CAAiB,GAAG,CAAC,CAAC;IAC9D,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,mBAAmB,IAAI,CAAC,CAAC,EAAE,CAAC;IAC9D,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,OAA0B,CAAC;IAC9C,gBAAgB,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,UAAU,CAAC,CAAC;IAE7E,OAAO,CACH,8BACI,KAAC,aAAa,IACV,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,SAAS,KACZ,CAAC,YAAY,IAAI,IAAI,IAAI;oBACzB,aAAa,EAAE,KAAC,wBAAwB,OAAK,WAAW,CAAC,QAAQ,GAAI;iBACxE,CAAC,KACE,IAAI,YAER,KAAC,UAAU,IAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAI,GACrF,EACf,YAAY,IAAI,IAAI,IAAI,CACrB,KAAC,aAAa,IAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI,CACtF,IACF,CACN,CAAC;AACN,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { useProperty, useSignal } from \"@gtkx/react\";\nimport { omit } from \"@gtkx/utils\";\nimport { useLayoutEffect, useRef } from \"react\";\nimport type { CellSize } from \"./internal/cells.js\";\nimport type { Collection } from \"./internal/collection.js\";\nimport type { Column, ColumnViewProps } from \"./types.js\";\nimport { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortProps = {\n    sortColumn?: string | null | undefined;\n    sortOrder?: Gtk.SortType | null | undefined;\n    onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;\n};\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn | null };\n\ntype ColumnCellsProps = {\n    column: Column<never>;\n    collection: Collection;\n    expandedIds: string[] | null | undefined;\n    size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\"> & {\n    columns: Column<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n    \"items\",\n    \"sections\",\n    \"renderHeader\",\n    \"columns\",\n    \"selectedIds\",\n    \"onSelectionChanged\",\n    \"selectionMode\",\n    \"expandedIds\",\n    \"onExpandedChange\",\n    \"sortColumn\",\n    \"sortOrder\",\n    \"onSortChanged\",\n    \"estimatedItemHeight\",\n    \"children\",\n    \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst columnById = (view: Gtk.ColumnView, id: string): Gtk.ColumnViewColumn | null => {\n    const columns = view.getColumns();\n\n    for (let index = 0; index < columns.getNItems(); index++) {\n        const column = columns.getItem(index);\n\n        if (column instanceof Gtk.ColumnViewColumn && column.getId() === id) {\n            return column;\n        }\n    }\n\n    return null;\n};\n\nconst getSortTarget = (view: Gtk.ColumnView | null, sortColumn: string | null | undefined): SortTarget | null => {\n    if (view === null || sortColumn === undefined) {\n        return null;\n    }\n\n    if (sortColumn === null) {\n        return { view, column: null };\n    }\n\n    const column = columnById(view, sortColumn);\n\n    return column === null ? null : { view, column };\n};\n\nconst applySort = (\n    sorting: { current: boolean },\n    view: Gtk.ColumnView,\n    column: Gtk.ColumnViewColumn | null,\n    order: Gtk.SortType | null | undefined,\n): void => {\n    sorting.current = true;\n\n    try {\n        view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);\n    } finally {\n        sorting.current = false;\n    }\n};\n\nconst emitSortChanged = (\n    sorter: Gtk.ColumnViewSorter | null,\n    sorting: { current: boolean },\n    sort: SortProps,\n): void => {\n    if (sorter === null || sorting.current) {\n        return;\n    }\n\n    sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());\n};\n\nconst syncSort = (\n    sorting: { current: boolean },\n    view: Gtk.ColumnView | null,\n    sortColumn: string | null | undefined,\n    sortOrder: Gtk.SortType | null | undefined,\n): void => {\n    const target = getSortTarget(view, sortColumn);\n\n    if (target === null) {\n        return;\n    }\n\n    applySort(sorting, target.view, target.column, sortOrder);\n};\n\nconst useColumnSorting = (view: Gtk.ColumnView | null, sort: SortProps, columns: Column<never>[]): void => {\n    const sorting = useRef(false);\n    const sorter = useProperty(view, \"sorter\");\n    const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;\n\n    useSignal(columnSorter, \"changed\", (): void => {\n        emitSortChanged(columnSorter, sorting, sort);\n    });\n\n    const { sortColumn, sortOrder } = sort;\n\n    useLayoutEffect(() => {\n        syncSort(sorting, view, sortColumn, sortOrder);\n    }, [view, sortColumn, sortOrder, columns]);\n};\n\nconst ColumnCells = ({ column, collection, expandedIds, size }: ColumnCellsProps): ReactNode => {\n    const cells = useItemCells(size);\n    const rest = omit(column, [\"id\", \"renderCell\", \"sortable\"]);\n\n    return (\n        <>\n            <GtkColumnViewColumn\n                id={column.id}\n                factory={<GtkSignalListItemFactory {...cells.handlers} />}\n                sorter={column.sortable === true ? <GtkCustomSorter /> : null}\n                {...rest}\n            />\n            <ItemPortals\n                store={cells}\n                render={column.renderCell}\n                collection={collection}\n                expandedIds={expandedIds}\n            />\n        </>\n    );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, size }: ColumnListProps): ReactNode =>\n    columns.map((column) => (\n        <ColumnCells\n            key={column.id}\n            column={column}\n            collection={collection}\n            expandedIds={expandedIds}\n            size={size}\n        />\n    ));\n\n/**\n * Renders a Gtk.ColumnView from declarative items or sections and a columns array,\n * with controlled selection, expansion, and sorting, per-column header menus, and\n * section header rendering.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n    const { renderHeader, columns, expandedIds, sortColumn, sortOrder, onSortChanged, estimatedItemHeight, ref } =\n        props;\n\n    const rest = omit(props, COLUMN_VIEW_PROPS);\n    const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n    const size = { width: -1, height: estimatedItemHeight ?? -1 };\n    const { collection, selection } = useCollection(props);\n    const headerCells = useHeaderCells(size);\n    const columnList = columns as Column<never>[];\n    useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n    return (\n        <>\n            <GtkColumnView\n                ref={refCallback}\n                model={selection}\n                {...(renderHeader != null && {\n                    headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} />,\n                })}\n                {...rest}\n            >\n                <ColumnList columns={columnList} collection={collection} expandedIds={expandedIds} size={size} />\n            </GtkColumnView>\n            {renderHeader != null && (\n                <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />\n            )}\n        </>\n    );\n}\n\nexport { ColumnView };\n"]}

package/dist/drop-down.d.ts

@@ -1,41 +1,12 @@
-import type * as Gio from "@gtkx/gi/gio";
-import type * as Gtk from "@gtkx/gi/gtk";
-import { type AdwComboRowProps } from "@gtkx/jsx/adw";
-import { type GtkDropDownProps } from "@gtkx/jsx/gtk";
-import { type ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
+import { GtkDropDown } from "@gtkx/jsx/gtk";
 import type { DropDownProps } from "./types.js";
-export interface DropDownWidget extends Gtk.Widget {
-    getSelected(): number;
-    setSelected(position: number): void;
-    setModel(model: Gio.ListModel | null): void;
-    setFactory(factory: Gtk.ListItemFactory | null): void;
-    setListFactory(factory: Gtk.ListItemFactory | null): void;
-    setHeaderFactory(factory: Gtk.ListItemFactory | null): void;
-}
+type DropDownComponent = <T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown>(props: DropDownProps<T, S, C>) => ReactNode;
 /**
- * Props for the {@link DropDown} component: the raw `GtkDropDown` element
- * surface with its factory/model wiring replaced by the declarative
- * {@link DropDownProps} API.
+ * Renders a drop-down backed by a collection model, with customizable renderers for the
+ * collapsed display, popup rows, and popup section headers, and controlled selection.
+ * The backing widget defaults to GtkDropDown and is swappable through `component`.
  */
-export type DropDownComponentProps<T = unknown, S = unknown> = Omit<GtkDropDownProps, keyof DropDownProps<T, S>> & DropDownProps<T, S>;
-/**
- * Props for the {@link ComboRow} component: the raw `AdwComboRow` element
- * surface with its factory/model wiring replaced by the declarative
- * {@link DropDownProps} API.
- */
-export type ComboRowComponentProps<T = unknown, S = unknown> = Omit<AdwComboRowProps, keyof DropDownProps<T, S>> & DropDownProps<T, S>;
-/**
- * A `GtkDropDown` driven by a declarative `items` model with a controlled
- * `selectedId` and per-slot renderers for the selected face, the popup list,
- * and section headers. Supplying an external `model` switches to the
- * uncontrolled form.
- */
-export declare const DropDown: <T = unknown, S = unknown>(props: DropDownComponentProps<T, S>) => ReactNode;
-/**
- * An `AdwComboRow` driven by a declarative `items` model with a controlled
- * `selectedId` and per-slot renderers for the selected face, the popup list,
- * and section headers. Supplying an external `model` switches to the
- * uncontrolled form.
- */
-export declare const ComboRow: <T = unknown, S = unknown>(props: ComboRowComponentProps<T, S>) => ReactNode;
+declare const DropDown: DropDownComponent;
+export { DropDown };
 //# sourceMappingURL=drop-down.d.ts.map

package/dist/drop-down.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drop-down.d.ts","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,GAAG,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,KAAK,GAAG,MAAM,cAAc,CAAC;AACzC,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAe,KAAK,gBAAgB,EAAY,MAAM,eAAe,CAAC;AAE7E,OAAO,EAIH,KAAK,SAAS,EAKjB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,YAAY,CAAC;AAI1D,MAAM,WAAW,cAAe,SAAQ,GAAG,CAAC,MAAM;IAC9C,WAAW,IAAI,MAAM,CAAC;IACtB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;IACtD,cAAc,CAAC,OAAO,EAAE,GAAG,CAAC,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1D,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;CAC/D;AA6LD;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,IAAI,IAAI,CAAC,gBAAgB,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAC5G,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAExB;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,IAAI,IAAI,CAAC,gBAAgB,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAC5G,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAExB;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,OAAO,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAG,SAGxF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,OAAO,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,KAAG,SAGxF,CAAC"}
+{"version":3,"file":"drop-down.d.ts","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,WAAW,EAAsC,MAAM,eAAe,CAAC;AAKhF,OAAO,KAAK,EAAE,aAAa,EAAgC,MAAM,YAAY,CAAC;AAwB9E,KAAK,iBAAiB,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,SAAS,WAAW,GAAG,OAAO,WAAW,EAC1F,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAC5B,SAAS,CAAC;AAcf;;;;GAIG;AACH,QAAA,MAAM,QAAQ,EAAE,iBAAqD,CAAC;AAwJtE,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/drop-down.js

@@ -1,129 +1,120 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AdwComboRow } from "@gtkx/jsx/adw";
-import { GtkDropDown, GtkLabel } from "@gtkx/jsx/gtk";
-import { useForwardedRef } from "@gtkx/react";
-import { createElement, useCallback, useRef, useState, } from "react";
-import { useDropDownSelection } from "./hooks/use-drop-down-selection.js";
-import { useListModel } from "./hooks/use-list-model.js";
-import { useModelInstallation } from "./hooks/use-model-installation.js";
-import { useRealizedSlots } from "./hooks/use-realized-slots.js";
-import { ListPortalHost } from "./list-portal-host.js";
-const itemFactoryBinding = {
-    install: (widget, factory) => widget.setFactory(factory),
-    uninstall: (widget) => widget.setFactory(null),
-};
-const listFactoryBinding = {
-    install: (widget, factory) => widget.setListFactory(factory),
-    uninstall: (widget) => widget.setListFactory(null),
+import { GtkDropDown, GtkLabel, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import { useSignal } from "@gtkx/react";
+import { omit } from "@gtkx/utils";
+import { useEffectEvent, useLayoutEffect, useRef } from "react";
+import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./internal/cells.js";
+import { useCollectionData } from "./internal/use-collection.js";
+import { useWidgetRef } from "./internal/use-widget-ref.js";
+const DROP_DOWN_PROPS = [
+    "component",
+    "items",
+    "sections",
+    "selectedId",
+    "onSelectionChanged",
+    "renderItem",
+    "renderListItem",
+    "renderHeader",
+    "ref",
+];
+/**
+ * Renders a drop-down backed by a collection model, with customizable renderers for the
+ * collapsed display, popup rows, and popup section headers, and controlled selection.
+ * The backing widget defaults to GtkDropDown and is swappable through `component`.
+ */
+const DropDown = DropDownImpl;
+const describeValue = (value) => {
+    if (typeof value === "string") {
+        return value;
+    }
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
 };
-const headerFactoryBinding = {
-    install: (widget, factory) => widget.setHeaderFactory(factory),
-    uninstall: (widget) => widget.setHeaderFactory(null),
+const defaultItemContent = (value) => value == null ? null : _jsx(GtkLabel, { children: describeValue(value) });
+const defaultRenderItem = ({ item }) => defaultItemContent(item);
+const faceRenderer = (props) => props.renderItem ?? defaultRenderItem;
+const listRenderer = (props) => props.renderListItem ?? props.renderItem ?? defaultRenderItem;
+const resolvePosition = (widget, collection, selectedId) => {
+    const requested = selectedId == null ? -1 : collection.positionFor(selectedId);
+    return requested >= 0 ? requested : widget.getSelected();
 };
-const defaultRenderer = (value, _treeRow, isHeader) => {
-    if (isHeader || value === undefined || value === null)
-        return null;
-    return createElement(GtkLabel, { label: String(value) });
+const updateKnownSelection = (tracker, effectiveId, selectedId) => {
+    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 toItemRenderer = (renderItem) => {
-    if (typeof renderItem !== "function")
-        return defaultRenderer;
-    return (value, _treeRow, isHeader) => (isHeader ? null : renderItem(value));
+const reportKnownSelection = (tracker, id) => {
+    const { known, onSelectionChanged } = tracker;
+    if (id === null || id === known.current) {
+        return;
+    }
+    known.current = id;
+    onSelectionChanged?.(id);
 };
-const toPopupRenderer = (renderListItem, renderItem) => {
-    if (typeof renderListItem === "function")
-        return (value, _treeRow, isHeader) => (isHeader ? null : renderListItem(value));
-    return toItemRenderer(renderItem);
+const reportSelectedNotify = (options, tracker, applying) => {
+    const { widget, collection } = options;
+    if (widget === null || applying.current) {
+        return;
+    }
+    reportKnownSelection(tracker, collection.idAt(widget.getSelected()));
 };
-const toHeaderRenderer = (renderHeader) => {
-    if (typeof renderHeader !== "function")
-        return () => null;
-    return (value) => renderHeader(value);
+const applySelectedPosition = (widget, position, applying) => {
+    applying.current = true;
+    try {
+        widget.selected = position;
+    }
+    finally {
+        applying.current = false;
+    }
 };
-const createFaceResolver = (resolver, selectedPosition) => ({
-    count: resolver.count,
-    positionOf: (id) => resolver.positionOf(id),
-    idOf: (position) => resolver.idOf(position),
-    resolve: (_position, treeRow) => resolver.resolve(selectedPosition, treeRow, null),
-});
-const useDropDownWiring = (props) => {
-    const widgetRef = useRef(null);
-    const [widget, setWidget] = useState(null);
-    const captureWidget = useCallback((value) => {
-        widgetRef.current = value;
-        setWidget(value);
-    }, []);
-    const [, setRef] = useForwardedRef(props.ref, captureWidget);
-    const externalModel = props.model;
-    const listModel = useListModel(externalModel === undefined ? { items: props.items ?? undefined } : { model: externalModel });
-    const useHeader = externalModel === undefined && typeof props.renderHeader === "function";
-    const face = useRealizedSlots({ target: widgetRef, binding: itemFactoryBinding });
-    const popup = useRealizedSlots({ target: widgetRef, binding: listFactoryBinding });
-    const header = useRealizedSlots({
-        target: useHeader ? widgetRef : null,
-        binding: headerFactoryBinding,
+const useDropDownSelection = (options) => {
+    const { widget, collection, applying } = options;
+    const { selectedId } = options.props;
+    const known = useRef(null);
+    const syncKnownSelection = useEffectEvent((position) => {
+        const effectiveId = collection.idAt(position);
+        if (effectiveId === null) {
+            known.current = null;
+            return;
+        }
+        const { onSelectionChanged } = options.props;
+        updateKnownSelection({ known, onSelectionChanged }, effectiveId, selectedId);
     });
-    useModelInstallation(widgetRef, listModel.model, (widget, model) => widget.setModel(model));
-    const selectedPosition = useDropDownSelection({
-        widget,
-        resolver: listModel.resolver,
-        selectedId: props.selectedId,
-        onSelectionChanged: props.onSelectionChanged,
+    useLayoutEffect(() => {
+        if (widget === null) {
+            return;
+        }
+        const position = resolvePosition(widget, collection, selectedId);
+        applySelectedPosition(widget, position, applying);
+        syncKnownSelection(position);
+    }, [widget, collection, selectedId, applying]);
+    useSignal(widget, "notify::selected", () => {
+        reportSelectedNotify(options, { known, onSelectionChanged: options.props.onSelectionChanged }, applying);
     });
-    const controlledPosition = props.selectedId === undefined || props.selectedId === null
-        ? -1
-        : listModel.resolver.positionOf(props.selectedId);
-    const facePosition = controlledPosition >= 0 ? controlledPosition : selectedPosition < 0 ? 0 : selectedPosition;
-    return {
-        setRef,
-        resolver: listModel.resolver,
-        faceResolver: createFaceResolver(listModel.resolver, facePosition),
-        headerResolver: listModel.headerResolver,
-        faceStore: face.store,
-        popupStore: popup.store,
-        headerStore: header.store,
-        useHeader,
-    };
-};
-const DropDownImpl = (props) => {
-    const { setRef, resolver, faceResolver, headerResolver, faceStore, popupStore, headerStore, useHeader } = useDropDownWiring(props);
-    const intrinsic = createElement(props.element, { ...props.intrinsicProps, ref: setRef });
-    return (_jsxs(_Fragment, { children: [intrinsic, _jsx(ListPortalHost, { store: faceStore, resolver: faceResolver, render: toItemRenderer(props.renderItem) }), _jsx(ListPortalHost, { store: popupStore, resolver: resolver, render: toPopupRenderer(props.renderListItem, props.renderItem) }), useHeader ? (_jsx(ListPortalHost, { store: headerStore, resolver: headerResolver, render: toHeaderRenderer(props.renderHeader) })) : null] }));
-};
-const extractDropDownProps = (props) => {
-    const { ref, items, model, renderItem, renderListItem, renderHeader, selectedId, onSelectionChanged, ...intrinsicProps } = props;
-    return {
-        impl: {
-            ref,
-            items: items,
-            model: model,
-            renderItem: renderItem,
-            renderListItem: renderListItem,
-            renderHeader: renderHeader,
-            selectedId: selectedId,
-            onSelectionChanged: onSelectionChanged,
-        },
-        intrinsicProps: intrinsicProps,
-    };
-};
-/**
- * A `GtkDropDown` driven by a declarative `items` model with a controlled
- * `selectedId` and per-slot renderers for the selected face, the popup list,
- * and section headers. Supplying an external `model` switches to the
- * uncontrolled form.
- */
-export const DropDown = (props) => {
-    const { impl, intrinsicProps } = extractDropDownProps(props);
-    return _jsx(DropDownImpl, { element: GtkDropDown, intrinsicProps: intrinsicProps, ...impl });
-};
-/**
- * An `AdwComboRow` driven by a declarative `items` model with a controlled
- * `selectedId` and per-slot renderers for the selected face, the popup list,
- * and section headers. Supplying an external `model` switches to the
- * uncontrolled form.
- */
-export const ComboRow = (props) => {
-    const { impl, intrinsicProps } = extractDropDownProps(props);
-    return _jsx(DropDownImpl, { element: AdwComboRow, intrinsicProps: intrinsicProps, ...impl });
 };
+function DropDownImpl(props) {
+    const { component, items, sections, renderListItem, renderHeader, ref } = props;
+    const rest = omit(props, DROP_DOWN_PROPS);
+    const [widget, refCallback] = useWidgetRef(ref);
+    const applying = useRef(false);
+    const collection = useCollectionData({ items, sections, applying });
+    const faceCells = useItemCells({ width: -1, height: -1 });
+    const listCells = useItemCells({ width: -1, height: -1 });
+    const headerCells = useHeaderCells({ width: -1, height: -1 });
+    useDropDownSelection({ widget, collection, applying, props });
+    const Component = component ?? GtkDropDown;
+    const hasHeader = typeof renderHeader === "function";
+    return (_jsxs(_Fragment, { children: [_jsx(Component, { ref: refCallback, model: collection.model, factory: _jsx(GtkSignalListItemFactory, { ...faceCells.handlers }), ...(renderListItem != null && {
+                    listFactory: _jsx(GtkSignalListItemFactory, { ...listCells.handlers }),
+                }), ...(hasHeader && { headerFactory: _jsx(GtkSignalListItemFactory, { ...headerCells.handlers }) }), ...rest }), _jsx(ItemPortals, { store: faceCells, render: faceRenderer(props), collection: collection }), renderListItem != null && (_jsx(ItemPortals, { store: listCells, render: listRenderer(props), collection: collection })), hasHeader && _jsx(HeaderPortals, { store: headerCells, render: renderHeader, collection: collection })] }));
+}
+export { DropDown };
 //# sourceMappingURL=drop-down.js.map