@1771technologies/lytenyte-pro 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/sort-manager/sort-value-select.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import { forwardRef } from "react";
 import { useSortRowCtx } from "./context";
-export const SortValueSelect = forwardRef(function SortValueSelect({ slot, ...props }, forwarded) {
+export const SortValueSelect = forwardRef(function SortValueSelect({ as, ...props }, forwarded) {
     const row = useSortRowCtx();
     const el = (_jsxs("select", { "aria-label": "Select sort value", value: row.sortSelected?.value ?? "", onChange: (e) => {
             const item = row.sortOptions.find((c) => c.value === e.target.value);
@@ -13,7 +13,7 @@ export const SortValueSelect = forwardRef(function SortValueSelect({ slot, ...pr
     const renderer = useSlot({
         props: [props],
         ref: forwarded,
-        slot: slot ?? el,
+        slot: as ?? el,
         state: {
             options: row.sortOptions,
             value: row.sortSelected,

package/dist/sort-manager/utils/sort-item-to-sort-model.d.ts

@@ -1,3 +1,3 @@
-import type { SortItem } from "../+types";
+import type { SortItem } from "../+types.js";
 import type { Column, SortModelItem } from "../../+types";
 export declare function sortItemsToSortModel(sortItems: SortItem[], lookup: Map<string, Column<any>>): SortModelItem<any>[];

package/dist/sort-manager/utils/sort-model-to-sort-items.d.ts

@@ -1,3 +1,3 @@
 import type { Column, SortModelItem } from "../../+types";
-import type { SortItem } from "../+types";
+import type { SortItem } from "../+types.js";
 export declare function sortModelToSortItems<T>(items: SortModelItem<T>[], lookup: Map<string, Column<T>>): SortItem[];

package/dist/state/+types.d.ts

@@ -1,5 +1,5 @@
 import type { LayoutMap } from "@1771technologies/lytenyte-shared";
-import type { DataRect, EditActivePosition, GridAtom, GridAtomReadonly, HeaderGroupCellLayout, PositionUnion, VirtualTarget } from "../+types";
+import type { Column, DataRect, EditActivePosition, GridAtom, GridAtomReadonly, HeaderGroupCellLayout, PositionUnion, VirtualTarget } from "../+types";
 import type { Atom, createStore } from "@1771technologies/atom";
 export interface InternalAtoms {
     readonly headerRows: GridAtomReadonly<number>;
@@ -20,6 +20,7 @@ export interface InternalAtoms {
     readonly rowSelectedIds: Atom<Set<string>>;
     readonly rowSelectionPivot: GridAtom<string | null>;
     readonly rowSelectionLastWasDeselect: GridAtom<boolean>;
+    readonly rowGroupColumnState: GridAtom<Record<string, Partial<Column<any>>>>;
     readonly draggingHeader: GridAtom<HeaderGroupCellLayout | null>;
     readonly dialogFrames: GridAtom<Record<string, any>>;
     readonly popoverFrames: GridAtom<Record<string, {

package/dist/state/api/column-autosize.d.ts

@@ -1,4 +1,4 @@
-import type { InternalAtoms } from "../+types";
+import type { InternalAtoms } from "../+types.js";
 import type { Grid, GridApi } from "../../+types";
 export declare const makeColumnAutosize: (grid: Grid<any> & {
     internal: InternalAtoms;

package/dist/state/api/column-autosize.js

@@ -1,12 +1,12 @@
 import { measureText } from "@1771technologies/lytenyte-shared";
-import { resolveColumn } from "../helpers/resolve-column";
+import { resolveColumn } from "../helpers/resolve-column.js";
 export const makeColumnAutosize = (grid) => {
     return (params) => {
         const errorRef = { current: false };
         const meta = grid.state.columnMeta.get();
         const columns = params.columns
             ?.map((c) => resolveColumn(c, errorRef, meta))
-            .map((c) => c && grid.api.columnById(c))
+            .map((c) => c && (typeof c === "string" ? grid.api.columnById(c) : c))
             .filter(Boolean) ?? grid.state.columnMeta.get().columnsVisible;
         if (errorRef.current) {
             console.error("Invalid column autosize column params");

package/dist/state/api/column-move.js

@@ -1,4 +1,4 @@
-import { resolveColumn } from "../helpers/resolve-column";
+import { resolveColumn } from "../helpers/resolve-column.js";
 export const makeColumnMove = (grid) => {
     return (params) => {
         const meta = grid.state.columnMeta.get();

package/dist/state/api/column-update.d.ts

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

package/dist/state/api/column-update.js

@@ -1,6 +1,19 @@
+import { GROUP_COLUMN_PREFIX } from "@1771technologies/lytenyte-shared";
 export const makeColumnUpdate = (grid) => {
     return (updates) => {
         const columns = [...grid.state.columns.get()];
+        const groupColumns = grid.state.columnMeta
+            .get()
+            .columnsVisible.filter((c) => c.id.startsWith(GROUP_COLUMN_PREFIX));
+        const groupState = { ...grid.internal.rowGroupColumnState.get() };
+        for (let i = 0; i < groupColumns.length; i++) {
+            const column = groupColumns[i];
+            if (updates[column.id]) {
+                const next = { ...groupState[column.id], ...updates[column.id] };
+                groupState[column.id] = next;
+            }
+        }
+        grid.internal.rowGroupColumnState.set(groupState);
         for (let i = 0; i < columns.length; i++) {
             const column = columns[i];
             if (updates[column.id]) {

package/dist/state/api/dialog-frame.d.ts

@@ -1,4 +1,4 @@
-import type { InternalAtoms } from "../+types";
+import type { InternalAtoms } from "../+types.js";
 import type { Grid, GridApi } from "../../+types";
 export declare const makeDialogFrameOpen: (grid: Grid<any> & {
     internal: InternalAtoms;

package/dist/state/api/edit-begin.d.ts

@@ -1,4 +1,4 @@
-import type { InternalAtoms } from "../+types";
+import type { InternalAtoms } from "../+types.js";
 import type { Grid, GridApi } from "../../+types";
 export declare const makeEditBegin: (grid: Grid<any> & {
     internal: InternalAtoms;

package/dist/state/api/edit-begin.js

@@ -1,6 +1,6 @@
 import { focusCell, isFullWidthMap } from "@1771technologies/lytenyte-shared";
 import { runWithBackoff } from "@1771technologies/lytenyte-js-utils";
-import { editOnChange } from "../helpers/edit-on-change";
+import { editOnChange } from "../helpers/edit-on-change.js";
 export const makeEditBegin = (grid) => {
     return (params) => {
         if (grid.state.editCellMode.get() === "readonly" || grid.state.columnPivotMode.get())

package/dist/state/api/edit-end.d.ts

@@ -1,4 +1,4 @@
-import type { InternalAtoms } from "../+types";
+import type { InternalAtoms } from "../+types.js";
 import type { Grid, GridApi } from "../../+types";
 export declare const makeEditEnd: (grid: Grid<any> & {
     internal: InternalAtoms;

package/dist/state/api/edit-is-cell-active.d.ts

@@ -1,4 +1,4 @@
-import type { InternalAtoms } from "../+types";
+import type { InternalAtoms } from "../+types.js";
 import type { Grid, GridApi } from "../../+types";
 export declare const makeEditIsCellActive: (grid: Grid<any> & {
     internal: InternalAtoms;

package/dist/state/api/edit-update.d.ts

@@ -1,4 +1,4 @@
-import type { InternalAtoms } from "../+types";
+import type { InternalAtoms } from "../+types.js";
 import type { Grid, GridApi } from "../../+types";
 export declare const makeEditUpdate: (grid: Grid<any> & {
     internal: InternalAtoms;

package/dist/state/api/edit-update.js

@@ -1,4 +1,4 @@
-import { editOnChange } from "../helpers/edit-on-change";
+import { editOnChange } from "../helpers/edit-on-change.js";
 export const makeEditUpdate = (grid) => {
     return (params) => {
         if (grid.state.editCellMode.get() === "readonly" || grid.state.columnPivotMode.get())

package/dist/state/api/export-csv.js

@@ -1,4 +1,4 @@
-import { getDataRect } from "../helpers/get-data-rect";
+import { getDataRect } from "../helpers/get-data-rect.js";
 export const makeExportCsv = (grid) => {
     return async (p) => {
         const visible = grid.state.columnMeta.get().columnsVisible;

package/dist/state/api/export-data-rect.js

@@ -1,4 +1,4 @@
-import { getDataRect } from "../helpers/get-data-rect";
+import { getDataRect } from "../helpers/get-data-rect.js";
 export const makeExportDataRect = (grid) => {
     return (p) => {
         const s = grid.state;

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

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

package/dist/state/api/popover-frame.d.ts

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

package/dist/state/api/row-detail-rendered-height.d.ts

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

package/dist/state/helpers/column-add-row-group.d.ts

@@ -4,6 +4,7 @@ interface ColumnHandleGroupColumnArgs<T> {
     readonly rowGroupTemplate: RowGroupColumn<T>;
     readonly rowGroupModel: RowGroupModelItem<T>[];
     readonly rowGroupDisplayMode: RowGroupDisplayMode;
+    readonly rowGroupColumnState: Record<string, Partial<Column<T>>>;
 }
-export declare function columnAddRowGroup<T>({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, }: ColumnHandleGroupColumnArgs<T>): Column<T>[];
+export declare function columnAddRowGroup<T>({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, rowGroupColumnState, }: ColumnHandleGroupColumnArgs<T>): Column<T>[];
 export {};

package/dist/state/helpers/column-add-row-group.js

@@ -10,7 +10,7 @@ const baseGroup = {
         return d.data.key;
     },
 };
-export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, }) {
+export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, rowGroupColumnState, }) {
     const lookup = itemsWithIdToMap(columns);
     rowGroupModel.forEach((c) => {
         if (typeof c === "string")
@@ -62,5 +62,13 @@ export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode,
     }
     if (!hasGroupColumn)
         columns = columns.filter((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX));
+    // TODO: this can be improved - what if the columns are really large?
+    const keys = Object.keys(rowGroupColumnState);
+    for (let i = 0; i < keys.length; i++) {
+        const column = columns.find((c) => c.id === keys[i]);
+        if (!column)
+            continue;
+        Object.assign(column, rowGroupColumnState[keys[i]]);
+    }
     return columns;
 }

package/dist/state/helpers/column-marker.js

@@ -13,7 +13,7 @@ export function columnHandleMarker({ columns, marker, markerEnabled, }) {
                 widthMin: 24,
                 cellRenderer: marker.cellRenderer,
                 headerRenderer: marker.headerRenderer ?? HeaderRenderer,
-                floatingRenderer: marker.floatingRenderer ?? FloatingRenderer,
+                floatingCellRenderer: marker.floatingCellRenderer ?? FloatingRenderer,
                 uiHints: marker.uiHints,
             },
             ...columns,

package/dist/state/helpers/empty-row-data-source.js

@@ -11,6 +11,7 @@ export const emptyRowDataSource = {
     rowAdd: () => { },
     rowDelete: () => { },
     rowSetBotData: () => { },
+    rowSetCenterData: () => { },
     rowSetTopData: () => { },
     rowAreAllSelected: () => false,
     inFilterItems: () => [],

package/dist/state/helpers/resolve-column.d.ts

@@ -1,4 +1,4 @@
 import type { Column, ColumnMeta } from "../../+types";
 export declare function resolveColumn(c: string | number | Column<any>, errorRef: {
     current: boolean;
-}, meta: ColumnMeta<any>): string | undefined;
+}, meta: ColumnMeta<any>): string | Column<any> | undefined;

package/dist/state/helpers/resolve-column.js

@@ -1,5 +1,9 @@
+import { GROUP_COLUMN_PREFIX } from "@1771technologies/lytenyte-shared";
 export function resolveColumn(c, errorRef, meta) {
     if (typeof c === "string") {
+        if (c.startsWith(GROUP_COLUMN_PREFIX)) {
+            return meta.columnsVisible.find((x) => x.id === c);
+        }
         if (!meta.columnLookup.has(c)) {
             errorRef.current = true;
             console.error(`Invalid column ${c}`);
@@ -14,6 +18,9 @@ export function resolveColumn(c, errorRef, meta) {
         }
         return col?.id;
     }
+    if (c.id.startsWith(GROUP_COLUMN_PREFIX)) {
+        return meta.columnsVisible.find((x) => x.id === c.id);
+    }
     if (!meta.columnLookup.has(c.id)) {
         errorRef.current = true;
         console.error(`Invalid column ${c.id}`);

package/dist/state/use-lytenyte.js

@@ -132,6 +132,7 @@ export function makeLyteNyte(p) {
     const columnPivotRowGroupExpansions = atom({});
     const cellSelections = atom(p.cellSelections ?? []);
     const cellSelectionMode = atom(p.cellSelectionMode ?? "none");
+    const internal__rowGroupColumnState = atom({});
     const internal_cellSelectionPivot = atom(null);
     const internal_cellSelectionAdditive = atom(null);
     const internal_cellSelectionSplits = atom((g) => {
@@ -220,6 +221,7 @@ export function makeLyteNyte(p) {
      * is impacted by the column definitions, the group expansions, the row group display mode.
      */
     const columnView = atom((g) => {
+        const groupState = g(internal__rowGroupColumnState);
         const pivotMode = g(columnPivotMode);
         let cols;
         if (pivotMode) {
@@ -229,6 +231,7 @@ export function makeLyteNyte(p) {
                 rowGroupDisplayMode: "single-column",
                 rowGroupModel: model.rows.filter((c) => c.active ?? true).map((c) => c.field),
                 rowGroupTemplate: g(rowGroupColumn),
+                rowGroupColumnState: groupState,
             });
         }
         else {
@@ -237,6 +240,7 @@ export function makeLyteNyte(p) {
                 rowGroupDisplayMode: g(rowGroupDisplayMode),
                 rowGroupModel: g(rowGroupModel),
                 rowGroupTemplate: g(rowGroupColumn),
+                rowGroupColumnState: groupState,
             });
         }
         const colsWithMarker = columnHandleMarker({
@@ -543,6 +547,7 @@ export function makeLyteNyte(p) {
             cellSelectionAdditiveRects: makeGridAtom(internal_cellSelectionAdditive, store),
             cellSelectionIsDeselect: makeGridAtom(atom(false), store),
             cellSelectionSplits: makeGridAtom(internal_cellSelectionSplits, store),
+            rowGroupColumnState: makeGridAtom(internal__rowGroupColumnState, store),
             store: store,
         },
     });

package/dist/tree-view/leaf.js

@@ -13,6 +13,7 @@ export const TreeLeaf = forwardRef(function TreeLeaf({ itemId, ...props }, forwa
                 e.ctrlKey ||
                 e.shiftKey)
                 return;
+            e.preventDefault();
             const nodes = getFocusables(e.currentTarget);
             const index = nodes.indexOf(document.activeElement);
             if (index === -1) {

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.0-beta.2",
+  "version": "1.0.0-beta.21",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -32,6 +32,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js",
+      "require": "./dist/icons/index.js"
+    },
     "./types": {
       "types": "./dist/+types.d.ts",
       "import": "./dist/+types.js",
@@ -44,11 +49,12 @@
   },
   "dependencies": {
     "@1771technologies/atom": "^1.0.2",
-    "@1771technologies/lytenyte-shared": "1.0.0-beta.2",
-    "@1771technologies/lytenyte-js-utils": "1.0.0-beta.2",
-    "@1771technologies/lytenyte-react-hooks": "1.0.0-beta.2",
-    "@1771technologies/lytenyte-dragon": "1.0.0-beta.2",
-    "@1771technologies/lytenyte-dom-utils": "1.0.0-beta.2"
+    "@1771technologies/lytenyte-dragon": "1.0.0-beta.21",
+    "@1771technologies/lytenyte-core": "1.0.0-beta.21",
+    "@1771technologies/lytenyte-dom-utils": "1.0.0-beta.21",
+    "@1771technologies/lytenyte-shared": "1.0.0-beta.21",
+    "@1771technologies/lytenyte-react-hooks": "1.0.0-beta.21",
+    "@1771technologies/lytenyte-js-utils": "1.0.0-beta.21"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",