@1771technologies/lytenyte-pro 1.0.18 → 1.0.20

package/README.md

@@ -110,12 +110,12 @@ information on available support channels and response options.
 
 ## Contributing
 
-Please review our [contributing guide](./CONTRIBUTING.md) to learn about our development
+Please review our [contributing guide](https://github.com/1771-Technologies/lytenyte/blob/main/CONTRIBUTING.md) to learn about our development
 process, bug reporting procedures, and codebase maintenance practices.
 
 ## Changelog
 
-Our [changelog](https://www.1771technologies.com/docs/changelog/changelog) is regularly updated
+Our [changelog](https://www.1771technologies.com/docs/changelog/latest) is regularly updated
 with detailed notes on new features, improvements, and bug fixes in each release.
 LyteNyte Grid follows [semantic versioning](https://semver.org/) to ensure clear and predictable upgrade paths.
 

package/dist/+types.d.ts

@@ -2865,20 +2865,6 @@ export interface ColumnMoveParams<T> {
      */
     readonly updatePinState?: boolean;
 }
-/**
- * The accepted input types for the `focusCell` method, which updates the active focus in LyteNyte Grid.
- * Supports various formats:
- *
- * - A row/column pair to focus a specific cell.
- * - A header or group header cell position.
- * - A directional alias ("next", "prev", "up", "down") relative to the current focus (only when the grid is focused).
- *
- * @group Grid API
- */
-export type FocusCellParams<T> = {
-    row: number;
-    column: string | number | Column<T>;
-} | PositionHeaderCell | Omit<PositionHeaderGroupCell, "columnStartIndex" | "columnEndIndex"> | "next" | "prev" | "up" | "down";
 /**
  * The LyteNyte Grid API provides a comprehensive set of methods that allow developers
  *   to programmatically query, update, and manipulate grid state and data.
@@ -2957,11 +2943,6 @@ export interface GridApi<T> {
      * Accepts a configuration object that controls the scroll behavior.
      */
     readonly scrollIntoView: (options: ScrollIntoViewOptions<T>) => void;
-    /**
-     * Sets focus to a specific cell or navigates the focus based on a direction keyword.
-     * Useful for keyboard-driven navigation and programmatic focus management.
-     */
-    readonly focusCell: (position: FocusCellParams<T>) => void;
     /**
      * Starts cell editing at a specified location. If the grid is set to read-only mode, this method has no effect.
      */
@@ -6150,6 +6131,10 @@ export interface RowDataSourceServerParams<T> {
      *
      * Use this property when you want the grid to reset based on some external piece of data, such as an
      * external search query.
+     *
+     * Note all the items in the list should be referentially stable. LyteNyte Grid will shallow compare the
+     * array, and check equality using the `!==` operator. If an item is not stable it may result in an infinite
+     * reset loop.
      */
     readonly dataFetchExternals?: unknown[];
     /**

package/dist/__play__/cell-selections/cell-selection.play.js

@@ -30,7 +30,7 @@ const columns = [
     { id: "campaign" },
     { id: "pdays" },
     { id: "previous" },
-    { id: "poutcome" },
+    { id: "poutcome", name: "P Outcome" },
     { id: "y" },
 ];
 export default function CellSelection({ data = bankDataSmall }) {

package/dist/__play__/filter-select/filter-select.play.js

@@ -30,7 +30,7 @@ const columns = [
     { id: "campaign" },
     { id: "pdays" },
     { id: "previous" },
-    { id: "poutcome" },
+    { id: "poutcome", name: "P Outcome" },
     { id: "y" },
 ];
 export default function FilterSelection({ data = bankDataSmall }) {

package/dist/cell-selection/cell-selection-driver.js

@@ -45,7 +45,7 @@ export function CellSelectionDriver() {
                 const focusable = getNearestFocusable(gridId, target);
                 if (!focusable)
                     return;
-                const position = getPositionFromFocusable(focusable, gridId);
+                const position = getPositionFromFocusable(gridId, focusable);
                 if (position.kind !== "cell" && position.kind !== "full-width")
                     return;
                 const rowIndex = position.rowIndex;
@@ -132,7 +132,7 @@ export function CellSelectionDriver() {
             const focusable = getNearestFocusable(gridId, target);
             if (!focusable)
                 return;
-            const position = getPositionFromFocusable(focusable, gridId);
+            const position = getPositionFromFocusable(gridId, focusable);
             if (position.kind !== "cell" && position.kind !== "full-width")
                 return;
             const rowIndex = position.rowIndex;

package/dist/state/api/position-from-element.js

@@ -4,6 +4,6 @@ export const makePositionFromElement = (grid) => {
         const focusable = getNearestFocusable(grid.state.gridId.get(), el);
         if (!focusable)
             return null;
-        return getPositionFromFocusable(focusable, grid.state.gridId.get());
+        return getPositionFromFocusable(grid.state.gridId.get(), focusable);
     };
 };

package/dist/state/use-lytenyte.js

@@ -20,7 +20,6 @@ import { makeRowGroupColumnIndex } from "./api/row-group-column-index.js";
 import { makeRowGroupIsExpanded } from "./api/row-group-is-expanded.js";
 import { makeRowGroupToggle } from "./api/row-group-toggle.js";
 import { makeRowGroupApplyExpansions } from "./api/row-group-apply-expansions.js";
-import { makeFocusCell } from "./api/focus-cell.js";
 import { makeEditBegin } from "./api/edit-begin.js";
 import { makeEditIsCellActive } from "./api/edit-is-cell-active.js";
 import { makeEditEnd } from "./api/edit-end.js";
@@ -609,7 +608,6 @@ export function makeLyteNyte(p) {
         editEnd: makeEditEnd(grid),
         editIsCellActive: makeEditIsCellActive(grid),
         editUpdate: makeEditUpdate(grid),
-        focusCell: makeFocusCell(grid),
         rowById: makeRowById(grid),
         rowByIndex: makeRowByIndex(grid),
         rowDetailIsExpanded: makeRowDetailIsExpanded(grid),

package/main.css

@@ -7,6 +7,8 @@
   --lng1771-primary-70: #053f9e;
   --lng1771-primary-90: #012259;
 
+  --lng1771-mix-value: black;
+
   --lng1771-row-selected: #d6e4fe;
   --lng1771-focus-outline: var(--lng1771-primary-50);
   --lng1771-gradient-shadow: linear-gradient(90deg, var(--lng1771-gray-50), var(--lng1771-gray-50));
@@ -51,6 +53,7 @@
   --lng1771-primary-70: #004dcc;
   --lng1771-primary-90: #00307d;
 
+  --lng1771-mix-value: white;
   --lng1771-row-selected: #1c2b44;
   --lng1771-focus-outline: var(--lng1771-primary-50);
 
@@ -87,6 +90,7 @@
   --lng1771-primary-70: #278177;
   --lng1771-primary-90: #278177;
 
+  --lng1771-mix-value: white;
   --lng1771-focus-outline: var(--lng1771-primary-50);
   --lng1771-row-selected: #192b2d;
 
@@ -125,6 +129,7 @@
   --lng1771-cell-font-typeface: var(--lng1771-typeface);
   --lng1771-menu-item-font-typeface: var(--lng1771-typeface);
 
+  --lng1771-mix-value: white;
   --lng1771-primary-05: rgba(87, 255, 255, 0.07);
   --lng1771-primary-10: rgba(87, 255, 255, 0.07);
   --lng1771-primary-30: rgba(87, 255, 255, 0.3);
@@ -168,7 +173,8 @@
   --lng1771-primary-70: rgba(240, 48, 230, 1);
   --lng1771-primary-90: rgba(194, 0, 184, 1);
 
-  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
+  --lng1771-mix-value: black;
+  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 95%, black 5%);
   --lng1771-focus-outline: var(--color-primary);
 
   --lng1771-gray-00: #cff8ff;
@@ -204,7 +210,8 @@
   --lng1771-primary-70: color-mix(in srgb, var(--color-accent) 70%, black);
   --lng1771-primary-90: color-mix(in srgb, var(--color-accent) 90%, black);
 
-  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
+  --lng1771-mix-value: black;
+  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 95%, black 5%);
   --lng1771-focus-outline: var(--color-primary);
 
   --lng1771-gray-00: var(--color-background);
@@ -240,7 +247,8 @@
   --lng1771-primary-70: color-mix(in srgb, var(--color-accent) 70%, white);
   --lng1771-primary-90: color-mix(in srgb, var(--color-accent) 90%, white);
 
-  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 30%, transparent);
+  --lng1771-mix-value: white;
+  --lng1771-row-selected: color-mix(in srgb, var(--color-accent) 95%, white 5%);
   --lng1771-focus-outline: var(--color-primary);
 
   --lng1771-gray-00: var(--color-background);
@@ -282,6 +290,8 @@
     font-family: var(--lng1771-typeface);
 
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
 
     background-color: var(--lng1771-gray-00);
 
@@ -322,7 +332,11 @@
     background-color: var(--lng1771-gray-10);
   }
   [data-ln-row-selected="true"][data-ln-row="true"]:hover [data-ln-cell="true"] {
-    background-color: var(--lng1771-primary-30);
+    background-color: color-mix(
+      in srgb,
+      var(--lng1771-row-selected) 95%,
+      var(--lng1771-mix-value) 5%
+    );
   }
   [data-ln-rowtype="full-width"][data-ln-row="true"] > div:hover {
     background-color: var(--lng1771-gray-10);
@@ -386,7 +400,7 @@
       height: calc(100% - 8px);
       background-color: var(--lng1771-gray-20);
     }
-    &[data-ln-pin="end"]::after {
+    &[data-ln-colpin="end"]::after {
       inset-inline-end: unset;
       inset-inline-start: 0px;
     }

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.18",
+  "version": "1.0.20",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -48,8 +48,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/lytenyte-core": "1.0.18",
-    "@1771technologies/lytenyte-shared": "1.0.18"
+    "@1771technologies/lytenyte-core": "1.0.20",
+    "@1771technologies/lytenyte-shared": "1.0.20"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/state/api/focus-cell.d.ts

@@ -1,5 +0,0 @@
-import type { Grid, GridApi } from "../../+types";
-import type { InternalAtoms } from "../+types";
-export declare const makeFocusCell: (grid: Grid<any> & {
-    internal: InternalAtoms;
-}) => GridApi<any>["focusCell"];

package/dist/state/api/focus-cell.js

@@ -1,124 +0,0 @@
-import { focusCell, getHeaderRows, handleNavigation, isColumnFloatingHeader, } from "@1771technologies/lytenyte-shared";
-import { clamp } from "@1771technologies/lytenyte-shared";
-export const makeFocusCell = (grid) => {
-    return (position) => {
-        const vp = grid.state.viewport.get();
-        if (!vp)
-            return false;
-        if (typeof position === "string") {
-            let key = "";
-            if (position === "up")
-                key = "ArrowUp";
-            else if (position === "down")
-                key = "ArrowDown";
-            else if (position === "next")
-                key = grid.state.rtl.get() ? "ArrowLeft" : "ArrowRight";
-            else if (position === "prev")
-                key = grid.state.rtl.get() ? "ArrowRight" : "ArrowLeft";
-            if (!key)
-                return false;
-            const ds = grid.state.rowDataStore;
-            handleNavigation({
-                event: {
-                    key,
-                    ctrlKey: false,
-                    metaKey: false,
-                    preventDefault: () => { },
-                    stopPropagation: () => { },
-                },
-                topCount: grid.state.rowDataStore.rowTopCount.get(),
-                centerCount: grid.state.rowDataStore.rowCenterCount.get(),
-                isRowDetailExpanded: (r) => {
-                    const row = grid.api.rowByIndex(r);
-                    if (!row)
-                        return false;
-                    return grid.api.rowDetailIsExpanded(row);
-                },
-                viewport: vp,
-                rowCount: ds.rowCount.get(),
-                columnCount: grid.state.columnMeta.get().columnsVisible.length,
-                focusActive: grid.internal.focusActive,
-                gridId: grid.state.gridId.get(),
-                getRootCell: grid.api.cellRoot,
-                rtl: grid.state.rtl.get(),
-                scrollIntoView: grid.api.scrollIntoView,
-            });
-            return true;
-        }
-        if ("kind" in position) {
-            if (position.kind === "header-cell") {
-                grid.api.scrollIntoView({ column: position.colIndex });
-                const run = () => {
-                    const header = getHeaderRows(vp);
-                    if (!header)
-                        return false;
-                    for (const row of header) {
-                        const cell = row.querySelector(`[data-ln-header-cell][data-ln-colindex="${position.colIndex}"]`);
-                        if (!cell)
-                            continue;
-                        if (isColumnFloatingHeader(cell))
-                            continue;
-                        cell.focus();
-                        return true;
-                    }
-                    return false;
-                };
-                if (!run()) {
-                    setTimeout(() => {
-                        if (!run()) {
-                            setTimeout(() => run(), 20);
-                        }
-                    }, 8);
-                }
-                return true;
-            }
-            else if (position.kind === "header-group-cell") {
-                grid.api.scrollIntoView({ column: position.colIndex });
-                const run = () => {
-                    const header = getHeaderRows(vp);
-                    if (!header)
-                        return false;
-                    const row = header[position.hierarchyRowIndex];
-                    if (!row)
-                        return false;
-                    const headers = Array.from(row.querySelectorAll("[data-ln-header-range]"));
-                    const match = headers.find((c) => {
-                        const [colStartStr, colEndStr] = c.getAttribute("data-ln-header-range").split(",");
-                        const colStart = Number.parseInt(colStartStr);
-                        const colEnd = Number.parseInt(colEndStr);
-                        return colStart <= position.colIndex && position.colIndex < colEnd;
-                    });
-                    if (match) {
-                        match.focus();
-                        grid.internal.focusActive.set((prev) => ({ ...prev, colIndex }));
-                        return true;
-                    }
-                    return false;
-                };
-                if (!run()) {
-                    setTimeout(() => {
-                        if (!run()) {
-                            setTimeout(() => run(), 20);
-                        }
-                    }, 8);
-                }
-                return true;
-            }
-            else {
-                return false;
-            }
-        }
-        const columnCount = grid.state.columnMeta.get().columnsVisible.length - 1;
-        const colIndex = clamp(0, typeof position.column === "number" ? position.column : grid.api.columnIndex(position.column), columnCount);
-        focusCell({
-            colIndex,
-            rowIndex: position.row,
-            focusActive: grid.internal.focusActive,
-            id: grid.state.gridId.get(),
-            getRootCell: grid.api.cellRoot,
-            scrollIntoView: grid.api.scrollIntoView,
-            vp,
-        });
-        return false;
-    };
-};