@1771technologies/lytenyte-pro 1.0.12 → 1.0.13

package/dist/viewport/viewport.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 { handleNavigation, useFocusTracking } from "@1771technologies/lytenyte-shared";
 import { beginEditing } from "./begin-editing.js";
 export const Viewport = forwardRef(function Viewport({ children, style, ...props }, forwarded) {
     const ctx = useGridRoot();
@@ -12,24 +12,30 @@ export const Viewport = forwardRef(function Viewport({ children, style, ...props
     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);
+    const [focused, vpFocused] = useFocusTracking(vp, ctx.grid.internal.focusActive);
+    const shouldCapture = !focused && !vpFocused;
     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)
+                    if (e.defaultPrevented || e.isPropagationStopped() || !vp)
                         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(),
+                    handleNavigation({
+                        gridId: ctx.grid.state.gridId.get(),
+                        rtl,
+                        event: e,
+                        viewport: vp,
+                        topCount: ctx.grid.state.rowDataStore.rowTopCount.get(),
+                        centerCount: ctx.grid.state.rowDataStore.rowCenterCount.get(),
                         getRootCell: ctx.grid.api.cellRoot,
-                        rtl: ctx.grid.state.rtl.get(),
                         scrollIntoView: ctx.grid.api.scrollIntoView,
+                        focusActive: ctx.grid.internal.focusActive,
+                        columnCount: ctx.grid.state.columnMeta.get().columnsVisible.length,
+                        rowCount: ctx.grid.state.rowDataStore.rowCount.get(),
+                        isRowDetailExpanded: (r) => {
+                            const row = ctx.grid.api.rowByIndex(r);
+                            if (!row)
+                                return false;
+                            return ctx.grid.api.rowDetailIsExpanded(row);
+                        },
                     });
                     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
@@ -66,11 +72,12 @@ export const Viewport = forwardRef(function Viewport({ children, style, ...props
                     position: "relative",
                     display: "flex",
                     flexDirection: "column",
+                    contain: "strict",
                     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) => {
+                }, children: [vp && children, !vp && _jsx("div", { style: { width, height } })] }), shouldCapture && (_jsx("div", { role: "none", "data-ln-focus-capture": true, onFocusCapture: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     vp?.focus();

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",
+  "version": "1.0.13",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -48,12 +48,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/lytenyte-shared": "1.0.12",
-    "@1771technologies/lytenyte-dom-utils": "1.0.12",
-    "@1771technologies/lytenyte-js-utils": "1.0.12",
-    "@1771technologies/lytenyte-core": "1.0.12",
-    "@1771technologies/lytenyte-dragon": "1.0.12",
-    "@1771technologies/lytenyte-react-hooks": "1.0.12"
+    "@1771technologies/lytenyte-core": "1.0.13",
+    "@1771technologies/lytenyte-dragon": "1.0.13",
+    "@1771technologies/lytenyte-shared": "1.0.13",
+    "@1771technologies/lytenyte-js-utils": "1.0.13",
+    "@1771technologies/lytenyte-dom-utils": "1.0.13",
+    "@1771technologies/lytenyte-react-hooks": "1.0.13"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",