@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/TableHeader/TableView/components/ViewsSubmenu.js

@@ -1,52 +1,68 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Typography, Divider, Popper } from '@mui/material';
+import { Reorder } from 'framer-motion';
 import { Checkbox, MenuItem } from '../../../index.js';
 import { blackRightArrowIcon } from '../../../../constants/index.js';
-import { getColumnCheckState } from '../utils';
+import { getColumnCheckState, isDateColumn } from '../utils';
 import { ResetHeaderBox, ResetCheckboxSx, ColumnItemsContainer, SubmenuPaper } from '../styles';
 import { useNestedSubmenu } from '../hooks/useNestedSubmenu';
-export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, anchorEl, isModified = false, }) => {
+export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, onReorder, anchorEl, isModified = false, }) => {
     const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
+    const columnNames = useMemo(() => columns.map((col) => col.name), [columns]);
     return (_jsxs(_Fragment, { children: [_jsxs(ResetHeaderBox, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: _jsx(Checkbox, { checked: allCurrentSelected, indeterminate: someCurrentSelected, onChange: (e) => {
                                 e.stopPropagation();
                                 onSelectAll();
                             }, onClick: (e) => {
                                 e.stopPropagation();
-                            }, sx: ResetCheckboxSx }) })), _jsx(Typography, Object.assign({ component: "button", onClick: (e) => {
+                            }, sx: ResetCheckboxSx }) })), _jsx(Typography, Object.assign({ component: "button", disabled: !isModified, onClick: (e) => {
                             e.stopPropagation();
-                            onReset();
+                            if (isModified)
+                                onReset();
                         }, sx: {
                             fontSize: 11,
                             fontWeight: 500,
                             color: '#1F88D0',
                             background: 'none',
                             border: 'none',
-                            cursor: 'pointer',
+                            cursor: isModified ? 'pointer' : 'default',
                             padding: 0,
                             opacity: isModified ? 1 : 0.5,
-                            '&:hover': {
-                                textDecoration: 'underline',
-                            },
-                        } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: columns.map((column, columnIndex) => {
-                    var _a;
-                    const hasNestedSubmenu = column.menuItems && column.menuItems.length > 0;
-                    const { checked, indeterminate } = getColumnCheckState(column);
-                    return (_jsxs(React.Fragment, { children: [_jsxs(Box, Object.assign({ sx: { position: 'relative' }, onMouseEnter: (e) => hasNestedSubmenu && openNestedSubmenu(column.name, e.currentTarget), onMouseLeave: () => hasNestedSubmenu && closeNestedSubmenu() }, { children: [_jsxs(Box, Object.assign({ sx: {
-                                            display: 'flex',
-                                            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", sx: { zIndex: 10000 }, modifiers: [
-                                            {
-                                                name: 'offset',
-                                                options: {
-                                                    offset: [0, 0],
-                                                },
-                                            },
-                                        ] }, { 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));
-                }) })] }));
+                            pointerEvents: isModified ? 'auto' : 'none',
+                            '&:hover': isModified ? { textDecoration: 'underline' } : undefined,
+                        } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: columns.map((column, columnIndex) => {
+                        var _a, _b;
+                        const isDate = isDateColumn(column.name);
+                        const hasNestedSubmenu = !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.02 }, style: {
+                                listStyle: 'none',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative',
+                                zIndex: 1,
+                                backgroundColor: '#fff',
+                                width: '100%',
+                                willChange: 'transform',
+                            }, onDragStart: (e) => {
+                                const target = e.target;
+                                if (target.closest('[role="checkbox"]') ||
+                                    target.closest('input[type="checkbox"]') ||
+                                    target.closest('[class*="CheckboxWrapper"]')) {
+                                    e.preventDefault();
+                                }
+                            } }, { children: [_jsxs(Box, Object.assign({ sx: { position: 'relative' }, onMouseEnter: (e) => hasNestedSubmenu && openNestedSubmenu(column.name, e.currentTarget), onMouseLeave: () => hasNestedSubmenu && closeNestedSubmenu() }, { children: [_jsxs(Box, Object.assign({ sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'space-between',
+                                                width: '100%',
+                                            } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, isDisabled: isDate, onClick: () => {
+                                                        if (!isDate) {
+                                                            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: (_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, isDisabled: isDateColumn(subItem.name), onClick: () => !isDateColumn(subItem.name) && 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/constants.d.ts

@@ -7,4 +7,9 @@ export declare const DATE_COLUMN_CONFIG: {
     readonly name: "date";
     readonly label: "Date";
     readonly selected: true;
+    readonly menuItems: undefined;
+    readonly order: 1;
+    readonly pinned: "start";
+    readonly isDefaultPinned: true;
+    readonly pinnable: true;
 };

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

@@ -7,4 +7,9 @@ export const DATE_COLUMN_CONFIG = {
     name: 'date',
     label: 'Date',
     selected: true,
+    menuItems: undefined,
+    order: 1,
+    pinned: 'start',
+    isDefaultPinned: true,
+    pinnable: true,
 };

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

@@ -2,7 +2,7 @@ export { useSubMenu } from './useSubMenu';
 export { useViewColumns } from './useViewColumns';
 export { useColumnItem } from './useColumnItem';
 export { useViewsManager } from './useViewsManager';
-export { useViewSelector } from './useViewSelector';
+export { useViewsMenu } from './useViewsMenu';
 export { useSubmenuHover } from './useSubmenuHover';
 export { useOriginalColumns } from './useOriginalColumns';
 export { useNestedSubmenu } from './useNestedSubmenu';

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

@@ -2,7 +2,7 @@ export { useSubMenu } from './useSubMenu';
 export { useViewColumns } from './useViewColumns';
 export { useColumnItem } from './useColumnItem';
 export { useViewsManager } from './useViewsManager';
-export { useViewSelector } from './useViewSelector';
+export { useViewsMenu } from './useViewsMenu';
 export { useSubmenuHover } from './useSubmenuHover';
 export { useOriginalColumns } from './useOriginalColumns';
 export { useNestedSubmenu } from './useNestedSubmenu';

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

@@ -1,15 +1,16 @@
 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 { isDateColumn, initializeCreateColumns, initializeCreateColumnsWithCurrentState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns as copyColumns, } from '../utils';
 import { useSubmenuHover } from './useSubmenuHover';
 export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
     const [templateName, setTemplateName] = useState(() => (editingView === null || editingView === void 0 ? void 0 : editingView.label) || '');
     const [selectedColumns, setSelectedColumns] = useState([]);
     const previousOpenRef = useRef(false);
+    const initialColumnsRef = useRef([]);
     const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
     const dateColumn = DATE_COLUMN_CONFIG;
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!open) {
             previousOpenRef.current = false;
             return;
@@ -17,27 +18,35 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         const wasClosed = !previousOpenRef.current;
         if (wasClosed && open) {
             if (editingView) {
-                // Use the saved submenu from editingView if available, otherwise fall back to defaultColumns
-                const savedColumns = editingView.submenu && editingView.submenu.length > 0
-                    ? editingView.submenu
-                    : defaultColumns;
-                const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
-                setSelectedColumns([dateColumn, ...otherColumns]);
-                // Ensure templateName is set to editingView.label (fallback to empty string if undefined)
-                const nameToSet = ((_a = editingView.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+                // Use template's submenu as source of truth so selection state is preserved (don't rely on name matching vs availableColumns)
+                const submenu = ((_a = editingView.submenu) === null || _a === void 0 ? void 0 : _a.length) ? copyColumns(editingView.submenu) : [];
+                const templateNonDate = submenu.filter((c) => !isDateColumn(c.name));
+                const templateWithDateFirst = [dateColumn, ...templateNonDate];
+                const templateNames = new Set(templateWithDateFirst.map((c) => c.name));
+                const missingFromAvailable = availableColumns
+                    .filter((col) => !isDateColumn(col.name) && !templateNames.has(col.name))
+                    .map((col) => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+                });
+                const columnsToSet = [...templateWithDateFirst, ...missingFromAvailable];
+                setSelectedColumns(columnsToSet);
+                initialColumnsRef.current = copyColumns(columnsToSet);
+                const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
                 setTemplateName(nameToSet);
             }
             else {
                 const otherColumns = tableViews && tableViews.length > 0
                     ? initializeCreateColumnsWithCurrentState(availableColumns, tableViews)
                     : initializeCreateColumns(availableColumns);
-                setSelectedColumns([dateColumn, ...otherColumns]);
+                const columnsToSet = [dateColumn, ...otherColumns];
+                setSelectedColumns(columnsToSet);
+                initialColumnsRef.current = copyColumns(columnsToSet);
                 setTemplateName('');
             }
         }
         else if (open && editingView) {
-            // Update templateName when editingView changes while dialog is open
-            const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            const nameToSet = ((_c = editingView.label) === null || _c === void 0 ? void 0 : _c.trim()) || '';
             setTemplateName(nameToSet);
         }
         previousOpenRef.current = open;
@@ -62,9 +71,9 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         setSelectedColumns((prev) => toggleAllColumns(prev, !allSelected));
     };
     const handleResetToDefault = () => {
-        const columnsSource = defaultColumns.length > 0 ? defaultColumns : availableColumns;
-        const otherColumns = resetColumnsToDefault(columnsSource);
-        setSelectedColumns([dateColumn, ...otherColumns]);
+        if (initialColumnsRef.current.length > 0) {
+            setSelectedColumns(copyColumns(initialColumnsRef.current));
+        }
     };
     return {
         templateName,

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

@@ -1,22 +1,15 @@
 import { useState, useRef, useCallback } from 'react';
-import { SUBMENU_CLOSE_DELAY } from '../constants';
 export const useNestedSubmenu = () => {
     const [hoveredNestedColumn, setHoveredNestedColumn] = useState(null);
     const [nestedSubmenuAnchorEl, setNestedSubmenuAnchorEl] = useState(null);
     const nestedCloseTimeoutRef = useRef(null);
     const openNestedSubmenu = useCallback((columnName, element) => {
-        if (nestedCloseTimeoutRef.current) {
-            clearTimeout(nestedCloseTimeoutRef.current);
-            nestedCloseTimeoutRef.current = null;
-        }
         setHoveredNestedColumn(columnName);
         setNestedSubmenuAnchorEl(element);
     }, []);
     const closeNestedSubmenu = useCallback(() => {
-        nestedCloseTimeoutRef.current = setTimeout(() => {
-            setHoveredNestedColumn(null);
-            setNestedSubmenuAnchorEl(null);
-        }, SUBMENU_CLOSE_DELAY);
+        setHoveredNestedColumn(null);
+        setNestedSubmenuAnchorEl(null);
     }, []);
     const cancelNestedClose = useCallback(() => {
         if (nestedCloseTimeoutRef.current) {

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

@@ -1,5 +1,4 @@
 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);
@@ -16,7 +15,7 @@ export const useSubmenuHover = () => {
         closeTimeoutRef.current = setTimeout(() => {
             setHoveredColumn(null);
             setAnchorEl(null);
-        }, SUBMENU_CLOSE_DELAY);
+        }, 0);
     }, []);
     const cancelClose = useCallback(() => {
         if (closeTimeoutRef.current) {

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

@@ -1,12 +1,10 @@
-/// <reference types="react" />
 import type { ColumnViewProps } from '../../../../types/index.js';
 import type { UseViewsManagerProps, ViewMenuItem } from '../types';
-export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManagerProps) => {
-    defaultColumns: ColumnViewProps[];
-    setDefaultColumns: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
-    internalTableViews: ColumnViewProps[];
-    setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
-    internalCustomViews: ViewMenuItem[];
-    setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
+export declare const useViewsManager: ({ tableMode, templates, lang }: UseViewsManagerProps) => {
     defaultTemplate: ViewMenuItem | undefined;
+    customViews: ViewMenuItem[];
+    allTemplates: ViewMenuItem[];
+    defaultColumns: ColumnViewProps[];
+    baseDefaultColumns: ColumnViewProps[];
+    updateDefaultColumns: (columns: ColumnViewProps[]) => void;
 };

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

@@ -1,106 +1,57 @@
-import { useState, useEffect, useMemo } from 'react';
-import { transformTemplatesToViewMenuItems } from '../utils';
-export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
-    // Transform templates internally - this is the only source of data
-    const transformedTemplates = useMemo(() => {
-        if (!templates)
-            return null;
-        const templatesArray = Array.isArray(templates) ? templates : templates.templates;
-        const { customViews, defaultTemplateColumns, defaultTemplate } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
-        // Only use default template columns - no fallback to layout data
-        // The default view must come from a template with default: true
-        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,
-                                });
-                            }),
-                        });
-                    }),
-                },
-            ]
-            : [];
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { transformTemplatesToViewMenuItems, deepCloneColumns } from '../utils';
+export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
+    const viewMenuFromTemplates = useMemo(() => {
+        var _a, _b;
+        const { customViews, defaultTemplate, defaultTemplateColumns } = transformTemplatesToViewMenuItems(templates !== null && templates !== void 0 ? templates : [], tableMode, lang);
+        const templateColumns = (_b = (_a = defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) !== null && _a !== void 0 ? _a : defaultTemplateColumns) !== null && _b !== void 0 ? _b : [];
+        const allTemplates = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
         return {
             customViews,
-            layoutData: effectiveLayoutData,
-            defaultTemplateColumns,
             defaultTemplate,
+            templateDefaultColumns: templateColumns,
+            allTemplates,
         };
-    }, [templates, mode, lang]);
-    const [defaultColumns, setDefaultColumns] = useState(() => {
-        // Only use data from templates - no other sources
-        if (templates) {
-            const templatesArray = Array.isArray(templates) ? templates : templates.templates;
-            const { defaultTemplateColumns } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
-            if (defaultTemplateColumns) {
-                return defaultTemplateColumns;
-            }
-        }
-        // Return empty array if no templates
-        return [];
-    });
-    const [internalTableViews, setInternalTableViews] = useState(() => {
-        // Initialize from templates only
-        if (templates) {
-            const templatesArray = Array.isArray(templates) ? templates : templates.templates;
-            const { defaultTemplateColumns } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
-            if (defaultTemplateColumns) {
-                return defaultTemplateColumns;
-            }
-        }
-        return [];
-    });
-    const [internalCustomViews, setInternalCustomViews] = useState(() => {
-        // Initialize from templates only
-        if (templates) {
-            const templatesArray = Array.isArray(templates) ? templates : templates.templates;
-            const { customViews } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
-            return customViews || [];
-        }
-        return [];
-    });
+    }, [templates, tableMode, lang]);
+    const [defaultColumns, setDefaultColumns] = useState([]);
+    const [initializedMode, setInitializedMode] = useState(null);
     useEffect(() => {
-        // Only use default template columns from template with default: true
-        // No fallback to layout data - default must come from templates array
-        if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns) {
-            setDefaultColumns(transformedTemplates.defaultTemplateColumns);
-            setInternalTableViews(transformedTemplates.defaultTemplateColumns);
+        if (initializedMode !== tableMode && viewMenuFromTemplates.templateDefaultColumns.length > 0) {
+            setDefaultColumns(deepCloneColumns(viewMenuFromTemplates.templateDefaultColumns));
+            setInitializedMode(tableMode);
         }
-        else {
-            // No default template found - set empty arrays
-            setDefaultColumns([]);
-            setInternalTableViews([]);
+    }, [tableMode, viewMenuFromTemplates.templateDefaultColumns, initializedMode]);
+    const updateDefaultColumns = useCallback((columns) => {
+        setDefaultColumns(deepCloneColumns(columns));
+    }, []);
+    const updatedDefaultTemplate = useMemo(() => {
+        if (!viewMenuFromTemplates.defaultTemplate) {
+            return viewMenuFromTemplates.defaultTemplate;
         }
-    }, [mode, 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) {
-            setInternalCustomViews(transformedTemplates.customViews);
+        const columnsToUse = initializedMode !== tableMode ? viewMenuFromTemplates.templateDefaultColumns : defaultColumns;
+        if (columnsToUse.length === 0) {
+            return viewMenuFromTemplates.defaultTemplate;
+        }
+        return Object.assign(Object.assign({}, viewMenuFromTemplates.defaultTemplate), { submenu: columnsToUse, columns: columnsToUse.map((col) => col.name) });
+    }, [viewMenuFromTemplates.defaultTemplate, viewMenuFromTemplates.templateDefaultColumns, defaultColumns, initializedMode, tableMode]);
+    const updatedAllTemplates = useMemo(() => {
+        if (!updatedDefaultTemplate) {
+            return viewMenuFromTemplates.customViews;
         }
-        else {
-            setInternalCustomViews([]);
+        return [updatedDefaultTemplate, ...viewMenuFromTemplates.customViews];
+    }, [updatedDefaultTemplate, viewMenuFromTemplates.customViews]);
+    const currentDefaultColumns = useMemo(() => {
+        if (initializedMode !== tableMode && defaultColumns.length === 0) {
+            return viewMenuFromTemplates.templateDefaultColumns;
         }
-    }, [transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews]);
+        return defaultColumns.length > 0 ? defaultColumns : viewMenuFromTemplates.templateDefaultColumns;
+    }, [initializedMode, tableMode, defaultColumns, viewMenuFromTemplates.templateDefaultColumns]);
     return {
-        defaultColumns,
-        setDefaultColumns,
-        internalTableViews,
-        setInternalTableViews,
-        internalCustomViews,
-        setInternalCustomViews,
-        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
+        defaultTemplate: updatedDefaultTemplate,
+        customViews: viewMenuFromTemplates.customViews,
+        allTemplates: updatedAllTemplates,
+        defaultColumns: currentDefaultColumns,
+        baseDefaultColumns: viewMenuFromTemplates.templateDefaultColumns,
+        updateDefaultColumns,
     };
 };

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

@@ -0,0 +1,44 @@
+import { type MouseEvent } from 'react';
+import type { ColumnViewProps, TableMode } from '../../../../types/index.js';
+import type { ViewMenuItem, LayoutSection } from '../types';
+import type { ViewOption } from '../../type';
+export interface UseViewsMenuProps {
+    mode: TableMode;
+    onViewChange?: (selectedView?: 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>;
+    defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
+    allTemplates: ViewMenuItem[];
+}
+export declare const useViewsMenu: ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, defaultColumns, defaultTemplate, allTemplates, }: UseViewsMenuProps) => {
+    anchorEl: HTMLDivElement | null;
+    isCreateDialogOpen: boolean;
+    editingView: ViewMenuItem | null;
+    selectedViewInfo: ViewOption;
+    shouldUseCurrentState: boolean;
+    selectedView: ViewMenuItem | undefined;
+    currentViewColumns: ColumnViewProps[];
+    handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
+    handleCloseViewDropdown: () => void;
+    handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => 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>;
+    updateSelectedView: (updatedView: ViewMenuItem) => void;
+};