@1771technologies/lytenyte-pro 1.0.17 → 1.0.19

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/row-data-source-server/server-data.js

@@ -323,10 +323,8 @@ export class ServerData {
         })
             .map(([index, c]) => [index, c.request]);
         const seenRequests = this.#seenRequests;
-        console.log(structuredClone(seenRequests));
         erroredRequests.map((x) => seenRequests.delete(x.id));
         erroredGroups.map((x) => seenRequests.delete(x[1].request.id));
-        console.log(structuredClone(seenRequests));
         this.#rowsWithError.clear();
         this.#rowsWithGroupError.clear();
         const requests = [];

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

@@ -159,6 +159,114 @@
   --lng1771-pill-icon-color: var(--lng1771-gray-60);
 }
 
+.light .lng1771-cotton-candy,
+.lng1771-cotton-candy {
+  --lng1771-primary-05: rgba(240, 48, 230, 0.03);
+  --lng1771-primary-10: rgba(240, 48, 230, 0.07);
+  --lng1771-primary-30: rgba(240, 48, 230, 0.25);
+  --lng1771-primary-50: rgba(240, 48, 230, 1);
+  --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-focus-outline: var(--color-primary);
+
+  --lng1771-gray-00: #cff8ff;
+  --lng1771-gray-02: #b0eaf2;
+  --lng1771-gray-05: #fde9ff;
+  --lng1771-gray-10: #e4d5f5;
+  --lng1771-gray-20: #c8cef3;
+  --lng1771-gray-30: #c1c7f4;
+  --lng1771-gray-40: color-mix(in srgb, #677af3 70%, black);
+  --lng1771-gray-50: color-mix(in srgb, #677af3 65%, black);
+  --lng1771-gray-60: #4237a9;
+  --lng1771-gray-70: color-mix(in srgb, #677af3 90%, white);
+  --lng1771-gray-80: #1c1484;
+  --lng1771-gray-90: #151234;
+  --lng1771-gray-100: rgb(0, 0, 0);
+
+  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
+  --lng1771-pill-column-fill: #c4c2ff;
+  --lng1771-pill-column-stroke: #754bff;
+  --lng1771-pill-pivot-fill: #ffc5e1;
+  --lng1771-pill-pivot-stroke: #f0959e;
+  --lng1771-pill-group-fill: #97ffaa;
+  --lng1771-pill-group-stroke: #4ce96e;
+  --lng1771-pill-icon-color: var(--lng1771-gray-50);
+}
+
+.light .lng1771-shadcn,
+.lng1771-shadcn-light {
+  --lng1771-primary-05: color-mix(in srgb, var(--color-accent) 5%, transparent);
+  --lng1771-primary-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  --lng1771-primary-30: color-mix(in srgb, var(--color-accent-foreground) 10%, transparent);
+  --lng1771-primary-50: var(--color-accent-foreground);
+  --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-focus-outline: var(--color-primary);
+
+  --lng1771-gray-00: var(--color-background);
+  --lng1771-gray-02: color-mix(in srgb, var(--color-background) 99%, black);
+  --lng1771-gray-05: color-mix(in srgb, var(--color-background) 98%, black);
+  --lng1771-gray-10: color-mix(in srgb, var(--color-background) 95%, black);
+  --lng1771-gray-20: color-mix(in srgb, var(--color-background) 90%, black);
+  --lng1771-gray-30: color-mix(in srgb, var(--color-background) 86%, black);
+  --lng1771-gray-40: color-mix(in srgb, var(--color-background) 70%, black);
+  --lng1771-gray-50: color-mix(in srgb, var(--color-background) 65%, black);
+  --lng1771-gray-60: color-mix(in srgb, var(--color-background) 40%, black);
+  --lng1771-gray-70: color-mix(in srgb, var(--color-background) 20%, black);
+  --lng1771-gray-80: var(--color-secondary-foreground);
+  --lng1771-gray-90: var(--color-primary);
+  --lng1771-gray-100: black;
+
+  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
+  --lng1771-pill-column-fill: var(--color-primary-foreground);
+  --lng1771-pill-column-stroke: var(--color-primary);
+  --lng1771-pill-pivot-fill: #f5f3ff;
+  --lng1771-pill-pivot-stroke: #ddd6ff;
+  --lng1771-pill-group-fill: #d9f2eb;
+  --lng1771-pill-group-stroke: #538a7f;
+  --lng1771-pill-icon-color: var(--lng1771-gray-50);
+}
+
+.dark .lng1771-shadcn,
+.lng1771-shadcn-dark {
+  --lng1771-primary-05: color-mix(in srgb, var(--color-accent) 5%, transparent);
+  --lng1771-primary-10: color-mix(in srgb, var(--color-accent) 10%, transparent);
+  --lng1771-primary-30: color-mix(in srgb, var(--color-accent-foreground) 10%, transparent);
+  --lng1771-primary-50: var(--color-accent-foreground);
+  --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-focus-outline: var(--color-primary);
+
+  --lng1771-gray-00: var(--color-background);
+  --lng1771-gray-02: color-mix(in srgb, var(--color-background) 99%, white);
+  --lng1771-gray-05: color-mix(in srgb, var(--color-background) 98%, white);
+  --lng1771-gray-10: color-mix(in srgb, var(--color-background) 95%, white);
+  --lng1771-gray-20: color-mix(in srgb, var(--color-background) 90%, white);
+  --lng1771-gray-30: color-mix(in srgb, var(--color-background) 86%, white);
+  --lng1771-gray-40: color-mix(in srgb, var(--color-background) 70%, white);
+  --lng1771-gray-50: color-mix(in srgb, var(--color-background) 65%, white);
+  --lng1771-gray-60: color-mix(in srgb, var(--color-background) 40%, white);
+  --lng1771-gray-70: color-mix(in srgb, var(--color-background) 20%, white);
+  --lng1771-gray-80: var(--color-secondary-foreground);
+  --lng1771-gray-90: var(--color-primary);
+  --lng1771-gray-100: white;
+
+  --lng1771-pill-plain-fill: var(--lng1771-gray-20);
+  --lng1771-pill-column-fill: var(--color-primary-foreground);
+  --lng1771-pill-column-stroke: var(--color-primary);
+  --lng1771-pill-pivot-fill: #2f0d68;
+  --lng1771-pill-pivot-stroke: #4d179a;
+  --lng1771-pill-group-fill: #162456;
+  --lng1771-pill-group-stroke: #1c398e;
+  --lng1771-pill-icon-color: var(--lng1771-gray-50);
+}
+
 .lng-grid {
   [data-ln-has-cell-selection="true"] [data-ln-cell="true"]:focus-visible {
     outline: none;
@@ -174,6 +282,8 @@
     font-family: var(--lng1771-typeface);
 
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
 
     background-color: var(--lng1771-gray-00);
 
@@ -278,7 +388,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.17",
+  "version": "1.0.19",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -48,8 +48,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/lytenyte-core": "1.0.17",
-    "@1771technologies/lytenyte-shared": "1.0.17"
+    "@1771technologies/lytenyte-shared": "1.0.19",
+    "@1771technologies/lytenyte-core": "1.0.19"
   },
   "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;
-    };
-};