@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.2

package/dist/types/types.d.ts

@@ -0,0 +1,8 @@
+export type * from "../+types";
+export type { CellProps } from "../cells/cell";
+export type { HeaderCellProps } from "../header/header-cell";
+export type { HeaderGroupCellProps } from "../header/header-group-cell";
+export type { HeaderRowProps } from "../header/header-row";
+export type { RootProps } from "../root/root";
+export type { RowFullWidthProps } from "../rows/row-full-width";
+export {};

package/dist/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/cycle-sorts.d.ts

@@ -0,0 +1,2 @@
+import type { Column, Grid } from "../+types";
+export declare function cycleSorts<T>(grid: Grid<T>, column: Column<T>): void;

package/dist/utils/cycle-sorts.js

@@ -0,0 +1,16 @@
+export function cycleSorts(grid, column) {
+    const current = grid.api.sortForColumn(column.id);
+    if (current) {
+        if (current.sort.isDescending)
+            grid.state.sortModel.set([]);
+        else
+            grid.state.sortModel.set([
+                { columnId: column.id, sort: { kind: "string" }, isDescending: true },
+            ]);
+    }
+    else {
+        grid.state.sortModel.set([
+            { columnId: column.id, sort: { kind: "string" }, isDescending: false },
+        ]);
+    }
+}

package/dist/viewport/begin-editing.d.ts

@@ -0,0 +1,5 @@
+import type { Grid } from "../+types";
+import type { InternalAtoms } from "../state/+types";
+export declare function beginEditing<T>(grid: Grid<T> & {
+    internal: InternalAtoms;
+}, activator?: "single" | "double-click", init?: any): void;

package/dist/viewport/begin-editing.js

@@ -0,0 +1,15 @@
+export function beginEditing(grid, activator, init) {
+    const focusPos = grid.internal.focusActive.get();
+    const editMode = grid.state.editCellMode.get();
+    const editActivator = grid.state.editClickActivator.get();
+    if (focusPos?.kind !== "cell" || editMode === "readonly")
+        return;
+    if (activator && editActivator !== activator)
+        return;
+    const column = grid.api.columnByIndex(focusPos.colIndex);
+    if (!column)
+        return;
+    if (grid.api.editIsCellActive({ column, rowIndex: focusPos.rowIndex }))
+        return;
+    grid.api.editBegin({ column, rowIndex: focusPos.rowIndex, init });
+}

package/dist/viewport/viewport.d.ts

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

package/dist/viewport/viewport.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useCombinedRefs } from "@1771technologies/lytenyte-react-hooks";
+import { useGridRoot } from "../context.js";
+import { handleNavigationKeys, handleSkipInner, useFocusTracking, } from "@1771technologies/lytenyte-shared";
+import { beginEditing } from "./begin-editing.js";
+export const Viewport = forwardRef(function Viewport({ children, style, ...props }, forwarded) {
+    const ctx = useGridRoot();
+    const ref = useCombinedRefs(ctx.ref, forwarded);
+    const vp = ctx.grid.state.viewport.useValue();
+    const width = ctx.grid.state.widthTotal.useValue();
+    const height = ctx.grid.state.heightTotal.useValue();
+    const rtl = ctx.grid.state.rtl.useValue();
+    const cellSelectionMode = ctx.grid.state.cellSelectionMode.useValue();
+    const focused = useFocusTracking(vp, ctx.grid.internal.focusActive);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { tabIndex: 0, ...props, "data-ln-has-cell-selection": cellSelectionMode !== "none", onKeyDown: (e) => {
+                    handleSkipInner(e);
+                    props.onKeyDown?.(e);
+                    if (e.defaultPrevented || e.shiftKey)
+                        return;
+                    const ds = ctx.grid.state.rowDataStore;
+                    handleNavigationKeys(e, {
+                        vp: ctx.grid.state.viewport.get(),
+                        rowCount: ds.rowCount.get(),
+                        topCount: ds.rowTopCount.get(),
+                        centerCount: ds.rowCenterCount.get(),
+                        columnCount: ctx.grid.state.columnMeta.get().columnsVisible.length,
+                        focusActive: ctx.grid.internal.focusActive,
+                        id: ctx.grid.state.gridId.get(),
+                        getRootCell: ctx.grid.api.cellRoot,
+                        rtl: ctx.grid.state.rtl.get(),
+                        scrollIntoView: ctx.grid.api.scrollIntoView,
+                    });
+                    if (e.key === "Enter" || e.key.length === 1) {
+                        // We use a timeout to avoid setting the value on clicks. This can happen when a user types
+                        // a non-printable key.
+                        setTimeout(() => {
+                            beginEditing(ctx.grid, undefined, e.key === "Enter" ? undefined : e.key);
+                        });
+                    }
+                    if (e.key === "Backspace" || e.key === "Delete") {
+                        const focusPos = ctx.grid.internal.focusActive.get();
+                        if (focusPos?.kind === "cell")
+                            ctx.grid.api.editUpdate({
+                                column: focusPos.colIndex,
+                                rowIndex: focusPos.rowIndex,
+                                value: null,
+                            });
+                    }
+                }, onClick: (e) => {
+                    props.onClick?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    beginEditing(ctx.grid, "single");
+                    if (ctx.grid.state.rowSelectionActivator.get() === "single-click")
+                        ctx.grid.api.rowHandleSelect(e);
+                }, onDoubleClick: (e) => {
+                    props.onDoubleClick?.(e);
+                    if (e.defaultPrevented)
+                        return;
+                    beginEditing(ctx.grid, "double-click");
+                    if (ctx.grid.state.rowSelectionActivator.get() === "double-click")
+                        ctx.grid.api.rowHandleSelect(e);
+                }, role: "grid", ref: ref, "data-ln-viewport": true, style: {
+                    ...style,
+                    position: "relative",
+                    display: "flex",
+                    flexDirection: "column",
+                    width: "100%",
+                    height: "100%",
+                    overflow: style?.overflow ?? "auto",
+                    direction: rtl ? "rtl" : "ltr",
+                }, children: [vp && children, !vp && _jsx("div", { style: { width, height } })] }), !focused && (_jsx("div", { role: "none", "data-ln-focus-capture": true, onFocusCapture: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    vp?.focus();
+                }, tabIndex: 0 }))] }));
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "1.0.12-dev.1",
+  "version": "1.0.12-dev.2",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -49,12 +49,12 @@
   },
   "dependencies": {
     "@1771technologies/atom": "^1.0.2",
-    "@1771technologies/lytenyte-core": "1.0.12-dev.1",
-    "@1771technologies/lytenyte-dragon": "1.0.12-dev.1",
-    "@1771technologies/lytenyte-shared": "1.0.12-dev.1",
-    "@1771technologies/lytenyte-js-utils": "1.0.12-dev.1",
-    "@1771technologies/lytenyte-dom-utils": "1.0.12-dev.1",
-    "@1771technologies/lytenyte-react-hooks": "1.0.12-dev.1"
+    "@1771technologies/lytenyte-core": "1.0.12-dev.2",
+    "@1771technologies/lytenyte-dragon": "1.0.12-dev.2",
+    "@1771technologies/lytenyte-shared": "1.0.12-dev.2",
+    "@1771technologies/lytenyte-dom-utils": "1.0.12-dev.2",
+    "@1771technologies/lytenyte-js-utils": "1.0.12-dev.2",
+    "@1771technologies/lytenyte-react-hooks": "1.0.12-dev.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",