@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.46

package/dist/components/datagrid/cell/index.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Use `Cell` instead */
+export { default as Td } from './datagrid-cell.svelte';
+export * from './bond.svelte';
+export { default as Cell } from './datagrid-cell.svelte';

package/dist/components/datagrid/cell/index.js

@@ -0,0 +1,4 @@
+/** @deprecated Use `Cell` instead */
+export { default as Td } from './datagrid-cell.svelte';
+export * from './bond.svelte';
+export { default as Cell } from './datagrid-cell.svelte';

package/dist/components/datagrid/col/index.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from '../column/datagrid-column.svelte';
+export * from '../column/bond.svelte';
+export { default as Column } from '../column/datagrid-column.svelte';

package/dist/components/datagrid/col/index.js

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from '../column/datagrid-column.svelte';
+export * from '../column/bond.svelte';
+export { default as Column } from '../column/datagrid-column.svelte';

package/dist/components/datagrid/column/bond.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { Direction, SortableType } from '../../../types';
+import { DataGridBond } from '../bond.svelte';
+import { Bond, BondState, BondAtom, type BondStateProps } from '../../../shared/bond.svelte';
+export type DataGridColumnBondProps = BondStateProps & {
+    id: string;
+    width?: string;
+    screen?: string;
+    sortable?: boolean | SortableType;
+    hidden?: boolean;
+    direction: Direction;
+};
+export type DataGridColumnElements = {
+    root: HTMLElement;
+};
+export declare class DataGridColumnRootAtom<T = unknown> extends BondAtom<DataGridColumnBond<T>> {
+    constructor(bond: DataGridColumnBond<T>);
+    get attrs(): {
+        'data-kind': string;
+        'data-sortable': string | undefined;
+        'data-direction': Direction;
+    };
+}
+export declare class DataGridColumnBond<T = unknown> extends Bond<DataGridColumnBondProps, DataGridColumnBondState<T>, DataGridColumnElements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(s: DataGridColumnBondState<T>);
+    get isHidden(): boolean;
+    get index(): number;
+    get text(): string;
+    get datagrid(): DataGridBond<T>;
+    share(): this;
+    mount(): () => void;
+    root(): DataGridColumnRootAtom<T>;
+    static get<T = unknown>(): DataGridColumnBond<T> | undefined;
+    static set<T = unknown>(bond: DataGridColumnBond<T>): DataGridColumnBond<T>;
+}
+export declare class DataGridColumnBondState<T = unknown> extends BondState<DataGridColumnBondProps> {
+    constructor(props: () => DataGridColumnBondProps);
+    get isSortable(): boolean | SortableType | undefined;
+    asc(): void;
+    desc(): void;
+}
+export type DataGridThBondProps = DataGridColumnBondProps;
+export type DataGridThElements = DataGridColumnElements;
+export { DataGridColumnBond as DataGridThBond, DataGridColumnBondState as DataGridThBondState };

package/dist/components/datagrid/column/bond.svelte.js

@@ -0,0 +1,76 @@
+import { getContext, setContext } from 'svelte';
+import { DataGridBond } from '../bond.svelte';
+import { Bond, BondState, BondAtom } from '../../../shared/bond.svelte';
+export class DataGridColumnRootAtom extends BondAtom {
+    constructor(bond) {
+        super(bond, 'root');
+    }
+    get attrs() {
+        const props = this.bond.state.props;
+        return {
+            ...super.attrs,
+            'data-kind': 'datagrid-column',
+            'data-sortable': props.sortable ? 'true' : undefined,
+            'data-direction': props.direction
+        };
+    }
+}
+export class DataGridColumnBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/datagrid/column';
+    #datagrid;
+    constructor(s) {
+        super(s, 'datagrid-column');
+        this.#datagrid = DataGridBond.get();
+    }
+    get isHidden() {
+        const el = this.elements.root;
+        if (!(el instanceof HTMLElement))
+            return false;
+        return Boolean(el.hidden) || getComputedStyle(el).display === 'none';
+    }
+    get index() {
+        const el = this.elements.root;
+        return el ? Array.from(el.parentElement?.children ?? []).indexOf(el) : -1;
+    }
+    get text() {
+        const el = this.elements.root;
+        return el instanceof HTMLElement ? el.innerText : '';
+    }
+    get datagrid() {
+        return this.#datagrid;
+    }
+    share() {
+        return DataGridColumnBond.set(this);
+    }
+    mount() {
+        return this.#datagrid.state.mountColumn(this.state.id, this);
+    }
+    root() {
+        return this.atom('root', () => new DataGridColumnRootAtom(this));
+    }
+    static get() {
+        return getContext(DataGridColumnBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(DataGridColumnBond.CONTEXT_KEY, bond);
+    }
+}
+export class DataGridColumnBondState extends BondState {
+    constructor(props) {
+        super(props);
+        const datagrid = DataGridBond.get();
+        if (!datagrid) {
+            throw new Error('DataGridColumnBond must be used within a DataGridBond context.');
+        }
+    }
+    get isSortable() {
+        return this.props.sortable;
+    }
+    asc() {
+        this.props.direction = 'asc';
+    }
+    desc() {
+        this.props.direction = 'desc';
+    }
+}
+export { DataGridColumnBond as DataGridThBond, DataGridColumnBondState as DataGridThBondState };

package/dist/components/datagrid/{th/datagrid-th-sort-icon.svelte → column/datagrid-column-sort-icon.svelte}

@@ -1,23 +1,17 @@
 <script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
 	import { animate as motion } from 'motion';
 	import { Icon } from '../../icon';
-	import { DataGridThBond } from './bond.svelte';
+	import { DataGridColumnBond } from './bond.svelte.ts';
 	import IconArrowDown from '../../../icons/icon-arrow-down.svelte';
 	import { HtmlAtom, type Base } from '../../atom';
 
-	const bond = DataGridThBond.get();
+	const bond = DataGridColumnBond.get();
 
 	const isSortable = $derived(bond.state.isSortable);
 	const directionAsNumber = $derived(+(bond.state.props.direction === 'asc'));
 
 	let {
 		class: klass = '',
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	} = $props();
 
@@ -33,14 +27,11 @@
 {#if !!isSortable}
 	<HtmlAtom
 		{bond}
-		preset="datagrid.sort-icon"
+			preset="datagrid.column-sort-icon"
 		class={['border-border', '$preset', klass]}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
+		fallback={{
+			animate: _animate,
+		}}
 		{...restProps}
 	>
 		<Icon>

package/dist/components/datagrid/{th/datagrid-th.svelte.d.ts → column/datagrid-column-sort-icon.svelte.d.ts}

@@ -1,7 +1,8 @@
 import { type Base } from '../../atom';
-import type { DatagridThProps } from '../types';
 declare function $$render<T extends keyof HTMLElementTagNameMap, B extends Base = Base>(): {
-    props: DatagridThProps;
+    props: {
+        class?: string;
+    } & Record<string, any>;
     exports: {};
     bindings: "";
     slots: {};
@@ -21,6 +22,6 @@ interface $$IsomorphicComponent {
     <T extends keyof HTMLElementTagNameMap, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, B>['props']> & {}): ReturnType<__sveltets_Render<T, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
-declare const DatagridTh: $$IsomorphicComponent;
-type DatagridTh<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridTh<T, B>>;
-export default DatagridTh;
+declare const DatagridColumnSortIcon: $$IsomorphicComponent;
+type DatagridColumnSortIcon<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = InstanceType<typeof DatagridColumnSortIcon<T, B>>;
+export default DatagridColumnSortIcon;

package/dist/components/datagrid/{th/datagrid-th.svelte → column/datagrid-column.svelte}

@@ -1,43 +1,41 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { nanoid } from 'nanoid';
+	import { untrack } from 'svelte';
 	import { defineProperty, defineState } from '../../../utils';
 	import { HtmlAtom, type Base } from '../../atom';
-	import { DataGridThBond, DataGridThBondState, type DataGridThBondProps } from './bond.svelte';
-	import type { DatagridContext } from '../context';
-	import type { DatagridThProps } from '../types';
+	import {
+		DataGridColumnBond,
+		DataGridColumnBondState,
+		type DataGridColumnBondProps
+	} from './bond.svelte';
+	import type { DatagridColumnProps } from '../types';
 
 	let {
 		class: klass = '',
 		id = nanoid(),
 		width = '1fr',
 		direction = 'asc',
-		screen = undefined,
 		hidden = false,
 		sortable = undefined,
 		factory = _factory,
 		children = undefined,
 		onclick = undefined,
 		onsort = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
-	}: DatagridThProps = $props();
+	}: DatagridColumnProps<T, E, B> = $props();
 
-	const bond = factory().share();
+	const bond = untrack(() => factory()).share();
 
 	const isSortable = $derived(bond.state.isSortable);
+	const columnProps = $derived({ ...bond.root().spread, ...bond.state.props, ...restProps });
 	// const directionAsNumber = $derived(+(direction === 'asc'));
 
 	const unmount = bond.mount();
 
 	$effect(() => unmount);
 
-	function _factory() {
-		const bondProps = defineState<DataGridThBondProps>([
+	function _factory(): DataGridColumnBond<T> {
+		const bondProps = defineState<DataGridColumnBondProps>([
 			defineProperty('id', () => id),
 			defineProperty('width', () => width),
 			defineProperty('sortable', () => sortable),
@@ -45,12 +43,15 @@
 			defineProperty('direction', () => direction)
 		]);
 
-		const bondState = new DataGridThBondState(() => bondProps);
-		return new DataGridThBond(bondState);
+		const bondState = new DataGridColumnBondState(() => bondProps);
+		return new DataGridColumnBond<T>(bondState);
 	}
 
 	function onclick_(ev: Event) {
-		onclick?.(ev as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
+		const onClick = onclick as
+			| ((event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => void)
+			| undefined;
+		onClick?.(ev as MouseEvent & { currentTarget: EventTarget & HTMLDivElement });
 
 		if (!ev.defaultPrevented) {
 			if (!isSortable) {
@@ -69,38 +70,28 @@
 				}
 			}
 
-			onsort?.(new CustomEvent('sort'), {
-				field: typeof sortable === 'boolean' ? undefined : sortable,
-				direction
-			});
+			if (typeof sortable === 'string') {
+				onsort?.(new CustomEvent('sort'), { field: sortable, direction });
+			} else {
+				onsort?.(new CustomEvent('sort'), { direction });
+			}
 		}
 	}
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 {#if !hidden}
 	<HtmlAtom
-		{@attach (node) => {
-			bond.elements.root = node;
-		}}
 		{bond}
-		preset="datagrid.th"
+			preset="datagrid.column"
 		class={[
 			'border-border flex cursor-pointer py-1 font-medium select-none',
 			!!sortable && 'sortable',
 			'$preset',
 			klass
 		]}
-		enter={enter?.bind(bond.state)}
-		exit={exit?.bind(bond.state)}
-		initial={initial?.bind(bond.state)}
-		animate={animate?.bind(bond.state)}
-		onmount={onmount?.bind(bond.state)}
-		ondestroy={ondestroy?.bind(bond.state)}
 		onclick={onclick_}
-		{...bond.props()}
-		{...restProps}
+		{...columnProps}
 	>
-		{@render children?.({ th: bond as unknown as DatagridContext })}
+		{@render children?.({ column: bond })}
 	</HtmlAtom>
 {/if}

package/dist/components/datagrid/column/datagrid-column.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Base } from '../../atom';
+import type { DatagridColumnProps } from '../types';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridColumnProps<T, E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const DatagridColumn: $$IsomorphicComponent;
+type DatagridColumn<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridColumn<T, E, B>>;
+export default DatagridColumn;

package/dist/components/datagrid/column/index.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from './datagrid-column.svelte';
+export * from './bond.svelte';
+export { default as Column } from './datagrid-column.svelte';

package/dist/components/datagrid/column/index.js

@@ -0,0 +1,4 @@
+/** @deprecated Use `Column` instead */
+export { default as Th } from './datagrid-column.svelte';
+export * from './bond.svelte';
+export { default as Column } from './datagrid-column.svelte';

package/dist/components/datagrid/context.d.ts

@@ -1,16 +1,3 @@
-import type { DataGridBond } from './bond.svelte';
-export declare const DATAGRID_CONTEXT_KEY = "@icare/context/datagrid";
-export type Payload<T> = {
-    data: T;
-    selected: boolean;
-};
-export type DatagridContext<T = unknown> = DataGridBond<T> | {
-    [key: string]: unknown;
-};
-export declare function getDataGridContext<T>(): DataGridBond<T>;
-export declare function setDataGridContext<T>(context: DataGridBond<T>): DataGridBond<T>;
-/********************************************************************************* */
-export declare const DATAGRID_HEADER_CONTEXT_KEY = "@icare/context/datagrid/header";
 export type DatagridHeaderContext = {
     readonly derived: {
         data: {
@@ -18,19 +5,5 @@ export type DatagridHeaderContext = {
         };
     };
 };
-export declare function getDatagridHeaderContext(): DatagridHeaderContext;
-export declare function setDatagridHeaderContext(context: DatagridHeaderContext): DatagridHeaderContext;
-/********************************************************************************* */
-export declare const DATAGRID_TR_CONTEXT_KEY = "@icare/context/datagrid/tr";
-export type DatagridTrContext<T> = {
-    value: string;
-    readonly derived: {
-        data: {
-            data?: T;
-            isHeader: boolean;
-            isSelected: boolean;
-        };
-    };
-};
-export declare function getDatagridTrContext<T>(): DatagridTrContext<T>;
-export declare function setDatagridTrContext<T>(context: DatagridTrContext<T>): DatagridTrContext<T>;
+export declare function getDatagridHeaderContext(): DatagridHeaderContext | undefined;
+export declare function setDatagridHeaderContext(context: DatagridHeaderContext): void;

package/dist/components/datagrid/context.js

@@ -1,24 +1,10 @@
 import { getContext, setContext } from 'svelte';
-export const DATAGRID_CONTEXT_KEY = '@icare/context/datagrid';
-export function getDataGridContext() {
-    return getContext(DATAGRID_CONTEXT_KEY);
-}
-export function setDataGridContext(context) {
-    return setContext(DATAGRID_CONTEXT_KEY, context);
-}
-/********************************************************************************* */
-export const DATAGRID_HEADER_CONTEXT_KEY = '@icare/context/datagrid/header';
+// ── Header context ─────────────────────────────────────────────────────────
+// Used by DataGridRowBondState to determine whether a row is a header row.
+const DATAGRID_HEADER_CONTEXT_KEY = '@atoms/context/datagrid/header';
 export function getDatagridHeaderContext() {
     return getContext(DATAGRID_HEADER_CONTEXT_KEY);
 }
 export function setDatagridHeaderContext(context) {
-    return setContext(DATAGRID_HEADER_CONTEXT_KEY, context);
-}
-/********************************************************************************* */
-export const DATAGRID_TR_CONTEXT_KEY = '@icare/context/datagrid/tr';
-export function getDatagridTrContext() {
-    return getContext(DATAGRID_TR_CONTEXT_KEY);
-}
-export function setDatagridTrContext(context) {
-    return setContext(DATAGRID_TR_CONTEXT_KEY, context);
+    setContext(DATAGRID_HEADER_CONTEXT_KEY, context);
 }

package/dist/components/datagrid/datagrid-body.svelte

@@ -1,37 +1,40 @@
-<script lang="ts" generics="T, E extends HtmlElementTagName, B extends Base = Base">
-	import type { DatagridBodyProps } from './types';
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { DataGridBond } from './bond.svelte';
 	import { HtmlAtom, type Base } from '../atom';
-	import type { HtmlElementTagName } from '../element';
-	export type { HtmlElementTagName } from '../element';
-	export type { DatagridBodyProps } from './types';
+	import type { DatagridBodyProps } from './types';
+	import { tick } from 'svelte';
 
-	const bond = DataGridBond.get();
+	const bond = DataGridBond.get<T>();
 
 	let {
 		class: klass = '',
 		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
 		...restProps
 	}: DatagridBodyProps<T, E, B> = $props();
+
+	const bodyProps = $derived({ ...bond?.body().spread, ...restProps });
+
+	// Defer rendering rows until the grid template has been computed from the
+	// registered columns. Without this gate, the body renders on the same tick
+	// the root sets `--template-columns`, before the columns mounted in the
+	// header have flushed to the derived `template`. The parent grid then
+	// briefly resolves to the `auto` fallback (one column) and rows with
+	// `grid-template-columns: subgrid` collapse into a single column, causing a
+	// layout shift once the real template is applied.
+	let isTemplateReady = $state(false);
+
+	tick().then(() => {
+		isTemplateReady = true;
+	});
+
+	const content = $derived(isTemplateReady ? children : undefined);
 </script>
 
 <HtmlAtom
 	{bond}
 	preset="datagrid.body"
-	class={['border-border', '$preset', klass, 'contents']}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
+	class={['border-border contents', '$preset', klass]}
+	{...bodyProps}
 >
-	{@render children?.({ datagrid: bond })}
+	{@render content?.({ datagrid: bond })}
 </HtmlAtom>

package/dist/components/datagrid/datagrid-body.svelte.d.ts

@@ -1,33 +1,26 @@
-import type { DatagridBodyProps } from './types';
 import { type Base } from '../atom';
-import type { HtmlElementTagName } from '../element';
-declare function $$render<T, E extends HtmlElementTagName, B extends Base = Base>(): {
+import type { DatagridBodyProps } from './types';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DatagridBodyProps<T, E, B>;
-    exports: {
-        HtmlElementTagName: typeof HtmlElementTagName;
-        DatagridBodyProps: typeof DatagridBodyProps;
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T, E extends HtmlElementTagName, B extends Base = Base> {
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
     props(): ReturnType<typeof $$render<T, E, B>>['props'];
     events(): ReturnType<typeof $$render<T, E, B>>['events'];
     slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
     bindings(): "";
-    exports(): {
-        HtmlElementTagName: typeof HtmlElementTagName;
-        DatagridBodyProps: typeof DatagridBodyProps;
-    };
+    exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T, E extends HtmlElementTagName, B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
-    <T, E extends HtmlElementTagName, B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const DatagridBody: $$IsomorphicComponent;
-type DatagridBody<T, E extends HtmlElementTagName, B extends Base = Base> = InstanceType<typeof DatagridBody<T, E, B>>;
+type DatagridBody<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridBody<T, E, B>>;
 export default DatagridBody;