@cronocode/react-box 3.0.13 → 3.0.14

package/array.d.ts

@@ -1,6 +1,19 @@
 export {};
 declare global {
+    type SortDirection = 'ASC' | 'DESC';
+    interface GroupItem<TKey, T> {
+        key: TKey;
+        values: T[];
+    }
     interface Array<T> {
+        take(count: number, skip?: number): Array<T>;
+        add(...items: T[]): Array<T>;
         removeBy(predicate: (value: T) => boolean): Array<T>;
+        sumBy(fn: (value: T, index: number) => number, initialValue?: number): number;
+        sortBy<TVal>(fn: (value: T) => TVal, direction?: 'ASC' | 'DESC'): Array<T>;
+        maxBy(fn: (value: T) => number): number;
+        findOrThrow(predicate: (value: T) => boolean): T;
+        toRecord<K extends string | number | symbol, V>(fn: (value: T) => [K, V]): Record<K, V>;
+        groupBy<TKey extends string | number | symbol>(keySelector: (item: T, index: number) => TKey): GroupItem<TKey, T>[];
     }
 }

package/components/checkbox.mjs

@@ -1,5 +1,5 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as a, useRef as i, useImperativeHandle as u, useEffect as m } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as c, useRef as i, useImperativeHandle as u, useEffect as m } from "react";
 import f from "../box.mjs";
 import { O as s } from "../core.mjs";
 const d = ["name", "onInput", "onChange", "autoFocus", "readOnly", "value", "defaultChecked"];
@@ -7,9 +7,9 @@ function l(t, r) {
   const o = s.buildProps(t, d, { type: "checkbox" }), n = Array.isArray(t.indeterminate) ? t.indeterminate[0] : t.indeterminate, e = i(null);
   return u(r, () => e.current), m(() => {
     e.current && (e.current.indeterminate = !!n);
-  }, [e, n]), /* @__PURE__ */ c(f, { tag: "input", ref: e, component: "checkbox", ...o });
+  }, [e, n]), /* @__PURE__ */ a(f, { tag: "input", ref: e, component: "checkbox", ...o });
 }
-const k = a(l);
+const k = c(l);
 export {
   k as default
 };

package/components/dataGrid/contracts/dataGridContract.d.ts

@@ -0,0 +1,36 @@
+export type Key = string | number;
+export type PinPosition = 'LEFT' | 'RIGHT';
+export declare const NO_PIN = "NO_PIN";
+export type SortColumnType<TRow> = {
+    key: keyof TRow;
+    dir: SortDirection;
+};
+export type KeysMatching<T, V> = {
+    [K in keyof T]-?: T[K] extends V ? K : never;
+}[keyof T];
+export interface PaginationState {
+    pageSize: number;
+    page: number;
+    totalItems: number;
+    totalPages: number;
+}
+export type Pagination = boolean | {
+    pageSize: number;
+};
+export interface ColumnType<TRow> {
+    key: Key;
+    header?: string;
+    pin?: PinPosition;
+    width?: number;
+    columns?: ColumnType<TRow>[];
+    align?: 'right' | 'center';
+}
+export interface GridDefinition<TRow> {
+    rowKey?: KeysMatching<TRow, Key> | ((rowData: TRow) => Key);
+    columns: ColumnType<TRow>[];
+    pagination?: Pagination;
+}
+export interface DataGridProps<TRow> {
+    data: TRow[];
+    def: GridDefinition<TRow>;
+}

package/components/dataGrid/dataGridCell.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '../../box';
+import { default as ColumnModel } from './models/columnModel';
+interface Props<TRow> extends BoxProps {
+    children?: React.ReactNode;
+    column: ColumnModel<TRow>;
+}
+export default function DataGridCell<TRow>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dataGrid/dataGridGroupRow.d.ts

@@ -0,0 +1,6 @@
+import { default as GroupRowModel } from './models/groupRowModel';
+interface Props<TRow> {
+    row: GroupRowModel<TRow>;
+}
+export default function DataGridGroupRow<TRow>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dataGrid/dataGridHeaderCell.d.ts

@@ -0,0 +1,6 @@
+import { default as ColumnModel } from './models/columnModel';
+interface Props<TRow> {
+    column: ColumnModel<TRow>;
+}
+export default function DataGridHeaderCell<TRow>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dataGrid/dataGridPagination.d.ts

@@ -0,0 +1,6 @@
+import { default as GridModel } from './models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+export default function DataGridPagination<TRow>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dataGrid/dataGridRow.d.ts

@@ -0,0 +1,6 @@
+import { default as RowModel } from './models/rowModel';
+interface Props<TRow> {
+    row: RowModel<TRow>;
+}
+export default function DataGridRow<TRow>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/dataGrid/models/cellModel.d.ts

@@ -0,0 +1,10 @@
+import { default as ColumnModel } from './columnModel';
+import { default as GridModel } from './gridModel';
+import { default as RowModel } from './rowModel';
+export default class CellModel<TRow> {
+    readonly grid: GridModel<TRow>;
+    readonly row: RowModel<TRow>;
+    readonly column: ColumnModel<TRow>;
+    constructor(grid: GridModel<TRow>, row: RowModel<TRow>, column: ColumnModel<TRow>);
+    get value(): React.ReactNode;
+}

package/components/dataGrid/models/columnModel.d.ts

@@ -0,0 +1,36 @@
+import { ColumnType, PinPosition } from '../contracts/dataGridContract';
+import { default as GridModel } from './gridModel';
+export default class ColumnModel<TRow> {
+    private readonly def;
+    readonly grid: GridModel<TRow>;
+    private parent?;
+    constructor(def: ColumnType<TRow>, grid: GridModel<TRow>, parent?: ColumnModel<TRow> | undefined);
+    columns: ColumnModel<TRow>[];
+    get key(): import('../contracts/dataGridContract').Key;
+    get header(): string | undefined;
+    get align(): "center" | "right" | undefined;
+    get isLeaf(): boolean;
+    private _pin?;
+    get pin(): Maybe<PinPosition>;
+    get uniqueKey(): string;
+    getPinnedColumn(pin?: PinPosition): Maybe<ColumnModel<TRow>>;
+    private hasPin;
+    get death(): number;
+    get flatColumns(): ColumnModel<TRow>[];
+    private _inlineWidth?;
+    get inlineWidth(): Maybe<number>;
+    get left(): number;
+    get right(): number;
+    get isEdge(): boolean;
+    get leafs(): ColumnModel<TRow>[];
+    get groupColumnWidthVarName(): string;
+    get widthVarName(): string;
+    get leftVarName(): string;
+    get rightVarName(): string;
+    get gridRows(): number;
+    resizeColumn: (e: unknown) => void;
+    pinColumn: (pin?: PinPosition) => void;
+    toggleGrouping: () => void;
+    sortColumn: (sortDirection?: SortDirection) => void;
+    setWidth: (width: number) => void;
+}

package/components/dataGrid/models/gridModel.d.ts

@@ -0,0 +1,44 @@
+import { DataGridProps, Key, PinPosition } from '../contracts/dataGridContract';
+import { default as ColumnModel } from './columnModel';
+import { default as GroupRowModel } from './groupRowModel';
+import { default as RowModel } from './rowModel';
+export declare const EMPTY_CELL_KEY = "empty-cell";
+export declare const ROW_NUMBER_CELL_KEY = "row-number-cell";
+export declare const ROW_SELECTION_CELL_KEY = "row-selection-cell";
+export declare const GROUPING_CELL_KEY = "grouping-cell";
+export default class GridModel<TRow> {
+    readonly props: DataGridProps<TRow>;
+    readonly update: () => void;
+    constructor(props: DataGridProps<TRow>, update: () => void);
+    private _sourceColumns;
+    readonly columns: import('../../../utils/memo').Memo<{
+        left: ColumnModel<TRow>[];
+        middle: ColumnModel<TRow>[];
+        right: ColumnModel<TRow>[];
+        flat: ColumnModel<TRow>[];
+        leafs: ColumnModel<TRow>[];
+    }>;
+    readonly headerRows: import('../../../utils/memo').Memo<ColumnModel<TRow>[][]>;
+    readonly gridTemplateColumns: import('../../../utils/memo').Memo<string>;
+    readonly rows: import('../../../utils/memo').Memo<GroupRowModel<TRow>[] | RowModel<TRow>[]>;
+    readonly flatRows: import('../../../utils/memo').Memo<(GroupRowModel<TRow> | RowModel<TRow>)[]>;
+    readonly sizes: import('../../../utils/memo').Memo<Record<string, string>>;
+    readonly ROW_HEIGHT = 12;
+    readonly MIN_COLUMN_WIDTH_PX = 48;
+    readonly DEFAULT_COLUMN_WIDTH_PX = 200;
+    isResizeMode: boolean;
+    expandedGroupRow: Record<Key, boolean>;
+    get leftEdge(): number;
+    get rightEdge(): number;
+    readonly leftEdgeVarName = "--left-edge";
+    setSortColumn: (columnKey: Key, sortDirection?: SortDirection) => void;
+    pinColumn: (uniqueKey: string, pin?: PinPosition) => void;
+    toggleGrouping: (columnKey: Key) => void;
+    toggleGroupRow: (groupRowKey: Key) => void;
+    setWidth: (columnKey: Key, width: number) => void;
+    groupColumns: Key[];
+    private _sortColumn?;
+    get sortColumn(): Key | undefined;
+    private _sortDirection;
+    get sortDirection(): SortDirection;
+}

package/components/dataGrid/models/groupRowCellModel.d.ts

@@ -0,0 +1,10 @@
+import { default as ColumnModel } from './columnModel';
+import { default as GridModel } from './gridModel';
+import { default as GroupRowModel } from './groupRowModel';
+export default class GroupRowCellModel<TRow> {
+    readonly grid: GridModel<TRow>;
+    readonly row: GroupRowModel<TRow>;
+    readonly column: ColumnModel<TRow>;
+    constructor(grid: GridModel<TRow>, row: GroupRowModel<TRow>, column: ColumnModel<TRow>);
+    get value(): React.ReactNode;
+}

package/components/dataGrid/models/groupRowModel.d.ts

@@ -0,0 +1,23 @@
+import { Key } from '../contracts/dataGridContract';
+import { default as ColumnModel } from './columnModel';
+import { default as GridModel } from './gridModel';
+import { default as GroupRowCellModel } from './groupRowCellModel';
+import { default as RowModel } from './rowModel';
+export default class GroupRowModel<TRow> {
+    readonly grid: GridModel<TRow>;
+    readonly groupColumn: ColumnModel<TRow>;
+    readonly rows: RowModel<TRow>[] | GroupRowModel<TRow>[];
+    readonly rowIndex: number;
+    readonly groupValue: Key;
+    constructor(grid: GridModel<TRow>, groupColumn: ColumnModel<TRow>, rows: RowModel<TRow>[] | GroupRowModel<TRow>[], rowIndex: number, groupValue: Key);
+    get rowKey(): Key;
+    parentRow?: GroupRowModel<TRow>;
+    get cells(): GroupRowCellModel<TRow>[];
+    get expanded(): boolean;
+    get depth(): number;
+    get count(): number;
+    get flatRows(): (RowModel<TRow> | GroupRowModel<TRow>)[];
+    get groupingColumn(): ColumnModel<TRow>;
+    get groupingColumnGridColumn(): number;
+    toggleRow(): void;
+}

package/components/dataGrid/models/rowModel.d.ts

@@ -0,0 +1,16 @@
+import { Key } from '../contracts/dataGridContract';
+import { default as CellModel } from './cellModel';
+import { default as GridModel } from './gridModel';
+import { default as GroupRowModel } from './groupRowModel';
+export default class RowModel<TRow> {
+    readonly grid: GridModel<TRow>;
+    readonly row: TRow;
+    readonly rowIndex: number;
+    constructor(grid: GridModel<TRow>, row: TRow, rowIndex: number);
+    get rowKey(): Key;
+    parentRow?: GroupRowModel<TRow>;
+    get cells(): CellModel<TRow>[];
+    get count(): number;
+    get flatRows(): RowModel<TRow>[];
+    private getRowKey;
+}

package/components/dataGrid/useGrid.d.ts

@@ -0,0 +1,3 @@
+import { DataGridProps } from './contracts/dataGridContract';
+import { default as GridModel } from './models/gridModel';
+export default function useGrid<TRow>(props: DataGridProps<TRow>): GridModel<TRow>;

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime");require("react");const o=require("../box.cjs"),c=require("./grid.cjs");function g(u){const{data:e,def:d}=u,{rowKey:r,columns:i}=d;return i.length===0?(console.error("Cannot render grid without column definitions"),null):n.jsx(o,{component:"datagrid",children:n.jsxs(c,{b:1,borderRadius:1,children:[i.map((t,s)=>n.jsx(o,{style:{gridColumn:s+1},children:t.key.toString()},s)),((e==null?void 0:e.length)??0)===0&&n.jsx(o,{children:"Empty table"}),((e==null?void 0:e.length)??0)>0&&n.jsx(n.Fragment,{children:e==null?void 0:e.map((t,s)=>{const m=r?typeof r=="function"?r(t):t[r]:s;return n.jsx(c,{style:{gridTemplateRows:"subgrid"},children:i.map((h,l)=>n.jsxs(o,{style:{gridColumn:l+1},children:["tes ",l]},l))},m)})})]})})}module.exports=g;
+"use strict";var Z=Object.defineProperty;var ee=(u,e,t)=>e in u?Z(u,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):u[e]=t;var l=(u,e,t)=>ee(u,typeof e!="symbol"?e+"":e,t);const n=require("react/jsx-runtime"),g=require("../box.cjs"),V=require("./grid.cjs"),m=require("react"),p=require("../core.cjs"),k=require("./button.cjs"),T=require("./flex.cjs"),te=require("./tooltip.cjs"),$=require("./checkbox.cjs"),se="NO_PIN";class L{constructor(e,t,s){l(this,"columns",[]);l(this,"_pin");l(this,"_inlineWidth");l(this,"resizeColumn",e=>{this.grid.isResizeMode=!0;const t=e.pageX,{MIN_COLUMN_WIDTH_PX:s,update:i}=this.grid,o=this.leafs.sumBy(h=>h.inlineWidth)-this.leafs.length*s,r=this.leafs.toRecord(h=>[h.key,h.inlineWidth]),d=p.FnUtils.throttle(h=>{const f=(h.pageX-t)*(this.pin==="RIGHT"?-1:1);this.leafs.forEach(w=>{const v=r[w.key],x=o>0?(v-s)/o*f:f/this.leafs.length,R=Math.round(v+x);w.setWidth(R<s?s:R)}),this.grid.headerRows.clear(),this.grid.sizes.clear(),i()},20),a=new AbortController,c=h=>{a.abort(),this.grid.isResizeMode=!1,i()};window.addEventListener("mousemove",d,a),window.addEventListener("mouseup",c,a)});l(this,"pinColumn",e=>{this.isLeaf?this._pin=e:this.columns.forEach(t=>t.pinColumn(e)),this.grid.pinColumn(this.uniqueKey,e)});l(this,"toggleGrouping",()=>{this.grid.toggleGrouping(this.key)});l(this,"sortColumn",(...e)=>{this.grid.setSortColumn(this.key,...e)});l(this,"setWidth",e=>{if(!this.isLeaf)throw new Error("Cannot set width for a parent column.");this._inlineWidth!==e&&(this._inlineWidth=e,this.grid.setWidth(this.key,e))});var i;this.def=e,this.grid=t,this.parent=s,this.columns=((i=e.columns)==null?void 0:i.map(o=>new L(e.pin?{...o,pin:e.pin}:o,t,this)))??[],this.isLeaf&&(this._inlineWidth=this.key==E?void 0:this.def.width??this.grid.DEFAULT_COLUMN_WIDTH_PX,this._pin=e.pin)}get key(){return this.def.key}get header(){return this.def.header}get align(){return this.def.align}get isLeaf(){return this.columns.length===0}get pin(){if(this.isLeaf)return this._pin;const e=[...new Set(this.columns.flatMap(t=>t.pin))];if(e.length===1)return e[0]}get uniqueKey(){return`${this.key}${this.pin??""}`}getPinnedColumn(e){if(this.hasPin(e)){if(this.isLeaf)return this;const t=new L({...this.def,pin:e},this.grid,this.parent);return t.columns=this.columns.filter(s=>s.hasPin(e)).map(s=>{const i=s.getPinnedColumn(e);return i.parent=t,i}).filter(s=>!!s),t}}hasPin(e){return this.isLeaf?this._pin===e:this.columns.some(t=>t.hasPin(e))}get death(){return this.parent?this.parent.death+1:0}get flatColumns(){const e=[this];return e.push(...this.columns.flatMap(t=>t.flatColumns)),e}get inlineWidth(){if(this.isLeaf)return this._inlineWidth;const e=this.columns.map(t=>t.inlineWidth).filter(t=>typeof t=="number");if(e.length!==0)return e.sumBy(t=>t)}get left(){let e=0;if(this.parent){const t=this.parent.columns.findIndex(s=>s===this);e+=this.parent.columns.sumBy((s,i)=>i<t?s.inlineWidth??0:0),e+=this.parent.left}else{const t=this.grid.columns.value.left.findIndex(s=>s===this);e+=this.grid.columns.value.left.sumBy((s,i)=>i<t?s.inlineWidth??0:0)}return e}get right(){let e=0;if(this.parent){const t=[...this.parent.columns].reverse(),s=t.findIndex(i=>i===this);e+=t.sumBy((i,o)=>o<s?i.inlineWidth??0:0),e+=this.parent.right}else{const t=[...this.grid.columns.value.right].reverse(),s=t.findIndex(i=>i===this);e+=t.sumBy((i,o)=>o<s?i.inlineWidth??0:0)}return e}get isEdge(){return this.pin?this.parent?(this.pin==="LEFT"?this.parent.columns.at(-1):this.parent.columns.at(0))===this&&this.parent.isEdge:(this.pin==="LEFT"?this.grid.columns.value.left.at(-1):this.grid.columns.value.right.at(0))===this:!1}get leafs(){return this.isLeaf?[this]:this.columns.flatMap(e=>e.leafs)}get groupColumnWidthVarName(){return`--${this.uniqueKey}-group-width`}get widthVarName(){return`--${this.uniqueKey}-width`}get leftVarName(){return`--${this.uniqueKey}-left`}get rightVarName(){return`--${this.uniqueKey}-right`}get gridRows(){return this.isLeaf?this.grid.headerRows.value.length-this.death:1}}class ie{constructor(e,t,s){this.grid=e,this.row=t,this.column=s}get value(){return this.column.key===j?this.row.rowIndex+1:this.column.key===y?`> ${this.row.groupValue} (${this.row.count})`:null}}class z{constructor(e,t,s,i,o){l(this,"parentRow");this.grid=e,this.groupColumn=t,this.rows=s,this.rowIndex=i,this.groupValue=o,s.forEach(r=>r.parentRow=this)}get rowKey(){var e;return`${((e=this.parentRow)==null?void 0:e.rowKey)??""}${this.groupColumn.key}${this.groupValue}`}get cells(){return this.grid.columns.value.leafs.map(e=>new ie(this.grid,this,e))}get expanded(){return this.grid.expandedGroupRow[this.rowKey]}get depth(){return this.parentRow?this.parentRow.depth+1:0}get count(){return this.rows.sumBy(e=>e.count,0)}get flatRows(){return this.expanded?[this,...this.rows.flatMap(e=>e.flatRows)]:[this]}get groupingColumn(){return this.grid.columns.value.leafs.findOrThrow(e=>e.key===y)}get groupingColumnGridColumn(){const{leafs:e}=this.grid.columns.value,{groupingColumn:t}=this;return e.sumBy(i=>i.pin===t.pin&&i.key!==E&&i.key!==b&&i.key!==j?1:0)}toggleRow(){this.grid.toggleGroupRow(this.rowKey)}}class ne{constructor(e,t,s){this.grid=e,this.row=t,this.column=s}get value(){return this.column.key===E?null:this.column.key===j?this.row.rowIndex+1:this.row.row[this.column.key]}}class A{constructor(e,t,s){l(this,"parentRow");this.grid=e,this.row=t,this.rowIndex=s,this.grid=e,this.row=t}get rowKey(){return this.getRowKey()}get cells(){return this.grid.columns.value.leafs.map(e=>new ne(this.grid,this,e))}get count(){return 1}get flatRows(){return[this]}getRowKey(){var s;const{rowKey:e}=this.grid.props.def,t=e?typeof e=="function"?e(this.row):this.row[e]:this.rowIndex;return`${((s=this.parentRow)==null?void 0:s.rowKey)??""}${t}`}}const E="empty-cell",j="row-number-cell",b="row-selection-cell",y="grouping-cell";class oe{constructor(e,t){l(this,"_sourceColumns",[]);l(this,"columns",p.memo(()=>{const e=this._sourceColumns.map(r=>r.getPinnedColumn("LEFT")).filter(r=>!!r),t=this._sourceColumns.map(r=>r.getPinnedColumn()).filter(r=>!!r),s=this._sourceColumns.map(r=>r.getPinnedColumn("RIGHT")).filter(r=>!!r),i=[...e,...t,...s].flatMap(r=>r.flatColumns),o=i.filter(r=>r.isLeaf);return{left:e,middle:t,right:s,flat:i,leafs:o}}));l(this,"headerRows",p.memo(()=>this.columns.value.flat.groupBy(t=>t.death).sortBy(t=>t.key).map(t=>{const s=t.values.groupBy(i=>i.pin??se).toRecord(i=>[i.key,i.values]);return[...s.LEFT??[],...s.NO_PIN??[],...s.RIGHT??[]]})));l(this,"gridTemplateColumns",p.memo(()=>{const e=this.columns.value.leafs.sumBy(o=>o.pin==="RIGHT"?1:0),t=this.columns.value.leafs.length-e-1,s=t>0?`repeat(${t}, max-content)`:"",i=e>0?`repeat(${e}, max-content)`:"";return`${s} auto ${i}`}));l(this,"rows",p.memo(()=>{let e=this.props.data;if(this._sortColumn&&(e=e.sortBy(t=>t[this._sortColumn],this._sortDirection)),this.groupColumns.length>0){const t=(s,i,o)=>{const r=i[0];i=i.removeBy(a=>a===r);const d=this.columns.value.leafs.findOrThrow(a=>a.key===r);return this._sortColumn===y&&(s=s.sortBy(a=>a[r],this._sortDirection)),s.groupBy(a=>a[r]).map(a=>{let c;i.length>0?c=t(a.values,i,o+1):c=a.values.map((f,w)=>new A(this,f,o+1+w));const h=new z(this,d,c,o,a.key);return o+=1,h.expanded&&(o+=c.length),h})};return t(e,this.groupColumns,0)}return e.map((t,s)=>new A(this,t,s))}));l(this,"flatRows",p.memo(()=>this.rows.value.flatMap(e=>e.flatRows)));l(this,"sizes",p.memo(()=>{console.log("sizes");const e=this.columns.value.flat.reduce((s,i)=>{const{inlineWidth:o}=i;return typeof o=="number"&&(s[i.widthVarName]=`${i.inlineWidth}px`),i.pin==="LEFT"&&(s[i.leftVarName]=`${i.left}px`),i.pin==="RIGHT"&&(s[i.rightVarName]=`${i.right}px`),s},{});e[this.leftEdgeVarName]=`${this.leftEdge}px`;const t=this.columns.value.leafs.find(s=>s.key===y);return t&&(e[t.groupColumnWidthVarName]=`${this.columns.value.leafs.sumBy(s=>s.pin===t.pin&&s.key!==j&&s.key!==b?s.inlineWidth??0:0)}px`),this.groupColumns.forEach(s=>{const i=this.columns.value.leafs.findOrThrow(o=>o.key===s);e[i.groupColumnWidthVarName]=`${this.columns.value.leafs.sumBy(o=>o.pin===i.pin?o.inlineWidth??0:0)}px`}),e}));l(this,"ROW_HEIGHT",12);l(this,"MIN_COLUMN_WIDTH_PX",48);l(this,"DEFAULT_COLUMN_WIDTH_PX",200);l(this,"isResizeMode",!1);l(this,"expandedGroupRow",{});l(this,"leftEdgeVarName","--left-edge");l(this,"setSortColumn",(e,...t)=>{if(t.length>0)[this._sortDirection]=t,this._sortColumn=this._sortDirection?e:void 0;else{const{_sortColumn:s,_sortDirection:i}=this;this._sortColumn=s===e&&i==="DESC"?void 0:e,this._sortDirection=s===e&&i==="ASC"?"DESC":"ASC"}this.headerRows.clear(),this.rows.clear(),this.flatRows.clear(),this.update()});l(this,"pinColumn",(e,t)=>{const s=this.columns.value.flat.findOrThrow(i=>i.uniqueKey===e);s.pin!==t&&s.pinColumn(t),this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()});l(this,"toggleGrouping",e=>{this.groupColumns.includes(e)?this.groupColumns=this.groupColumns.removeBy(s=>s===e):this.groupColumns=this.groupColumns.add(e);const t=this._sourceColumns.find(s=>s.key===y);if(this.groupColumns.length>0&&!t){const s=this._sourceColumns.sumBy(i=>i.key===j||i.key===b?1:0);this._sourceColumns.splice(s,0,new L({key:y},this))}else this.groupColumns.length===0&&t&&(this._sourceColumns=this._sourceColumns.removeBy(s=>s.key===y));this.columns.clear(),this.headerRows.clear(),this.gridTemplateColumns.clear(),this.rows.clear(),this.flatRows.clear(),this.sizes.clear(),this.update()});l(this,"toggleGroupRow",e=>{e in this.expandedGroupRow?delete this.expandedGroupRow[e]:this.expandedGroupRow[e]=!0,this.rows.clear(),this.flatRows.clear(),this.update()});l(this,"setWidth",(e,t)=>{const s=this.columns.value.leafs.find(o=>o.key===e);if(!s)throw new Error("Leaf column not found.");s.setWidth(t),this._sourceColumns.flatMap(o=>o.flatColumns).findOrThrow(o=>o.key===e).setWidth(t)});l(this,"groupColumns",[]);l(this,"_sortColumn");l(this,"_sortDirection","ASC");this.props=e,this.update=t,this._sourceColumns=e.def.columns.map(s=>new L(s,this)),this._sourceColumns.push(new L({key:E},this)),this._sourceColumns.unshift(new L({key:b,width:50,align:"center"},this)),this._sourceColumns.unshift(new L({key:j,pin:"LEFT",width:70,align:"right"},this))}get leftEdge(){return this.columns.value.left.sumBy(e=>e.inlineWidth??0)}get rightEdge(){return this.columns.value.right.sumBy(e=>e.inlineWidth??0)}get sortColumn(){return this._sortColumn}get sortDirection(){return this._sortDirection}}function re(u){const e=m.useMemo(()=>new oe(u,()=>s(o=>o+1)),[u]),[t,s]=m.useState(0);return m.useMemo(()=>Object.create(Object.getPrototypeOf(e),Object.getOwnPropertyDescriptors(e)),[e,t])}function le(u){const{column:e}=u,{key:t,pin:s,left:i,right:o,isEdge:r,isLeaf:d,leafs:a,grid:c,header:h,gridRows:f,widthVarName:w,leftVarName:v,rightVarName:x,inlineWidth:R}=e,_=t===E,I=t===y,C=t===j,P=t===b,W=s==="LEFT",G=s==="RIGHT",D=W||s==="RIGHT",M=W&&i===0,S=W&&r,U=G&&r,K=G&&o===0,O=d&&!_&&!C&&!P,X=d?1:a.length,Y=!C&&!P,B=!C&&!P,J=m.useMemo(()=>{if(C)return null;if(P)return n.jsx($,{m:1});if(I){if(c.groupColumns.length===1){const H=c.columns.value.leafs.findOrThrow(Q=>Q.key===c.groupColumns[0]);return H.header??H.key}return"Group"}return h??t},[c.groupColumns]);return n.jsx(T,{component:"datagrid.header.cell",variant:{isRowNumber:C,isPinned:D,isFirstLeftPinned:M,isLastLeftPinned:S,isFirstRightPinned:U,isLastRightPinned:K,isSortable:O},gridRow:f,gridColumn:X,style:{width:`var(${w})`,left:W?`var(${v})`:void 0,right:G?`var(${x})`:void 0},children:!_&&n.jsxs(n.Fragment,{children:[n.jsx(T,{width:"fit",height:"fit",jc:e.align,props:{onClick:O?()=>e.sortColumn():void 0},children:n.jsxs(T,{overflow:"hidden",position:d?void 0:"sticky",ai:"center",transition:"none",pl:e.align?void 0:4,style:{left:s?void 0:`var(${c.leftEdgeVarName})`},children:[n.jsx(g,{overflow:"hidden",textOverflow:"ellipsis",textWrap:"nowrap",children:J}),t===c.sortColumn&&n.jsx(g,{pl:(R??0)<58?0:2,children:n.jsx(p.ArrowIcon,{width:"16px",rotate:c.sortDirection==="ASC"?0:180,fill:"violet-950"})}),B&&n.jsx(g,{minWidth:12})]})}),Y&&n.jsx(ue,{column:e}),B&&n.jsx(ae,{column:e})]})})}function ue(u){const{column:e}=u;return n.jsx(T,{height:"fit",ai:"center",position:"absolute",right:e.pin==="RIGHT"?void 0:0,left:e.pin!=="RIGHT"?void 0:0,py:3,children:n.jsx(g,{cursor:"col-resize",px:.75,className:"resizer",height:"fit",props:{onMouseDown:e.resizeColumn,onTouchStart:e.resizeColumn},children:n.jsx(g,{width:.5,height:"fit",bgColor:"gray-400",hoverGroup:{resizer:{bgColor:"gray-600"}}})})})}function ae(u){const{column:e}=u,[t,s,i]=p.useVisibility({hideOnScroll:!0,event:"mousedown"}),[o,r]=m.useState({top:0,left:0}),d=m.useMemo(()=>o.left>window.innerWidth/2,[o.left]),a=e.isLeaf&&(e.grid.sortColumn!==e.key||e.grid.sortDirection==="DESC"),c=e.isLeaf&&(e.grid.sortColumn!==e.key||e.grid.sortDirection==="ASC"),h=e.isLeaf&&e.grid.sortColumn===e.key,f=e.pin!=="LEFT",w=e.pin!=="RIGHT",v=!!e.pin,x=e.isLeaf&&e.key!==y,R=a||c||h,_=f||w||v;return n.jsx(T,{position:"absolute",right:e.pin==="RIGHT"?2.5:4,top:"1/2",translateY:-3,ai:"center",children:n.jsxs(k,{clean:!0,onClick:()=>s(!t),width:6,height:6,cursor:"pointer",userSelect:"none",borderRadius:1,borderColor:"gray-200",display:"flex",jc:"center",ai:"center",transition:"none",bgColor:"gray-200",hover:{bgColor:"gray-300"},children:[n.jsx(p.DotsIcon,{fill:"violet-950"}),t&&n.jsxs(te,{bgColor:"white",width:56,b:1,borderColor:"gray-300",borderRadius:1,display:"flex",d:"column",mt:4,py:2,overflow:"hidden",translateX:d?-55:-5,onPositionChange:r,ref:i,shadow:"medium-shadow",children:[a&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:()=>e.sortColumn("ASC"),children:[n.jsx(p.ArrowIcon,{width:"1rem",fill:"violet-950"}),"Sort Ascending"]}),c&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:()=>e.sortColumn("DESC"),children:[n.jsx(p.ArrowIcon,{width:"1rem",fill:"violet-950",rotate:180}),"Sort Descending"]}),h&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:()=>e.sortColumn(void 0),children:[n.jsx(g,{width:4}),"Clear Sort"]}),R&&(_||x)&&n.jsx(g,{bb:1,my:2,borderColor:"gray-300"}),f&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:()=>e.pinColumn("LEFT"),children:[n.jsx(p.PinIcon,{width:"1rem",fill:"violet-950"}),"Pin Left"]}),w&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:()=>e.pinColumn("RIGHT"),children:[n.jsx(p.PinIcon,{width:"1rem",fill:"violet-950",rotate:-90}),"Pin Right"]}),v&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:()=>e.pinColumn(),children:[n.jsx(g,{width:4}),"Unpin"]}),R&&_&&x&&n.jsx(g,{bb:1,my:2,borderColor:"gray-300"}),x&&n.jsxs(k,{clean:!0,display:"flex",gap:2,p:3,cursor:"pointer",hover:{bgColor:"gray-200"},onClick:e.toggleGrouping,children:[n.jsx(g,{children:n.jsx(p.GroupingIcon,{width:"1rem",fill:"violet-950"})}),n.jsxs(g,{textWrap:"nowrap",children:[" Group by ",e.header??e.key]})]})]})]})})}function N(u){const{children:e,column:t,style:s,...i}=u,{key:o,pin:r,left:d,right:a,isEdge:c,align:h,widthVarName:f,leftVarName:w,rightVarName:v}=t,x=o===E,R=o===j,_=o===b,I=r==="LEFT",C=r==="RIGHT",P=I||C,W=I&&d===0,G=I&&c,D=C&&c,M=C&&a===0,S=!_&&!x;return n.jsxs(T,{component:"datagrid.cell",props:{role:"cell"},variant:{isRowNumber:R,isRowSelection:_,isPinned:P,isFirstLeftPinned:W,isLastLeftPinned:G,isFirstRightPinned:D,isLastRightPinned:M},jc:h,style:{width:`var(${f})`,left:I?`var(${w})`:void 0,right:C?`var(${v})`:void 0,...s},...i,children:[S&&n.jsx(g,{px:4,textOverflow:"ellipsis",overflow:"hidden",textWrap:"nowrap",children:e}),_&&e]})}function he(u){const{row:e}=u;return n.jsx(T,{className:"grid-row",display:"contents",props:{role:"rowgroup"},children:e.cells.map(t=>{if(t.column.key===y)return n.jsx(N,{column:t.column,style:{width:`var(${t.column.groupColumnWidthVarName})`},br:e.groupingColumn.pin==="LEFT"?1:void 0,gridColumn:e.groupingColumnGridColumn,pl:4*e.depth,children:n.jsx(k,{display:"contents",clean:!0,onClick:()=>e.toggleRow(),cursor:"pointer",children:t.value})},t.column.key);if(t.column.key===b)return n.jsx(N,{column:t.column,children:n.jsx($,{m:1})},t.column.key);if(t.column.pin!==e.groupingColumn.pin||t.column.key===E||t.column.key===j)return n.jsx(N,{column:t.column,children:t.value},t.column.key)})})}function ce(u){const{row:e}=u;return n.jsx(T,{className:"grid-row",display:"contents",props:{role:"row"},children:e.cells.map(t=>n.jsx(N,{column:t.column,children:t.column.key===b?n.jsx($,{}):t.value},t.column.key))})}function de(u){const e=re(u),{isResizeMode:t}=e,s=m.useMemo(()=>(console.log("render - headers"),e.headerRows.value.map(r=>r.map(d=>n.jsx(le,{column:d},d.uniqueKey)))),[e.headerRows.value]),i=m.useRef(null),o=m.useCallback(p.FnUtils.throttle(r=>{var d;(d=i.current)==null||d.setScrollTop(r.target.scrollTop)},100),[i.current]);return console.log("render - data grid"),n.jsxs(g,{component:"datagrid",style:e.sizes.value,props:{role:"presentation"},children:[n.jsx(g,{p:3,bb:1,borderColor:"gray-400",children:e.groupColumns.length>0?e.groupColumns.join(" > "):"No grouping"}),n.jsxs(g,{overflowX:"scroll",props:{onScroll:o},children:[n.jsx(V,{component:"datagrid.header",variant:{isResizeMode:t},style:{gridTemplateColumns:e.gridTemplateColumns.value},children:s}),n.jsx(me,{ref:i,grid:e})]}),n.jsxs(g,{p:3,bgColor:"gray-200",children:["Rows: ",e.rows.value.length]})]})}const F=10,q=25,ge=F+q*2;function pe(u,e){const{grid:t}=u,s=p.DEFAULT_REM_DIVIDER*t.ROW_HEIGHT,[i,o]=m.useState(0),r=Math.max(0,Math.floor(i/s)-q),d=m.useMemo(()=>(console.log("render - rows"),t.flatRows.value.take(ge,r).map(h=>h instanceof z?n.jsx(he,{row:h},h.rowKey):n.jsx(ce,{row:h},h.rowKey))),[t.flatRows.value,r]);m.useImperativeHandle(e,()=>({setScrollTop:o}));const a=t.flatRows.value.length;return n.jsx(g,{height:t.ROW_HEIGHT*F,children:n.jsx(g,{style:{height:`${a*s}px`},children:n.jsx(V,{props:{role:"presentation"},width:"max-content",minWidth:"fit",transition:"none",style:{transform:`translateY(${r*s}px)`,gridTemplateColumns:t.gridTemplateColumns.value},children:d})})})}const me=m.forwardRef(pe);module.exports=de;

package/components/dataGrid.d.ts

@@ -1,7 +1,2 @@
-import { GridDef } from './dataGrid/dataGridContract';
-interface Props<TRow> {
-    data?: TRow[];
-    def: GridDef<TRow>;
-}
-export default function DataGrid<TRow extends {}>(props: Props<TRow>): import("react/jsx-runtime").JSX.Element | null;
-export {};
+import { DataGridProps } from './dataGrid/contracts/dataGridContract';
+export default function DataGrid<TRow extends {}>(props: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;