@hazelcast/ui 1.3.3-next.3 → 1.3.3-next.31

package/lib/Table/Cell.module.scss

@@ -1,17 +1,22 @@
+@use 'sass:color';
 @use '../../styles/constants' as c;
 @use '../../styles/helpers' as h;
 
 .td {
   position: relative;
   display: flex;
+  box-sizing: border-box;
   align-items: center;
-  height: c.$grid * 7.5;
+  height: c.$grid * 6;
   padding-right: c.$grid * 5;
   padding-left: c.$grid * 5;
   color: c.$colorText;
   background-color: inherit;
+  flex-grow: 1;
+  flex-basis: auto;
+  flex-shrink: 0;
+  font-family: 'Ubuntu Mono', monospace;
 
-  @include c.typographyBodySmall;
   @include h.overflowEllipsis;
 
   &.alignLeft {
@@ -27,16 +32,16 @@
   }
 
   &.selected {
-    background: lighten((c.$colorPrimary), 30) !important;
+    background: color.adjust(c.$colorPrimary, $lightness: 30%) !important;
   }
 
   &:not(:last-of-type) {
-    border-right: c.$borderWidth solid c.$colorNeutral;
+    border-right: c.$borderWidth solid c.$colorNeutralWhite;
   }
 }
 
 .warningIcon {
-  color: c.$colorWarningLight;
+  color: c.$colorWarningDark;
 
   &.left {
     margin-left: c.$grid * 2;
@@ -50,3 +55,7 @@
 .selectable {
   user-select: none;
 }
+
+.truncated {
+  font-family: 'Ubuntu Mono', monospace;
+}

package/lib/Table/CellWrapper.d.ts

@@ -1,11 +1,11 @@
-import { RefObject } from 'react';
-import { ColumnInterface, ColumnInterfaceBasedOnValue, Cell, UseResizeColumnsState } from 'react-table';
+import { CSSProperties, RefObject } from 'react';
+import { Cell } from '@tanstack/react-table';
 import { CellProps } from './Cell';
-export type CellWrapperProps<D extends object> = CellProps & {
-    cell: Cell<D>;
+import { RowData } from './tableTypes';
+export type CellWrapperProps<D extends RowData> = CellProps & {
+    cell: Cell<D, unknown>;
     selectable?: boolean;
-    column?: ColumnInterface<D> & ColumnInterfaceBasedOnValue;
+    style: CSSProperties;
     selectedColumnValuesRef?: RefObject<(string | undefined)[][]>;
-    columnResizing: UseResizeColumnsState<D>['columnResizing'];
 };
 export declare const CellWrapper: <D extends object>(props: CellWrapperProps<D>) => JSX.Element;

package/lib/Table/CellWrapper.js

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
+import { flexRender } from '@tanstack/react-table';
 import { ROW_EXPANDER_COLUMN_ID } from './constants';
 import { Cell as TableCell } from './Cell';
-import { EnhancedCellRenderer } from './EnhancedRenderers';
 export const CellWrapper = (props) => {
-    const { selectable, column, cell, columnResizing, selectedColumnValuesRef, onClickSelection, onMouseEnterSelection, selectionStartedRef, ...rest } = props;
-    const isSelectable = selectable && (column === null || column === void 0 ? void 0 : column.id) !== ROW_EXPANDER_COLUMN_ID;
+    var _a;
+    const { selectable, cell, selectedColumnValuesRef, onClickSelection, onMouseEnterSelection, selectionStartedRef, ...rest } = props;
+    const isSelectable = selectable && ((_a = cell.column) === null || _a === void 0 ? void 0 : _a.id) !== ROW_EXPANDER_COLUMN_ID;
     useEffect(() => {
         if (rest.cellId) {
             const [rowIndex, cellIndex] = rest.cellId.split(':');
@@ -12,7 +13,7 @@ export const CellWrapper = (props) => {
                 if (rest.selected) {
                     const row = selectedColumnValuesRef.current[Number(rowIndex)];
                     if (row) {
-                        row[Number(cellIndex)] = typeof cell.value !== 'object' ? String(cell.value) : '';
+                        row[Number(cellIndex)] = typeof cell.getValue() !== 'object' ? String(cell.getValue()) : '';
                     }
                 }
                 else {
@@ -23,7 +24,6 @@ export const CellWrapper = (props) => {
             }
         }
     }, [rest, cell, selectedColumnValuesRef]);
-    const content = column ? (React.createElement(EnhancedCellRenderer, { cell: cell, hasCellRenderer: !!column.Cell, columnResizing: columnResizing })) : (cell.render('Cell'));
-    return (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, content));
+    return (React.createElement(TableCell, { onClickSelection: isSelectable ? onClickSelection : undefined, selectionStartedRef: isSelectable ? selectionStartedRef : undefined, onMouseEnterSelection: isSelectable ? onMouseEnterSelection : undefined, ...rest }, flexRender(cell.column.columnDef.cell, cell.getContext())));
 };
 //# sourceMappingURL=CellWrapper.js.map

package/lib/Table/CellWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../src/Table/CellWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAGnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAa,IAAI,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAU1D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,KAA0B,EAAE,EAAE;IAC1E,MAAM,EACJ,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,YAAY,GAAG,UAAU,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,MAAK,sBAAsB,CAAA;IAExE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAA;YAExE,IAAI,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,EAAE;gBACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,MAAM,GAAG,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;oBAC7D,IAAI,GAAG,EAAE;wBACP,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;qBAClF;iBACF;qBAAM;oBACL,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE;wBAC7H,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;qBACjF;iBACF;aACF;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,CACvB,oBAAC,oBAAoB,IAAC,IAAI,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,cAAc,GAAI,CACrG,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CACpB,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7D,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACnE,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,KACnE,IAAI,IAEP,OAAO,CACE,CACb,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../src/Table/CellWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,EAAQ,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AACpD,OAAO,EAAa,IAAI,IAAI,SAAS,EAAE,MAAM,QAAQ,CAAA;AAUrD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAmB,KAA0B,EAAE,EAAE;;IAC1E,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAElI,MAAM,YAAY,GAAG,UAAU,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,EAAE,MAAK,sBAAsB,CAAA;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAA;YAExE,IAAI,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,EAAE;gBACpC,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,MAAM,GAAG,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;oBAC7D,IAAI,GAAG,EAAE;wBACP,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;qBAC5F;iBACF;qBAAM;oBACL,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE;wBAC7H,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;qBACjF;iBACF;aACF;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,uBAAuB,CAAC,CAAC,CAAA;IAEzC,OAAO,CACL,oBAAC,SAAS,IACR,gBAAgB,EAAE,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7D,mBAAmB,EAAE,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACnE,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,KACnE,IAAI,IAEP,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAChD,CACb,CAAA;AACH,CAAC,CAAA"}

package/lib/Table/EnhancedRenderers.d.ts

@@ -1,5 +1,5 @@
-import { ReactText } from 'react';
-import { Cell as CellType, HeaderGroup, UseResizeColumnsState } from 'react-table';
+/// <reference types="react" />
+import { Cell as CellType, HeaderContext } from '@tanstack/react-table';
 /**
  * Few notes about text truncation:
  * We try to enhance Header, Footer and Cell with text truncation and a tooltip using TruncatedText.
@@ -10,14 +10,12 @@ import { Cell as CellType, HeaderGroup, UseResizeColumnsState } from 'react-tabl
  * Here's how react-table renderers are made: https://github.com/tannerlinsley/react-table/blob/6e2fe31ac028e543ce0f9d56168d5f922389fbbc/src/publicUtils.js#L199
  */
 export type EnhancedHeaderFooterRendererProps<D extends object> = {
-    column: HeaderGroup<D>;
-    columnResizing: UseResizeColumnsState<D>['columnResizing'];
-    type: 'Header' | 'Footer';
+    context: HeaderContext<D, unknown>;
+    type: 'header' | 'footer';
 };
-export declare const EnhancedHeaderFooterRenderer: <D extends object>({ column, columnResizing, type }: EnhancedHeaderFooterRendererProps<D>) => JSX.Element;
+export declare const EnhancedHeaderFooterRenderer: <D extends object>({ context, type }: EnhancedHeaderFooterRendererProps<D>) => JSX.Element;
 export type EnhancedCellRendererProps<D extends object> = {
-    cell: CellType<D, ReactText>;
-    hasCellRenderer: boolean;
-    columnResizing: UseResizeColumnsState<D>['columnResizing'];
+    cell: CellType<D, unknown>;
+    columnResizing: boolean;
 };
-export declare const EnhancedCellRenderer: <D extends object>({ cell, hasCellRenderer, columnResizing }: EnhancedCellRendererProps<D>) => JSX.Element;
+export declare const EnhancedCellRenderer: <D extends object>({ cell, columnResizing }: EnhancedCellRendererProps<D>) => JSX.Element;

package/lib/Table/EnhancedRenderers.js

@@ -1,16 +1,13 @@
 import React from 'react';
+import { flexRender } from '@tanstack/react-table';
 import { TruncatedText } from '../TruncatedText';
-export const EnhancedHeaderFooterRenderer = ({ column, columnResizing, type }) => {
-    const value = column[type];
+import styles from './Cell.module.scss';
+export const EnhancedHeaderFooterRenderer = ({ context, type }) => {
+    const value = context.column.columnDef[type];
     if (typeof value === 'string') {
-        return React.createElement(TruncatedText, { text: value, forceUpdateToken: columnResizing.isResizingColumn });
+        return React.createElement(TruncatedText, { text: value, forceUpdateToken: context.column.getIsResizing() });
     }
-    return column.render(type);
-};
-export const EnhancedCellRenderer = ({ cell, hasCellRenderer, columnResizing }) => {
-    if (hasCellRenderer) {
-        return cell.render('Cell');
-    }
-    return React.createElement(TruncatedText, { text: cell.value, forceUpdateToken: columnResizing.isResizingColumn });
+    return React.createElement(React.Fragment, null, flexRender(value, context));
 };
+export const EnhancedCellRenderer = ({ cell, columnResizing }) => (React.createElement(TruncatedText, { text: cell.renderValue(), forceUpdateToken: columnResizing, tooltipClassName: styles.truncated }));
 //# sourceMappingURL=EnhancedRenderers.js.map

package/lib/Table/EnhancedRenderers.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../src/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAkBhD,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAmB,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAwC,EAAE,EAAE;IACvI,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC1B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,GAAI,CAAA;KACzF;IAED,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAiB,CAAA;AAC5C,CAAC,CAAA;AAQD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAmB,EAAE,IAAI,EAAE,eAAe,EAAE,cAAc,EAAgC,EAAE,EAAE;IAChI,IAAI,eAAe,EAAE;QACnB,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAiB,CAAA;KAC3C;IAED,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,GAAI,CAAA;AAC/F,CAAC,CAAA"}
+{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../src/Table/EnhancedRenderers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,UAAU,EAAiB,MAAM,uBAAuB,CAAA;AAEnF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAiBvC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAmB,EAAE,OAAO,EAAE,IAAI,EAAwC,EAAE,EAAE;IACxH,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAE5C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,GAAI,CAAA;KACxF;IAED,OAAO,0CAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAI,CAAA;AAC1C,CAAC,CAAA;AAOD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAmB,EAAE,IAAI,EAAE,cAAc,EAAgC,EAAE,EAAE,CAAC,CAChH,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,EAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,CAAC,SAAS,GAAI,CAC5H,CAAA"}

package/lib/Table/Header.d.ts

@@ -1,5 +1,4 @@
-import { FC, MouseEvent, KeyboardEvent, DragEvent } from 'react';
-import { TableHeaderProps, TableResizerProps } from 'react-table';
+import React, { MouseEvent, KeyboardEvent, DragEvent, CSSProperties } from 'react';
 export type HeaderProps = {
     /**
      * Number fields should be right aligned as that allows
@@ -13,9 +12,14 @@ export type HeaderProps = {
     onClick?: (event: MouseEvent | KeyboardEvent) => void;
     canResize: boolean;
     isResizing: boolean;
-    getResizerProps: (props?: Partial<TableResizerProps>) => TableResizerProps;
+    size?: number;
     index: number;
+    style?: CSSProperties;
+    role: string;
+    className?: string;
+    children?: React.ReactNode;
+    resizeHandler: (e: unknown) => void;
     onDragStart?: (e: DragEvent) => void;
     onDrop?: (e: DragEvent, index: number) => void;
-} & Omit<TableHeaderProps, 'key'>;
-export declare const Header: FC<HeaderProps>;
+};
+export declare const Header: ({ align, colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, onClick, style, className, role, index, size, onDragStart, onDrop, resizeHandler, }: HeaderProps) => JSX.Element;

package/lib/Table/Header.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import { Icon } from '../Icon';
 import { keyIsOneOf } from '../utils/keyboard';
 import styles from './Header.module.scss';
-export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, getResizerProps, onClick, style, className, role, index, onDragStart, onDrop, }) => {
+export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, onClick, style, className, role, index, size, onDragStart, onDrop, resizeHandler, }) => {
     const rootRef = useRef(null);
     const isDragStarterRef = useRef(false);
     const counterRef = useRef(0);
@@ -13,13 +13,13 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
     if (isSorted) {
         ariaSort = isSortedDesc ? 'descending' : 'ascending';
     }
-    const Chevron = useMemo(() => (React.createElement(Icon, { className: cn(styles.sortingIcon, {
+    const Chevron = useMemo(() => (React.createElement(Icon, { "data-test": "chevron", className: cn(styles.sortingIcon, {
             [styles.left]: align === 'left',
             [styles.right]: align === 'right',
             [styles.isSorted]: isSorted,
         }), icon: !isSorted ? ChevronUp : isSortedDesc ? ChevronDown : ChevronUp, ariaLabel: !isSorted ? 'Not Sorted' : isSortedDesc ? 'Descending' : 'Ascending', size: "smallMedium" })), [align, isSorted, isSortedDesc]);
     const DraggableIcon = (React.createElement(Icon, { icon: Menu, size: "small", ariaLabel: "draggable-indicator", className: cn(styles.dragIcon, { [styles.dragIconRight]: align === 'right' }) }));
-    const onKeyPress = useCallback((event) => {
+    const onKeyDown = useCallback((event) => {
         event.preventDefault();
         if (keyIsOneOf(event, 'Enter') && onClick) {
             onClick(event);
@@ -28,10 +28,13 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
     const buttonRoleProps = {
         tabIndex: onClick ? 0 : undefined,
         role: onClick ? 'button' : undefined,
-        onKeyPress: onClick ? onKeyPress : undefined,
+        onKeyDown: onClick ? onKeyDown : undefined,
         onClick,
     };
-    return (React.createElement("div", { ref: rootRef, "data-test": "table-header-container", className: cn(styles.container, className), style: style, role: role, "aria-colspan": colSpan, "aria-sort": ariaSort },
+    return (React.createElement("div", { ref: rootRef, "data-test": "table-header-container", className: cn(styles.container, className), style: {
+            ...style,
+            ...(size != null ? { width: size } : {}),
+        }, role: role, "aria-colspan": colSpan, "aria-sort": ariaSort },
         React.createElement("div", { draggable: draggable, "data-test": "table-header-content", className: cn(styles.th, {
                 [styles.sortable]: canSort,
                 [styles.alignLeft]: align === 'left',
@@ -75,8 +78,10 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
             children,
             canSort && (align === 'left' || align === 'center') && Chevron,
             draggable && (align === 'left' || align === 'center') && DraggableIcon),
-        canResize && (React.createElement("div", { "data-test": "table-header-column-resizer-container", className: styles.resizer, ...getResizerProps() },
-            React.createElement("div", { "data-test": "table-header-column-resizer", className: cn(styles.separator, {
+        canResize && (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        React.createElement("div", { "data-test": "table-header-column-resizer-container", className: styles.resizer, onMouseDown: resizeHandler, onTouchStart: resizeHandler },
+            React.createElement("div", { "data-test": "table-header-column-resizer", className: cn('resizer', styles.separator, {
                     [styles.resizing]: isResizing,
                 }) })))));
 };

package/lib/Table/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/Table/Header.tsx"],"names":[],"mappings":"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"}

package/lib/Table/Header.module.scss

@@ -6,10 +6,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: c.$grid * 5;
+  width: 20px;
   height: 100%;
   top: 0;
-  right: -(c.$grid * 2.5);
+  right: -10px;
   z-index: c.$zIndex100;
   cursor: col-resize;
   user-select: none;
@@ -20,9 +20,8 @@
   /* doiuse-enable css-touch-action */
 
   .separator {
-    width: 2px;
-    height: 50%;
-    background: c.$colorNeutral;
+    width: 1px;
+    height: 100%;
   }
 
   .resizing,
@@ -33,14 +32,20 @@
 
 .container {
   position: relative;
+  flex-grow: 1;
+  flex-basis: auto;
+  flex-shrink: 0;
+  background: c.$colorNeutralGray;
+  border-right: 1px solid c.$colorNeutralWhite;
 
   .th {
     display: flex;
     align-items: center;
-    height: c.$grid * 7.5;
+    height: c.$grid * 12;
     padding-left: c.$grid * 5;
     padding-right: c.$grid * 5;
     color: c.$colorText;
+    box-sizing: border-box;
 
     @include c.typographyBodySmall('bold');
     @include h.overflowEllipsis;
@@ -78,7 +83,7 @@
       }
 
       &:hover {
-        background-color: c.$colorNeutralLighter;
+        background-color: c.$colorNeutralGrayDarker;
       }
     }
 

package/lib/Table/Row.d.ts

@@ -1,6 +1,8 @@
-import { FC, AnchorHTMLAttributes } from 'react';
-import { TableHeaderGroupProps } from 'react-table';
-type RowBase = Omit<TableHeaderGroupProps, 'key'> & {
+import { FC, AnchorHTMLAttributes, CSSProperties } from 'react';
+type RowBase = {
+    className?: string;
+    style?: CSSProperties;
+    role?: string;
     ariaRowIndex?: number;
 };
 export type RowProps = RowBase & {

package/lib/Table/Row.js

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import cn from 'classnames';
-import styles from './Row.module.scss';
 import { useUID } from 'react-uid';
 import { keyIsOneOf } from '../utils/keyboard';
+import styles from './Row.module.scss';
 export const Row = ({ children, className, style, role, ariaRowIndex, onClick }) => {
-    const onKeyPress = useCallback((event) => {
+    const onKeyDown = useCallback((event) => {
         event.preventDefault();
         if (keyIsOneOf(event, 'Enter') && onClick) {
             onClick();
@@ -12,7 +12,7 @@ export const Row = ({ children, className, style, role, ariaRowIndex, onClick })
     }, [onClick]);
     return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.row, {
             [styles.clickable]: !!onClick,
-        }, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined, onKeyPress: onClick ? onKeyPress : undefined, onClick: onClick }, children));
+        }, className), style: style, "aria-rowindex": ariaRowIndex, role: role, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? onKeyDown : undefined, onClick: onClick }, children));
 };
 // eslint-disable-next-line jsx-a11y/anchor-has-content
 const DefaultAnchor = (props) => React.createElement("a", { ...props });
@@ -21,5 +21,5 @@ export const LinkRow = ({ children, className, style, role, ariaRowIndex, href,
     return (React.createElement("div", { "data-test": "table-cell-row", className: cn(styles.linkRow, className), role: role, "aria-rowindex": ariaRowIndex, "aria-owns": anchorId },
         React.createElement(AnchorComponent, { className: styles.link, style: style, href: href, id: anchorId }, children)));
 };
-export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.headerRow, className), style: style, role: role, "aria-rowindex": ariaRowIndex }, children));
+export const HeaderRow = ({ children, className, style, role, ariaRowIndex }) => (React.createElement("div", { "data-test": "table-header-row", className: cn(styles.row, className), style: style, role: role, "aria-rowindex": ariaRowIndex }, children));
 //# sourceMappingURL=Row.js.map

package/lib/Table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAuC,MAAM,OAAO,CAAA;AACnF,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAO9C,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/F,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAoC,EAAE,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,OAAO,EAAE;YACzC,OAAO,EAAE,CAAA;SACV;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,0CACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,GAAG,EACV;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;SAC9B,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,mBACG,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC5C,OAAO,EAAE,OAAO,IAEf,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,uDAAuD;AACvD,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,GAAG,aAAa,EAAE,EAAE,EAAE;IACrI,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAA;IAEzB,OAAO,CACL,0CAAe,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,eAAa,QAAQ;QACpI,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,IAC5E,QAAQ,CACO,CACd,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACnG,0CAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,IAChI,QAAQ,CACL,CACP,CAAA"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,WAAW,EAAsD,MAAM,OAAO,CAAA;AAClG,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAOtC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE;IAC/F,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,KAAoC,EAAE,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,OAAO,EAAE;YACzC,OAAO,EAAE,CAAA;SACV;IACH,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IAED,OAAO,CACL,0CACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,GAAG,EACV;YACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO;SAC9B,EACD,SAAS,CACV,EACD,KAAK,EAAE,KAAK,mBACG,YAAY,EAC3B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,OAAO,IAEf,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,uDAAuD;AACvD,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,eAAe,GAAG,aAAa,EAAE,EAAE,EAAE;IACrI,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAA;IAEzB,OAAO,CACL,0CAAe,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,eAAa,QAAQ;QACpI,oBAAC,eAAe,IAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,IAC5E,QAAQ,CACO,CACd,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CACnG,0CAAe,kBAAkB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,mBAAiB,YAAY,IAC1H,QAAQ,CACL,CACP,CAAA"}

package/lib/Table/Row.module.scss

@@ -2,11 +2,16 @@
 @use '../../styles/helpers' as h;
 
 @mixin rowBase {
-  background-color: c.$colorNeutralLighter;
-  margin-bottom: c.$grid * 1.25;
+  display: flex;
+  width: 100%;
+
+  &:nth-child(even) {
+    background-color: c.$colorNeutralLighter;
+  }
 }
 
 .row {
+  @include c.typographyBodySmall;
   @include rowBase;
 
   &.clickable {
@@ -18,23 +23,24 @@
       // Do not remove outline for high-contrast modes
       // https://stackoverflow.com/a/52616313
       outline: c.$outlineWidth solid transparent;
-      background-color: c.$colorInfoLight;
+      background-color: #e2e7fa;
     }
 
     &:hover {
-      background-color: c.$colorInfoLight;
+      font-weight: bold;
+      background-color: #e2e7fa;
     }
   }
 }
 
 .linkRow {
-  @include rowBase;
-
   cursor: pointer;
+  @include rowBase;
 
   .link {
     text-decoration: none;
     background-color: inherit;
+    @include rowBase;
 
     &:focus-visible {
       @include h.outlineSimple;
@@ -42,15 +48,12 @@
       // Do not remove outline for high-contrast modes
       // https://stackoverflow.com/a/52616313
       outline: c.$outlineWidth solid transparent;
-      background-color: c.$colorInfoLight;
+      background-color: #e2e7fa;
     }
 
     &:hover {
-      background-color: c.$colorInfoLight;
+      font-weight: bold;
+      background-color: #e2e7fa;
     }
   }
 }
-
-.headerRow {
-  margin-bottom: c.$grid * 1.25;
-}

package/lib/Table/Table.d.ts

@@ -1,34 +1,11 @@
 import { DataTestProp } from '@hazelcast/helpers';
 import { AnchorHTMLAttributes, FC, ReactChild, ReactElement, ReactNode } from 'react';
-import { TableOptions, Row as RowType, Cell as CellType, Column as ColumnType, TableInstance, SortingRule } from 'react-table';
 import { PaginationProps } from '../Pagination';
 import { CellProps } from './Cell';
 import { RowProps } from './Row';
-export type { Accessor, Cell, Renderer, Row, CellProps, HeaderGroup, TableInstance, TableState } from 'react-table';
-export type Column<T extends object> = ColumnType<T> & {
-    canHide?: boolean;
-};
-declare module 'react-table' {
-    interface TableOptions<D extends object = {}> extends UsePaginationOptions<D & UseExpandedRowProps<D>>, UseSortByOptions<D>, UseFiltersOptions<D>, UseRowSelectOptions<D>, UseGroupByOptions<D>, UseExpandedOptions<D>, UseResizeColumnsOptions<D>, Record<string, any> {
-    }
-    interface Hooks<D extends object = {}> extends UseSortByHooks<D>, UseRowSelectHooks<D>, UseGroupByHooks<D> {
-    }
-    interface TableInstance<D extends object = {}> extends UsePaginationInstanceProps<D>, UseSortByInstanceProps<D>, UseFiltersInstanceProps<D>, UseRowSelectInstanceProps<D>, UseGroupByInstanceProps<D> {
-    }
-    interface TableState<D extends object = {}> extends UsePaginationState<D>, UseSortByState<D>, UseFiltersState<D>, UseRowSelectState<D>, UseGroupByState<D>, UseColumnOrderState<D>, UseResizeColumnsState<D> {
-    }
-    interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseGroupByColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
-        Footer?: string | Renderer<TableInstance<D>>;
-        align?: 'left' | 'right' | 'center';
-    }
-    interface ColumnInstance<D extends object = {}> extends UseSortByColumnProps<D>, UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D> {
-    }
-    interface Cell<D extends object = {}, V = any> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
-    }
-    interface Row<D extends object = {}> extends UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseExpandedRowProps<D> {
-    }
-}
+import { CellType, ColumnType, InitialState, RowData, RowType, SortingRule, TableState } from './tableTypes';
 export type PaginationOptions = Partial<Pick<PaginationProps, 'pageSizeOptions'>>;
+export * from './tableTypes';
 /**
  * `defaultPageSize` should be one of the values in `pageSizeOptions`.
  * If it's not it won't break anything but it is a bad UX
@@ -48,11 +25,10 @@ export type ControlledPaginationProps = {
     manualPagination?: boolean;
     onPaginationChange?: (paginationChangeProps: PaginationChangeProps) => void;
 };
-export type ControlledSortingProps<D extends object> = {
-    manualSortBy?: boolean;
-    onSortingChange?: (sortBy: SortingRule<D>[]) => void;
+export type ControlledSortingProps = {
+    onSortingChange?: (sortBy: SortingRule[]) => void;
 };
-type CustomTableRowClickProps<D extends object> = {
+type CustomTableRowClickProps<D extends RowData> = {
     onRowClick?: (rowInfo: RowType<D>) => void;
     getHref?: never;
     AnchorComponent?: never;
@@ -61,8 +37,9 @@ type CustomTableRowClickProps<D extends object> = {
     onRowClick?: never;
     AnchorComponent?: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
 };
-type CustomTableProps<D extends object> = {
+type CustomTableProps<D extends RowData> = {
     loading?: boolean;
+    tableId?: string;
     overlayLoading?: boolean;
     className?: string;
     hideHeader?: boolean;
@@ -75,18 +52,24 @@ type CustomTableProps<D extends object> = {
     getCustomRowProps?: (rowInfo: RowType<D>) => RowProps;
     getCustomCellProps?: (cellInfo: CellType<D>) => CellProps;
     onRenderedContentChange?: (newPage: RowType<D>[]) => void;
-    autoResetGlobalFilter?: boolean;
     pageIndex?: number;
     onPageChange?: (newPage: number) => void;
     onRowSelect?: (ids: string[]) => void;
     columnsOrdering?: boolean;
-    children?: (table: ReactElement, tableInstance: TableInstance<D>) => ReactElement;
+    children?: (table: ReactElement) => ReactElement;
     renderRowSubComponent?: (props: RowType<D>) => ReactNode;
-    canExpand?: (row: RowType<D>) => void;
+    canExpand?: (row: RowType<D>) => boolean;
     onCopy?: (data: (string | undefined)[][]) => void;
+    initialState?: InitialState;
+    onStateChange?: ((newState: TableState) => void) | null;
 } & CustomTableRowClickProps<D> & DataTestProp;
-export type TableProps<D extends object> = TableOptions<D> & ExtendedPaginationProps & ControlledPaginationProps & ControlledSortingProps<D> & CustomTableProps<D>;
-export type { ColumnType, RowType, CellType };
+export type TableProps<D extends RowData> = {
+    data: D[];
+    columns: ColumnType<D>[];
+    pageCount?: number;
+    disableSortBy?: boolean;
+    pageSize?: number;
+} & ExtendedPaginationProps & ControlledPaginationProps & ControlledSortingProps & CustomTableProps<D>;
 /**
  * ### Purpose
  * Table component allows to arrange data in rows and columns.
@@ -97,4 +80,6 @@ export type { ColumnType, RowType, CellType };
  * - Rows can be clickable. If you supply Table with `getHref` function rows will become <a> tags!
  * - Is able to resize columns out of the box
  */
-export declare const Table: <D extends object>({ "data-test": dataTest, autoResetSortBy, columns: propColumns, data, defaultColumn, disableSortBy, onPaginationChange, onSortingChange, manualPagination, manualSortBy, onRenderedContentChange, autoResetPage, hidePagination, pageCount: controlledPageCount, defaultPageSize, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle, pageIndex: incomingPageIndex, initialState, className, headerClassName, contentClassName, footerClassName, searchValue, hideHeader, autoResetGlobalFilter, onPageChange, overlayLoading, onRowSelect, columnsOrdering, autoResetResize, autoResetSelectedRows, children, renderRowSubComponent, autoResetExpanded, onCopy, canExpand, }: TableProps<D>) => ReactElement;
+export declare const Table: <D extends object & {
+    subRows?: D[] | undefined;
+}>({ "data-test": dataTest, columns: propColumns, data, disableSortBy, onPaginationChange, onSortingChange, manualPagination, onRenderedContentChange, hidePagination, pageCount: controlledPageCount, defaultPageSize, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle, pageIndex: incomingPageIndex, initialState, className, headerClassName, contentClassName, footerClassName, searchValue, hideHeader, onPageChange, overlayLoading, onRowSelect, columnsOrdering, children, renderRowSubComponent, onCopy, canExpand, onStateChange, }: TableProps<D>) => ReactElement;