@moysklad/uikit 28.1.0 → 30.4.0

package/dist/data-grid/Table/components/Row/Row.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+import type { Row as TanstackRow } from '@tanstack/react-table';
+import type { WithRowClickLink } from '../../types';
+type Props<T extends WithRowClickLink> = {
+    row: TanstackRow<T>;
+    knownSize?: number;
+} & HTMLAttributes<HTMLTableRowElement>;
+declare const RowComponent: {
+    <T extends WithRowClickLink>({ children, knownSize, row, ...restProps }: PropsWithChildren<Props<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const Row: typeof RowComponent;
+export {};

package/dist/data-grid/Table/components/Row/Row.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../../../common/css/cn.js";
+import { TableRowSize } from "../../../types/index.js";
+import { ROW_HEIGHT_COMFORT, ROW_HEIGHT_COMPACT } from "../../constants.js";
+import { useRowContext, useTableContext } from "../../hooks/index.js";
+import { DraggableRow } from "../DraggableRow/DraggableRow.js";
+import Row_module from "./Row.module.js";
+const RowComponent = ({ children, knownSize, row, ...restProps })=>{
+    const isSelected = row.getIsSelected();
+    const { rowSize } = useTableContext();
+    const { getRowHighlightColor, enableRowOrdering, draggingZIndex } = useRowContext();
+    const highlightColor = getRowHighlightColor?.(row);
+    const isCompact = rowSize === TableRowSize.Compact;
+    const className = cn(Row_module.row, isSelected && Row_module.selected, highlightColor && Row_module[`highlighted-row-${highlightColor}`]);
+    const dataKnownSize = knownSize ?? (isCompact ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_COMFORT);
+    if (enableRowOrdering) return /*#__PURE__*/ jsx(DraggableRow, {
+        ...restProps,
+        row: row,
+        className: className,
+        "data-id": row.id,
+        "data-index": row.index,
+        "data-known-size": dataKnownSize,
+        "data-selected": isSelected,
+        draggingZIndex: draggingZIndex,
+        children: children
+    });
+    return /*#__PURE__*/ jsx("tr", {
+        ...restProps,
+        className: className,
+        "data-id": row.id,
+        "data-index": row.index,
+        "data-known-size": dataKnownSize,
+        "data-selected": isSelected,
+        children: children
+    });
+};
+RowComponent.displayName = 'Row';
+const Row = /*#__PURE__*/ memo(RowComponent);
+export { Row };

package/dist/data-grid/Table/components/Row/Row.module.js

@@ -0,0 +1,14 @@
+import "./Row_module.css";
+const Row_module = {
+    row: "row-TWHYq_",
+    selected: "selected-JM5M4l",
+    "highlighted-row-orange": "highlighted-row-orange-MscAbR",
+    highlightedRowOrange: "highlighted-row-orange-MscAbR",
+    "highlighted-row-red": "highlighted-row-red-cE3oyl",
+    highlightedRowRed: "highlighted-row-red-cE3oyl",
+    "highlighted-row-green": "highlighted-row-green-ZtbUsd",
+    highlightedRowGreen: "highlighted-row-green-ZtbUsd",
+    "highlighted-row-blue": "highlighted-row-blue-ua66B5",
+    highlightedRowBlue: "highlighted-row-blue-ua66B5"
+};
+export default Row_module;

package/dist/data-grid/Table/components/{TableRow/TableRow_module.css → Row/Row_module.css}

@@ -1,35 +1,35 @@
-.tableRow-JTQ46u {
+.row-TWHYq_ {
   cursor: pointer;
   position: relative;
 }
 
-.tableRow-JTQ46u:not(.selected-mZvqm6):hover, .tableRow-JTQ46u:not(.selected-mZvqm6):focus-within {
+.row-TWHYq_:not(.selected-JM5M4l):hover, .row-TWHYq_:not(.selected-JM5M4l):focus-within {
   background-color: var(--bgd-secondary, #f1f4f9);
   --input-table-background: var(--bgd-white, #fff);
   --input-table-border: var(--border-normal, #d1d6df);
   --select-table-actions-display: flex;
 }
 
-.selected-mZvqm6 {
+.selected-JM5M4l {
   --input-table-background: var(--bgd-white, #fff);
   --input-table-border: var(--border-normal, #d1d6df);
   --select-table-actions-display: flex;
   background-color: #dff0fe;
 }
 
-.highlighted-row-orange-_YaQso {
+.highlighted-row-orange-MscAbR {
   background-color: var(--status-orange-01-bg);
 }
 
-.highlighted-row-red-Rwb1aT {
+.highlighted-row-red-cE3oyl {
   background-color: var(--status-red-01-bg);
 }
 
-.highlighted-row-green-fn_ksP {
+.highlighted-row-green-ZtbUsd {
   background-color: var(--status-green-01-bg);
 }
 
-.highlighted-row-blue-bfEYJK {
+.highlighted-row-blue-ua66B5 {
   background-color: var(--status-blue-02-bg);
 }
 

package/dist/data-grid/Table/components/SubRows/SubRows.d.ts

@@ -1,10 +1,11 @@
 import { type PropsWithChildren } from 'react';
-import type { Row } from '@tanstack/react-table';
-type Props<T> = {
-    row: Row<T>;
+import type { Row as TanstackRow } from '@tanstack/react-table';
+import type { WithRowClickLink } from '../../types';
+type Props<T extends WithRowClickLink> = {
+    row: TanstackRow<T>;
 };
 declare const SubRowsComponent: {
-    <T>({ row }: PropsWithChildren<Props<T>>): import("react/jsx-runtime").JSX.Element | null;
+    <T extends WithRowClickLink>({ row, }: PropsWithChildren<Props<T>>): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const SubRows: typeof SubRowsComponent;

package/dist/data-grid/Table/components/SubRows/SubRows.js

@@ -1,12 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
+import { Row } from "../Row/Row.js";
 import { TableCell } from "../TableCell/TableCell.js";
-import { TableRow } from "../TableRow/TableRow.js";
 import { TableSpacerCell } from "../TableSpacerCell/TableSpacerCell.js";
 const SubRowsComponent = ({ row })=>{
     if (!row.getIsExpanded() || !row.subRows || 0 === row.subRows.length) return null;
     return /*#__PURE__*/ jsx(Fragment, {
-        children: row.subRows.map((subRow)=>/*#__PURE__*/ jsxs(TableRow, {
+        children: row.subRows.map((subRow)=>/*#__PURE__*/ jsxs(Row, {
                 row: subRow,
                 children: [
                     subRow.getVisibleCells().map((cell)=>/*#__PURE__*/ jsx(TableCell, {
@@ -16,7 +16,7 @@ const SubRowsComponent = ({ row })=>{
                         variant: "body"
                     })
                 ]
-            }, subRow.id))
+            }, `${row.id}.${subRow.id}`))
     });
 };
 SubRowsComponent.displayName = 'SubRows';

package/dist/data-grid/Table/components/TableCell/TableCell.js

@@ -3,6 +3,7 @@ import { flexRender } from "@tanstack/react-table";
 import { getColumnWidthStyles } from "../../utils/index.js";
 import TableCell_module from "./TableCell.module.js";
 const TableCell = ({ cell, children, ...restProps })=>{
+    const colId = cell?.column.columnDef.id;
     const style = cell ? getColumnWidthStyles({
         column: cell.column
     }) : {};
@@ -10,6 +11,7 @@ const TableCell = ({ cell, children, ...restProps })=>{
         ...restProps,
         className: TableCell_module.tableCell,
         style: style,
+        "data-id": colId,
         children: cell ? flexRender(cell.column.columnDef.cell, cell.getContext()) : children
     });
 };

package/dist/data-grid/Table/components/TableDragOverlay/TableDragOverlay.d.ts

@@ -1,15 +1,14 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import type { Row } from '@tanstack/react-table';
-import type { ValueOf } from '../../../../common';
-import { TableRowSize } from '../../../types';
+import type { Row as TanstackRow } from '@tanstack/react-table';
+import { type TableRowSizeValue } from '../../../types';
 import type { WithRowClickLink } from '../../types';
 type Props<T extends WithRowClickLink> = {
-    rows: Row<T>[];
+    rows: TanstackRow<T>[];
     activeRowId?: string | null;
     className?: string;
-    rowSize: ValueOf<typeof TableRowSize>;
+    rowSize: TableRowSizeValue;
     style?: CSSProperties;
-    renderRowContent?: (row: Row<T>) => ReactNode;
+    renderRowContent?: (row: TanstackRow<T>) => ReactNode;
 };
 declare const TableDragOverlayComponent: {
     <T extends WithRowClickLink>({ rows, activeRowId, className, rowSize, style, renderRowContent, }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/data-grid/Table/components/TableDragOverlay/TableDragOverlay.js

@@ -2,8 +2,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { DragOverlay } from "@dnd-kit/core";
 import { cn } from "../../../../common/css/cn.js";
+import { Row } from "../Row/Row.js";
 import { TableCell } from "../TableCell/TableCell.js";
-import { TableRow } from "../TableRow/TableRow.js";
 import { TableSpacerCell } from "../TableSpacerCell/TableSpacerCell.js";
 import Table_module from "../../Table.module.js";
 import TableDragOverlay_module from "./TableDragOverlay.module.js";
@@ -15,7 +15,7 @@ const TableDragOverlayComponent = ({ rows, activeRowId, className, rowSize, styl
             className: cn(Table_module.table, TableDragOverlay_module.overlayTable, className ?? ''),
             "data-row-height": rowSize,
             children: /*#__PURE__*/ jsx("tbody", {
-                children: /*#__PURE__*/ jsx(TableRow, {
+                children: /*#__PURE__*/ jsx(Row, {
                     row: activeRow,
                     "data-is-dragging": true,
                     children: renderRowContent ? /*#__PURE__*/ jsx(TableCell, {

package/dist/data-grid/Table/components/TableRow/TableRow.d.ts

@@ -1,16 +1,8 @@
-import { type HTMLAttributes, type PropsWithChildren } from 'react';
-import type { Row } from '@tanstack/react-table';
-import type { DnDConfig } from '../../types';
-declare const highlightedRowColors: readonly ["orange", "red", "green", "blue"];
-export type HighlightedRowColor = (typeof highlightedRowColors)[number];
-type Props<T> = {
-    row: Row<T>;
-    dndConfig?: DnDConfig;
-    getRowHighlightColor?: (row: Row<T>) => HighlightedRowColor | undefined;
-} & HTMLAttributes<HTMLTableRowElement>;
-declare const TableRowComponent: {
-    <T>({ row, children, dndConfig, getRowHighlightColor, ...restProps }: PropsWithChildren<Props<T>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+import type { Row as TanstackRow } from '@tanstack/react-table';
+import type { WithRowClickLink } from '../../types';
+type Props<T extends WithRowClickLink> = {
+    row: TanstackRow<T>;
+    knownSize?: number;
 };
-export declare const TableRow: typeof TableRowComponent;
+export declare const TableRow: <T extends WithRowClickLink>({ row, knownSize, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/data-grid/Table/components/TableRow/TableRow.js

@@ -1,27 +1,36 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
-import { cn } from "../../../../common/css/cn.js";
-import { DraggableRow } from "../DraggableRow/DraggableRow.js";
-import TableRow_module from "./TableRow.module.js";
-const TableRowComponent = ({ row, children, dndConfig, getRowHighlightColor, ...restProps })=>{
-    const isSelected = row.getIsSelected();
-    const highlightColor = getRowHighlightColor?.(row);
-    const className = cn(TableRow_module.tableRow, isSelected && TableRow_module.selected, highlightColor && TableRow_module[`highlighted-row-${highlightColor}`]);
-    if (dndConfig?.enableRowOrdering) return /*#__PURE__*/ jsx(DraggableRow, {
-        ...restProps,
-        "data-selected": isSelected,
-        row: row,
-        className: className,
-        draggingZIndex: dndConfig.draggingZIndex,
-        children: children
-    });
-    return /*#__PURE__*/ jsx("tr", {
-        ...restProps,
-        "data-selected": isSelected,
-        className: className,
-        children: children
-    });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment } from "react";
+import { useRowContext } from "../../hooks/useRowContext.js";
+import { Row } from "../Row/Row.js";
+import { SubRows } from "../SubRows/SubRows.js";
+import { TableCell } from "../TableCell/TableCell.js";
+import { TableSpacerCell } from "../TableSpacerCell/TableSpacerCell.js";
+const TableRow = ({ row, knownSize })=>{
+    const { getRowClickHandler, renderRowContent } = useRowContext();
+    return /*#__PURE__*/ jsxs(external_react_Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Row, {
+                row: row,
+                onClick: getRowClickHandler(row),
+                knownSize: knownSize,
+                children: renderRowContent ? /*#__PURE__*/ jsx(TableCell, {
+                    colSpan: row.getVisibleCells().length + 1,
+                    children: renderRowContent(row)
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        row.getVisibleCells().map((cell)=>/*#__PURE__*/ jsx(TableCell, {
+                                cell: cell
+                            }, cell.id)),
+                        /*#__PURE__*/ jsx(TableSpacerCell, {
+                            variant: "body"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(SubRows, {
+                row: row
+            })
+        ]
+    }, row.id);
 };
-TableRowComponent.displayName = 'TableRow';
-const TableRow = /*#__PURE__*/ memo(TableRowComponent);
 export { TableRow };

package/dist/data-grid/Table/components/VirtualTable/VirtualTable.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import { type TableVirtuosoProps } from 'react-virtuoso';
+import type { Row } from '@tanstack/react-table';
+import type { WithRowClickLink } from '../../types';
+type OmittedTableVirtuosoProps = 'components' | 'computeItemKey' | 'context' | 'data' | 'fixedFooterContent' | 'fixedHeaderContent' | 'itemContent' | 'itemsRendered' | 'rows';
+export type VirtualTableProps<T extends WithRowClickLink> = Omit<TableVirtuosoProps<Row<T>, unknown>, OmittedTableVirtuosoProps> & {
+    footerContent: ReactNode | null;
+};
+export declare const VirtualTable: <T extends WithRowClickLink>({ footerContent, overscan, ...props }: VirtualTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/data-grid/Table/components/VirtualTable/VirtualTable.js

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { cn } from "../../../../common/index.js";
+import { useTableContext } from "../../hooks/index.js";
+import { getTableColumnIds } from "../../utils/index.js";
+import { HeaderContent } from "../Header/HeaderContent.js";
+import { VirtualTableRow } from "./VirtualTableRow.js";
+import Table_module from "../../Table.module.js";
+import Body_module from "../Body/Body.module.js";
+const getComponents = ()=>({
+        Table: (props)=>{
+            const { rowSize, className } = useTableContext();
+            return /*#__PURE__*/ jsx("table", {
+                ...props,
+                "data-row-height": rowSize,
+                className: cn(Table_module.table, className ?? '')
+            });
+        },
+        TableHead: /*#__PURE__*/ forwardRef((props, ref)=>{
+            const { headerStyle } = useTableContext();
+            return /*#__PURE__*/ jsx("thead", {
+                ...props,
+                ref: ref,
+                className: Table_module.thead,
+                style: headerStyle
+            });
+        }),
+        TableBody: /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>{
+            const { isLoading } = useTableContext();
+            return /*#__PURE__*/ jsx("tbody", {
+                ...props,
+                ref: ref,
+                className: cn(isLoading && Body_module.active, className),
+                children: children
+            });
+        }),
+        TableRow: ({ item, 'data-known-size': knownSize, context })=>{
+            const { columnIds, columnVisibility, rowSelection } = context;
+            const isSelected = !!rowSelection[item.id];
+            return /*#__PURE__*/ jsx(VirtualTableRow, {
+                columnVisibility: columnVisibility,
+                knownSize: knownSize,
+                row: item,
+                isSelected: isSelected,
+                columnIds: columnIds
+            });
+        },
+        TableFoot: /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("tfoot", {
+                ...props,
+                ref: ref,
+                className: Table_module.tfoot,
+                style: void 0
+            }))
+    });
+const VirtualTable = ({ footerContent, overscan = 5, ...props })=>{
+    const { table } = useTableContext();
+    const { rows } = table.getRowModel();
+    const { columnVisibility, rowSelection } = table.getState();
+    const columnIds = getTableColumnIds(table);
+    const context = {
+        columnIds,
+        columnVisibility,
+        rowSelection
+    };
+    const components = useMemo(()=>getComponents(), []);
+    return /*#__PURE__*/ jsx(TableVirtuoso, {
+        data: rows,
+        overscan: overscan,
+        computeItemKey: (i, row)=>row.id,
+        fixedHeaderContent: ()=>/*#__PURE__*/ jsx(HeaderContent, {}),
+        fixedFooterContent: ()=>footerContent,
+        components: components,
+        context: context,
+        ...props
+    });
+};
+export { VirtualTable };

package/dist/data-grid/Table/components/VirtualTable/VirtualTableRow.d.ts

@@ -0,0 +1,11 @@
+import type { Row, VisibilityState } from '@tanstack/react-table';
+import type { WithRowClickLink } from '../../types';
+type Props<T extends WithRowClickLink> = {
+    row: Row<T>;
+    knownSize?: number;
+    isSelected: boolean;
+    columnVisibility: VisibilityState;
+    columnIds: string[];
+};
+export declare const VirtualTableRow: <T extends WithRowClickLink>(props: Props<T>) => JSX.Element;
+export {};

package/dist/data-grid/Table/components/VirtualTable/VirtualTableRow.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { compareColumnIds } from "../../utils/index.js";
+import { TableRow } from "../TableRow/TableRow.js";
+const VirtualTableRowComponent = ({ row, knownSize })=>/*#__PURE__*/ jsx(TableRow, {
+        row: row,
+        knownSize: knownSize
+    });
+function areEqual(prevProps, nextProps) {
+    const isRowsEqual = prevProps.row === nextProps.row;
+    const isSelectionEqual = prevProps.isSelected === nextProps.isSelected;
+    const isKnownSizeEqual = prevProps.knownSize === nextProps.knownSize;
+    const isColumnVisibilityEqual = prevProps.columnVisibility === nextProps.columnVisibility;
+    const isColumnsListEqual = compareColumnIds(prevProps.columnIds, nextProps.columnIds);
+    return isRowsEqual && isSelectionEqual && isKnownSizeEqual && isColumnVisibilityEqual && isColumnsListEqual;
+}
+const VirtualTableRow = /*#__PURE__*/ react.memo(VirtualTableRowComponent, areEqual);
+export { VirtualTableRow };

package/dist/data-grid/Table/components/index.d.ts

@@ -1,6 +1,6 @@
 export { Body } from './Body/Body';
-export { Footer } from './Footer/Footer';
-export { Header } from './Header/Header';
+export { FooterContent } from './Footer/FooterContent';
+export { HeaderContent } from './Header/HeaderContent';
 export { TableDragOverlay } from './TableDragOverlay/TableDragOverlay';
-export { type HighlightedRowColor, TableRow } from './TableRow/TableRow';
+export { TableRow } from './TableRow/TableRow';
 export { TotalsToggle, type TotalsToggleLocale } from './TotalsToggle';

package/dist/data-grid/Table/components/index.js

@@ -1,6 +1,6 @@
 export { Body } from "./Body/Body.js";
-export { Footer } from "./Footer/Footer.js";
-export { Header } from "./Header/Header.js";
+export { FooterContent } from "./Footer/FooterContent.js";
+export { HeaderContent } from "./Header/HeaderContent.js";
 export { TableDragOverlay } from "./TableDragOverlay/TableDragOverlay.js";
 export { TableRow } from "./TableRow/TableRow.js";
 export { TotalsToggle } from "./TotalsToggle/index.js";

package/dist/data-grid/Table/constants.d.ts

@@ -1 +1,3 @@
 export declare const SPACER_COL_SIZE = "--spacer-col-size";
+export declare const ROW_HEIGHT_COMPACT = 28;
+export declare const ROW_HEIGHT_COMFORT = 32;

package/dist/data-grid/Table/constants.js

@@ -1,2 +1,4 @@
 const SPACER_COL_SIZE = '--spacer-col-size';
-export { SPACER_COL_SIZE };
+const ROW_HEIGHT_COMPACT = 28;
+const ROW_HEIGHT_COMFORT = 32;
+export { ROW_HEIGHT_COMFORT, ROW_HEIGHT_COMPACT, SPACER_COL_SIZE };

package/dist/data-grid/Table/hooks/index.d.ts

@@ -2,5 +2,6 @@ export { useColumnResizeHandler } from './useColumnResizeHandler';
 export { useColumnSizes } from './useColumnSizes';
 export { useIntersection } from './useIntersection';
 export { useRect } from './useRect';
+export { RowContextProvider, useRowContext } from './useRowContext';
 export { TableContext, TableContextProvider, useTableContext, } from './useTableContext';
 export { useTableHeight } from './useTableHeight';

package/dist/data-grid/Table/hooks/index.js

@@ -2,5 +2,6 @@ export { useColumnResizeHandler } from "./useColumnResizeHandler.js";
 export { useColumnSizes } from "./useColumnSizes.js";
 export { useIntersection } from "./useIntersection.js";
 export { useRect } from "./useRect.js";
+export { RowContextProvider, useRowContext } from "./useRowContext.js";
 export { TableContext, TableContextProvider, useTableContext } from "./useTableContext.js";
 export { useTableHeight } from "./useTableHeight.js";

package/dist/data-grid/Table/hooks/useRowContext.d.ts

@@ -0,0 +1,16 @@
+import { type MouseEventHandler, type PropsWithChildren } from 'react';
+import type { Row } from '@tanstack/react-table';
+import type { TableProps } from '../Table';
+import { type DnDConfig, type WithRowClickLink } from '../types';
+type PickedRowProps = 'getRowHighlightColor' | 'onRowClick' | 'rowClickCallOrder' | 'renderRowContent';
+interface IRowContextProviderProps<T extends WithRowClickLink> extends Pick<TableProps<T>, PickedRowProps> {
+    draggingZIndex?: DnDConfig['draggingZIndex'];
+    enableRowOrdering?: DnDConfig['enableRowOrdering'];
+}
+interface IRowContext<T extends WithRowClickLink> extends Omit<IRowContextProviderProps<T>, 'onRowClick'> {
+    getRowClickHandler: (row: Row<T>) => MouseEventHandler<HTMLTableRowElement>;
+}
+export declare const RowContext: import("react").Context<IRowContext<any> | null>;
+export declare const useRowContext: <T extends WithRowClickLink>() => IRowContext<T>;
+export declare const RowContextProvider: <T extends WithRowClickLink>({ children, getRowHighlightColor, onRowClick: onRowClickFromElement, rowClickCallOrder, renderRowContent, draggingZIndex, enableRowOrdering, }: PropsWithChildren<IRowContextProviderProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/data-grid/Table/hooks/useRowContext.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { RowClickCallOrder } from "../types.js";
+const RowContext = /*#__PURE__*/ createContext(null);
+const useRowContext = ()=>{
+    const context = useContext(RowContext);
+    if (!context) throw new Error('useRowContext must be used within a <RowContext.Provider>');
+    return context;
+};
+const RowContextProvider = ({ children, getRowHighlightColor, onRowClick: onRowClickFromElement, rowClickCallOrder, renderRowContent, draggingZIndex, enableRowOrdering })=>{
+    const getRowClickHandler = useCallback((row)=>(e)=>{
+            const cellText = document.getSelection();
+            if (cellText && 'Range' === cellText.type) e.stopPropagation();
+            const onRowClickFromData = 'function' == typeof row.original?.onRowClick ? row.original.onRowClick : ()=>{};
+            if (rowClickCallOrder === RowClickCallOrder.Default) {
+                onRowClickFromElement?.(row);
+                onRowClickFromData();
+            } else {
+                onRowClickFromData();
+                onRowClickFromElement?.(row);
+            }
+        }, [
+        onRowClickFromElement,
+        rowClickCallOrder
+    ]);
+    const props = useMemo(()=>({
+            enableRowOrdering,
+            draggingZIndex,
+            getRowHighlightColor,
+            getRowClickHandler,
+            renderRowContent
+        }), [
+        enableRowOrdering,
+        draggingZIndex,
+        getRowHighlightColor,
+        getRowClickHandler,
+        renderRowContent
+    ]);
+    return /*#__PURE__*/ jsx(RowContext.Provider, {
+        value: props,
+        children: children
+    });
+};
+export { RowContext, RowContextProvider, useRowContext };

package/dist/data-grid/Table/hooks/useTableContext.d.ts

@@ -1,10 +1,15 @@
-import { type PropsWithChildren } from 'react';
+import { type CSSProperties, type PropsWithChildren } from 'react';
 import { type ColumnSizingState, type Table } from '@tanstack/react-table';
+import { type TableRowSizeValue } from '../../types';
 interface TableContext<T> {
     table: Table<T>;
     onResizeColumn?: (sizing: ColumnSizingState) => void;
+    rowSize?: TableRowSizeValue;
+    className?: string;
+    isLoading: boolean;
+    headerStyle?: CSSProperties;
 }
 export declare const TableContext: import("react").Context<TableContext<any> | null>;
 export declare const useTableContext: <T>() => TableContext<T>;
-export declare const TableContextProvider: <T>({ children, table, onResizeColumn, }: PropsWithChildren<TableContext<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableContextProvider: <T>({ children, className, headerStyle, isLoading, onResizeColumn, rowSize, table, }: PropsWithChildren<TableContext<T>>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/data-grid/Table/hooks/useTableContext.js

@@ -1,16 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo } from "react";
+import { TableRowSize } from "../../types/index.js";
 const TableContext = /*#__PURE__*/ createContext(null);
 const useTableContext = ()=>{
     const context = useContext(TableContext);
     if (!context) throw new Error('useTableContext must be used within a <TableContext.Provider>');
     return context;
 };
-const TableContextProvider = ({ children, table, onResizeColumn })=>{
+const TableContextProvider = ({ children, className, headerStyle, isLoading, onResizeColumn, rowSize = TableRowSize.Comfort, table })=>{
     const props = useMemo(()=>({
             table,
-            onResizeColumn
+            onResizeColumn,
+            rowSize,
+            className,
+            isLoading,
+            headerStyle
         }), [
+        className,
+        headerStyle,
+        isLoading,
+        onResizeColumn,
+        rowSize,
         table
     ]);
     return /*#__PURE__*/ jsx(TableContext.Provider, {

package/dist/data-grid/Table/index.d.ts

@@ -1,4 +1,4 @@
-export type { TotalsToggleLocale } from './components';
+export { type TotalsToggleLocale } from './components';
 export type { TableProps } from './Table';
 export { Table } from './Table';
-export type { DnDConfig, TFooterToggleConfig, WithRowClickLink } from './types';
+export type { DnDConfig, HighlightedRowColor, TFooterToggleConfig, WithRowClickLink, } from './types';

package/dist/data-grid/Table/types.d.ts

@@ -1,7 +1,8 @@
+import type { ValueOf } from '../../common/types';
 export type DnDConfig = {
     enableRowOrdering: boolean;
     dataIds: string[];
-    onDragEnd: (oldIndex: number, newIndex: number) => void;
+    onDragEnd: (oldIndex: number, newIndex: number, rowId: string) => void;
     draggingZIndex?: number;
 };
 export type TFooterToggleConfig = {
@@ -12,3 +13,9 @@ export type TFooterToggleConfig = {
 export type WithRowClickLink = {
     onRowClick?: () => void;
 };
+export declare const RowClickCallOrder: {
+    readonly Default: "default";
+    readonly Reverse: "reverse";
+};
+export type RowClickCallOrderValue = ValueOf<typeof RowClickCallOrder>;
+export type HighlightedRowColor = 'orange' | 'red' | 'green' | 'blue';

package/dist/data-grid/Table/types.js

@@ -0,0 +1,5 @@
+const RowClickCallOrder = {
+    Default: 'default',
+    Reverse: 'reverse'
+};
+export { RowClickCallOrder };

package/dist/data-grid/Table/utils/compareColumnIds.d.ts

@@ -0,0 +1 @@
+export declare const compareColumnIds: (arr1: string[], arr2: string[]) => boolean;

package/dist/data-grid/Table/utils/compareColumnIds.js

@@ -0,0 +1,6 @@
+const compareColumnIds = (arr1, arr2)=>{
+    if (arr1.length !== arr2.length) return false;
+    for(let i = 0; i < arr1.length; i++)if (arr1[i] !== arr2[i]) return false;
+    return true;
+};
+export { compareColumnIds };