@tap-payments/os-micro-frontend-shared 0.1.373-test.2-test.3-test.4-test.5-test.6-test.7 → 0.1.373-test.3-test.4

package/build/components/Sandbox/style.js

@@ -11,10 +11,8 @@ export const StyledContainer = styled(Box, {
 }));
 export const SandBoxWrapper = styled(Box)(() => ({
     display: 'flex',
-    flexDirection: 'row-reverse',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
     alignItems: 'center',
-    gap: '0.25rem',
 }));
 export const StyledImage = styled('img')(() => ({
     height: '0.75rem',
@@ -40,6 +38,7 @@ export const StyledText = styled('p', {
     color: theme.palette.common.orange,
     fontSize: '0.62rem',
     fontWeight: 600,
+    paddingRight: '0.25rem',
     opacity: isContentHovered ? 1 : 0,
     display: isContentHovered ? 'block' : 'none',
     transition: 'opacity 0.2s ease-in-out',

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, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, apiMetadata, }: 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, onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang, }: FilterRowProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableHeader/FiltersRow.js

@@ -4,9 +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 { ViewSelector } from './TableView';
+import { ViewsMenu } 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, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, apiMetadata, }) {
+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, onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang, }) {
     const [isViewVisible, setIsViewVisible] = useState(false);
     const timezoneCountriesCodes = useMemo(() => segmentCountries.map(({ code }) => code), [segmentCountries]);
     const tableModeButton = useMemo(() => _jsx(TableModeButton, { tableMode: tableMode, onToggle: onToggleTextButtonClick }), [tableMode, onToggleTextButtonClick]);
@@ -16,5 +16,5 @@ export default function FiltersRow({ date, calendarMode, onDateChange, onCalenda
                                 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 &&
-                (customViews || onCreateCustomView ? (_jsx(ViewSelector, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, tableMode: tableMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData, templates: templates, lang: lang, apiMetadata: apiMetadata })) : (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews }))), rightActions && !isViewVisible && rightActions] }));
+                (templates ? (_jsx(ViewsMenu, { onViewChange: onViewChange, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, tableMode: tableMode, templates: templates, lang: lang })) : (_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, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, apiMetadata, ...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, onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang, ...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 = [], customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, apiMetadata } = _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", "onTableViewsChange", "initialTableViews", "onCustomViewsChange", "initialCustomViews", "layoutData", "templates", "lang", "apiMetadata"]);
-    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, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData, templates: templates, lang: lang, apiMetadata: apiMetadata }));
+    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 = [], onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang } = _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", "onCreateCustomView", "onEditCustomView", "onDeleteCustomView", "templates", "lang"]);
+    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, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, templates: templates, lang: lang }));
     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/ViewsDropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { ViewsDropdownProps } from './types';
-declare function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews, onEditCustomView, defaultColumns, setDefaultColumns, updateSelectedView, }: Readonly<ViewsDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl, onClose, onCreateCustomView, customViews, onEditCustomView, onSaveDefaultColumns, defaultColumns, setDefaultColumns, updateSelectedView, baseDefaultColumns, defaultTemplate, }: 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

@@ -8,225 +8,144 @@ import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
 import { bluePlusIcon, editIcon, smallBlueCheckIcon, blackRightArrowIcon } from '../../../constants/index.js';
 import { Menu, Tooltip } from '../../index.js';
-import { useSubmenuHover, useOriginalColumns, useNestedSubmenu } from './hooks';
+import { useSubmenuHover, useOriginalColumns } from './hooks';
 import { MAX_CUSTOM_VIEWS } from './constants';
-import { defaultViewList } from './data';
 import { ViewsSubmenu } from './components/ViewsSubmenu';
 import { ListStyled, DropdownStyled, MenuItem as StyledMenuItem, Space, SpaceAfter, SubmenuContainer, SaveCustomViewBox, SaveCustomViewInnerBox, ButtonsContainer, CancelButtonSx, OkayButtonSx, ModifiedTextSx, } from './styles';
 import { deepCloneColumns, toggleSingleColumn, toggleSubItem, getSubmenuItems, hasSubmenu, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, toggleAllCurrentColumns, areColumnsEqual, } from './utils';
-function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, defaultColumns = [], setDefaultColumns, updateSelectedView, }) {
+function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl, onClose, onCreateCustomView, customViews = [], onEditCustomView, onSaveDefaultColumns, defaultColumns = [], setDefaultColumns, updateSelectedView, baseDefaultColumns = [], defaultTemplate, }) {
     const { t } = useTranslation();
-    const { hoveredColumn: hoveredItem, anchorEl: submenuAnchorEl, openSubmenu: handleMenuItemHover, closeSubmenu: handleMenuItemLeave, cancelClose: handleSubmenuEnter, forceClose: forceCloseSubmenu, } = useSubmenuHover();
-    const [hoveredCustomView, setHoveredCustomView] = React.useState(null);
-    const [isDefaultModified, setIsDefaultModified] = React.useState(false);
-    const [baselineColumns, setBaselineColumns] = React.useState([]);
-    const [isOkayClicked, setIsOkayClicked] = React.useState(false);
+    const { hoveredColumn: hoveredViewId, anchorEl: submenuAnchorEl, openSubmenu, closeSubmenu, cancelClose, forceClose } = useSubmenuHover();
+    const [hoveredCustomId, setHoveredCustomId] = React.useState(null);
+    const [showModifiedBadge, setShowModifiedBadge] = React.useState(false);
+    const [draftColumns, setDraftColumns] = React.useState(null);
     const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
-    // Wrapper to restore state when submenu closes without clicking Okay
-    const handleSubmenuLeave = () => {
-        // If submenu closes without clicking Okay, restore original state
-        if (!isOkayClicked && originalColumns.length > 0 && setDefaultColumns) {
-            const restoredColumns = deepCloneColumns(originalColumns);
-            setDefaultColumns(restoredColumns);
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
-            clearOriginalState();
-        }
-        setIsOkayClicked(false);
-        forceCloseSubmenu();
-    };
-    const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    // Default templates are merged into built-in Default view, so no need to sort
-    const viewList = [...defaultViewList, ...customViews];
-    const handleViewClick = (item) => {
-        // Mark as if Okay was clicked to prevent restoring original state
-        // When clicking directly on a view item, user wants to apply the view as-is
-        setIsOkayClicked(true);
-        // Close submenu immediately when clicking on a view (don't wait for hover to end)
-        forceCloseSubmenu();
-        // Clear original state since we're committing to this view
+    const views = useMemo(() => {
+        const list = [];
+        if (defaultTemplate)
+            list.push(defaultTemplate);
+        return [...list, ...customViews];
+    }, [defaultTemplate, customViews]);
+    const submenuColumns = useMemo(() => {
+        if (!hoveredViewId)
+            return [];
+        if (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length)
+            return draftColumns;
+        const view = views.find((v) => v.id === hoveredViewId);
+        return view ? getSubmenuItems(view, defaultColumns) : [];
+    }, [hoveredViewId, defaultColumns, views, draftColumns]);
+    const allSelected = useMemo(() => areAllCurrentColumnsSelected(submenuColumns), [submenuColumns]);
+    const someSelected = useMemo(() => areSomeCurrentColumnsSelected(submenuColumns, allSelected), [submenuColumns, allSelected]);
+    const draftHasChanges = useMemo(() => {
+        if (!originalColumns.length)
+            return false;
+        const current = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
+        return !areColumnsEqual(current, originalColumns);
+    }, [defaultColumns, originalColumns, draftColumns]);
+    const modifiedFromBase = useMemo(() => {
+        if (!baseDefaultColumns.length)
+            return false;
+        const current = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
+        return !areColumnsEqual(current, baseDefaultColumns);
+    }, [baseDefaultColumns, defaultColumns, draftColumns]);
+    const atCustomViewLimit = customViews.length >= MAX_CUSTOM_VIEWS;
+    function selectView(item) {
+        var _a;
+        forceClose();
+        setDraftColumns(null);
         clearOriginalState();
-        if (item.columns)
-            setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
-        // For default view, construct a complete view object with submenu (defaultColumns)
-        // For custom views, pass the view object as-is
-        let viewToPass;
-        if (item.id === 'default') {
-            // Create a complete default view with current default columns
-            viewToPass = {
-                id: 'default',
-                label: item.label,
-                submenu: defaultColumns,
-                columns: defaultColumns.map((col) => col.name),
-            };
+        let payload;
+        if (item.default) {
+            const cols = defaultColumns.length ? defaultColumns : (_a = defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) !== null && _a !== void 0 ? _a : [];
+            payload = Object.assign(Object.assign({}, item), { submenu: deepCloneColumns(cols), columns: cols.map((c) => c.name) });
         }
         else if (item.isCustom) {
-            viewToPass = item;
+            payload = item;
         }
-        else {
-            viewToPass = undefined;
+        setSelectedViewInfo(item, payload);
+    }
+    function openTemplateSubmenu(viewId, el) {
+        saveOriginalState();
+        setDraftColumns(deepCloneColumns(defaultColumns));
+        openSubmenu(viewId, el);
+    }
+    function discardAndClose() {
+        setDraftColumns(null);
+        clearOriginalState();
+        forceClose();
+    }
+    function applyAndClose() {
+        const isDefaultView = selectedViewInfo.id === (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id) || selectedViewInfo.id === 'default' || (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.default) === true;
+        const colsToApply = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
+        if (isDefaultView && defaultTemplate && colsToApply.length) {
+            setDefaultColumns === null || setDefaultColumns === void 0 ? void 0 : setDefaultColumns(deepCloneColumns(colsToApply));
+            if (draftHasChanges) {
+                onSaveDefaultColumns === null || onSaveDefaultColumns === void 0 ? void 0 : onSaveDefaultColumns(colsToApply);
+                setShowModifiedBadge(true);
+            }
+            updateSelectedView === null || updateSelectedView === void 0 ? void 0 : updateSelectedView(Object.assign(Object.assign({}, defaultTemplate), { id: String(defaultTemplate.id), submenu: deepCloneColumns(colsToApply), columns: colsToApply.map((c) => c.name) }));
         }
-        // Update selected view info with the view object - this will trigger view change
-        setSelectedViewInfo(item, viewToPass);
-    };
-    const toggleColumnSelection = (columnName) => {
-        if (!setDefaultColumns)
+        setDraftColumns(null);
+        clearOriginalState();
+        forceClose();
+    }
+    function toggleColumn(columnName) {
+        if (!draftColumns)
             return;
-        const newColumns = toggleSingleColumn(defaultColumns, columnName);
-        setDefaultColumns(newColumns);
-    };
-    const toggleNestedItem = (columnName, subItemName) => {
-        if (!setDefaultColumns)
+        setDraftColumns(toggleSingleColumn(draftColumns, columnName));
+    }
+    function toggleNested(columnName, subItemName) {
+        if (!draftColumns)
             return;
-        const newColumns = toggleSubItem(defaultColumns, columnName, subItemName);
-        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 originalSubmenuColumns = useMemo(() => {
-        if (!hoveredItem || originalColumns.length === 0)
-            return [];
-        const item = viewList.find((i) => i.id === hoveredItem);
-        return item ? getSubmenuItems(item, originalColumns) : [];
-    }, [hoveredItem, originalColumns, viewList]);
-    const isSubmenuModified = useMemo(() => {
-        if (originalSubmenuColumns.length === 0)
-            return true;
-        return !areColumnsEqual(currentSubmenuColumns, originalSubmenuColumns);
-    }, [currentSubmenuColumns, originalSubmenuColumns]);
-    const allCurrentSelected = useMemo(() => areAllCurrentColumnsSelected(currentSubmenuColumns), [currentSubmenuColumns]);
-    const someCurrentSelected = useMemo(() => areSomeCurrentColumnsSelected(currentSubmenuColumns, allCurrentSelected), [currentSubmenuColumns, allCurrentSelected]);
-    const handleSelectAll = () => {
-        if (!setDefaultColumns)
+        setDraftColumns(toggleSubItem(draftColumns, columnName, subItemName));
+    }
+    function reorderColumns(names) {
+        if (!draftColumns)
             return;
-        const shouldSelectAll = !allCurrentSelected;
-        const newColumns = toggleAllCurrentColumns(defaultColumns, shouldSelectAll);
-        setDefaultColumns(newColumns);
-    };
-    const handleReset = () => {
-        if (!setDefaultColumns || originalColumns.length === 0)
+        const reordered = names.map((name) => draftColumns.find((c) => c.name === name)).filter((c) => Boolean(c));
+        setDraftColumns(reordered);
+    }
+    function selectAllColumns() {
+        if (!draftColumns)
             return;
-        const restoredColumns = deepCloneColumns(originalColumns);
-        setDefaultColumns([...restoredColumns]);
-        setIsDefaultModified(false);
-        setBaselineColumns([]);
-    };
-    const handleSaveAsCustomView = (e) => {
+        setDraftColumns(toggleAllCurrentColumns(draftColumns, !allSelected));
+    }
+    function resetToBaseDefault() {
+        if (!baseDefaultColumns.length)
+            return;
+        setDraftColumns(deepCloneColumns(baseDefaultColumns));
+    }
+    function goToCreateCustomView(e) {
         e.stopPropagation();
-        setIsOkayClicked(true); // Mark that a valid action was taken, don't restore on close
-        clearOriginalState();
-        forceCloseSubmenu();
-        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true); // Use current state when saving from submenu
-    };
-    const handleCancel = () => {
-        if (setDefaultColumns && originalColumns.length > 0) {
-            const restoredColumns = deepCloneColumns(originalColumns);
-            setDefaultColumns(restoredColumns);
-            // Reset modified state when canceling
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
-        }
-        clearOriginalState();
-        setIsOkayClicked(false);
-        forceCloseSubmenu();
-    };
-    const handleOkay = () => {
-        if (originalColumns.length > 0) {
-            const hasChanges = !areColumnsEqual(defaultColumns, originalColumns);
-            setIsDefaultModified(hasChanges);
-            if (hasChanges) {
-                setBaselineColumns(deepCloneColumns(originalColumns));
-                // Update selected view internally and notify parent via callback
-                if (selectedViewInfo.id === 'default' && defaultColumns.length > 0 && updateSelectedView) {
-                    const defaultViewWithColumns = {
-                        id: 'default',
-                        label: 'Default',
-                        submenu: [...defaultColumns],
-                        columns: defaultColumns.map((col) => col.name),
-                    };
-                    updateSelectedView(defaultViewWithColumns);
-                }
-            }
-            else {
-                setBaselineColumns([]);
-            }
-        }
-        setIsOkayClicked(true); // Mark that Okay was clicked so we don't restore on close
+        setDraftColumns(null);
         clearOriginalState();
-        forceCloseSubmenu();
-    };
-    const handleOpenSubmenu = (itemId, element) => {
-        saveOriginalState();
-        setIsOkayClicked(false); // Reset flag when opening submenu
-        if (itemId === 'default' && baselineColumns.length > 0) {
-            const hasChanges = !areColumnsEqual(defaultColumns, baselineColumns);
-            setIsDefaultModified(hasChanges);
-        }
-        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(StyledMenuItem, Object.assign({ onMouseEnter: (e) => {
-                                if (item.isCustom) {
-                                    setHoveredCustomView(item.id);
-                                }
-                                else if (hasSubmenu(item, defaultColumns)) {
-                                    handleOpenSubmenu(item.id, e.currentTarget);
-                                }
+        forceClose();
+        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true);
+    }
+    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, {}), views.map((item) => (_jsxs(StyledMenuItem, Object.assign({ onMouseEnter: (e) => {
+                                if (item.isCustom)
+                                    setHoveredCustomId(item.id);
+                                else if (hasSubmenu(item, defaultColumns))
+                                    openTemplateSubmenu(item.id, e.currentTarget);
                             }, onMouseLeave: () => {
-                                if (item.isCustom) {
-                                    setHoveredCustomView(null);
-                                }
-                                else if (hasSubmenu(item, defaultColumns)) {
-                                    handleMenuItemLeave();
-                                }
-                            }, onClick: () => handleViewClick(item), 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, {})), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.id === 'default' && isDefaultModified && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
+                                if (item.isCustom)
+                                    setHoveredCustomId(null);
+                                else if (hasSubmenu(item, defaultColumns))
+                                    closeSubmenu();
+                            }, onClick: () => selectView(item), sx: { position: 'relative', cursor: 'pointer', pr: 1.5 } }, { children: [item.id === selectedViewInfo.id ? _jsx("img", { style: { width: 15, height: 15 }, src: smallBlueCheckIcon, alt: "check" }) : _jsx(Space, {}), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.default && item.id === selectedViewInfo.id && showModifiedBadge && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomId === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
                                         e.stopPropagation();
+                                        onClose === null || onClose === void 0 ? void 0 : onClose();
                                         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(StyledMenuItem, Object.assign({ sx: {
+                                    } })), !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: !atCustomViewLimit }, { children: _jsxs(StyledMenuItem, Object.assign({ sx: {
                                     border: 'none',
-                                    opacity: shouldDimNewCustomView ? 0.5 : 1,
-                                    cursor: shouldDimNewCustomView ? 'not-allowed' : 'pointer',
+                                    opacity: atCustomViewLimit ? 0.5 : 1,
+                                    cursor: atCustomViewLimit ? 'not-allowed' : 'pointer',
                                 }, onClick: (e) => {
-                                    if (shouldDimNewCustomView) {
-                                        e.stopPropagation();
-                                        return;
-                                    }
                                     e.stopPropagation();
-                                    handleSubmenuLeave();
-                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false); // Don't use current state for "New Custom View"
-                                } }, { 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: "auto-end", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave, modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [-4, 0],
-                        },
-                    },
-                    {
-                        name: 'preventOverflow',
-                        enabled: true,
-                    },
-                    {
-                        name: 'flip',
-                        enabled: true,
-                    },
-                ] }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: getHoveredSubmenu(), allCurrentSelected: allCurrentSelected, someCurrentSelected: someCurrentSelected, onSelectAll: handleSelectAll, onReset: handleReset, onColumnToggle: toggleColumnSelection, onNestedItemToggle: toggleNestedItem, anchorEl: submenuAnchorEl, isModified: isSubmenuModified }), _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" }))] })] }) })))] })));
+                                    if (atCustomViewLimit)
+                                        return;
+                                    discardAndClose();
+                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false);
+                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "", style: { opacity: atCustomViewLimit ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: atCustomViewLimit ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredViewId && submenuAnchorEl && submenuColumns.length > 0 && (_jsx(Menu, Object.assign({ open: true, anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: cancelClose, onMouseLeave: discardAndClose }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: submenuColumns, allCurrentSelected: allSelected, someCurrentSelected: someSelected, onSelectAll: selectAllColumns, onReset: resetToBaseDefault, onColumnToggle: toggleColumn, onNestedItemToggle: toggleNested, onReorder: reorderColumns, anchorEl: submenuAnchorEl, isModified: modifiedFromBase }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !atCustomViewLimit }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: atCustomViewLimit, onClick: atCustomViewLimit ? undefined : goToCreateCustomView }, { 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: "", style: { width: 10, height: 10, opacity: atCustomViewLimit ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: atCustomViewLimit ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: discardAndClose, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: applyAndClose, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
 }
 export default React.memo(ViewsDropdown);

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ViewsMenuProps } from './types';
+declare function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, templates, lang, }: ViewsMenuProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ViewsMenu>;
+export default _default;

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

@@ -0,0 +1,76 @@
+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, useCallback, 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 { ViewWrapper } from './styles';
+import { useViewsManager } from './hooks';
+import { useViewsMenu } from './hooks/useViewsMenu';
+function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', templates, lang = 'en', }) {
+    var _a;
+    const { t } = useTranslation();
+    const [modifiedModes, setModifiedModes] = useState({});
+    const { defaultColumns, updateDefaultColumns, defaultTemplate, customViews, allTemplates, baseDefaultColumns } = useViewsManager({
+        tableMode,
+        templates,
+        lang,
+    });
+    const handleSaveDefaultColumns = useCallback((columns) => __awaiter(this, void 0, void 0, function* () {
+        if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.templateId))
+            return;
+        updateDefaultColumns(columns);
+        const layout = {
+            code: tableMode === 'sheet' ? 'Sheet' : 'Advanced',
+            columns: columns.map((col, idx) => {
+                var _a, _b;
+                return ({
+                    code: col.name,
+                    name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
+                    order: idx + 1,
+                    default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
+                    fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                        var _a;
+                        return ({
+                            code: item.name,
+                            name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang }],
+                            order: null,
+                            default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
+                        });
+                    }),
+                });
+            }),
+        };
+        yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(defaultTemplate.templateId, {
+            name: defaultTemplate.label,
+            selectedColumns: columns,
+            layout,
+        }));
+        setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
+    }), [defaultTemplate, tableMode, lang, onEditCustomView, updateDefaultColumns]);
+    const { anchorEl, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, currentViewColumns, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, updateSelectedView, } = useViewsMenu({
+        mode: tableMode,
+        onViewChange,
+        onCreateCustomView,
+        onEditCustomView,
+        onDeleteCustomView,
+        defaultColumns,
+        defaultTemplate,
+        allTemplates,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, defaultModified: (_a = modifiedModes[tableMode]) !== null && _a !== void 0 ? _a : false, onMarkDefaultModified: () => {
+                                setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
+                            }, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, setDefaultColumns: updateDefaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: editingView && baseDefaultColumns.length > 0 ? baseDefaultColumns : defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? currentViewColumns : undefined, mode: tableMode })] }));
+}
+export default memo(ViewsMenu);

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

@@ -22,9 +22,9 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                             e.stopPropagation();
                             onResetToDefault();
                         }, 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: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: selectedColumns.map((column) => {
-                        var _a;
+                        var _a, _b;
                         const isDate = isDateColumn(column.name);
-                        const hasSubmenu = column.menuItems && column.menuItems.length > 0;
+                        const hasSubmenu = !isDate && Boolean((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length);
                         const { checked, indeterminate } = getColumnCheckState(column);
                         return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1 }, style: {
                                 listStyle: 'none',
@@ -62,9 +62,9 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                                 offset: [0, 0],
                                             },
                                         },
-                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, 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, subItemIndex) => {
+                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, 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: (_b = column.menuItems) === null || _b === void 0 ? void 0 : _b.map((subItem, subItemIndex) => {
                                                     var _a, _b;
-                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
+                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDateColumn(subItem.name), onClick: () => !isDateColumn(subItem.name) && onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
                                                 }) })] })) })))] }), column.name));
                     }) })) }))] }));
 };