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

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, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }: 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, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, 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 { ViewsManager } from './TableView';
+import { ViewSelector } 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, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }) {
+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, }) {
     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(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, layoutData: layoutData, templates: templates, lang: lang })) : (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews }))), rightActions && !isViewVisible && rightActions] }));
+                (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 })) : (_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, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, ...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, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, 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, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, 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", "customViews", "onCreateCustomView", "onEditCustomView", "onDeleteCustomView", "viewMode", "onTableViewsChange", "initialTableViews", "onCustomViewsChange", "initialCustomViews", "layoutData", "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, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, viewMode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData, templates: templates, lang: lang }));
+    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 } = _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"]);
+    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 }));
     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/ViewSelector.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { ViewSelectorProps } from './types';
+declare function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }: ViewSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ViewSelector>;
+export default _default;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } 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 { useViewSelector } from './hooks/useViewSelector';
+function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang = 'en', }) {
+    const { t } = useTranslation();
+    // Map tableMode to viewMode: 'sheet' → 'sheet', 'default' → 'advanced'
+    const mode = tableMode === 'sheet' ? 'sheet' : 'advanced';
+    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews } = useViewsManager({
+        mode,
+        layoutData,
+        initialTableViews,
+        initialCustomViews,
+        templates,
+        lang,
+    });
+    const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
+    const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
+    const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, } = useViewSelector({
+        mode,
+        layoutData,
+        onTableViewsChange,
+        onCustomViewsChange,
+        onCreateCustomView,
+        onEditCustomView,
+        onDeleteCustomView,
+        resetTableViews,
+        setTableViews,
+        tableViews,
+        customViews,
+        setInternalCustomViews,
+        setInternalTableViews,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_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) => {
+                                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange();
+                                setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
+                            }, setViews: handleResetViews, 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, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
+}
+export default memo(ViewSelector);

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

@@ -16,23 +16,28 @@ import { ListStyled, DropdownStyled, MenuItem as StyledMenuItem, Space, SpaceAft
 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, }) {
     const { t } = useTranslation();
-    const { hoveredColumn: hoveredItem, anchorEl: submenuAnchorEl, openSubmenu: handleMenuItemHover, closeSubmenu: handleMenuItemLeave, cancelClose: handleSubmenuEnter, forceClose: handleSubmenuLeave, } = useSubmenuHover();
+    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 { 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();
-    // Sort custom views: default first, then others
-    const sortedCustomViews = useMemo(() => {
-        return [...customViews].sort((a, b) => {
-            if (a.default && !b.default)
-                return -1;
-            if (!a.default && b.default)
-                return 1;
-            return 0;
-        });
-    }, [customViews]);
-    const viewList = [...defaultViewList, ...sortedCustomViews];
+    // Default templates are merged into built-in Default view, so no need to sort
+    const viewList = [...defaultViewList, ...customViews];
     const toggleColumnSelection = (columnName) => {
         if (!setDefaultColumns)
             return;
@@ -82,16 +87,22 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
     };
     const handleSaveAsCustomView = (e) => {
         e.stopPropagation();
-        handleSubmenuLeave();
+        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();
-        handleSubmenuLeave();
+        setIsOkayClicked(false);
+        forceCloseSubmenu();
     };
     const handleOkay = () => {
         if (originalColumns.length > 0) {
@@ -104,11 +115,13 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                 setBaselineColumns([]);
             }
         }
+        setIsOkayClicked(true); // Mark that Okay was clicked so we don't restore on close
         clearOriginalState();
-        handleSubmenuLeave();
+        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);
@@ -147,7 +160,7 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                             } }, { 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 && item.default && _jsx("span", Object.assign({ style: Object.assign(Object.assign({}, ModifiedTextSx), { color: '#1F88D0', marginLeft: 4 }) }, { children: "(Default)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
+                                    }, 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) => {
                                         e.stopPropagation();
                                         onSelect(e);
                                         onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);

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

@@ -46,16 +46,9 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                                     onColumnToggle(column.name);
                                                 }, onClick: (e) => {
                                                     e.stopPropagation();
-                                                }, 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", modifiers: [
-                                        {
-                                            name: 'offset',
-                                            options: {
-                                                offset: [0, 0],
-                                            },
-                                        },
-                                    ], sx: { zIndex: 10000 } }, { children: _jsx(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex' } }, { children: _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.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));
-                                            }) }) })) })))] }), 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: 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) => {
+                                                    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));
+                                                }) })] })) })))] }), column.name));
                     }) })) }))] }));
 };

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

@@ -37,16 +37,9 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             width: '100%',
-                                        } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", modifiers: [
-                                            {
-                                                name: 'offset',
-                                                options: {
-                                                    offset: [0, 0],
-                                                },
-                                            },
-                                        ], sx: { zIndex: 10000 } }, { children: _jsx(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex' } }, { children: _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
-                                                    var _a, _b;
-                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onNestedItemToggle(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));
-                                                }) }) })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }, column.name));
+                                        } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, 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) => {
+                                                        var _a, _b;
+                                                        return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onNestedItemToggle(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));
+                                                    }) })] })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }, column.name));
                 }) })] }));
 };

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

@@ -1,3 +1,9 @@
 export { useSubMenu } from './useSubMenu';
 export { useViewColumns } from './useViewColumns';
 export { useColumnItem } from './useColumnItem';
+export { useViewsManager } from './useViewsManager';
+export { useViewSelector } from './useViewSelector';
+export { useSubmenuHover } from './useSubmenuHover';
+export { useOriginalColumns } from './useOriginalColumns';
+export { useNestedSubmenu } from './useNestedSubmenu';
+export { useCreateViewDialog } from './useCreateViewDialog';

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

@@ -1,3 +1,9 @@
 export { useSubMenu } from './useSubMenu';
 export { useViewColumns } from './useViewColumns';
 export { useColumnItem } from './useColumnItem';
+export { useViewsManager } from './useViewsManager';
+export { useViewSelector } from './useViewSelector';
+export { useSubmenuHover } from './useSubmenuHover';
+export { useOriginalColumns } from './useOriginalColumns';
+export { useNestedSubmenu } from './useNestedSubmenu';
+export { useCreateViewDialog } from './useCreateViewDialog';

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

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from '../constants';
 import { initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, resetColumnsToDefault, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, } from '../utils';
-import { useSubmenuHover } from '../hooks';
+import { useSubmenuHover } from './useSubmenuHover';
 export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
     const [templateName, setTemplateName] = useState('');
     const [selectedColumns, setSelectedColumns] = useState([]);

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

@@ -0,0 +1,8 @@
+export declare const useDialogPosition: (dialogWidth: number, dialogHeight: number) => {
+    position: {
+        x: number;
+        y: number;
+    };
+    resetPosition: () => void;
+    updatePosition: (x: number, y: number) => void;
+};

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

@@ -0,0 +1,16 @@
+import { useState, useCallback } from 'react';
+export const useDialogPosition = (dialogWidth, dialogHeight) => {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const resetPosition = useCallback(() => {
+        const centerX = window.innerWidth / 2 - dialogWidth / 2;
+        const centerY = window.innerHeight / 2 - dialogHeight / 2;
+        setPosition({
+            x: Math.max(0, centerX),
+            y: Math.max(0, centerY),
+        });
+    }, [dialogWidth, dialogHeight]);
+    const updatePosition = useCallback((x, y) => {
+        setPosition({ x, y });
+    }, []);
+    return { position, resetPosition, updatePosition };
+};

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

@@ -0,0 +1,6 @@
+import type { ColumnViewProps } from '../../../../types/index.js';
+export declare const useOriginalColumns: (defaultColumns: ColumnViewProps[]) => {
+    originalColumns: ColumnViewProps[];
+    saveOriginalState: () => void;
+    clearOriginalState: () => void;
+};

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

@@ -0,0 +1,18 @@
+import { useState, useCallback } from 'react';
+export const useOriginalColumns = (defaultColumns) => {
+    const [originalColumns, setOriginalColumns] = useState([]);
+    const saveOriginalState = useCallback(() => {
+        setOriginalColumns(defaultColumns.map((col) => {
+            var _a;
+            return (Object.assign(Object.assign({}, col), { selected: col.selected, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: item.selected }))) }));
+        }));
+    }, [defaultColumns]);
+    const clearOriginalState = useCallback(() => {
+        setOriginalColumns([]);
+    }, []);
+    return {
+        originalColumns,
+        saveOriginalState,
+        clearOriginalState,
+    };
+};

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

@@ -0,0 +1,8 @@
+export declare const useSubmenuHover: () => {
+    hoveredColumn: string | null;
+    anchorEl: HTMLElement | null;
+    openSubmenu: (columnName: string, element: HTMLElement) => void;
+    closeSubmenu: () => void;
+    cancelClose: () => void;
+    forceClose: () => void;
+};

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

@@ -0,0 +1,43 @@
+import { useState, useRef, useCallback } from 'react';
+import { SUBMENU_CLOSE_DELAY } from '../constants';
+export const useSubmenuHover = () => {
+    const [hoveredColumn, setHoveredColumn] = useState(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const closeTimeoutRef = useRef(null);
+    const openSubmenu = useCallback((columnName, element) => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setHoveredColumn(columnName);
+        setAnchorEl(element);
+    }, []);
+    const closeSubmenu = useCallback(() => {
+        closeTimeoutRef.current = setTimeout(() => {
+            setHoveredColumn(null);
+            setAnchorEl(null);
+        }, SUBMENU_CLOSE_DELAY);
+    }, []);
+    const cancelClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+    }, []);
+    const forceClose = useCallback(() => {
+        if (closeTimeoutRef.current) {
+            clearTimeout(closeTimeoutRef.current);
+            closeTimeoutRef.current = null;
+        }
+        setHoveredColumn(null);
+        setAnchorEl(null);
+    }, []);
+    return {
+        hoveredColumn,
+        anchorEl,
+        openSubmenu,
+        closeSubmenu,
+        cancelClose,
+        forceClose,
+    };
+};

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

@@ -0,0 +1,54 @@
+import { type MouseEvent } from 'react';
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { ViewMenuItem, LayoutSection, ViewMode } from '../types';
+import type { ViewOption } from '../../type';
+export interface UseViewSelectorProps {
+    mode: ViewMode;
+    layoutData?: LayoutSection[];
+    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
+    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    resetTableViews?: (view: {
+        id: string;
+        label: string;
+    }) => void;
+    setTableViews?: (columns: ColumnViewProps[]) => void;
+    tableViews: ColumnViewProps[];
+    customViews: ViewMenuItem[];
+    setInternalCustomViews: (views: ViewMenuItem[]) => void;
+    setInternalTableViews: (views: ColumnViewProps[]) => void;
+}
+export declare const useViewSelector: ({ mode, layoutData, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, setInternalCustomViews, setInternalTableViews, }: UseViewSelectorProps) => {
+    anchorViewEl: HTMLDivElement | null;
+    defaultViewEl: HTMLDivElement | null;
+    setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    isCreateDialogOpen: boolean;
+    editingView: ViewMenuItem | null;
+    selectedViewInfo: ViewOption;
+    shouldUseCurrentState: boolean;
+    handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
+    handleCloseViewDropdown: () => void;
+    handleClose: () => void;
+    handleSelectedViewInfo: (selected: ViewOption) => void;
+    handleOpenCreateDialog: (useCurrentState?: boolean) => void;
+    handleOpenEditDialog: (view: ViewMenuItem) => void;
+    handleCloseCreateDialog: () => void;
+    handleSaveView: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    handleDeleteView: (viewId: string) => Promise<void>;
+    handleResetViews: (views: string[]) => void;
+    handleTableViewsChange: (newTableViews: ColumnViewProps[]) => void;
+};

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

@@ -0,0 +1,110 @@
+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 { useState, useCallback } from 'react';
+import { getColumnsByMode, createCustomViewMenuItem } from '../utils';
+export const useViewSelector = ({ mode, layoutData, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, setInternalCustomViews, setInternalTableViews, }) => {
+    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 [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
+    const handleTableViewsChange = useCallback((newTableViews) => {
+        const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
+        setTableViewsState(newTableViews);
+        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
+    }, [setTableViews, setInternalTableViews, onTableViewsChange]);
+    const handleCustomViewsChange = useCallback((newCustomViews) => {
+        setInternalCustomViews(newCustomViews);
+        onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
+    }, [setInternalCustomViews, onCustomViewsChange]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorViewEl(event.currentTarget);
+        setDefaultViewElement(event.currentTarget);
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setDefaultViewElement(null);
+    }, []);
+    const handleClose = useCallback(() => {
+        setAnchorViewEl(null);
+        setDefaultViewElement(null);
+        setSelectedViewInfo({ label: 'Default', id: 'default' });
+    }, []);
+    const handleSelectedViewInfo = useCallback((selected) => {
+        setSelectedViewInfo(selected);
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown]);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setIsCreateDialogOpen(true);
+        setDefaultViewElement(null);
+    }, []);
+    const handleOpenEditDialog = useCallback((view) => {
+        setEditingView(view);
+        setShouldUseCurrentState(true);
+        setIsCreateDialogOpen(true);
+    }, []);
+    const handleCloseCreateDialog = useCallback(() => {
+        setIsCreateDialogOpen(false);
+        setEditingView(null);
+        setShouldUseCurrentState(false);
+    }, []);
+    const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
+        if (editingView) {
+            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 {
+            const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
+            const updatedViews = [...customViews, newView];
+            handleCustomViewsChange(updatedViews);
+            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+        }
+    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView]);
+    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, 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));
+    }), [customViews, handleCustomViewsChange, onDeleteCustomView]);
+    const handleResetViews = useCallback((views) => {
+        if (resetTableViews) {
+            resetTableViews({ id: views[0], label: views[0] });
+        }
+        else {
+            const resetColumns = getColumnsByMode(mode, layoutData);
+            handleTableViewsChange(resetColumns);
+        }
+    }, [resetTableViews, mode, layoutData, handleTableViewsChange]);
+    return {
+        // State
+        anchorViewEl,
+        defaultViewEl,
+        setDefaultViewElement,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        // Handlers
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleClose,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        handleResetViews,
+        handleTableViewsChange,
+    };
+};

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

@@ -6,23 +6,70 @@ export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCu
         if (!templates)
             return null;
         const templatesArray = Array.isArray(templates) ? templates : templates.templates;
+        const { customViews, defaultTemplateColumns } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
+        // Use default template columns if available, otherwise use layoutData from all templates
+        const effectiveLayoutData = defaultTemplateColumns
+            ? [
+                {
+                    code: mode === 'advanced' ? 'Advanced' : 'Sheet',
+                    columns: defaultTemplateColumns.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: '' }],
+                                    default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
+                                });
+                            }),
+                        });
+                    }),
+                },
+            ]
+            : getLayoutDataFromTemplates(templatesArray);
         return {
-            customViews: transformTemplatesToViewMenuItems(templatesArray, mode, lang),
-            layoutData: getLayoutDataFromTemplates(templatesArray),
+            customViews,
+            layoutData: effectiveLayoutData,
+            defaultTemplateColumns,
         };
     }, [templates, mode, lang]);
     // Use transformed templates or provided props
     const effectiveLayoutData = (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData) || layoutData;
     const effectiveCustomViews = (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) || initialCustomViews;
-    const [defaultColumns, setDefaultColumns] = useState(() => getColumnsByMode(mode, effectiveLayoutData));
-    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || getColumnsByMode(mode, effectiveLayoutData) || []);
+    const [defaultColumns, setDefaultColumns] = useState(() => {
+        // If we have default template columns from templates, use them; otherwise use layoutData
+        if (templates) {
+            const templatesArray = Array.isArray(templates) ? templates : templates.templates;
+            const { defaultTemplateColumns } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
+            if (defaultTemplateColumns) {
+                return defaultTemplateColumns;
+            }
+        }
+        return getColumnsByMode(mode, layoutData || []);
+    });
+    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || defaultColumns || []);
     const [internalCustomViews, setInternalCustomViews] = useState(effectiveCustomViews || []);
     useEffect(() => {
-        setDefaultColumns(getColumnsByMode(mode, effectiveLayoutData));
-        if (!initialTableViews && effectiveLayoutData) {
-            setInternalTableViews(getColumnsByMode(mode, effectiveLayoutData));
+        // If we have default template columns, use them; otherwise use layoutData
+        if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns) {
+            setDefaultColumns(transformedTemplates.defaultTemplateColumns);
+            if (!initialTableViews) {
+                setInternalTableViews(transformedTemplates.defaultTemplateColumns);
+            }
+        }
+        else {
+            const columns = getColumnsByMode(mode, effectiveLayoutData);
+            setDefaultColumns(columns);
+            if (!initialTableViews && effectiveLayoutData) {
+                setInternalTableViews(columns);
+            }
         }
-    }, [mode, effectiveLayoutData, initialTableViews]);
+    }, [mode, effectiveLayoutData, initialTableViews, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns]);
     // Update custom views when templates change
     useEffect(() => {
         if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) {

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

@@ -2,11 +2,11 @@ export { default } from './TableView';
 export { default as TableView } from './TableView';
 export { default as DefaultViews } from './DefaultViews';
 export { default as CustomViews } from './CustomViews';
-export { default as ViewsManager } from './ViewsManager';
+export { default as ViewSelector } from './ViewSelector';
 export { default as ViewsDropdown } from './ViewsDropdown';
 export { default as CreateViewDialog } from './CreateViewDialog';
-export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, TemplateResponse, TemplatesListResponse } from './types';
-export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState } from './utils';
-export { useSubmenuHover, useDialogPosition } from './hooks';
+export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, TemplateResponse, TemplatesListResponse, } from './types';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+export { useSubmenuHover } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -2,10 +2,10 @@ export { default } from './TableView';
 export { default as TableView } from './TableView';
 export { default as DefaultViews } from './DefaultViews';
 export { default as CustomViews } from './CustomViews';
-export { default as ViewsManager } from './ViewsManager';
+export { default as ViewSelector } from './ViewSelector';
 export { default as ViewsDropdown } from './ViewsDropdown';
 export { default as CreateViewDialog } from './CreateViewDialog';
-export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState } from './utils';
-export { useSubmenuHover, useDialogPosition } from './hooks';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+export { useSubmenuHover } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -84,7 +84,7 @@ export interface ColumnCheckState {
     checked: boolean;
     indeterminate: boolean;
 }
-export interface ViewsManagerProps {
+export interface ViewSelectorProps {
     onViewChange?: TableHeaderProps['onViewChange'];
     setIsViewVisible: (visible: boolean) => void;
     setTableViews?: TableHeaderProps['setTableViews'];
@@ -102,7 +102,7 @@ export interface ViewsManagerProps {
         layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
-    mode?: ViewMode;
+    tableMode?: import('../../../types/index.js').TableMode;
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     initialTableViews?: ColumnViewProps[];
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;

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

@@ -22,13 +22,17 @@ export declare const setViewAsDefault: (views: ViewMenuItem[], viewId: string) =
 /**
  * Transform API templates response to ViewMenuItem array
  * Filters templates by mode and only shows the section matching the current mode
+ * Separates default templates (to be merged into built-in Default view) from custom views
  */
 export declare const transformTemplatesToViewMenuItems: (templates: Array<{
     id: string;
     name: string;
     default: boolean;
     layout: LayoutSection[];
-}>, mode?: ViewMode, lang?: string) => ViewMenuItem[];
+}>, mode?: ViewMode, lang?: string) => {
+    customViews: ViewMenuItem[];
+    defaultTemplateColumns?: ColumnViewProps[] | undefined;
+};
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests
  */

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

@@ -93,21 +93,32 @@ export const setViewAsDefault = (views, viewId) => {
 /**
  * Transform API templates response to ViewMenuItem array
  * Filters templates by mode and only shows the section matching the current mode
+ * Separates default templates (to be merged into built-in Default view) from custom views
  */
 export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
-    return templates.map((template) => {
+    const customViews = [];
+    let defaultTemplateColumns;
+    templates.forEach((template) => {
         // Get columns for the specified mode
         const section = template.layout.find((s) => s.code.toLowerCase() === mode.toLowerCase());
         const columns = section ? transformLayoutToColumns([section], lang) : [];
-        return {
-            id: template.id,
-            label: template.name,
-            isCustom: true,
-            default: template.default,
-            columns: columns.map((col) => col.name),
-            submenu: columns,
-        };
+        if (template.default) {
+            // Store default template columns to merge into built-in Default view
+            defaultTemplateColumns = columns;
+        }
+        else {
+            // Add non-default templates as custom views
+            customViews.push({
+                id: template.id,
+                label: template.name,
+                isCustom: true,
+                default: false,
+                columns: columns.map((col) => col.name),
+                submenu: columns,
+            });
+        }
     });
+    return { customViews, defaultTemplateColumns };
 };
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests

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

@@ -57,7 +57,6 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
-    viewMode?: 'advanced' | 'sheet';
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     initialTableViews?: ColumnViewProps[];
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.372-test.1",
-  "testVersion": 1,
+  "version": "0.1.372-test.2-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { ViewsManagerProps } from './types';
-declare function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, mode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }: 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

@@ -1,123 +0,0 @@
-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, useEffect } 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';
-import { useViewsManager } from './hooks';
-function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, mode = 'sheet', onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang = 'en', }) {
-    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 [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
-    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews } = useViewsManager({
-        mode,
-        layoutData,
-        initialTableViews,
-        initialCustomViews,
-        templates,
-        lang,
-    });
-    const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
-    const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
-    const handleTableViewsChange = (newTableViews) => {
-        setTableViewsState(newTableViews);
-        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
-    };
-    const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
-    // Auto-select default template when custom views are loaded
-    useEffect(() => {
-        if (customViews.length > 0) {
-            const defaultView = customViews.find((view) => view.default);
-            if (defaultView && selectedViewInfo.id === 'default') {
-                setSelectedViewInfo(defaultView);
-                if (defaultView.submenu) {
-                    handleTableViewsChange(defaultView.submenu);
-                }
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [customViews]);
-    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 = (useCurrentState = false) => {
-        setEditingView(null);
-        setShouldUseCurrentState(useCurrentState);
-        setIsCreateDialogOpen(true);
-        setDefaultViewElement(null);
-    };
-    const handleOpenEditDialog = (view) => {
-        setEditingView(view);
-        setShouldUseCurrentState(true);
-        setIsCreateDialogOpen(true);
-    };
-    const handleCloseCreateDialog = () => {
-        setIsCreateDialogOpen(false);
-        setEditingView(null);
-        setShouldUseCurrentState(false);
-    };
-    const handleSaveView = (data) => __awaiter(this, void 0, void 0, function* () {
-        if (editingView) {
-            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 {
-            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({ sx: { width: '32px' }, "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 {
-                                    const resetColumns = getColumnsByMode(mode, layoutData);
-                                    handleTableViewsChange(resetColumns);
-                                }
-                            }, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: (useCurrentState) => handleOpenCreateDialog(useCurrentState), customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
-}
-export default memo(ViewsManager);

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

@@ -1,28 +0,0 @@
-import type { ColumnViewProps } from '../../../types/index.js';
-export { useSubMenu } from './hooks/useSubMenu';
-export { useViewColumns } from './hooks/useViewColumns';
-export { useColumnItem } from './hooks/useColumnItem';
-export { useCreateViewDialog } from './hooks/useCreateViewDialog';
-export { useNestedSubmenu } from './hooks/useNestedSubmenu';
-export { useViewsManager } from './hooks/useViewsManager';
-export declare const useSubmenuHover: () => {
-    hoveredColumn: string | null;
-    anchorEl: HTMLElement | null;
-    openSubmenu: (columnName: string, element: HTMLElement) => void;
-    closeSubmenu: () => void;
-    cancelClose: () => void;
-    forceClose: () => void;
-};
-export declare const useDialogPosition: (dialogWidth: number, dialogHeight: number) => {
-    position: {
-        x: number;
-        y: number;
-    };
-    resetPosition: () => void;
-    updatePosition: (x: number, y: number) => void;
-};
-export declare const useOriginalColumns: (defaultColumns: ColumnViewProps[]) => {
-    originalColumns: ColumnViewProps[];
-    saveOriginalState: () => void;
-    clearOriginalState: () => void;
-};

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

@@ -1,81 +0,0 @@
-import { useState, useRef, useCallback } from 'react';
-import { SUBMENU_CLOSE_DELAY } from './constants';
-export { useSubMenu } from './hooks/useSubMenu';
-export { useViewColumns } from './hooks/useViewColumns';
-export { useColumnItem } from './hooks/useColumnItem';
-export { useCreateViewDialog } from './hooks/useCreateViewDialog';
-export { useNestedSubmenu } from './hooks/useNestedSubmenu';
-export { useViewsManager } from './hooks/useViewsManager';
-export const useSubmenuHover = () => {
-    const [hoveredColumn, setHoveredColumn] = useState(null);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const closeTimeoutRef = useRef(null);
-    const openSubmenu = useCallback((columnName, element) => {
-        if (closeTimeoutRef.current) {
-            clearTimeout(closeTimeoutRef.current);
-            closeTimeoutRef.current = null;
-        }
-        setHoveredColumn(columnName);
-        setAnchorEl(element);
-    }, []);
-    const closeSubmenu = useCallback(() => {
-        closeTimeoutRef.current = setTimeout(() => {
-            setHoveredColumn(null);
-            setAnchorEl(null);
-        }, SUBMENU_CLOSE_DELAY);
-    }, []);
-    const cancelClose = useCallback(() => {
-        if (closeTimeoutRef.current) {
-            clearTimeout(closeTimeoutRef.current);
-            closeTimeoutRef.current = null;
-        }
-    }, []);
-    const forceClose = useCallback(() => {
-        if (closeTimeoutRef.current) {
-            clearTimeout(closeTimeoutRef.current);
-            closeTimeoutRef.current = null;
-        }
-        setHoveredColumn(null);
-        setAnchorEl(null);
-    }, []);
-    return {
-        hoveredColumn,
-        anchorEl,
-        openSubmenu,
-        closeSubmenu,
-        cancelClose,
-        forceClose,
-    };
-};
-export const useDialogPosition = (dialogWidth, dialogHeight) => {
-    const [position, setPosition] = useState({ x: 0, y: 0 });
-    const resetPosition = useCallback(() => {
-        const centerX = window.innerWidth / 2 - dialogWidth / 2;
-        const centerY = window.innerHeight / 2 - dialogHeight / 2;
-        setPosition({
-            x: Math.max(0, centerX),
-            y: Math.max(0, centerY),
-        });
-    }, [dialogWidth, dialogHeight]);
-    const updatePosition = useCallback((x, y) => {
-        setPosition({ x, y });
-    }, []);
-    return { position, resetPosition, updatePosition };
-};
-export const useOriginalColumns = (defaultColumns) => {
-    const [originalColumns, setOriginalColumns] = useState([]);
-    const saveOriginalState = useCallback(() => {
-        setOriginalColumns(defaultColumns.map((col) => {
-            var _a;
-            return (Object.assign(Object.assign({}, col), { selected: col.selected, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: item.selected }))) }));
-        }));
-    }, [defaultColumns]);
-    const clearOriginalState = useCallback(() => {
-        setOriginalColumns([]);
-    }, []);
-    return {
-        originalColumns,
-        saveOriginalState,
-        clearOriginalState,
-    };
-};