@octanejs/window 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Brian Vaughn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# @octanejs/window
+
+The exact [`react-window@2.3.0`](https://github.com/bvaughn/react-window) API for
+the [Octane](https://github.com/octanejs/octane) renderer. Change the package
+import and keep the current v2 `List`, `Grid`, sizing, callback, ref, and
+imperative-scrolling contracts.
+
+```diff
+-import { List } from 'react-window';
++import { List } from '@octanejs/window';
+```
+
+```tsx
+import { Grid, List, type CellComponentProps, type RowComponentProps } from '@octanejs/window';
+
+function Row({ index, style, ariaAttributes }: RowComponentProps) {
+	return <div {...ariaAttributes} style={style}>{'Row ' + index}</div>;
+}
+
+function Cell({ columnIndex, rowIndex, style, ariaAttributes }: CellComponentProps) {
+	return <div {...ariaAttributes} style={style}>{`${rowIndex}:${columnIndex}`}</div>;
+}
+
+export function VirtualizedData() @{
+	<section>
+		<List
+			defaultHeight={300}
+			rowComponent={Row}
+			rowCount={10_000}
+			rowHeight={32}
+			rowProps={{}}
+			style={{ height: 300 }}
+		/>
+		<Grid
+			cellComponent={Cell}
+			cellProps={{}}
+			columnCount={100}
+			columnWidth={100}
+			defaultHeight={300}
+			defaultWidth={600}
+			rowCount={10_000}
+			rowHeight={32}
+			style={{ height: 300, width: 600 }}
+		/>
+	</section>
+}
+```
+
+The package includes all eight v2 runtime exports and all eight public type
+exports from the pinned release. Fixed, percentage, function, and dynamic row
+sizes; overscan; RTL grids; ARIA attributes; custom root tags; imperative refs;
+SSR; and hydration are covered by executable parity evidence.
+
+## Version boundary
+
+This package targets the current `react-window` v2 API. The older v1
+`FixedSizeList`, `VariableSizeList`, `FixedSizeGrid`, and `VariableSizeGrid`
+names are not exports of `react-window@2.3.0` and are intentionally not added
+here. Applications still using those names need a v1-specific migration before
+changing imports.
+
+## Renderer differences
+
+Consumer-visible rendering, keyed state, scrolling, measurement, and final DOM
+match the React package. Two renderer-internal observations differ:
+
+- Octane reserves the second raw function-component invocation argument for its
+  internal block ABI. Tests and instrumentation should assert component props,
+  not React's undocumented `undefined` second argument.
+- After keyed reordering, sibling effect order and equal-prop rerender counts
+  can differ. Do not depend on sibling effect ordering; keyed state and DOM
+  identity are preserved.
+
+The pinned source, npm declaration bundle, license, test inventory, allowed
+adaptations, and executable pristine/adapted/type/differential/SSR/hydration
+lanes are recorded in [`UPSTREAM.md`](./UPSTREAM.md) and
+[`audit/react-parity.json`](./audit/react-parity.json).
+
+## License
+
+MIT — contains source derived from
+[react-window](https://github.com/bvaughn/react-window) (MIT, © Brian Vaughn),
+adapted for Octane.
+
+## Status
+
+Current scope and verification status are tracked in the generated
+[bindings status table](../../docs/bindings-status.md), sourced from
+[`status.json`](./status.json).

package/UPSTREAM.md

@@ -0,0 +1,116 @@
+# react-window upstream contract
+
+## Immutable pin
+
+| Field | Value |
+| --- | --- |
+| Package | `react-window` |
+| Version | `2.3.0` |
+| Repository | `https://github.com/bvaughn/react-window.git` |
+| Annotated tag | `2.3.0` (`c8f17487…`) |
+| Dereferenced tag commit | `4d9eebbb510262b3b7e95463cf49a10de53ea77d` |
+| npm integrity | `sha512-FW6TIpaOH646k51X7yE+LSCWGkt5Pfsnc1fVyq/sCI9h0pTqmMiBXM04pzFKg3Bt7NGkeV6kqbU8d/QjmFS7Ug==` |
+| npm shasum | `92fefee75b7de56a31204dfffc492b84136e4783` |
+| npm tarball SHA-256 | `c62b0568794a8cf5f523fa6fd68f83261cfdc9bb7578e918ca2ae1181fc44623` |
+| Canonical tag archive SHA-256 | `d0b66c0138c6355051a75086ce0681aa5880249c0d14f1e9759185daee16e452` |
+| License | MIT, copyright Brian Vaughn |
+
+The byte-exact tagged `lib/` tree, published npm declaration bundle, repository
+package metadata, and license are vendored under `upstream/` for provenance and
+parity evidence. They are audit inputs only and must remain excluded from the
+published package.
+
+Run `pnpm --dir packages/window upstream:verify` to verify all 58 vendored
+artifacts, the exact file set, the published declaration bundle, the 14 upstream
+test artifacts and their 117 test registrations, package metadata, and the
+complete root export inventory.
+
+## Public v2.3.0 surface
+
+Runtime exports: `Grid`, `List`, `getScrollbarSize`, `useDynamicRowHeight`,
+`useGridCallbackRef`, `useGridRef`, `useListCallbackRef`, and `useListRef`.
+
+Type exports: `Align`, `CellComponentProps`, `DynamicRowHeight`,
+`GridImperativeAPI`, `GridProps`, `ListImperativeAPI`, `ListProps`, and
+`RowComponentProps`.
+
+The v1 `FixedSizeList`, `VariableSizeList`, `FixedSizeGrid`, and
+`VariableSizeGrid` names are not part of this pin and are intentionally outside
+the binding contract.
+
+## Source boundary and module disposition
+
+The immutable boundary is every file under upstream `lib/`, plus `src/constants.ts`,
+`vitest.setup.js`, `package.json`, and the MIT license. Production modules are
+ported source-correspondently under `src/`; test modules are either executed
+byte-exact in the pristine lane or generated into `tests/upstream/` using the
+audited transformations in `audit/adapted-transformations.json`. Upstream test
+utilities remain byte-locked inputs and are mapped to the adapted utilities by
+the generator. No vendored file is published.
+
+| Upstream module class | Octane disposition | Evidence |
+| --- | --- | --- |
+| `lib/components/**`, `lib/core/**`, `lib/hooks/**`, `lib/utils/**` production files | Source-correspondent port in `src/**`; React imports and renderer syntax are the only framework adaptations | `audit/adapted-transformations.json`, `tests/audit/adapted.test.mjs` |
+| `lib/**/*.test.{ts,tsx}` | Unchanged pristine execution and generated adapted execution | `audit/pristine-runtime.json`, `audit/adapted-runtime.json` |
+| `lib/utils/test/**`, `vitest.setup.js` | Unchanged pristine support; source-correspondent adapted support | `upstream/SHA256SUMS`, `tests/generate-adapted-tests.mjs` |
+| Published declaration bundle | Unchanged pristine oracle; identical shared assertion program targets Octane source | `audit/type-contract.json`, `typetests/**` |
+| Repository metadata and license | Vendored provenance only | `tests/audit/upstream.test.mjs` |
+
+## Export crosswalk
+
+| Public export | Kind | Classification | Octane evidence |
+| --- | --- | --- | --- |
+| `Grid` | runtime | Exact component port | upstream Grid suites, runtime, differential, SSR, hydration |
+| `List` | runtime | Exact component port | upstream List suites, runtime, differential, SSR, hydration |
+| `getScrollbarSize` | runtime | Source-identical utility | upstream inventory and shared type contract |
+| `useDynamicRowHeight` | runtime | Exact hook port with compiler-slot plumbing | upstream hook suite, runtime dynamic-height suite |
+| `useGridCallbackRef` | runtime | Exact public React hook signature; Octane state slot internally | shared types and grid initializer runtime case |
+| `useGridRef` | runtime | Exact public React hook signature; Octane ref slot internally | shared types and grid initializer runtime case |
+| `useListCallbackRef` | runtime | Exact public React hook signature; Octane state slot internally | shared types and list initializer runtime case |
+| `useListRef` | runtime | Exact public React hook signature; Octane ref slot internally | shared types and list initializer runtime case |
+| `Align` | type | Exact published declaration | shared type contract group `utilities` |
+| `CellComponentProps` | type | Exact published declaration | shared type contract group `component-props` |
+| `DynamicRowHeight` | type | Exact published declaration | shared type contract group `dynamic-height` |
+| `GridImperativeAPI` | type | Exact published declaration | shared type contract groups `ref-hooks`, `imperative-api` |
+| `GridProps` | type | Exact published declaration | shared type contract groups `list-grid-props`, `forbidden-generated-props` |
+| `ListImperativeAPI` | type | Exact published declaration | shared type contract groups `ref-hooks`, `imperative-api` |
+| `ListProps` | type | Exact published declaration | shared type contract groups `list-grid-props`, `forbidden-generated-props` |
+| `RowComponentProps` | type | Exact published declaration | shared type contract group `component-props` |
+
+## Upstream test crosswalk
+
+Every row runs unchanged in `react-window-pristine` and as a generator-produced,
+audited adaptation in `react-window-adapted`; the inventories prove all 117
+registered cases are unique and executed.
+
+| Upstream test file | Pristine disposition | Adapted disposition |
+| --- | --- | --- |
+| `components/grid/Grid.test.tsx` | byte-exact | generated framework adaptation |
+| `components/list/List.test.tsx` | byte-exact | generated framework adaptation |
+| `components/list/useDynamicRowHeight.test.ts` | byte-exact | generated framework adaptation |
+| `core/createCachedBounds.test.ts` | byte-exact | generated import adaptation |
+| `core/getEstimatedSize.test.ts` | byte-exact | generated import adaptation |
+| `core/getOffsetForIndex.test.ts` | byte-exact | generated import adaptation |
+| `core/getStartStopIndices.test.ts` | byte-exact | generated import adaptation |
+| `core/useCachedBounds.test.ts` | byte-exact | generated hook adaptation |
+| `core/useVirtualizer.test.ts` | byte-exact | generated hook adaptation |
+| `hooks/useMemoizedObject.test.ts` | byte-exact | generated hook adaptation |
+| `hooks/useResizeObserver.test.ts` | byte-exact | generated hook adaptation |
+| `hooks/useStableCallback.test.tsx` | byte-exact | generated hook adaptation |
+| `utils/parseNumericStyleValue.test.ts` | byte-exact | generated import adaptation |
+| `utils/shallowCompare.test.ts` | byte-exact | generated import adaptation |
+
+## Port-authored evidence crosswalk
+
+| Authored evidence | Classification | React-to-Octane pairing / citation |
+| --- | --- | --- |
+| `tests/runtime/{grid,list,dynamic-height}.test.ts` | Adapted consumer behavior | Supplements the exact upstream suites with Octane-native DOM, imperative API, initializer, and measurement coverage |
+| `tests/differential/parity.test.ts` | Differential | One shared TSX fixture is compiled for React and Octane; the rig compares serialized DOM after native scrolling |
+| `tests/ssr/ssr.test.ts` | Adapted SSR | Exercises the same public `List`/`Grid` defaults pinned by the declaration and upstream component suites |
+| `tests/hydration.test.ts` | Adapted hydration | Adopts nodes emitted by the SSR fixture, then proves live ResizeObserver and scrolling behavior |
+| `typetests/parity.test-d.ts` | Paired type oracle | Identical assertion groups compile against the npm declaration and Octane source; `audit/type-contract.json` forbids source transforms |
+| `typetests/negative/missing-coordinate.test-d.ts` | Paired negative type control | Both compilers reject the same incomplete Grid coordinate |
+| `tests/audit/upstream.test.mjs` | Provenance audit | Pins the exact file/export/test inventory in both directions |
+| `tests/audit/adapted.test.mjs` | Adaptation audit | Regenerates and byte-compares every adapted upstream test/source mapping with mutation controls |
+| `tests/audit/types.test.mjs` | Type-evidence audit | Accounts for every assertion group and proves skipped/deleted/unauthorized mutations fail |
+| `tests/feasibility/renderer-boundary.test.ts` | Framework-boundary characterization | Documents the two reviewed renderer ABI/scheduling divergences recorded in the manifest |

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@octanejs/window",
+  "version": "0.0.1",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "octane": {
+    "hookSlots": {
+      "manual": [
+        "src"
+      ]
+    }
+  },
+  "description": "Exact react-window 2.3.0 binding for Octane: virtualized List and Grid components, dynamic row measurement, imperative scrolling, SSR, and hydration.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/window"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "UPSTREAM.md",
+    "LICENSE.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@types/react": "^19.2.17"
+  },
+  "peerDependencies": {
+    "octane": "0.1.35"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@tsrx/react": "^0.2.56",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-window": "2.3.0",
+    "vitest": "^4.1.10",
+    "@octanejs/testing-library": "0.1.32",
+    "octane": "0.1.35"
+  },
+  "scripts": {
+    "adapted:generate": "node tests/generate-adapted-tests.mjs",
+    "test": "pnpm upstream:verify && pnpm test:audit && node ../../scripts/react-parity/harness.mjs run-required --manifest packages/window/audit/react-parity.json",
+    "upstream:verify": "node tests/audit/verify-upstream.mjs",
+    "test:audit": "node --test tests/audit/*.test.mjs",
+    "test:types:pristine": "tsc --noEmit -p typetests/tsconfig.pristine.json",
+    "test:types:adapted": "tsrx-tsc --noEmit -p typetests/tsconfig.adapted.json",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/components/grid/Grid.tsx

@@ -0,0 +1,329 @@
+/** @jsxImportSource octane */
+'use client';
+
+import { createElement, memo, useEffect, useImperativeHandle, useMemo, useState } from 'octane';
+import { useIsRtl } from '../../core/useIsRtl.js';
+import { useVirtualizer } from '../../core/useVirtualizer.js';
+import { useMemoizedObject } from '../../hooks/useMemoizedObject.js';
+import type { Align, TagNames } from '../../types.js';
+import { arePropsEqual } from '../../utils/arePropsEqual.js';
+import type { GridProps } from './types.js';
+
+/**
+ * Renders data with many rows and columns.
+ *
+ * ℹ️ Unlike `List` rows, `Grid` cell sizes must be known ahead of time.
+ * Either static sizes or something that can be derived (from the data in `CellProps`) without rendering.
+ */
+export function Grid<CellProps extends object, TagName extends TagNames = 'div'>({
+	cellComponent: CellComponentProp,
+	cellProps: cellPropsUnstable,
+	children,
+	className,
+	columnCount,
+	columnKey,
+	columnWidth,
+	defaultHeight = 0,
+	defaultWidth = 0,
+	dir,
+	gridRef,
+	onCellsRendered,
+	onResize,
+	overscanCount = 3,
+	rowCount,
+	rowHeight,
+	rowKey,
+	style,
+	tagName = 'div' as TagName,
+	...rest
+}: GridProps<CellProps, TagName>) {
+	const cellProps = useMemoizedObject(cellPropsUnstable);
+	const CellComponent = useMemo(
+		() => memo(CellComponentProp as any, arePropsEqual as any) as typeof CellComponentProp,
+		[CellComponentProp],
+	);
+
+	const [element, setElement] = useState<HTMLDivElement | null>(null);
+
+	const isRtl = useIsRtl(element, dir);
+
+	const {
+		getCellBounds: getColumnBounds,
+		getEstimatedSize: getEstimatedWidth,
+		startIndexOverscan: columnStartIndexOverscan,
+		startIndexVisible: columnStartIndexVisible,
+		scrollToIndex: scrollToColumnIndex,
+		stopIndexOverscan: columnStopIndexOverscan,
+		stopIndexVisible: columnStopIndexVisible,
+	} = useVirtualizer({
+		containerElement: element,
+		containerStyle: style,
+		defaultContainerSize: defaultWidth,
+		direction: 'horizontal',
+		isRtl,
+		itemCount: columnCount,
+		itemProps: cellProps,
+		itemSize: columnWidth,
+		onResize,
+		overscanCount,
+	});
+
+	const {
+		getCellBounds: getRowBounds,
+		getEstimatedSize: getEstimatedHeight,
+		startIndexOverscan: rowStartIndexOverscan,
+		startIndexVisible: rowStartIndexVisible,
+		scrollToIndex: scrollToRowIndex,
+		stopIndexOverscan: rowStopIndexOverscan,
+		stopIndexVisible: rowStopIndexVisible,
+	} = useVirtualizer({
+		containerElement: element,
+		containerStyle: style,
+		defaultContainerSize: defaultHeight,
+		direction: 'vertical',
+		itemCount: rowCount,
+		itemProps: cellProps,
+		itemSize: rowHeight,
+		onResize,
+		overscanCount,
+	});
+
+	useImperativeHandle(
+		gridRef,
+		() => ({
+			get element() {
+				return element;
+			},
+
+			scrollToCell({
+				behavior = 'auto',
+				columnAlign = 'auto',
+				columnIndex,
+				rowAlign = 'auto',
+				rowIndex,
+			}: {
+				behavior?: ScrollBehavior;
+				columnAlign?: Align;
+				columnIndex: number;
+				rowAlign?: Align;
+				rowIndex: number;
+			}) {
+				const left = scrollToColumnIndex({
+					align: columnAlign,
+					containerScrollOffset: element?.scrollLeft ?? 0,
+					index: columnIndex,
+				});
+				const top = scrollToRowIndex({
+					align: rowAlign,
+					containerScrollOffset: element?.scrollTop ?? 0,
+					index: rowIndex,
+				});
+
+				if (typeof element?.scrollTo === 'function') {
+					element.scrollTo({
+						behavior,
+						left,
+						top,
+					});
+				}
+			},
+
+			scrollToColumn({
+				align = 'auto',
+				behavior = 'auto',
+				index,
+			}: {
+				align?: Align;
+				behavior?: ScrollBehavior;
+				index: number;
+			}) {
+				const left = scrollToColumnIndex({
+					align,
+					containerScrollOffset: element?.scrollLeft ?? 0,
+					index,
+				});
+
+				if (typeof element?.scrollTo === 'function') {
+					element.scrollTo({
+						behavior,
+						left,
+					});
+				}
+			},
+
+			scrollToRow({
+				align = 'auto',
+				behavior = 'auto',
+				index,
+			}: {
+				align?: Align;
+				behavior?: ScrollBehavior;
+				index: number;
+			}) {
+				const top = scrollToRowIndex({
+					align,
+					containerScrollOffset: element?.scrollTop ?? 0,
+					index,
+				});
+
+				if (typeof element?.scrollTo === 'function') {
+					element.scrollTo({
+						behavior,
+						top,
+					});
+				}
+			},
+		}),
+		[element, scrollToColumnIndex, scrollToRowIndex],
+	);
+
+	useEffect(() => {
+		if (
+			columnStartIndexOverscan >= 0 &&
+			columnStopIndexOverscan >= 0 &&
+			rowStartIndexOverscan >= 0 &&
+			rowStopIndexOverscan >= 0 &&
+			onCellsRendered
+		) {
+			onCellsRendered(
+				{
+					columnStartIndex: columnStartIndexVisible,
+					columnStopIndex: columnStopIndexVisible,
+					rowStartIndex: rowStartIndexVisible,
+					rowStopIndex: rowStopIndexVisible,
+				},
+				{
+					columnStartIndex: columnStartIndexOverscan,
+					columnStopIndex: columnStopIndexOverscan,
+					rowStartIndex: rowStartIndexOverscan,
+					rowStopIndex: rowStopIndexOverscan,
+				},
+			);
+		}
+	}, [
+		onCellsRendered,
+		columnStartIndexOverscan,
+		columnStartIndexVisible,
+		columnStopIndexOverscan,
+		columnStopIndexVisible,
+		rowStartIndexOverscan,
+		rowStartIndexVisible,
+		rowStopIndexOverscan,
+		rowStopIndexVisible,
+	]);
+
+	const cells = useMemo(() => {
+		const children: unknown[] = [];
+		if (columnCount > 0 && rowCount > 0) {
+			for (let rowIndex = rowStartIndexOverscan; rowIndex <= rowStopIndexOverscan; rowIndex++) {
+				const rowBounds = getRowBounds(rowIndex);
+
+				const columns: unknown[] = [];
+
+				for (
+					let columnIndex = columnStartIndexOverscan;
+					columnIndex <= columnStopIndexOverscan;
+					columnIndex++
+				) {
+					const columnBounds = getColumnBounds(columnIndex);
+
+					columns.push(
+						<CellComponent
+							{...(cellProps as CellProps)}
+							ariaAttributes={{
+								'aria-colindex': columnIndex + 1,
+								role: 'gridcell',
+							}}
+							columnIndex={columnIndex}
+							key={
+								columnKey
+									? columnKey({
+											columnIndex,
+											data: cellProps,
+											rowIndex,
+										})
+									: columnIndex
+							}
+							rowIndex={rowIndex}
+							style={{
+								position: 'absolute',
+								left: isRtl ? undefined : 0,
+								right: isRtl ? 0 : undefined,
+								transform: `translate(${isRtl ? -columnBounds.scrollOffset : columnBounds.scrollOffset}px, ${rowBounds.scrollOffset}px)`,
+								height: rowBounds.size,
+								width: columnBounds.size,
+							}}
+						/>,
+					);
+				}
+
+				children.push(
+					<div
+						key={
+							rowKey
+								? rowKey({
+										data: cellProps,
+										rowIndex,
+									})
+								: rowIndex
+						}
+						role="row"
+						aria-rowindex={rowIndex + 1}
+					>
+						{columns}
+					</div>,
+				);
+			}
+		}
+		return children;
+	}, [
+		CellComponent,
+		cellProps,
+		columnCount,
+		columnKey,
+		columnStartIndexOverscan,
+		columnStopIndexOverscan,
+		getColumnBounds,
+		getRowBounds,
+		isRtl,
+		rowCount,
+		rowKey,
+		rowStartIndexOverscan,
+		rowStopIndexOverscan,
+	]);
+
+	const sizingElement = (
+		<div
+			aria-hidden
+			style={{
+				height: getEstimatedHeight(),
+				width: getEstimatedWidth(),
+				zIndex: -1,
+			}}
+		></div>
+	);
+
+	return createElement(
+		tagName,
+		{
+			'aria-colcount': columnCount,
+			'aria-rowcount': rowCount,
+			role: 'grid',
+			...rest,
+			className,
+			dir,
+			ref: setElement,
+			style: {
+				position: 'relative',
+				maxHeight: '100%',
+				maxWidth: '100%',
+				flexGrow: 1,
+				overflow: 'auto',
+				...style,
+			},
+		},
+		cells,
+		children,
+		sizingElement,
+	);
+}