npm - @gtkx/components - Versions diffs - 2.0.0-beta.5 → 2.0.0-beta.7 - Mend

@gtkx/components 2.0.0-beta.5 → 2.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/README.md +43 -40
package/dist/column-view.d.ts.map +1 -1
package/dist/column-view.js +1 -0
package/dist/column-view.js.map +1 -1
package/dist/internal/cells.d.ts +11 -1
package/dist/internal/cells.d.ts.map +1 -1
package/dist/internal/cells.js +122 -24
package/dist/internal/cells.js.map +1 -1
package/dist/internal/collection-model.d.ts +5 -5
package/dist/internal/collection-model.d.ts.map +1 -1
package/dist/internal/collection-model.js +35 -35
package/dist/internal/collection-model.js.map +1 -1
package/dist/list-view.d.ts.map +1 -1
package/dist/list-view.js +1 -0
package/dist/list-view.js.map +1 -1
package/dist/types.d.ts +11 -2
package/dist/types.d.ts.map +1 -1
package/dist/types.js.map +1 -1
package/package.json +9 -8
package/src/column-view.tsx +1 -0
package/src/internal/cells.tsx +198 -38
package/src/internal/collection-model.ts +41 -41
package/src/list-view.tsx +1 -0
package/src/types.ts +13 -1

package/README.md CHANGED Viewed

@@ -5,9 +5,9 @@
 <h1 align="center">GTKX</h1>
 <p align="center">
-  The React framework for Linux, built on GTK.<br />
-  Write native GTK4 desktop applications with React and TypeScript.
-  Real GTK widgets, the GNOME stack, and standard web tooling.
+  The React framework for Linux.<br />
+  Write native GNOME applications with React and TypeScript.
+  Real Adwaita and GTK4 widgets with standard web tooling.
 </p>
 <p align="center">
@@ -38,11 +38,12 @@
 ## Demo
-The intrinsic elements in this snippet render GTK4 widgets, and ordinary React hooks and events drive them:
+This app starts with an Adwaita application shell, renders native GTK4 widgets inside it, and uses ordinary React hooks and events:
 ```tsx
 import * as Gtk from "@gtkx/gi/gtk";
-import { GtkApplication, GtkApplicationWindow, GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
+import { AdwApplication, AdwApplicationWindow, AdwHeaderBar, AdwToolbarView } from "@gtkx/jsx/adw";
+import { GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
 import { createRoot, quit } from "@gtkx/react";
 import { useState } from "react";
@@ -50,38 +51,40 @@ const Counter = () => {
   const [count, setCount] = useState(0);
   return (
-    <GtkApplicationWindow
+    <AdwApplicationWindow
       title="Hello GTKX"
       defaultWidth={400}
       defaultHeight={300}
       onCloseRequest={quit}
     >
-      <GtkBox
-        orientation={Gtk.Orientation.VERTICAL}
-        spacing={20}
-        marginTop={40}
-        marginBottom={40}
-        marginStart={40}
-        marginEnd={40}
-        valign={Gtk.Align.CENTER}
-        halign={Gtk.Align.CENTER}
-      >
-        <GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
-        <GtkLabel cssClasses={["title-2"]}>{`Count: ${count}`}</GtkLabel>
-        <GtkButton
-          label="Increment"
-          onClicked={() => setCount((c) => c + 1)}
-          cssClasses={["suggested-action", "pill"]}
-        />
-      </GtkBox>
-    </GtkApplicationWindow>
+      <AdwToolbarView topBar={<AdwHeaderBar />}>
+        <GtkBox
+          orientation={Gtk.Orientation.VERTICAL}
+          spacing={20}
+          marginTop={40}
+          marginBottom={40}
+          marginStart={40}
+          marginEnd={40}
+          valign={Gtk.Align.CENTER}
+          halign={Gtk.Align.CENTER}
+        >
+          <GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
+          <GtkLabel cssClasses={["title-2"]}>{`Count: ${String(count)}`}</GtkLabel>
+          <GtkButton
+            label="Increment"
+            onClicked={() => setCount((c) => c + 1)}
+            cssClasses={["suggested-action", "pill"]}
+          />
+        </GtkBox>
+      </AdwToolbarView>
+    </AdwApplicationWindow>
   );
 };
 const App = () => (
-  <GtkApplication>
+  <AdwApplication>
     <Counter />
-  </GtkApplication>
+  </AdwApplication>
 );
 createRoot().render(<App />);
@@ -91,9 +94,9 @@ This is the [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/
 ## Why GTKX
-### A declarative layer for the GNOME stack
+### Adwaita-first application development
-GTK4 is mature, and GtkBuilder XML can lay out a static interface, but nothing re-renders that interface when your application state changes, and nothing hot-reloads it as you work. GTKX adds that missing layer, and the tooling around it, on top of the stack you already know:
+GTKX uses Adwaita as the foundation for applications, windows, navigation, dialogs, and adaptive layouts, with the complete GTK4 toolkit underneath. It adds a declarative React layer and an integrated TypeScript toolchain to the GNOME platform:
 - a React reconciler that exposes every GObject as a JSX element,
 - a CLI for scaffolding, development, and production builds,
@@ -102,17 +105,17 @@ GTK4 is mature, and GtkBuilder XML can lay out a static interface, but nothing r
 - a Testing Library-style API for querying and driving your widgets in tests,
 - and a Model Context Protocol (MCP) server that exposes your live app to AI agents.
-### The full GNOME API surface
+### Native GNOME widgets, without a compatibility layer
-React Native and similar frameworks hide the native toolkit so one API can run everywhere. GTKX exposes it: GTK4, Adwaita, and any other GObject-Introspection library on your system. Linux-only by design.
+React Native and similar frameworks hide the native toolkit so one API can run everywhere. GTKX renders real Adwaita and GTK4 widgets and exposes any other GObject-Introspection library on your system. It is GNOME-native and Linux-only by design.
 ### Why Node.js, and why generated bindings
 GTKX runs on Node.js, which puts native modules, the npm ecosystem, and the tooling built for Node.js APIs within reach. GJS is GNOME's own runtime, built on SpiderMonkey rather than V8; node-gtk runs on Node.js but is lightly maintained, on the older nan/V8 ABI rather than N-API, and still centered on GTK3. The [Why GTKX guide](https://gtkx.dev/guide/why-gtkx) covers what running on Node.js means day to day.
-GTKX generates the TypeScript types and the native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. Codegen covers the whole GTK4 and Adwaita surface.
+GTKX generates the TypeScript types and native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. `Adw-1` is the sole default GIR root; its GIR include pulls in `Gtk-4.0`, so codegen covers both complete API surfaces. Neither belongs in a GTKX 2 `libraries` list.
-At runtime, the native Rust core calls straight into the system GTK4, Adwaita, and GLib libraries through libffi, without loading libgirepository at all.
+At runtime, the native Rust core calls straight into the system Adwaita, GTK4, and GLib libraries through libffi, without loading libgirepository at all.
 ## Quick start
@@ -121,10 +124,10 @@ GTKX is Linux-only and needs Node.js 26.7 or later. See [Requirements](#requirem
 Scaffold a new app with the `create-gtkx` initializer:
 ```sh
-npm create gtkx
+npm create gtkx@beta
 ```
-The same command works with other package managers: `pnpm create gtkx` or `yarn create gtkx`.
+The same command works with other package managers: `pnpm create gtkx@beta` or `yarn create gtkx@beta`.
 Then run your new app:
@@ -145,7 +148,7 @@ The documentation at **[gtkx.dev](https://gtkx.dev)** includes a step-by-step tu
 GTKX is Linux-only. You need:
-- Linux with the GTK4 (4.20 or later), Adwaita (1.8 or later), and GLib development libraries
+- Linux with the Adwaita (1.8 or later), GTK4 (4.20 or later), and GLib development libraries
 - Node.js 26.7 or later
 The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other targets need to build it from the GTKX repository, which requires a Rust toolchain.
@@ -154,10 +157,10 @@ The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other tar
 Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
-- [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the counter above.
-- [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): a React port of the official GTK4 widget showcase, covering lists, dialogs, gestures, CSS, and OpenGL.
-- [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): a WebKitWebView-based web browser.
-- [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): a tour of `@gtkx/animated`, React Spring animations driven by the GTK frame clock.
+- [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the Adwaita counter above.
+- [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): the official GTK4 widget showcase in an Adwaita application shell, covering lists, dialogs, gestures, CSS, and OpenGL.
+- [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): an Adwaita browser built around `WebKitWebView`.
+- [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): an Adwaita showcase for `@gtkx/animated`, with React Spring animations driven by the GTK frame clock.
 - [`navigation`](https://github.com/gtkx-org/gtkx/tree/main/examples/navigation): a tour of `@gtkx/navigation`, React Navigation's stack, tab, and drawer navigators rendered with libadwaita.
 - [`tutorial`](https://github.com/gtkx-org/gtkx/tree/main/examples/tutorial): the Tasks app the documentation builds.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAQlD,OAAO,KAAK,EAAoB,eAAe,EAAmC,MAAM,YAAY,CAAC;~~AAgLrG~~;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAiCrF;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
1	+ {"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAQlD,OAAO,KAAK,EAAoB,eAAe,EAAmC,MAAM,YAAY,CAAC;AAiLrG;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CAiCrF;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/column-view.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { useWidgetRef } from "./internal/use-widget-ref.js";
 const COLUMN_VIEW_PROPS = [
     "items",
     "sections",
+    "isFlat",
     "renderHeader",
     "rowProps",
     "columns",

package/dist/column-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { 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 { ColumnViewColumn, ColumnViewProps, ExpanderDescriptions, SortProps } from \"./types.js\";\nimport { ItemPortals, useItemCells, useRowProps, useSectionHeader } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn \| null };\n\ntype ColumnCellsProps = {\n column: ColumnViewColumn<never>;\n hasExpander: boolean;\n collection: Collection;\n expandedIds: string[] \| null \| undefined;\n expanderDescriptions: ExpanderDescriptions \| null \| undefined;\n size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\" \| \"hasExpander\"> & {\n columns: ColumnViewColumn<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n \"items\",\n \"sections\",\n \"renderHeader\",\n \"rowProps\",\n \"columns\",\n \"selectedIds\",\n \"onSelectionChanged\",\n \"selectionMode\",\n \"expandedIds\",\n \"onExpandedChange\",\n \"expanderDescriptions\",\n \"sortColumn\",\n \"sortOrder\",\n \"onSortChanged\",\n \"estimatedItemHeight\",\n \"children\",\n \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst expanderIndexFor = (columns: ColumnViewColumn<never>[]): number =>\n columns.findIndex((column) => column.visible !== false);\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: RefObject<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: RefObject<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: RefObject<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: ColumnViewColumn<never>[]): void => {\n const sorting = useRef(false);\n const sorter = view?.getSorter() ?? null;\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 = ({\n column,\n hasExpander,\n collection,\n expandedIds,\n expanderDescriptions,\n size,\n}: ColumnCellsProps): ReactNode => {\n const cells = useItemCells(size);\n const rest = omit(column, [\"id\", \"renderCell\", \"isSortable\"]);\n\n return (\n <>\n <GtkColumnViewColumn\n id={column.id}\n factory={<GtkSignalListItemFactory {...cells.handlers} />}\n sorter={column.isSortable === true ? <GtkCustomSorter /> : null}\n {...rest}\n />\n <ItemPortals\n registry={cells}\n render={column.renderCell}\n collection={collection}\n hasExpander={hasExpander}\n expandedIds={expandedIds}\n expanderDescriptions={expanderDescriptions}\n />\n </>\n );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, expanderDescriptions, size }: ColumnListProps): ReactNode => {\n const expanderIndex = expanderIndexFor(columns);\n\n return columns.map((column, index) => (\n <ColumnCells\n key={column.id}\n column={column}\n hasExpander={index === expanderIndex}\n collection={collection}\n expandedIds={expandedIds}\n expanderDescriptions={expanderDescriptions}\n size={size}\n />\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,\n * section header rendering, and per-row props such as a screen-reader label.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n const { renderHeader, rowProps, columns, expandedIds, expanderDescriptions } = props;\n const { sortColumn, sortOrder, onSortChanged, ref } = props;\n const rest = omit(props, COLUMN_VIEW_PROPS);\n const size = { width: -1, height: props.estimatedItemHeight ?? -1 };\n const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n const { collection, selection } = useCollection(props);\n const header = useSectionHeader(renderHeader, collection, size);\n const rows = useRowProps(rowProps, collection, expandedIds);\n const columnList = columns as ColumnViewColumn<never>[];\n useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n return (\n <>\n <GtkColumnView\n ref={refCallback}\n model={selection}\n {...header.factoryProps}\n {...rows.factoryProps}\n {...rest}\n >\n <ColumnList\n columns={columnList}\n collection={collection}\n expandedIds={expandedIds}\n expanderDescriptions={expanderDescriptions}\n size={size}\n />\n </GtkColumnView>\n {header.portals}\n {rows.portals}\n </>\n );\n}\n\nexport { ColumnView };\n"]}
1	+ {"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { 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 { ColumnViewColumn, ColumnViewProps, ExpanderDescriptions, SortProps } from \"./types.js\";\nimport { ItemPortals, useItemCells, useRowProps, useSectionHeader } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn \| null };\n\ntype ColumnCellsProps = {\n column: ColumnViewColumn<never>;\n hasExpander: boolean;\n collection: Collection;\n expandedIds: string[] \| null \| undefined;\n expanderDescriptions: ExpanderDescriptions \| null \| undefined;\n size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\" \| \"hasExpander\"> & {\n columns: ColumnViewColumn<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n \"items\",\n \"sections\",\n \"isFlat\",\n \"renderHeader\",\n \"rowProps\",\n \"columns\",\n \"selectedIds\",\n \"onSelectionChanged\",\n \"selectionMode\",\n \"expandedIds\",\n \"onExpandedChange\",\n \"expanderDescriptions\",\n \"sortColumn\",\n \"sortOrder\",\n \"onSortChanged\",\n \"estimatedItemHeight\",\n \"children\",\n \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst expanderIndexFor = (columns: ColumnViewColumn<never>[]): number =>\n columns.findIndex((column) => column.visible !== false);\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: RefObject<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: RefObject<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: RefObject<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: ColumnViewColumn<never>[]): void => {\n const sorting = useRef(false);\n const sorter = view?.getSorter() ?? null;\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 = ({\n column,\n hasExpander,\n collection,\n expandedIds,\n expanderDescriptions,\n size,\n}: ColumnCellsProps): ReactNode => {\n const cells = useItemCells(size);\n const rest = omit(column, [\"id\", \"renderCell\", \"isSortable\"]);\n\n return (\n <>\n <GtkColumnViewColumn\n id={column.id}\n factory={<GtkSignalListItemFactory {...cells.handlers} />}\n sorter={column.isSortable === true ? <GtkCustomSorter /> : null}\n {...rest}\n />\n <ItemPortals\n registry={cells}\n render={column.renderCell}\n collection={collection}\n hasExpander={hasExpander}\n expandedIds={expandedIds}\n expanderDescriptions={expanderDescriptions}\n />\n </>\n );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, expanderDescriptions, size }: ColumnListProps): ReactNode => {\n const expanderIndex = expanderIndexFor(columns);\n\n return columns.map((column, index) => (\n <ColumnCells\n key={column.id}\n column={column}\n hasExpander={index === expanderIndex}\n collection={collection}\n expandedIds={expandedIds}\n expanderDescriptions={expanderDescriptions}\n size={size}\n />\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,\n * section header rendering, and per-row props such as a screen-reader label.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n const { renderHeader, rowProps, columns, expandedIds, expanderDescriptions } = props;\n const { sortColumn, sortOrder, onSortChanged, ref } = props;\n const rest = omit(props, COLUMN_VIEW_PROPS);\n const size = { width: -1, height: props.estimatedItemHeight ?? -1 };\n const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n const { collection, selection } = useCollection(props);\n const header = useSectionHeader(renderHeader, collection, size);\n const rows = useRowProps(rowProps, collection, expandedIds);\n const columnList = columns as ColumnViewColumn<never>[];\n useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n return (\n <>\n <GtkColumnView\n ref={refCallback}\n model={selection}\n {...header.factoryProps}\n {...rows.factoryProps}\n {...rest}\n >\n <ColumnList\n columns={columnList}\n collection={collection}\n expandedIds={expandedIds}\n expanderDescriptions={expanderDescriptions}\n size={size}\n />\n </GtkColumnView>\n {header.portals}\n {rows.portals}\n </>\n );\n}\n\nexport { ColumnView };\n"]}

package/dist/internal/cells.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type * as GObject from "@gtkx/gi/gobject";
 import type { ReactElement, ReactNode } from "react";
 import * as Gtk from "@gtkx/gi/gtk";
-import type { ExpanderDescriptions, ListItemRenderer, ListRowPropsResolver, ListSectionRenderer } from "../types.js";
+import type { ExpanderDescriptions, ListItem, ListItemRenderer, ListRowPropsResolver, ListSectionRenderer } from "../types.js";
 import type { Collection } from "./collection.js";
 type CellSize = {
     width: number;
@@ -13,6 +13,7 @@ type FactoryHost = GObject.Object & {
 type CellEntry<H extends FactoryHost> = {
     key: string;
     host: H;
+    identity: ItemIdentityStore;
 };
 type FactoryHandlers = {
     onSetup: (host: GObject.Object) => void;
@@ -25,6 +26,15 @@ type CellRegistry<H extends FactoryHost> = {
     subscribe: (onChange: () => void) => () => void;
     getEntries: () => CellEntry<H>[];
 };
+type ItemIdentity = {
+    item: ListItem | undefined;
+    position: number;
+    isExpanded: boolean;
+};
+type ItemIdentityStore = {
+    read: () => ItemIdentity | null;
+    write: (identity: ItemIdentity) => void;
+};
 type ItemPortalsProps = {
     registry: CellRegistry<Gtk.ListItem>;
     render: ListItemRenderer<never>;

package/dist/internal/cells.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,GAAG,MAAM,cAAc,CAAC;AAKpC,OAAO,KAAK,EACR,oBAAoB,~~EAGpB~~,gBAAgB,EAEhB,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,QAAQ,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG;IAChC,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;CACxC,CAAC;AAOF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,CAAC,CAAC;~~CACX~~,CAAC;AAEF,KAAK,eAAe,GAAG;IACnB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI;IACvC,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IAChD,UAAU,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;CACpC,CAAC;~~AAkDF~~,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACrC,MAAM,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,oBAAoB,CAAC,EAAE,oBAAoB,GAAG,IAAI,GAAG,SAAS,CAAC;CAClE,CAAC;~~AA4BF~~,KAAK,iBAAiB,GAAG;IACrB,YAAY,EAAE;QAAE,aAAa,CAAC,EAAE,YAAY,CAAA;KAAE,CAAC;IAC/C,OAAO,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,KAAK,OAAO,GAAG;IACX,YAAY,EAAE;QAAE,UAAU,CAAC,EAAE,YAAY,CAAA;KAAE,CAAC;IAC5C,OAAO,EAAE,SAAS,CAAC;CACtB,CAAC;AAmIF,iBAAS,YAAY,CAAC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAEhE;~~AAkLD~~,QAAA,MAAM,WAAW,GAAI,mFAOlB,gBAAgB,KAAG,~~SAWhB~~,CAAC;~~AAkBP~~,QAAA,MAAM,gBAAgB,GAClB,QAAQ,mBAAmB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,SAAS,EACrD,YAAY,UAAU,EACtB,MAAM,QAAQ,KACf,iBAWF,CAAC;AAEF,QAAA,MAAM,WAAW,GACb,UAAU,oBAAoB,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,SAAS,EACxD,YAAY,UAAU,EACtB,aAAa,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,KACzC,OAaF,CAAC;AAEF,OAAO,EACH,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,KAAK,QAAQ,GAChB,CAAC"}
1	+ {"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"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"}

package/dist/internal/cells.js CHANGED Viewed

@@ -3,10 +3,10 @@ import * as Gtk from "@gtkx/gi/gtk";
 import { GtkSignalListItemFactory, GtkTreeExpander } from "@gtkx/jsx/gtk";
 import { createPortal, useProperty } from "@gtkx/react";
 import { setProperty, t } from "@gtkx/runtime";
-import { memo, useLayoutEffect, useState, useSyncExternalStore } from "react";
+import { memo, useInsertionEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { slotRefFor } from "./collection-model.js";
-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 = { isHost: isListItem, prepare: prepareCell };
 const HEADER_OPTIONS = { isHost: isListHeader, prepare: prepareCell };
@@ -37,7 +37,7 @@ function notifyRegistry(state) {
 }
 function createEntry(state, host) {
     state.serial += 1;
-    return { key: `gtkx-cell-${String(state.serial)}`, host };
+    return { key: `gtkx-cell-${String(state.serial)}`, host, identity: createItemIdentityStore() };
 }
 function setupHost(state, host) {
     state.prepare?.(host, state.size);
@@ -117,15 +117,14 @@ function useHeaderCells(size) {
 function isRowWanted(options, item) {
     return options.expandedIds?.includes(item.id) ?? false;
 }
-function itemArgs(item, options) {
-    const args = { item: item.value, index: options.position ?? 0 };
-    const row = options.row;
+function itemArgs(item, position, row, isExpanded) {
+    const args = { item: item.value, index: position ?? 0 };
     if (row === null) {
         return args;
     }
     args.depth = row.getDepth();
     if (row.isExpandable()) {
-        args.isExpanded = isRowWanted(options, item);
+        args.isExpanded = isExpanded;
     }
     return args;
 }
@@ -135,14 +134,91 @@ function slotFor(options) {
     if (item === undefined) {
         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, collection, expandedIds) {
+function useItemSlot(entry, state, identity) {
     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, collection, expandedIds) {
+    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, next) {
+    return (previous.item === next.item &&
+        previous.position === next.position &&
+        previous.isExpanded === next.isExpanded);
+}
+function isSameItemCell(previous, next) {
+    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, next) {
+    const identity = previous.entry.identity.read() ?? previous;
+    return previous.entry === next.entry && previous.rowProps === next.rowProps && isSameItemIdentity(identity, next);
+}
+function createItemIdentityStore() {
+    let current = null;
+    return {
+        read: () => current,
+        write: (identity) => {
+            current = identity;
+        },
+    };
+}
+function renderedIdentity(entry, slot) {
+    return {
+        item: slot?.item,
+        position: slot?.args.index ?? entry.host.getPosition(),
+        isExpanded: slot?.args.isExpanded ?? false,
+    };
+}
+function useRememberIdentity(entry, slot) {
+    useLayoutEffect(() => {
+        entry.identity.write(renderedIdentity(entry, slot));
+    });
+}
+function createCollectionStateStore(initial) {
+    let current = initial;
+    return {
+        read: () => current,
+        write: (state) => {
+            current = state;
+        },
+    };
+}
+function useCollectionState(collection, expandedIds) {
+    const [state] = useState(() => createCollectionStateStore({ collection, expandedIds }));
+    useInsertionEffect(() => {
+        state.write({ collection, expandedIds });
+    }, [state, collection, expandedIds]);
+    return state;
+}
 function expanderDescriptionFor(slot, descriptions) {
     const { isExpanded } = slot.args;
     if (isExpanded === undefined || descriptions == null) {
@@ -186,24 +262,38 @@ function rowPropsFor(slot, rowProps) {
 function setRowText(host, name, value) {
     setProperty(host, name, ROW_TEXT_DESCRIPTOR, value);
 }
-function applyRowProps(host, props) {
-    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, props, previous) {
+    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, hasExpander, expandedIds, expanderDescriptions, }) {
-    const slot = useItemSlot(entry, collection, expandedIds);
+function ItemCellImpl({ entry, render, state, hasExpander, expanderDescriptions, ...identity }) {
+    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 }) {
-    const slot = useItemSlot(entry, collection, expandedIds);
+function ItemRowImpl({ entry, rowProps, state, ...identity }) {
+    const slot = useItemSlot(entry, state, identity);
+    useRememberIdentity(entry, slot);
     const props = rowPropsFor(slot, rowProps);
+    const previous = useRef(null);
     useLayoutEffect(() => {
-        applyRowProps(entry.host, props);
-    });
+        applyRowProps(entry.host, props, previous.current);
+        previous.current = props;
+    }, [entry.host, props]);
     return null;
 }
 function HeaderCellImpl({ entry, render, collection }) {
@@ -216,8 +306,16 @@ function HeaderCellImpl({ entry, render, collection }) {
 function usePortalEntries(registry) {
     return useSyncExternalStore(registry.subscribe, registry.getEntries);
 }
-const ItemPortals = ({ registry, render, collection, hasExpander, expandedIds, expanderDescriptions, }) => usePortalEntries(registry).map((entry) => (_jsx(ItemCell, { entry: entry, render: render, collection: collection, hasExpander: hasExpander ?? true, expandedIds: expandedIds, expanderDescriptions: expanderDescriptions }, entry.key)));
-const RowPortals = ({ registry, rowProps, collection, expandedIds }) => usePortalEntries(registry).map((entry) => (_jsx(ItemRow, { entry: entry, rowProps: rowProps, collection: collection, expandedIds: expandedIds }, entry.key)));
+const ItemPortals = ({ registry, render, collection, hasExpander, expandedIds, expanderDescriptions, }) => {
+    const entries = usePortalEntries(registry);
+    const state = useCollectionState(collection, expandedIds);
+    return entries.map((entry) => (_jsx(ItemCell, { entry: entry, render: render, state: state, hasExpander: hasExpander ?? true, expanderDescriptions: expanderDescriptions, ...itemIdentity(entry, collection, expandedIds) }, entry.key)));
+};
+const RowPortals = ({ registry, rowProps, collection, expandedIds }) => {
+    const entries = usePortalEntries(registry);
+    const state = useCollectionState(collection, expandedIds);
+    return entries.map((entry) => (_jsx(ItemRow, { entry: entry, rowProps: rowProps, state: state, ...itemIdentity(entry, collection, expandedIds) }, entry.key)));
+};
 const HeaderPortals = ({ registry, render, collection }) => usePortalEntries(registry).map((entry) => (_jsx(HeaderCell, { entry: entry, render: render, collection: collection }, entry.key)));
 const useSectionHeader = (render, collection, size) => {
     const registry = useHeaderCells(size);