@moysklad/uikit 28.1.0 → 30.4.0

package/dist/components/ViewersStack/components/common_module.css

@@ -0,0 +1,27 @@
+.wrapper-PSBfa1 {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.text-sRc9nc {
+  pointer-events: none;
+  z-index: calc(var(--scaled-item-z-index) - 1);
+  position: absolute;
+}
+
+.wrapper-PSBfa1:hover .text-sRc9nc {
+  z-index: var(--scaled-item-z-index);
+}
+
+.animated-R8DWjF {
+  transform-origin: center;
+  transition: transform .2s ease-in-out;
+}
+
+.animated-R8DWjF:hover {
+  z-index: var(--scaled-item-z-index);
+  transform: scale(1.1);
+}
+

package/dist/components/ViewersStack/types.d.ts

@@ -0,0 +1,22 @@
+import type { ValueOf } from '../../common';
+export declare const Size: {
+    readonly M: "m";
+    readonly L: "l";
+};
+export type SizeValue = ValueOf<typeof Size>;
+export declare const Color: {
+    readonly GREEN: "green";
+    readonly YELLOW: "yellow";
+    readonly PINK: "pink";
+    readonly VIOLET: "violet";
+};
+export type ColorValue = ValueOf<typeof Color>;
+export declare const COLORS: ColorValue[];
+export type Viewer = {
+    id: string;
+    label: string;
+    image?: string;
+};
+export type ColoredViewer = Viewer & {
+    color?: ColorValue;
+};

package/dist/components/ViewersStack/types.js

@@ -0,0 +1,17 @@
+const Size = {
+    M: 'm',
+    L: 'l'
+};
+const Color = {
+    GREEN: 'green',
+    YELLOW: 'yellow',
+    PINK: 'pink',
+    VIOLET: 'violet'
+};
+const COLORS = [
+    Color.GREEN,
+    Color.YELLOW,
+    Color.PINK,
+    Color.VIOLET
+];
+export { COLORS, Color, Size };

package/dist/components/ViewersStack/utils.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+export declare const getColorById: <T = string>(id: string, colors: T[]) => T;
+export declare const getScaledItemZIndexStyle: (tooltipZIndex: number) => CSSProperties;

package/dist/components/ViewersStack/utils.js

@@ -0,0 +1,17 @@
+const generateHash = (input)=>{
+    let hash = 0;
+    for (const char of input){
+        hash = (hash << 5) - hash + char.charCodeAt(0);
+        hash |= 0;
+    }
+    return hash;
+};
+const getColorById = (id, colors)=>{
+    const hash = generateHash(id);
+    const colorIndex = Math.abs(hash) % colors.length;
+    return colors[colorIndex];
+};
+const getScaledItemZIndexStyle = (tooltipZIndex)=>({
+        '--scaled-item-z-index': tooltipZIndex - 1
+    });
+export { getColorById, getScaledItemZIndexStyle };

package/dist/components/{EditableTitle → _shared/HintWithSkip}/HintWithSkip.d.ts

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import { type HintProps } from '../Hint/Hint';
+import { type HintProps } from '../../Hint/Hint';
 interface HintWithSkipProps extends HintProps {
     skip?: boolean;
 }

package/dist/components/{EditableTitle → _shared/HintWithSkip}/HintWithSkip.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Hint } from "../Hint/Hint.js";
+import { Hint } from "../../Hint/Hint.js";
 const HintWithSkip = ({ skip = false, ...hintProps })=>{
     if (skip) return hintProps.children;
     return /*#__PURE__*/ jsx(Hint, {

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

@@ -1,54 +1,46 @@
 import React, { type CSSProperties, type ReactNode } from 'react';
-import type { ColumnSizingState, Row, RowData, Table as TanstackTable, VisibilityState } from '@tanstack/react-table';
-import type { ValueOf } from '../../common';
-import { TableRowSize } from '../types';
-import { type HighlightedRowColor } from './components';
-import type { DnDConfig, TFooterToggleConfig, WithRowClickLink } from './types';
+import type { ListRange } from 'react-virtuoso';
+import type { ColumnSizingState, Row, RowData, Table as TanstackTable } from '@tanstack/react-table';
+import { type TableRowSizeValue } from '../types';
+import { type DnDConfig, type HighlightedRowColor, type RowClickCallOrderValue, type TFooterToggleConfig, type WithRowClickLink } from './types';
 declare module '@tanstack/react-table' {
     interface TableMeta<TData extends RowData> {
         updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
         onSelectAll?: () => void;
+        [key: string]: unknown;
     }
 }
 export type TableProps<T extends WithRowClickLink> = {
     wrapperClassName?: string;
     className?: string;
     isLoading: boolean;
-    /**
-     * @deprecated Используется table.getState().rowSelection
-     */
-    rowSelection?: Record<string, boolean>;
-    /**
-     * @deprecated Используется table.getState().columnVisibility
-     */
-    columnVisibility?: VisibilityState;
     dataTestId?: string;
     pagination?: ReactNode;
     footerToggleConfig?: TFooterToggleConfig;
     tableHeightCalcDeps?: unknown[];
     bottomOffset?: number;
     table: TanstackTable<T>;
-    /**
-     * @deprecated Согласно дизайну строки доходят до правой границы контейнера
-     */
-    fillContainerSpace?: boolean;
-    /**
-     * @deprecated Согласно дизайну таблица принимает 100% от ширины родителя
-     */
     fullWidth?: boolean;
     fullHeight?: boolean;
     dndConfig?: DnDConfig;
     renderRowContent?: (row: Row<T>) => ReactNode;
     getRowHighlightColor?: (row: Row<T>) => HighlightedRowColor | undefined;
     onRowClick?: (row: Row<T>) => void;
+    rowClickCallOrder?: RowClickCallOrderValue;
     onResizeColumn?: (sizing: ColumnSizingState) => void;
     headerStyle?: CSSProperties;
     isAdaptiveSizeColumns?: boolean;
-    rowSize?: ValueOf<typeof TableRowSize>;
+    rowSize?: TableRowSizeValue;
+    isVirtualization?: boolean;
+    overscan?: number | {
+        main: number;
+        reverse: number;
+    };
+    rangeChanged?: (range: ListRange) => void;
 };
 type TableInnerProps<T extends WithRowClickLink> = TableProps<T> & {
     activeRowId?: string | null;
 };
-export declare const TableComponent: <T extends WithRowClickLink>({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps, bottomOffset, table, fullHeight, dndConfig, renderRowContent, onRowClick, onResizeColumn, headerStyle, isAdaptiveSizeColumns, rowSize, getRowHighlightColor, activeRowId, }: TableInnerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableComponent: <T extends WithRowClickLink>({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps, bottomOffset, table, fullHeight, dndConfig, renderRowContent, onRowClick, rowClickCallOrder, onResizeColumn, headerStyle, isAdaptiveSizeColumns, rowSize, getRowHighlightColor, activeRowId, isVirtualization, overscan, rangeChanged, }: TableInnerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Table: <T extends WithRowClickLink>(props: TableProps<T>) => React.JSX.Element;
 export {};

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

@@ -1,20 +1,23 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { cn } from "../../common/css/cn.js";
 import { TableRowSize } from "../types/index.js";
-import { Body, Footer, Header, TableDragOverlay, TotalsToggle } from "./components/index.js";
-import { TableContextProvider, useColumnSizes, useIntersection, useRect, useTableHeight } from "./hooks/index.js";
-import { withDnD } from "./utils/index.js";
+import { Body } from "./components/Body/Body.js";
+import { FooterContent } from "./components/Footer/FooterContent.js";
+import { HeaderContent } from "./components/Header/HeaderContent.js";
+import { TableDragOverlay } from "./components/TableDragOverlay/TableDragOverlay.js";
+import { TableRow } from "./components/TableRow/TableRow.js";
+import { TotalsToggle } from "./components/TotalsToggle/TotalsToggle.js";
+import { VirtualTable } from "./components/VirtualTable/VirtualTable.js";
+import { RowContextProvider, TableContextProvider, useColumnSizes, useIntersection, useRect, useTableHeight } from "./hooks/index.js";
+import { RowClickCallOrder } from "./types.js";
+import { getTableColumnIds, withDnD } from "./utils/index.js";
 import Table_module from "./Table.module.js";
-const TableComponent = ({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps = [], bottomOffset = 0, table, fullHeight = true, dndConfig, renderRowContent, onRowClick, onResizeColumn, headerStyle, isAdaptiveSizeColumns = true, rowSize = TableRowSize.Comfort, getRowHighlightColor, activeRowId })=>{
+const TableComponent = ({ wrapperClassName, className, isLoading, dataTestId, pagination, footerToggleConfig, tableHeightCalcDeps = [], bottomOffset = 0, table, fullHeight = true, dndConfig, renderRowContent, onRowClick, rowClickCallOrder = RowClickCallOrder.Default, onResizeColumn, headerStyle, isAdaptiveSizeColumns = true, rowSize = TableRowSize.Comfort, getRowHighlightColor, activeRowId, isVirtualization = false, overscan = 5, rangeChanged })=>{
     const { rows } = table.getRowModel();
-    const headerGroups = table.getHeaderGroups();
-    const footerGroups = table.getFooterGroups();
-    const footers = footerGroups.map((group)=>group.headers.map((header)=>header.column.columnDef.footer)).flat().filter(Boolean);
-    const hasFooters = footers.length > 0;
-    const isTotalsToggleVisible = hasFooters && footerToggleConfig?.showTotalsToggle;
+    const { columnVisibility, rowSelection } = table.getState();
+    const columnIds = getTableColumnIds(table);
     const tableWrapperRef = useRef(null);
-    const tableRef = useRef(null);
     const rect = useRect(tableWrapperRef);
     const tableWrapperRefIntersectionObserver = useIntersection(tableWrapperRef, {
         threshold: 1
@@ -32,63 +35,98 @@ const TableComponent = ({ wrapperClassName, className, isLoading, dataTestId, pa
     });
     const columnSizeVars = useColumnSizes(table, isAdaptiveSizeColumns);
     const isDragging = Boolean(activeRowId);
+    const tableWrapperStyles = fullHeight ? {
+        ...columnSizeVars,
+        height: maxHeight,
+        minHeight
+    } : {
+        ...columnSizeVars
+    };
+    const virtualTableProps = fullHeight ? {
+        customScrollParent: tableWrapperRef?.current ?? void 0
+    } : {
+        useWindowScroll: true
+    };
+    const getFooterContent = ()=>{
+        const footerGroups = table.getFooterGroups();
+        const footers = footerGroups.map((group)=>group.headers.map((header)=>header.column.columnDef.footer)).flat().filter(Boolean);
+        const hasFooters = footers.length > 0;
+        const isTotalsToggleVisible = hasFooters && footerToggleConfig?.showTotalsToggle;
+        if (hasFooters || pagination || isTotalsToggleVisible) return /*#__PURE__*/ jsx(FooterContent, {
+            footerGroups: footerGroups,
+            isEmptyFooter: isTotalsToggleVisible,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: Table_module.footerControlBar,
+                children: [
+                    pagination,
+                    isTotalsToggleVisible && /*#__PURE__*/ jsx(TotalsToggle, {
+                        onClick: footerToggleConfig.handleOnShow,
+                        label: footerToggleConfig.label,
+                        testId: `${dataTestId}-totals-toggle`
+                    })
+                ]
+            })
+        });
+        return null;
+    };
+    const footerContent = getFooterContent();
     return /*#__PURE__*/ jsx(TableContextProvider, {
-        table: table,
+        className: className,
+        isLoading: isLoading,
         onResizeColumn: onResizeColumn,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: Table_module.container,
+        rowSize: rowSize,
+        table: table,
+        headerStyle: headerStyle,
+        children: /*#__PURE__*/ jsxs(RowContextProvider, {
+            draggingZIndex: dndConfig?.draggingZIndex,
+            enableRowOrdering: dndConfig?.enableRowOrdering,
+            getRowHighlightColor: getRowHighlightColor,
+            onRowClick: onRowClick,
+            rowClickCallOrder: rowClickCallOrder,
+            renderRowContent: renderRowContent,
             children: [
-                isLoading && /*#__PURE__*/ jsx("div", {
-                    className: Table_module.spinner,
-                    "data-test-id": `${dataTestId}-spinner`
-                }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: cn(Table_module.tableWrapper, wrapperClassName ?? ''),
-                    ref: tableWrapperRef,
-                    "data-test-id": dataTestId,
-                    "data-dnd-dragging": isDragging || void 0,
-                    style: fullHeight ? {
-                        height: maxHeight,
-                        minHeight
-                    } : {},
+                    className: Table_module.container,
                     children: [
-                        /*#__PURE__*/ jsxs("table", {
-                            ref: tableRef,
-                            style: columnSizeVars,
-                            className: cn(Table_module.table, className ?? ''),
-                            "data-row-height": rowSize,
-                            children: [
-                                /*#__PURE__*/ jsx(Header, {
-                                    headerGroups: headerGroups,
-                                    style: headerStyle
-                                }),
-                                /*#__PURE__*/ jsx(Body, {
-                                    columnVisibility: table.getState().columnVisibility,
-                                    rows: rows,
-                                    isLoading: isLoading,
-                                    rowSelection: table.getState().rowSelection,
-                                    dndConfig: dndConfig,
-                                    renderRowContent: renderRowContent,
-                                    onRowClick: onRowClick,
-                                    getRowHighlightColor: getRowHighlightColor
-                                })
-                            ]
+                        isLoading && /*#__PURE__*/ jsx("div", {
+                            className: Table_module.spinner,
+                            "data-test-id": `${dataTestId}-spinner`
                         }),
-                        (hasFooters || pagination || isTotalsToggleVisible) && /*#__PURE__*/ jsx("table", {
-                            style: columnSizeVars,
-                            className: cn(Table_module.table, Table_module.footerTable, className ?? ''),
-                            "data-row-height": rowSize,
-                            children: /*#__PURE__*/ jsx(Footer, {
-                                footerGroups: footerGroups,
-                                isEmptyFooter: isTotalsToggleVisible,
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: Table_module.footerControlBar,
+                        /*#__PURE__*/ jsx("div", {
+                            ref: tableWrapperRef,
+                            className: cn(Table_module.tableWrapper, wrapperClassName),
+                            style: tableWrapperStyles,
+                            "data-test-id": dataTestId,
+                            "data-dnd-dragging": isDragging || void 0,
+                            children: isVirtualization ? /*#__PURE__*/ jsx(VirtualTable, {
+                                footerContent: footerContent,
+                                overscan: overscan,
+                                rangeChanged: rangeChanged,
+                                ...virtualTableProps
+                            }) : /*#__PURE__*/ jsx(Fragment, {
+                                children: /*#__PURE__*/ jsxs("table", {
+                                    "data-row-height": rowSize,
+                                    style: columnSizeVars,
+                                    className: cn(Table_module.table, className),
                                     children: [
-                                        pagination,
-                                        isTotalsToggleVisible && /*#__PURE__*/ jsx(TotalsToggle, {
-                                            onClick: footerToggleConfig.handleOnShow,
-                                            label: footerToggleConfig.label,
-                                            testId: `${dataTestId}-totals-toggle`
+                                        /*#__PURE__*/ jsx("thead", {
+                                            className: Table_module.thead,
+                                            style: headerStyle,
+                                            children: /*#__PURE__*/ jsx(HeaderContent, {})
+                                        }),
+                                        /*#__PURE__*/ jsx(Body, {
+                                            isLoading: isLoading,
+                                            rows: rows,
+                                            columnVisibility: columnVisibility,
+                                            columnIds: columnIds,
+                                            rowSelection: rowSelection,
+                                            children: rows.map((row)=>/*#__PURE__*/ jsx(TableRow, {
+                                                    row: row
+                                                }, row.id))
+                                        }),
+                                        footerContent && /*#__PURE__*/ jsx("tfoot", {
+                                            className: Table_module.tfoot,
+                                            children: footerContent
                                         })
                                     ]
                                 })

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

@@ -3,6 +3,8 @@ const Table_module = {
     container: "container-Aa44t5",
     tableWrapper: "tableWrapper-alPFf4",
     table: "table-ltDBYw",
+    thead: "thead-KKRmHF",
+    tfoot: "tfoot-YTLtwD",
     footerTable: "footerTable-__XFnr",
     footerControlBar: "footerControlBar-JmhT5T",
     spinner: "spinner-MztZm2",

package/dist/data-grid/Table/Table_module.css

@@ -47,6 +47,29 @@
   --cell-padding-bottom: 2px;
 }
 
+.thead-KKRmHF {
+  z-index: 1;
+  background: var(--light-white);
+  position: sticky;
+  inset-block-start: 0;
+}
+
+.thead-KKRmHF:after {
+  background: var(--light-grey-400);
+  content: "";
+  width: 100%;
+  height: 1px;
+  position: absolute;
+}
+
+.tfoot-YTLtwD {
+  box-shadow: 0 -1px 0 0 var(--light-grey-400),0 2px 0 0 var(--light-white);
+  background-color: var(--light-white);
+  margin-top: auto;
+  position: sticky;
+  inset-block-end: 0;
+}
+
 .footerTable-__XFnr {
   margin-top: auto;
   position: sticky;

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

@@ -1,17 +1,13 @@
-import { type ReactNode } from 'react';
+import { type PropsWithChildren } from 'react';
 import type { Row, VisibilityState } from '@tanstack/react-table';
-import type { DnDConfig, WithRowClickLink } from '../../types';
-import { type HighlightedRowColor } from '../TableRow/TableRow';
-type Props<T extends WithRowClickLink> = {
-    rows: Row<T>[];
+import type { WithRowClickLink } from '../../types';
+export type Props<T extends WithRowClickLink> = PropsWithChildren<{
     isLoading: boolean;
-    rowSelection?: Record<string, boolean>;
-    columnVisibility?: VisibilityState;
-    dndConfig?: DnDConfig;
-    renderRowContent?: (row: Row<T>) => ReactNode;
-    getRowHighlightColor?: (row: Row<T>) => HighlightedRowColor | undefined;
-    onRowClick?: (row: Row<T>) => void;
-};
-export declare const BodyComponent: <T extends WithRowClickLink>({ rows, isLoading, dndConfig, renderRowContent, getRowHighlightColor, onRowClick, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+    rowSelection: Record<string, boolean>;
+    columnVisibility: VisibilityState;
+    columnIds: string[];
+    rows: Row<T>[];
+}>;
+export declare function areEqual<T extends WithRowClickLink>(prevProps: Props<T>, nextProps: Props<T>): boolean;
+export declare const BodyComponent: <T extends WithRowClickLink>({ children, isLoading, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const Body: <T extends WithRowClickLink>(props: Props<T>) => JSX.Element;
-export {};

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

@@ -1,56 +1,20 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as external_react_Fragment, memo } from "react";
-import lodash_isequal from "lodash.isequal";
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { cn } from "../../../../common/css/cn.js";
-import { SubRows } from "../SubRows/SubRows.js";
-import { TableCell } from "../TableCell/TableCell.js";
-import { TableRow } from "../TableRow/TableRow.js";
-import { TableSpacerCell } from "../TableSpacerCell/TableSpacerCell.js";
+import { isRecordEqual } from "../../../../utils/index.js";
+import { compareColumnIds } from "../../utils/index.js";
 import Body_module from "./Body.module.js";
 function areEqual(prevProps, nextProps) {
     const isLoadingEqual = prevProps.isLoading === nextProps.isLoading;
     const isRowsEqual = Object.is(prevProps.rows, nextProps.rows);
-    const isColumnVisibilityEqual = lodash_isequal(prevProps.columnVisibility, nextProps.columnVisibility);
-    const isSelectionEqual = lodash_isequal(prevProps.rowSelection, nextProps.rowSelection);
-    const isRowHighlightEqual = prevProps.getRowHighlightColor === nextProps.getRowHighlightColor;
-    return isLoadingEqual && isRowsEqual && isSelectionEqual && isColumnVisibilityEqual && isRowHighlightEqual;
+    const isColumnVisibilityEqual = isRecordEqual(prevProps.columnVisibility, nextProps.columnVisibility);
+    const isSelectionEqual = isRecordEqual(prevProps.rowSelection, nextProps.rowSelection);
+    const isColumnsListEqual = compareColumnIds(prevProps.columnIds, nextProps.columnIds);
+    return isLoadingEqual && isRowsEqual && isSelectionEqual && isColumnVisibilityEqual && isColumnsListEqual;
 }
-const BodyComponent = ({ rows, isLoading, dndConfig, renderRowContent, getRowHighlightColor, onRowClick })=>{
-    const getRowClickHandler = (row)=>(e)=>{
-            const cellText = document.getSelection();
-            if (cellText && 'Range' === cellText.type) return e.stopPropagation();
-            onRowClick?.(row);
-            if ('function' == typeof row.original?.onRowClick) return row.original.onRowClick();
-        };
-    return /*#__PURE__*/ jsx("tbody", {
+const BodyComponent = ({ children, isLoading })=>/*#__PURE__*/ jsx("tbody", {
         className: cn(isLoading && Body_module.active),
-        children: rows.map((row)=>/*#__PURE__*/ jsxs(external_react_Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(TableRow, {
-                        getRowHighlightColor: getRowHighlightColor,
-                        row: row,
-                        dndConfig: dndConfig,
-                        onClick: getRowClickHandler(row),
-                        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))
+        children: children
     });
-};
 const Body = /*#__PURE__*/ memo(BodyComponent, areEqual);
-export { Body, BodyComponent };
+export { Body, BodyComponent, areEqual };

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

@@ -15,10 +15,10 @@ const DraggableRowComponent = ({ row, children, className, draggingZIndex = 10,
         zIndex: isDragging ? draggingZIndex : void 0
     };
     return /*#__PURE__*/ jsx("tr", {
+        "data-is-dragging": isDragging,
         ...restProps,
         ref: setNodeRef,
         style: style,
-        "data-is-dragging": isDragging,
         className: cn(className, DraggableRow_module.draggableRow, isDragging && DraggableRow_module.dragging),
         children: children
     });

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

@@ -1,6 +1,5 @@
 import "./Footer_module.css";
 const Footer_module = {
-    tableFoot: "tableFoot-wZHDlK",
     tableFootRow: "tableFootRow-Hsy6XO",
     noPadding: "noPadding-OmAUxA"
 };

package/dist/data-grid/Table/components/Footer/FooterContent.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+import { type HeaderGroup } from '@tanstack/react-table';
+type Props<T> = {
+    footerGroups: HeaderGroup<T>[];
+    isEmptyFooter?: boolean;
+};
+export declare const FooterContentComponent: <T>({ footerGroups, isEmptyFooter, children, }: PropsWithChildren<Props<T>>) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterContent: <T>(props: PropsWithChildren<Props<T>>) => JSX.Element;
+export {};

package/dist/data-grid/Table/components/Footer/{Footer.js → FooterContent.js}

@@ -1,11 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { flexRender } from "@tanstack/react-table";
 import { getColumnWidthStyles } from "../../utils/index.js";
 import { TableSpacerCell } from "../TableSpacerCell/TableSpacerCell.js";
 import Footer_module from "./Footer.module.js";
-const FooterComponent = ({ footerGroups, isEmptyFooter = false, children })=>/*#__PURE__*/ jsxs("tfoot", {
-        className: Footer_module.tableFoot,
+const FooterContentComponent = ({ footerGroups, isEmptyFooter = false, children })=>/*#__PURE__*/ jsxs(Fragment, {
         children: [
             footerGroups.map((footerGroup)=>/*#__PURE__*/ jsxs("tr", {
                     className: Footer_module.tableFootRow,
@@ -35,5 +34,5 @@ const FooterComponent = ({ footerGroups, isEmptyFooter = false, children })=>/*#
             })
         ]
     });
-const Footer = /*#__PURE__*/ memo(FooterComponent);
-export { Footer, FooterComponent };
+const FooterContent = /*#__PURE__*/ memo(FooterContentComponent);
+export { FooterContent, FooterContentComponent };

package/dist/data-grid/Table/components/Footer/Footer_module.css

@@ -1,8 +1,3 @@
-.tableFoot-wZHDlK {
-  box-shadow: 0 -1px 0 0 var(--light-grey-400),0 2px 0 0 var(--light-white);
-  background-color: var(--light-white);
-}
-
 .tableFootRow-Hsy6XO {
   height: 32px;
 }

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

@@ -1,6 +1,5 @@
 import "./Header_module.css";
 const Header_module = {
-    head: "head-VWzWMr",
     tableHead: "tableHead-GJzEFt",
     resizer: "resizer-UPOmzG"
 };

package/dist/data-grid/Table/components/Header/HeaderCell.js

@@ -1,12 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { flexRender } from "@tanstack/react-table";
+import { getColumnDefMeta } from "../../../headers/index.js";
 import { useColumnResizeHandler } from "../../hooks/index.js";
 import { getColumnWidthStyles } from "../../utils/index.js";
 import Header_module from "./Header.module.js";
 const HeaderCell = ({ header })=>{
     const { id, column } = header;
+    const { isHidden } = getColumnDefMeta(column);
+    const isEnabledResize = column.getCanResize() && !isHidden;
     const resizeHandler = useColumnResizeHandler(header);
-    const isEnabledResize = column.getCanResize();
     const sizeStyles = getColumnWidthStyles({
         column
     });

package/dist/data-grid/Table/components/Header/HeaderContent.d.ts

@@ -0,0 +1 @@
+export declare const HeaderContent: <T>() => import("react/jsx-runtime").JSX.Element;

package/dist/data-grid/Table/components/Header/{Header.js → HeaderContent.js}

@@ -1,10 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTableContext } from "../../hooks/index.js";
 import { TableSpacerCell } from "../TableSpacerCell/TableSpacerCell.js";
 import { HeaderCell } from "./HeaderCell.js";
-import Header_module from "./Header.module.js";
-const Header = ({ headerGroups, style })=>/*#__PURE__*/ jsx("thead", {
-        style: style,
-        className: Header_module.head,
+const HeaderContent = ()=>{
+    const { table } = useTableContext();
+    const headerGroups = table.getHeaderGroups();
+    return /*#__PURE__*/ jsx(Fragment, {
         children: headerGroups.map((headerGroup)=>/*#__PURE__*/ jsxs("tr", {
                 children: [
                     headerGroup.headers.map((header)=>/*#__PURE__*/ jsx(HeaderCell, {
@@ -17,4 +18,5 @@ const Header = ({ headerGroups, style })=>/*#__PURE__*/ jsx("thead", {
                 ]
             }, headerGroup.id))
     });
-export { Header };
+};
+export { HeaderContent };

package/dist/data-grid/Table/components/Header/Header_module.css

@@ -1,18 +1,3 @@
-.head-VWzWMr {
-  z-index: 1;
-  background: var(--light-white);
-  position: sticky;
-  inset-block-start: 0;
-}
-
-.head-VWzWMr:after {
-  background: var(--light-grey-400);
-  content: "";
-  width: 100%;
-  height: 1px;
-  position: absolute;
-}
-
 .tableHead-GJzEFt {
   height: 32px;
   padding: 0;