@hazelcast/ui 1.3.2-next.3 → 1.3.2-next.30

package/lib/Select/SelectField.js

@@ -9,9 +9,11 @@ import { FieldHeader } from '../FieldHeader';
 import { Icon } from '../Icon';
 import { getMenuContainer, getOptionsMap } from './helpers';
 import { components } from './Common';
+import { components as rsComponents } from 'react-select';
+import { useCloseOnResize } from '../hooks/useCloseOnResize';
 import styles from './SelectField.module.scss';
 export const SelectField = (props) => {
-    const { 'data-test': dataTest, className, disabled, error, errorClassName, helperText, isClearable = false, isCreatable, isSearchable = true, label, labelClassName, showAriaLabel = false, size = 'medium', menuIsOpen, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, ...iconAndRest } = props;
+    const { 'data-test': dataTest, className, disabled, error, errorClassName, helperText, isClearable = false, isCreatable, isSearchable = true, label, labelClassName, showAriaLabel = false, size = 'medium', menuIsOpen, menuPortalTarget = 'body', menuPlacement = 'auto', name, onChange, options, placeholder, required, value, formatGroupLabel, formatOptionLabel, renderMenuFooter, singleValueTooltipVisible = true, ...iconAndRest } = props;
     const id = useUID();
     const { iconLeft, iconLeftAriaLabel, iconLeftClassName, iconLeftContainerClassName, ...rest } = iconAndRest;
     useIsomorphicLayoutEffect(() => {
@@ -36,9 +38,16 @@ export const SelectField = (props) => {
     const selectRef = useRef();
     useEffect(() => {
         if (selectRef.current) {
-            menuIsOpen ? selectRef.current.focus() : selectRef.current.blur();
+            menuIsOpen ? selectRef.current.onMenuOpen() : selectRef.current.onMenuClose();
         }
     }, [menuIsOpen]);
+    const innerComponents = useMemo(() => singleValueTooltipVisible
+        ? components
+        : {
+            ...components,
+            SingleValue: rsComponents.SingleValue,
+        }, [singleValueTooltipVisible]);
+    useCloseOnResize(selectRef);
     const selectProps = {
         ref: selectRef,
         inputId: id,
@@ -60,7 +69,7 @@ export const SelectField = (props) => {
         menuIsOpen,
         menuPlacement,
         menuPortalTarget: getMenuContainer(menuPortalTarget),
-        components,
+        components: innerComponents,
         formatGroupLabel,
         formatOptionLabel,
         renderMenuFooter,

package/lib/Select/SelectField.js.map

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

package/lib/Select/SelectField.module.scss

@@ -31,7 +31,6 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
 
   #{$selectContainer} {
     flex: 1 1 auto;
-    overflow: hidden;
 
     @include c.typographyBodySmall;
   }
@@ -94,7 +93,6 @@ $selectGroupHeading: ':global .hz-select-field__group-heading';
     flex-direction: row;
     align-items: center;
     position: relative;
-    overflow: hidden;
 
     .iconLeftContainer {
       .iconLeft {

package/lib/Table/Cell.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import { TableCellProps } from 'react-table';
 export declare type CellWarningProps = {
     align: 'left' | 'right';
@@ -11,7 +11,15 @@ export declare type CellProps = {
      * you to compare them or add them up quickly in your head.
      */
     align?: 'left' | 'right' | 'center';
+    selected?: boolean;
     warning?: string;
     colSpan?: number;
+    cellId?: 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>;

package/lib/Table/Cell.js

@@ -13,12 +13,31 @@ export const CellWarning = ({ align, warning }) => {
         }) },
         React.createElement(Icon, { icon: AlertTriangle, ariaLabelledBy: id, size: "small" })))));
 };
-export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role }) => (React.createElement("div", { "data-test": "table-cell", className: cn(styles.td, {
-        [styles.alignLeft]: align === 'left',
-        [styles.alignRight]: align === 'right',
-        [styles.alignCenter]: align === 'center',
-    }, className), "aria-colspan": colSpan, style: style, role: role },
-    warning && align === 'right' && React.createElement(CellWarning, { warning: warning, align: "right" }),
-    children,
-    warning && (align === 'left' || align === 'center') && React.createElement(CellWarning, { warning: warning, align: "left" })));
+export const Cell = ({ align = 'left', warning, colSpan, children, style, className, role, cellId, onClickSelection, selected, onMouseEnterSelection, selectionStartedRef, }) => {
+    const handleClick = (e) => {
+        if (onClickSelection && cellId) {
+            onClickSelection(cellId, {
+                shift: e.shiftKey,
+                ctrl: e.ctrlKey || e.metaKey,
+            });
+        }
+    };
+    const handleMouseEnter = () => {
+        if (cellId && onMouseEnterSelection && (selectionStartedRef === null || selectionStartedRef === void 0 ? void 0 : selectionStartedRef.current)) {
+            onMouseEnterSelection(cellId);
+        }
+    };
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React.createElement("div", { "data-test": "table-cell", className: cn(styles.td, {
+            [styles.alignLeft]: align === 'left',
+            [styles.alignRight]: align === 'right',
+            [styles.alignCenter]: align === 'center',
+            [styles.selectable]: onClickSelection,
+            [styles.selected]: selected,
+        }, className), "aria-colspan": colSpan, style: style, role: role, onMouseEnter: onClickSelection ? handleMouseEnter : undefined, onMouseDown: onClickSelection ? handleClick : undefined },
+        warning && align === 'right' && React.createElement(CellWarning, { warning: warning, align: "right" }),
+        children,
+        warning && (align === 'left' || align === 'center') && React.createElement(CellWarning, { warning: warning, align: "left" })));
+};
 //# sourceMappingURL=Cell.js.map

package/lib/Table/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Table/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAOvC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACtE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IAEnB,OAAO,CACL,oBAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,IAC9B,CAAC,UAAU,EAAE,EAAE,CAAC,CACf,0CACY,sBAAsB,EAChC,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;YAChC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;YAC/B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,OAAO;SAClC,CAAC;QAEF,oBAAC,IAAI,IAAC,IAAI,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,GAAG,CAC1D,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA;AAYD,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC7G,0CACY,YAAY,EACtB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,EAAE,EACT;QACE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,KAAK,KAAK,MAAM;QACpC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,OAAO;QACtC,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,KAAK,KAAK,QAAQ;KACzC,EACD,SAAS,CACV,kBACa,OAAO,EACrB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI;IAET,OAAO,IAAI,KAAK,KAAK,OAAO,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,GAAG;IAC/E,QAAQ;IACR,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,IAAI,oBAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,GAAG,CAClG,CACP,CAAA"}
+{"version":3,"file":"Cell.js","sourceRoot":"","sources":["../../src/Table/Cell.tsx"],"names":[],"mappings":"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"}

package/lib/Table/Cell.module.scss

@@ -26,6 +26,10 @@
     justify-content: center;
   }
 
+  &.selected {
+    background: lighten((c.$colorPrimary), 30) !important;
+  }
+
   &:not(:last-of-type) {
     border-right: c.$borderWidth solid c.$colorNeutral;
   }
@@ -42,3 +46,7 @@
     margin-right: c.$grid * 2;
   }
 }
+
+.selectable {
+  user-select: none;
+}

package/lib/Table/CellWrapper.d.ts

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

package/lib/Table/CellWrapper.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+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;
+    useEffect(() => {
+        if (rest.selected && rest.cellId && (selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current)) {
+            const [rowIndex, cellIndex] = rest.cellId.split(':');
+            selectedColumnValuesRef.current[Number(rowIndex)][Number(cellIndex)] = typeof cell.value !== 'object' ? String(cell.value) : '';
+        }
+    }, [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));
+};
+//# sourceMappingURL=CellWrapper.js.map

package/lib/Table/CellWrapper.js.map

@@ -0,0 +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,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAI,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,OAAO,CAAA,EAAE;YACpE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAqB,CAAA;YAExE,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,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;SAChI;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"}

package/lib/Table/Header.d.ts

@@ -1,4 +1,4 @@
-import { FC, MouseEvent, KeyboardEvent } from 'react';
+import { FC, MouseEvent, KeyboardEvent, DragEvent } from 'react';
 import { TableHeaderProps, TableResizerProps } from 'react-table';
 export declare type HeaderProps = {
     /**
@@ -15,5 +15,8 @@ export declare type HeaderProps = {
     isResizing: boolean;
     getResizerProps: (props?: Partial<TableResizerProps>) => TableResizerProps;
     isLastHeader: boolean;
+    index: number;
+    onDragStart?: (e: DragEvent) => void;
+    onDrop?: (e: DragEvent, index: number) => void;
 } & Omit<TableHeaderProps, 'key'>;
 export declare const Header: FC<HeaderProps>;

package/lib/Table/Header.js

@@ -1,10 +1,14 @@
-import React, { useMemo, useCallback } from 'react';
-import { ChevronDown, ChevronUp } from 'react-feather';
+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 styles from './Header.module.scss';
-export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, getResizerProps, isLastHeader, onClick, style, className, role, }) => {
+export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, isSortedDesc, canResize, isResizing, getResizerProps, isLastHeader, onClick, style, className, role, index, onDragStart, onDrop, }) => {
+    const rootRef = useRef(null);
+    const isDragStarterRef = useRef(false);
+    const counterRef = useRef(0);
+    const draggable = !!onDrop && !!onDragStart;
     let ariaSort;
     if (isSorted) {
         ariaSort = isSortedDesc ? 'descending' : 'ascending';
@@ -13,6 +17,7 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
             [styles.left]: align === 'left',
             [styles.right]: align === 'right',
         }), 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) => {
         event.preventDefault();
         if (keyIsOneOf(event, 'Enter') && onClick) {
@@ -25,16 +30,50 @@ export const Header = ({ align = 'left', colSpan, children, canSort, isSorted, i
         onKeyPress: onClick ? onKeyPress : undefined,
         onClick,
     };
-    return (React.createElement("div", { "data-test": "table-header-container", className: cn(styles.container, className), style: style, role: role, "aria-colspan": colSpan, "aria-sort": ariaSort },
-        React.createElement("div", { "data-test": "table-header-content", className: cn(styles.th, {
+    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 },
+        React.createElement("div", { draggable: draggable, "data-test": "table-header-content", className: cn(styles.th, {
                 [styles.sortable]: canSort,
                 [styles.alignLeft]: align === 'left',
                 [styles.alignRight]: align === 'right',
                 [styles.alignCenter]: align === 'center',
-            }), ...buttonRoleProps },
+            }), onDragStart: draggable
+                ? (e) => {
+                    e.dataTransfer.setData('text/plain', String(index));
+                    isDragStarterRef.current = true;
+                    onDragStart && onDragStart(e);
+                }
+                : undefined, onDragEnd: () => {
+                isDragStarterRef.current = false;
+            }, onDragOver: (e) => e.preventDefault(), onDragEnter: draggable
+                ? (e) => {
+                    e.preventDefault();
+                    if (!isDragStarterRef.current && rootRef.current && counterRef.current === 0) {
+                        rootRef.current.classList.add(styles.dragOver);
+                    }
+                    counterRef.current++;
+                }
+                : undefined, onDragLeave: draggable
+                ? () => {
+                    counterRef.current--;
+                    if (rootRef.current && counterRef.current === 0) {
+                        rootRef.current.classList.remove(styles.dragOver);
+                    }
+                }
+                : undefined, onDrop: draggable
+                ? (e) => {
+                    onDrop && onDrop(e, index);
+                    if (rootRef.current) {
+                        rootRef.current.classList.remove(styles.dragOver);
+                    }
+                    isDragStarterRef.current = false;
+                    counterRef.current = 0;
+                }
+                : undefined, ...buttonRoleProps },
+            draggable && align === 'right' && DraggableIcon,
             canSort && align === 'right' && Chevron,
             children,
-            canSort && (align === 'left' || align === 'center') && Chevron),
+            canSort && (align === 'left' || align === 'center') && Chevron,
+            draggable && (align === 'left' || align === 'center') && DraggableIcon),
         canResize && !isLastHeader && (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, {
                     [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

@@ -59,6 +59,12 @@
     &.alignCenter {
       justify-content: center;
     }
+
+    &[draggable='true'] {
+      /* doiuse-disable css3-cursors-newer */
+      cursor: grabbing;
+      /* doiuse-enable css3-cursors-newer */
+    }
   }
 }
 
@@ -90,3 +96,16 @@
     background-color: c.$colorPrimary;
   }
 }
+
+.dragOver {
+  @include h.outlineSimple;
+}
+
+.dragIcon {
+  margin-left: c.$grid * 2;
+}
+
+.dragIconRight {
+  margin-left: 0;
+  margin-right: c.$grid * 2;
+}

package/lib/Table/Table.d.ts

@@ -1,12 +1,15 @@
 import { DataTestProp } from '@hazelcast/helpers';
-import { AnchorHTMLAttributes, FC, ReactChild, ReactElement } from 'react';
-import { TableOptions, Row as RowType, Cell as CellType, Column as ColumnType } from 'react-table';
+import { AnchorHTMLAttributes, FC, ReactChild, ReactElement, ReactNode } from 'react';
+import { TableOptions, Row as RowType, Cell as CellType, Column as ColumnType, TableInstance } from 'react-table';
 import { PaginationProps } from '../Pagination';
 import { CellProps } from './Cell';
 import { RowProps } from './Row';
-export type { Accessor, Column, Cell, Renderer, Row, CellProps, HeaderGroup, TableInstance } from 'react-table';
+export type { Accessor, Cell, Renderer, Row, CellProps, HeaderGroup, TableInstance, TableState } from 'react-table';
+export declare type Column<T extends object> = ColumnType<T> & {
+    canHide?: boolean;
+};
 declare module 'react-table' {
-    interface TableOptions<D extends object = {}> extends UsePaginationOptions<D>, UseSortByOptions<D>, UseFiltersOptions<D>, UseRowSelectOptions<D>, UseGroupByOptions<D>, UseResizeColumnsOptions<D>, Record<string, any> {
+    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> {
     }
@@ -22,7 +25,7 @@ declare module 'react-table' {
     }
     interface Cell<D extends object = {}, V = any> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
     }
-    interface Row<D extends object = {}> extends UseGroupByRowProps<D>, UseRowSelectRowProps<D> {
+    interface Row<D extends object = {}> extends UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseExpandedRowProps<D> {
     }
 }
 export declare type PaginationOptions = Partial<Pick<PaginationProps, 'pageSizeOptions'>>;
@@ -56,6 +59,7 @@ declare type CustomTableRowClickProps<D extends object> = {
 };
 declare type CustomTableProps<D extends object> = {
     loading?: boolean;
+    overlayLoading?: boolean;
     className?: string;
     hideHeader?: boolean;
     searchValue?: string;
@@ -70,6 +74,11 @@ declare type CustomTableProps<D extends object> = {
     autoResetGlobalFilter?: boolean;
     pageIndex?: number;
     onPageChange?: (newPage: number) => void;
+    onRowSelect?: (ids: string[]) => void;
+    columnsOrdering?: boolean;
+    children?: (table: ReactElement, tableInstance: TableInstance<D>) => ReactElement;
+    renderRowSubComponent?: (props: RowType<D>) => ReactNode;
+    onCopy?: (data: string[][]) => void;
 } & CustomTableRowClickProps<D> & DataTestProp;
 export declare type TableProps<D extends object> = TableOptions<D> & ExtendedPaginationProps & ControlledPaginationProps & CustomTableProps<D>;
 export type { ColumnType, RowType, CellType };
@@ -83,4 +92,4 @@ 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, data, defaultColumn, disableSortBy, onPaginationChange, manualPagination, 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, }: TableProps<D>) => ReactElement;
+export declare const Table: <D extends object>({ "data-test": dataTest, autoResetSortBy, columns: propColumns, data, defaultColumn, disableSortBy, onPaginationChange, manualPagination, 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, }: TableProps<D>) => ReactElement;

package/lib/Table/Table.js

@@ -1,15 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useRef, useMemo, } from 'react';
 import cn from 'classnames';
-import { useTable, usePagination, useSortBy, useAsyncDebounce, useResizeColumns, useFlexLayout, useGlobalFilter, } from 'react-table';
-import { AlertTriangle } from 'react-feather';
+import { useTable, usePagination, useSortBy, useAsyncDebounce, useResizeColumns, useFlexLayout, useGlobalFilter, useColumnOrder, useExpanded, } from 'react-table';
+import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather';
 import { Pagination } from '../Pagination';
 import { Cell } from './Cell';
-import { EnhancedCellRenderer, EnhancedHeaderFooterRenderer } from './EnhancedRenderers';
+import { EnhancedHeaderFooterRenderer } from './EnhancedRenderers';
 import { Header } from './Header';
-import { HeaderRow, LinkRow, Row } from './Row';
+import { HeaderRow, Row } from './Row';
 import { Loader } from '../Loader';
 import { EmptyState } from '../EmptyState';
 import { usePrevious } from '../hooks/usePrevious';
+import { Icon } from '../Icon';
+import { TableContent } from './TableContent';
+import { ROW_EXPANDER_COLUMN_ID } from './constants';
+import { useColumnsSelection } from './features/columnsSelection';
+import { useRefValue } from '../hooks';
 import styles from './Table.module.scss';
 import styleConsts from '../../styles/constants/export.module.scss';
 const column = {
@@ -29,12 +34,34 @@ const column = {
  * - Is able to resize columns out of the box
  */
 // Inspiration here: https://react-table.tanstack.com/docs/examples/basic
-export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns, data, defaultColumn = column, disableSortBy, onPaginationChange, manualPagination, onRenderedContentChange, autoResetPage = false, hidePagination = false, pageCount: controlledPageCount, defaultPageSize = 10, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle = 'The table is empty', pageIndex: incomingPageIndex, initialState = { pageIndex: incomingPageIndex || 0, pageSize: defaultPageSize }, className = '', headerClassName = '', contentClassName = '', footerClassName = '', searchValue, hideHeader, autoResetGlobalFilter = false, onPageChange, }) => {
+export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns: propColumns, data, defaultColumn = column, disableSortBy, onPaginationChange, manualPagination, onRenderedContentChange, autoResetPage = false, hidePagination = false, pageCount: controlledPageCount, defaultPageSize = 10, paginationOptions, onRowClick, getHref, AnchorComponent, getCustomRowProps, getCustomCellProps, loading, noDataTitle = 'The table is empty', pageIndex: incomingPageIndex, initialState = { pageIndex: incomingPageIndex || 0, pageSize: defaultPageSize }, className = '', headerClassName = '', contentClassName = '', footerClassName = '', searchValue, hideHeader, autoResetGlobalFilter = false, onPageChange, overlayLoading, onRowSelect, columnsOrdering = false, autoResetResize = false, autoResetSelectedRows = false, children, renderRowSubComponent, autoResetExpanded = false, onCopy, }) => {
     var _a;
+    const getOncopy = useRefValue(onCopy);
+    const draggedColumnRef = useRef(null);
     const previousIncomingPageIndex = usePrevious(incomingPageIndex);
-    const { getTableProps, headerGroups, footerGroups, prepareRow, page, canPreviousPage, canNextPage, pageCount, gotoPage, nextPage, previousPage, setPageSize, 
-    // Get the state from the instance
-    state: { pageIndex, pageSize, columnResizing }, setGlobalFilter, } = useTable({
+    // Debounce our `fetchData` call for 200ms.
+    // We can use non-null assertion here since we're checking existence of `fetchData` in the `useEffect` below
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const columns = useMemo(() => {
+        if (renderRowSubComponent || data.some((item) => 'subRows' in item)) {
+            return [
+                {
+                    width: 60,
+                    disableResizing: true,
+                    id: ROW_EXPANDER_COLUMN_ID,
+                    Cell: ({ row }) => {
+                        return row.canExpand || renderRowSubComponent ? (React.createElement("div", { tabIndex: 0, role: "button", "data-test": "row-expander", className: styles.expander, ...row.getToggleRowExpandedProps() },
+                            React.createElement(Icon, { icon: row.isExpanded ? ChevronUp : ChevronDown, ariaLabel: "row-expander" }))) : null;
+                    },
+                },
+                ...propColumns,
+            ];
+        }
+        return propColumns;
+    }, [propColumns, data, renderRowSubComponent]);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const onPaginationChangeDebounced = useAsyncDebounce(onPaginationChange, 200);
+    const tableInstance = useTable({
         columns,
         data,
         disableSortBy,
@@ -50,11 +77,50 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns,
         autoResetPage,
         defaultColumn,
         autoResetGlobalFilter,
-    }, useGlobalFilter, useSortBy, usePagination, useFlexLayout, useResizeColumns);
-    // Debounce our `fetchData` call for 200ms.
-    // We can use non-null assertion here since we're checking existence of `fetchData` in the `useEffect` below
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const onPaginationChangeDebounced = useAsyncDebounce(onPaginationChange, 200);
+        autoResetResize,
+        autoResetSelectedRows,
+        autoResetExpanded,
+        paginateExpandedRows: false,
+    }, useGlobalFilter, useSortBy, useExpanded, usePagination, useFlexLayout, useResizeColumns, useColumnOrder);
+    const { getTableProps, headerGroups, footerGroups, prepareRow, page, visibleColumns, canPreviousPage, canNextPage, pageCount, gotoPage, nextPage, previousPage, setPageSize, 
+    // Get the state from the instance
+    state: { pageIndex, pageSize, columnResizing, selectedRowIds }, setGlobalFilter, setColumnOrder, } = tableInstance;
+    // drag and drop
+    const onDragStart = useCallback((e) => {
+        draggedColumnRef.current = Number(e.dataTransfer.getData('text/plain'));
+    }, []);
+    const onDrop = useCallback((e, columnIndex) => {
+        if (draggedColumnRef.current !== null && columnIndex !== draggedColumnRef.current) {
+            const newColumns = [...visibleColumns];
+            newColumns[columnIndex] = visibleColumns[draggedColumnRef.current];
+            newColumns[draggedColumnRef.current] = visibleColumns[columnIndex];
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            setColumnOrder(newColumns.map(({ id, accessor }) => (id || accessor)));
+        }
+    }, [visibleColumns, setColumnOrder]);
+    const columnsSelectionProps = useColumnsSelection({
+        rowsPerPage: page.length,
+        columnsPerRow: columns.length,
+    });
+    const { onEndSelection, getSelectedColumns, selectedColumnValuesRef } = columnsSelectionProps;
+    const onKeyUp = useCallback((e) => {
+        const callback = getOncopy();
+        if (callback) {
+            const { columns, range } = getSelectedColumns();
+            if (columns.size || (range[0] !== undefined && range[0] !== undefined)) {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+                    callback(selectedColumnValuesRef === null || selectedColumnValuesRef === void 0 ? void 0 : selectedColumnValuesRef.current);
+                }
+            }
+        }
+    }, [getOncopy, getSelectedColumns, selectedColumnValuesRef]);
+    useEffect(() => {
+        return () => {
+            document.body.removeEventListener('mouseup', onEndSelection);
+            document.body.removeEventListener('contextmenu', onEndSelection);
+            document.body.removeEventListener('keyup', onKeyUp);
+        };
+    }, [onKeyUp, onEndSelection]);
     // Listen for changes in pagination and use the state to fetch new data. This is a recommended way to fetch new data: https://react-table.tanstack.com/docs/faq#how-can-i-use-the-table-state-to-fetch-new-data
     useEffect(() => {
         if (onPaginationChange) {
@@ -88,6 +154,11 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns,
             gotoPage(incomingPageIndex);
         }
     }, [gotoPage, incomingPageIndex, previousIncomingPageIndex]);
+    useEffect(() => {
+        if (onRowSelect) {
+            onRowSelect(Object.keys(selectedRowIds));
+        }
+    }, [onRowSelect, selectedRowIds]);
     const hasData = data.length > 0;
     // If at least one of the columns has footer then we display the footer row
     const hasFooter = !loading && hasData && columns.some((col) => !!col.Footer);
@@ -97,7 +168,7 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns,
     const cellIndexOffset = pageSize * pageIndex + headerIndex;
     // Total row count.
     const rowCount = data.length + headerIndex + (hasFooter ? 1 : 0);
-    return (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'table-wrapper', className: className },
+    const content = (React.createElement("div", { "data-test": dataTest !== null && dataTest !== void 0 ? dataTest : 'table-wrapper', className: className },
         React.createElement("div", { className: cn(styles.container, {
                 [styles.spaceBottom]: !hidePagination,
             }) },
@@ -106,34 +177,14 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns,
                     const { key: headerGroupKey, ...restHeaderGroupProps } = headerGroup.getHeaderGroupProps();
                     return (React.createElement(HeaderRow, { key: headerGroupKey, ...restHeaderGroupProps, ariaRowIndex: headerIndex }, headerGroup.headers.map((column, i) => {
                         const { key: columnKey, ...restHeaderProps } = column.getHeaderProps(column.getSortByToggleProps());
-                        return (React.createElement(Header, { key: columnKey, align: column.align, canSort: column.canSort, isSorted: column.isSorted, isSortedDesc: column.isSortedDesc, isLastHeader: headerGroup.headers.length === i + 1, canResize: column.canResize, isResizing: column.isResizing, getResizerProps: column.getResizerProps, ...restHeaderProps },
+                        const isDraggable = columnsOrdering && column.id !== 'expander';
+                        return (React.createElement(Header, { index: i, key: columnKey, align: column.align, canSort: column.canSort, isSorted: column.isSorted, isSortedDesc: column.isSortedDesc, isLastHeader: headerGroup.headers.length === i + 1, canResize: column.canResize, isResizing: column.isResizing, getResizerProps: column.getResizerProps, onDrop: isDraggable ? onDrop : undefined, onDragStart: onDragStart, ...restHeaderProps },
                             React.createElement(EnhancedHeaderFooterRenderer, { column: column, columnResizing: columnResizing, type: "Header" })));
                     })));
                 }))),
-                loading ? (React.createElement(Row, { role: "row" },
+                !overlayLoading && loading ? (React.createElement(Row, { role: "row" },
                     React.createElement(Cell, { role: "cell", align: "center", colSpan: columns.length, "data-test": "table-loader-cell" },
-                        React.createElement(Loader, null)))) : hasData ? (React.createElement("div", { "data-test": "table-cell-row-group", role: "rowgroup", className: contentClassName }, page.map((row) => {
-                    prepareRow(row);
-                    const { key: rowKey, ...restRowProps } = row.getRowProps(getCustomRowProps === null || getCustomRowProps === void 0 ? void 0 : getCustomRowProps(row));
-                    const cells = row.cells.map((cell, i) => {
-                        const { key: cellKey, ...restCellProps } = cell.getCellProps(getCustomCellProps === null || getCustomCellProps === void 0 ? void 0 : getCustomCellProps(cell));
-                        // We don't want to use cell.column.Cell as that is a ColumnInstance which already has a cell renderer
-                        const column = columns[i];
-                        return (React.createElement(Cell, { key: cellKey, align: cell.column.align, ...restCellProps },
-                            React.createElement(EnhancedCellRenderer, { cell: cell, hasCellRenderer: !!column.Cell, columnResizing: columnResizing })));
-                    });
-                    if (getHref) {
-                        const href = getHref(row);
-                        if (href) {
-                            return (React.createElement(LinkRow, { key: rowKey, AnchorComponent: AnchorComponent, ...restRowProps, ariaRowIndex: row.index + 1 + cellIndexOffset, href: href }, cells));
-                        }
-                    }
-                    return (React.createElement(Row, { key: rowKey, ...restRowProps, ariaRowIndex: row.index + 1 + cellIndexOffset, onClick: onRowClick
-                            ? () => {
-                                onRowClick(row);
-                            }
-                            : undefined }, cells));
-                }))) : (React.createElement("div", { role: "row" },
+                        React.createElement(Loader, null)))) : hasData ? (React.createElement(TableContent, { page: page, onCopy: onCopy, getHref: getHref, columns: columns, onKeyUp: onKeyUp, ...columnsSelectionProps, onRowClick: onRowClick, prepareRow: prepareRow, className: contentClassName, columnResizing: columnResizing, AnchorComponent: AnchorComponent, cellIndexOffset: cellIndexOffset, getCustomRowProps: getCustomRowProps, getCustomCellProps: getCustomCellProps, renderRowSubComponent: renderRowSubComponent })) : (React.createElement("div", { role: "row" },
                     React.createElement("div", { role: "cell" },
                         React.createElement(EmptyState, { "data-test": "table-no-data", className: styles.empty, title: noDataTitle, icon: AlertTriangle, iconLabel: "Alert" })))),
                 hasFooter && (React.createElement("div", { "data-test": "table-footer-row-group", role: "rowgroup", className: footerClassName }, footerGroups.map((group) => {
@@ -170,5 +221,9 @@ export const Table = ({ 'data-test': dataTest, autoResetSortBy = false, columns,
                     previousPage();
                 }
             }, pageSize: pageSize, setPageSize: setPageSize, numberOfItems: data.length, pageSizeOptions: (_a = paginationOptions === null || paginationOptions === void 0 ? void 0 : paginationOptions.pageSizeOptions) !== null && _a !== void 0 ? _a : [5, 10, 20] }))));
+    if (children) {
+        return children(content, tableInstance);
+    }
+    return content;
 };
 //# sourceMappingURL=Table.js.map