@1771technologies/lytenyte-pro 1.0.14 → 1.0.15

package/dist/cells/cell-spacer.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useGridRoot } from "../context.js";
-import { useRowMeta } from "../rows/row/context.js";
-export function CellSpacePinStart({ xPositions: x }) {
-    const { layout, colBounds } = useRowMeta();
-    const ctx = useGridRoot().grid;
-    const bounds = ctx.state.viewBounds.useValue();
-    const meta = ctx.state.columnMeta.useValue();
-    if (meta.columnVisibleStartCount === 0 || layout.kind === "full-width")
-        return null;
-    const colOffset = layout.cells.findIndex((c) => !c.colPin && c.colIndex + c.colSpan - 1 >= colBounds[0] && !c.isDeadCol);
-    const offset = x[colOffset] - x[bounds.colStartEnd];
-    return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
-}
-export function CellSpacerPinEnd({ xPositions: x }) {
-    const ctx = useGridRoot().grid;
-    const bounds = ctx.state.viewBounds.useValue();
-    const startOffset = x[bounds.colCenterEnd];
-    let offset = x[bounds.colEndStart] - startOffset;
-    const viewWidth = ctx.state.viewportWidthInner.useValue();
-    if (x.at(-1) < viewWidth) {
-        offset = viewWidth - x.at(-1);
-    }
-    const meta = ctx.state.columnMeta.useValue();
-    if (meta.columnVisibleEndCount === 0)
-        return null;
-    return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
-}
-export function CellSpacerNoPin({ xPositions: x }) {
-    const { layout, colBounds } = useRowMeta();
-    const ctx = useGridRoot().grid;
-    const bounds = ctx.state.viewBounds.useValue();
-    const meta = ctx.state.columnMeta.useValue();
-    if (meta.columnVisibleStartCount > 0 || layout.kind === "full-width")
-        return null;
-    const colOffset = layout.cells.findIndex((c) => c.colIndex + c.colSpan - 1 >= colBounds[0] && !c.isDeadCol);
-    const offset = x[colOffset - bounds.colStartEnd];
-    return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
-}

package/dist/cells/cell.d.ts

@@ -1,5 +0,0 @@
-import type { RowCellLayout } from "../+types";
-export interface CellProps {
-    readonly cell: RowCellLayout<any>;
-}
-export declare const Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & CellProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cells/cell.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useState } from "react";
-import { useGridRoot } from "../context.js";
-import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
-import { CellDefault } from "./cell-default.js";
-import { CellEditor } from "./cell-editor.js";
-import { useRowMeta } from "../rows/row/context.js";
-import { CellSpacePinStart, CellSpacerPinEnd } from "./cell-spacer.js";
-import { useCellStyle } from "./use-cell-style.js";
-export const Cell = forwardRef(function Cell(props, forwarded) {
-    const { colBounds: [start, end], ...rowMeta } = useRowMeta();
-    // This enforces our column virtualization.
-    if (props.cell.colPin == null &&
-        (props.cell.colIndex >= end || props.cell.colIndex + props.cell.colSpan - 1 < start)) {
-        return null;
-    }
-    return _jsx(CellImpl, { ...props, ref: forwarded, ...rowMeta });
-});
-const CellImpl = memo(forwardRef(function Cell({ cell, row, selected, indeterminate, xPositions, yPositions, base, renderers, rtl, layout: _, ...props }, forwarded) {
-    const grid = useGridRoot().grid;
-    const providedRenderer = cell.column.cellRenderer ?? base.cellRenderer;
-    const Renderer = providedRenderer
-        ? typeof providedRenderer === "string"
-            ? (renderers[providedRenderer] ?? CellDefault)
-            : providedRenderer
-        : CellDefault;
-    const [isEditing, setIsEditing] = useState(false);
-    useEffect(() => {
-        return grid.internal.editActivePos.watch(() => {
-            const pos = grid.internal.editActivePos.get();
-            if (!pos)
-                return setIsEditing(false);
-            setIsEditing(pos.column === cell.column &&
-                pos.rowIndex >= cell.rowIndex &&
-                pos.rowIndex < cell.rowIndex + cell.rowSpan);
-        });
-    }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
-    const style = useCellStyle(xPositions, yPositions, cell, rtl, grid.api.rowDetailRenderedHeight(row ?? ""), undefined);
-    if (cell.isDeadRow)
-        return _jsx("div", { style: { width: sizeFromCoord(cell.colIndex, xPositions) } });
-    if (!row || cell.isDeadCol)
-        return null;
-    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, { xPositions: xPositions }), _jsxs("div", { ...props, ref: forwarded, role: "gridcell", "data-ln-rowindex": cell.rowIndex, "data-ln-colindex": cell.colIndex, "data-ln-colspan": cell.colSpan, "data-ln-rowspan": cell.rowSpan, "data-ln-pin": cell.colPin ?? "center", "data-ln-cell": true, "data-ln-last-top-pin": cell.rowLastPinTop, "data-ln-first-bottom-pin": cell.rowFirstPinBottom, "data-ln-last-start-pin": cell.colLastStartPin, "data-ln-first-end-pin": cell.colFirstEndPin, tabIndex: isEditing ? -1 : 0, style: { ...style, ...props.style }, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: selected, rowIndeterminate: indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, { xPositions: xPositions })] }));
-}));

package/dist/cells/use-cell-style.d.ts

@@ -1,3 +0,0 @@
-import { type CSSProperties } from "react";
-import type { Cell } from "./+types.cell";
-export declare function useCellStyle(xPositions: Uint32Array, yPositions: Uint32Array, cell: Cell, rtl: boolean, detailHeight: number, additional: CSSProperties | undefined): CSSProperties;

package/dist/cells/use-cell-style.js

@@ -1,51 +0,0 @@
-import { useMemo } from "react";
-import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
-export function useCellStyle(xPositions, yPositions, cell, rtl, detailHeight, additional) {
-    const width = sizeFromCoord(cell.colIndex, xPositions, cell.colSpan);
-    const height = sizeFromCoord(cell.rowIndex, yPositions, cell.rowSpan) - detailHeight;
-    const isSticky = !!cell.colPin;
-    const isRowPinned = !!cell.rowPin;
-    const styles = useMemo(() => {
-        const styles = {
-            height,
-            width,
-            minWidth: width,
-            maxWidth: width,
-            boxSizing: "border-box",
-            pointerEvents: "all",
-            display: "inline-block",
-            overflow: "hidden",
-        };
-        if (cell.colPin === "end") {
-            styles.position = "sticky";
-            const x = xPositions.at(-1) - xPositions[cell.colIndex + cell.colSpan];
-            if (rtl)
-                styles.left = x;
-            else
-                styles.right = x;
-            styles.zIndex = isRowPinned ? 5 : 2;
-        }
-        else if (isSticky) {
-            styles.position = "sticky";
-            const x = xPositions[cell.colIndex];
-            if (rtl)
-                styles.right = x;
-            else
-                styles.left = x;
-            styles.zIndex = isRowPinned ? 5 : 2;
-        }
-        return { ...additional, ...styles };
-    }, [
-        additional,
-        cell.colIndex,
-        cell.colPin,
-        cell.colSpan,
-        height,
-        isRowPinned,
-        isSticky,
-        rtl,
-        width,
-        xPositions,
-    ]);
-    return styles;
-}

package/dist/header/header-cell.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useGridRoot } from "../context.js";
-import { COLUMN_MARKER_ID, HeaderCellReact } from "@1771technologies/lytenyte-shared";
-import { fastDeepMemo, useCombinedRefs, } from "@1771technologies/lytenyte-react-hooks";
-import { useHeaderCellRenderer } from "./use-header-cell-renderer.js";
-import { ResizeHandler } from "./resize-handler.js";
-import { useDragMove } from "./use-drag-move.js";
-const HeaderCellImpl = forwardRef(function HeaderCell({ cell, resizerAs, resizerStyle, resizerClassName, children, ...props }, forwarded) {
-    const grid = useGridRoot().grid;
-    const ctx = grid.state;
-    const xPositions = ctx.xPositions.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, isFloating: cell.kind === "floating", xPositions: xPositions, children: [children == undefined ? _jsx(Renderer, { column: cell.column, grid: grid }) : children, resizable && cell.kind === "cell" && (_jsx(ResizeHandler, { cell: cell, xPositions: xPositions, as: resizerAs, className: resizerClassName, style: resizerStyle }))] }));
-});
-export const HeaderCell = fastDeepMemo(HeaderCellImpl);

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

@@ -1,5 +0,0 @@
-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

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useGridRoot } from "../context.js";
-import { HeaderGroupCellReact } from "@1771technologies/lytenyte-shared";
-import { fastDeepMemo, useCombinedRefs } from "@1771technologies/lytenyte-react-hooks";
-import { useDragMove } from "./use-drag-move.js";
-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);
-    const isExpanded = grid.state.columnGroupExpansions.useValue()[cell.id] ??
-        grid.state.columnGroupDefaultExpansion.get();
-    return (_jsx(HeaderGroupCellReact, { ...props, ...dragProps, ref: combined, cell: cell, cellId: cell.id, height: ctx.headerGroupHeight.useValue(), xPositions: ctx.xPositions.useValue(), isHiddenMove: cell.isHiddenMove ?? false, "data-ln-collapsible": cell.isCollapsible, "data-ln-collapsed": !isExpanded, children: children == undefined ? cell.id : children }));
-});
-export const HeaderGroupCell = fastDeepMemo(HeaderGroupCellImpl);

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

@@ -1,4 +0,0 @@
-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

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
-import { forwardRef } from "react";
-import { useGridRoot } from "../context.js";
-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.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useGridRoot } from "../context.js";
-import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
-import { HeaderReact } from "@1771technologies/lytenyte-shared";
-const HeaderImpl = forwardRef(function Header(props, forwarded) {
-    const grid = useGridRoot().grid;
-    const xPositions = grid.state.xPositions.useValue();
-    const columnVisible = grid.state.columnMeta.useValue();
-    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(), xPositions: xPositions, countBeforeEnd: columnVisible.columnVisibleCenterCount + columnVisible.columnVisibleStartCount, width: grid.state.widthTotal.useValue() }));
-});
-export const Header = fastDeepMemo(HeaderImpl);

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

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

package/dist/header/resize-handler.js

@@ -1,136 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useSlot } from "@1771technologies/lytenyte-react-hooks";
-import {} from "react";
-import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
-import { useGridRoot } from "../context.js";
-import { getComputedStyle } from "@1771technologies/lytenyte-dom-utils";
-import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
-export function ResizeHandler({ as, cell, xPositions, style, className, }) {
-    const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
-    const sx = useGridRoot().grid;
-    const double = sx.state.columnDoubleClickToAutosize.useValue();
-    const defaultProps = {
-        role: "button",
-        "data-ln-header-resizer": "true",
-        "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
-        tabIndex: -1,
-        onDoubleClick: () => {
-            if (!double)
-                return;
-            sx.api.columnAutosize({
-                columns: [cell.column],
-                includeHeader: true,
-            });
-        },
-        onPointerDown: (ev) => {
-            const vp = sx.state.viewport.get();
-            if (!vp)
-                return;
-            if (ev.pointerType === "mouse" && ev.button !== 0)
-                return;
-            ev.preventDefault();
-            ev.stopPropagation();
-            const isRtl = sx.state.rtl.get();
-            let startX = null;
-            let anim = null;
-            const style = getComputedStyle(vp);
-            const overflow = style.overflowX;
-            vp.style.overflowX = "hidden";
-            const base = sx.state.columnBase.get();
-            const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
-            const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
-            const maxDelta = maxWidth - width;
-            const minDelta = minWidth - width;
-            const deltaRef = { current: 0 };
-            const controller = new AbortController();
-            document.addEventListener("pointermove", (ev) => {
-                if (startX === null) {
-                    startX = getClientX(ev);
-                    return;
-                }
-                const endAdjust = cell.colPin === "end" ? -1 : 1;
-                const rtlAdjust = isRtl ? -1 : 1;
-                deltaRef.current = clamp(minDelta, (getClientX(ev) - startX) * endAdjust * rtlAdjust, maxDelta);
-                if (anim)
-                    return;
-                anim = requestAnimationFrame(() => {
-                    const newWidth = width + deltaRef.current;
-                    sx.api.columnResize({ [cell.id]: newWidth });
-                    // TODO @Mike: the below method is a much faster, but potentially much tricky way to get resizing done. We should investigate
-                    // the best approach to lever this. The main issues are around resizing group headers and ensuring column cells pinned to the
-                    // end of the grid do not get shifted.
-                    // const id = sx.state.gridId.get();
-                    // const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
-                    // const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
-                    // const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
-                    // const header = vp.querySelector(headerQuery) as HTMLElement;
-                    // const floating = vp.querySelector(floatingQuery) as HTMLElement | undefined;
-                    // if (!header) return;
-                    // const pin = header.getAttribute("data-ln-pin");
-                    // const cells = Array.from(vp.querySelectorAll(query)) as HTMLElement[];
-                    // const headers = [header];
-                    // if (floating) headers.push(floating);
-                    // headers.forEach((c) => {
-                    //   if (!isHTMLElement(c)) return;
-                    //   c.style.removeProperty("min-width");
-                    //   c.style.removeProperty("max-width");
-                    //   c.style.width = `${width + deltaRef.current}px`;
-                    //   if (pin === "end") {
-                    //     const viewportWidth = sx.state.viewportWidthInner.get();
-                    //     const spaceLeft = xPositions.at(-1)! - xPositions[cell.colStart];
-                    //     const x = viewportWidth - spaceLeft - deltaRef.current;
-                    //     c.style.transform = getTranslate(isRtl ? -x : x, 0);
-                    //   }
-                    // });
-                    // const widthPx = `${width + deltaRef.current}px`;
-                    // cells.forEach((c) => {
-                    //   if (!isHTMLElement(c)) return;
-                    //   c.style.minWidth = widthPx;
-                    //   c.style.maxWidth = widthPx;
-                    //   c.style.width = widthPx;
-                    // });
-                    // const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
-                    // let after: HTMLElement[];
-                    // if (pin !== "end") {
-                    //   after = Array.from(vp.querySelectorAll(headerAfterQuery)) as HTMLElement[];
-                    // } else {
-                    //   after = [];
-                    // }
-                    // after.forEach((c) => {
-                    //   if (!isHTMLElement(c)) return;
-                    //   const thisPin = c.getAttribute("data-ln-pin");
-                    //   if (pin === "end" && thisPin === "end") return;
-                    //   if (pin !== "end" && thisPin === "end") return;
-                    //   const colindex = getColIndexFromEl(c);
-                    //   const transform = xPositions[colindex] + deltaRef.current;
-                    //   c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
-                    // });
-                    anim = null;
-                });
-            }, { signal: controller.signal });
-            window.addEventListener("pointerup", () => {
-                if (anim)
-                    cancelAnimationFrame(anim);
-                controller.abort();
-                vp.style.overflowX = overflow;
-                const newWidth = width + deltaRef.current;
-                sx.api.columnResize({ [cell.id]: newWidth });
-            }, { signal: controller.signal });
-        },
-        className,
-        style: {
-            height: "100%",
-            width: "6px",
-            ...style,
-            top: "0px",
-            insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
-            insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
-            position: "absolute",
-        },
-    };
-    const edge = useSlot({
-        props: [defaultProps],
-        slot: as ?? _jsx("div", {}),
-    });
-    return edge;
-}

package/dist/header/use-drag-move.d.ts

@@ -1,14 +0,0 @@
-import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types.js";
-import { type JSX } from "react";
-import type { InternalAtoms } from "../state/+types.js";
-export declare function useDragMove<T>(grid: Grid<T> & {
-    internal: InternalAtoms;
-}, cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>, onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"]): {
-    draggable?: undefined;
-    onDragStart?: undefined;
-    ref?: undefined;
-} | {
-    draggable: true;
-    onDragStart: (e: import("react").DragEvent<Element>) => void;
-    ref: any;
-};

package/dist/header/use-drag-move.js

@@ -1,97 +0,0 @@
-import { COLUMN_MARKER_ID, getHoveredColumnIndex, getNearestFocusable, GROUP_COLUMN_PREFIX, useDraggable, } from "@1771technologies/lytenyte-shared";
-import { useMemo, useRef } from "react";
-export function useDragMove(grid, cell, onDragStart) {
-    const ctx = grid.state;
-    const meta = ctx.columnMeta.useValue();
-    const base = ctx.columnBase.useValue();
-    const columns = useMemo(() => {
-        const columns = [];
-        for (let i = cell.colStart; i < cell.colEnd; i++) {
-            columns.push(meta.columnsVisible[i]);
-        }
-        return columns;
-    }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
-    const isMovable = useMemo(() => {
-        return columns.every((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
-            c.id !== COLUMN_MARKER_ID &&
-            (c.uiHints?.movable ?? base.uiHints?.movable ?? false));
-    }, [base.uiHints?.movable, columns]);
-    const swapDirection = useRef(null);
-    const swapIndex = useRef(-1);
-    const swapPrevIndex = useRef(-1);
-    const isForward = useRef(false);
-    const prevPos = useRef(-1);
-    const { dragProps } = useDraggable({
-        getItems: () => ({}),
-        onDragStart: () => {
-            if (cell.kind === "group")
-                grid.internal.draggingHeader.set(cell);
-        },
-        onDragEnd: () => {
-            grid.internal.draggingHeader.set(null);
-        },
-        onDragMove: (p) => {
-            const element = document.elementFromPoint(p.position.x, p.position.y);
-            const vp = grid.state.viewport.get();
-            if (!vp?.contains(element))
-                return;
-            const nearest = getNearestFocusable(element);
-            if (!nearest)
-                return;
-            if (prevPos.current < p.position.x)
-                isForward.current = true;
-            if (prevPos.current > p.position.x)
-                isForward.current = false;
-            prevPos.current = p.position.x;
-            const meta = grid.state.columnMeta.get();
-            const index = getHoveredColumnIndex({
-                viewport: vp,
-                centerCount: meta.columnVisibleCenterCount,
-                startCount: meta.columnVisibleStartCount,
-                endCount: meta.columnVisibleEndCount,
-                clientX: p.position.x,
-                rtl: grid.state.rtl.get(),
-                xPositions: grid.state.xPositions.get(),
-            });
-            if (index == null)
-                return;
-            const columnTarget = grid.api.columnByIndex(index);
-            if (columnTarget) {
-                if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
-                    return;
-            }
-            const first = columns[0];
-            const currentIndex = grid.api.columnIndex(first);
-            const columnIndices = columns.map((c) => grid.api.columnIndex(c));
-            if (columnIndices.includes(index))
-                return;
-            const ignoreMove = swapDirection.current === isForward.current &&
-                swapIndex.current === currentIndex &&
-                index === swapPrevIndex.current;
-            if (currentIndex === index || ignoreMove)
-                return;
-            swapDirection.current = isForward.current;
-            swapIndex.current = index;
-            swapPrevIndex.current = currentIndex;
-            grid.api.columnMove({
-                moveColumns: columns,
-                moveTarget: index,
-                before: currentIndex > index,
-                updatePinState: true,
-            });
-        },
-    });
-    const finalProps = useMemo(() => {
-        if (cell.kind === "floating" || !isMovable)
-            return {};
-        return {
-            draggable: true,
-            onDragStart: (e) => {
-                onDragStart?.(e);
-                dragProps.onDragStart(e);
-            },
-            ref: dragProps.ref,
-        };
-    }, [cell.kind, dragProps, isMovable, onDragStart]);
-    return finalProps;
-}

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

@@ -1,4 +0,0 @@
-import type { HeaderCellFloating, HeaderCellLayout, HeaderCellRendererParams } from "../+types";
-declare function DefaultRenderer(p: HeaderCellRendererParams<any>): import("react/jsx-runtime").JSX.Element;
-export declare function useHeaderCellRenderer<T>(cell: HeaderCellLayout<T> | HeaderCellFloating<T>): import("../+types").HeaderFloatingCellRendererFn<any> | import("../+types").HeaderCellRendererFn<T> | typeof DefaultRenderer;
-export {};

package/dist/header/use-header-cell-renderer.js

@@ -1,37 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useGridRoot } from "../context.js";
-// eslint-disable-next-line react-refresh/only-export-components
-function DefaultRenderer(p) {
-    return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
-}
-export function useHeaderCellRenderer(cell) {
-    const ctx = useGridRoot().grid;
-    const base = ctx.state.columnBase.useValue();
-    const floatingRenderers = ctx.state.floatingCellRenderers.useValue();
-    const headerRenderers = ctx.state.headerCellRenderers.useValue();
-    return useMemo(() => {
-        if (cell.kind === "cell") {
-            const renderer = cell.column.headerRenderer ?? base.headerRenderer ?? DefaultRenderer;
-            if (typeof renderer === "string")
-                return headerRenderers[renderer] ?? DefaultRenderer;
-            else
-                return renderer;
-        }
-        else {
-            const renderer = cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
-            if (typeof renderer === "string")
-                return floatingRenderers[renderer] ?? DefaultRenderer;
-            else
-                return renderer;
-        }
-    }, [
-        base.floatingCellRenderer,
-        base.headerRenderer,
-        cell.column.floatingCellRenderer,
-        cell.column.headerRenderer,
-        cell.kind,
-        floatingRenderers,
-        headerRenderers,
-    ]);
-}

package/dist/root/root.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { RootProvider } from "../context.js";
-import { DialogDriver } from "./dialog-driver.js";
-import { PopoverDriver } from "./popover-driver.js";
-import { CellSelectionDriver } from "../cell-selection/cell-selection-driver.js";
-import { hasAValidLicense, licenseState } from "../license.js";
-export function Root({ grid, children, ...events }) {
-    useEffect(() => {
-        if (hasAValidLicense)
-            return;
-        const existing = document.getElementById("lng1771-watermark");
-        if (existing)
-            return;
-        const invalidLicenseWatermark = document.createElement("div");
-        invalidLicenseWatermark.style.position = "fixed";
-        invalidLicenseWatermark.style.bottom = "0px";
-        invalidLicenseWatermark.style.insetInlineEnd = "0px";
-        invalidLicenseWatermark.style.background = "rgb(255, 167, 167)";
-        invalidLicenseWatermark.style.color = "black";
-        invalidLicenseWatermark.style.fontSize = "1.2rem";
-        invalidLicenseWatermark.style.fontWeight = "bold";
-        invalidLicenseWatermark.style.border = "1px solid black";
-        invalidLicenseWatermark.style.padding = "16px";
-        if (licenseState === "expired")
-            invalidLicenseWatermark.innerHTML = `LyteNyte Grid: License key expired. Your license covers earlier versions only.`;
-        else if (licenseState === "invalid")
-            invalidLicenseWatermark.innerHTML = `LyteNyte Grid: Invalid license key. Please verify the key and try again.`;
-        else
-            invalidLicenseWatermark.innerHTML = `LyteNyte Grid PRO is being used for evaluation. 
-      <a href="https://1771Technologies.com/pricing">Click here</a> to secure your license.`;
-        document.body.appendChild(invalidLicenseWatermark);
-        return () => invalidLicenseWatermark.remove();
-    }, []);
-    // Add event listeners in the standard react way
-    useEffect(() => {
-        const ev = Object.entries(events).map(([onName, fn]) => {
-            if (!onName.startsWith("on"))
-                return;
-            const name = onName[2].toLowerCase() + onName.slice(3);
-            return grid.api.eventAddListener(name, fn);
-        });
-        return () => ev.forEach((c) => c?.());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [Object.values(events)]);
-    const internal = grid.internal;
-    useEffect(() => {
-        return internal.focusActive.watch(() => {
-            const editActive = internal.editActivePos.get();
-            if (!editActive)
-                return;
-            const focus = internal.focusActive.get();
-            if (focus?.kind !== "cell") {
-                grid.api.editEnd();
-            }
-            else {
-                if (grid.api.editIsCellActive({ rowIndex: focus.rowIndex, column: focus.colIndex }))
-                    return;
-                grid.api.editEnd();
-            }
-        });
-    }, [grid.api, internal.editActivePos, internal.focusActive]);
-    const [vp, ref] = useState(null);
-    useEffect(() => {
-        if (!vp)
-            return;
-        const controller = new AbortController();
-        vp.addEventListener("scroll", () => {
-            internal.xScroll.set(Math.abs(vp.scrollLeft));
-            internal.yScroll.set(vp.scrollTop);
-        }, { signal: controller.signal });
-        return () => controller.abort();
-    }, [internal.xScroll, internal.yScroll, vp]);
-    useEffect(() => {
-        grid.state.viewport.set(vp);
-        if (!vp)
-            return;
-        const obs = new ResizeObserver(() => {
-            grid.state.viewportHeightOuter.set(vp.offsetHeight);
-            grid.state.viewportWidthOuter.set(vp.offsetWidth);
-            grid.state.viewportWidthInner.set(vp.clientWidth);
-            grid.state.viewportHeightInner.set(vp.clientHeight);
-        });
-        grid.state.viewportHeightOuter.set(vp.offsetHeight);
-        grid.state.viewportWidthOuter.set(vp.offsetWidth);
-        grid.state.viewportWidthInner.set(vp.clientWidth);
-        grid.state.viewportHeightInner.set(vp.clientHeight);
-        obs.observe(vp);
-        return () => {
-            obs.disconnect();
-        };
-    }, [
-        grid.state.viewport,
-        grid.state.viewportHeightInner,
-        grid.state.viewportHeightOuter,
-        grid.state.viewportWidthInner,
-        grid.state.viewportWidthOuter,
-        vp,
-    ]);
-    const value = useMemo(() => {
-        return {
-            ref,
-            grid: grid,
-        };
-    }, [grid]);
-    const cellSelectionMode = grid.state.cellSelectionMode.useValue();
-    return (_jsxs(RootProvider, { value: value, children: [_jsx(DialogDriver, {}), _jsx(PopoverDriver, {}), cellSelectionMode !== "none" && _jsx(CellSelectionDriver, {}), children] }));
-}