@1771technologies/lytenyte-pro 0.9.4 → 1.0.0-beta.0

package/dist/grid-box/use-aggregation-box-items.js

@@ -0,0 +1,60 @@
+import { useMemo } from "react";
+import { useEvent } from "@1771technologies/lytenyte-react-hooks";
+export function useAggregationBoxItems({ grid, orientation }) {
+    const model = grid.state.aggModel.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const items = Object.entries(model).map(([id, agg]) => {
+            const column = grid.api.columnById(id);
+            const name = column?.name ?? column?.id ?? id;
+            const fn = typeof agg.fn === "string" ? agg.fn : "Fn(x)";
+            return {
+                draggable: false,
+                id,
+                data: { id, agg },
+                dragData: {},
+                label: `${name} ${fn}`,
+                onAction: () => { },
+                onDelete: () => {
+                    grid.state.aggModel.set((prev) => {
+                        const next = { ...prev };
+                        delete next[id];
+                        return next;
+                    });
+                },
+                onDrop: () => { },
+                dragPlaceholder: undefined,
+            };
+        });
+        return items;
+    }, [model, grid.api, grid.state.aggModel]);
+    const onRootDrop = useEvent((p) => {
+        const aggId = `${gridId}-agg`;
+        const c = p.state.siteLocalData?.[aggId];
+        if (!c)
+            return;
+        const current = model[c.id];
+        if (!current) {
+            const base = grid.state.columnBase.get();
+            const agg = c.uiHints?.aggDefault ??
+                c.uiHints?.aggsAllowed?.[0] ??
+                base.uiHints?.aggDefault ??
+                base.uiHints?.aggsAllowed?.[0];
+            if (!agg)
+                return;
+            const next = { fn: agg };
+            grid.state.aggModel.set((prev) => ({ ...prev, [c.id]: next }));
+        }
+    });
+    return useMemo(() => {
+        return {
+            rootProps: {
+                accepted: [`${gridId}-agg`],
+                onRootDrop,
+                orientation,
+                grid,
+            },
+            items,
+        };
+    }, [grid, gridId, items, onRootDrop, orientation]);
+}

package/dist/grid-box/use-column-box-items.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import type { Column, DropEventParams, Grid } from "../+types";
+import type { GridBoxItem } from "./+types";
+export interface OnDropParams<T> {
+    readonly target: Column<T>;
+    readonly src: Column<T>;
+    readonly isBefore: boolean;
+}
+export interface OnRootDropParams<T> {
+    readonly column: Column<T>;
+}
+export interface UseColumnBoxItemArgs<T> {
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly draggable?: boolean;
+    readonly itemFilter?: (c: Column<T>) => boolean;
+    readonly onRootDrop?: (p: OnRootDropParams<T>) => void;
+    readonly onDrop?: (p: OnDropParams<T>) => void;
+    readonly onAction?: (c: Column<T>) => void;
+    readonly onDelete?: (c: Column<T>) => void;
+    readonly dragPlaceholder?: (c: Column<T>) => ReactNode;
+}
+export declare function useColumnBoxItems<T>({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable, dragPlaceholder, itemFilter, }: UseColumnBoxItemArgs<T>): {
+    rootProps: {
+        accepted: string[];
+        orientation: "horizontal" | "vertical" | undefined;
+        onRootDrop: (p: DropEventParams) => void;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<Column<T>>[];
+};

package/dist/grid-box/use-column-box-items.js

@@ -0,0 +1,81 @@
+import { useMemo } from "react";
+import { useEvent } from "@1771technologies/lytenyte-react-hooks";
+export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable = true, dragPlaceholder, itemFilter, }) {
+    const columns = grid.state.columns.useValue();
+    const base = grid.state.columnBase.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const groupId = `${gridId}-group`;
+        const aggId = `${gridId}-agg`;
+        const columnId = `${gridId}-column`;
+        return columns
+            .filter((c) => {
+            return itemFilter ? itemFilter(c) : true;
+        })
+            .map((c) => {
+            const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
+            const canAgg = Boolean(c.uiHints?.aggDefault ??
+                c.uiHints?.aggDefault?.length ??
+                base.uiHints?.aggDefault ??
+                base.uiHints?.aggsAllowed?.length);
+            const data = {
+                [columnId]: c,
+            };
+            if (canGroup)
+                data[groupId] = c.id;
+            if (canAgg)
+                data[aggId] = c;
+            return {
+                label: c.name ?? c.id,
+                id: c.id,
+                draggable,
+                data: c,
+                dragData: data,
+                dragPlaceholder: dragPlaceholder ? () => dragPlaceholder?.(c) : undefined,
+                onAction: () => onAction?.(c),
+                onDelete: () => onDelete?.(c),
+                onDrop: (p) => {
+                    const target = c;
+                    const src = p.state.siteLocalData?.[columnId];
+                    const isRtl = grid.state.rtl.get();
+                    let isBefore;
+                    if (orientation === "horizontal") {
+                        isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
+                    }
+                    else {
+                        isBefore = p.moveState.topHalf;
+                    }
+                    onDrop?.({ src, target, isBefore });
+                },
+            };
+        });
+    }, [
+        base.uiHints?.aggDefault,
+        base.uiHints?.aggsAllowed?.length,
+        base.uiHints?.rowGroupable,
+        columns,
+        dragPlaceholder,
+        draggable,
+        grid.state.rtl,
+        gridId,
+        itemFilter,
+        onAction,
+        onDelete,
+        onDrop,
+        orientation,
+    ]);
+    const onRootDropEv = useEvent((p) => {
+        const columnId = `${gridId}-column`;
+        const src = p.state.siteLocalData?.[columnId];
+        onRootDrop?.(src);
+    });
+    return useMemo(() => ({
+        rootProps: {
+            accepted: [`${gridId}-column`],
+            orientation: orientation,
+            onRootDrop: onRootDropEv,
+            grid,
+        },
+        items,
+    }), [grid, gridId, items, onRootDropEv, orientation]);
+}

package/dist/grid-box/use-row-group-box-items.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { DropEventParams, Grid, RowGroupModelItem } from "../+types";
+import type { GridBoxItem } from "./+types";
+export interface UseRowGroupBoxItems<T> {
+    readonly grid: Grid<T>;
+    readonly orientation?: "horizontal" | "vertical";
+    readonly placeholder?: (c: RowGroupModelItem<T>) => ReactNode;
+    readonly hideColumnOnGroup?: boolean;
+}
+export declare function useRowGroupBoxItems<T>({ grid, orientation, placeholder, hideColumnOnGroup, }: UseRowGroupBoxItems<T>): {
+    rootProps: {
+        accepted: string[];
+        onRootDrop: (p: DropEventParams) => void;
+        orientation: "horizontal" | "vertical" | undefined;
+        grid: Grid<T>;
+    };
+    items: GridBoxItem<RowGroupModelItem<T>>[];
+};

package/dist/grid-box/use-row-group-box-items.js

@@ -0,0 +1,134 @@
+import { useMemo } from "react";
+import { useEvent } from "@1771technologies/lytenyte-react-hooks";
+export function useRowGroupBoxItems({ grid, orientation, placeholder, hideColumnOnGroup = true, }) {
+    const rowGroupModel = grid.state.rowGroupModel.useValue();
+    const gridId = grid.state.gridId.useValue();
+    const items = useMemo(() => {
+        const groupId = `${gridId}-group`;
+        return rowGroupModel
+            .map((c) => {
+            const onDelete = () => {
+                grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
+            };
+            const onDrop = (p) => {
+                const target = c;
+                const src = p.state.siteLocalData?.[groupId];
+                const isRtl = grid.state.rtl.get();
+                let isBefore;
+                if (orientation === "horizontal") {
+                    isBefore = isRtl ? !p.moveState.leftHalf : p.moveState.leftHalf;
+                }
+                else {
+                    isBefore = p.moveState.topHalf;
+                }
+                const srcIndex = rowGroupModel.findIndex((x) => {
+                    if (typeof src !== typeof x)
+                        return;
+                    const cid = typeof src === "string" ? src : src.id;
+                    const xid = typeof x === "string" ? x : x.id;
+                    return cid === xid;
+                });
+                const targetIndex = rowGroupModel.indexOf(target);
+                // This is an external
+                if (srcIndex === -1) {
+                    grid.state.rowGroupModel.set((prev) => {
+                        const next = [...prev];
+                        next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
+                        return next;
+                    });
+                    if (typeof src === "string" && hideColumnOnGroup) {
+                        grid.api.columnUpdate({ [src]: { hide: true } });
+                    }
+                }
+                else {
+                    grid.state.rowGroupModel.set((prev) => {
+                        const next = [...prev];
+                        next.splice(srcIndex, 1);
+                        const targetIndex = next.indexOf(target);
+                        next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
+                        return next;
+                    });
+                }
+            };
+            if (typeof c === "string") {
+                const column = grid.api.columnById(c);
+                if (!column)
+                    return null;
+                return {
+                    dragData: { [groupId]: c },
+                    data: c,
+                    draggable: true,
+                    id: c,
+                    label: column.name ?? column.id,
+                    onAction: () => { },
+                    onDelete: onDelete,
+                    onDrop: onDrop,
+                    dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
+                };
+            }
+            else {
+                return {
+                    dragData: { [groupId]: c },
+                    data: c,
+                    draggable: true,
+                    id: c.id,
+                    label: c.name ?? c.id,
+                    onAction: () => { },
+                    onDelete: onDelete,
+                    onDrop,
+                    dragPlaceholder: placeholder ? () => placeholder(c) : undefined,
+                };
+            }
+        })
+            .filter((c) => c !== null);
+    }, [
+        grid.api,
+        grid.state.rowGroupModel,
+        grid.state.rtl,
+        gridId,
+        hideColumnOnGroup,
+        orientation,
+        placeholder,
+        rowGroupModel,
+    ]);
+    const onRootDrop = useEvent((p) => {
+        const groupId = `${gridId}-group`;
+        const c = p.state.siteLocalData?.[groupId];
+        if (!c)
+            return;
+        // Is the item in the model.
+        const currentIndex = rowGroupModel.findIndex((x) => {
+            if (typeof c !== typeof x)
+                return;
+            const cid = typeof c === "string" ? c : c.id;
+            const xid = typeof x === "string" ? x : x.id;
+            return cid === xid;
+        });
+        // We failed to find the item, so add it to the end. If
+        if (currentIndex === -1) {
+            grid.state.rowGroupModel.set((prev) => [...prev, c]);
+            if (typeof c === "string" && hideColumnOnGroup) {
+                grid.api.columnUpdate({ [c]: { hide: true } });
+            }
+        }
+        else {
+            grid.state.rowGroupModel.set((prev) => {
+                const next = [...prev];
+                next.splice(currentIndex, 1);
+                next.push(c);
+                return next;
+            });
+        }
+    });
+    return useMemo(() => {
+        return {
+            rootProps: {
+                accepted: [`${gridId}-group`],
+                onRootDrop,
+                orientation,
+                grid,
+            },
+            items,
+        };
+    }, [grid, gridId, items, onRootDrop, orientation]);
+}

package/dist/grid-provider/context.d.ts

@@ -0,0 +1,5 @@
+import type { Grid } from "../+types";
+import type { InternalAtoms } from "../state/+types";
+export declare const gridContext: import("react").Context<Grid<any> & {
+    internal: InternalAtoms;
+}>;

package/dist/grid-provider/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const gridContext = createContext(null);

package/dist/grid-provider/provider.d.ts

@@ -0,0 +1,3 @@
+export declare const GridProvider: import("react").Provider<import("../+types").Grid<any> & {
+    internal: import("../state/+types").InternalAtoms;
+}>;

package/dist/grid-provider/provider.js

@@ -0,0 +1,2 @@
+import { gridContext } from "./context";
+export const GridProvider = gridContext.Provider;

package/dist/grid-provider/use-grid.d.ts

@@ -0,0 +1,3 @@
+export declare const useGrid: () => import("../+types").Grid<any> & {
+    internal: import("../state/+types").InternalAtoms;
+};

package/dist/grid-provider/use-grid.js

@@ -0,0 +1,3 @@
+import { useContext } from "react";
+import { gridContext } from "./context";
+export const useGrid = () => useContext(gridContext);

package/dist/grid.d.ts

@@ -0,0 +1,29 @@
+import { Root } from "./root/root";
+import { makeClientDataSource, useClientRowDataSource } from "./row-data-source-client/use-client-data-source";
+import { makeClientDataSourcePaginated, useClientRowDataSourcePaginated } from "./row-data-source-client/use-client-data-source-paginated";
+import { makeClientTreeDataSource, useClientTreeDataSource } from "./row-data-source-client/use-client-tree-data-source";
+import { makeServerDataSource, useServerDataSource } from "./row-data-source-server/use-server-data-source";
+import { useLyteNyte } from "./state/use-lytenyte";
+export declare const Grid: {
+    Root: typeof Root;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HeaderGroupCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-group-cell").HeaderGroupCellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-row").HeaderRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./header/header-cell").HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & import("./cells/cell").CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RowFullWidth: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("./rows/row-full-width").RowFullWidthProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RowsContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RowsBottom: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RowsTop: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RowsCenter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    useLyteNyte: typeof useLyteNyte;
+    useClientRowDataSource: typeof useClientRowDataSource;
+    makeClientDataSource: typeof makeClientDataSource;
+    makeClientDataSourcePaginated: typeof makeClientDataSourcePaginated;
+    useClientRowDataSourcePaginated: typeof useClientRowDataSourcePaginated;
+    useClientTreeDataSource: typeof useClientTreeDataSource;
+    makeClientTreeDataSource: typeof makeClientTreeDataSource;
+    makeServerDataSource: typeof makeServerDataSource;
+    useServerDataSource: typeof useServerDataSource;
+};

package/dist/grid.js

@@ -0,0 +1,38 @@
+import { Cell } from "./cells/cell";
+import { Header } from "./header/header";
+import { HeaderCell } from "./header/header-cell";
+import { HeaderGroupCell } from "./header/header-group-cell";
+import { HeaderRow } from "./header/header-row";
+import { Root } from "./root/root";
+import { makeClientDataSource, useClientRowDataSource, } from "./row-data-source-client/use-client-data-source";
+import { makeClientDataSourcePaginated, useClientRowDataSourcePaginated, } from "./row-data-source-client/use-client-data-source-paginated";
+import { makeClientTreeDataSource, useClientTreeDataSource, } from "./row-data-source-client/use-client-tree-data-source";
+import { makeServerDataSource, useServerDataSource, } from "./row-data-source-server/use-server-data-source";
+import { RowFullWidth } from "./rows/row-full-width";
+import { RowsContainer } from "./rows/rows-container";
+import { RowsBottom, RowsCenter, RowsTop } from "./rows/rows-sections";
+import { useLyteNyte } from "./state/use-lytenyte";
+import { Viewport } from "./viewport/viewport";
+export const Grid = {
+    Root,
+    Header,
+    HeaderGroupCell,
+    HeaderRow,
+    HeaderCell,
+    Cell,
+    RowFullWidth,
+    RowsContainer,
+    RowsBottom,
+    RowsTop,
+    RowsCenter,
+    Viewport,
+    useLyteNyte,
+    useClientRowDataSource,
+    makeClientDataSource,
+    makeClientDataSourcePaginated,
+    useClientRowDataSourcePaginated,
+    useClientTreeDataSource,
+    makeClientTreeDataSource,
+    makeServerDataSource,
+    useServerDataSource,
+};

package/dist/header/header-cell.d.ts

@@ -0,0 +1,10 @@
+import { type CSSProperties } from "react";
+import type { HeaderCellFloating, HeaderCellLayout } from "../+types";
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+export interface HeaderCellProps<T> {
+    readonly cell: HeaderCellLayout<T> | HeaderCellFloating<T>;
+    readonly resizerSlot?: SlotComponent;
+    readonly resizerClassName?: string;
+    readonly resizerStyle?: CSSProperties;
+}
+export declare const HeaderCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & HeaderCellProps<any>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/header/header-cell.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useGridRoot } from "../context";
+import { COLUMN_MARKER_ID, HeaderCellReact } from "@1771technologies/lytenyte-shared";
+import { fastDeepMemo, useCombinedRefs, } from "@1771technologies/lytenyte-react-hooks";
+import { useHeaderCellRenderer } from "./use-header-cell-renderer";
+import { ResizeHandler } from "./resize-handler";
+import { useDragMove } from "./use-drag-move";
+const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerSlot, resizerStyle, resizerClassName, children, ...props }, forwarded) {
+    const grid = useGridRoot().grid;
+    const ctx = grid.state;
+    const xPositions = ctx.xPositions.useValue();
+    const viewport = ctx.viewportWidthInner.useValue();
+    const rtl = ctx.rtl.useValue();
+    const base = ctx.columnBase.useValue();
+    const Renderer = useHeaderCellRenderer(cell);
+    const resizable = cell.id === COLUMN_MARKER_ID
+        ? false
+        : (cell.column.uiHints?.resizable ?? base.uiHints?.resizable ?? false);
+    const { ref, ...dragProps } = useDragMove(grid, cell, props.onDragStart);
+    const combined = useCombinedRefs(forwarded, ref);
+    return (_jsxs(HeaderCellReact, { ...props, ...dragProps, ref: combined, cell: cell, columnId: cell.column.id, viewportWidth: viewport, isFloating: cell.kind === "floating", rtl: rtl, xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, slot: resizerSlot, className: resizerClassName, style: resizerStyle }))] }));
+});
+export const HeaderCell = fastDeepMemo(HeaderCellImpl);

package/dist/header/header-group-cell.d.ts

@@ -0,0 +1,5 @@
+import type { HeaderGroupCellLayout } from "../+types";
+export interface HeaderGroupCellProps {
+    readonly cell: HeaderGroupCellLayout;
+}
+export declare const HeaderGroupCell: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & HeaderGroupCellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/header/header-group-cell.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useGridRoot } from "../context";
+import { HeaderGroupCellReact } from "@1771technologies/lytenyte-shared";
+import { fastDeepMemo, useCombinedRefs } from "@1771technologies/lytenyte-react-hooks";
+import { useDragMove } from "./use-drag-move";
+const HeaderGroupCellImpl = forwardRef(function HeaderCell({ cell, children, ...props }, forwarded) {
+    const grid = useGridRoot().grid;
+    const ctx = grid.state;
+    const { ref, ...dragProps } = useDragMove(grid, cell, props.onDragStart);
+    const combined = useCombinedRefs(ref, forwarded);
+    return (_jsx(HeaderGroupCellReact, { ...props, ...dragProps, ref: combined, cell: cell, cellId: cell.id, height: ctx.headerGroupHeight.useValue(), rtl: ctx.rtl.useValue(), viewportWidth: ctx.viewportWidthInner.useValue(), xPositions: ctx.xPositions.useValue(), isHiddenMove: cell.isHiddenMove ?? false, children: children == undefined ? cell.id : children }));
+});
+export const HeaderGroupCell = fastDeepMemo(HeaderGroupCellImpl);

package/dist/header/header-row.d.ts

@@ -0,0 +1,4 @@
+export interface HeaderRowProps {
+    readonly headerRowIndex: number;
+}
+export declare const HeaderRow: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & HeaderRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/header/header-row.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { forwardRef } from "react";
+import { useGridRoot } from "../context";
+import { HeaderRowReact } from "@1771technologies/lytenyte-shared";
+const HeaderRowImpl = forwardRef(function HeaderRow(props, forwarded) {
+    const maxRow = useGridRoot().grid.view.get().header.maxRow;
+    return _jsx(HeaderRowReact, { ...props, ref: forwarded, maxRow: maxRow });
+});
+export const HeaderRow = fastDeepMemo(HeaderRowImpl);

package/dist/header/header.d.ts

@@ -0,0 +1 @@
+export declare const Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/header/header.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useGridRoot } from "../context";
+import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
+import { HeaderReact } from "@1771technologies/lytenyte-shared";
+const HeaderImpl = forwardRef(function Header(props, forwarded) {
+    const grid = useGridRoot().grid;
+    return (_jsx(HeaderReact, { ...props, ref: forwarded, floatingRowEnabled: grid.state.floatingRowEnabled.useValue(), floatingRowHeight: grid.state.floatingRowHeight.useValue(), headerGroupHeight: grid.state.headerGroupHeight.useValue(), headerHeight: grid.state.headerHeight.useValue(), rows: grid.internal.headerRows.useValue(), width: grid.state.widthTotal.useValue() }));
+});
+export const Header = fastDeepMemo(HeaderImpl);

package/dist/header/resize-handler.d.ts

@@ -0,0 +1,12 @@
+import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
+import type { HeaderCellLayout } from "../+types";
+import { type CSSProperties } from "react";
+interface ResizeHandlerProps<T> {
+    readonly slot?: SlotComponent;
+    readonly cell: HeaderCellLayout<T>;
+    readonly xPositions: Uint32Array;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare function ResizeHandler<T>({ slot, cell, xPositions, style, className, }: ResizeHandlerProps<T>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};