@hazelcast/ui 1.3.3-next.8 → 2.0.1-canary.0

package/lib/{Slider.module.scss → components/Slider.module.scss}

@@ -1,5 +1,5 @@
-@use '../styles/constants' as c;
-@use '../styles/helpers' as h;
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
 
 // thumb width without a white border, let's make it the height of the slider
 $thumbWidth: c.$slideTrackHeight;

package/lib/{SliderFormik.d.ts → components/SliderFormik.d.ts}

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { FieldValidator } from 'formik';
 import { SliderExtraProps, SliderValue } from './Slider';
-import { ExtractKeysOfValueType } from './utils/types';
+import { ExtractKeysOfValueType } from '../utils/types';
 export type SliderFormikProps<V extends object> = SliderExtraProps & Partial<Pick<HTMLInputElement, 'disabled'>> & {
     name: ExtractKeysOfValueType<V, SliderValue>;
     validate?: FieldValidator;

package/lib/{SliderFormik.js → components/SliderFormik.js}

@@ -2,7 +2,7 @@ import React from 'react';
 import { useField } from 'formik';
 import { useMemo } from 'react';
 import { Slider } from './Slider';
-import { formikTouchAndUpdate, getFieldError } from './utils/formik';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
 export const SliderFormik = ({ name, validate, ...props }) => {
     const [field, meta, { setValue, setTouched }] = useField({
         name,

package/lib/components/SliderFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderFormik.js","sourceRoot":"","sources":["../../src/components/SliderFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAChE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AASrE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAA4B;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAElG,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC9G,CAAC,CAAA"}

package/lib/{Table → components/Table}/Cell.d.ts

@@ -1,5 +1,4 @@
-import { FC, RefObject } from 'react';
-import { TableCellProps } from 'react-table';
+import React, { CSSProperties, FC, PropsWithChildren, RefObject } from 'react';
 export type CellWarningProps = {
     align: 'left' | 'right';
     warning: string;
@@ -15,11 +14,14 @@ export type CellProps = {
     warning?: string;
     colSpan?: number;
     cellId?: string;
+    style?: CSSProperties;
+    role?: string;
+    className?: string;
     selectionStartedRef?: RefObject<boolean>;
     onMouseEnterSelection?: (id: string) => void;
     onClickSelection?: (id: string, modifiers: {
         ctrl: boolean;
         shift: boolean;
     }) => void;
-} & Omit<TableCellProps, 'key'>;
-export declare const Cell: FC<CellProps>;
+};
+export declare const Cell: ({ align, warning, colSpan, children, style, className, role, cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }: PropsWithChildren<CellProps>) => React.JSX.Element;

package/lib/{Table → components/Table}/Cell.js

@@ -4,18 +4,19 @@ import { useUID } from 'react-uid';
 import cn from 'classnames';
 import { Icon } from '../Icon';
 import { Tooltip } from '../Tooltip';
-import { useOpenCloseState } from '../hooks';
+import { useOpenCloseState } from '../../hooks';
 import { CellCopyablePopover } from './features/columnsSelection';
 import styles from './Cell.module.scss';
 export const CellWarning = ({ align, warning }) => {
     const id = useUID();
-    return (React.createElement(Tooltip, { id: id, content: warning }, (tooltipRef) => (React.createElement("div", { "data-test": "cell-warning-content", ref: tooltipRef, className: cn(styles.warningIcon, {
+    const dataTest = 'cell-warning-content';
+    return (React.createElement(Tooltip, { id: id, content: warning }, (tooltipRef) => (React.createElement("div", { "data-test": dataTest, ref: tooltipRef, className: cn(styles.warningIcon, {
             [styles.left]: align === 'left',
             [styles.right]: align === 'right',
         }) },
-        React.createElement(Icon, { icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
+        React.createElement(Icon, { "data-test": `${dataTest}-icon`, icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
 };
-export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role, cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
+export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role = 'cell', cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
     const rootRef = useRef(null);
     const { isOpen, open, close } = useOpenCloseState();
     const handleClick = (e) => {

package/lib/components/Table/Cell.js.map

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

package/lib/{Table → components/Table}/Cell.module.scss

@@ -1,17 +1,22 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
+@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/components/Table/CellWrapper.d.ts

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

package/lib/{Table → components/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/components/Table/CellWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellWrapper.js","sourceRoot":"","sources":["../../../src/components/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,CAAC;YAChB,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,CAAC;gBACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,MAAM,GAAG,GAAG,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAA;oBAC7D,IAAI,GAAG,EAAE,CAAC;wBACR,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;oBAC7F,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,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,CAAC;wBAC9H,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;oBAClF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;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 → components/Table}/EnhancedRenderers.d.ts

@@ -1,5 +1,5 @@
-import { ReactText } from 'react';
-import { Cell as CellType, HeaderGroup, UseResizeColumnsState } from 'react-table';
+import React from '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>) => React.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>) => React.JSX.Element;

package/lib/components/Table/EnhancedRenderers.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { flexRender } from '@tanstack/react-table';
+import { TruncatedText } from '../TruncatedText';
+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: context.column.getIsResizing() });
+    }
+    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/components/Table/EnhancedRenderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedRenderers.js","sourceRoot":"","sources":["../../../src/components/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,CAAC;QAC9B,OAAO,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,GAAI,CAAA;IACzF,CAAC;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 → components/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) => React.JSX.Element;

package/lib/{Table → components/Table}/Header.js

@@ -2,24 +2,28 @@ import React, { useMemo, useCallback, useRef } from 'react';
 import { ChevronDown, ChevronUp, Menu } from 'react-feather';
 import cn from 'classnames';
 import { Icon } from '../Icon';
-import { keyIsOneOf } from '../utils/keyboard';
+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);
     const draggable = !!onDrop && !!onDragStart;
     let ariaSort;
+    let ariaLabel = 'Not Sorted';
+    let icon = ChevronUp;
     if (isSorted) {
         ariaSort = isSortedDesc ? 'descending' : 'ascending';
+        ariaLabel = isSortedDesc ? 'Descending' : 'Ascending';
+        icon = isSortedDesc ? ChevronDown : ChevronUp;
     }
-    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]);
+        }), icon: icon, ariaLabel: ariaLabel, size: "smallMedium" })), [align, ariaLabel, icon, isSorted]);
     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 +32,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',
@@ -41,7 +48,9 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
                 ? (e) => {
                     e.dataTransfer.setData('text/plain', String(index));
                     isDragStarterRef.current = true;
-                    onDragStart && onDragStart(e);
+                    if (onDragStart) {
+                        onDragStart(e);
+                    }
                 }
                 : undefined, onDragEnd: () => {
                 isDragStarterRef.current = false;
@@ -62,7 +71,9 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
                 }
                 : undefined, onDrop: draggable
                 ? (e) => {
-                    onDrop && onDrop(e, index);
+                    if (onDrop) {
+                        onDrop(e, index);
+                    }
                     if (rootRef.current) {
                         rootRef.current.classList.remove(styles.dragOver);
                     }
@@ -75,8 +86,8 @@ 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 && (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/components/Table/Header.js.map

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

package/lib/{Table → components/Table}/Header.module.scss

@@ -1,15 +1,15 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
+@use '../../../styles/constants' as c;
+@use '../../../styles/helpers' as h;
 
 .resizer {
   position: absolute;
   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/components/Table/Row.d.ts

@@ -0,0 +1,19 @@
+import React, { FC, PropsWithChildren, AnchorHTMLAttributes, CSSProperties } from 'react';
+type RowBase = {
+    className?: string;
+    style?: CSSProperties;
+    role?: string;
+    ariaRowIndex?: number;
+};
+export type RowProps = RowBase & {
+    onClick?: () => void;
+};
+export type LinkRowProps = RowBase & {
+    href: string;
+    AnchorComponent?: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
+};
+export type HeaderRowProps = RowBase;
+export declare const Row: ({ children, className, style, role, ariaRowIndex, onClick }: PropsWithChildren<RowProps>) => React.JSX.Element;
+export declare const LinkRow: ({ children, className, style, role, ariaRowIndex, href, AnchorComponent, }: PropsWithChildren<LinkRowProps>) => React.JSX.Element;
+export declare const HeaderRow: ({ children, className, style, role, ariaRowIndex }: PropsWithChildren<HeaderRowProps>) => React.JSX.Element;
+export {};

package/lib/{Table → components/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 { 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,14 +12,13 @@ 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 });
-export const LinkRow = ({ children, className, style, role, ariaRowIndex, href, AnchorComponent = DefaultAnchor }) => {
+export const LinkRow = ({ children, className, style, role, ariaRowIndex, href, AnchorComponent = DefaultAnchor, }) => {
     const anchorId = useUID();
     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/components/Table/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../src/components/Table/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAyB,WAAW,EAAsD,MAAM,OAAO,CAAA;AACrH,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAOtC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAA+B,EAAE,EAAE;IAC9G,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,CAAC;YAC1C,OAAO,EAAE,CAAA;QACX,CAAC;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,MAAM,aAAa,GAAgD,CAAC,KAAK,EAAE,EAAE,CAAC,8BAAO,KAAK,GAAI,CAAA;AAE9F,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,eAAe,GAAG,aAAa,GACC,EAAE,EAAE;IACpC,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,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAqC,EAAE,EAAE,CAAC,CAClH,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 → components/Table}/Row.module.scss

@@ -1,12 +1,17 @@
-@use '../../styles/constants' as c;
-@use '../../styles/helpers' as h;
+@use '../../../styles/constants' as c;
+@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;
-}