@scality/core-ui 0.115.0

package/dist/components/tablev2/MultiSelectableContent.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, memo } from 'react';
+import { areEqual } from 'react-window';
+import { useTableContext } from './Tablev2.component';
+import { HeadRow, NoResult, SortCaret, TableBody, TableHeader, TableRowMultiSelectable, } from './Tablestyle';
+import { useTableScrollbar, VirtualizedRows } from './TableCommon';
+import useSyncedScroll from './useSyncedScroll';
+import { Box } from '../box/Box';
+import { Loader } from '../loader/Loader.component';
+import { spacing } from '../../spacing';
+const translations = {
+    en: {
+        noResult: 'No results found',
+    },
+    fr: {
+        noResult: `Aucun résultat`,
+    },
+};
+/**
+ * FIXME Need to spend time to change the type to something like this
+ */
+// type MultiSelectableContentProps<ENTRY extends Record<string, any>> = {
+//   onMultiSelectionChanged: (rows: Row<ENTRY>[]) => void;
+//   rowHeight?: TableHeightKeyType;
+//   separationLineVariant?: TableVariantType;
+//   backgroundVariant?: TableVariantType;
+//   customItemKey?: (index: Number, data: ENTRY) => string;
+// } & ({
+//   locale: TableLocalType;
+// } | {
+//   children: (rows: JSX.Element) => JSX.Element;
+//   });
+export const MultiSelectableContent = ({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', backgroundVariant = 'backgroundLevel1', locale = 'en', customItemKey, isLoadingMoreItems, children, }) => {
+    const { headerGroups, prepareRow, rows, setRowHeight, setHiddenColumns, selectedRowIds, onBottom, onBottomOffset, isAllRowsSelected, toggleAllRowsSelected, } = useTableContext();
+    useEffect(() => {
+        setRowHeight(rowHeight);
+    }, [rowHeight, setRowHeight]);
+    useEffect(() => {
+        setHiddenColumns((oldHiddenColumns) => {
+            return oldHiddenColumns.filter((column) => column !== 'selection');
+        });
+    }, [setHiddenColumns]);
+    const handleMultipleSelectedRows = (selectedRowIds, rows, currentRow, currentRowIndex) => {
+        const keys = Object.keys(selectedRowIds);
+        if (onMultiSelectionChanged) {
+            if (currentRow.isSelected) {
+                // we remove the item from the list
+                onMultiSelectionChanged(rows.filter((row) => keys.includes(row.id) && rows[currentRowIndex].id !== row.id));
+            }
+            else {
+                // we add the new item from the list
+                onMultiSelectionChanged([
+                    ...rows.filter((row) => keys.includes(row.id)),
+                    rows[currentRowIndex],
+                ]);
+            }
+        }
+        currentRow.toggleRowSelected(!currentRow.isSelected);
+    };
+    const { hasScrollbar, setHasScrollbar, scrollBarWidth, handleScrollbarWidth, } = useTableScrollbar();
+    const itemKey = (index, data) => {
+        if (typeof customItemKey === 'function') {
+            return customItemKey(index, data);
+        }
+        return index;
+    };
+    const { bodyRef, headerRef } = useSyncedScroll();
+    const RenderRow = memo(({ index, style }) => {
+        const row = rows[index];
+        prepareRow(row);
+        const rowProps = {
+            ...row.getRowProps({
+                /**
+                 * Note:We need to pass the style property to the row component.
+                 * Otherwise when we scroll down, the next rows are flashing
+                 * because they are re-rendered in loop.
+                 */
+                style: { ...style },
+            }),
+            onClick: onSingleRowSelected
+                ? () => {
+                    onSingleRowSelected(row);
+                    toggleAllRowsSelected(false);
+                    row.toggleRowSelected(true);
+                }
+                : () => handleMultipleSelectedRows(selectedRowIds, rows, row, index),
+        };
+        return (_jsx(TableRowMultiSelectable, { ...rowProps, isSelected: row.isSelected, separationLineVariant: separationLineVariant, backgroundVariant: backgroundVariant, className: "tr", children: row.cells.map((cell) => {
+                const cellProps = cell.getCellProps({
+                    style: {
+                        ...cell.column.cellStyle,
+                        // Vertically center the text in cells.
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                    },
+                    role: 'gridcell',
+                });
+                if (cell.column.id === 'selection') {
+                    return (_jsx("div", { ...cellProps, onClick: onSingleRowSelected
+                            ? (event) => {
+                                event.stopPropagation();
+                                handleMultipleSelectedRows(selectedRowIds, rows, row, index);
+                            }
+                            : undefined, children: cell.render('Cell') }));
+                }
+                return (_jsx("div", { ...cellProps, className: "td", children: cell.render('Cell') }));
+            }) }));
+    }, areEqual);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, ref: headerRef, children: headerGroup.headers.map((column) => {
+                        const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
+                            style: { ...column === null || column === void 0 ? void 0 : column.cellStyle, position: 'relative' },
+                        }));
+                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", children: _jsxs("div", { children: [column.id === 'selection' ? (_jsx("div", { onClick: (event) => {
+                                            const eventTarget = event.target;
+                                            if (onToggleAll) {
+                                                onToggleAll(eventTarget.checked);
+                                            }
+                                            if (onMultiSelectionChanged) {
+                                                if (isAllRowsSelected) {
+                                                    onMultiSelectionChanged([]);
+                                                }
+                                                else {
+                                                    onMultiSelectionChanged(rows);
+                                                }
+                                            }
+                                        }, children: column.render('Header') })) : (column.render('Header')), _jsx(SortCaret, { column: column })] }) }));
+                    }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: typeof children === 'function' ? (children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }))) : rows.length ? (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow })) : (_jsx(NoResult, { children: translations[locale].noResult })) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
+};

package/dist/components/tablev2/Search.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Props } from '../searchinput/SearchInput.component';
+import { TableLocalType } from './TableUtils';
+export type DisplayedName = {
+    plural: string;
+    singular: string;
+};
+export type SearchProps = {
+    onChange: (arg0: string) => void;
+    value?: string;
+    /**
+     * @deprecated
+     * All the Table should display the Total Number of Entity.
+     */
+    displayTotalOf?: boolean;
+    displayedName: DisplayedName;
+    locale?: TableLocalType;
+    totalCount?: number;
+} & Omit<Props, 'disableToggle'>;
+export declare const TableItemCount: ({ entity, count, locale, }: {
+    entity: {
+        singular: string;
+        plural: string;
+    };
+    count: number;
+    locale: 'en' | 'fr';
+}) => JSX.Element;
+export declare function TableSearch(props: SearchProps): JSX.Element;
+//# sourceMappingURL=Search.d.ts.map

package/dist/components/tablev2/Search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Search.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,aAAa,CAAC;IAC7B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;AA0BjC,eAAO,MAAM,cAAc;YAKjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;WACrC,MAAM;YACL,IAAI,GAAG,IAAI;iBAapB,CAAC;AAEF,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,eAsC7C"}

package/dist/components/tablev2/Search.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+import { useTableContext } from './Tablev2.component';
+import { SearchInput } from '../searchinput/SearchInput.component';
+import { BasicText } from '../text/Text.component';
+import { spacing } from '../../spacing';
+const SearchContainer = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const ResultContainer = styled(BasicText) `
+  font-weight: bold;
+`;
+const translations = {
+    en: {
+        search: 'Search',
+        total: 'Total: ',
+    },
+    fr: {
+        search: `Rechercher`,
+        total: `Total : `,
+    },
+};
+const TableItemCountContainer = styled(BasicText) `
+  display: flex;
+  flex-direction: column;
+  margin-right: ${spacing.r8};
+  min-width: 4.3rem;
+`;
+export const TableItemCount = ({ entity, count, locale, }) => {
+    return (_jsxs(TableItemCountContainer, { children: [_jsx("span", { children: translations[locale].total }), _jsxs(ResultContainer, { children: [count, ' ', count > 1
+                        ? entity.plural
+                        : (count === 1 || count === 0) && entity.singular] })] }));
+};
+export function TableSearch(props) {
+    const { onChange, value = '', displayTotalOf = true, displayedName, locale = 'en', totalCount, ...rest } = props;
+    const { setGlobalFilter, rows, preGlobalFilteredRows } = useTableContext();
+    const totalDispayedRows = totalCount ? totalCount : rows.length;
+    React.useEffect(() => {
+        setGlobalFilter(value);
+    }, [value, setGlobalFilter, preGlobalFilteredRows]);
+    return (_jsxs(SearchContainer, { children: [displayTotalOf && (_jsx(TableItemCount, { entity: displayedName, count: totalDispayedRows, locale: locale })), _jsx(SearchInput, { value: value, placeholder: translations[locale].search, disableToggle: true, onChange: (evt) => {
+                    if (typeof onChange === 'function') {
+                        // @ts-ignore
+                        onChange(evt.target.value);
+                    }
+                }, ...rest })] }));
+}

package/dist/components/tablev2/SearchWithQueryParams.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SearchProps } from './Search';
+export type SearchWithQueryParamsProps = {
+    queryParams?: string;
+} & SearchProps;
+export declare function SearchWithQueryParams(props: any): JSX.Element;
+//# sourceMappingURL=SearchWithQueryParams.d.ts.map

package/dist/components/tablev2/SearchWithQueryParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SearchWithQueryParams.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAyB,WAAW,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,0BAA0B,GAAG;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,WAAW,CAAC;AAEhB,wBAAgB,qBAAqB,CAAC,KAAK,KAAA,eA6B1C"}

package/dist/components/tablev2/SearchWithQueryParams.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { TableSearch as Search } from './Search';
+export function SearchWithQueryParams(props) {
+    const { queryParams = 'search', onChange, ...rest } = props;
+    const { search, pathname } = useLocation();
+    const history = useHistory();
+    const params = new URLSearchParams(search);
+    const initialValue = params.get(queryParams);
+    const [value, setValue] = useState(initialValue);
+    function handleOnChange(value) {
+        const { onChange } = props;
+        params.set(queryParams, value);
+        history.replace(`${pathname}?${params.toString()}`);
+        setValue(value);
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+    }
+    return (_jsx(Search, { onChange: handleOnChange, value: value, onReset: () => {
+            handleOnChange('');
+        }, ...rest }));
+}

package/dist/components/tablev2/SingleSelectableContent.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Row } from 'react-table';
+import { TableHeightKeyType, TableLocalType, TableVariantType } from './TableUtils';
+export type SingleSelectableContentProps<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
+    rowHeight: TableHeightKeyType;
+    separationLineVariant: TableVariantType;
+    backgroundVariant: TableVariantType;
+    onRowSelected?: (row: Row<DATA_ROW>) => void;
+    selectedId?: string;
+    locale?: TableLocalType;
+    customItemKey?: (index: Number, data: DATA_ROW) => string;
+    hasScrollbar?: boolean;
+    isLoadingMoreItems?: boolean;
+    children?: (rows: JSX.Element) => JSX.Element;
+};
+export declare function SingleSelectableContent<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rowHeight, separationLineVariant, backgroundVariant, locale, selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }: SingleSelectableContentProps<DATA_ROW>): JSX.Element;
+//# sourceMappingURL=SingleSelectableContent.d.ts.map

package/dist/components/tablev2/SingleSelectableContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSelectableContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/SingleSelectableContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAUlC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,4BAA4B,CACtC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,SAAS,EAAE,kBAAkB,CAAC;IAC9B,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;IACpC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;CAC/C,CAAC;AAgBF,wBAAgB,uBAAuB,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,EACA,SAAiB,EACjB,qBAA0C,EAC1C,iBAAsC,EACtC,MAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,CAAC,QAAQ,CAAC,eA6JxC"}

package/dist/components/tablev2/SingleSelectableContent.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect } from 'react';
+import { areEqual } from 'react-window';
+import { useTableContext } from './Tablev2.component';
+import { HeadRow, TableRow, TableBody, TableHeader, NoResult, SortCaret, } from './Tablestyle';
+import { useTableScrollbar, VirtualizedRows } from './TableCommon';
+import useSyncedScroll from './useSyncedScroll';
+import { Loader } from '../loader/Loader.component';
+import { Box } from '../box/Box';
+import { spacing } from '../../spacing';
+const translations = {
+    en: {
+        noResult: 'No results found',
+    },
+    fr: {
+        noResult: `Aucun résultat`,
+    },
+};
+export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', backgroundVariant = 'backgroundLevel1', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }) {
+    if (selectedId && !onRowSelected) {
+        console.error('Please specify the onRowSelected function.');
+    }
+    const { bodyRef, headerRef } = useSyncedScroll();
+    const { headerGroups, prepareRow, rows, onBottom, onBottomOffset, setRowHeight, } = useTableContext();
+    useEffect(() => {
+        setRowHeight(rowHeight);
+    }, [rowHeight, setRowHeight]);
+    const RenderRow = memo(({ index, style }) => {
+        const row = rows[index];
+        prepareRow(row);
+        let rowProps = row.getRowProps({
+            /**
+             * Note: We need to pass the style property to the row component.
+             * Otherwise when we scroll down, the next rows are flashing
+             * because they are re-rendered in loop.
+             */
+            style: { ...style },
+        });
+        rowProps = {
+            ...rowProps,
+            ...{
+                onClick: () => {
+                    if (onRowSelected)
+                        return onRowSelected(row);
+                },
+            },
+        };
+        return (_jsx(TableRow, { ...rowProps, isSelected: selectedId === row.id, "aria-selected": selectedId === row.id ? 'true' : 'false', separationLineVariant: separationLineVariant, backgroundVariant: backgroundVariant, selectedId: selectedId, className: "tr", children: row.cells.map((cell) => {
+                let cellProps = cell.getCellProps({
+                    style: {
+                        ...cell.column.cellStyle,
+                        // Vertically center the text in cells.
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                    },
+                    role: 'gridcell',
+                });
+                return (_jsx("div", { ...cellProps, className: "td", children: cell.render('Cell') }));
+            }) }));
+    }, areEqual);
+    const { hasScrollbar, setHasScrollbar, scrollBarWidth, handleScrollbarWidth, } = useTableScrollbar();
+    function itemKey(index, data) {
+        if (typeof customItemKey === 'function') {
+            return customItemKey(index, data);
+        }
+        return index;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "thead", role: "rowgroup", children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), ref: headerRef, hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, style: { overflow: 'hidden' }, children: headerGroup.headers.map((column) => {
+                        const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
+                            style: { ...column.cellStyle, position: 'relative' },
+                        }));
+                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
+                    }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: typeof children === 'function' ? (children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }))) : rows.length ? (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow })) : (_jsx(NoResult, { children: translations[locale].noResult })) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
+}

package/dist/components/tablev2/TableCommon.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, LegacyRef } from 'react';
+import { Row } from 'react-table';
+import { FixedSizeList, ListChildComponentProps, ListItemKeySelector } from 'react-window';
+import { TableHeightKeyType } from './TableUtils';
+type VirtualizedRowsType<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
+    rows: Row<DATA_ROW>[];
+    RenderRow: ComponentType<ListChildComponentProps<Row<DATA_ROW>[]>>;
+    rowHeight: TableHeightKeyType;
+    setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
+    hasScrollbar?: boolean;
+    itemKey?: ListItemKeySelector<Row<DATA_ROW>[]>;
+    onBottom?: (rowLength: number) => void;
+    onBottomOffset?: number;
+    listRef?: LegacyRef<FixedSizeList<Row<DATA_ROW>[]>>;
+};
+export declare const VirtualizedRows: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }: VirtualizedRowsType<DATA_ROW>) => JSX.Element;
+export declare const useTableScrollbar: () => {
+    hasScrollbar: boolean;
+    setHasScrollbar: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    scrollBarWidth: number;
+    handleScrollbarWidth: (node: any) => void;
+};
+export {};
+//# sourceMappingURL=TableCommon.d.ts.map

package/dist/components/tablev2/TableCommon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCommon.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableCommon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,aAAa,EAEb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,kBAAkB,EAEnB,MAAM,cAAc,CAAC;AAEtB,KAAK,mBAAmB,CACtB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAChE;IACF,IAAI,EAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IACtB,SAAS,EAAE,aAAa,CAAC,uBAAuB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,kBAAkB,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF,eAAO,MAAM,eAAe,kNA8C3B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAwB7B,CAAC"}

package/dist/components/tablev2/TableCommon.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList as List, } from 'react-window';
+import { convertRemToPixels, tableRowHeight, } from './TableUtils';
+export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
+        return (_jsx(List, { height: height, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: width, itemKey: itemKey, itemData: rows, ref: listRef, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
+                setHasScrollbar(visibleStopIndex - visibleStartIndex < overscanStopIndex);
+                if (onBottom &&
+                    onBottomOffset != null &&
+                    overscanStopIndex >= rows.length - 1 - onBottomOffset) {
+                    onBottom(rows.length);
+                }
+            }, children: RenderRow }));
+    } }));
+export const useTableScrollbar = () => {
+    const [hasScrollbar, setHasScrollbar] = useState(false);
+    const [scrollBarWidth, setScrollBarWidth] = useState(0);
+    const handleScrollbarWidth = useCallback((node) => {
+        if (node) {
+            const scrollDiv = document.createElement('div');
+            scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
+            node.appendChild(scrollDiv);
+            const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            node.removeChild(scrollDiv);
+            setScrollBarWidth(scrollbarWidth);
+        }
+    }, []);
+    return {
+        hasScrollbar,
+        setHasScrollbar,
+        scrollBarWidth,
+        handleScrollbarWidth,
+    };
+};

package/dist/components/tablev2/TableUtils.d.ts

@@ -0,0 +1,18 @@
+declare const STATUS_CRITICAL = "critical";
+declare const STATUS_WARNING = "warning";
+declare const STATUS_NONE = "none";
+declare const STATUS_HEALTH = "healthy";
+type StatusType = typeof STATUS_CRITICAL | typeof STATUS_WARNING | typeof STATUS_NONE | typeof STATUS_HEALTH;
+export declare function compareHealth(status1: StatusType, status2: StatusType): number | undefined;
+export declare function convertRemToPixels(rem: any): number;
+export type TableLocalType = 'en' | 'fr';
+export type TableHeightKeyType = 'h32' | 'h40' | 'h48' | 'h64';
+export type TableVariantType = 'backgroundLevel1' | 'backgroundLevel2' | 'backgroundLevel3' | 'backgroundLevel4';
+export declare const tableRowHeight: {
+    h32: string;
+    h40: string;
+    h48: string;
+    h64: string;
+};
+export {};
+//# sourceMappingURL=TableUtils.d.ts.map

package/dist/components/tablev2/TableUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/TableUtils.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,eAAe,aAAa,CAAC;AACnC,QAAA,MAAM,cAAc,YAAY,CAAC;AACjC,QAAA,MAAM,WAAW,SAAS,CAAC;AAC3B,QAAA,MAAM,aAAa,YAAY,CAAC;AAEhC,KAAK,UAAU,GACX,OAAO,eAAe,GACtB,OAAO,cAAc,GACrB,OAAO,WAAW,GAClB,OAAO,aAAa,CAAC;AAGzB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,UAAU,GAClB,MAAM,GAAG,SAAS,CAuBpB;AAED,wBAAgB,kBAAkB,CAAC,GAAG,KAAA,UAErC;AACD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAE/D,MAAM,MAAM,gBAAgB,GACxB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,GAClB,kBAAkB,CAAC;AAGvB,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC"}

package/dist/components/tablev2/TableUtils.js

@@ -0,0 +1,32 @@
+const STATUS_CRITICAL = 'critical';
+const STATUS_WARNING = 'warning';
+const STATUS_NONE = 'none';
+const STATUS_HEALTH = 'healthy';
+// some common customized sortTypes
+export function compareHealth(status1, status2) {
+    if (![STATUS_WARNING, STATUS_CRITICAL, STATUS_NONE, STATUS_HEALTH].includes(status1) ||
+        ![STATUS_WARNING, STATUS_CRITICAL, STATUS_NONE, STATUS_HEALTH].includes(status2)) {
+        console.error('Invalid health status');
+        return;
+    }
+    const weights = {};
+    weights[STATUS_CRITICAL] = 3;
+    weights[STATUS_WARNING] = 2;
+    weights[STATUS_NONE] = 1;
+    weights[STATUS_HEALTH] = 0;
+    return weights[status1] === weights[status2]
+        ? 0
+        : weights[status1] > weights[status2]
+            ? 1
+            : -1;
+}
+export function convertRemToPixels(rem) {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+// in rem unit
+export const tableRowHeight = {
+    h32: '2.286', //1 line
+    h40: '2.858', //2 line
+    h48: '3.428', //2 line
+    h64: '4.572', //3 line
+};

package/dist/components/tablev2/Tablestyle.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { TableHeightKeyType, TableVariantType } from './TableUtils';
+import { HeaderGroup } from 'react-table';
+export declare const SortIncentive: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const SortCaretWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    headerHeight?: string | number | undefined;
+}, never>;
+type HeadRowType = {
+    hasScrollBar: boolean;
+    scrollBarWidth: number;
+    rowHeight: TableHeightKeyType;
+};
+export declare const HeadRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HeadRowType, never>;
+type TableRowType = {
+    isSelected: boolean;
+    selectedId?: string;
+    separationLineVariant: TableVariantType;
+    backgroundVariant: TableVariantType;
+};
+export declare const TableRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TableRowType, never>;
+type TableRowMultiSelectableType = {
+    isSelected: boolean;
+    separationLineVariant: TableVariantType;
+    backgroundVariant: TableVariantType;
+};
+export declare const TableRowMultiSelectable: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TableRowMultiSelectableType, never>;
+export declare const TableBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TooltipContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const NoResult: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SortCaret: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ column, }: {
+    column: HeaderGroup<DATA_ROW>;
+}) => JSX.Element | null;
+export {};
+//# sourceMappingURL=Tablestyle.d.ts.map

package/dist/components/tablev2/Tablestyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tablestyle.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablestyle.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,kBAAkB,EAElB,gBAAgB,EACjB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1C,eAAO,MAAM,aAAa,0GAGzB,CAAC;AACF,eAAO,MAAM,gBAAgB,0GAG5B,CAAC;AACF,eAAO,MAAM,WAAW;;SAUvB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,kBAAkB,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,OAAO,kHAcnB,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,QAAQ,mHAqCpB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,qBAAqB,EAAE,gBAAgB,CAAC;IACxC,iBAAiB,EAAE,gBAAgB,CAAC;CACrC,CAAC;AACF,eAAO,MAAM,uBAAuB,kIA8BnC,CAAC;AAEF,eAAO,MAAM,SAAS,yGAIrB,CAAC;AACF,eAAO,MAAM,YAAY,yGAKxB,CAAC;AACF,eAAO,MAAM,cAAc,yGAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,yGAMpB,CAAC;AAEF,eAAO,MAAM,SAAS;;wBAsBrB,CAAC"}

package/dist/components/tablev2/Tablestyle.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { spacing } from '../../style/theme';
+import { tableRowHeight, } from './TableUtils';
+import { Icon } from '../icon/Icon.component';
+const borderSize = '4px';
+export const SortIncentive = styled.span `
+  position: absolute;
+  display: none;
+`;
+export const SortCaretWrapper = styled.span `
+  padding-left: ${spacing.sp4};
+  position: absolute;
+`;
+export const TableHeader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: ${(props) => props.headerHeight};
+  &:hover {
+    ${SortIncentive} {
+      display: block;
+    }
+  }
+`;
+export const HeadRow = styled.div `
+  display: flex;
+  align-items: center;
+  height: 2.286rem;
+  width: ${(props) => props.hasScrollBar
+    ? `calc(100% - ${props.scrollBarWidth}px - ${borderSize} )!important;` // -4px for border
+    : `calc(100% - ${borderSize} ) !important;`}
+  height: ${(props) => tableRowHeight[props.rowHeight]}rem;
+  table-layout: fixed;
+  cursor: pointer;
+  color: ${(props) => props.theme.textPrimary};
+  font-weight: bold;
+  overflow: hidden;
+`;
+export const TableRow = styled.div `
+  color: ${(props) => props.theme.textPrimary};
+  border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]};
+  :last-child {
+    border-bottom: 1px solid
+      ${(props) => props.theme[props.separationLineVariant]};
+  }
+  cursor: default;
+  box-sizing: border-box;
+
+  // single selectable case
+  ${(props) => {
+    if (props.selectedId) {
+        return css `
+        &:hover,
+        &:focus {
+          background-color: ${(props) => props.theme.highlight};
+          outline: none;
+          cursor: pointer;
+        }
+      `;
+    }
+}}
+
+  ${(props) => {
+    if (props.selectedId && props.isSelected) {
+        return css `
+        background-color: ${props.theme.highlight};
+        border-right: ${borderSize} solid ${props.theme.selectedActive};
+      `;
+    }
+    else {
+        const color = props.theme[props.backgroundVariant];
+        return css `
+        border-right: ${borderSize} solid ${color};
+      `;
+    }
+}}
+`;
+export const TableRowMultiSelectable = styled.div `
+  color: ${(props) => props.theme.textPrimary};
+  border-top: 1px solid ${(props) => props.theme[props.separationLineVariant]};
+  :last-child {
+    border-bottom: 1px solid
+      ${(props) => props.theme[props.separationLineVariant]};
+  }
+
+  box-sizing: border-box;
+
+  &:hover,
+  &:focus {
+    background-color: ${(props) => props.theme.highlight};
+    outline: none;
+    cursor: pointer;
+  }
+
+  ${(props) => {
+    if (props.isSelected) {
+        return css `
+        background-color: ${(props) => props.theme.highlight};
+        border-right: ${borderSize} solid ${props.theme.selectedActive};
+      `;
+    }
+    else {
+        const color = props.theme[props.backgroundVariant];
+        return css `
+        border-right: ${borderSize} solid ${color};
+      `;
+    }
+}}
+`;
+export const TableBody = styled.div `
+  display: block;
+  flex-grow: 1;
+  height: 100%;
+`;
+export const TableWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+export const TooltipContent = styled.div `
+  color: ${(props) => props.theme.textSecondary};
+  font-weight: bold;
+  min-width: 60px;
+`;
+export const NoResult = styled.div `
+  display: flex;
+  justify-content: center;
+  color: ${(props) => props.theme.textSecondary};
+  padding-top: ${spacing.sp8};
+  border-top: 1px solid ${(props) => props.theme.backgroundLevel3};
+`;
+export const SortCaret = ({ column, }) => {
+    return !column.disableSortBy ? (_jsx(SortCaretWrapper, { children: column.isSorted ? (column.isSortedDesc ? (_jsx(Icon, { name: "Sort-down" })) : (_jsx(Icon, { name: "Sort-up" }))) : (_jsx(SortIncentive, { children: _jsx(Icon, { name: "Sort" }) })) })) : null;
+};