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

package/lib/components/Table/TableContent.d.ts

@@ -0,0 +1,26 @@
+import React, { AnchorHTMLAttributes, FC, LegacyRef, MutableRefObject, ReactNode } from 'react';
+import { Row as TableRow, ColumnSizingState } from '@tanstack/react-table';
+import { CellProps } from './Cell';
+import { CellType, RowData, RowType } from './tableTypes';
+import { RowProps } from './Row';
+import { useColumnsSelection } from './features/columnsSelection';
+export type TableContentProps<D extends RowData> = {
+    loading?: boolean;
+    page: TableRow<D>[];
+    className?: string;
+    rootRef?: LegacyRef<HTMLDivElement>;
+    cellIndexOffset: number;
+    overlayLoading?: boolean;
+    onEndSelection: () => void;
+    onCopy?: (value: string[][]) => void;
+    onRowClick?: (row: RowType<D>) => void;
+    totalSize: number;
+    selectionStartedRef: MutableRefObject<boolean>;
+    getHref?: (row: RowType<D>) => string | undefined;
+    getCustomRowProps?: (row: RowType<D>) => RowProps;
+    getCustomCellProps?: (cellInfo: CellType<D>) => CellProps;
+    renderRowSubComponent?: (props: RowType<D>) => ReactNode;
+    columnResizing: ColumnSizingState;
+    AnchorComponent?: FC<AnchorHTMLAttributes<HTMLAnchorElement>>;
+} & ReturnType<typeof useColumnsSelection>;
+export declare const TableContent: <D extends RowData>(props: TableContentProps<D>) => React.JSX.Element;

package/lib/components/Table/TableContent.js

@@ -0,0 +1,58 @@
+import cn from 'classnames';
+import HotKeys from 'react-hot-keys';
+import React, { useCallback } from 'react';
+import { Loader } from '../Loader';
+import { getCellStyle, getRowStyle, prepareCell, prepareRow } from './utils';
+import { CellWrapper } from './CellWrapper';
+import { LinkRow, Row } from './Row';
+import { isCellSelected } from './features/columnsSelection';
+import styles from './TableContent.module.scss';
+export const TableContent = (props) => {
+    const { rootRef, page, onCopy, getHref, loading, className, totalSize, onRowClick, overlayLoading, onEndSelection, AnchorComponent, cellIndexOffset, selectedColumns, onClickSelection, getCustomRowProps, getCustomCellProps, selectionStartedRef, renderRowSubComponent, onMouseEnterSelection, selectedColumnValuesRef, } = props;
+    const handleOnContextMenu = useCallback((e) => {
+        // disable table custom context menu
+        e.stopPropagation();
+    }, []);
+    return (React.createElement("div", { ref: rootRef, "data-test": "table-content", className: cn(styles.content, className), onMouseDown: () => {
+            selectionStartedRef.current = true;
+            document.body.addEventListener('mouseup', onEndSelection);
+            document.body.addEventListener('contextmenu', onEndSelection);
+        } },
+        page.map((row, rowIndex) => {
+            const { id: rowKey, ...restRowProps } = row;
+            const cells = row.getVisibleCells().map((cell, i) => {
+                var _a;
+                const { id: cellKey, ...restCellProps } = cell;
+                const cellId = `${rowIndex}:${i}`;
+                const selected = isCellSelected(cellId, selectedColumns);
+                const { style: cellStyle = {}, ...customProps } = getCustomCellProps ? getCustomCellProps(prepareCell(cell)) : {};
+                return (React.createElement(CellWrapper, { cell: cell, style: {
+                        ...cellStyle,
+                        ...getCellStyle({
+                            size: restCellProps.column.getSize(),
+                            minSize: restCellProps.column.columnDef.minSize || restCellProps.column.getSize(),
+                        }),
+                    }, role: "cell", key: cellKey, cellId: cellId, selected: selected, selectable: !!onCopy, onClickSelection: onClickSelection, align: (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.align, selectionStartedRef: selectionStartedRef, onMouseEnterSelection: onMouseEnterSelection, selectedColumnValuesRef: selectedColumnValuesRef, ...customProps }));
+            });
+            const expandedRow = row.getIsExpanded() && renderRowSubComponent ? (React.createElement(HotKeys, { disabled: true },
+                React.createElement("div", { tabIndex: -1, className: styles.subRowWrapper, onContextMenu: handleOnContextMenu }, renderRowSubComponent(prepareRow(row))))) : null;
+            if (getHref) {
+                const href = getHref(prepareRow(row));
+                if (href) {
+                    return (React.createElement(React.Fragment, { key: rowKey },
+                        React.createElement(LinkRow, { role: "row", AnchorComponent: AnchorComponent, ...restRowProps, ariaRowIndex: row.index + 1 + cellIndexOffset, href: href }, cells),
+                        expandedRow));
+                }
+            }
+            return (React.createElement(React.Fragment, { key: rowKey },
+                React.createElement(Row, { role: "row", ...restRowProps, style: getRowStyle({ totalSize }), ...(getCustomRowProps ? getCustomRowProps(prepareRow(row)) : {}), ariaRowIndex: row.index + 1 + cellIndexOffset, onClick: onRowClick
+                        ? () => {
+                            onRowClick(prepareRow(row));
+                        }
+                        : undefined }, cells),
+                expandedRow));
+        }),
+        overlayLoading && loading && (React.createElement("div", { className: styles.overlayLoading },
+            React.createElement(Loader, null)))));
+};
+//# sourceMappingURL=TableContent.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/components/Table/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAA;AACpD,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAA"}

package/lib/components/Table/features/columnsSelection/CellCopyablePopover.d.ts

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react';
+export interface CellCopyablePopover {
+    isOpen: boolean;
+    onClose: () => void;
+    contentClassName?: string;
+    anchorElement?: HTMLElement | null;
+}
+export declare const CellCopyablePopover: ({ children, contentClassName, anchorElement, isOpen, onClose, }: PropsWithChildren<CellCopyablePopover>) => React.JSX.Element;

package/lib/components/Table/features/columnsSelection/CellCopyablePopover.js

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react';
+import cls from 'classnames';
+import { Popover } from '../../../Popover';
+import styles from './CellCopyablePopover.module.scss';
+export const CellCopyablePopover = ({ children, contentClassName, anchorElement, isOpen, onClose, }) => {
+    var _a;
+    useEffect(() => {
+        return () => onClose();
+    }, [onClose]);
+    return (React.createElement(Popover, { open: isOpen, onClose: onClose, anchorElement: anchorElement, placement: "top-start", className: styles.root, "data-test": "cell-copyable-popover", offset: { y: -((_a = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetHeight) !== null && _a !== void 0 ? _a : 0) } },
+        React.createElement("div", { className: cls(styles.content, contentClassName), onDoubleClick: onClose, style: { minHeight: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetHeight, minWidth: anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.offsetWidth } }, children)));
+};
+//# sourceMappingURL=CellCopyablePopover.js.map

package/lib/components/Table/features/columnsSelection/CellCopyablePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellCopyablePopover.js","sourceRoot":"","sources":["../../../../../src/components/Table/features/columnsSelection/CellCopyablePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,GAAG,MAAM,YAAY,CAAA;AAE5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAStD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,MAAM,EACN,OAAO,GACgC,EAAE,EAAE;;IAC3C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,CAAA;IACxB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,oBAAC,OAAO,IACN,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,MAAM,CAAC,IAAI,eACZ,uBAAuB,EACjC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,mCAAI,CAAC,CAAC,EAAE;QAElD,6BACE,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAChD,aAAa,EAAE,OAAO,EACtB,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,WAAW,EAAE,IAEtF,QAAQ,CACL,CACE,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Table/features/columnsSelection/CellCopyablePopover.module.scss

@@ -0,0 +1,12 @@
+@use '../../../../../styles/constants' as c;
+
+.root {
+  z-index: c.$zIndex2000;
+}
+
+.content {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}

package/lib/components/Table/features/columnsSelection/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ContextMenuProps {
+    anchorElement: HTMLElement | null;
+    onCopy: () => void;
+}
+export declare const ContextMenu: ({ anchorElement, onCopy }: ContextMenuProps) => React.JSX.Element;

package/lib/components/Table/features/columnsSelection/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../../../../src/components/Table/features/columnsSelection/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAmB,WAAW,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAE7F,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAO9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,aAAa,EAAE,MAAM,EAAoB,EAAE,EAAE;IACzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC;QACJ;YACE,OAAO,EAAE,CACP;;gBACO,oBAAC,IAAI,OAAG,CACZ,CACJ;YACD,SAAS,EAAE,MAAM,CAAC,IAAI;YACtB,OAAO,EAAE,MAAM;SAChB;KACF,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,OAAO,oBAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;AAC5E,CAAC,CAAA"}

package/lib/components/Table/features/columnsSelection/ContextMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Table/features/columnsSelection/ContextMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/lib/components/Table/features/columnsSelection/columnsSelection.d.ts

@@ -0,0 +1,18 @@
+import { SelectedColumnsState } from './helpers';
+export type ColumnsSelectionProps = {
+    rowsPerPage: number;
+    columnsPerRow: number;
+};
+export declare const useColumnsSelection: (props: ColumnsSelectionProps) => {
+    onEndSelection: () => void;
+    selectedColumns: SelectedColumnsState;
+    onClickSelection: (id: string, modifiers: {
+        ctrl: boolean;
+        shift: boolean;
+    }) => void;
+    setSelectedColumns: import("react").Dispatch<import("react").SetStateAction<SelectedColumnsState>>;
+    getSelectedColumns: () => SelectedColumnsState;
+    selectionStartedRef: import("react").MutableRefObject<boolean>;
+    onMouseEnterSelection: (id: string) => void;
+    selectedColumnValuesRef: import("react").MutableRefObject<(string | undefined)[][]>;
+};

package/lib/components/Table/features/columnsSelection/columnsSelection.js

@@ -0,0 +1,71 @@
+import { useCallback, useRef, useState } from 'react';
+import { useRefValue } from '../../../../hooks';
+const initialSelectedColumnsState = {
+    columns: new Set(),
+    range: [undefined, undefined],
+};
+export const useColumnsSelection = (props) => {
+    const { columnsPerRow, rowsPerPage } = props;
+    const [selectedColumns, setSelectedColumns] = useState(initialSelectedColumnsState);
+    const selectionStartedRef = useRef(false);
+    const selectedColumnValuesRef = useRef([]);
+    const getColumnsPerRow = useRefValue(columnsPerRow);
+    const getRowsPerPage = useRefValue(rowsPerPage);
+    const getSelectedColumns = useRefValue(selectedColumns);
+    const clearSelectedColumnsValue = useCallback(() => {
+        selectedColumnValuesRef.current = Array.from(Array(getRowsPerPage()), () => new Array(getColumnsPerRow()));
+    }, [selectedColumnValuesRef, getRowsPerPage, getColumnsPerRow]);
+    const onEndSelection = useCallback(() => {
+        document.body.removeEventListener('mouseup', onEndSelection);
+        document.body.removeEventListener('contextmenu', onEndSelection);
+        selectionStartedRef.current = false;
+    }, []);
+    const onClickSelection = useCallback((id, modifiers) => {
+        setSelectedColumns((currentValue) => {
+            if (modifiers.ctrl) {
+                return {
+                    ...currentValue,
+                    columns: new Set(currentValue.columns.add(id)),
+                };
+            }
+            if (modifiers.shift && currentValue.columns.size === 1) {
+                const firstItem = currentValue.columns.values().next();
+                return {
+                    columns: new Set(),
+                    range: [firstItem.value, id],
+                };
+            }
+            clearSelectedColumnsValue();
+            return {
+                range: [undefined, undefined],
+                columns: new Set([id]),
+            };
+        });
+    }, [clearSelectedColumnsValue]);
+    const onMouseEnterSelection = useCallback((id) => {
+        setSelectedColumns((currentValue) => {
+            if (currentValue.columns.size === 1 && currentValue.range[0] === undefined) {
+                const firstItem = currentValue.columns.values().next();
+                return {
+                    columns: new Set(),
+                    range: [firstItem.value, id],
+                };
+            }
+            return {
+                ...currentValue,
+                range: [currentValue.range[0], id],
+            };
+        });
+    }, []);
+    return {
+        onEndSelection,
+        selectedColumns,
+        onClickSelection,
+        setSelectedColumns,
+        getSelectedColumns,
+        selectionStartedRef,
+        onMouseEnterSelection,
+        selectedColumnValuesRef,
+    };
+};
+//# sourceMappingURL=columnsSelection.js.map

package/lib/components/Table/features/columnsSelection/columnsSelection.js.map

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

package/lib/components/Table/features/columnsSelection/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../../../src/components/Table/features/columnsSelection/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAc,EAAoB,EAAE;IACvE,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEhC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAC/C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,KAA+C,EAAW,EAAE;IAClG,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;IAEpB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,UAAU,GAAG,oBAAoB,CAAC,MAAM,CAAC,CAAA;YAC/C,MAAM,WAAW,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAA;YAC/C,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAC3D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YAE3D,OAAO,UAAU,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,WAAW,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,YAAY,CAAA;QACvI,CAAC;QAED,OAAO,MAAM,KAAK,KAAK,CAAA;IACzB,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,eAAqC,EAAW,EAAE;IAC/F,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,CAAC,CAAA;AACtF,CAAC,CAAA"}

package/lib/components/Table/features/columnsSelection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/Table/features/columnsSelection/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,uBAAuB,CAAA;AACrC,cAAc,eAAe,CAAA"}

package/lib/components/Table/helpers.d.ts

@@ -0,0 +1,2 @@
+import { ColumnType, RowData } from './tableTypes';
+export declare const getColumnId: <D extends RowData>({ id, accessor, Header }: ColumnType<D>) => string;

package/lib/components/Table/helpers.js

@@ -0,0 +1,10 @@
+export const getColumnId = ({ id, accessor, Header }) => {
+    if (id) {
+        return id;
+    }
+    if (typeof accessor === 'string') {
+        return accessor;
+    }
+    return Header;
+};
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/Table/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAoB,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAiB,EAAE,EAAE;IACxF,IAAI,EAAE,EAAE,CAAC;QACP,OAAO,EAAE,CAAA;IACX,CAAC;IAED,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,QAAQ,CAAA;IACjB,CAAC;IAED,OAAO,MAAgB,CAAA;AACzB,CAAC,CAAA"}

package/lib/components/Table/tableTypes.d.ts

@@ -0,0 +1,80 @@
+import { ReactNode } from 'react';
+export type RowData = object;
+export type HeaderProps<D extends RowData> = {
+    rows: RowType<D>[];
+    data: D[];
+};
+export type AccessorFn<TItem> = (item: TItem) => ReactNode | number | string | string[];
+export type Renderable<TProps> = (props: TProps) => ReactNode | JSX.Element | string;
+export type Column<D extends RowData> = {
+    id: string;
+    index: number;
+    hidden: boolean;
+    canHide: boolean;
+    columns: Column<D>[];
+};
+export type ColumnCoreType<D extends RowData = object, V = any> = {
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    Footer?: string | Renderable<HeaderProps<D>>;
+    notAvailable?: boolean;
+    Cell?: Renderable<CellType<D, V>>;
+    canHide?: boolean;
+    align?: 'left' | 'center' | 'right';
+    disableResizing?: boolean;
+    disableSortBy?: boolean;
+    filterable?: boolean;
+    sortType?: (r1: RowType<D>, r2: RowType<D>) => number;
+};
+export type ColumnIdentifier<D extends RowData> = {
+    id: string;
+    accessor?: keyof D | AccessorFn<D>;
+    Header?: string | Renderable<HeaderProps<D>>;
+} | {
+    id?: never;
+    Header: string;
+    accessor?: keyof D | AccessorFn<D>;
+} | {
+    id?: never;
+    Header?: never;
+    accessor: keyof D;
+};
+export type ColumnType<D extends RowData = object, V = any> = ColumnCoreType<D, V> & ColumnIdentifier<D>;
+export type RowType<D extends RowData, K = any> = {
+    id: string;
+    getCanExpand: () => boolean;
+    getIsExpanded: () => boolean;
+    getToggleExpandedHandler: () => () => void;
+    original: D;
+    subRows: RowType<D, K>[];
+    index: number;
+    getValue: <T = K>(columnId: string) => T;
+};
+export type CellType<D extends RowData, V = any> = {
+    row: RowType<D, V>;
+    column: Column<D>;
+    value: V;
+};
+export type SortingRule = {
+    id: string;
+    desc?: boolean | undefined;
+};
+export type InitialState = Partial<TableState>;
+export type TableState = {
+    hiddenColumns: string[];
+    columnOrder: string[];
+    columnResizing: {
+        columnWidths: Record<string, number>;
+    };
+    sortBy: SortingRule[];
+    paginationOptions?: {
+        pageIndex?: number;
+        pageSize?: number;
+    };
+};
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData, TValue> {
+        align?: 'center' | 'left' | 'right';
+    }
+}

package/lib/components/Table/tableTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tableTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tableTypes.js","sourceRoot":"","sources":["../../../src/components/Table/tableTypes.ts"],"names":[],"mappings":""}

package/lib/components/Table/useTrackTableState.d.ts

@@ -0,0 +1,3 @@
+import { Table } from '@tanstack/react-table';
+import { RowData, TableState } from './tableTypes';
+export declare const useTrackTableState: <D extends RowData>(tableInstance: Table<D>, onChange?: ((state: TableState) => void) | null) => void;

package/lib/components/Table/useTrackTableState.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import { useRefValue } from '../../hooks';
+export const useTrackTableState = (tableInstance, onChange) => {
+    const { columnOrder, columnVisibility, columnSizing, sorting, pagination: { pageSize }, } = tableInstance.getState();
+    const skippedInitialStateChangeRef = useRef(false);
+    const getOnChange = useRefValue(onChange);
+    useEffect(() => {
+        const cb = getOnChange();
+        if (cb && skippedInitialStateChangeRef.current) {
+            cb({
+                sortBy: sorting,
+                paginationOptions: { pageSize },
+                columnOrder: columnOrder,
+                columnResizing: {
+                    columnWidths: columnSizing,
+                },
+                hiddenColumns: Object.entries(columnVisibility).reduce((res, [id, visible]) => {
+                    if (!visible) {
+                        return [...res, id];
+                    }
+                    return res;
+                }, []),
+            });
+        }
+        else {
+            skippedInitialStateChangeRef.current = true;
+        }
+    }, [sorting, pageSize, columnOrder, columnVisibility, columnSizing, getOnChange]);
+};
+//# sourceMappingURL=useTrackTableState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackTableState.js","sourceRoot":"","sources":["../../../src/components/Table/useTrackTableState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAoB,aAAuB,EAAE,QAA+C,EAAE,EAAE;IAChI,MAAM,EACJ,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,OAAO,EACP,UAAU,EAAE,EAAE,QAAQ,EAAE,GACzB,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAA;IAC5B,MAAM,4BAA4B,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAClD,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;QACxB,IAAI,EAAE,IAAI,4BAA4B,CAAC,OAAO,EAAE,CAAC;YAC/C,EAAE,CAAC;gBACD,MAAM,EAAE,OAAwB;gBAChC,iBAAiB,EAAE,EAAE,QAAQ,EAAE;gBAC/B,WAAW,EAAE,WAAW;gBACxB,cAAc,EAAE;oBACd,YAAY,EAAE,YAAY;iBAC3B;gBACD,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,EAAE;oBACtF,IAAI,CAAC,OAAO,EAAE,CAAC;wBACb,OAAO,CAAC,GAAG,GAAG,EAAE,EAAE,CAAC,CAAA;oBACrB,CAAC;oBAED,OAAO,GAAG,CAAA;gBACZ,CAAC,EAAE,EAAE,CAAC;aACP,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,4BAA4B,CAAC,OAAO,GAAG,IAAI,CAAA;QAC7C,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,CAAA;AACnF,CAAC,CAAA"}

package/lib/components/Table/utils.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+import { ColumnDef, Row as TableRow, InitialTableState, Cell, Column as TableColumn } from '@tanstack/react-table';
+import { CellType, ColumnType, InitialState, RowData, RowType, Column } from './tableTypes';
+export declare const prepareRow: <D extends RowData>({ getCanExpand, getIsExpanded, getToggleExpandedHandler, original, subRows, id, index, getValue, }: TableRow<D>) => RowType<D>;
+export declare const prepareColumn: <D extends RowData>({ id, columns, getIndex, getCanHide, getIsVisible }: TableColumn<D>) => Column<D>;
+export declare const prepareCell: <D extends RowData, V = unknown>({ getValue, row, column }: Cell<D, V>) => CellType<D, V>;
+export declare const getColumnDef: <D extends RowData>({ id, width: size, minWidth: minSize, maxWidth: maxSize, Header, Footer, Cell, align, filterable, disableSortBy, disableResizing, canHide: enableHiding, sortType: sortingFn, accessor, }: ColumnType<D>) => ColumnDef<D>;
+export declare const getTableInitialState: ({ hiddenColumns, columnOrder, sortBy, columnResizing, paginationOptions: pagination, }: InitialState) => InitialTableState;
+export declare const getCellStyle: ({ size: width, minSize: minWidth, maxSize: maxWidth, }: {
+    size: number;
+    minSize?: number;
+    maxSize?: number;
+}) => CSSProperties;
+export declare const getRowStyle: ({ totalSize }: {
+    totalSize: number;
+}) => CSSProperties;

package/lib/components/Table/utils.js

@@ -0,0 +1,121 @@
+export const prepareRow = ({ getCanExpand, getIsExpanded, getToggleExpandedHandler, original, subRows, id, index, getValue, }) => ({
+    id,
+    getCanExpand,
+    getIsExpanded,
+    getToggleExpandedHandler,
+    original,
+    index,
+    getValue,
+    subRows: subRows.map(prepareRow),
+});
+export const prepareColumn = ({ id, columns, getIndex, getCanHide, getIsVisible }) => ({
+    id,
+    index: getIndex(),
+    canHide: getCanHide(),
+    hidden: !getIsVisible(),
+    columns: columns.map(prepareColumn),
+});
+export const prepareCell = ({ getValue, row, column }) => ({
+    column: prepareColumn(column),
+    value: getValue(),
+    row: prepareRow(row),
+});
+const getRendererProps = (props) => {
+    const rendererProps = {
+        rows: [],
+        data: [],
+    };
+    props.table.getRowModel().rows.forEach((row) => {
+        const item = prepareRow(row);
+        rendererProps.rows.push(item);
+        rendererProps.data.push(item.original);
+    });
+    return rendererProps;
+};
+export const getColumnDef = ({ id, width: size, minWidth: minSize, maxWidth: maxSize, Header, Footer, Cell, align, filterable, disableSortBy, disableResizing, canHide: enableHiding, sortType: sortingFn, accessor, }) => {
+    const commonDef = {
+        id,
+        header: typeof Header === 'function' ? (props) => Header(getRendererProps(props)) : Header,
+        footer: typeof Footer === 'function' ? (props) => Footer(getRendererProps(props)) : Footer,
+        enableHiding,
+        sortDescFirst: false,
+        enableSorting: true,
+        meta: { align },
+        enableResizing: !disableResizing,
+    };
+    if (size != undefined) {
+        commonDef.size = size;
+    }
+    if (minSize != undefined) {
+        commonDef.minSize = minSize;
+    }
+    if (maxSize !== undefined) {
+        commonDef.maxSize = maxSize;
+    }
+    if (sortingFn != undefined) {
+        commonDef.sortingFn = (rowA, rowB) => sortingFn(prepareRow(rowA), prepareRow(rowB));
+    }
+    if (Cell != undefined) {
+        commonDef.cell =
+            typeof Cell === 'function'
+                ? (props) => Cell({ column: prepareColumn(props.column), row: prepareRow(props.row), value: props.getValue() })
+                : Cell;
+    }
+    if (filterable !== undefined) {
+        commonDef.enableColumnFilter = filterable;
+    }
+    if (disableSortBy !== undefined) {
+        commonDef.enableSorting = !disableSortBy;
+    }
+    if (accessor != undefined) {
+        if (typeof accessor === 'function') {
+            return {
+                id: '',
+                ...commonDef,
+                accessorFn: (value) => accessor(value),
+            };
+        }
+        return {
+            ...commonDef,
+            accessorKey: accessor,
+        };
+    }
+    return commonDef;
+};
+const getColumnVisibility = (hiddenColumns) => {
+    const result = {};
+    hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.forEach((column) => {
+        result[column] = false;
+    });
+    return result;
+};
+export const getTableInitialState = ({ hiddenColumns, columnOrder, sortBy, columnResizing, paginationOptions: pagination, }) => {
+    var _a, _b;
+    return ({
+        pagination,
+        columnOrder,
+        columnSizing: (_a = columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.columnWidths) !== null && _a !== void 0 ? _a : {},
+        columnVisibility: getColumnVisibility(hiddenColumns),
+        sorting: (_b = sortBy === null || sortBy === void 0 ? void 0 : sortBy.map(({ id, desc }) => ({ id, desc: !!desc }))) !== null && _b !== void 0 ? _b : [],
+    });
+};
+export const getCellStyle = ({ size: width, minSize: minWidth, maxSize: maxWidth, }) => {
+    const style = {
+        width,
+        minWidth: minWidth || width,
+        flex: `${width} 0 auto`,
+        boxSizing: 'border-box',
+    };
+    if (maxWidth) {
+        style.maxWidth = maxWidth;
+    }
+    return style;
+};
+export const getRowStyle = ({ totalSize }) => {
+    // fix unit tests console error "`NaN` is an invalid value"
+    const minWidth = isNaN(totalSize) ? 0 : totalSize;
+    return {
+        minWidth,
+    };
+};
+//# sourceMappingURL=utils.js.map

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

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

package/lib/components/Tabs/Tab.d.ts

@@ -0,0 +1,33 @@
+import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
+export type AnchorTabProps = {
+    component: 'a';
+    href: string;
+};
+export type ButtonTabProps = {
+    component?: 'button';
+    href?: never;
+};
+type TabTypeProps = AnchorTabProps | ButtonTabProps;
+type TabLabelProps = {
+    children: ReactNode;
+    ariaLabel?: string;
+};
+export type TabCommonProps = {
+    value: number;
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement> | KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    className?: string;
+};
+export type TabProps<T = TabTypeProps> = TabCommonProps & T & TabLabelProps;
+/**
+ * ### Purpose
+ * A single tab implementation that works together with TabContext and TabList components.
+ *
+ * ### General Info
+ * - Use as a direct child of TabList component.
+ * - Implemented as `Tabs with Manual Activation` since displaying a new panel in some cases might
+ * cause a network request and therefore devastate the experience for keyboard/screen reader users.
+ * More info - https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
+ *
+ */
+export declare const Tab: FC<TabProps>;
+export {};

package/lib/components/Tabs/Tab.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import { useTabContext, getTabId, getPanelId } from './TabContext';
+import { keyIsOneOf } from '../../utils/keyboard';
+import styles from './Tab.module.scss';
+/**
+ * ### Purpose
+ * A single tab implementation that works together with TabContext and TabList components.
+ *
+ * ### General Info
+ * - Use as a direct child of TabList component.
+ * - Implemented as `Tabs with Manual Activation` since displaying a new panel in some cases might
+ * cause a network request and therefore devastate the experience for keyboard/screen reader users.
+ * More info - https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
+ *
+ */
+export const Tab = ({ component: Component = 'button', value, href, onClick, children, ariaLabel, className }) => {
+    const { onChange, value: activeValue, idPrefix, fullWidth } = useTabContext();
+    const selected = value === activeValue;
+    const handleClick = useCallback((event) => {
+        if (selected) {
+            return;
+        }
+        if (onClick) {
+            onClick(event);
+        }
+        onChange(value);
+    }, [value, selected, onChange, onClick]);
+    // Since we're not automatically following focus we have
+    // to handle keyboard selection with Enter and Space ourselves.
+    const onKeyPress = useCallback((event) => {
+        event.preventDefault();
+        if (keyIsOneOf(event, 'Enter', 'Space')) {
+            handleClick(event);
+        }
+    }, [handleClick]);
+    return (React.createElement(Component, { className: cn(styles.tab, { [styles.selected]: selected, [styles.fullWidth]: fullWidth }, className), role: "tab", id: getTabId(idPrefix, value.toString()), "aria-controls": getPanelId(idPrefix, value.toString()), "aria-selected": selected, tabIndex: selected ? 0 : -1, onKeyPress: onKeyPress, onClick: handleClick, ...(Component === 'a' && !selected && { href }), "aria-label": ariaLabel }, children));
+};
+//# sourceMappingURL=Tab.js.map