@gtkx/components 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAySA,OAAO,EAwBN,CAAC","sourcesContent":["import type * as Adw from \"@gtkx/gi/adw\";\nimport type * as Gtk from \"@gtkx/gi/gtk\";\nimport type { AdwComboRowProps, AdwToastProps } from \"@gtkx/jsx/adw\";\nimport type {\n    GtkColumnViewColumnProps,\n    GtkColumnViewProps,\n    GtkDropDownProps,\n    GtkGridViewProps,\n    GtkListViewProps,\n} from \"@gtkx/jsx/gtk\";\nimport type { ReactNode, RefObject } from \"react\";\n\n/**\n * A single item in a collection model, identified by a stable id and holding an\n * arbitrary value. Nested items form a tree.\n */\ntype ListItem<T = unknown> = {\n    /** Stable identifier used to track the item across updates and selection, naming every row that carries it. */\n    id: string;\n    /** Payload handed to the cell renderer as `ListItemRenderArgs.item`. */\n    value: T;\n    /** Child items nested under this one, which turn a plain item list into a tree, read only as rows are drawn. */\n    children?: ListItem<T>[] | undefined;\n    /** Hides the tree expander arrow even when the item has children, through `hide-expander`. */\n    shouldHideExpander?: boolean | undefined;\n    /** Adds indentation matching the item's depth in the tree, through `indent-for-depth`. */\n    shouldIndentForDepth?: boolean | undefined;\n    /** Reserves indentation space for an expander icon, through `indent-for-icon`. */\n    shouldIndentForIcon?: boolean | undefined;\n};\n\n/** A group of items rendered under a shared section header. */\ntype ListSection<S = unknown, T = unknown> = {\n    /** Stable identifier used to track the section across updates. */\n    id: string;\n    /** Payload handed to the section header renderer as `ListSectionRenderArgs.section`. */\n    value: S;\n    /** Items belonging to this section. */\n    data: ListItem<T>[];\n};\n\n/** Arguments passed to a {@link ListItemRenderer} when rendering one cell. */\ntype ListItemRenderArgs<T> = {\n    /** Value of the `ListItem` being rendered. */\n    item: T;\n    /** Position of the item in the flattened item list, which excludes section headers and collapsed tree rows. */\n    index: number;\n    /** Depth of the item within a tree, starting at zero for top-level items. */\n    depth?: number | undefined;\n    /** Whether the item is currently expanded in a tree view. */\n    isExpanded?: boolean | undefined;\n};\n\n/**\n * Properties applied to the row that carries one item's cells. A Gtk.ColumnViewRow is not a widget, so\n * these are the only handles it offers; anything omitted falls back to the row's own default, which\n * leaves the accessibility strings unset rather than setting them to an empty string.\n */\ntype ListRowProps = {\n    /** Name a screen reader announces for the row, through `accessible-label`. */\n    accessibleLabel?: string | undefined;\n    /** Longer description a screen reader announces for the row, through `accessible-description`. */\n    accessibleDescription?: string | undefined;\n    /** Whether activating the row emits the view's `activate` signal; rows are activatable by default. */\n    isActivatable?: boolean | undefined;\n    /** Whether the row takes keyboard focus; rows are focusable by default. */\n    isFocusable?: boolean | undefined;\n    /** Whether clicking or keying the row tries to select it; rows are selectable by default. */\n    isSelectable?: boolean | undefined;\n};\n\n/** Arguments passed to a {@link ListSectionRenderer} when rendering one section header. */\ntype ListSectionRenderArgs<S> = {\n    /** Value of the `ListSection` whose header is being rendered. */\n    section: S;\n};\n\n/** Renders the contents of one cell of a collection view. */\ntype ListItemRenderer<T> = (args: ListItemRenderArgs<T>) => ReactNode;\n/** Renders the contents of one section header of a collection view. */\ntype ListSectionRenderer<S> = (args: ListSectionRenderArgs<S>) => ReactNode;\n/** Returns the {@link ListRowProps} to apply to the row displaying one item, re-run whenever the item renders. */\ntype ListRowPropsResolver<T> = (args: ListItemRenderArgs<T>) => ListRowProps;\n\n/** Size a collection view requests for each cell before its contents render, keeping scroll estimates steady. */\ntype ItemSizeProps = {\n    /** Height in pixels every cell asks for until its contents render; unset lets each cell size itself. */\n    estimatedItemHeight?: number | undefined;\n    /** Width in pixels every cell asks for until its contents render; unset lets each cell size itself. */\n    estimatedItemWidth?: number | undefined;\n};\n\n/** Controlled selection shared by the multi-item collection views. */\ntype SelectionProps = {\n    /**\n     * Ids of the items to keep selected; omitting it keeps nothing selected, and `onSelectionChanged` is how a\n     * user's selection is adopted into it. An id repeated in several branches of a tree names every matching row,\n     * and a single-selection view takes the first of them.\n     */\n    selectedIds?: string[] | null | undefined;\n    /** Called with one id per selected row whenever the selection changes, and once on mount. */\n    onSelectionChanged?: ((ids: string[]) => void) | null | undefined;\n    /** How much the user may select, one item at a time unless `MULTIPLE` or `NONE` is given. */\n    selectionMode?: Gtk.SelectionMode | null | undefined;\n};\n\n/**\n * Wording a screen reader announces for the control that expands and collapses a row. GTK names that control\n * after the row's own content and reports whether it is expanded, but says nothing about what activating it\n * does, so these strings supply that and belong in the application's own language.\n */\ntype ExpanderDescriptions = {\n    /** Announced while the row is collapsed, such as \"Expand\". */\n    expand: string;\n    /** Announced while the row is expanded, such as \"Collapse\". */\n    collapse: string;\n};\n\n/** Controlled expansion for the views that turn nested `ListItem.children` into a tree. */\ntype ExpansionProps = {\n    /**\n     * Ids of the items to keep expanded; omitting it keeps every row collapsed, and `onExpandedChange` is how a\n     * user's expansion is adopted into it. An id repeated in several branches names every matching row, so all of\n     * them expand together. An item whose children lead back to itself expands one level at a time, since a row\n     * repeating an item already expanded above it stays collapsed.\n     */\n    expandedIds?: string[] | null | undefined;\n    /** Called with one id per expanded row, in visible order, whenever expansion changes. */\n    onExpandedChange?: ((ids: string[]) => void) | null | undefined;\n    /**\n     * Wording announced for the expander of every row that can expand, describing what activating it does.\n     * Omitting it leaves those expanders described only by the row they carry, and rows that cannot expand or\n     * that hide their expander are never described.\n     */\n    expanderDescriptions?: ExpanderDescriptions | null | undefined;\n};\n\n/** Controlled sorting for the views whose headers can sort the collection. */\ntype SortProps = {\n    /** Id of the column the view is sorted by, making sorting controlled. */\n    sortColumn?: string | null | undefined;\n    /** Direction `sortColumn` is sorted in, defaulting to ascending. */\n    sortOrder?: Gtk.SortType | null | undefined;\n    /** Called when the user sorts from a header, with the primary column's id, or null, and its order. */\n    onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;\n};\n\n/** The data a collection view renders, either as a plain item list or grouped into sections. */\ntype SourceProps<T, S> = {\n    /** Items to render, nesting through `ListItem.children` for a tree; ignored once `sections` is given. */\n    items?: ListItem<T>[] | undefined;\n    /** Items grouped under section headers, rendered in place of `items`. */\n    sections?: ListSection<S, T>[] | undefined;\n};\n\n/** One column of a {@link ColumnView}, pairing Gtk.ColumnViewColumn props with a cell renderer. */\ntype ColumnViewColumn<T = unknown> = Omit<GtkColumnViewColumnProps, \"factory\" | \"sorter\" | \"id\" | \"title\"> & {\n    /** Stable identifier, also used to address the column through sorting props. */\n    id: string;\n    /** Text shown in the column header. */\n    title: string;\n    /** Renders the contents of this column's cell for one item. */\n    renderCell: ListItemRenderer<T>;\n    /** Makes the column header clickable, reporting the choice through `onSortChanged`. */\n    isSortable?: boolean | undefined;\n    /** Menu element popped up as the column header's context menu, on a right-click. */\n    headerMenu?: ReactNode;\n};\n\n/** The declarative collection props {@link ColumnView} adds on top of Gtk.ColumnView's own. */\ntype ColumnViewOwnProps<T, S> = SelectionProps &\n    ExpansionProps &\n    SortProps &\n    SourceProps<T, S> &\n    Omit<ItemSizeProps, \"estimatedItemWidth\"> & {\n        /** Columns to render, in order; each carries its own cell renderer. */\n        columns: ColumnViewColumn<T>[];\n        /** Renders the header shown above each section. */\n        renderHeader?: ListSectionRenderer<S> | null | undefined;\n        /** Resolves the props of the row carrying one item's cells, such as its screen-reader label. */\n        rowProps?: ListRowPropsResolver<T> | null | undefined;\n    };\n\n/**\n * Props for {@link ColumnView}. Combines the underlying Gtk.ColumnView props with\n * declarative collection props: flat items or grouped sections, controlled selection\n * and expansion, sorting (sortColumn, sortOrder, onSortChanged), an optional section\n * header renderer, per-row props, and the columns to render.\n */\ntype ColumnViewProps<T = unknown, S = unknown> = Omit<\n    GtkColumnViewProps,\n    \"columns\" | \"model\" | \"headerFactory\" | \"rowFactory\" | keyof ColumnViewOwnProps<T, S>\n> &\nColumnViewOwnProps<T, S>;\n\n/** The declarative collection props {@link DropDown} and `ComboRow` add on top of their widget's own. */\ntype DropDownOwnProps<T, S> = SourceProps<T, S> & {\n    /** Id of the currently selected item, making the selection controlled. */\n    selectedId?: string | null | undefined;\n    /** Called with the id of the item that became selected. */\n    onSelectionChanged?: ((id: string) => void) | null | undefined;\n    /** Renders the collapsed display, and the popup rows too unless `renderListItem` is given. */\n    renderItem?: ListItemRenderer<T> | null | undefined;\n    /** Renderer for items in the open popup list, falling back to renderItem when omitted. */\n    renderListItem?: ListItemRenderer<T> | null | undefined;\n    /** Renderer for section headers in the popup list. */\n    renderHeader?: ListSectionRenderer<S> | null | undefined;\n};\n\n/** A drop-down-shaped widget's props with its model and factories swapped for the declarative collection props. */\ntype DropDownWidgetProps<Widget, T, S> = Omit<\n    Widget,\n    \"model\" | \"factory\" | \"listFactory\" | \"headerFactory\" | keyof DropDownOwnProps<T, S>\n> &\nDropDownOwnProps<T, S>;\n\n/**\n * Props for {@link DropDown}. Combines the underlying Gtk.DropDown props with the declarative\n * collection props: flat items or grouped sections, controlled single selection, and renderers\n * for the collapsed display, popup rows, and popup section headers.\n */\ntype DropDownProps<T = unknown, S = unknown> = DropDownWidgetProps<GtkDropDownProps, T, S>;\n\n/** The declarative collection props {@link GridView} adds on top of Gtk.GridView's own. */\ntype GridViewOwnProps<T> = ItemSizeProps &\n    SelectionProps & {\n        /** Items to render as cells; a grid is always flat, so `ListItem.children` is ignored. */\n        items?: ListItem<T>[] | undefined;\n        /** Renders the contents of one cell. */\n        renderItem: ListItemRenderer<T>;\n    };\n\n/**\n * Props for {@link GridView}. Combines the underlying Gtk.GridView props with\n * declarative collection props: items, a per-cell renderItem, controlled selection,\n * and estimated item sizing.\n */\ntype GridViewProps<T = unknown> = Omit<GtkGridViewProps, \"model\" | \"factory\" | keyof GridViewOwnProps<T>> &\n    GridViewOwnProps<T>;\n\n/** The declarative collection props {@link ListView} adds on top of Gtk.ListView's own. */\ntype ListViewOwnProps<T, S> = ItemSizeProps &\n    SelectionProps &\n    ExpansionProps &\n    SourceProps<T, S> & {\n        /** Renders the contents of one row. */\n        renderItem: ListItemRenderer<T>;\n        /** Renders the header shown above each section. */\n        renderHeader?: ListSectionRenderer<S> | null | undefined;\n    };\n\n/**\n * Props for {@link ListView}. Combines the underlying Gtk.ListView props with\n * declarative collection props: flat items or grouped sections, a per-row renderItem,\n * an optional section header renderer, controlled selection and expansion, and\n * estimated item sizing.\n */\ntype ListViewProps<T = unknown, S = unknown> = Omit<\n    GtkListViewProps,\n    \"model\" | \"factory\" | \"headerFactory\" | keyof ListViewOwnProps<T, S>\n> &\nListViewOwnProps<T, S>;\n\n/**\n * Props for {@link ComboRow}. Combines the underlying Adw.ComboRow props with the declarative\n * collection props: flat items or grouped sections, controlled single selection, and renderers\n * for the row display, popup rows, and popup section headers.\n */\ntype ComboRowProps<T = unknown, S = unknown> = DropDownWidgetProps<AdwComboRowProps, T, S>;\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 `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    /** Subtree whose `useToast` and `useToastOverlay` calls target that overlay. */\n    children?: ReactNode | undefined;\n};\n\nexport {\n    type SelectionProps,\n    type ExpanderDescriptions,\n    type ExpansionProps,\n    type SortProps,\n    type DropDownOwnProps,\n    type ListItem,\n    type ListSection,\n    type ListItemRenderArgs,\n    type ListRowProps,\n    type ListSectionRenderArgs,\n    type ListItemRenderer,\n    type ListRowPropsResolver,\n    type ListSectionRenderer,\n    type ColumnViewColumn,\n    type ColumnViewProps,\n    type DropDownProps,\n    type GridViewProps,\n    type ListViewProps,\n    type ComboRowProps,\n    type ToastOptions,\n    type ToastController,\n    type ToastOverlayController,\n    type ToastProviderProps,\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAqTA,OAAO,EAwBN,CAAC","sourcesContent":["import type * as Adw from \"@gtkx/gi/adw\";\nimport type * as Gtk from \"@gtkx/gi/gtk\";\nimport type { AdwComboRowProps, AdwToastProps } from \"@gtkx/jsx/adw\";\nimport type {\n    GtkColumnViewColumnProps,\n    GtkColumnViewProps,\n    GtkDropDownProps,\n    GtkGridViewProps,\n    GtkListViewProps,\n} from \"@gtkx/jsx/gtk\";\nimport type { ReactNode, RefObject } from \"react\";\n\n/**\n * A single item in a collection model, identified by a stable id and holding an\n * arbitrary value. Nested items form a tree.\n */\ntype ListItem<T = unknown> = {\n    /** Stable identifier used to track the item across updates and selection, naming every row that carries it. */\n    id: string;\n    /** Payload handed to the cell renderer as `ListItemRenderArgs.item`. */\n    value: T;\n    /** Child items nested under this one, which turn a plain item list into a tree, read only as rows are drawn. */\n    children?: ListItem<T>[] | undefined;\n    /** Hides the tree expander arrow even when the item has children, through `hide-expander`. */\n    shouldHideExpander?: boolean | undefined;\n    /** Adds indentation matching the item's depth in the tree, through `indent-for-depth`. */\n    shouldIndentForDepth?: boolean | undefined;\n    /** Reserves indentation space for an expander icon, through `indent-for-icon`. */\n    shouldIndentForIcon?: boolean | undefined;\n};\n\n/** A group of items rendered under a shared section header. */\ntype ListSection<S = unknown, T = unknown> = {\n    /** Stable identifier used to track the section across updates. */\n    id: string;\n    /** Payload handed to the section header renderer as `ListSectionRenderArgs.section`. */\n    value: S;\n    /** Items belonging to this section. */\n    data: ListItem<T>[];\n};\n\n/** Arguments passed to a {@link ListItemRenderer} when rendering one cell. */\ntype ListItemRenderArgs<T> = {\n    /** Value of the `ListItem` being rendered. */\n    item: T;\n    /** Position of the item in the flattened item list, which excludes section headers and collapsed tree rows. */\n    index: number;\n    /** Depth of the item within a tree, starting at zero for top-level items. */\n    depth?: number | undefined;\n    /** Whether the item is currently expanded in a tree view. */\n    isExpanded?: boolean | undefined;\n};\n\n/**\n * Properties applied to the row that carries one item's cells. A Gtk.ColumnViewRow is not a widget, so\n * these are the only handles it offers; anything omitted falls back to the row's own default, which\n * leaves the accessibility strings unset rather than setting them to an empty string.\n */\ntype ListRowProps = {\n    /** Name a screen reader announces for the row, through `accessible-label`. */\n    accessibleLabel?: string | undefined;\n    /** Longer description a screen reader announces for the row, through `accessible-description`. */\n    accessibleDescription?: string | undefined;\n    /** Whether activating the row emits the view's `activate` signal; rows are activatable by default. */\n    isActivatable?: boolean | undefined;\n    /** Whether the row takes keyboard focus; rows are focusable by default. */\n    isFocusable?: boolean | undefined;\n    /** Whether clicking or keying the row tries to select it; rows are selectable by default. */\n    isSelectable?: boolean | undefined;\n};\n\n/** Arguments passed to a {@link ListSectionRenderer} when rendering one section header. */\ntype ListSectionRenderArgs<S> = {\n    /** Value of the `ListSection` whose header is being rendered. */\n    section: S;\n};\n\n/** Renders the contents of one cell of a collection view. */\ntype ListItemRenderer<T> = (args: ListItemRenderArgs<T>) => ReactNode;\n/** Renders the contents of one section header of a collection view. */\ntype ListSectionRenderer<S> = (args: ListSectionRenderArgs<S>) => ReactNode;\n/** Returns the {@link ListRowProps} to apply to the row displaying one item, re-run whenever the item renders. */\ntype ListRowPropsResolver<T> = (args: ListItemRenderArgs<T>) => ListRowProps;\n\n/** Size a collection view requests for each cell before its contents render, keeping scroll estimates steady. */\ntype ItemSizeProps = {\n    /** Height in pixels every cell asks for until its contents render; unset lets each cell size itself. */\n    estimatedItemHeight?: number | undefined;\n    /** Width in pixels every cell asks for until its contents render; unset lets each cell size itself. */\n    estimatedItemWidth?: number | undefined;\n};\n\n/** The flat-collection hint shared by {@link ListView} and {@link ColumnView}. */\ntype FlatnessProps = {\n    /**\n     * Declares every item a leaf, so the view skips tree discovery when synchronising a large collection\n     * instead of scanning each item for `children`. Must not be set when any item has children: those\n     * items would render as plain rows that never expand.\n     */\n    isFlat?: boolean | undefined;\n};\n\n/** Controlled selection shared by the multi-item collection views. */\ntype SelectionProps = {\n    /**\n     * Ids of the items to keep selected; omitting it keeps nothing selected, and `onSelectionChanged` is how a\n     * user's selection is adopted into it. An id repeated in several branches of a tree names every matching row,\n     * and a single-selection view takes the first of them.\n     */\n    selectedIds?: string[] | null | undefined;\n    /** Called with one id per selected row whenever the selection changes, and once on mount. */\n    onSelectionChanged?: ((ids: string[]) => void) | null | undefined;\n    /** How much the user may select, one item at a time unless `MULTIPLE` or `NONE` is given. */\n    selectionMode?: Gtk.SelectionMode | null | undefined;\n};\n\n/**\n * Wording a screen reader announces for the control that expands and collapses a row. GTK names that control\n * after the row's own content and reports whether it is expanded, but says nothing about what activating it\n * does, so these strings supply that and belong in the application's own language.\n */\ntype ExpanderDescriptions = {\n    /** Announced while the row is collapsed, such as \"Expand\". */\n    expand: string;\n    /** Announced while the row is expanded, such as \"Collapse\". */\n    collapse: string;\n};\n\n/** Controlled expansion for the views that turn nested `ListItem.children` into a tree. */\ntype ExpansionProps = {\n    /**\n     * Ids of the items to keep expanded; omitting it keeps every row collapsed, and `onExpandedChange` is how a\n     * user's expansion is adopted into it. An id repeated in several branches names every matching row, so all of\n     * them expand together. An item whose children lead back to itself expands one level at a time, since a row\n     * repeating an item already expanded above it stays collapsed.\n     */\n    expandedIds?: string[] | null | undefined;\n    /** Called with one id per expanded row, in visible order, whenever expansion changes. */\n    onExpandedChange?: ((ids: string[]) => void) | null | undefined;\n    /**\n     * Wording announced for the expander of every row that can expand, describing what activating it does.\n     * Omitting it leaves those expanders described only by the row they carry, and rows that cannot expand or\n     * that hide their expander are never described.\n     */\n    expanderDescriptions?: ExpanderDescriptions | null | undefined;\n};\n\n/** Controlled sorting for the views whose headers can sort the collection. */\ntype SortProps = {\n    /** Id of the column the view is sorted by, making sorting controlled. */\n    sortColumn?: string | null | undefined;\n    /** Direction `sortColumn` is sorted in, defaulting to ascending. */\n    sortOrder?: Gtk.SortType | null | undefined;\n    /** Called when the user sorts from a header, with the primary column's id, or null, and its order. */\n    onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;\n};\n\n/** The data a collection view renders, either as a plain item list or grouped into sections. */\ntype SourceProps<T, S> = {\n    /** Items to render, nesting through `ListItem.children` for a tree; ignored once `sections` is given. */\n    items?: ListItem<T>[] | undefined;\n    /** Items grouped under section headers, rendered in place of `items`. */\n    sections?: ListSection<S, T>[] | undefined;\n};\n\n/** One column of a {@link ColumnView}, pairing Gtk.ColumnViewColumn props with a cell renderer. */\ntype ColumnViewColumn<T = unknown> = Omit<GtkColumnViewColumnProps, \"factory\" | \"sorter\" | \"id\" | \"title\"> & {\n    /** Stable identifier, also used to address the column through sorting props. */\n    id: string;\n    /** Text shown in the column header. */\n    title: string;\n    /** Renders the contents of this column's cell for one item. */\n    renderCell: ListItemRenderer<T>;\n    /** Makes the column header clickable, reporting the choice through `onSortChanged`. */\n    isSortable?: boolean | undefined;\n    /** Menu element popped up as the column header's context menu, on a right-click. */\n    headerMenu?: ReactNode;\n};\n\n/** The declarative collection props {@link ColumnView} adds on top of Gtk.ColumnView's own. */\ntype ColumnViewOwnProps<T, S> = SelectionProps &\n    ExpansionProps &\n    SortProps &\n    SourceProps<T, S> &\n    FlatnessProps &\n    Omit<ItemSizeProps, \"estimatedItemWidth\"> & {\n        /** Columns to render, in order; each carries its own cell renderer. */\n        columns: ColumnViewColumn<T>[];\n        /** Renders the header shown above each section. */\n        renderHeader?: ListSectionRenderer<S> | null | undefined;\n        /** Resolves the props of the row carrying one item's cells, such as its screen-reader label. */\n        rowProps?: ListRowPropsResolver<T> | null | undefined;\n    };\n\n/**\n * Props for {@link ColumnView}. Combines the underlying Gtk.ColumnView props with\n * declarative collection props: flat items or grouped sections, controlled selection\n * and expansion, sorting (sortColumn, sortOrder, onSortChanged), an optional section\n * header renderer, per-row props, and the columns to render.\n */\ntype ColumnViewProps<T = unknown, S = unknown> = Omit<\n    GtkColumnViewProps,\n    \"columns\" | \"model\" | \"headerFactory\" | \"rowFactory\" | keyof ColumnViewOwnProps<T, S>\n> &\nColumnViewOwnProps<T, S>;\n\n/** The declarative collection props {@link DropDown} and `ComboRow` add on top of their widget's own. */\ntype DropDownOwnProps<T, S> = SourceProps<T, S> & {\n    /** Id of the currently selected item, making the selection controlled. */\n    selectedId?: string | null | undefined;\n    /** Called with the id of the item that became selected. */\n    onSelectionChanged?: ((id: string) => void) | null | undefined;\n    /** Renders the collapsed display, and the popup rows too unless `renderListItem` is given. */\n    renderItem?: ListItemRenderer<T> | null | undefined;\n    /** Renderer for items in the open popup list, falling back to renderItem when omitted. */\n    renderListItem?: ListItemRenderer<T> | null | undefined;\n    /** Renderer for section headers in the popup list. */\n    renderHeader?: ListSectionRenderer<S> | null | undefined;\n};\n\n/** A drop-down-shaped widget's props with its model and factories swapped for the declarative collection props. */\ntype DropDownWidgetProps<Widget, T, S> = Omit<\n    Widget,\n    \"model\" | \"factory\" | \"listFactory\" | \"headerFactory\" | keyof DropDownOwnProps<T, S>\n> &\nDropDownOwnProps<T, S>;\n\n/**\n * Props for {@link DropDown}. Combines the underlying Gtk.DropDown props with the declarative\n * collection props: flat items or grouped sections, controlled single selection, and renderers\n * for the collapsed display, popup rows, and popup section headers.\n */\ntype DropDownProps<T = unknown, S = unknown> = DropDownWidgetProps<GtkDropDownProps, T, S>;\n\n/** The declarative collection props {@link GridView} adds on top of Gtk.GridView's own. */\ntype GridViewOwnProps<T> = ItemSizeProps &\n    SelectionProps & {\n        /** Items to render as cells; a grid is always flat, so `ListItem.children` is ignored. */\n        items?: ListItem<T>[] | undefined;\n        /** Renders the contents of one cell. */\n        renderItem: ListItemRenderer<T>;\n    };\n\n/**\n * Props for {@link GridView}. Combines the underlying Gtk.GridView props with\n * declarative collection props: items, a per-cell renderItem, controlled selection,\n * and estimated item sizing.\n */\ntype GridViewProps<T = unknown> = Omit<GtkGridViewProps, \"model\" | \"factory\" | keyof GridViewOwnProps<T>> &\n    GridViewOwnProps<T>;\n\n/** The declarative collection props {@link ListView} adds on top of Gtk.ListView's own. */\ntype ListViewOwnProps<T, S> = ItemSizeProps &\n    SelectionProps &\n    ExpansionProps &\n    SourceProps<T, S> &\n    FlatnessProps & {\n        /** Renders the contents of one row. */\n        renderItem: ListItemRenderer<T>;\n        /** Renders the header shown above each section. */\n        renderHeader?: ListSectionRenderer<S> | null | undefined;\n    };\n\n/**\n * Props for {@link ListView}. Combines the underlying Gtk.ListView props with\n * declarative collection props: flat items or grouped sections, a per-row renderItem,\n * an optional section header renderer, controlled selection and expansion, and\n * estimated item sizing.\n */\ntype ListViewProps<T = unknown, S = unknown> = Omit<\n    GtkListViewProps,\n    \"model\" | \"factory\" | \"headerFactory\" | keyof ListViewOwnProps<T, S>\n> &\nListViewOwnProps<T, S>;\n\n/**\n * Props for {@link ComboRow}. Combines the underlying Adw.ComboRow props with the declarative\n * collection props: flat items or grouped sections, controlled single selection, and renderers\n * for the row display, popup rows, and popup section headers.\n */\ntype ComboRowProps<T = unknown, S = unknown> = DropDownWidgetProps<AdwComboRowProps, T, S>;\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 `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    /** Subtree whose `useToast` and `useToastOverlay` calls target that overlay. */\n    children?: ReactNode | undefined;\n};\n\nexport {\n    type SelectionProps,\n    type ExpanderDescriptions,\n    type ExpansionProps,\n    type SortProps,\n    type DropDownOwnProps,\n    type ListItem,\n    type ListSection,\n    type ListItemRenderArgs,\n    type ListRowProps,\n    type ListSectionRenderArgs,\n    type ListItemRenderer,\n    type ListRowPropsResolver,\n    type ListSectionRenderer,\n    type ColumnViewColumn,\n    type ColumnViewProps,\n    type DropDownProps,\n    type GridViewProps,\n    type ListViewProps,\n    type ComboRowProps,\n    type ToastOptions,\n    type ToastController,\n    type ToastOverlayController,\n    type ToastProviderProps,\n};\n"]}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@gtkx/components",
-  "version": "2.0.0-beta.1",
-  "description": "High-level GTK components: collection views, menus, containers.",
+  "version": "2.0.0-beta.10",
+  "description": "Adwaita and GTK collection views, dropdowns, combo rows, and toasts.",
   "keywords": [
     "gtkx",
     "gtk",
     "gtk4",
     "adwaita",
+    "gnome",
     "react",
     "components",
     "linux",
@@ -52,18 +53,18 @@
     "node": ">=26.7.0"
   },
   "dependencies": {
-    "@gtkx/react": "2.0.0-beta.1",
-    "@gtkx/runtime": "2.0.0-beta.1",
-    "@gtkx/utils": "2.0.0-beta.1"
+    "@gtkx/react": "2.0.0-beta.10",
+    "@gtkx/runtime": "2.0.0-beta.10",
+    "@gtkx/utils": "2.0.0-beta.10"
   },
   "peerDependencies": {
     "react": "^19.2"
   },
   "devDependencies": {
-    "@gtkx/config": "2.0.0-beta.1",
-    "@gtkx/testing": "2.0.0-beta.1",
-    "@gtkx/vitest": "2.0.0-beta.1",
-    "vitest": "^4.1.11"
+    "@gtkx/config": "2.0.0-beta.10",
+    "@gtkx/testing": "2.0.0-beta.10",
+    "@gtkx/vitest": "2.0.0-beta.10",
+    "vitest": "^5.0.0"
   },
   "scripts": {
     "release": "tsx ../../scripts/release-package.ts"

package/src/column-view.tsx

@@ -29,6 +29,7 @@ type ColumnListProps = Omit<ColumnCellsProps, "column" | "hasExpander"> & {
 const COLUMN_VIEW_PROPS = [
     "items",
     "sections",
+    "isFlat",
     "renderHeader",
     "rowProps",
     "columns",

package/src/internal/cells.tsx

@@ -3,8 +3,8 @@ import type { ReactElement, ReactNode } from "react";
 import * as Gtk from "@gtkx/gi/gtk";
 import { GtkSignalListItemFactory, GtkTreeExpander } from "@gtkx/jsx/gtk";
 import { createPortal, useProperty } from "@gtkx/react";
-import { setObjectProperty, t } from "@gtkx/runtime";
-import { memo, useLayoutEffect, useState, useSyncExternalStore } from "react";
+import { setProperty, t } from "@gtkx/runtime";
+import { memo, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type {
     ExpanderDescriptions,
     ListItem,
@@ -34,6 +34,7 @@ type CellHost = FactoryHost & {
 type CellEntry<H extends FactoryHost> = {
     key: string;
     host: H;
+    identity: ItemIdentityStore;
 };
 
 type FactoryHandlers = {
@@ -88,14 +89,34 @@ type ItemSlot = {
     args: ListItemRenderArgs<unknown>;
 };
 
+type CollectionState = {
+    collection: Collection;
+    expandedIds: string[] | null | undefined;
+};
+
+type CollectionStateStore = {
+    read: () => CollectionState;
+    write: (state: CollectionState) => void;
+};
+
+type ItemIdentity = {
+    item: ListItem | undefined;
+    position: number;
+    isExpanded: boolean;
+};
+
+type ItemIdentityStore = {
+    read: () => ItemIdentity | null;
+    write: (identity: ItemIdentity) => void;
+};
+
 type ItemCellProps = {
     entry: CellEntry<Gtk.ListItem>;
     render: ListItemRenderer<never>;
-    collection: Collection;
+    state: CollectionStateStore;
     hasExpander: boolean;
-    expandedIds: string[] | null | undefined;
     expanderDescriptions: ExpanderDescriptions | null | undefined;
-};
+} & ItemIdentity;
 
 type ItemPortalsProps = {
     registry: CellRegistry<Gtk.ListItem>;
@@ -109,9 +130,8 @@ type ItemPortalsProps = {
 type ItemRowProps = {
     entry: CellEntry<Gtk.ColumnViewRow>;
     rowProps: ListRowPropsResolver<never>;
-    collection: Collection;
-    expandedIds: string[] | null | undefined;
-};
+    state: CollectionStateStore;
+} & ItemIdentity;
 
 type RowPortalsProps = {
     registry: CellRegistry<Gtk.ColumnViewRow>;
@@ -142,8 +162,8 @@ type RowSlot = {
     portals: ReactNode;
 };
 
-const ItemCell = memo(ItemCellImpl);
-const ItemRow = memo(ItemRowImpl);
+const ItemCell = memo(ItemCellImpl, isSameItemCell);
+const ItemRow = memo(ItemRowImpl, isSameItemRow);
 const HeaderCell = memo(HeaderCellImpl);
 const CELL_OPTIONS: CellRegistryOptions<Gtk.ListItem> = { isHost: isListItem, prepare: prepareCell };
 const HEADER_OPTIONS: CellRegistryOptions<Gtk.ListHeader> = { isHost: isListHeader, prepare: prepareCell };
@@ -184,7 +204,7 @@ function notifyRegistry<H extends FactoryHost>(state: CellRegistryState<H>): voi
 function createEntry<H extends FactoryHost>(state: CellRegistryState<H>, host: H): CellEntry<H> {
     state.serial += 1;
 
-    return { key: `gtkx-cell-${String(state.serial)}`, host };
+    return { key: `gtkx-cell-${String(state.serial)}`, host, identity: createItemIdentityStore() };
 }
 
 function setupHost<H extends FactoryHost>(state: CellRegistryState<H>, host: H): void {
@@ -283,9 +303,13 @@ function isRowWanted(options: ItemSlotOptions, item: ListItem): boolean {
     return options.expandedIds?.includes(item.id) ?? false;
 }
 
-function itemArgs(item: ListItem, options: ItemSlotOptions): ListItemRenderArgs<unknown> {
-    const args: ListItemRenderArgs<unknown> = { item: item.value, index: options.position ?? 0 };
-    const row = options.row;
+function itemArgs(
+    item: ListItem,
+    position: number | undefined,
+    row: Gtk.TreeListRow | null,
+    isExpanded: boolean,
+): ListItemRenderArgs<unknown> {
+    const args: ListItemRenderArgs<unknown> = { item: item.value, index: position ?? 0 };
 
     if (row === null) {
         return args;
@@ -294,7 +318,7 @@ function itemArgs(item: ListItem, options: ItemSlotOptions): ListItemRenderArgs<
     args.depth = row.getDepth();
 
     if (row.isExpandable()) {
-        args.isExpanded = isRowWanted(options, item);
+        args.isExpanded = isExpanded;
     }
 
     return args;
@@ -308,21 +332,127 @@ function slotFor(options: ItemSlotOptions): ItemSlot | null {
         return null;
     }
 
-    return { item, row: options.row, args: itemArgs(item, options) };
+    return {
+        item,
+        row: options.row,
+        args: itemArgs(item, options.position, options.row, isRowWanted(options, item)),
+    };
 }
 
 function useItemSlot(
     entry: CellEntry<PositionedHost>,
-    collection: Collection,
-    expandedIds: string[] | null | undefined,
+    state: CollectionStateStore,
+    identity: ItemIdentity,
 ): ItemSlot | null {
     const position = useProperty(entry.host, "position");
     const item = useProperty(entry.host, "item") ?? null;
     const row = item instanceof Gtk.TreeListRow ? item : null;
 
+    if (position === identity.position) {
+        return identity.item === undefined
+            ? null
+            : {
+                    item: identity.item,
+                    row,
+                    args: itemArgs(identity.item, position, row, identity.isExpanded),
+                };
+    }
+
+    const { collection, expandedIds } = state.read();
+
     return slotFor({ item, position, row, collection, expandedIds });
 }
 
+function itemIdentity(
+    entry: CellEntry<PositionedHost>,
+    collection: Collection,
+    expandedIds: string[] | null | undefined,
+): ItemIdentity {
+    const ref = slotRefFor(entry.host.getItem());
+    const item = ref === null ? undefined : collection.itemAt(ref);
+
+    return {
+        item,
+        position: entry.host.getPosition(),
+        isExpanded: item === undefined ? false : (expandedIds?.includes(item.id) ?? false),
+    };
+}
+
+function isSameItemIdentity(previous: ItemIdentity, next: ItemIdentity): boolean {
+    return (
+        previous.item === next.item &&
+        previous.position === next.position &&
+        previous.isExpanded === next.isExpanded
+    );
+}
+
+function isSameItemCell(previous: ItemCellProps, next: ItemCellProps): boolean {
+    const identity = previous.entry.identity.read() ?? previous;
+
+    return (
+        previous.entry === next.entry &&
+        previous.render === next.render &&
+        previous.hasExpander === next.hasExpander &&
+        previous.expanderDescriptions === next.expanderDescriptions &&
+        isSameItemIdentity(identity, next)
+    );
+}
+
+function isSameItemRow(previous: ItemRowProps, next: ItemRowProps): boolean {
+    const identity = previous.entry.identity.read() ?? previous;
+
+    return previous.entry === next.entry && previous.rowProps === next.rowProps && isSameItemIdentity(identity, next);
+}
+
+function createItemIdentityStore(): ItemIdentityStore {
+    let current: ItemIdentity | null = null;
+
+    return {
+        read: () => current,
+        write: (identity) => {
+            current = identity;
+        },
+    };
+}
+
+function renderedIdentity(entry: CellEntry<PositionedHost>, slot: ItemSlot | null): ItemIdentity {
+    return {
+        item: slot?.item,
+        position: slot?.args.index ?? entry.host.getPosition(),
+        isExpanded: slot?.args.isExpanded ?? false,
+    };
+}
+
+function useRememberIdentity(entry: CellEntry<PositionedHost>, slot: ItemSlot | null): void {
+    useLayoutEffect(() => {
+        entry.identity.write(renderedIdentity(entry, slot));
+    });
+}
+
+function createCollectionStateStore(initial: CollectionState): CollectionStateStore {
+    let current = initial;
+
+    return {
+        read: () => current,
+        write: (state) => {
+            current = state;
+        },
+    };
+}
+
+function useCollectionState(
+    collection: Collection,
+    expandedIds: string[] | null | undefined,
+): CollectionStateStore {
+    const [state] = useState(() => createCollectionStateStore({ collection, expandedIds }));
+
+    useInsertionEffect(() => {
+        state.write({ collection, expandedIds });
+    }, [state, collection, expandedIds]);
+
+    return state;
+}
+
 function expanderDescriptionFor(
     slot: ItemSlot,
     descriptions: ExpanderDescriptions | null | undefined,
@@ -402,38 +532,60 @@ function rowPropsFor(slot: ItemSlot | null, rowProps: ListRowPropsResolver<never
 }
 
 function setRowText(host: Gtk.ColumnViewRow, name: string, value: string | null): void {
-    setObjectProperty(host, name, ROW_TEXT_DESCRIPTOR, value);
+    setProperty(host, name, ROW_TEXT_DESCRIPTOR, value);
 }
 
-function applyRowProps(host: Gtk.ColumnViewRow, props: ResolvedRowProps): void {
-    setRowText(host, "accessible-label", props.accessibleLabel);
-    setRowText(host, "accessible-description", props.accessibleDescription);
-    host.setActivatable(props.isActivatable);
-    host.setFocusable(props.isFocusable);
-    host.setSelectable(props.isSelectable);
+function applyRowProps(
+    host: Gtk.ColumnViewRow,
+    props: ResolvedRowProps,
+    previous: ResolvedRowProps | null,
+): void {
+    if (previous?.accessibleLabel !== props.accessibleLabel) {
+        setRowText(host, "accessible-label", props.accessibleLabel);
+    }
+
+    if (previous?.accessibleDescription !== props.accessibleDescription) {
+        setRowText(host, "accessible-description", props.accessibleDescription);
+    }
+
+    if (previous?.isActivatable !== props.isActivatable) {
+        host.setActivatable(props.isActivatable);
+    }
+
+    if (previous?.isFocusable !== props.isFocusable) {
+        host.setFocusable(props.isFocusable);
+    }
+
+    if (previous?.isSelectable !== props.isSelectable) {
+        host.setSelectable(props.isSelectable);
+    }
 }
 
 function ItemCellImpl({
     entry,
     render,
-    collection,
+    state,
     hasExpander,
-    expandedIds,
     expanderDescriptions,
+    ...identity
 }: ItemCellProps): ReactNode {
-    const slot = useItemSlot(entry, collection, expandedIds);
+    const slot = useItemSlot(entry, state, identity);
+    useRememberIdentity(entry, slot);
     const body = itemBody(slot, render, hasExpander, expanderDescriptions);
 
     return createPortal(body, entry.host, entry.key);
 }
 
-function ItemRowImpl({ entry, rowProps, collection, expandedIds }: ItemRowProps): ReactNode {
-    const slot = useItemSlot(entry, collection, expandedIds);
+function ItemRowImpl({ entry, rowProps, state, ...identity }: ItemRowProps): ReactNode {
+    const slot = useItemSlot(entry, state, identity);
+    useRememberIdentity(entry, slot);
     const props = rowPropsFor(slot, rowProps);
+    const previous = useRef<ResolvedRowProps | null>(null);
 
     useLayoutEffect(() => {
-        applyRowProps(entry.host, props);
-    });
+        applyRowProps(entry.host, props, previous.current);
+        previous.current = props;
+    }, [entry.host, props]);
 
     return null;
 }
@@ -458,29 +610,37 @@ const ItemPortals = ({
     hasExpander,
     expandedIds,
     expanderDescriptions,
-}: ItemPortalsProps): ReactNode =>
-    usePortalEntries(registry).map((entry) => (
+}: ItemPortalsProps): ReactNode => {
+    const entries = usePortalEntries(registry);
+    const state = useCollectionState(collection, expandedIds);
+
+    return entries.map((entry) => (
         <ItemCell
             key={entry.key}
             entry={entry}
             render={render}
-            collection={collection}
+            state={state}
             hasExpander={hasExpander ?? true}
-            expandedIds={expandedIds}
             expanderDescriptions={expanderDescriptions}
+            {...itemIdentity(entry, collection, expandedIds)}
         />
     ));
+};
 
-const RowPortals = ({ registry, rowProps, collection, expandedIds }: RowPortalsProps): ReactNode =>
-    usePortalEntries(registry).map((entry) => (
+const RowPortals = ({ registry, rowProps, collection, expandedIds }: RowPortalsProps): ReactNode => {
+    const entries = usePortalEntries(registry);
+    const state = useCollectionState(collection, expandedIds);
+
+    return entries.map((entry) => (
         <ItemRow
             key={entry.key}
             entry={entry}
             rowProps={rowProps}
-            collection={collection}
-            expandedIds={expandedIds}
+            state={state}
+            {...itemIdentity(entry, collection, expandedIds)}
         />
     ));
+};
 
 const HeaderPortals = ({ registry, render, collection }: HeaderPortalsProps): ReactNode =>
     usePortalEntries(registry).map((entry) => (