@tap-payments/os-micro-frontend-shared 0.1.270 → 0.1.271-test.2

package/build/components/TableHeader/TableView/DefaultViews.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Popper from '@mui/material/Popper';
+import { useTranslation } from 'react-i18next';
+import { downArrowIcon, checkIcon } from '../../../constants/index.js';
+import { ButtonStyled, ListStyled, DropdownStyled, MenuItem, Space, SpaceAfter } from './style';
+import { dummyViewList } from '../data';
+function DefaultViews({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl }) {
+    const { t } = useTranslation();
+    return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "TableView_DefaultViews" }, { children: [_jsxs(ButtonStyled, Object.assign({ onClick: (e) => {
+                    onSelect(e);
+                } }, { children: [_jsx("div", { children: selectedViewInfo.label }), _jsx("img", { src: downArrowIcon, alt: "arrow", style: Object.assign({}, (Boolean(open) && { transform: 'rotate(180deg)' })) })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsxs(ListStyled, { children: [dummyViewList.map((item) => (_jsxs(MenuItem, Object.assign({ onClick: () => {
+                                setSelectedViewInfo(item);
+                                setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
+                            } }, { children: [item.id === selectedViewInfo.id ? _jsx("img", { className: "check-icon", src: checkIcon, alt: "arrow" }) : _jsx(Space, {}), _jsx("span", { children: item.label }), _jsx(SpaceAfter, {})] }), item.id))), _jsxs(MenuItem, Object.assign({ sx: {
+                                border: 'none',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                setSelectedViewInfo({ label: 'Custom view', id: 'custom' });
+                            } }, { children: [selectedViewInfo.id === 'custom' ? _jsx("img", { className: "check-icon", src: checkIcon, alt: "arrow" }) : _jsx(Space, {}), _jsx("span", { children: t('createCustomView') }), _jsx(SpaceAfter, {})] }))] }) }))] })));
+}
+export default React.memo(DefaultViews);

package/build/components/TableHeader/TableView/TableView.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { TableHeaderProps } from '../type';
+interface TableViewProps {
+    onViewChange?: TableHeaderProps['onViewChange'];
+    setIsViewVisible: (visible: boolean) => void;
+    setTableViews: TableHeaderProps['setTableViews'];
+    tableViews: TableHeaderProps['tableViews'];
+    resetTableViews: TableHeaderProps['resetTableViews'];
+}
+declare function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews, resetTableViews }: Readonly<TableViewProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TableView>;
+export default _default;

package/build/components/TableHeader/TableView/TableView.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { Icon, StyledButton } from '../../index.js';
+import { closeXIcon, viewIcon } from '../../../constants/index.js';
+import CustomViews from './CustomViews';
+import DefaultViews from './DefaultViews';
+import { ButtonStyled, ViewWrapper } from './style';
+function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews, resetTableViews }) {
+    const [anchorViewEl, setAnchorViewEl] = useState(null);
+    const [defaultViewEl, setDefaultViewElement] = useState(null);
+    const [customViewEl, setCustomViewElement] = useState(null);
+    const [selectedViewInfo, setSelectedViewInfo] = useState({
+        id: 'default',
+        label: 'Default',
+    });
+    const { t } = useTranslation();
+    const onViewButtonClick = (event) => {
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange();
+        setAnchorViewEl(event.currentTarget);
+        setIsViewVisible(true);
+    };
+    const closeViewDropdown = () => {
+        setDefaultViewElement(null);
+        setCustomViewElement(null);
+    };
+    const onClose = () => {
+        setAnchorViewEl(null);
+        setIsViewVisible(false);
+        // to be removed
+        setSelectedViewInfo({ label: 'Default', id: 'default' });
+    };
+    const handleSelectedViewInfo = (selected) => {
+        setSelectedViewInfo(selected);
+        closeViewDropdown();
+    };
+    if (!anchorViewEl) {
+        return (_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "TableView_no_anchorViewEl", onClick: onViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })));
+    }
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ "data-testid": "TableView" }, { children: [selectedViewInfo.id === 'custom' && (_jsx(CustomViews, { tableViews: tableViews, setTableViews: setTableViews, anchorEl: customViewEl, open: Boolean(customViewEl), onSelect: (e) => {
+                        setCustomViewElement(customViewEl ? null : e.currentTarget);
+                        setDefaultViewElement(null);
+                    }, onClose: () => {
+                        setCustomViewElement(null);
+                    } })), _jsx(DefaultViews, { open: Boolean(defaultViewEl), anchorEl: defaultViewEl, setSelectedViewInfo: (view) => {
+                        handleSelectedViewInfo(view);
+                    }, selectedViewInfo: selectedViewInfo, onSelect: (e) => {
+                        setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
+                        setCustomViewElement(null);
+                    }, setViews: (views) => {
+                        resetTableViews === null || resetTableViews === void 0 ? void 0 : resetTableViews({ id: views[0], label: views[0] });
+                    } }), _jsx(ButtonStyled, Object.assign({ sx: { width: 30, justifyContent: 'center' }, onClick: onClose }, { children: _jsx("img", { src: closeXIcon, alt: "close" }) }))] })) })));
+}
+export default memo(TableView);

package/build/components/TableHeader/TableView/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSubMenu } from './useSubMenu';
+export { useViewColumns } from './useViewColumns';
+export { useColumnItem } from './useColumnItem';

package/build/components/TableHeader/TableView/hooks/index.js

@@ -0,0 +1,3 @@
+export { useSubMenu } from './useSubMenu';
+export { useViewColumns } from './useViewColumns';
+export { useColumnItem } from './useColumnItem';

package/build/components/TableHeader/TableView/hooks/useColumnItem.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../../types/index.js';
+interface UseColumnItemProps {
+    column: ColumnViewProps;
+    index: number;
+    openSubMenuName: string | null;
+    toggleColumnSelection: (columnName: string) => void;
+    handleSubMenuOpen: (event: React.MouseEvent<HTMLElement>, name: string) => void;
+    handleSubMenuClose: () => void;
+}
+interface UseColumnItemReturn {
+    isIndeterminate: boolean;
+    hasSubmenuItems?: boolean;
+    isSubmenuOpen: boolean;
+    isFirstItem: boolean;
+    handleColumnClick: () => void;
+    handleMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
+    handleMouseLeave: () => void;
+}
+export declare function useColumnItem({ column, index, openSubMenuName, toggleColumnSelection, handleSubMenuOpen, handleSubMenuClose, }: UseColumnItemProps): UseColumnItemReturn;
+export {};

package/build/components/TableHeader/TableView/hooks/useColumnItem.js

@@ -0,0 +1,29 @@
+import { useCallback, useMemo } from 'react';
+export function useColumnItem({ column, index, openSubMenuName, toggleColumnSelection, handleSubMenuOpen, handleSubMenuClose, }) {
+    const hasSubmenuItems = column.menuItems && column.menuItems.length > 0;
+    const isSubmenuOpen = openSubMenuName === column.name;
+    const isFirstItem = index === 0;
+    const isIndeterminate = useMemo(() => { var _a, _b; return Boolean(column.selected && ((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.some((item) => item.selected)) && !((_b = column.menuItems) === null || _b === void 0 ? void 0 : _b.every((item) => item.selected))); }, [column.selected, column.menuItems]);
+    const handleColumnClick = useCallback(() => {
+        toggleColumnSelection(column.name);
+    }, [toggleColumnSelection, column.name]);
+    const handleMouseEnter = useCallback((event) => {
+        if (hasSubmenuItems) {
+            handleSubMenuOpen(event, column.name);
+        }
+    }, [hasSubmenuItems, handleSubMenuOpen, column.name]);
+    const handleMouseLeave = useCallback(() => {
+        if (!hasSubmenuItems) {
+            handleSubMenuClose();
+        }
+    }, [hasSubmenuItems, handleSubMenuClose]);
+    return {
+        isIndeterminate,
+        hasSubmenuItems,
+        isSubmenuOpen,
+        isFirstItem,
+        handleColumnClick,
+        handleMouseEnter,
+        handleMouseLeave,
+    };
+}

package/build/components/TableHeader/TableView/hooks/useSubMenu.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface UseSubMenuReturn {
+    subMenuAnchorEl: HTMLElement | null;
+    openSubMenuName: string | null;
+    handleSubMenuClose: () => void;
+    handleSubMenuOpen: (event: React.MouseEvent<HTMLElement>, name: string) => void;
+    handleMenuScroll: () => void;
+}
+export declare function useSubMenu(isMainMenuOpen: boolean, onMainMenuClose?: () => void): UseSubMenuReturn;
+export {};

package/build/components/TableHeader/TableView/hooks/useSubMenu.js

@@ -0,0 +1,31 @@
+import { useState, useCallback, useEffect } from 'react';
+export function useSubMenu(isMainMenuOpen, onMainMenuClose) {
+    const [subMenuAnchorEl, setSubMenuAnchorEl] = useState(null);
+    const [openSubMenuName, setOpenSubMenuName] = useState(null);
+    const handleSubMenuClose = useCallback(() => {
+        setSubMenuAnchorEl(null);
+        setOpenSubMenuName(null);
+    }, []);
+    const handleSubMenuOpen = useCallback((event, name) => {
+        setSubMenuAnchorEl(event.currentTarget);
+        setOpenSubMenuName(name);
+    }, []);
+    const handleMenuScroll = useCallback(() => {
+        if (openSubMenuName) {
+            handleSubMenuClose();
+        }
+    }, [openSubMenuName, handleSubMenuClose]);
+    useEffect(() => {
+        if (!isMainMenuOpen) {
+            handleSubMenuClose();
+            onMainMenuClose === null || onMainMenuClose === void 0 ? void 0 : onMainMenuClose();
+        }
+    }, [isMainMenuOpen, onMainMenuClose, handleSubMenuClose]);
+    return {
+        subMenuAnchorEl,
+        openSubMenuName,
+        handleSubMenuClose,
+        handleSubMenuOpen,
+        handleMenuScroll,
+    };
+}

package/build/components/TableHeader/TableView/hooks/useViewColumns.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { TableHeaderProps } from '../../type';
+interface UseViewColumnsProps {
+    columns: ColumnViewProps[];
+    setTableViews?: TableHeaderProps['setTableViews'];
+}
+interface UseViewColumnsReturn {
+    reorderColumns: (reorderedColumnNames: string[]) => void;
+    toggleColumnSelection: (columnName: string) => void;
+    toggleSubmenuItem: (columnName: string, submenuItemName: string) => void;
+}
+export declare function useViewColumns({ columns, setTableViews }: UseViewColumnsProps): UseViewColumnsReturn;
+export {};

package/build/components/TableHeader/TableView/hooks/useViewColumns.js

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+export function useViewColumns({ columns, setTableViews }) {
+    const reorderColumns = useCallback((reorderedColumnNames) => {
+        const reorderedColumns = reorderedColumnNames
+            .map((name) => columns.find((column) => column.name === name))
+            .filter((column) => Boolean(column));
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(reorderedColumns);
+    }, [columns, setTableViews]);
+    const toggleColumnSelection = useCallback((columnName) => {
+        const updatedColumns = columns.map((column) => {
+            var _a;
+            if (column.name !== columnName)
+                return column;
+            const hasSubmenuItems = column.menuItems && column.menuItems.length > 0;
+            const newSelected = !column.selected;
+            if (!hasSubmenuItems) {
+                return Object.assign(Object.assign({}, column), { selected: newSelected });
+            }
+            const updatedMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+            return Object.assign(Object.assign({}, column), { selected: newSelected, menuItems: updatedMenuItems });
+        });
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(updatedColumns);
+    }, [columns, setTableViews]);
+    const toggleSubmenuItem = useCallback((columnName, submenuItemName) => {
+        const updatedColumns = columns.map((column) => {
+            var _a, _b;
+            if (column.name !== columnName)
+                return column;
+            const updatedMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => {
+                if (item.name === submenuItemName) {
+                    return Object.assign(Object.assign({}, item), { selected: !item.selected });
+                }
+                return item;
+            });
+            const hasSelectedChildren = (_b = updatedMenuItems === null || updatedMenuItems === void 0 ? void 0 : updatedMenuItems.some((item) => item.selected)) !== null && _b !== void 0 ? _b : false;
+            return Object.assign(Object.assign({}, column), { menuItems: updatedMenuItems, selected: hasSelectedChildren });
+        });
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(updatedColumns);
+    }, [columns, setTableViews]);
+    return {
+        reorderColumns,
+        toggleColumnSelection,
+        toggleSubmenuItem,
+    };
+}

package/build/components/TableHeader/TableView/index.d.ts

@@ -0,0 +1,3 @@
+import TableView from './TableView';
+export * from './TableView';
+export default TableView;

package/build/components/TableHeader/TableView/index.js

@@ -0,0 +1,3 @@
+import TableView from './TableView';
+export * from './TableView';
+export default TableView;

package/build/components/TableHeader/TableView/style.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const ButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ViewWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ListStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const DropdownStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    addColumnViewEl?: boolean | undefined;
+}, {}, {}>;
+export declare const Space: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const SpaceAfter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/TableHeader/TableView/style.js

@@ -0,0 +1,102 @@
+import { Box, styled } from '@mui/material';
+export const ButtonStyled = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: '4px',
+    background: theme.palette.common.white,
+    padding: '8px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    gap: 8,
+    height: 32,
+    cursor: 'pointer',
+    '&:hover': {
+        border: '1px solid',
+        borderColor: theme.palette.info.dark,
+        boxShadow: theme.shadows[7],
+    },
+}));
+export const ViewWrapper = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    fontWeight: theme.typography.fontWeightRegular,
+    textTransform: 'capitalize',
+    position: 'relative',
+    transition: '0.5s',
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        left: -8,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        boxShadow: theme.shadows[11],
+        borderRadius: theme.spacing(0.5),
+        paddingInlineStart: theme.spacing(1),
+        paddingTop: '9px',
+        paddingBottom: '9px',
+        paddingInlineEnd: '9px',
+        zIndex: -1,
+    },
+}));
+export const ListStyled = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: theme.spacing(1),
+    boxShadow: theme.shadows[5],
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    zIndex: 5,
+    fontSize: '11px',
+    width: 192,
+}));
+export const DropdownStyled = styled(Box)(() => ({
+    minWidth: 160,
+    position: 'relative',
+}));
+export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
+    padding: theme.spacing(1),
+    paddingInlineEnd: 2,
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    display: 'flex',
+    alignItems: 'center',
+    height: 32,
+    cursor: 'pointer',
+    img: {
+        height: 12,
+    },
+    '.check-icon': {
+        height: 'auto',
+        marginInlineEnd: theme.spacing(1),
+    },
+    '&:hover': {
+        color: theme.palette.info.dark,
+        fontWeight: theme.typography.fontWeightBold,
+    },
+    '&.add-column': {
+        justifyContent: 'space-between',
+        paddingInlineEnd: theme.spacing(1),
+        position: 'relative',
+        border: 'none',
+        zIndex: 5,
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+        borderTopRightRadius: theme.spacing(1),
+        borderTopLeftRadius: theme.spacing(1),
+        '&:hover': {
+            boxShadow: theme.shadows[6],
+        },
+    },
+}));
+export const Space = styled(Box)(({ theme }) => ({
+    width: 12,
+    marginInlineEnd: theme.spacing(1),
+}));
+export const SpaceAfter = styled(Box)(() => ({
+    width: 16,
+}));

package/build/components/TableHeader/TableView/type.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TableHeaderProps } from '../type';
+export interface CustomViewsProps {
+    open: boolean;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setTableViews: TableHeaderProps['setTableViews'];
+    tableViews: TableHeaderProps['tableViews'];
+    anchorEl: Element | null;
+    onClose?: () => void;
+}

package/build/components/TableHeader/TableView/type.js

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

package/build/components/TableHeader/data.d.ts

@@ -0,0 +1,5 @@
+export declare const dummyViewList: {
+    label: string;
+    id: string;
+    columns: string[];
+}[];

package/build/components/TableHeader/data.js

@@ -0,0 +1,7 @@
+export const dummyViewList = [
+    {
+        label: 'Default',
+        id: 'default',
+        columns: ['default', 'default'],
+    },
+];

package/build/components/TableHeader/index.d.ts

@@ -1,4 +1,8 @@
-export { default as TableHeader } from './TableHeader';
+import TableHeader from './TableHeader';
+export default TableHeader;
+export * from './TableHeader';
+export { default as TableHeaderWrapper } from './TableHeaderWrapper';
+export { default as FiltersRowWrapper } from './FiltersRowWrapper';
+export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
-export { FiltersRow } from './FiltersRow';

package/build/components/TableHeader/index.js

@@ -1,4 +1,8 @@
-export { default as TableHeader } from './TableHeader';
+import TableHeader from './TableHeader';
+export default TableHeader;
+export * from './TableHeader';
+export { default as TableHeaderWrapper } from './TableHeaderWrapper';
+export { default as FiltersRowWrapper } from './FiltersRowWrapper';
+export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
-export { FiltersRow } from './FiltersRow';

package/build/components/TableHeader/style.d.ts

@@ -16,6 +16,6 @@ export declare const TableHeaderRow: import("@emotion/styled").StyledComponent<i
 export declare const StatusButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const FiltersRowWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const FiltersRowContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/TableHeader/style.js

@@ -34,7 +34,7 @@ export const StatusButtonsContainer = styled(Box)(({ theme }) => ({
     alignItems: 'center',
     gap: theme.spacing(1),
 }));
-export const FiltersRowWrapper = styled(Box)(() => ({
+export const FiltersRowContainer = styled(Box)(() => ({
     display: 'flex',
     justifyContent: 'flex-start',
     alignItems: 'center',

package/build/components/TableHeader/type.d.ts

@@ -1,27 +1,29 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
-import type { CalenderMode, TableHeaderStatus, ColumnViewProps } from '../../types/index.js';
+import React, { ReactNode } from 'react';
+import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
 import { AvailableStatus } from '../StatusBar/type';
-declare const viewsOptions: {
+import { PartialExcept } from '../../types/index.js';
+type ViewsOptions = {
     default: {};
     developer: {};
     marketing: {};
     finance: {};
     custom: {};
 };
-export type View = keyof typeof viewsOptions;
-export interface TableHeaderProps {
-    availableStatuses?: AvailableStatus[];
-    status?: TableHeaderStatus;
+export type View = keyof ViewsOptions;
+export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined> {
+    tableMode?: TableMode;
+    status?: IStatus;
+    availableStatuses?: AvailableStatus<IStatus>[];
     search?: string;
     view?: View;
     date?: Date | [Date, Date];
     showMaximizedView?: boolean;
     title?: string | null;
     calendarMode?: CalenderMode;
-    onStatusChange?: (status: Partial<TableHeaderStatus>) => void;
+    onStatusChange?: <T extends IStatus>(status?: T) => void;
     onSearch?: (search: string) => void;
     onViewChange?: () => void;
-    onDateChange?: (date: Date | [Date, Date], timezoneOffset?: number) => void;
+    onDateChange?: (date: Date | [Date, Date]) => void;
     tableReportsComponent?: React.ReactNode;
     tableFilterComponent?: React.ReactNode;
     onCalendarModeSwitch: (mode: CalenderMode) => void;
@@ -43,14 +45,20 @@ export interface TableHeaderProps {
         label: string;
     }) => void;
     onToggleTextButtonClick?: () => void;
-    isTextShown?: boolean;
     children?: ReactNode;
     calendarGroupBy?: string;
     onCalendarGroupChange?: (value: string) => void;
     maxDateRange?: number;
     isAcceptance?: boolean;
+    startComponent?: React.ReactNode;
+    searchPlaceholder?: string;
+    timezone: Timezone | null;
+    browserTimezone: string;
+    defaultCountryTimezone: Timezone;
+    onChangeTimezone: (newTimezone: Timezone) => void;
+    segmentCountries: SegmentCountry[];
 }
-export type FilterRowProps = PropsWithChildren<{}>;
+export type FilterRowProps = PartialExcept<TableHeaderProps<TableHeaderStatus>, 'timezone' | 'browserTimezone' | 'defaultCountryTimezone' | 'onChangeTimezone' | 'segmentCountries'>;
 export interface Column {
     label: string;
     name: string;

package/build/components/TableHeader/type.js

@@ -1,8 +1 @@
-const viewsOptions = {
-    default: {},
-    developer: {},
-    marketing: {},
-    finance: {},
-    custom: {},
-};
 export {};

package/build/components/Tooltip/Tooltip.d.ts

@@ -1,10 +1,3 @@
-import React, { ReactElement } from 'react';
 import type { TooltipProps } from '@mui/material/Tooltip';
-interface Props extends Omit<TooltipProps, 'children'> {
-    title: React.ReactNode;
-    placement?: TooltipProps['placement'];
-    children?: ReactElement;
-    className?: string;
-}
-declare function Tooltip({ className, title, placement, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ className, placement, children, ...rest }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/build/components/Tooltip/Tooltip.js

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledTooltip } from './styles';
 function Tooltip(_a) {
-    var { className, title, placement = 'top', children } = _a, rest = __rest(_a, ["className", "title", "placement", "children"]);
-    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: children || _jsx(_Fragment, {}) })));
+    var { className, placement = 'top', children } = _a, rest = __rest(_a, ["className", "placement", "children"]);
+    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, placement: placement, arrow: true }, rest, { children: children })));
 }
 export default Tooltip;

package/build/components/Tooltip/styles.d.ts

@@ -1,2 +1 @@
-import { TooltipProps } from '@mui/material/Tooltip';
-export declare const StyledTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("@mui/material/Tooltip").TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/Tooltip/styles.js

@@ -1,21 +1,6 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import TooltipComponent, { tooltipClasses } from '@mui/material/Tooltip';
-export const StyledTooltip = styled((_a) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return _jsx(TooltipComponent, Object.assign({}, props, { classes: { popper: className } }));
-})(({ theme }) => ({
+export const StyledTooltip = styled(TooltipComponent)(({ theme }) => ({
     zIndex: 999999,
     [`& .${tooltipClasses.arrow}`]: {
         '&:before': {

package/build/components/VirtualTables/components/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/components/index.d.ts

@@ -92,6 +92,7 @@ export { default as StatusBar, type AvailableStatus } from './StatusBar';
 export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './StatusGroupChips';
+export { default as TableHeader } from './TableHeader';
 export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';

package/build/components/index.js

@@ -92,6 +92,7 @@ export { default as StatusBar } from './StatusBar';
 export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
 export * from './Chip';
 export * from './StatusGroupChips';
+export { default as TableHeader } from './TableHeader';
 export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';