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

package/dist/drop-down.js

@@ -1,89 +1,13 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GtkDropDown, GtkLabel } from "@gtkx/jsx/gtk";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { useCallback, useRef, useState } from "react";
-import { CellRenderHost, HeaderRenderHost, itemRenderer } from "./cell.js";
-import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
-import { useDropDownSelection } from "./hooks/use-drop-down-selection.js";
-import { useInstalledModel } from "./hooks/use-installed-model.js";
-import { useListModel } from "./hooks/use-list-model.js";
-const itemFactoryInstaller = makeFactoryInstaller((widget, factory) => widget.setFactory(factory));
-const listFactoryInstaller = makeFactoryInstaller((widget, factory) => widget.setListFactory(factory));
-const headerFactoryInstaller = makeFactoryInstaller((widget, factory) => widget.setHeaderFactory(factory));
-const defaultRenderer = (value) => {
-    if (value === undefined || value === null)
-        return null;
-    return _jsx(GtkLabel, { children: String(value) });
-};
-const toItemRenderer = (renderItem) => {
-    if (typeof renderItem !== "function")
-        return defaultRenderer;
-    return itemRenderer(renderItem);
-};
-const toListRenderer = (renderListItem, renderItem) => {
-    if (typeof renderListItem === "function")
-        return itemRenderer(renderListItem);
-    return toItemRenderer(renderItem);
-};
-const createSelectionResolver = (resolver, selectedPosition) => ({
-    positionOfId: (id) => resolver.positionOfId(id),
-    idOf: (position) => resolver.idOf(position),
-    resolve: (_position, treeRow) => resolver.resolve(selectedPosition, treeRow),
-});
-const useDropDownWiring = (props) => {
-    const widgetRef = useRef(null);
-    const [widget, setWidget] = useState(null);
-    const captureWidget = useCallback((value) => {
-        widgetRef.current = value;
-        setWidget(value);
-    }, []);
-    const setRef = useMergeRefs(props.ref, captureWidget);
-    const listModel = useListModel({ items: props.items, sections: props.sections });
-    const useHeader = typeof props.renderHeader === "function";
-    const selectionStore = useCellContainers({ object: widgetRef, installer: itemFactoryInstaller });
-    const listStore = useCellContainers({ object: widgetRef, installer: listFactoryInstaller });
-    const headerStore = useCellContainers({
-        object: useHeader ? widgetRef : null,
-        installer: headerFactoryInstaller,
-    });
-    useInstalledModel(widgetRef, listModel.model, (widget, value) => widget.setModel(value));
-    const selectedPosition = useDropDownSelection({
-        widget,
-        resolver: listModel.resolver,
-        selectedId: props.selectedId,
-        onSelectionChanged: props.onSelectionChanged,
-    });
-    const controlledPosition = props.selectedId === undefined || props.selectedId === null
-        ? -1
-        : listModel.resolver.positionOfId(props.selectedId);
-    const selectionPosition = controlledPosition >= 0 ? controlledPosition : selectedPosition < 0 ? 0 : selectedPosition;
-    return {
-        setRef,
-        resolver: listModel.resolver,
-        selectionResolver: createSelectionResolver(listModel.resolver, selectionPosition),
-        headerResolver: listModel.headerResolver,
-        selectionStore,
-        listStore,
-        headerStore,
-        useHeader,
-    };
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GtkDropDown } from "@gtkx/jsx/gtk";
+import { DropDownBase } from "./internal/drop-down.js";
 /**
- * Renders a drop-down widget (Gtk.DropDown by default, or the widget given as `component`) backed by a
- * collection model, with customizable rendering for the selected item, the popup list rows, and section
- * headers.
+ * Renders a `Gtk.DropDown` backed by a collection model, with customizable renderers for the
+ * collapsed display, popup rows, and popup section headers, and controlled selection.
  */
-export const DropDown = (props) => {
-    const { component, ref, items, sections, renderItem, renderListItem, renderHeader, selectedId, onSelectionChanged, ...intrinsicProps } = props;
-    const Component = component ?? GtkDropDown;
-    const wiring = useDropDownWiring({
-        ref,
-        items,
-        sections,
-        selectedId,
-        onSelectionChanged,
-        renderHeader,
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(Component, { ...intrinsicProps, ref: wiring.setRef }), _jsx(CellRenderHost, { store: wiring.selectionStore, resolver: wiring.selectionResolver, render: toItemRenderer(renderItem) }), _jsx(CellRenderHost, { store: wiring.listStore, resolver: wiring.resolver, render: toListRenderer(renderListItem, renderItem) }), _jsx(HeaderRenderHost, { useHeader: wiring.useHeader, store: wiring.headerStore, resolver: wiring.headerResolver, renderHeader: renderHeader })] }));
-};
+const DropDown = DropDownImpl;
+function DropDownImpl(props) {
+    return _jsx(DropDownBase, { ...props, component: GtkDropDown });
+}
+export { DropDown };
 //# sourceMappingURL=drop-down.js.map

package/dist/drop-down.js.map

@@ -1 +1 @@
-{"version":3,"file":"drop-down.js","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAA8C,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,EAAqB,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9F,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAOzD,MAAM,oBAAoB,GAAG,oBAAoB,CAAe,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAEjH,MAAM,oBAAoB,GAAG,oBAAoB,CAAe,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;AAErH,MAAM,sBAAsB,GAAG,oBAAoB,CAAe,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAClF,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CACnC,CAAC;AAEF,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACvD,OAAO,KAAC,QAAQ,cAAE,MAAM,CAAC,KAAK,CAAC,GAAY,CAAC;AAChD,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAO,UAAsD,EAAsB,EAAE;IACxG,IAAI,OAAO,UAAU,KAAK,UAAU;QAAE,OAAO,eAAqC,CAAC;IACnF,OAAO,YAAY,CAAO,UAAU,CAAC,CAAC;AAC1C,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CACnB,cAA0D,EAC1D,UAAsD,EACpC,EAAE;IACpB,IAAI,OAAO,cAAc,KAAK,UAAU;QAAE,OAAO,YAAY,CAAO,cAAc,CAAC,CAAC;IACpF,OAAO,cAAc,CAAO,UAAU,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAO,QAA4B,EAAE,gBAAwB,EAAsB,EAAE,CAAC,CAAC;IACnH,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;IAC/C,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC3C,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC;CAC/E,CAAC,CAAC;AA8CH,MAAM,iBAAiB,GAAG,CAAO,KAAoC,EAAwB,EAAE;IAC3F,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAChE,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAA0B,EAAE,EAAE;QAC7D,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;QAC1B,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,MAAM,GAAG,YAAY,CAAe,KAAK,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;IAEpE,MAAM,SAAS,GAAG,YAAY,CAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEvF,MAAM,SAAS,GAAG,OAAO,KAAK,CAAC,YAAY,KAAK,UAAU,CAAC;IAE3D,MAAM,cAAc,GAAG,iBAAiB,CAAe,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAC/G,MAAM,SAAS,GAAG,iBAAiB,CAAe,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAC1G,MAAM,WAAW,GAAG,iBAAiB,CAAe;QAChD,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACpC,SAAS,EAAE,sBAAsB;KACpC,CAAC,CAAC;IAEH,iBAAiB,CAAC,SAAS,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzF,MAAM,gBAAgB,GAAG,oBAAoB,CAAO;QAChD,MAAM;QACN,QAAQ,EAAE,SAAS,CAAC,QAAQ;QAC5B,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,kBAAkB,EAAE,KAAK,CAAC,kBAAkB;KAC/C,CAAC,CAAC;IAEH,MAAM,kBAAkB,GACpB,KAAK,CAAC,UAAU,KAAK,SAAS,IAAI,KAAK,CAAC,UAAU,KAAK,IAAI;QACvD,CAAC,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GACnB,kBAAkB,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAE/F,OAAO;QACH,MAAM;QACN,QAAQ,EAAE,SAAS,CAAC,QAAQ;QAC5B,iBAAiB,EAAE,uBAAuB,CAAC,SAAS,CAAC,QAAQ,EAAE,iBAAiB,CAAC;QACjF,cAAc,EAAE,SAAS,CAAC,cAAc;QACxC,cAAc;QACd,SAAS;QACT,WAAW;QACX,SAAS;KACZ,CAAC;AACN,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CACpB,KAA6B,EACpB,EAAE;IACX,MAAM,EACF,SAAS,EACT,GAAG,EACH,KAAK,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EACd,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAgB,SAAS,IAAI,WAAW,CAAC;IAExD,MAAM,MAAM,GAAG,iBAAiB,CAAO;QACnC,GAAG;QACH,KAAK;QACL,QAAQ;QACR,UAAU;QACV,kBAAkB;QAClB,YAAY;KACf,CAAC,CAAC;IAEH,OAAO,CACH,8BACI,KAAC,SAAS,OAAK,cAAc,EAAE,GAAG,EAAE,MAAM,CAAC,MAAM,GAAI,EACrD,KAAC,cAAc,IACX,KAAK,EAAE,MAAM,CAAC,cAAc,EAC5B,QAAQ,EAAE,MAAM,CAAC,iBAAiB,EAClC,MAAM,EAAE,cAAc,CAAO,UAAU,CAAC,GAC1C,EACF,KAAC,cAAc,IACX,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,MAAM,EAAE,cAAc,CAAO,cAAc,EAAE,UAAU,CAAC,GAC1D,EACF,KAAC,gBAAgB,IACb,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,KAAK,EAAE,MAAM,CAAC,WAAW,EACzB,QAAQ,EAAE,MAAM,CAAC,cAAc,EAC/B,YAAY,EAAE,YAAY,GAC5B,IACH,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkDropDown, GtkLabel } from \"@gtkx/jsx/gtk\";\nimport { useMergeRefs } from \"@gtkx/react/internal\";\nimport { type ElementType, type ReactNode, type Ref, useCallback, useRef, useState } from \"react\";\nimport { type CellRenderer, CellRenderHost, HeaderRenderHost, itemRenderer } from \"./cell.js\";\nimport { makeFactoryInstaller, useCellContainers } from \"./hooks/use-cell-containers.js\";\nimport { useDropDownSelection } from \"./hooks/use-drop-down-selection.js\";\nimport { useInstalledModel } from \"./hooks/use-installed-model.js\";\nimport { useListModel } from \"./hooks/use-list-model.js\";\nimport type { ItemNode, RenderItemProps, SectionNode, WidgetProps } from \"./types.js\";\nimport type { CellContainerStore } from \"./utils/cell-container-store.js\";\nimport type { ItemResolver } from \"./utils/item-resolver.js\";\n\nexport type DropDownItemRenderer<T> = (props: RenderItemProps<T>) => ReactNode;\n\nconst itemFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) => widget.setFactory(factory));\n\nconst listFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) => widget.setListFactory(factory));\n\nconst headerFactoryInstaller = makeFactoryInstaller<Gtk.DropDown>((widget, factory) =>\n    widget.setHeaderFactory(factory),\n);\n\nconst defaultRenderer: CellRenderer<unknown, unknown> = (value) => {\n    if (value === undefined || value === null) return null;\n    return <GtkLabel>{String(value)}</GtkLabel>;\n};\n\nconst toItemRenderer = <T, S>(renderItem: DropDownItemRenderer<T> | null | undefined): CellRenderer<T, S> => {\n    if (typeof renderItem !== \"function\") return defaultRenderer as CellRenderer<T, S>;\n    return itemRenderer<T, S>(renderItem);\n};\n\nconst toListRenderer = <T, S>(\n    renderListItem: DropDownItemRenderer<T> | null | undefined,\n    renderItem: DropDownItemRenderer<T> | null | undefined,\n): CellRenderer<T, S> => {\n    if (typeof renderListItem === \"function\") return itemRenderer<T, S>(renderListItem);\n    return toItemRenderer<T, S>(renderItem);\n};\n\nconst createSelectionResolver = <T, S>(resolver: ItemResolver<T, S>, selectedPosition: number): ItemResolver<T, S> => ({\n    positionOfId: (id) => resolver.positionOfId(id),\n    idOf: (position) => resolver.idOf(position),\n    resolve: (_position, treeRow) => resolver.resolve(selectedPosition, treeRow),\n});\n\n/** Declarative props for {@link DropDown}'s backing collection and cell rendering. */\nexport type DropDownDeclarativeProps<T = unknown, S = unknown> = {\n    items?: ItemNode<T>[] | undefined;\n    sections?: SectionNode<S, T>[] | undefined;\n    /** Id of the currently selected item, making the selection controlled. */\n    selectedId?: string | null | undefined;\n    onSelectionChanged?: ((id: string) => void) | null | undefined;\n    renderItem?: DropDownItemRenderer<T> | null | undefined;\n    /** Renderer for items in the open popup list, falling back to renderItem when omitted. */\n    renderListItem?: DropDownItemRenderer<T> | null | undefined;\n    /** Renderer for section headers in the popup list. */\n    renderHeader?: ((info: { section: S }) => ReactNode) | null | undefined;\n};\n\n/**\n * Props for {@link DropDown}. The backing widget is chosen through the `component` prop, defaulting to\n * GtkDropDown, and its own props combine with {@link DropDownDeclarativeProps}.\n */\nexport type DropDownProps<T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown> = WidgetProps<\n    C,\n    DropDownDeclarativeProps<T, S>,\n    \"model\" | \"factory\" | \"listFactory\" | \"headerFactory\"\n>;\n\ninterface NormalizedDropDownProps<T, S> {\n    ref: Ref<Gtk.DropDown | null> | undefined;\n    items: ItemNode<T>[] | undefined;\n    sections: SectionNode<S, T>[] | undefined;\n    selectedId: string | null | undefined;\n    onSelectionChanged: ((id: string) => void) | null | undefined;\n    renderHeader: ((info: { section: S }) => ReactNode) | null | undefined;\n}\n\ninterface DropDownWiring<T, S> {\n    setRef: (value: Gtk.DropDown | null) => void;\n    resolver: ItemResolver<T, S>;\n    selectionResolver: ItemResolver<T, S>;\n    headerResolver: ItemResolver<T, S>;\n    selectionStore: CellContainerStore;\n    listStore: CellContainerStore;\n    headerStore: CellContainerStore;\n    useHeader: boolean;\n}\n\nconst useDropDownWiring = <T, S>(props: NormalizedDropDownProps<T, S>): DropDownWiring<T, S> => {\n    const widgetRef = useRef<Gtk.DropDown | null>(null);\n    const [widget, setWidget] = useState<Gtk.DropDown | null>(null);\n    const captureWidget = useCallback((value: Gtk.DropDown | null) => {\n        widgetRef.current = value;\n        setWidget(value);\n    }, []);\n    const setRef = useMergeRefs<Gtk.DropDown>(props.ref, captureWidget);\n\n    const listModel = useListModel<T, S>({ items: props.items, sections: props.sections });\n\n    const useHeader = typeof props.renderHeader === \"function\";\n\n    const selectionStore = useCellContainers<Gtk.DropDown>({ object: widgetRef, installer: itemFactoryInstaller });\n    const listStore = useCellContainers<Gtk.DropDown>({ object: widgetRef, installer: listFactoryInstaller });\n    const headerStore = useCellContainers<Gtk.DropDown>({\n        object: useHeader ? widgetRef : null,\n        installer: headerFactoryInstaller,\n    });\n\n    useInstalledModel(widgetRef, listModel.model, (widget, value) => widget.setModel(value));\n\n    const selectedPosition = useDropDownSelection<T, S>({\n        widget,\n        resolver: listModel.resolver,\n        selectedId: props.selectedId,\n        onSelectionChanged: props.onSelectionChanged,\n    });\n\n    const controlledPosition =\n        props.selectedId === undefined || props.selectedId === null\n            ? -1\n            : listModel.resolver.positionOfId(props.selectedId);\n    const selectionPosition =\n        controlledPosition >= 0 ? controlledPosition : selectedPosition < 0 ? 0 : selectedPosition;\n\n    return {\n        setRef,\n        resolver: listModel.resolver,\n        selectionResolver: createSelectionResolver(listModel.resolver, selectionPosition),\n        headerResolver: listModel.headerResolver,\n        selectionStore,\n        listStore,\n        headerStore,\n        useHeader,\n    };\n};\n\n/**\n * Renders a drop-down widget (Gtk.DropDown by default, or the widget given as `component`) backed by a\n * collection model, with customizable rendering for the selected item, the popup list rows, and section\n * headers.\n */\nexport const DropDown = <T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown>(\n    props: DropDownProps<T, S, C>,\n): ReactNode => {\n    const {\n        component,\n        ref,\n        items,\n        sections,\n        renderItem,\n        renderListItem,\n        renderHeader,\n        selectedId,\n        onSelectionChanged,\n        ...intrinsicProps\n    } = props;\n    const Component: ElementType = component ?? GtkDropDown;\n\n    const wiring = useDropDownWiring<T, S>({\n        ref,\n        items,\n        sections,\n        selectedId,\n        onSelectionChanged,\n        renderHeader,\n    });\n\n    return (\n        <>\n            <Component {...intrinsicProps} ref={wiring.setRef} />\n            <CellRenderHost\n                store={wiring.selectionStore}\n                resolver={wiring.selectionResolver}\n                render={toItemRenderer<T, S>(renderItem)}\n            />\n            <CellRenderHost\n                store={wiring.listStore}\n                resolver={wiring.resolver}\n                render={toListRenderer<T, S>(renderListItem, renderItem)}\n            />\n            <HeaderRenderHost\n                useHeader={wiring.useHeader}\n                store={wiring.headerStore}\n                resolver={wiring.headerResolver}\n                renderHeader={renderHeader}\n            />\n        </>\n    );\n};\n"]}
+{"version":3,"file":"drop-down.js","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIvD;;;GAGG;AACH,MAAM,QAAQ,GAAsB,YAAiC,CAAC;AAEtE,SAAS,YAAY,CAAC,KAAwB;IAC1C,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,SAAS,EAAE,WAAW,GAAI,CAAC;AAC/D,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport { GtkDropDown } from \"@gtkx/jsx/gtk\";\nimport type { DropDownBaseProps } from \"./internal/drop-down.js\";\nimport type { DropDownProps } from \"./types.js\";\nimport { DropDownBase } from \"./internal/drop-down.js\";\n\ntype DropDownComponent = <T = unknown, S = unknown>(props: DropDownProps<T, S>) => ReactNode;\n\n/**\n * Renders a `Gtk.DropDown` backed by a collection model, with customizable renderers for the\n * collapsed display, popup rows, and popup section headers, and controlled selection.\n */\nconst DropDown: DropDownComponent = DropDownImpl as DropDownComponent;\n\nfunction DropDownImpl(props: DropDownBaseProps): ReactNode {\n    return <DropDownBase {...props} component={GtkDropDown} />;\n}\n\nexport { DropDown };\n"]}

package/dist/grid-view.d.ts

@@ -1,19 +1,9 @@
-import { type GtkGridViewProps } from "@gtkx/jsx/gtk";
-import { type ReactNode } from "react";
-import type { CollectionItemSizeProps, ControlledSelectionProps, ItemNode, RenderItemProps } from "./types.js";
-export type GridViewDeclarativeProps<T = unknown> = CollectionItemSizeProps & ControlledSelectionProps & {
-    items?: ItemNode<T>[] | undefined;
-    renderItem: (props: RenderItemProps<T>) => ReactNode;
-};
+import type { ReactNode } from "react";
+import type { GridViewProps } from "./types.js";
 /**
- * Props for {@link GridView}. Combines the underlying Gtk.GridView props with
- * declarative collection props: items, a per-cell renderItem, controlled selection,
- * and estimated item sizing.
+ * Renders a Gtk.GridView of uniform cells from declarative items, with per-cell
+ * rendering, controlled selection, and estimated item sizing.
  */
-export type GridViewProps<T = unknown> = Omit<GtkGridViewProps, "model" | "factory" | keyof GridViewDeclarativeProps<T>> & GridViewDeclarativeProps<T>;
-/**
- * Renders a Gtk.GridView: a scrollable grid of uniformly sized cells backed by a
- * collection model, with each cell drawn by renderItem.
- */
-export declare const GridView: <T = unknown>(props: GridViewProps<T>) => ReactNode;
+declare function GridView<T = unknown>(props: GridViewProps<T>): ReactNode;
+export { GridView };
 //# sourceMappingURL=grid-view.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"grid-view.d.ts","sourceRoot":"","sources":["../src/grid-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAKzD,OAAO,KAAK,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAI/G,MAAM,MAAM,wBAAwB,CAAC,CAAC,GAAG,OAAO,IAAI,uBAAuB,GACvE,wBAAwB,GAAG;IACvB,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC;IAClC,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CACxD,CAAC;AAEN;;;;GAIG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CACzC,gBAAgB,EAChB,OAAO,GAAG,SAAS,GAAG,MAAM,wBAAwB,CAAC,CAAC,CAAC,CAC1D,GACG,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,GAAG,OAAO,SAAS,aAAa,CAAC,CAAC,CAAC,KAAG,SA+C/D,CAAC"}
+{"version":3,"file":"grid-view.d.ts","sourceRoot":"","sources":["../src/grid-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAchD;;;GAGG;AACH,iBAAS,QAAQ,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAajE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/grid-view.js

@@ -1,36 +1,28 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { GtkGridView } from "@gtkx/jsx/gtk";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { useRef } from "react";
-import { CellRenderHost, itemRenderer } from "./cell.js";
-import { makeFactoryInstaller, useCellContainers } from "./hooks/use-cell-containers.js";
-import { useCollectionModel } from "./hooks/use-collection-model.js";
-import { useInstalledModel } from "./hooks/use-installed-model.js";
-const factoryInstaller = makeFactoryInstaller((widget, factory) => widget.setFactory(factory));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GtkGridView, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import { omit } from "@gtkx/utils";
+import { ItemPortals, useItemCells } from "./internal/cells.js";
+import { useCollection } from "./internal/use-collection.js";
+const GRID_VIEW_PROPS = [
+    "items",
+    "renderItem",
+    "selectedIds",
+    "onSelectionChanged",
+    "selectionMode",
+    "estimatedItemHeight",
+    "estimatedItemWidth",
+];
 /**
- * Renders a Gtk.GridView: a scrollable grid of uniformly sized cells backed by a
- * collection model, with each cell drawn by renderItem.
+ * Renders a Gtk.GridView of uniform cells from declarative items, with per-cell
+ * rendering, controlled selection, and estimated item sizing.
  */
-export const GridView = (props) => {
-    const { ref, items, renderItem, selectedIds, selectionMode, onSelectionChanged, estimatedItemHeight, estimatedItemWidth, ...intrinsicProps } = props;
-    const cellRenderer = itemRenderer(renderItem);
-    const widgetRef = useRef(null);
-    const setRef = useMergeRefs(ref, widgetRef);
-    const collection = useCollectionModel({
-        items,
-        sections: undefined,
-        selectionMode,
-        selectedIds,
-        onSelectionChanged,
-        renderHeader: undefined,
-    });
-    const itemStore = useCellContainers({
-        object: widgetRef,
-        installer: factoryInstaller,
-        estimatedHeight: estimatedItemHeight,
-        estimatedWidth: estimatedItemWidth,
-    });
-    useInstalledModel(widgetRef, collection.installedModel, (widget, value) => widget.setModel(value));
-    return (_jsxs(_Fragment, { children: [_jsx(GtkGridView, { ...intrinsicProps, ref: setRef }), _jsx(CellRenderHost, { store: itemStore, resolver: collection.resolver, render: cellRenderer })] }));
-};
+function GridView(props) {
+    const { renderItem, estimatedItemHeight, estimatedItemWidth } = props;
+    const rest = omit(props, GRID_VIEW_PROPS);
+    const size = { width: estimatedItemWidth ?? -1, height: estimatedItemHeight ?? -1 };
+    const { collection, selection } = useCollection({ ...props, flat: true });
+    const itemCells = useItemCells(size);
+    return (_jsxs(_Fragment, { children: [_jsx(GtkGridView, { model: selection, factory: _jsx(GtkSignalListItemFactory, { ...itemCells.handlers }), ...rest }), _jsx(ItemPortals, { store: itemCells, render: renderItem, collection: collection })] }));
+}
+export { GridView };
 //# sourceMappingURL=grid-view.js.map

package/dist/grid-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-view.js","sourceRoot":"","sources":["../src/grid-view.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAA4B,MAAM,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAqB,cAAc,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAGnE,MAAM,gBAAgB,GAAG,oBAAoB,CAAe,CAAC,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;AAmB7G;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAc,KAAuB,EAAa,EAAE;IACxE,MAAM,EACF,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,GAAG,cAAc,EACpB,GAAG,KAKH,CAAC;IAEF,MAAM,YAAY,GAA6B,YAAY,CAAa,UAAU,CAAC,CAAC;IAEpF,MAAM,SAAS,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,YAAY,CAAe,GAAG,EAAE,SAAS,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,kBAAkB,CAAa;QAC9C,KAAK;QACL,QAAQ,EAAE,SAAS;QACnB,aAAa;QACb,WAAW;QACX,kBAAkB;QAClB,YAAY,EAAE,SAAS;KAC1B,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,iBAAiB,CAAe;QAC9C,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,gBAAgB;QAC3B,eAAe,EAAE,mBAAmB;QACpC,cAAc,EAAE,kBAAkB;KACrC,CAAC,CAAC;IAEH,iBAAiB,CAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnG,OAAO,CACH,8BACI,KAAC,WAAW,OAAK,cAAc,EAAE,GAAG,EAAE,MAAM,GAAI,EAChD,KAAC,cAAc,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,GAAI,IAC1F,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkGridView, type GtkGridViewProps } from \"@gtkx/jsx/gtk\";\nimport { useMergeRefs } from \"@gtkx/react/internal\";\nimport { type ReactNode, type Ref, useRef } from \"react\";\nimport { type CellRenderer, CellRenderHost, itemRenderer } from \"./cell.js\";\nimport { makeFactoryInstaller, useCellContainers } from \"./hooks/use-cell-containers.js\";\nimport { useCollectionModel } from \"./hooks/use-collection-model.js\";\nimport { useInstalledModel } from \"./hooks/use-installed-model.js\";\nimport type { CollectionItemSizeProps, ControlledSelectionProps, ItemNode, RenderItemProps } from \"./types.js\";\n\nconst factoryInstaller = makeFactoryInstaller<Gtk.GridView>((widget, factory) => widget.setFactory(factory));\n\nexport type GridViewDeclarativeProps<T = unknown> = CollectionItemSizeProps &\n    ControlledSelectionProps & {\n        items?: ItemNode<T>[] | undefined;\n        renderItem: (props: RenderItemProps<T>) => ReactNode;\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 */\nexport type GridViewProps<T = unknown> = Omit<\n    GtkGridViewProps,\n    \"model\" | \"factory\" | keyof GridViewDeclarativeProps<T>\n> &\n    GridViewDeclarativeProps<T>;\n\n/**\n * Renders a Gtk.GridView: a scrollable grid of uniformly sized cells backed by a\n * collection model, with each cell drawn by renderItem.\n */\nexport const GridView = <T = unknown>(props: GridViewProps<T>): ReactNode => {\n    const {\n        ref,\n        items,\n        renderItem,\n        selectedIds,\n        selectionMode,\n        onSelectionChanged,\n        estimatedItemHeight,\n        estimatedItemWidth,\n        ...intrinsicProps\n    } = props as GridViewDeclarativeProps<T> & {\n        ref?: Ref<Gtk.GridView | null>;\n        estimatedItemHeight?: number;\n        estimatedItemWidth?: number;\n        [key: string]: unknown;\n    };\n\n    const cellRenderer: CellRenderer<T, unknown> = itemRenderer<T, unknown>(renderItem);\n\n    const widgetRef = useRef<Gtk.GridView | null>(null);\n    const setRef = useMergeRefs<Gtk.GridView>(ref, widgetRef);\n\n    const collection = useCollectionModel<T, unknown>({\n        items,\n        sections: undefined,\n        selectionMode,\n        selectedIds,\n        onSelectionChanged,\n        renderHeader: undefined,\n    });\n\n    const itemStore = useCellContainers<Gtk.GridView>({\n        object: widgetRef,\n        installer: factoryInstaller,\n        estimatedHeight: estimatedItemHeight,\n        estimatedWidth: estimatedItemWidth,\n    });\n\n    useInstalledModel(widgetRef, collection.installedModel, (widget, value) => widget.setModel(value));\n\n    return (\n        <>\n            <GtkGridView {...intrinsicProps} ref={setRef} />\n            <CellRenderHost store={itemStore} resolver={collection.resolver} render={cellRenderer} />\n        </>\n    );\n};\n"]}
+{"version":3,"file":"grid-view.js","sourceRoot":"","sources":["../src/grid-view.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,eAAe,GAAG;IACpB,OAAO;IACP,YAAY;IACZ,aAAa;IACb,oBAAoB;IACpB,eAAe;IACf,qBAAqB;IACrB,oBAAoB;CACoB,CAAC;AAE7C;;;GAGG;AACH,SAAS,QAAQ,CAAc,KAAuB;IAClD,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,kBAAkB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,mBAAmB,IAAI,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACH,8BACI,KAAC,WAAW,IAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAC,wBAAwB,OAAK,SAAS,CAAC,QAAQ,GAAI,KAAM,IAAI,GAAI,EAC1G,KAAC,WAAW,IAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,GAAI,IAC9E,CACN,CAAC;AACN,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport { GtkGridView, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { omit } from \"@gtkx/utils\";\nimport type { GridViewProps } from \"./types.js\";\nimport { ItemPortals, useItemCells } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\n\nconst GRID_VIEW_PROPS = [\n    \"items\",\n    \"renderItem\",\n    \"selectedIds\",\n    \"onSelectionChanged\",\n    \"selectionMode\",\n    \"estimatedItemHeight\",\n    \"estimatedItemWidth\",\n] as const satisfies (keyof GridViewProps)[];\n\n/**\n * Renders a Gtk.GridView of uniform cells from declarative items, with per-cell\n * rendering, controlled selection, and estimated item sizing.\n */\nfunction GridView<T = unknown>(props: GridViewProps<T>): ReactNode {\n    const { renderItem, estimatedItemHeight, estimatedItemWidth } = props;\n    const rest = omit(props, GRID_VIEW_PROPS);\n    const size = { width: estimatedItemWidth ?? -1, height: estimatedItemHeight ?? -1 };\n    const { collection, selection } = useCollection({ ...props, flat: true });\n    const itemCells = useItemCells(size);\n\n    return (\n        <>\n            <GtkGridView model={selection} factory={<GtkSignalListItemFactory {...itemCells.handlers} />} {...rest} />\n            <ItemPortals store={itemCells} render={renderItem} collection={collection} />\n        </>\n    );\n}\n\nexport { GridView };\n"]}

package/dist/index.d.ts

@@ -1,13 +1,7 @@
-export { type ColumnDef, type ColumnDefDeclarativeProps, ColumnView, type ColumnViewDeclarativeProps, type ColumnViewProps, type ColumnViewSortProps, } from "./column-view.js";
-export { ConstraintLayout, type ConstraintLayoutProps } from "./constraint-layout.js";
-export type { ConstraintGuideProps, ConstraintProps, ConstraintVflProps } from "./constraint-layout-apply.js";
-export { DropDown, type DropDownDeclarativeProps, type DropDownItemRenderer, type DropDownProps } from "./drop-down.js";
-export { Fixed, type FixedChildProps, type FixedPlacementProps, type FixedProps } from "./fixed.js";
-export { Grid, type GridChildProps, type GridPlacement, type GridProps } from "./grid.js";
-export { GridView, type GridViewDeclarativeProps, type GridViewProps } from "./grid-view.js";
-export { ListView, type ListViewDeclarativeProps, type ListViewProps } from "./list-view.js";
-export { Menu, type MenuItemsProps, type MenuProps } from "./menu.js";
-export { Overlay, type OverlayChildProps, type OverlayPlacementProps, type OverlayProps } from "./overlay.js";
-export { SizeGroup, type SizeGroupChildProps, type SizeGroupProps } from "./size-group.js";
-export type { ChildProps, CollectionItemSizeProps, ControlledExpansionProps, ControlledSelectionProps, ItemNode, MenuEntry, RenderItemProps, SectionNode, WidgetProps, } from "./types.js";
+export { ColumnView } from "./column-view.js";
+export { DropDown } from "./drop-down.js";
+export { GridView } from "./grid-view.js";
+export { ListView } from "./list-view.js";
+export { SizeGroup } from "./size-group.js";
+export type { ChildProps, Column, ColumnViewProps, DropDownProps, GridViewProps, HeaderRenderer, Item, ItemRenderer, ListViewProps, RenderHeaderArgs, RenderItemArgs, Section, SizeGroupChildProps, SizeGroupProps, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,SAAS,EACd,KAAK,yBAAyB,EAC9B,UAAU,EACV,KAAK,0BAA0B,EAC/B,KAAK,eAAe,EACpB,KAAK,mBAAmB,GAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACtF,YAAY,EAAE,oBAAoB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC9G,OAAO,EAAE,QAAQ,EAAE,KAAK,wBAAwB,EAAE,KAAK,oBAAoB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxH,OAAO,EAAE,KAAK,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACpG,OAAO,EAAE,IAAI,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAE,KAAK,wBAAwB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,QAAQ,EAAE,KAAK,wBAAwB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC3F,YAAY,EACR,UAAU,EACV,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,QAAQ,EACR,SAAS,EACT,eAAe,EACf,WAAW,EACX,WAAW,GACd,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EACR,UAAU,EACV,MAAM,EACN,eAAe,EACf,aAAa,EACb,aAAa,EACb,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,mBAAmB,EACnB,cAAc,GACjB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,11 +1,6 @@
-export { ColumnView, } from "./column-view.js";
-export { ConstraintLayout } from "./constraint-layout.js";
+export { ColumnView } from "./column-view.js";
 export { DropDown } from "./drop-down.js";
-export { Fixed } from "./fixed.js";
-export { Grid } from "./grid.js";
 export { GridView } from "./grid-view.js";
 export { ListView } from "./list-view.js";
-export { Menu } from "./menu.js";
-export { Overlay } from "./overlay.js";
 export { SizeGroup } from "./size-group.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGH,UAAU,GAIb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAA8B,MAAM,wBAAwB,CAAC;AAEtF,OAAO,EAAE,QAAQ,EAAgF,MAAM,gBAAgB,CAAC;AACxH,OAAO,EAAE,KAAK,EAAmE,MAAM,YAAY,CAAC;AACpG,OAAO,EAAE,IAAI,EAA2D,MAAM,WAAW,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAqD,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,QAAQ,EAAqD,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAuC,MAAM,WAAW,CAAC;AACtE,OAAO,EAAE,OAAO,EAAyE,MAAM,cAAc,CAAC;AAC9G,OAAO,EAAE,SAAS,EAAiD,MAAM,iBAAiB,CAAC","sourcesContent":["export {\n    type ColumnDef,\n    type ColumnDefDeclarativeProps,\n    ColumnView,\n    type ColumnViewDeclarativeProps,\n    type ColumnViewProps,\n    type ColumnViewSortProps,\n} from \"./column-view.js\";\nexport { ConstraintLayout, type ConstraintLayoutProps } from \"./constraint-layout.js\";\nexport type { ConstraintGuideProps, ConstraintProps, ConstraintVflProps } from \"./constraint-layout-apply.js\";\nexport { DropDown, type DropDownDeclarativeProps, type DropDownItemRenderer, type DropDownProps } from \"./drop-down.js\";\nexport { Fixed, type FixedChildProps, type FixedPlacementProps, type FixedProps } from \"./fixed.js\";\nexport { Grid, type GridChildProps, type GridPlacement, type GridProps } from \"./grid.js\";\nexport { GridView, type GridViewDeclarativeProps, type GridViewProps } from \"./grid-view.js\";\nexport { ListView, type ListViewDeclarativeProps, type ListViewProps } from \"./list-view.js\";\nexport { Menu, type MenuItemsProps, type MenuProps } from \"./menu.js\";\nexport { Overlay, type OverlayChildProps, type OverlayPlacementProps, type OverlayProps } from \"./overlay.js\";\nexport { SizeGroup, type SizeGroupChildProps, type SizeGroupProps } from \"./size-group.js\";\nexport type {\n    ChildProps,\n    CollectionItemSizeProps,\n    ControlledExpansionProps,\n    ControlledSelectionProps,\n    ItemNode,\n    MenuEntry,\n    RenderItemProps,\n    SectionNode,\n    WidgetProps,\n} from \"./types.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { ColumnView } from \"./column-view.js\";\nexport { DropDown } from \"./drop-down.js\";\nexport { GridView } from \"./grid-view.js\";\nexport { ListView } from \"./list-view.js\";\nexport { SizeGroup } from \"./size-group.js\";\nexport type {\n    ChildProps,\n    Column,\n    ColumnViewProps,\n    DropDownProps,\n    GridViewProps,\n    HeaderRenderer,\n    Item,\n    ItemRenderer,\n    ListViewProps,\n    RenderHeaderArgs,\n    RenderItemArgs,\n    Section,\n    SizeGroupChildProps,\n    SizeGroupProps,\n} from \"./types.js\";\n"]}

package/dist/internal/cells.d.ts

@@ -0,0 +1,50 @@
+import type * as GObject from "@gtkx/gi/gobject";
+import type { ReactNode } from "react";
+import * as Gtk from "@gtkx/gi/gtk";
+import type { HeaderRenderer, ItemRenderer } from "../types.js";
+import type { Collection } from "./collection.js";
+type CellSize = {
+    width: number;
+    height: number;
+};
+type CellHost = GObject.Object & {
+    getChild: () => Gtk.Widget | null;
+    setChild: (child: Gtk.Widget | null) => void;
+};
+type CellEntry<C extends CellHost> = {
+    key: string;
+    cell: C;
+    item: GObject.Object | null;
+    listeners: Set<() => void>;
+    subscribe: (onChange: () => void) => () => void;
+    getItem: () => GObject.Object | null;
+};
+type FactoryHandlers = {
+    onSetup: (cell: GObject.Object) => void;
+    onBind: (cell: GObject.Object) => void;
+    onUnbind: (cell: GObject.Object) => void;
+    onTeardown: (cell: GObject.Object) => void;
+};
+type CellStore<C extends CellHost> = {
+    handlers: FactoryHandlers;
+    setSize: (size: CellSize) => void;
+    subscribe: (onChange: () => void) => () => void;
+    getSnapshot: () => CellEntry<C>[];
+};
+type ItemPortalsProps = {
+    store: CellStore<Gtk.ListItem>;
+    render: ItemRenderer<never>;
+    collection: Collection;
+    expandedIds?: string[] | null | undefined;
+};
+type HeaderPortalsProps = {
+    store: CellStore<Gtk.ListHeader>;
+    render: HeaderRenderer<never>;
+    collection: Collection;
+};
+declare function useItemCells(size: CellSize): CellStore<Gtk.ListItem>;
+declare function useHeaderCells(size: CellSize): CellStore<Gtk.ListHeader>;
+declare const ItemPortals: ({ store, render, collection, expandedIds }: ItemPortalsProps) => ReactNode;
+declare const HeaderPortals: ({ store, render, collection }: HeaderPortalsProps) => ReactNode;
+export { useItemCells, useHeaderCells, ItemPortals, HeaderPortals, type CellSize, type CellStore, };
+//# sourceMappingURL=cells.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"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"}

package/dist/internal/cells.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Gtk from "@gtkx/gi/gtk";
+import { GtkTreeExpander } from "@gtkx/jsx/gtk";
+import { createPortal, useProperty } from "@gtkx/react";
+import { memo, useLayoutEffect, useState, useSyncExternalStore } from "react";
+import { getId } from "./collection-model.js";
+const ItemCell = memo(ItemCellImpl);
+const HeaderCell = memo(HeaderCellImpl);
+const isListItem = (value) => value instanceof Gtk.ListItem;
+const isListHeader = (value) => value instanceof Gtk.ListHeader;
+const placeholder = (size) => new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });
+function notifyEntry(entry) {
+    for (const listener of entry.listeners) {
+        listener();
+    }
+}
+function notifyRoster(state) {
+    state.snapshot = null;
+    for (const listener of state.listeners) {
+        listener();
+    }
+}
+function createEntry(state, cell) {
+    state.serial += 1;
+    const entry = {
+        key: `gtkx-cell-${String(state.serial)}`,
+        cell,
+        item: null,
+        listeners: new Set(),
+        subscribe: (onChange) => {
+            entry.listeners.add(onChange);
+            return () => {
+                entry.listeners.delete(onChange);
+            };
+        },
+        getItem: () => entry.item,
+    };
+    return entry;
+}
+function setupCell(state, cell) {
+    cell.setChild(placeholder(state.size));
+    state.entries.set(cell, createEntry(state, cell));
+    notifyRoster(state);
+}
+function teardownCell(state, cell) {
+    if (state.entries.delete(cell)) {
+        notifyRoster(state);
+    }
+}
+function writeBinding(state, cell, item) {
+    const entry = state.entries.get(cell);
+    if (entry === undefined) {
+        return;
+    }
+    entry.item = item;
+    notifyEntry(entry);
+}
+function boundItem(cell) {
+    if (cell instanceof Gtk.ListItem) {
+        return cell.getItem();
+    }
+    return cell instanceof Gtk.ListHeader ? cell.getItem() : null;
+}
+function bindCell(state, cell) {
+    if (cell.getChild() === null) {
+        cell.setChild(placeholder(state.size));
+    }
+    writeBinding(state, cell, boundItem(cell));
+}
+function subscribeRoster(state, onChange) {
+    state.listeners.add(onChange);
+    return () => {
+        state.listeners.delete(onChange);
+    };
+}
+function rosterSnapshot(state) {
+    state.snapshot ??= state.entries.values().toArray();
+    return state.snapshot;
+}
+function guarded(isCell, run) {
+    return (cell) => {
+        if (isCell(cell)) {
+            run(cell);
+        }
+    };
+}
+function createHandlers(state, isCell) {
+    return {
+        onSetup: guarded(isCell, (cell) => {
+            setupCell(state, cell);
+        }),
+        onBind: guarded(isCell, (cell) => {
+            bindCell(state, cell);
+        }),
+        onUnbind: guarded(isCell, (cell) => {
+            writeBinding(state, cell, null);
+        }),
+        onTeardown: guarded(isCell, (cell) => {
+            teardownCell(state, cell);
+        }),
+    };
+}
+function createCellStore(isCell, size) {
+    const state = {
+        size,
+        entries: new Map(),
+        snapshot: null,
+        listeners: new Set(),
+        serial: 0,
+    };
+    return {
+        handlers: createHandlers(state, isCell),
+        setSize: (next) => {
+            state.size = next;
+        },
+        subscribe: (onChange) => subscribeRoster(state, onChange),
+        getSnapshot: () => rosterSnapshot(state),
+    };
+}
+function useCellStore(isCell, size) {
+    const [store] = useState(() => createCellStore(isCell, size));
+    useLayoutEffect(() => {
+        store.setSize(size);
+    });
+    return store;
+}
+function useItemCells(size) {
+    return useCellStore(isListItem, size);
+}
+function useHeaderCells(size) {
+    return useCellStore(isListHeader, size);
+}
+function isRowWanted(options, item) {
+    const { expandedIds } = options;
+    return expandedIds == null ? options.isRowExpanded === true : expandedIds.includes(item.id);
+}
+function itemArgs(item, options) {
+    const args = { item: item.value, index: options.position ?? 0 };
+    const row = options.row;
+    if (row === null) {
+        return args;
+    }
+    args.depth = row.getDepth();
+    if (row.isExpandable()) {
+        args.isExpanded = isRowWanted(options, item);
+    }
+    return args;
+}
+function wrapExpander(item, row, content) {
+    const expander = row === null
+        ? (content)
+        : (_jsx(GtkTreeExpander, { listRow: row, hideExpander: item.hideExpander ?? false, indentForDepth: item.indentForDepth ?? true, indentForIcon: item.indentForIcon ?? true, children: content }));
+    return expander;
+}
+function itemBody(options) {
+    const id = getId(options.item);
+    const item = id === null ? undefined : options.collection.itemFor(id);
+    if (item === undefined) {
+        return null;
+    }
+    const render = options.render;
+    return wrapExpander(item, options.row, render(itemArgs(item, options)));
+}
+function ItemCellImpl({ entry, render, collection, expandedIds }) {
+    const item = useSyncExternalStore(entry.subscribe, entry.getItem);
+    const position = useProperty(entry.cell, "position");
+    const row = item instanceof Gtk.TreeListRow ? item : null;
+    const isRowExpanded = useProperty(row, "expanded");
+    const body = itemBody({ item, position, row, isRowExpanded, render, collection, expandedIds });
+    return createPortal(body, entry.cell, entry.key);
+}
+function HeaderCellImpl({ entry, render, collection }) {
+    const item = useSyncExternalStore(entry.subscribe, entry.getItem);
+    const id = getId(item);
+    const renderHeader = render;
+    const body = id === null ? null : renderHeader({ section: collection.sectionFor(id) });
+    return createPortal(body, entry.cell, entry.key);
+}
+function usePortalEntries(store) {
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+const ItemPortals = ({ store, render, collection, expandedIds }) => usePortalEntries(store).map((entry) => (_jsx(ItemCell, { entry: entry, render: render, collection: collection, expandedIds: expandedIds }, entry.key)));
+const HeaderPortals = ({ store, render, collection }) => usePortalEntries(store).map((entry) => (_jsx(HeaderCell, { entry: entry, render: render, collection: collection }, entry.key)));
+export { useItemCells, useHeaderCells, ItemPortals, HeaderPortals, };
+//# sourceMappingURL=cells.js.map

package/dist/internal/cells.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cells.js","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"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","sourcesContent":["import type * as GObject from \"@gtkx/gi/gobject\";\nimport type { ReactNode } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkTreeExpander } from \"@gtkx/jsx/gtk\";\nimport { createPortal, useProperty } from \"@gtkx/react\";\nimport { memo, useLayoutEffect, useState, useSyncExternalStore } from \"react\";\nimport type { HeaderRenderer, Item, ItemRenderer, RenderItemArgs } from \"../types.js\";\nimport type { Collection } from \"./collection.js\";\nimport { getId } from \"./collection-model.js\";\n\ntype CellSize = {\n    width: number;\n    height: number;\n};\n\ntype CellHost = GObject.Object & {\n    getChild: () => Gtk.Widget | null;\n    setChild: (child: Gtk.Widget | null) => void;\n};\n\ntype CellEntry<C extends CellHost> = {\n    key: string;\n    cell: C;\n    item: GObject.Object | null;\n    listeners: Set<() => void>;\n    subscribe: (onChange: () => void) => () => void;\n    getItem: () => GObject.Object | null;\n};\n\ntype FactoryHandlers = {\n    onSetup: (cell: GObject.Object) => void;\n    onBind: (cell: GObject.Object) => void;\n    onUnbind: (cell: GObject.Object) => void;\n    onTeardown: (cell: GObject.Object) => void;\n};\n\ntype CellStore<C extends CellHost> = {\n    handlers: FactoryHandlers;\n    setSize: (size: CellSize) => void;\n    subscribe: (onChange: () => void) => () => void;\n    getSnapshot: () => CellEntry<C>[];\n};\n\ntype StoreState<C extends CellHost> = {\n    size: CellSize;\n    entries: Map<C, CellEntry<C>>;\n    snapshot: CellEntry<C>[] | null;\n    listeners: Set<() => void>;\n    serial: number;\n};\n\ntype CellGuard<C extends CellHost> = (value: GObject.Object) => value is C;\n\ntype ItemBodyOptions = {\n    item: GObject.Object | null;\n    position: number | undefined;\n    row: Gtk.TreeListRow | null;\n    isRowExpanded: boolean | undefined;\n    render: ItemRenderer<never>;\n    collection: Collection;\n    expandedIds: string[] | null | undefined;\n};\n\ntype ItemCellProps = {\n    entry: CellEntry<Gtk.ListItem>;\n    render: ItemRenderer<never>;\n    collection: Collection;\n    expandedIds: string[] | null | undefined;\n};\n\ntype ItemPortalsProps = {\n    store: CellStore<Gtk.ListItem>;\n    render: ItemRenderer<never>;\n    collection: Collection;\n    expandedIds?: string[] | null | undefined;\n};\n\ntype HeaderCellProps = {\n    entry: CellEntry<Gtk.ListHeader>;\n    render: HeaderRenderer<never>;\n    collection: Collection;\n};\n\ntype HeaderPortalsProps = {\n    store: CellStore<Gtk.ListHeader>;\n    render: HeaderRenderer<never>;\n    collection: Collection;\n};\n\nconst ItemCell = memo(ItemCellImpl);\nconst HeaderCell = memo(HeaderCellImpl);\n\nconst isListItem = (value: GObject.Object): value is Gtk.ListItem => value instanceof Gtk.ListItem;\nconst isListHeader = (value: GObject.Object): value is Gtk.ListHeader => value instanceof Gtk.ListHeader;\n\nconst placeholder = (size: CellSize): Gtk.Widget =>\n    new Gtk.Box({ widthRequest: size.width, heightRequest: size.height });\n\nfunction notifyEntry<C extends CellHost>(entry: CellEntry<C>): void {\n    for (const listener of entry.listeners) {\n        listener();\n    }\n}\n\nfunction notifyRoster<C extends CellHost>(state: StoreState<C>): void {\n    state.snapshot = null;\n\n    for (const listener of state.listeners) {\n        listener();\n    }\n}\n\nfunction createEntry<C extends CellHost>(state: StoreState<C>, cell: C): CellEntry<C> {\n    state.serial += 1;\n\n    const entry: CellEntry<C> = {\n        key: `gtkx-cell-${String(state.serial)}`,\n        cell,\n        item: null,\n        listeners: new Set(),\n        subscribe: (onChange) => {\n            entry.listeners.add(onChange);\n\n            return () => {\n                entry.listeners.delete(onChange);\n            };\n        },\n        getItem: () => entry.item,\n    };\n\n    return entry;\n}\n\nfunction setupCell<C extends CellHost>(state: StoreState<C>, cell: C): void {\n    cell.setChild(placeholder(state.size));\n    state.entries.set(cell, createEntry(state, cell));\n    notifyRoster(state);\n}\n\nfunction teardownCell<C extends CellHost>(state: StoreState<C>, cell: C): void {\n    if (state.entries.delete(cell)) {\n        notifyRoster(state);\n    }\n}\n\nfunction writeBinding<C extends CellHost>(state: StoreState<C>, cell: C, item: GObject.Object | null): void {\n    const entry = state.entries.get(cell);\n\n    if (entry === undefined) {\n        return;\n    }\n\n    entry.item = item;\n    notifyEntry(entry);\n}\n\nfunction boundItem(cell: CellHost): GObject.Object | null {\n    if (cell instanceof Gtk.ListItem) {\n        return cell.getItem();\n    }\n\n    return cell instanceof Gtk.ListHeader ? cell.getItem() : null;\n}\n\nfunction bindCell<C extends CellHost>(state: StoreState<C>, cell: C): void {\n    if (cell.getChild() === null) {\n        cell.setChild(placeholder(state.size));\n    }\n\n    writeBinding(state, cell, boundItem(cell));\n}\n\nfunction subscribeRoster<C extends CellHost>(state: StoreState<C>, onChange: () => void): () => void {\n    state.listeners.add(onChange);\n\n    return () => {\n        state.listeners.delete(onChange);\n    };\n}\n\nfunction rosterSnapshot<C extends CellHost>(state: StoreState<C>): CellEntry<C>[] {\n    state.snapshot ??= state.entries.values().toArray();\n\n    return state.snapshot;\n}\n\nfunction guarded<C extends CellHost>(isCell: CellGuard<C>, run: (cell: C) => void): (cell: GObject.Object) => void {\n    return (cell) => {\n        if (isCell(cell)) {\n            run(cell);\n        }\n    };\n}\n\nfunction createHandlers<C extends CellHost>(state: StoreState<C>, isCell: CellGuard<C>): FactoryHandlers {\n    return {\n        onSetup: guarded(isCell, (cell) => {\n            setupCell(state, cell);\n        }),\n        onBind: guarded(isCell, (cell) => {\n            bindCell(state, cell);\n        }),\n        onUnbind: guarded(isCell, (cell) => {\n            writeBinding(state, cell, null);\n        }),\n        onTeardown: guarded(isCell, (cell) => {\n            teardownCell(state, cell);\n        }),\n    };\n}\n\nfunction createCellStore<C extends CellHost>(isCell: CellGuard<C>, size: CellSize): CellStore<C> {\n    const state: StoreState<C> = {\n        size,\n        entries: new Map(),\n        snapshot: null,\n        listeners: new Set(),\n        serial: 0,\n    };\n\n    return {\n        handlers: createHandlers(state, isCell),\n        setSize: (next) => {\n            state.size = next;\n        },\n        subscribe: (onChange) => subscribeRoster(state, onChange),\n        getSnapshot: () => rosterSnapshot(state),\n    };\n}\n\nfunction useCellStore<C extends CellHost>(isCell: CellGuard<C>, size: CellSize): CellStore<C> {\n    const [store] = useState(() => createCellStore(isCell, size));\n\n    useLayoutEffect(() => {\n        store.setSize(size);\n    });\n\n    return store;\n}\n\nfunction useItemCells(size: CellSize): CellStore<Gtk.ListItem> {\n    return useCellStore(isListItem, size);\n}\n\nfunction useHeaderCells(size: CellSize): CellStore<Gtk.ListHeader> {\n    return useCellStore(isListHeader, size);\n}\n\nfunction isRowWanted(options: ItemBodyOptions, item: Item): boolean {\n    const { expandedIds } = options;\n\n    return expandedIds == null ? options.isRowExpanded === true : expandedIds.includes(item.id);\n}\n\nfunction itemArgs(item: Item, options: ItemBodyOptions): RenderItemArgs<unknown> {\n    const args: RenderItemArgs<unknown> = { item: item.value, index: options.position ?? 0 };\n    const row = options.row;\n\n    if (row === null) {\n        return args;\n    }\n\n    args.depth = row.getDepth();\n\n    if (row.isExpandable()) {\n        args.isExpanded = isRowWanted(options, item);\n    }\n\n    return args;\n}\n\nfunction wrapExpander(item: Item, row: Gtk.TreeListRow | null, content: ReactNode): ReactNode {\n    const expander: ReactNode =\n        row === null\n            ? (\n                    content\n                )\n            : (\n                    <GtkTreeExpander\n                        listRow={row}\n                        hideExpander={item.hideExpander ?? false}\n                        indentForDepth={item.indentForDepth ?? true}\n                        indentForIcon={item.indentForIcon ?? true}\n                    >\n                        {content}\n                    </GtkTreeExpander>\n                );\n\n    return expander;\n}\n\nfunction itemBody(options: ItemBodyOptions): ReactNode {\n    const id = getId(options.item);\n    const item = id === null ? undefined : options.collection.itemFor(id);\n\n    if (item === undefined) {\n        return null;\n    }\n\n    const render = options.render as ItemRenderer<unknown>;\n\n    return wrapExpander(item, options.row, render(itemArgs(item, options)));\n}\n\nfunction ItemCellImpl({ entry, render, collection, expandedIds }: ItemCellProps): ReactNode {\n    const item = useSyncExternalStore(entry.subscribe, entry.getItem);\n    const position = useProperty(entry.cell, \"position\");\n    const row = item instanceof Gtk.TreeListRow ? item : null;\n    const isRowExpanded = useProperty(row, \"expanded\");\n    const body = itemBody({ item, position, row, isRowExpanded, render, collection, expandedIds });\n\n    return createPortal(body, entry.cell, entry.key);\n}\n\nfunction HeaderCellImpl({ entry, render, collection }: HeaderCellProps): ReactNode {\n    const item = useSyncExternalStore(entry.subscribe, entry.getItem);\n    const id = getId(item);\n    const renderHeader = render as HeaderRenderer<unknown>;\n    const body = id === null ? null : renderHeader({ section: collection.sectionFor(id) });\n\n    return createPortal(body, entry.cell, entry.key);\n}\n\nfunction usePortalEntries<C extends CellHost>(store: CellStore<C>): CellEntry<C>[] {\n    return useSyncExternalStore(store.subscribe, store.getSnapshot);\n}\n\nconst ItemPortals = ({ store, render, collection, expandedIds }: ItemPortalsProps): ReactNode =>\n    usePortalEntries(store).map((entry) => (\n        <ItemCell key={entry.key} entry={entry} render={render} collection={collection} expandedIds={expandedIds} />\n    ));\n\nconst HeaderPortals = ({ store, render, collection }: HeaderPortalsProps): ReactNode =>\n    usePortalEntries(store).map((entry) => (\n        <HeaderCell key={entry.key} entry={entry} render={render} collection={collection} />\n    ));\n\nexport {\n    useItemCells,\n    useHeaderCells,\n    ItemPortals,\n    HeaderPortals,\n    type CellSize,\n    type CellStore,\n};\n"]}

package/dist/internal/collection-index.d.ts

@@ -0,0 +1,21 @@
+import type { Item, Section } from "../types.js";
+type Level = {
+    key: string;
+    ids: string[];
+    isExpandable: boolean[];
+};
+type CollectionIndex = {
+    isTree: boolean;
+    size: number;
+    groups: Level[];
+    children: Map<string, Level>;
+    has: (id: string) => boolean;
+    itemFor: (id: string) => Item | undefined;
+    sectionFor: (id: string) => unknown;
+    positionFor: (id: string) => number;
+};
+declare const ROOT_LEVEL_KEY = "";
+declare const childLevelKey: (id: string) => string;
+declare function createCollectionIndex(items: Item[] | undefined, sections: Section[] | undefined, isFlat: boolean): CollectionIndex;
+export { createCollectionIndex, childLevelKey, ROOT_LEVEL_KEY, type CollectionIndex, type Level };
+//# sourceMappingURL=collection-index.d.ts.map