@cronocode/react-box 3.0.12 → 3.0.14

package/README.md

@@ -114,13 +114,14 @@ export const { extendedProps, extendedPropTypes } = Box.extend(
 
 ```JS
 import '@cronocode/react-box';
-import { ExtractBoxStyles } from '@cronocode/react-box/types';
-import { extendedProps, extendedPropTypes } from './path-to-your-b0x-extends-declaration';
+import { ExtractBoxStyles, ExtractComponentsAndVariants } from '@cronocode/react-box/types';
+import { extendedProps, extendedPropTypes, components } from './path-to-your-b0x-extends-declaration';
 
 declare module '@cronocode/react-box/types' {
   namespace Augmented {
     interface BoxProps extends ExtractBoxStyles<typeof extendedProps> {}
     interface BoxPropTypes extends ExtractBoxStyles<typeof extendedPropTypes> {}
+    interface ComponentsTypes extends ExtractComponentsAndVariants<typeof components> {}
   }
 }
 ```
@@ -130,14 +131,14 @@ declare module '@cronocode/react-box/types' {
 In the project root file (main.tsx) use `Theme.setup`
 
 ```JS
-import Theme from '@cronocode/react-box/theme';
+import Box from '@cronocode/react-box';
 
-Theme.setup({
+Box.components({
   button: {
     styles: {
       px: 4
     },
-    themes: {
+    variants: {
       mytheme: {
         px: 8
       }
@@ -157,13 +158,13 @@ function MyComponent() {
 }
 ```
 
-or is possible to use Button with specific theme
+or is possible to use Button with specific variant
 
 ```JS
 import Button from '@cronocode/react-box/components/button';
 
 function MyComponent() {
-  return <Button theme="mytheme">Click me</Button>
+  return <Button variant="mytheme">Click me</Button>
 }
 ```
 

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/box.cjs

@@ -1 +1 @@
-"use strict";const t=require("react"),e=require("./core.cjs");function P(a,l){const{tag:c="div",children:n,props:m,className:p,style:i,disabled:x,required:B,checked:g,selected:h}=a,f=e.useStyles(a,c==="svg"),r=t.useMemo(()=>{const v=e.classNames(f,p).join(" "),s={...m,className:v};return e.BoxUtils.assignBooleanProp(x,"disabled",s),e.BoxUtils.assignBooleanProp(B,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),e.BoxUtils.assignBooleanProp(h,"selected",s),i&&(s.style=i),l&&(s.ref=l),s},[a]),[T,u]=t.useState(!1),d=typeof n=="function";return d&&(r.onMouseEnter=()=>u(!0),r.onMouseLeave=()=>u(!1)),t.createElement(c,r,d?n({isHover:T}):n)}const o=t.memo(t.forwardRef(P));o.extend=e.BoxExtends.extend;o.themeSetup=e.Theme.setup;o.Theme=e.Theme;o.useTheme=e.Theme.useTheme;o.getVariableValue=e.Variables.getVariableValue;module.exports=o;
+"use strict";const t=require("react"),e=require("./core.cjs");function T(n,l){const{tag:c="div",children:a,props:m,className:x,style:i,disabled:B,required:p,checked:g,selected:f}=n,h=e.useStyles(n,c==="svg"),r=t.useMemo(()=>{const P=e.classNames(h,x).join(" "),s={...m,className:P};return e.BoxUtils.assignBooleanProp(B,"disabled",s),e.BoxUtils.assignBooleanProp(p,"required",s),e.BoxUtils.assignBooleanProp(g,"checked",s),e.BoxUtils.assignBooleanProp(f,"selected",s),i&&(s.style=i),l&&(s.ref=l),s},[n]),[v,u]=t.useState(!1),d=typeof a=="function";return d&&(r.onMouseEnter=()=>u(!0),r.onMouseLeave=()=>u(!1)),t.createElement(c,r,d?a({isHover:v}):a)}const o=t.memo(t.forwardRef(T));o.extend=e.BoxExtends.extend;o.components=e.BoxExtends.components;o.Theme=e.Theme;o.useTheme=e.Theme.useTheme;o.getVariableValue=e.Variables.getVariableValue;module.exports=o;

package/box.d.ts

@@ -1,13 +1,13 @@
-import { default as React, Ref, RefAttributes } from 'react';
+import { default as React, RefAttributes } from 'react';
 import { ClassNameType } from './core/classNames';
 import { ExtractElementFromTag } from './core/coreTypes';
-import { BoxStyleProps } from './types';
-import { default as BoxExtends } from './core/boxExtends';
+import { BoxStyleProps, ComponentsAndVariants } from './types';
+import { default as BoxExtends } from './core/extends/boxExtends';
 import { default as Theme } from './core/theme/theme';
 import { default as Variables } from './core/variables';
 type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
 type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref' | 'disabled' | 'required' | 'checked'>;
-interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
+interface Props<TTag extends keyof React.JSX.IntrinsicElements, TKey extends keyof ComponentsAndVariants> extends BoxStyleProps<TKey> {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);
@@ -16,16 +16,15 @@ interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyle
     className?: ClassNameType;
     style?: React.ComponentProps<TTag>['style'];
 }
-declare function BoxComponent<TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag>, ref: Ref<ExtractElementFromTag<TTag>>): React.ReactElement<React.ComponentProps<TTag>, string | React.JSXElementConstructor<any>>;
 interface BoxType {
-    <TTag extends keyof React.JSX.IntrinsicElements = 'div'>(props: Props<TTag> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
+    <TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never>(props: Props<TTag, TKey> & RefAttributes<ExtractElementFromTag<TTag>>): React.ReactNode;
     extend: typeof BoxExtends.extend;
-    themeSetup: typeof Theme.setup;
+    components: typeof BoxExtends.components;
     Theme: typeof Theme;
     useTheme: typeof Theme.useTheme;
     getVariableValue: typeof Variables.getVariableValue;
 }
 declare const Box: BoxType;
 export default Box;
-export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = React.ComponentProps<typeof BoxComponent<TTag>>;
-export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div'> = Required<BoxProps<TTag>>['props'];
+export type BoxProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> = React.ComponentProps<typeof Box<TTag, TKey>>;
+export type BoxTagProps<TTag extends keyof React.JSX.IntrinsicElements = 'div', TKey extends keyof ComponentsAndVariants = never> = Required<BoxProps<TTag, TKey>>['props'];

package/box.mjs

@@ -1,21 +1,21 @@
-import T, { memo as V, forwardRef as b, useMemo as y, useState as N } from "react";
-import { B as S, T as r, V as C, u as E, c as H, a } from "./core.mjs";
-function M(o, l) {
-  const { tag: c = "div", children: t, props: m, className: p, style: i, disabled: f, required: g, checked: B, selected: h } = o, x = E(o, c === "svg"), n = y(() => {
-    const P = H(x, p).join(" "), e = {
-      ...m,
-      className: P
+import V, { memo as b, forwardRef as y, useMemo as N, useState as C } from "react";
+import { B as u, T as d, V as E, u as H, c as M, a as o } from "./core.mjs";
+function S(a, r) {
+  const { tag: l = "div", children: t, props: p, className: f, style: c, disabled: g, required: B, checked: x, selected: h } = a, v = H(a, l === "svg"), n = N(() => {
+    const T = M(v, f).join(" "), e = {
+      ...p,
+      className: T
     };
-    return a.assignBooleanProp(f, "disabled", e), a.assignBooleanProp(g, "required", e), a.assignBooleanProp(B, "checked", e), a.assignBooleanProp(h, "selected", e), i && (e.style = i), l && (e.ref = l), e;
-  }, [o]), [v, u] = N(!1), d = typeof t == "function";
-  return d && (n.onMouseEnter = () => u(!0), n.onMouseLeave = () => u(!1)), T.createElement(c, n, d ? t({ isHover: v }) : t);
+    return o.assignBooleanProp(g, "disabled", e), o.assignBooleanProp(B, "required", e), o.assignBooleanProp(x, "checked", e), o.assignBooleanProp(h, "selected", e), c && (e.style = c), r && (e.ref = r), e;
+  }, [a]), [P, i] = C(!1), m = typeof t == "function";
+  return m && (n.onMouseEnter = () => i(!0), n.onMouseLeave = () => i(!1)), V.createElement(l, n, m ? t({ isHover: P }) : t);
 }
-const s = V(b(M));
-s.extend = S.extend;
-s.themeSetup = r.setup;
-s.Theme = r;
-s.useTheme = r.useTheme;
-s.getVariableValue = C.getVariableValue;
+const s = b(y(S));
+s.extend = u.extend;
+s.components = u.components;
+s.Theme = d;
+s.useTheme = d.useTheme;
+s.getVariableValue = E.getVariableValue;
 export {
   s as default
 };

package/components/button.d.ts

@@ -1,14 +1,15 @@
-import { BoxProps } from '../box';
-type ButtonProps = Omit<BoxProps<'button'>, 'ref' | 'tag'>;
-type BoxTagProps = Required<ButtonProps>['props'];
+import { RefAttributes } from 'react';
+import { BoxProps, BoxTagProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["type", "onClick"];
 type TagPropsType = (typeof tagProps)[number];
-type ButtonTagProps = Omit<BoxTagProps, TagPropsType>;
+type ButtonProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'button', TKey>, 'tag' | 'props'>;
+type ButtonTagProps = Omit<BoxTagProps<'button'>, TagPropsType>;
 type ButtonType = Required<React.ComponentProps<'button'>>['type'];
-interface Props extends Omit<ButtonProps, 'props'> {
+interface Props<TKey extends keyof ComponentsAndVariants> extends ButtonProps<TKey> {
     props?: ButtonTagProps;
     type?: ButtonType;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLButtonElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "button">(props: Props<TKey> & RefAttributes<HTMLButtonElement>) => React.ReactNode;
 export default _default;

package/components/checkbox.d.ts

@@ -1,9 +1,11 @@
+import { RefAttributes } from 'react';
 import { BoxTagProps, BoxProps } from '../box';
+import { ComponentsAndVariants } from '../types';
 declare const tagProps: readonly ["name", "onInput", "onChange", "autoFocus", "readOnly", "value", "defaultChecked"];
 type TagPropsType = (typeof tagProps)[number];
-type CheckboxProps = Omit<BoxProps<'input'>, 'tag' | 'props'>;
+type CheckboxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'input', TKey>, 'tag' | 'props'>;
 type CheckboxTagProps = Omit<BoxTagProps<'input'>, TagPropsType | 'type'>;
-interface Props extends CheckboxProps {
+interface Props<TKey extends keyof ComponentsAndVariants> extends CheckboxProps<TKey> {
     name?: string;
     props?: CheckboxTagProps;
     onInput?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -13,5 +15,5 @@ interface Props extends CheckboxProps {
     readOnly?: boolean;
     defaultChecked?: boolean;
 }
-declare const _default: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+declare const _default: <TKey extends keyof ComponentsAndVariants = "checkbox">(props: Props<TKey> & RefAttributes<HTMLInputElement>) => React.ReactNode;
 export default _default;

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;