@tap-payments/os-micro-frontend-shared 0.0.30 → 0.0.31-dev-shared-migration-v1

package/build/components/TableHeader_V2/components/StatusButtons/StatusButton.js

@@ -0,0 +1,54 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import StyledBadge, { BadgeVariants } from '../../../CountBadge';
+import { convertToNumber, formatNumber } from '../../../../utils/index.js';
+import { ChevronIcon } from './ChevronIcon';
+import { ChevronContainer, Label, LabelWrapper, StatusIcon, StyledDropdown, statusButtonVariants } from './style';
+import { statusButtonIcons } from './constant';
+export const StatusButton = memo((props) => {
+    var _a, _b;
+    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const buttonRef = useRef(null);
+    const [lastActiveStatus, setLastActiveStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const Button = statusButtonVariants[variant];
+    const hasDropdown = dropdownOptions && dropdownOptions.length > 0;
+    const statusIcon = icon ? _jsx(StatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null;
+    const statusBadge = badgeCount && !Number.isNaN(convertToNumber(badgeCount)) ? (_jsx(StyledBadge, Object.assign({ variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }))) : null;
+    const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: (e) => {
+                    var _a, _b;
+                    (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                    onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
+                }, sx: Object.assign({}, (hasDropdown && {
+                    paddingInlineEnd: '27px',
+                })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && (_jsx(ChevronContainer, Object.assign({ onClick: (e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                if (hasDropdown) {
+                                    setAnchorEl(buttonRef.current);
+                                }
+                            } }, { children: dropdownIcon })))] }) })), open && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_b = (dropdownOptions || [])) === null || _b === void 0 ? void 0 : _b.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
+                        var _a;
+                        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+                        setLastActiveStatus(item.status);
+                        handleClose();
+                    } }))) }))] }));
+});

package/build/components/TableHeader_V2/components/StatusButtons/StatusButtons.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AvailableStatus } from '../../type';
+import { TableHeaderStatus } from '../../../../types/index.js';
+export type StatusButtonsProps = {
+    availableStatuses: AvailableStatus[];
+    status: TableHeaderStatus;
+    onStatusChange?: (status: Partial<TableHeaderStatus>) => void;
+    isFilteredIdsShown?: boolean;
+};
+declare const _default: import("react").MemoExoticComponent<(props: StatusButtonsProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/TableHeader_V2/components/StatusButtons/StatusButtons.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StatusButton } from './StatusButton';
+const StatusButtonItem = memo((props) => {
+    var _a;
+    const { availableStatus, getButtonStatus, onStatusChange, status } = props;
+    const { t } = useTranslation();
+    if (!Array.isArray(availableStatus.status)) {
+        return (_createElement(StatusButton, Object.assign({}, availableStatus, { key: `status-button-array-${availableStatus.status}`, variant: getButtonStatus(availableStatus.status), onClick: () => {
+                if (!Array.isArray(availableStatus.status)) {
+                    onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(availableStatus.status);
+                }
+            } })));
+    }
+    const isCurrentStatusDropdown = (_a = availableStatus.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
+    const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
+    const statusLabel = isCurrentStatusDropdown ? status : availableStatus.status[0];
+    return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, availableStatus, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
+                onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(buttonStatus);
+            }, dropdownOptions: availableStatus.status.map((stat) => ({
+                label: t(stat || ''),
+                onClick: () => {
+                    onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(stat);
+                },
+                status: stat,
+            })) })) }));
+});
+const StatusButtons = (props) => {
+    const { availableStatuses, status, onStatusChange, isFilteredIdsShown } = props;
+    const getButtonStatus = useMemo(() => (buttonStatus) => buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive', [status, isFilteredIdsShown]);
+    return (_jsx(_Fragment, { children: availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((availableStatus) => {
+            var _a;
+            return (_jsx(StatusButtonItem, { availableStatus: availableStatus, getButtonStatus: getButtonStatus, onStatusChange: onStatusChange, status: status }, Array.isArray(availableStatus.status) ? (_a = availableStatus === null || availableStatus === void 0 ? void 0 : availableStatus.status) === null || _a === void 0 ? void 0 : _a[0] : `status-button-array-${availableStatus.status}`));
+        }) }));
+};
+export default memo(StatusButtons);

package/build/components/TableHeader_V2/components/StatusButtons/constant.d.ts

@@ -0,0 +1,24 @@
+export declare const statusButtonIcons: {
+    inProgress: string;
+    initiated: string;
+    abandoned: string;
+    cancelled: string;
+    reversed: string;
+    reports: string;
+    view: string;
+    search: string;
+    chevronDown: string;
+    unAuthorized: string;
+    unSettled: string;
+    unCaptured: string;
+    captured: string;
+    authorized: string;
+    openFlag: string;
+    closedFlag: string;
+    unauthenticated: string;
+    authenticated: string;
+    textView: string;
+    paidOut: string;
+    scheduled: string;
+    trashBin: string;
+};

package/build/components/TableHeader_V2/components/StatusButtons/constant.js

@@ -0,0 +1,25 @@
+import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, viewIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, longWordsIcon, paidOutFilterIcon, scheduledFilterIcon, trashBinIcon, } from '../../../../constants/index.js';
+export const statusButtonIcons = {
+    inProgress: initiatedIcon,
+    initiated: initiatedIcon,
+    abandoned: abandonedIcon,
+    cancelled: cancelledIcon,
+    reversed: reverseActionIcon,
+    reports: reportsIcon,
+    view: viewIcon,
+    search: searchIcon,
+    chevronDown: chevronDownIcon,
+    unAuthorized: unAuthorizedIcon,
+    unSettled: settlementInitiatedIcon,
+    unCaptured: unCapturedIcon,
+    captured: capturedIcon,
+    authorized: authorizedIcon,
+    openFlag: openFlagIcon,
+    closedFlag: closedFlagIcon,
+    unauthenticated: unauthenticatedIcon,
+    authenticated: authenticatedIcon,
+    textView: longWordsIcon,
+    paidOut: paidOutFilterIcon,
+    scheduled: scheduledFilterIcon,
+    trashBin: trashBinIcon,
+};

package/build/components/TableHeader_V2/components/StatusButtons/index.d.ts

@@ -0,0 +1,3 @@
+export { default as StatusButtons } from './StatusButtons';
+export * from './StatusButton';
+export * from './style';

package/build/components/TableHeader_V2/components/StatusButtons/index.js

@@ -0,0 +1,3 @@
+export { default as StatusButtons } from './StatusButtons';
+export * from './StatusButton';
+export * from './style';

package/build/components/TableHeader_V2/components/StatusButtons/style.d.ts

@@ -0,0 +1,35 @@
+import type React from 'react';
+import { type Theme } from '@mui/material';
+export declare const statusButtonVariants: {
+    active: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+        icon?: string | undefined;
+    }, {}, {}>;
+    inActive: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+    }, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+        icon?: string | undefined;
+    }, {}, {}>;
+};
+export type StatusButtonVariant = keyof typeof statusButtonVariants;
+export declare const CountBadge: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    variant: StatusButtonVariant;
+}, {}, {}>;
+export declare const StatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    variant: StatusButtonVariant;
+    icon?: "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "reversed" | "authorized" | "paidOut" | "unauthenticated" | "authenticated" | "scheduled" | "unSettled" | "search" | "view" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | "textView" | "trashBin" | undefined;
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledFilterName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("../../..").IProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ChevronContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    variant: StatusButtonVariant;
+}, {}, {}>;
+export declare const LabelWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/build/components/TableHeader_V2/components/StatusButtons/style.js

@@ -0,0 +1,74 @@
+import { styled, Button, Box, alpha } from '@mui/material';
+import Dropdown from '../../../DropdownMenu/DropdownMenu';
+const baseButtonStyle = (theme) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'none', paddingInline: theme.spacing(2) }));
+const ActiveButton = styled(Button)(({ theme }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), { background: theme.palette.background.gradient.shadedBlue, color: theme.palette.common.white, '&:hover': {
+        background: theme.palette.background.gradient.shadedBlue,
+        opacity: 0.8,
+    } })));
+const InActiveButton = styled(Button)(({ theme }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), { backgroundColor: theme.palette.common.white, borderColor: theme.palette.grey[100], color: theme.palette.text.primary, '&:hover': {
+        backgroundColor: theme.palette.common.white,
+        opacity: 0.7,
+    } })));
+export const statusButtonVariants = {
+    active: ActiveButton,
+    inActive: InActiveButton,
+};
+export const CountBadge = styled(Box)(({ theme, variant }) => ({
+    borderRadius: '50px',
+    backgroundColor: variant === 'active' ? alpha(theme.palette.text.primary, 0.1) : theme.palette.grey[100],
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingInline: theme.spacing(0.5),
+    paddingBlock: theme.spacing(0.25),
+    color: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary,
+    fontSize: '8px',
+    fontWeight: 700,
+    lineHeight: '10px',
+}));
+export const StatusIcon = styled('img')(({ theme, variant, icon }) => {
+    var _a;
+    return (Object.assign(Object.assign({ fill: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary, color: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary }, (!(((_a = ['openFlag', 'closedFlag']) === null || _a === void 0 ? void 0 : _a.includes(icon !== null && icon !== void 0 ? icon : '')) && variant === 'inActive') &&
+        icon !== 'captured' && {
+        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    })), { maxWidth: '14px', maxHeight: '14px' }));
+});
+export const StyledFilterName = styled('p')(({ theme }) => ({
+    fontSize: '0.6875rem',
+    color: theme.palette.background.default,
+    fontStyle: 'normal',
+    margin: 'auto',
+    textTransform: 'capitalize',
+}));
+export const StyledDropdown = styled(Dropdown)(({ theme }) => ({
+    backgroundColor: 'white',
+    boxShadow: theme.shadows[21],
+    borderRadius: '0.25rem',
+    '& .MuiPaper-root': {
+        borderRadius: '0.25rem',
+        width: '12.5rem',
+    },
+}));
+export const ChevronContainer = styled('span')(() => ({
+    width: '27px',
+    height: '100%',
+    maxHeight: '100%',
+    position: 'absolute',
+    top: '0',
+    right: '0',
+    bottom: '0',
+    overflow: 'hidden',
+}));
+export const Label = styled(Box)(({ variant }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: '0.5rem',
+    fontWeight: variant === 'active' ? 700 : 400,
+}));
+export const LabelWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+}));

package/build/components/TableHeader_V2/components/StatusButtons/type.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { type ButtonProps } from '@mui/material';
+import { TableHeaderStatus } from '../../../../types/index.js';
+import { type StatusButtonVariant } from './style';
+import { statusButtonIcons } from './constant';
+import { MenuItemI } from '../../../DropdownMenu';
+export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
+    variant?: StatusButtonVariant;
+    badgeCount?: number | string;
+    hasDropdown?: boolean;
+    icon?: StatusButtonIcon;
+    label?: ReactNode | null;
+    totalCount?: number;
+    onButtonBodyClick?: (status: TableHeaderStatus) => void;
+    dropdownOptions?: Array<MenuItemI & {
+        status: TableHeaderStatus;
+    }>;
+}
+export interface ChevronIconProps {
+    isActive?: boolean;
+}
+export type StatusButtonIcon = keyof typeof statusButtonIcons;

package/build/components/TableHeader_V2/components/StatusButtons/type.js

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

package/build/components/TableHeader_V2/components/TableView/CustomViews.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TableHeaderProps } from '../../type';
+interface CustomViewsProps {
+    open: boolean;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setTableViews: TableHeaderProps['setTableViews'];
+    tableViews: TableHeaderProps['tableViews'];
+    anchorEl: Element | null;
+    onClose: () => void;
+}
+declare function CustomViews({ open, onSelect, setTableViews: setColumns, tableViews, anchorEl, onClose }: Readonly<CustomViewsProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CustomViews>;
+export default _default;

package/build/components/TableHeader_V2/components/TableView/CustomViews.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import startCase from 'lodash/startCase';
+import { Reorder } from 'framer-motion';
+import Box from '@mui/material/Box';
+import Menu from '@mui/material/Menu';
+import { useTheme } from '@mui/material/styles';
+import { downArrowIcon } from '../../../../constants/index.js';
+import { ButtonStyled, ListStyled, DropdownStyled } from './style';
+import { NestedMenuItem as MenuItem } from '../../../NestedDropdown';
+function CustomViews({ open, onSelect, setTableViews: setColumns, tableViews, anchorEl, onClose }) {
+    const columns = tableViews || [];
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const modifyColumns = (selectedCols) => {
+        const newColumns = selectedCols === null || selectedCols === void 0 ? void 0 : selectedCols.map((col) => {
+            const selectedColumn = columns.find((column) => column.name === col);
+            return selectedColumn;
+        });
+        setColumns === null || setColumns === void 0 ? void 0 : setColumns(newColumns);
+    };
+    const handleUnSelectColumn = (selectedCols) => {
+        const newCols = columns.map((column) => {
+            var _a;
+            const newMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((menuItem) => {
+                if (menuItem.name === selectedCols.name) {
+                    return Object.assign(Object.assign({}, menuItem), { selected: false });
+                }
+                return menuItem;
+            });
+            return Object.assign(Object.assign({}, column), { selected: newMenuItems === null || newMenuItems === void 0 ? void 0 : newMenuItems.every((i) => i.selected), menuItems: newMenuItems });
+        });
+        setColumns === null || setColumns === void 0 ? void 0 : setColumns(newCols);
+    };
+    const orderedColumns = columns === null || columns === void 0 ? void 0 : columns.map((column) => column.name);
+    return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "TableView_CustomViews" }, { children: [_jsxs(ButtonStyled, Object.assign({ "data-testid": "TableView_CustomViews_Button", onClick: (e) => {
+                    onSelect(e);
+                } }, { children: [_jsx("div", { children: t('columns') }), _jsx("img", { src: downArrowIcon, alt: "arrow", style: Object.assign({}, (Boolean(open) && { transform: 'rotate(180deg)' })) })] })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, "data-testid": "TableView_CustomViews_Popper", sx: { padding: 0, marginTop: '8px' }, MenuListProps: { sx: { py: 0 } }, onClose: onClose }, { children: _jsx(ListStyled, Object.assign({ component: "article", "data-testid": "TableView_CustomViews_List" }, { children: _jsx(Reorder.Group, Object.assign({ as: "div", axis: "y", onReorder: modifyColumns, values: orderedColumns, style: { maxHeight: 500, overflowY: 'auto' } }, { children: orderedColumns.map((name, index) => {
+                            var _a;
+                            const selectedColumn = columns.find((col) => col.name === name);
+                            return (_jsx(Box, Object.assign({ sx: Object.assign({ borderTop: `1px solid ${theme.palette.divider}` }, (index === 0 && { borderTop: 'none', height: 33 })) }, { children: _jsx(MenuItem, Object.assign({ setSelected: ({ name: selectedName, selected }) => {
+                                        const newMenuItems = columns === null || columns === void 0 ? void 0 : columns.map((menuItem) => {
+                                            var _a;
+                                            if (menuItem.name === selectedName) {
+                                                return Object.assign(Object.assign({}, menuItem), { selected, menuItems: (_a = menuItem.menuItems) === null || _a === void 0 ? void 0 : _a.map((childItem) => {
+                                                        return Object.assign(Object.assign({}, childItem), { selected });
+                                                    }) });
+                                            }
+                                            return menuItem;
+                                        });
+                                        setColumns === null || setColumns === void 0 ? void 0 : setColumns(newMenuItems || []);
+                                    }, onSelect: (selectedChild, parentName) => {
+                                        handleUnSelectColumn(selectedChild[0]);
+                                        const newMenuItems = columns === null || columns === void 0 ? void 0 : columns.map((menuItem) => {
+                                            var _a;
+                                            if (menuItem.name === parentName) {
+                                                const newChildren = (_a = menuItem.menuItems) === null || _a === void 0 ? void 0 : _a.map((childItem) => {
+                                                    var _a, _b;
+                                                    if (childItem.name === ((_a = selectedChild[0]) === null || _a === void 0 ? void 0 : _a.name)) {
+                                                        return Object.assign(Object.assign({}, childItem), { selected: (_b = selectedChild[0]) === null || _b === void 0 ? void 0 : _b.selected });
+                                                    }
+                                                    return childItem;
+                                                });
+                                                return Object.assign(Object.assign({}, menuItem), { menuItems: newChildren, selected: newChildren === null || newChildren === void 0 ? void 0 : newChildren.some((i) => i.selected) });
+                                            }
+                                            return menuItem;
+                                        });
+                                        setColumns === null || setColumns === void 0 ? void 0 : setColumns(newMenuItems || []);
+                                    } }, {
+                                    name,
+                                    selected: selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.selected,
+                                    label: (_a = t(selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.label)) !== null && _a !== void 0 ? _a : startCase(selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.label),
+                                    menuItems: selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.menuItems,
+                                }), `${name}`) }), `${name}`));
+                        }) })) })) }))] })));
+}
+export default React.memo(CustomViews);

package/build/components/TableHeader_V2/components/TableView/DefaultViews.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ViewOption } from '../../type';
+interface DefaultViewsProps {
+    open: boolean;
+    selectedViewInfo: ViewOption;
+    setSelectedViewInfo: (selectedView: ViewOption) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setViews?: (views: string[]) => void;
+    anchorEl: Element | null;
+}
+declare function DefaultViews({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl }: Readonly<DefaultViewsProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DefaultViews>;
+export default _default;

package/build/components/TableHeader_V2/components/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_V2/components/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_V2/components/TableView/TableView.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { Box, ClickAwayListener } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import ExportButton from '../../../ExportButton';
+import Tooltip from '../../../Tooltip';
+import { closeXIcon } 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);
+        setSelectedViewInfo({ label: 'Default', id: 'default' });
+    };
+    const handleSelectedViewInfo = (selected) => {
+        setSelectedViewInfo(selected);
+        closeViewDropdown();
+    };
+    if (!anchorViewEl) {
+        return (_jsx(Tooltip, Object.assign({ title: t('tableView'), "data-testid": "TableView_no_anchorViewEl" }, { children: _jsx(Box, { children: _jsx(ExportButton, { icon: "view", onClick: onViewButtonClick, "data-testid": "TableView_no_anchorViewEl_button" }) }) })));
+    }
+    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_V2/components/TableView/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TableView } from './TableView';
+export * from './TableView';
+export * from './style';

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

@@ -0,0 +1,3 @@
+export { default as TableView } from './TableView';
+export * from './TableView';
+export * from './style';

package/build/components/TableHeader_V2/components/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>, {}, {}>;