@tap-payments/os-micro-frontend-shared 0.1.261-test.3 → 0.1.261-test.5

package/build/components/Error/Error.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
-export interface ErrorI extends BoxProps {
+interface ErrorI extends BoxProps {
     error: string;
 }
 declare function Error({ error, ...props }: ErrorI): import("react/jsx-runtime").JSX.Element;

package/build/components/Inputs/CountriesDropDown/CountriesDropdown.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import type { Country } from '../../../types/index.js';
-type CountriesDropdownProps = {
+declare function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries, isFetching, }: {
     value?: Partial<Country>;
     defaultCountry?: string;
     onChangeCountry?: (country: Country) => void;
     required?: boolean;
     countries: Country[];
-    isLoading: boolean;
-};
-declare function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries, isLoading, }: Readonly<CountriesDropdownProps>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof CountriesDropdown>;
+    isFetching: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CountriesCode>;
 export default _default;

package/build/components/Inputs/CountriesDropDown/CountriesDropdown.js

@@ -6,7 +6,7 @@ import Popper from '@mui/material/Popper';
 import Skeleton from '@mui/material/Skeleton';
 import { downArrowIcon, searchIcon } from '../../../constants/index.js';
 import { CountryStyled, CountriesWrapper, CountriesList, InputStyled, CountryButton, Required } from './style';
-function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries = [], isLoading = false, }) {
+function CountriesCode({ defaultCountry, value: selectedCountry, onChangeCountry, required, countries = [], isFetching = false, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const [filteredCountries, setFilteredCountries] = useState([]);
     const [searchValue, setSearchValue] = useState();
@@ -45,7 +45,7 @@ function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCou
         }
         setFilteredCountries(countries.filter((country) => country.idd_prefix.toString().startsWith(value.toString())));
     };
-    if (isLoading) {
+    if (isFetching) {
         return _jsx(Skeleton, { variant: "rectangular", width: 56.5, height: 20, sx: { borderRadius: '4px' } });
     }
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeDropdown }, { children: _jsxs(Box, Object.assign({ "data-testid": "CountriesCode", sx: { position: 'relative' } }, { children: [_jsxs(CountryButton, Object.assign({ type: "button", onClick: openDropdown, sx: {
@@ -56,4 +56,4 @@ function CountriesDropdown({ defaultCountry, value: selectedCountry, onChangeCou
                                         selectNewCode(country);
                                     } }, { children: [country.logo ? _jsx("img", { src: country.logo, alt: "c", className: "logo" }) : _jsx(Skeleton, { variant: "rectangular", className: "logo" }), _jsx("span", { children: `+${country.idd_prefix}` })] }), `country-code-${country.countryId}`))) })] })) }))] })) })));
 }
-export default memo(CountriesDropdown);
+export default memo(CountriesCode);

package/build/components/StatusBar/StatusBar.js

@@ -35,10 +35,11 @@ function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChan
                         }
                     }, buttonSx: buttonSx })));
             }
-            const statusItems = s.status;
-            if (!statusItems)
+            if (!s.status)
                 return null;
-            const formattedStatuses = statusItems.filter(Boolean).map((item) => (typeof item === 'string' ? { value: item } : item)) || [];
+            const statusItems = s.status;
+            const formattedStatuses = (statusItems.filter(Boolean).map((item) => (typeof item === 'string' ? { value: item } : item)) ||
+                []);
             const hasMatchingDropdownStatus = !!status && formattedStatuses.some((item) => (item === null || item === void 0 ? void 0 : item.value) === status);
             const variant = hasMatchingDropdownStatus ? 'active' : 'inActive';
             const selectedStatus = hasMatchingDropdownStatus ? status : (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value;

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

@@ -6,7 +6,7 @@ export type DetailedStatusItem<T> = {
     icon?: React.ReactNode;
 };
 export type AvailableStatus<T extends TableHeaderStatus | TableHeaderStatus[] = undefined> = StatusButtonProps & {
-    status?: T | DetailedStatusItem<T>[];
+    status?: T | T[] | DetailedStatusItem<T>[];
     render?: <IStatus extends T>(controls: {
         status: IStatus;
         onChange: (selected?: T) => void;

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

@@ -1,2 +1,2 @@
 import type { FilterRowProps } from './type';
-export declare function FiltersRow({ children }: FilterRowProps): import("react/jsx-runtime").JSX.Element;
+export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, isTextShown, calendarGroupBy, onCalendarGroupChange, maxDateRange, searchPlaceholder, isAcceptance, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, }: FilterRowProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableHeader/FiltersRow.js

@@ -1,5 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FiltersRowWrapper } from './style';
-export function FiltersRow({ children }) {
-    return (_jsx(FiltersRowWrapper, Object.assign({ component: "aside", "data-testid": "FiltersRow" }, { children: children })));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { SearchButton, StyledButton, Icon, RangeCalender } from '../index.js';
+import { longWordsIcon, viewIcon, sheetViewIcon } from '../../constants/index.js';
+import FiltersRowWrapper from './FiltersRowWrapper';
+import TableView from './TableView';
+export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, isTextShown, calendarGroupBy, onCalendarGroupChange, maxDateRange = 31, searchPlaceholder, isAcceptance, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, }) {
+    const [isViewVisible, setIsViewVisible] = useState(false);
+    const timezoneCountriesCodes = useMemo(() => segmentCountries.map(({ code }) => code), [segmentCountries]);
+    const textViewButton = useMemo(() => (_jsx(StyledButton, Object.assign({ hasImageFilter: false, "data-testid": "FiltersRow_TextViewButton", onClick: onToggleTextButtonClick, isActive: isTextShown }, { children: _jsx(Icon, { src: tableMode === 'sheet' ? sheetViewIcon : longWordsIcon, alt: "text-mode", sx: {
+                width: 14,
+                height: 14,
+            } }) }))), [isTextShown, onToggleTextButtonClick, tableMode]);
+    return (_jsxs(FiltersRowWrapper, { children: [leftActions && !isViewVisible && leftActions, !isViewVisible && (_jsxs(_Fragment, { children: [onSearchChange && _jsx(SearchButton, { onSearchChange: onSearchChange, placeholder: searchPlaceholder }), tableFilterComponent, onToggleTextButtonClick && !isAcceptance && textViewButton, date && (_jsx(RangeCalender, { defaultDate: date, onDateChange: (newDate) => {
+                            const [startDate, endDate] = newDate;
+                            if (startDate && endDate) {
+                                onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange([startDate, endDate]);
+                            }
+                        }, mode: calendarMode, onCalendarModeSwitch: onCalendarModeSwitch, maxDateRange: maxDateRange, groupBy: calendarGroupBy, onCalendarGroupChange: onCalendarGroupChange, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, timezone: timezone, onChangeTimezone: onChangeTimezone, timezoneCountriesCodes: timezoneCountriesCodes })), isReportsButtonVisible && tableReportsComponent, onToggleTextButtonClick && isAcceptance && textViewButton] })), onToggleViewButtonClick && (_jsx(StyledButton, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), onViewChange && (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews })), rightActions && !isViewVisible && rightActions] }));
 }

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import type { BoxProps } from '@mui/material/Box';
+export type FiltersRowWrapperProps<T extends React.ElementType = 'aside'> = PropsWithChildren<BoxProps<T>>;
+declare const FiltersRowWrapper: <T extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "aside">(props: Readonly<FiltersRowWrapperProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export default FiltersRowWrapper;

package/build/components/TableHeader/FiltersRowWrapper.js

@@ -0,0 +1,18 @@
+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 { FiltersRowContainer } from './style';
+const FiltersRowWrapper = (props) => {
+    const { children, component = 'aside' } = props, rest = __rest(props, ["children", "component"]);
+    return (_jsx(FiltersRowContainer, Object.assign({ component: component, "data-testid": "FiltersRow" }, rest, { children: children })));
+};
+export default FiltersRowWrapper;

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

@@ -1,4 +1,5 @@
-import { PropsWithChildren } from 'react';
-export type TableHeaderProps = PropsWithChildren<{}>;
-declare const TableHeader: (props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default TableHeader;
+import type { TableHeaderProps } from './type';
+import { type TableHeaderStatus } from '../../types/index.js';
+export declare function TableHeader<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined>({ date, status, availableStatuses, showMaximizedView, title, calendarMode, tableReportsComponent, tableFilterComponent, onStatusChange, onViewChange, onDateChange, onCalendarModeSwitch, filteredIds, onCancelFilteredIdsClick, isFilteredIdsShown, cardNumber, leftActions, rightActions, isReportsButtonVisible, onSearchChange, onToggleViewButtonClick, leftComponent, tableViews, setTableViews, resetTableViews, onToggleTextButtonClick, isTextShown, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, ...StatusBarProps }: TableHeaderProps<IStatus>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof TableHeader;
+export default _default;

package/build/components/TableHeader/TableHeader.js

@@ -1,7 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TableHeaderContainer } from './style';
-const TableHeader = (props) => {
-    const { children } = props;
-    return (_jsx(TableHeaderContainer, Object.assign({ as: "header", "data-testid": "TableHeader" }, { children: children })));
+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;
 };
-export default TableHeader;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { FilteredIds, StatusBar, TableHeaderWrapper } from '../index.js';
+import FiltersRow from './FiltersRow';
+import { StatusButtonsContainer, TitleContainer, TableHeaderTitle, TableHeaderRow } from './style';
+export function TableHeader(_a) {
+    var { date, status, availableStatuses, showMaximizedView, title, calendarMode, tableReportsComponent, tableFilterComponent, onStatusChange, onViewChange, onDateChange, onCalendarModeSwitch, filteredIds, onCancelFilteredIdsClick, isFilteredIdsShown, cardNumber, leftActions, rightActions, isReportsButtonVisible, onSearchChange, onToggleViewButtonClick, leftComponent, tableViews, setTableViews, resetTableViews, onToggleTextButtonClick, isTextShown, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries = [] } = _a, StatusBarProps = __rest(_a, ["date", "status", "availableStatuses", "showMaximizedView", "title", "calendarMode", "tableReportsComponent", "tableFilterComponent", "onStatusChange", "onViewChange", "onDateChange", "onCalendarModeSwitch", "filteredIds", "onCancelFilteredIdsClick", "isFilteredIdsShown", "cardNumber", "leftActions", "rightActions", "isReportsButtonVisible", "onSearchChange", "onToggleViewButtonClick", "leftComponent", "tableViews", "setTableViews", "resetTableViews", "onToggleTextButtonClick", "isTextShown", "calendarGroupBy", "onCalendarGroupChange", "children", "maxDateRange", "isAcceptance", "startComponent", "searchPlaceholder", "tableMode", "timezone", "browserTimezone", "defaultCountryTimezone", "onChangeTimezone", "segmentCountries"]);
+    const filtersRow = (_jsx(FiltersRow, { date: date, calendarMode: calendarMode, onDateChange: onDateChange, onCalendarModeSwitch: onCalendarModeSwitch, tableReportsComponent: tableReportsComponent, tableFilterComponent: tableFilterComponent, onViewChange: onViewChange, leftActions: leftActions, rightActions: rightActions, onSearchChange: onSearchChange, onToggleViewButtonClick: onToggleViewButtonClick, isReportsButtonVisible: isReportsButtonVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, onToggleTextButtonClick: onToggleTextButtonClick, tableMode: tableMode, isTextShown: isTextShown, onCalendarGroupChange: onCalendarGroupChange, calendarGroupBy: calendarGroupBy, maxDateRange: maxDateRange, isAcceptance: isAcceptance, searchPlaceholder: searchPlaceholder, timezone: timezone, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, onChangeTimezone: onChangeTimezone, segmentCountries: segmentCountries }));
+    return (_jsxs(TableHeaderWrapper, { children: [showMaximizedView && (_jsxs(TitleContainer, { children: [_jsx("span", { children: !!title && _jsx(TableHeaderTitle, { children: title }) }), filtersRow] }, "TitleContainer")), _jsxs(TableHeaderRow, Object.assign({ as: "section" }, { children: [_jsxs(StatusButtonsContainer, Object.assign({ as: "aside" }, { children: [startComponent, _jsx(StatusBar, Object.assign({ status: status, availableStatuses: availableStatuses, onStatusChange: onStatusChange, isFilteredIdsShown: isFilteredIdsShown }, StatusBarProps)), leftComponent, isFilteredIdsShown && (_jsx(FilteredIds, { cardNumber: cardNumber, Ids: filteredIds, isShown: isFilteredIdsShown, onCancelClick: onCancelFilteredIdsClick }, "FilteredIds"))] })), !showMaximizedView && filtersRow] }), "FiltersWrapper"), children] }));
+}
+export default memo(TableHeader);

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

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+import type { BoxProps } from '@mui/material/Box';
+export type TableHeaderWrapperProps<T extends React.ElementType = 'header'> = PropsWithChildren<BoxProps<T>>;
+declare const TableHeaderWrapper: <T extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "header">(props: TableHeaderWrapperProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TableHeaderWrapper;

package/build/components/TableHeader/TableHeaderWrapper.js

@@ -0,0 +1,18 @@
+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 { TableHeaderContainer } from './style';
+const TableHeaderWrapper = (props) => {
+    const { children, component = 'header' } = props, rest = __rest(props, ["children", "component"]);
+    return (_jsx(TableHeaderContainer, Object.assign({ component: component, "data-testid": "TableHeader" }, rest, { children: children })));
+};
+export default TableHeaderWrapper;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ColumnViewProps } from '../../../types/index.js';
+interface ColumnItemProps {
+    column: ColumnViewProps;
+    index: number;
+    openSubMenuName: string | null;
+    subMenuAnchorEl: HTMLElement | null;
+    toggleColumnSelection: (columnName: string) => void;
+    toggleSubmenuItem: (columnName: string, submenuItemName: string) => void;
+    handleSubMenuOpen: (event: React.MouseEvent<HTMLElement>, name: string) => void;
+    handleSubMenuClose: () => void;
+}
+declare function ColumnItem({ column, index, openSubMenuName, subMenuAnchorEl, toggleColumnSelection, toggleSubmenuItem, handleSubMenuOpen, handleSubMenuClose, }: ColumnItemProps): import("react/jsx-runtime").JSX.Element;
+export default ColumnItem;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import startCase from 'lodash/startCase';
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { Menu, MenuItem } from '../../index.js';
+import { rightArrow } from '../../../constants/index.js';
+import { useColumnItem } from './hooks';
+function ColumnItem({ column, index, openSubMenuName, subMenuAnchorEl, toggleColumnSelection, toggleSubmenuItem, handleSubMenuOpen, handleSubMenuClose, }) {
+    var _a;
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { isIndeterminate, hasSubmenuItems, isSubmenuOpen, isFirstItem, handleColumnClick, handleMouseEnter, handleMouseLeave } = useColumnItem({
+        column,
+        index,
+        openSubMenuName,
+        toggleColumnSelection,
+        handleSubMenuOpen,
+        handleSubMenuClose,
+    });
+    const getDisplayLabel = (label) => {
+        var _a;
+        if (!label)
+            return '';
+        return (_a = t(label)) !== null && _a !== void 0 ? _a : startCase(label);
+    };
+    return (_jsxs(Box, Object.assign({ sx: Object.assign({ borderTop: `1px solid ${theme.palette.divider}` }, (isFirstItem && { borderTop: 'none', height: 33 })) }, { children: [_jsxs(MenuItem, Object.assign({ isIndeterminate: isIndeterminate, isSelected: column.selected, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleColumnClick }, { children: [_jsx(Box, Object.assign({ sx: { flex: 1 } }, { children: getDisplayLabel(column.label) })), hasSubmenuItems && _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow" })] })), hasSubmenuItems && (_jsx(Menu, Object.assign({ open: isSubmenuOpen, anchorEl: subMenuAnchorEl, placement: "right-start", onMouseEnter: () => { }, onMouseLeave: handleSubMenuClose }, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((submenuItem) => (_jsx(MenuItem, Object.assign({ isSelected: submenuItem.selected, onClick: () => toggleSubmenuItem(column.name, submenuItem.name) }, { children: getDisplayLabel(submenuItem.label) }), submenuItem.name))) })))] }), column.name));
+}
+export default ColumnItem;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { CustomViewsProps } from './type';
+declare function CustomViews({ open, onSelect, setTableViews, tableViews, anchorEl, onClose }: Readonly<CustomViewsProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CustomViews>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Reorder } from 'framer-motion';
+import { CustomBackdrop, Menu } from '../../index.js';
+import { downArrowIcon } from '../../../constants/index.js';
+import { ButtonStyled, ListStyled, DropdownStyled } from './style';
+import { useSubMenu, useViewColumns } from './hooks';
+import ColumnItem from './ColumnItem';
+function CustomViews({ open, onSelect, setTableViews, tableViews, anchorEl, onClose }) {
+    const { t } = useTranslation();
+    const columns = useMemo(() => tableViews || [], [tableViews]);
+    const columnNames = useMemo(() => columns.map((column) => column.name), [columns]);
+    const { reorderColumns, toggleColumnSelection, toggleSubmenuItem } = useViewColumns({
+        columns,
+        setTableViews,
+    });
+    const { subMenuAnchorEl, openSubMenuName, handleSubMenuClose, handleSubMenuOpen, handleMenuScroll } = useSubMenu(open, onClose);
+    return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "TableView_CustomViews" }, { children: [_jsxs(ButtonStyled, Object.assign({ "data-testid": "TableView_CustomViews_Button", onClick: onSelect }, { children: [_jsx("div", { children: t('columns') }), _jsx("img", { src: downArrowIcon, alt: "arrow", style: Object.assign({}, (Boolean(open) && { transform: 'rotate(180deg)' })) })] })), _jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, "data-testid": "TableView_CustomViews_Popper", sx: { padding: 0, marginTop: '8px', borderRadius: 1 } }, { children: [open && _jsx(CustomBackdrop, { onClick: onClose }), _jsx(ListStyled, Object.assign({ component: "article", "data-testid": "TableView_CustomViews_List" }, { children: _jsx(Reorder.Group, Object.assign({ as: "div", axis: "y", onReorder: reorderColumns, values: columnNames, style: { maxHeight: 500, overflowY: 'auto' }, onScroll: handleMenuScroll }, { children: columns.map((column, index) => (_jsx(ColumnItem, { column: column, index: index, openSubMenuName: openSubMenuName, subMenuAnchorEl: subMenuAnchorEl, toggleColumnSelection: toggleColumnSelection, toggleSubmenuItem: toggleSubmenuItem, handleSubMenuOpen: handleSubMenuOpen, handleSubMenuClose: handleSubMenuClose }, column.name))) })) }))] }))] })));
+}
+export default memo(CustomViews);

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