@scality/core-ui 0.115.0

package/dist/components/tablev2/Tablev2.component.d.ts

@@ -0,0 +1,71 @@
+/// <reference path="react-table-config.d.ts" />
+/// <reference types="react" />
+import { CellProps as TableCellProps, CoreUIColumn, HeaderGroup, Row, SortByFn, TableBodyPropGetter, TableBodyProps } from 'react-table';
+import { TableHeightKeyType } from './TableUtils';
+type UpdateTableData<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
+    updateTableData?: <DATA_ROW_KEY extends keyof DATA_ROW>(rowId: string, columnName: DATA_ROW_KEY, value: DATA_ROW[DATA_ROW_KEY]) => void;
+};
+export type Column<D extends Record<string, unknown>> = CoreUIColumn<D>;
+export type CellProps<D extends Record<string, unknown>, V = unknown> = TableCellProps<D, V> & UpdateTableData<D>;
+export type TableProps<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
+    columns: Array<Column<DATA_ROW>>;
+    defaultSortingKey?: string;
+    data: DATA_ROW[];
+    children: JSX.Element | JSX.Element[];
+    getRowId?: (originalRow: DATA_ROW, relativeIndex: number, parent?: Row<DATA_ROW>) => string;
+    sortTypes?: Record<string, SortByFn<DATA_ROW>>;
+    globalFilter?: string;
+    onBottom?: (rowLength: number) => void;
+    onBottomOffset?: number;
+    allFilters?: {
+        id: string;
+        value: string;
+    }[];
+    initiallySelectedRowsIds?: Set<string | number>;
+} & UpdateTableData<DATA_ROW>;
+type setHiddenColumnFuncType = (oldHidden: string[]) => string[];
+type TableContextType<DATA_ROW extends Record<string, unknown> = Record<string, unknown>> = {
+    headerGroups: HeaderGroup<DATA_ROW>[];
+    rows: Row<DATA_ROW>[];
+    prepareRow: (row: Row<DATA_ROW>) => void;
+    getTableBodyProps: (propGetter?: TableBodyPropGetter<DATA_ROW>) => TableBodyProps;
+    rowHeight: TableHeightKeyType;
+    setRowHeight: (rowHeight: TableHeightKeyType) => void;
+    selectedRowIds: Record<string, boolean>;
+    selectedFlatRows: Row<DATA_ROW>[];
+    preGlobalFilteredRows: Row<DATA_ROW>[];
+    setGlobalFilter: (filterValue: string) => void;
+    globalFilter: any;
+    setFilter: (columnId: string, updater: any) => void;
+    onBottom?: (rowLength: number) => void;
+    onBottomOffset?: number;
+    setHiddenColumns: (param: string[] | setHiddenColumnFuncType) => void;
+    isAllRowsSelected?: boolean;
+    toggleAllRowsSelected: (value?: boolean) => void;
+};
+export declare const useTableContext: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>() => TableContextType<DATA_ROW>;
+export declare const EmptyCell: ({ tooltipContent, mr, }: {
+    tooltipContent?: string | JSX.Element | undefined;
+    mr?: number | undefined;
+}) => JSX.Element;
+declare function Table<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ columns, data, defaultSortingKey, getRowId, children, sortTypes, globalFilter, allFilters, onBottom, onBottomOffset, initiallySelectedRowsIds, updateTableData, }: TableProps<DATA_ROW>): JSX.Element;
+declare namespace Table {
+    var SingleSelectableContent: typeof import("./SingleSelectableContent").SingleSelectableContent;
+    var MultiSelectableContent: <DATA_ROW extends Record<string, unknown> = Record<string, unknown>>({ onMultiSelectionChanged, onSingleRowSelected, onToggleAll, rowHeight, separationLineVariant, backgroundVariant, locale, customItemKey, isLoadingMoreItems, children, }: {
+        onMultiSelectionChanged?: ((rows: Row<DATA_ROW>[]) => void) | undefined;
+        onSingleRowSelected?: ((row: Row<DATA_ROW>) => void) | undefined;
+        onToggleAll?: ((selected: boolean) => void) | undefined;
+        rowHeight?: TableHeightKeyType | undefined;
+        separationLineVariant?: import("./TableUtils").TableVariantType | undefined;
+        backgroundVariant?: import("./TableUtils").TableVariantType | undefined;
+        locale?: import("./TableUtils").TableLocalType | undefined;
+        customItemKey?: ((index: number, data: DATA_ROW) => string) | undefined;
+        hasScrollbar?: boolean | undefined;
+        isLoadingMoreItems?: boolean | undefined;
+        children?: ((rows: JSX.Element) => JSX.Element) | undefined;
+    }) => JSX.Element;
+    var Search: typeof import("./Search").TableSearch;
+    var SearchWithQueryParams: typeof import("./SearchWithQueryParams").SearchWithQueryParams;
+}
+export { Table };
+//# sourceMappingURL=Tablev2.component.d.ts.map

package/dist/components/tablev2/Tablev2.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tablev2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/Tablev2.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/tablev2/Tablev2.component.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference path="react-table-config.ts" />
+import * as React from 'react';
+import { useEffect } from 'react';
+import { useBlockLayout, useExpanded, useFilters, useGlobalFilter, useRowSelect, useSortBy, useTable, defaultColumn, } from 'react-table';
+import { useMemoCompare } from '../../hooks';
+import { Box } from '../box/Box';
+import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import { Tooltip } from '../tooltip/Tooltip.component';
+import { MultiSelectableContent } from './MultiSelectableContent';
+import { TableSearch as Search } from './Search';
+import { SearchWithQueryParams } from './SearchWithQueryParams';
+import { SingleSelectableContent } from './SingleSelectableContent';
+import { TableWrapper, TooltipContent } from './Tablestyle';
+import { compareHealth } from './TableUtils';
+import { useCheckbox } from './useCheckbox';
+import { Icon } from '../icon/Icon.component';
+const TableContext = React.createContext(null);
+export const useTableContext = () => {
+    const tableProps = React.useContext(TableContext);
+    if (!tableProps) {
+        throw new Error('The useTableContext hook can only be used within the <TableContext.Provider/>');
+    }
+    return tableProps; //Todo figure out a way to transfer the type to the context provider
+};
+export const EmptyCell = ({ tooltipContent, mr = 4, }) => {
+    return (_jsx(Box, { mr: mr, children: _jsx(Tooltip, { overlay: _jsx(TooltipContent, { children: tooltipContent || 'unknown' }), children: _jsx(Icon, { name: "Minus" }) }) }));
+};
+const DefaultRenderer = ({ value }) => {
+    const { rowHeight } = useTableContext();
+    if (!value && value !== 0) {
+        return _jsx(EmptyCell, {});
+    }
+    if (typeof value === 'string') {
+        const lineClamp = rowHeight === 'h32'
+            ? 1
+            : rowHeight === 'h40' || rowHeight === 'h48'
+                ? 2
+                : 3;
+        return (_jsx(Box, { mr: 4, children: _jsx(ConstrainedText, { text: value, lineClamp: lineClamp }) }));
+    }
+    return value;
+};
+function Table({ columns, data, defaultSortingKey, getRowId, children, sortTypes, globalFilter, allFilters, onBottom, onBottomOffset = 10, initiallySelectedRowsIds, updateTableData, }) {
+    sortTypes = {
+        health: (row1, row2) => {
+            return compareHealth(row2.values.health, row1.values.health) || 0;
+        },
+        ...sortTypes,
+    };
+    const stringifyFilter = React.useMemo(() => {
+        return (rows, columnIds, value) => {
+            const filteredRows = rows.filter((row) => {
+                // we stringify the object to make sure we can match the value
+                return JSON.stringify(row.values)
+                    .toLowerCase()
+                    .includes((value || '').toLowerCase());
+            });
+            return filteredRows;
+        };
+    }, []);
+    const formattedInitiallySelectedRows = React.useMemo(() => {
+        if (initiallySelectedRowsIds) {
+            return Array.from(initiallySelectedRowsIds).reduce((accumulatedValue, currentValue) => ({
+                ...accumulatedValue,
+                [currentValue]: true,
+            }), {});
+        }
+        return {};
+    }, []);
+    const [rowHeight, setRowHeight] = React.useState('h40');
+    const { headerGroups, rows, prepareRow, selectedFlatRows, getTableBodyProps, state: { selectedRowIds }, preGlobalFilteredRows, setGlobalFilter, setFilter, setAllFilters, setHiddenColumns, isAllRowsSelected, toggleAllRowsSelected, } = useTable({
+        defaultColumn: {
+            ...defaultColumn,
+            Cell: DefaultRenderer,
+        },
+        columns: columns,
+        data,
+        getRowId,
+        initialState: {
+            sortBy: defaultSortingKey
+                ? [
+                    {
+                        id: defaultSortingKey,
+                        desc: false,
+                    },
+                ]
+                : [],
+            selectedRowIds: formattedInitiallySelectedRows,
+            hiddenColumns: ['selection'],
+        },
+        disableMultiSort: true,
+        autoResetSortBy: false,
+        sortTypes,
+        //@ts-ignore TODO investigate why this type is not matching
+        globalFilter: stringifyFilter,
+        autoResetHiddenColumns: false,
+        updateTableData,
+    }, useBlockLayout, useFilters, useGlobalFilter, useSortBy, useExpanded, useRowSelect, useCheckbox);
+    useEffect(() => {
+        if (globalFilter !== undefined && globalFilter !== null) {
+            setGlobalFilter(globalFilter);
+        }
+    }, [globalFilter, setGlobalFilter, data]);
+    const filters = useMemoCompare(allFilters, (previous, next) => !previous || JSON.stringify(previous) === JSON.stringify(next));
+    useEffect(() => {
+        if (!filters) {
+            setAllFilters([]);
+        }
+        else {
+            const validFilters = filters.filter((filter) => filter.id && filter.value !== undefined);
+            setAllFilters(validFilters.length > 0 ? validFilters : []);
+        }
+    }, [filters, setAllFilters]);
+    const contextValue = {
+        headerGroups,
+        rows,
+        prepareRow,
+        getTableBodyProps,
+        selectedRowIds,
+        selectedFlatRows,
+        preGlobalFilteredRows,
+        setGlobalFilter,
+        rowHeight,
+        setRowHeight,
+        globalFilter,
+        setFilter,
+        onBottom,
+        onBottomOffset,
+        setHiddenColumns,
+        isAllRowsSelected,
+        toggleAllRowsSelected,
+    };
+    return (_jsx(TableContext.Provider
+    //@ts-ignore
+    , { 
+        //@ts-ignore
+        value: contextValue, children: _jsx(TableWrapper, { role: "grid", className: "table", children: children }) }));
+}
+Table.SingleSelectableContent = SingleSelectableContent;
+Table.MultiSelectableContent = MultiSelectableContent;
+Table.Search = Search;
+Table.SearchWithQueryParams = SearchWithQueryParams;
+export { Table };

package/dist/components/tablev2/react-table-config.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+declare module 'react-table' {
+    interface Hooks<D extends object = {}> extends UseExpandedHooks<D>, UseGroupByHooks<D>, UseRowSelectHooks<D>, UseTableHooks<D>, UseSortByHooks<D> {
+    }
+    interface TableInstance<D extends object = {}> extends UseColumnOrderInstanceProps<D>, UseExpandedInstanceProps<D>, UseFiltersInstanceProps<D>, UseGlobalFiltersInstanceProps<D>, UseGroupByInstanceProps<D>, UsePaginationInstanceProps<D>, UseRowSelectInstanceProps<D>, UseRowStateInstanceProps<D>, UseSortByInstanceProps<D> {
+    }
+    function useTable<D extends object = {}>(options: TableOptions<D>, ...plugins: Array<PluginHook<D>>): TableInstance<D>;
+    interface TableState<D extends object = {}> extends UseColumnOrderState<D>, UseExpandedState<D>, UseFiltersState<D>, UseGlobalFiltersState<D>, UseGroupByState<D>, UsePaginationState<D>, UseResizeColumnsState<D>, UseRowSelectState<D>, UseRowStateState<D>, UseSortByState<D> {
+    }
+    interface Cell<D extends object = {}, V = any> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
+    }
+    interface Row<D extends object = {}> extends UseExpandedRowProps<D>, UseGroupByRowProps<D>, UseRowSelectRowProps<D>, UseRowStateRowProps<D> {
+    }
+    interface ColumnInterface<D extends object = {}> extends UseFiltersColumnOptions<D>, UseGlobalFiltersColumnOptions<D>, UseGroupByColumnOptions<D>, UseResizeColumnsColumnOptions<D>, UseSortByColumnOptions<D>, UseTableColumnOptions<D> {
+    }
+    type CoreUIColumn<D extends object = {}> = Column<D> & {
+        cellStyle?: CSSProperties;
+    };
+    interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
+        cellStyle?: CSSProperties;
+    }
+    interface CoreUIUseTableOptions<D extends object> extends UseTableOptions<D> {
+        columns: ReadonlyArray<CoreUIColumn<D>>;
+    }
+    interface TableOptions<D extends object> extends UseExpandedOptions<D>, UseFiltersOptions<D>, UseGlobalFiltersOptions<D>, UseGroupByOptions<D>, UsePaginationOptions<D>, UseResizeColumnsOptions<D>, UseRowSelectOptions<D>, UseRowStateOptions<D>, UseSortByOptions<D>, CoreUIUseTableOptions<D>, Record<string, any> {
+    }
+}
+//# sourceMappingURL=react-table-config.d.ts.map

package/dist/components/tablev2/react-table-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-table-config.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/react-table-config.ts"],"names":[],"mappings":"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"}

package/dist/components/tablev2/react-table-config.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { Hooks } from 'react-table';
+export declare const useCheckbox: {
+    (hooks: Hooks<object>): void;
+    pluginName: string;
+};
+//# sourceMappingURL=useCheckbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckbox.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/useCheckbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAmC,MAAM,aAAa,CAAC;AA+BrE,eAAO,MAAM,WAAW;YAAW,MAAM,MAAM,CAAC;;CA2B/C,CAAC"}

package/dist/components/tablev2/useCheckbox.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { Checkbox } from '../checkbox/Checkbox.component';
+const CheckBoxContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 50px;
+`;
+const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {
+    const defaultRef = useRef(null);
+    const resolvedRef = ref || defaultRef;
+    useEffect(() => {
+        resolvedRef.current.indeterminate =
+            !!indeterminate;
+    }, [resolvedRef, indeterminate]);
+    return (_jsx(_Fragment, { children: _jsx(Checkbox, { ref: resolvedRef, ...rest }) }));
+});
+export const useCheckbox = (hooks) => {
+    hooks.visibleColumns.push((columns) => {
+        const test = [
+            {
+                id: 'selection',
+                Header: ({ getToggleAllRowsSelectedProps }) => {
+                    return (_jsx(CheckBoxContainer, { children: _jsx(IndeterminateCheckbox, { ...getToggleAllRowsSelectedProps() }) }));
+                },
+                Cell: ({ row }) => {
+                    return (_jsx(CheckBoxContainer, { children: _jsx(IndeterminateCheckbox, { ...row.getToggleRowSelectedProps() }) }));
+                },
+                cellStyle: { width: '50px' },
+                disableSortBy: true,
+            },
+            ...columns,
+        ];
+        return test;
+    });
+};
+useCheckbox.pluginName = 'useCheckbox';

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

@@ -0,0 +1,7 @@
+import { Row } from 'react-table';
+import { FixedSizeList } from 'react-window';
+export default function useSyncedScroll<DATA_ROW extends Record<string, unknown> = Record<string, unknown>>(): {
+    headerRef: (element: HTMLDivElement) => void;
+    bodyRef: (tableBody: FixedSizeList<Row<DATA_ROW>[]>) => void;
+};
+//# sourceMappingURL=useSyncedScroll.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncedScroll.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tablev2/useSyncedScroll.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC/D;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9D,CAsDA"}

package/dist/components/tablev2/useSyncedScroll.js

@@ -0,0 +1,43 @@
+import { useEffect, useState, useCallback } from 'react';
+export default function useSyncedScroll() {
+    const [listener, setListener] = useState(null);
+    const [tableBody, setTableBody] = useState(null);
+    const headerRef = useCallback((element) => {
+        if (element) {
+            const callback = (event) => {
+                if (element && event) {
+                    element.scrollTo({
+                        left: event.target.scrollLeft,
+                        top: 0,
+                    });
+                }
+            };
+            if (!listener) {
+                setListener(() => {
+                    return callback;
+                });
+            }
+        }
+    }, [listener]);
+    const bodyRef = useCallback((tableBody) => {
+        setTableBody(tableBody);
+    }, []);
+    useEffect(() => {
+        if (tableBody && listener) {
+            /*
+            We intentionally use _outerRef prop here despite the fact that it is
+            internal use only and not typed, as it is the only way for us to access to the scrollable element
+            */
+            //@ts-expect-error
+            tableBody._outerRef.addEventListener('scroll', listener);
+            return () => {
+                //@ts-expect-error
+                if (tableBody && tableBody._outerRef) {
+                    //@ts-expect-error
+                    tableBody._outerRef.removeEventListener('scroll', listener);
+                }
+            };
+        }
+    }, [tableBody, listener]);
+    return { headerRef, bodyRef };
+}

package/dist/components/tabsv2/ScrollButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    direction: 'left' | 'right';
+    onClick: (arg0: React.SyntheticEvent<HTMLDivElement>) => void;
+};
+declare const ScrollButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export { ScrollButton };
+//# sourceMappingURL=ScrollButton.d.ts.map

package/dist/components/tabsv2/ScrollButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollButton.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/ScrollButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA0B1B,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC/D,CAAC;AACF,QAAA,MAAM,YAAY,uEAOhB,CAAC;AACH,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/tabsv2/ScrollButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+import { zIndex } from '../../style/theme';
+import { spacing } from '../../spacing';
+import { getThemePropSelector } from '../../utils';
+import { Icon } from '../icon/Icon.component';
+const StyledScrollButton = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${spacing.r24};
+  z-index: ${zIndex.scrollbarButton};
+  color: ${getThemePropSelector('textSecondary')};
+  background-color: ${getThemePropSelector('backgroundLevel3')};
+  box-shadow: 0px 0px ${spacing.r2} rgba(0, 0, 0, 0.75);
+  box-sizing: border-box;
+  border: ${spacing.r1} solid transparent;
+  cursor: pointer;
+
+  &:hover {
+    border-radius: ${spacing.r2};
+    box-shadow: none;
+    border: ${spacing.r1} solid ${getThemePropSelector('infoPrimary')};
+  }
+`;
+const ScrollButton = React.forwardRef(({ direction, onClick }, ref) => {
+    return (
+    // @ts-ignore
+    _jsx(StyledScrollButton, { direction: direction, onClick: onClick, ref: ref, children: _jsx(Icon, { name: `Chevron-${direction}` }) }));
+});
+export { ScrollButton };

package/dist/components/tabsv2/StyledTabs.d.ts

@@ -0,0 +1,18 @@
+export declare const TabBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TabItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    selected?: boolean | undefined;
+    activeTabColor?: string | undefined;
+    activeTabSeparator?: string | undefined;
+    inactiveTabColor?: string | undefined;
+    tabHoverColor?: string | undefined;
+}, never>;
+export declare const TabsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    tabLineColor?: string | undefined;
+    separatorColor: string;
+}, never>;
+export declare const TabContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    tabContentColor?: string | undefined;
+}, never>;
+export declare const ScrollableContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TabsScroller: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=StyledTabs.d.ts.map

package/dist/components/tabsv2/StyledTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledTabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/StyledTabs.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yGAGlB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;SAkDnB,CAAC;AACF,eAAO,MAAM,aAAa;;oBAER,MAAM;SAwBtB,CAAC;AACH,eAAO,MAAM,UAAU;;SAMtB,CAAC;AACF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AACF,eAAO,MAAM,YAAY,yGAYxB,CAAC"}

package/dist/components/tabsv2/StyledTabs.js

@@ -0,0 +1,96 @@
+import styled from 'styled-components';
+import { spacing } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+export const TabBar = styled.div `
+  display: flex;
+  height: ${spacing.sp40};
+`;
+export const TabItem = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${spacing.sp24} 0 ${spacing.sp24};
+  border-radius: ${spacing.sp4} ${spacing.sp4} 0 0;
+  border: ${spacing.sp1} solid transparent;
+  min-width: 5rem;
+
+  &:focus-visible {
+    outline: 0;
+    position: relative;
+    border: ${spacing.sp1} dashed ${getThemePropSelector('selectedActive')};
+  }
+
+  &:focus-within {
+    outline: 0;
+  }
+
+  ${(props) => {
+    const { highlight, backgroundLevel3, backgroundLevel4, selectedActive } = props.theme;
+    return props.selected
+        ? `
+        background-color: ${props.activeTabColor || backgroundLevel4};
+        &:after {
+          content: "";
+          background: ${props.activeTabSeparator || selectedActive};
+          position: absolute;
+          border-radius: ${spacing.sp2} ${spacing.sp2} 0 0;
+          bottom: 0;
+          right: 0;
+          left: calc(50% - ${spacing.sp16});
+          height: ${spacing.sp2};
+          width: ${spacing.sp32};
+        }
+      `
+        : `
+        background-color: ${props.inactiveTabColor || backgroundLevel3};
+        &:hover {
+          cursor: pointer;
+          border: ${spacing.sp1} solid ${props.tabHoverColor || highlight};
+        }
+      `;
+}}
+`;
+export const TabsContainer = styled.div `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${(props) => props.tabLineColor || props.theme.backgroundLevel3};
+
+  & ${TabItem} {
+    display: flex;
+    justify-content: center;
+    position: relative;
+  }
+
+  & ${TabItem}::before {
+    content: "";
+    background: ${(props) => props.separatorColor || props.theme.infoSecondary};
+    position: absolute;
+    bottom: 25%;
+    right: 0;
+    height: ${spacing.sp16};
+    width: 1px;
+    margin-right: -1px;
+  }
+}`;
+export const TabContent = styled.div `
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  background-color: ${(props) => props.tabContentColor || props.theme.backgroundLevel4};
+`;
+export const ScrollableContainer = styled.div `
+  display: flex;
+`;
+export const TabsScroller = styled.div `
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  width: 100%;
+  scrollbar-width: none; // Firefox
+  &::-webkit-scrollbar {
+    display: none; // Safari + Chrome
+  }
+  overflow-x: auto;
+  overflow-y: hidden;
+`;

package/dist/components/tabsv2/Tab.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export type Query = Record<string, string>;
+export type TabProps = {
+    path: string;
+    query?: Query;
+    label: JSX.Element | string;
+    icon?: JSX.Element;
+    textBadge?: JSX.Element;
+    children: JSX.Element;
+    className?: string;
+    exact?: boolean;
+    strict?: boolean;
+    sensitive?: boolean;
+};
+declare function Tab(_: TabProps): null;
+export { Tab };
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/tabsv2/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tab.ts"],"names":[],"mappings":";AAEA,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,iBAAS,GAAG,CAAC,CAAC,EAAE,QAAQ,QAQvB;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/tabsv2/Tab.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { TabsContext } from './Tabsv2.component';
+function Tab(_) {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('Tab cannot be rendered outside the Tabs component');
+    }
+    return null;
+}
+export { Tab };

package/dist/components/tabsv2/Tabsv2.component.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Element, ChildrenArray } from 'react';
+import { Tab } from './Tab';
+type TabsProps = {
+    activeTabColor?: string;
+    activeTabSeparator?: string;
+    tabLineColor?: string;
+    inactiveTabColor?: string;
+    tabContentColor?: string;
+    separatorColor?: string;
+    tabHoverColor?: string;
+    children: ChildrenArray<Element<typeof Tab>>;
+    className?: string;
+};
+export declare const TabsContext: React.Context<boolean>;
+declare function Tabs({ activeTabColor, activeTabSeparator, tabLineColor, inactiveTabColor, tabContentColor, separatorColor, tabHoverColor, children, className, ...rest }: TabsProps): JSX.Element;
+declare namespace Tabs {
+    var Tab: typeof import("./Tab").Tab;
+}
+export { Tabs, Tab };
+//# sourceMappingURL=Tabsv2.component.d.ts.map

package/dist/components/tabsv2/Tabsv2.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabsv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/tabsv2/Tabsv2.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAkB/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5B,KAAK,SAAS,GAAG;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,WAAW,wBAAgC,CAAC;AAMzD,iBAAS,IAAI,CAAC,EACZ,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,aAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eA4LX;kBAvMQ,IAAI;;;AA2Mb,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC"}