@tap-payments/os-micro-frontend-shared 0.1.367-test.1 → 0.1.367-test.1-test.2-test.3

package/build/components/Notifications/Notifications.d.ts

@@ -0,0 +1 @@
+export default function Notifications(): import("react/jsx-runtime").JSX.Element;

package/build/components/Notifications/Notifications.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { Toaster, resolveValue } from 'react-hot-toast';
+import { actionSuccessIcon, warningInfoIcon } from '../../constants/index.js';
+import { Content } from './style';
+const icons = {
+    success: actionSuccessIcon,
+    error: warningInfoIcon,
+};
+export default function Notifications() {
+    return (_jsx(Toaster, { children: (t) => (_jsxs(Content, { children: [icons[t.type] && _jsx(Box, { component: "img", src: icons[t.type], alt: t.type }), _jsx(Box, { children: resolveValue(t.message, t) })] })) }));
+}

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

@@ -0,0 +1,2 @@
+import Notifications from './Notifications';
+export default Notifications;

package/build/components/Notifications/index.js

@@ -0,0 +1,2 @@
+import Notifications from './Notifications';
+export default Notifications;

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

@@ -1,2 +1,2 @@
 import type { FilterRowProps } from './type';
-export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange, searchPlaceholder, isAcceptance, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, }: 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, calendarGroupBy, onCalendarGroupChange, maxDateRange, searchPlaceholder, isAcceptance, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, }: FilterRowProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableHeader/FiltersRow.js

@@ -4,8 +4,9 @@ import { SearchButton, StyledButton, Icon, RangeCalender } from '../index.js';
 import { viewIcon } from '../../constants/index.js';
 import FiltersRowWrapper from './FiltersRowWrapper';
 import TableView from './TableView';
+import { ViewsManager } from './TableView';
 import TableModeButton from './TableModeButton';
-export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange = 31, searchPlaceholder, isAcceptance, tableMode = 'default', timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, }) {
+export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange = 31, searchPlaceholder, isAcceptance, tableMode = 'default', timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, }) {
     const [isViewVisible, setIsViewVisible] = useState(false);
     const timezoneCountriesCodes = useMemo(() => segmentCountries.map(({ code }) => code), [segmentCountries]);
     const tableModeButton = useMemo(() => _jsx(TableModeButton, { tableMode: tableMode, onToggle: onToggleTextButtonClick }), [tableMode, onToggleTextButtonClick]);
@@ -14,5 +15,6 @@ export default function FiltersRow({ date, calendarMode, onDateChange, onCalenda
                             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 && tableModeButton] })), 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] }));
+                        }, mode: calendarMode, onCalendarModeSwitch: onCalendarModeSwitch, maxDateRange: maxDateRange, groupBy: calendarGroupBy, onCalendarGroupChange: onCalendarGroupChange, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, timezone: timezone, onChangeTimezone: onChangeTimezone, timezoneCountriesCodes: timezoneCountriesCodes })), isReportsButtonVisible && tableReportsComponent, onToggleTextButtonClick && isAcceptance && tableModeButton] })), onToggleViewButtonClick && (_jsx(StyledButton, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), onViewChange &&
+                (customViews || onCreateCustomView ? (_jsx(ViewsManager, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, mode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews })) : (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews }))), rightActions && !isViewVisible && rightActions] }));
 }

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

@@ -1,5 +1,5 @@
 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, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, ...StatusBarProps }: TableHeaderProps<IStatus>): import("react/jsx-runtime").JSX.Element;
+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, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, ...StatusBarProps }: TableHeaderProps<IStatus>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof TableHeader;
 export default _default;

package/build/components/TableHeader/TableHeader.js

@@ -15,8 +15,8 @@ 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, 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", "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, onCalendarGroupChange: onCalendarGroupChange, calendarGroupBy: calendarGroupBy, maxDateRange: maxDateRange, isAcceptance: isAcceptance, searchPlaceholder: searchPlaceholder, timezone: timezone, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, onChangeTimezone: onChangeTimezone, segmentCountries: segmentCountries }));
+    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, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries = [], customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews } = _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", "calendarGroupBy", "onCalendarGroupChange", "children", "maxDateRange", "isAcceptance", "startComponent", "searchPlaceholder", "tableMode", "timezone", "browserTimezone", "defaultCountryTimezone", "onChangeTimezone", "segmentCountries", "customViews", "onCreateCustomView", "onEditCustomView", "onDeleteCustomView", "viewMode", "onTableViewsChange", "initialTableViews", "onCustomViewsChange", "initialCustomViews"]);
+    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, onCalendarGroupChange: onCalendarGroupChange, calendarGroupBy: calendarGroupBy, maxDateRange: maxDateRange, isAcceptance: isAcceptance, searchPlaceholder: searchPlaceholder, timezone: timezone, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, onChangeTimezone: onChangeTimezone, segmentCountries: segmentCountries, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, viewMode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews }));
     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/TableView/CreateViewDialog.d.ts

@@ -0,0 +1,3 @@
+import type { CreateCustomViewDialogProps } from './types';
+declare function CreateViewDialog({ open, onClose, onCreate, availableColumns, isLoading, defaultColumns, editingView, onDelete, }: Readonly<CreateCustomViewDialogProps>): import("react/jsx-runtime").JSX.Element | null;
+export default CreateViewDialog;

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

@@ -0,0 +1,98 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import { Box, Typography, CircularProgress, Link, Dialog, Popper, Checkbox as MuiCheckbox } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Reorder } from 'framer-motion';
+import Draggable from 'react-draggable';
+import { Checkbox } from '../../index.js';
+import Toolbar, { StyledHeaderWrapperStyled } from '../../Toolbar';
+import { CloseIcon } from '../../ToolbarIcon';
+import { dragIcon, rightArrow, viewIcon } from '../../../constants/index.js';
+import { useWindowDimensions } from '../../../hooks/index.js';
+import { useSubmenuHover, useDialogPosition } from './hooks';
+import { DIALOG_WIDTH, DIALOG_HEIGHT, DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+import { isDateColumn, getColumnCheckState, initializeEditingColumns, initializeCreateColumns, resetColumnsToDefault, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, } from './utils';
+import { DialogContentWrapper, ScrollableContent, TitleSection, ColumnListContainer, SelectAllHeader, ColumnItemRow, DragIconWrapper, CheckboxWrapper, FooterBar, CreateButtonWrapper, SubmenuPaper, SubmenuItem, DeleteButton, CreateButton, NameTextField, checkboxSx, getDialogPaperStyle, dialogSx, } from './styles';
+function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLoading = false, defaultColumns = [], editingView, onDelete, }) {
+    const { t } = useTranslation();
+    const { height, width } = useWindowDimensions();
+    const [templateName, setTemplateName] = useState('');
+    const [selectedColumns, setSelectedColumns] = useState([]);
+    const { position, resetPosition, updatePosition } = useDialogPosition(width, height, DIALOG_WIDTH, DIALOG_HEIGHT);
+    const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
+    const dateColumn = DATE_COLUMN_CONFIG;
+    useEffect(() => {
+        if (!open)
+            return;
+        if (editingView === null || editingView === void 0 ? void 0 : editingView.submenu) {
+            const otherColumns = initializeEditingColumns(editingView.submenu, availableColumns);
+            setSelectedColumns([dateColumn, ...otherColumns]);
+            setTemplateName(editingView.label);
+        }
+        else {
+            const otherColumns = initializeCreateColumns(availableColumns);
+            setSelectedColumns([dateColumn, ...otherColumns]);
+            setTemplateName('');
+        }
+        resetPosition();
+    }, [availableColumns, open, editingView, resetPosition]);
+    const columnNames = useMemo(() => selectedColumns.map((col) => col.name), [selectedColumns]);
+    const allSelected = useMemo(() => areAllColumnsSelected(selectedColumns), [selectedColumns]);
+    const someSelected = useMemo(() => areSomeColumnsSelected(selectedColumns, allSelected), [selectedColumns, allSelected]);
+    const isNameValid = isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH);
+    const handleReorder = (reorderedNames) => {
+        const reorderedColumns = reorderedNames
+            .map((name) => selectedColumns.find((col) => col.name === name))
+            .filter((col) => Boolean(col));
+        setSelectedColumns(reorderedColumns);
+    };
+    const handleColumnToggle = (columnName) => {
+        setSelectedColumns((prev) => toggleColumn(prev, columnName));
+    };
+    const handleSubItemToggle = (columnName, subItemName) => {
+        setSelectedColumns((prev) => toggleSubItem(prev, columnName, subItemName));
+    };
+    const handleSelectAll = () => {
+        setSelectedColumns((prev) => toggleAllColumns(prev, !allSelected));
+    };
+    const handleResetToDefault = () => {
+        const columnsSource = defaultColumns.length > 0 ? defaultColumns : availableColumns;
+        const otherColumns = resetColumnsToDefault(columnsSource);
+        setSelectedColumns([dateColumn, ...otherColumns]);
+    };
+    const handleCreate = () => __awaiter(this, void 0, void 0, function* () {
+        if (!isNameValid)
+            return;
+        const columnsToCreate = selectedColumns.filter((col) => col.selected);
+        yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate }));
+        onClose();
+    });
+    const handleDelete = () => __awaiter(this, void 0, void 0, function* () {
+        if (!editingView)
+            return;
+        yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(editingView.id));
+        onClose();
+    });
+    if (!open)
+        return null;
+    return (_jsx(Draggable, Object.assign({ handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', position: position, onStop: (_, data) => updatePosition(data.x, data.y), bounds: { top: 10 } }, { children: _jsxs(Dialog, Object.assign({ disableEnforceFocus: true, open: open, onClose: onClose, hideBackdrop: true, PaperProps: { style: getDialogPaperStyle(DIALOG_WIDTH, DIALOG_HEIGHT) }, sx: dialogSx }, { children: [_jsx(StyledHeaderWrapperStyled, Object.assign({ id: "draggable-dialog-title", style: { cursor: 'move' } }, { children: _jsx(Toolbar, { isHovered: true, title: editingView ? 'Edit Custom View' : t('createCustomView') || 'Create Custom View', leftActions: _jsx(CloseIcon, { onClick: onClose }) }) })), _jsxs(DialogContentWrapper, { children: [_jsxs(ScrollableContent, { children: [_jsxs(TitleSection, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#9F9F9F' } }, { children: "Custom" })), _jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#20232B', lineHeight: 1.2 } }, { children: "View" }))] }), editingView && _jsx(DeleteButton, Object.assign({ onClick: handleDelete }, { children: "Delete View" }))] }), _jsx(Box, Object.assign({ sx: { mb: 3 } }, { children: _jsx(NameTextField, { fullWidth: true, label: _jsxs(Box, Object.assign({ component: "span" }, { children: ["Name", _jsx(Box, Object.assign({ component: "span", sx: { color: 'error.main' } }, { children: "*" }))] })), value: templateName, onChange: (e) => setTemplateName(e.target.value), inputProps: { maxLength: TEMPLATE_NAME_MAX_LENGTH }, size: "small", variant: "filled" }) })), _jsxs(ColumnListContainer, { children: [_jsxs(SelectAllHeader, Object.assign({ onClick: handleSelectAll }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: viewIcon, alt: "drag", style: { width: 16, height: 16, opacity: 0.5 } }) }), _jsx(CheckboxWrapper, { children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", sx: checkboxSx }) }), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 500, color: 'text.primary', ml: 0.75 } }, { children: "Select All" })), _jsx(Link, Object.assign({ component: "button", type: "button", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        handleResetToDefault();
+                                                    }, underline: "none", sx: { fontSize: 13, fontWeight: 500, cursor: 'pointer', color: 'common.blue' } }, { children: "Reset to default" }))] })), _jsx(Box, Object.assign({ sx: { flex: 1, overflowY: 'auto', minHeight: 0 } }, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: handleReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: selectedColumns.map((column) => {
+                                                    var _a;
+                                                    const isDate = isDateColumn(column.name);
+                                                    const hasSubmenu = column.menuItems && column.menuItems.length > 0;
+                                                    const { checked, indeterminate } = getColumnCheckState(column);
+                                                    return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }, style: { listStyle: 'none', margin: 0, padding: 0, position: 'relative', zIndex: 1, backgroundColor: '#fff' } }, { children: [_jsxs(ColumnItemRow, Object.assign({ isHovered: hoveredColumn === column.name, isDate: isDate, onMouseEnter: (e) => hasSubmenu && openSubmenu(column.name, e.currentTarget), onMouseLeave: () => hasSubmenu && closeSubmenu() }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, { children: hasSubmenu ? (_jsx(MuiCheckbox, { checked: checked, indeterminate: indeterminate, onChange: () => handleColumnToggle(column.name), size: "small", sx: Object.assign(Object.assign({}, checkboxSx), { color: 'grey.A400', '&.Mui-checked': { color: 'info.dark' }, '&.MuiCheckbox-indeterminate': { color: 'info.dark' } }) })) : (_jsx(Checkbox, { checked: checked, onChange: () => handleColumnToggle(column.name), disabled: isDate, size: "small", sx: checkboxSx })) }), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelClose, onMouseLeave: closeSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem) => (_jsxs(SubmenuItem, Object.assign({ onClick: () => handleSubItemToggle(column.name, subItem.name) }, { children: [_jsx(CheckboxWrapper, { children: _jsx(Checkbox, { checked: subItem.selected, size: "small", sx: checkboxSx }) }), _jsx(Typography, Object.assign({ sx: { fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: subItem.label || subItem.name }))] }), subItem.name))) })] })) })))] }), column.name));
+                                                }) })) }))] })] }), _jsx(FooterBar, {}), _jsx(CreateButtonWrapper, { children: _jsx(CreateButton, Object.assign({ variant: "contained", onClick: handleCreate, disabled: !isNameValid || isLoading }, { children: isLoading ? (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(CircularProgress, { size: 14, color: "inherit" }), _jsx("span", { children: editingView ? 'Saving...' : 'Creating...' })] }))) : editingView ? ('Update View') : ('Create View') })) })] })] })) })));
+}
+export default CreateViewDialog;

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

@@ -4,7 +4,7 @@ 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 { ButtonStyled, ListStyled, DropdownStyled } from './styles';
 import { useSubMenu, useViewColumns } from './hooks';
 import ColumnItem from './ColumnItem';
 function CustomViews({ open, onSelect, setTableViews, tableViews, anchorEl, onClose }) {

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ColumnViewProps } from '../../../types/index.js';
+import type { ViewOption } from '../type';
+import type { ViewMenuItem } from './types';
+interface ViewsDropdownProps {
+    open: boolean;
+    selectedViewInfo: ViewOption;
+    setSelectedViewInfo: (selectedView: ViewOption) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setViews?: (views: string[]) => void;
+    anchorEl: Element | null;
+    tableViews?: ColumnViewProps[];
+    setTableViews?: (columns: ColumnViewProps[]) => void;
+    onCreateCustomView?: () => void;
+    customViews?: ViewMenuItem[];
+    onEditCustomView?: (view: ViewMenuItem) => void;
+    defaultColumns?: ColumnViewProps[];
+    setDefaultColumns?: (columns: ColumnViewProps[]) => void;
+}
+declare function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews, onEditCustomView, defaultColumns, setDefaultColumns, }: Readonly<ViewsDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ViewsDropdown>;
+export default _default;

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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import Popper from '@mui/material/Popper';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import { bluePlusIcon, editIcon, smallBlueCheckIcon, blackRightArrowIcon } from '../../../constants/index.js';
+import { Menu, MenuItem as NestedMenuItem, Tooltip, Checkbox } from '../../index.js';
+import { useSubmenuHover, useOriginalColumns } from './hooks';
+import { MAX_CUSTOM_VIEWS } from './constants';
+import { defaultViewList } from './data';
+import { ListStyled, DropdownStyled, MenuItem, Space, SpaceAfter, ResetHeaderBox, ResetCheckboxSx, SubmenuContainer, ColumnItemsContainer, SaveCustomViewBox, SaveCustomViewInnerBox, ButtonsContainer, CancelButtonSx, OkayButtonSx, } from './styles';
+import { deepCloneColumns, toggleSingleColumn, getSubmenuItems, hasSubmenu, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, toggleAllCurrentColumns, } from './utils';
+function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, defaultColumns = [], setDefaultColumns, }) {
+    const { t } = useTranslation();
+    const { hoveredColumn: hoveredItem, anchorEl: submenuAnchorEl, openSubmenu: handleMenuItemHover, closeSubmenu: handleMenuItemLeave, cancelClose: handleSubmenuEnter, forceClose: handleSubmenuLeave, } = useSubmenuHover();
+    const [hoveredCustomView, setHoveredCustomView] = React.useState(null);
+    const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
+    const viewList = [...defaultViewList, ...customViews];
+    const toggleColumnSelection = (columnName) => {
+        if (!setDefaultColumns)
+            return;
+        const newColumns = toggleSingleColumn(defaultColumns, columnName);
+        setDefaultColumns(newColumns);
+    };
+    const getHoveredSubmenu = () => {
+        if (!hoveredItem)
+            return [];
+        const item = viewList.find((i) => i.id === hoveredItem);
+        return item ? getSubmenuItems(item, defaultColumns) : [];
+    };
+    const currentSubmenuColumns = useMemo(() => getHoveredSubmenu(), [hoveredItem, defaultColumns, viewList]);
+    const allCurrentSelected = useMemo(() => areAllCurrentColumnsSelected(currentSubmenuColumns), [currentSubmenuColumns]);
+    const someCurrentSelected = useMemo(() => areSomeCurrentColumnsSelected(currentSubmenuColumns, allCurrentSelected), [currentSubmenuColumns, allCurrentSelected]);
+    const handleSelectAll = () => {
+        if (!setDefaultColumns)
+            return;
+        const shouldSelectAll = !allCurrentSelected;
+        const newColumns = toggleAllCurrentColumns(defaultColumns, shouldSelectAll);
+        setDefaultColumns(newColumns);
+    };
+    const handleReset = () => {
+        if (!setDefaultColumns || originalColumns.length === 0)
+            return;
+        const restoredColumns = deepCloneColumns(originalColumns);
+        setDefaultColumns([...restoredColumns]);
+    };
+    const handleSaveAsCustomView = (e) => {
+        e.stopPropagation();
+        handleSubmenuLeave();
+        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView();
+    };
+    const handleCancel = () => {
+        if (setDefaultColumns && originalColumns.length > 0) {
+            const restoredColumns = deepCloneColumns(originalColumns);
+            setDefaultColumns(restoredColumns);
+        }
+        clearOriginalState();
+        handleSubmenuLeave();
+    };
+    const handleOkay = () => {
+        clearOriginalState();
+        handleSubmenuLeave();
+    };
+    const handleOpenSubmenu = (itemId, element) => {
+        saveOriginalState();
+        handleMenuItemHover(itemId, element);
+    };
+    const shouldDimNewCustomView = customViews.length >= MAX_CUSTOM_VIEWS;
+    return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "ViewsDropdown" }, { children: [_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsxs(ListStyled, { children: [_jsx(Typography, Object.assign({ sx: {
+                                paddingX: 1.25,
+                                py: 1.1,
+                                fontWeight: 500,
+                                fontSize: 11,
+                                color: '#8D8D94',
+                            } }, { children: "View" })), _jsx(Divider, {}), viewList.map((item) => (_jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
+                                if (item.isCustom) {
+                                    setHoveredCustomView(item.id);
+                                }
+                                else if (hasSubmenu(item, defaultColumns)) {
+                                    handleOpenSubmenu(item.id, e.currentTarget);
+                                }
+                            }, onMouseLeave: () => {
+                                if (item.isCustom) {
+                                    setHoveredCustomView(null);
+                                }
+                                else if (hasSubmenu(item, defaultColumns)) {
+                                    handleMenuItemLeave();
+                                }
+                            }, onClick: () => {
+                                setSelectedViewInfo(item);
+                                if (item.columns)
+                                    setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
+                            }, sx: { position: 'relative', cursor: 'pointer', pr: 1.5 } }, { children: [item.id === selectedViewInfo.id ? (_jsx("img", { style: {
+                                        width: 15,
+                                        height: 15,
+                                    }, className: "check-icon", src: smallBlueCheckIcon, alt: "check" })) : (_jsx(Space, {})), _jsx("span", Object.assign({ style: { flex: 1 } }, { children: item.label })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
+                                        e.stopPropagation();
+                                        onSelect(e);
+                                        onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);
+                                    } })), !item.isCustom && hasSubmenu(item, defaultColumns) && _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } })] }), item.id))), _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(MenuItem, Object.assign({ sx: {
+                                    border: 'none',
+                                    opacity: shouldDimNewCustomView ? 0.5 : 1,
+                                    cursor: shouldDimNewCustomView ? 'not-allowed' : 'pointer',
+                                }, onClick: (e) => {
+                                    if (shouldDimNewCustomView) {
+                                        e.stopPropagation();
+                                        return;
+                                    }
+                                    e.stopPropagation();
+                                    handleSubmenuLeave();
+                                    onSelect(e);
+                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView();
+                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "icon", style: { opacity: shouldDimNewCustomView ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: shouldDimNewCustomView ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredItem && submenuAnchorEl && getHoveredSubmenu().length > 0 && (_jsx(Menu, Object.assign({ open: Boolean(hoveredItem), anchorEl: submenuAnchorEl, placement: "right-start", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave }, { children: _jsxs(SubmenuContainer, { children: [_jsxs(ResetHeaderBox, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(Checkbox, { checked: allCurrentSelected, indeterminate: someCurrentSelected, onChange: (e) => {
+                                                e.stopPropagation();
+                                                handleSelectAll();
+                                            }, onClick: (e) => {
+                                                e.stopPropagation();
+                                            }, sx: ResetCheckboxSx }), _jsx(Typography, Object.assign({ sx: { fontSize: 12, fontWeight: 500, color: 'text.primary' } }, { children: "Select All" }))] })), _jsx(Typography, Object.assign({ component: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleReset();
+                                    }, sx: {
+                                        fontSize: 11,
+                                        fontWeight: 500,
+                                        color: '#1F88D0',
+                                        background: 'none',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        padding: 0,
+                                        '&:hover': {
+                                            textDecoration: 'underline',
+                                        },
+                                    } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: getHoveredSubmenu().map((column) => (_jsx(NestedMenuItem, Object.assign({ isSelected: column.selected, onClick: () => toggleColumnSelection(column.name) }, { children: column.label || column.name }), column.name))) }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: shouldDimNewCustomView, onClick: shouldDimNewCustomView ? undefined : handleSaveAsCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "add", style: { width: 10, height: 10, opacity: shouldDimNewCustomView ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: shouldDimNewCustomView ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: handleCancel, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleOkay, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
+}
+export default React.memo(ViewsDropdown);

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../types/index.js';
+import type { TableHeaderProps } from '../type';
+import type { ViewMenuItem, ViewMode } from './types';
+interface ViewsManagerProps {
+    onViewChange?: TableHeaderProps['onViewChange'];
+    setIsViewVisible: (visible: boolean) => void;
+    setTableViews?: TableHeaderProps['setTableViews'];
+    tableViews?: TableHeaderProps['tableViews'];
+    resetTableViews?: TableHeaderProps['resetTableViews'];
+    customViews?: ViewMenuItem[];
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+    }) => Promise<void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    mode?: ViewMode;
+    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
+    initialTableViews?: ColumnViewProps[];
+    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
+    initialCustomViews?: ViewMenuItem[];
+}
+declare function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, mode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, }: Readonly<ViewsManagerProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ViewsManager>;
+export default _default;

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

@@ -0,0 +1,108 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { viewIcon } from '../../../constants/index.js';
+import ViewsDropdown from './ViewsDropdown';
+import CreateViewDialog from './CreateViewDialog';
+import { getColumnsByMode, createCustomViewMenuItem } from './utils';
+import { ViewWrapper } from './styles';
+function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, mode = 'sheet', onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, }) {
+    const { t } = useTranslation();
+    const [anchorViewEl, setAnchorViewEl] = useState(null);
+    const [defaultViewEl, setDefaultViewElement] = useState(null);
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const [editingView, setEditingView] = useState(null);
+    const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
+    const [defaultColumns, setDefaultColumns] = useState(() => getColumnsByMode(mode));
+    // Internal state for tableViews if not provided externally
+    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || []);
+    // Use external tableViews if provided, otherwise use internal state
+    const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
+    const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
+    // Notify parent of changes if callback provided
+    const handleTableViewsChange = (newTableViews) => {
+        setTableViewsState(newTableViews);
+        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
+    };
+    // Internal state for customViews if not provided externally
+    const [internalCustomViews, setInternalCustomViews] = useState(initialCustomViews || []);
+    // Use external customViews if provided, otherwise use internal state
+    const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
+    // Notify parent of customViews changes if callback provided
+    const handleCustomViewsChange = (newCustomViews) => {
+        setInternalCustomViews(newCustomViews);
+        onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
+    };
+    const handleViewButtonClick = (event) => {
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange();
+        setAnchorViewEl(event.currentTarget);
+        setDefaultViewElement(event.currentTarget);
+    };
+    const handleCloseViewDropdown = () => {
+        setDefaultViewElement(null);
+    };
+    const handleClose = () => {
+        setAnchorViewEl(null);
+        setDefaultViewElement(null);
+        setSelectedViewInfo({ label: 'Default', id: 'default' });
+    };
+    const handleSelectedViewInfo = (selected) => {
+        setSelectedViewInfo(selected);
+        handleCloseViewDropdown();
+    };
+    const handleOpenCreateDialog = () => {
+        setEditingView(null);
+        setIsCreateDialogOpen(true);
+    };
+    const handleOpenEditDialog = (view) => {
+        setEditingView(view);
+        setIsCreateDialogOpen(true);
+    };
+    const handleCloseCreateDialog = () => {
+        setIsCreateDialogOpen(false);
+        setEditingView(null);
+    };
+    const handleSaveView = (data) => __awaiter(this, void 0, void 0, function* () {
+        if (editingView) {
+            // Update existing custom view
+            const updatedViews = customViews.map((view) => view.id === editingView.id
+                ? Object.assign(Object.assign({}, view), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns }) : view);
+            handleCustomViewsChange(updatedViews);
+            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(editingView.id, data));
+        }
+        else {
+            // Create new custom view
+            const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
+            const updatedViews = [...customViews, newView];
+            handleCustomViewsChange(updatedViews);
+            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+        }
+    });
+    const handleDeleteView = (viewId) => __awaiter(this, void 0, void 0, function* () {
+        const updatedViews = customViews.filter((view) => view.id !== viewId);
+        handleCustomViewsChange(updatedViews);
+        yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(viewId));
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ "data-testid": "ViewsManager" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsManager_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e) => setDefaultViewElement(defaultViewEl ? null : e.currentTarget), setViews: (views) => {
+                                if (resetTableViews) {
+                                    resetTableViews({ id: views[0], label: views[0] });
+                                }
+                                else {
+                                    // If no resetTableViews provided, reset to initial or default columns
+                                    const resetColumns = initialTableViews || getColumnsByMode(mode);
+                                    handleTableViewsChange(resetColumns);
+                                }
+                            }, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView })] }));
+}
+export default memo(ViewsManager);

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

@@ -0,0 +1,10 @@
+export declare const DIALOG_WIDTH = 450;
+export declare const DIALOG_HEIGHT = 600;
+export declare const SUBMENU_CLOSE_DELAY = 150;
+export declare const MAX_CUSTOM_VIEWS = 3;
+export declare const TEMPLATE_NAME_MAX_LENGTH = 20;
+export declare const DATE_COLUMN_CONFIG: {
+    readonly name: "date";
+    readonly label: "Date & Time";
+    readonly selected: true;
+};

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

@@ -0,0 +1,10 @@
+export const DIALOG_WIDTH = 450;
+export const DIALOG_HEIGHT = 600;
+export const SUBMENU_CLOSE_DELAY = 150;
+export const MAX_CUSTOM_VIEWS = 3;
+export const TEMPLATE_NAME_MAX_LENGTH = 20;
+export const DATE_COLUMN_CONFIG = {
+    name: 'date',
+    label: 'Date & Time',
+    selected: true,
+};

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

@@ -0,0 +1,5 @@
+import type { ColumnViewProps } from '../../../types/index.js';
+import type { ViewMenuItem } from './types';
+export declare const advancedColumns: ColumnViewProps[];
+export declare const sheetColumns: ColumnViewProps[];
+export declare const defaultViewList: ViewMenuItem[];

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

@@ -0,0 +1,54 @@
+// ============================================
+// Column Layouts (Mock Data)
+// ============================================
+export const advancedColumns = [
+    {
+        name: 'customer',
+        label: 'Customer',
+        selected: true,
+        menuItems: [
+            { name: 'customer_id', label: 'ID', selected: true },
+            { name: 'customer_name', label: 'Name', selected: true },
+            { name: 'customer_email', label: 'Email', selected: true },
+            { name: 'customer_phone', label: 'Phone', selected: false },
+        ],
+    },
+    {
+        name: 'transaction',
+        label: 'Transaction',
+        selected: true,
+        menuItems: [
+            { name: 'transaction_id', label: 'Transaction ID', selected: true },
+            { name: 'transaction_amount', label: 'Amount', selected: true },
+            { name: 'transaction_status', label: 'Status', selected: false },
+            { name: 'transaction_type', label: 'Type', selected: false },
+        ],
+    },
+    {
+        name: 'payment',
+        label: 'Payment',
+        selected: false,
+        menuItems: [
+            { name: 'payment_method', label: 'Method', selected: false },
+            { name: 'payment_card', label: 'Card', selected: false },
+            { name: 'payment_bank', label: 'Bank', selected: false },
+        ],
+    },
+];
+export const sheetColumns = [
+    { name: 'customerID', label: 'Customer ID', selected: true },
+    { name: 'customerName', label: 'Customer Name', selected: true },
+    { name: 'amount', label: 'Amount', selected: true },
+    { name: 'status', label: 'Status', selected: false },
+    { name: 'currency', label: 'Currency', selected: false },
+    { name: 'reference', label: 'Reference', selected: true },
+];
+// ============================================
+// Default View List
+// ============================================
+export const defaultViewList = [
+    {
+        label: 'Default',
+        id: 'default',
+    },
+];