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

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

@@ -1,13 +1,15 @@
 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();
@@ -28,25 +30,46 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                             '&: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: "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;
+                        const hasNestedSubmenu = column.menuItems && column.menuItems.length > 0;
+                        const { checked, indeterminate } = getColumnCheckState(column);
+                        const isDate = isDateColumn(column.name);
+                        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 }, 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));
-                }) })] }));
+                                            ] }, { 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/constants.d.ts

@@ -5,6 +5,6 @@ export declare const MAX_CUSTOM_VIEWS = 3;
 export declare const TEMPLATE_NAME_MAX_LENGTH = 20;
 export declare const DATE_COLUMN_CONFIG: {
     readonly name: "date";
-    readonly label: "Date & Time";
+    readonly label: "Date";
     readonly selected: true;
 };

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

@@ -5,6 +5,6 @@ export const MAX_CUSTOM_VIEWS = 3;
 export const TEMPLATE_NAME_MAX_LENGTH = 20;
 export const DATE_COLUMN_CONFIG = {
     name: 'date',
-    label: 'Date & Time',
+    label: 'Date',
     selected: 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

@@ -3,12 +3,13 @@ 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 './useSubmenuHover';
 export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
-    const [templateName, setTemplateName] = useState('');
+    const [templateName, setTemplateName] = useState(() => (editingView === null || editingView === void 0 ? void 0 : editingView.label) || '');
     const [selectedColumns, setSelectedColumns] = useState([]);
     const previousOpenRef = useRef(false);
     const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
     const dateColumn = DATE_COLUMN_CONFIG;
     useEffect(() => {
+        var _a, _b;
         if (!open) {
             previousOpenRef.current = false;
             return;
@@ -16,9 +17,13 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         const wasClosed = !previousOpenRef.current;
         if (wasClosed && open) {
             if (editingView) {
-                const otherColumns = initializeEditingColumns(defaultColumns, availableColumns);
+                // 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]);
-                setTemplateName(editingView.label);
+                // 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()) || '';
+                setTemplateName(nameToSet);
             }
             else {
                 const otherColumns = tableViews && tableViews.length > 0
@@ -28,12 +33,17 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
                 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()) || '';
+            setTemplateName(nameToSet);
+        }
         previousOpenRef.current = open;
-    }, [open, editingView, availableColumns, defaultColumns, tableViews, dateColumn]);
+    }, [open, editingView === null || editingView === void 0 ? void 0 : editingView.id, editingView === null || editingView === void 0 ? void 0 : editingView.label, editingView === null || editingView === void 0 ? void 0 : editingView.submenu, availableColumns, defaultColumns, tableViews, dateColumn]);
     const columnNames = useMemo(() => selectedColumns.map((col) => col.name), [selectedColumns]);
     const allSelected = useMemo(() => areAllColumnsSelected(selectedColumns), [selectedColumns]);
     const someSelected = useMemo(() => areSomeColumnsSelected(selectedColumns, allSelected), [selectedColumns, allSelected]);
-    const isNameValid = isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH);
+    const isNameValid = useMemo(() => isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH), [templateName]);
     const handleReorder = (reorderedNames) => {
         const reorderedColumns = reorderedNames
             .map((name) => selectedColumns.find((col) => col.name === name))

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/useViewsManager.d.ts

@@ -1,12 +1,9 @@
-/// <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[];
+    updateDefaultColumns: (columns: ColumnViewProps[]) => void;
 };

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

@@ -1,106 +1,62 @@
-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 parsedTemplates = useMemo(() => {
+        if (!templates || templates.length === 0) {
+            return {
+                customViews: [],
+                defaultTemplate: undefined,
+                templateDefaultColumns: [],
+                allTemplates: [],
+            };
+        }
+        const { customViews, defaultTemplate } = transformTemplatesToViewMenuItems(templates, tableMode, lang);
+        const allTemplates = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
         return {
             customViews,
-            layoutData: effectiveLayoutData,
-            defaultTemplateColumns,
             defaultTemplate,
+            templateDefaultColumns: (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) || [],
+            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 && parsedTemplates.templateDefaultColumns.length > 0) {
+            setDefaultColumns(deepCloneColumns(parsedTemplates.templateDefaultColumns));
+            setInitializedMode(tableMode);
         }
-        else {
-            // No default template found - set empty arrays
-            setDefaultColumns([]);
-            setInternalTableViews([]);
+    }, [tableMode, parsedTemplates.templateDefaultColumns, initializedMode]);
+    const updateDefaultColumns = useCallback((columns) => {
+        setDefaultColumns(deepCloneColumns(columns));
+    }, []);
+    const updatedDefaultTemplate = useMemo(() => {
+        if (!parsedTemplates.defaultTemplate) {
+            return parsedTemplates.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 ? parsedTemplates.templateDefaultColumns : defaultColumns;
+        if (columnsToUse.length === 0) {
+            return parsedTemplates.defaultTemplate;
+        }
+        return Object.assign(Object.assign({}, parsedTemplates.defaultTemplate), { submenu: columnsToUse, columns: columnsToUse.map((col) => col.name) });
+    }, [parsedTemplates.defaultTemplate, parsedTemplates.templateDefaultColumns, defaultColumns, initializedMode, tableMode]);
+    const updatedAllTemplates = useMemo(() => {
+        if (!updatedDefaultTemplate) {
+            return parsedTemplates.customViews;
         }
-        else {
-            setInternalCustomViews([]);
+        return [updatedDefaultTemplate, ...parsedTemplates.customViews];
+    }, [updatedDefaultTemplate, parsedTemplates.customViews]);
+    const effectiveDefaultColumns = useMemo(() => {
+        if (initializedMode !== tableMode && defaultColumns.length === 0) {
+            return parsedTemplates.templateDefaultColumns;
         }
-    }, [transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews]);
+        return defaultColumns.length > 0 ? defaultColumns : parsedTemplates.templateDefaultColumns;
+    }, [initializedMode, tableMode, defaultColumns, parsedTemplates.templateDefaultColumns]);
     return {
-        defaultColumns,
-        setDefaultColumns,
-        internalTableViews,
-        setInternalTableViews,
-        internalCustomViews,
-        setInternalCustomViews,
-        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
+        defaultTemplate: updatedDefaultTemplate,
+        customViews: parsedTemplates.customViews,
+        allTemplates: updatedAllTemplates,
+        defaultColumns: effectiveDefaultColumns,
+        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;
+};

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

@@ -0,0 +1,177 @@
+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, useEffect, useRef } from 'react';
+import { deepCloneColumns } from '../utils';
+export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, defaultColumns, defaultTemplate, allTemplates, }) => {
+    const [anchorEl, setAnchorEl] = 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 [selectedView, setSelectedView] = useState(undefined);
+    const [currentViewColumns, setCurrentViewColumns] = useState([]);
+    const hasInitializedRef = useRef(false);
+    const getViewForParent = useCallback((view) => {
+        var _a;
+        const selectedColumns = ((_a = view.submenu) === null || _a === void 0 ? void 0 : _a.filter((col) => col.selected)) || [];
+        return Object.assign(Object.assign({}, view), { submenu: selectedColumns, columns: selectedColumns.map((col) => col.name) });
+    }, []);
+    useEffect(() => {
+        if (hasInitializedRef.current)
+            return;
+        if (!defaultTemplate)
+            return;
+        setSelectedView(defaultTemplate);
+        setCurrentViewColumns(deepCloneColumns(defaultColumns));
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(defaultTemplate));
+        hasInitializedRef.current = true;
+    }, [defaultTemplate, defaultColumns, onViewChange, getViewForParent]);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.default) && defaultColumns.length > 0) {
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+        }
+    }, [defaultColumns, selectedView === null || selectedView === void 0 ? void 0 : selectedView.default]);
+    const lastSyncedModeRef = useRef(null);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if (!selectedView)
+            return;
+        const needsSync = lastSyncedModeRef.current !== mode;
+        if (!needsSync)
+            return;
+        if (selectedView.default) {
+            if (defaultColumns.length === 0)
+                return;
+            const newView = Object.assign(Object.assign({}, selectedView), { submenu: deepCloneColumns(defaultColumns), columns: defaultColumns.map((col) => col.name) });
+            setSelectedView(newView);
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+            lastSyncedModeRef.current = mode;
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newView));
+        }
+        else {
+            const updatedTemplate = allTemplates.find((t) => t.templateId === selectedView.templateId || t.id === selectedView.id);
+            if (updatedTemplate && updatedTemplate.submenu && updatedTemplate.submenu.length > 0) {
+                const newView = Object.assign(Object.assign({}, updatedTemplate), { submenu: deepCloneColumns(updatedTemplate.submenu) });
+                setSelectedView(newView);
+                setCurrentViewColumns(deepCloneColumns(updatedTemplate.submenu));
+                lastSyncedModeRef.current = mode;
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newView));
+            }
+        }
+    }, [mode, defaultColumns, selectedView, allTemplates, onViewChange]);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if (!selectedView)
+            return;
+        const updatedTemplate = allTemplates.find((t) => {
+            const templateId = t.templateId || t.id;
+            const selectedId = selectedView.templateId || selectedView.id;
+            return templateId === selectedId;
+        });
+        if (!updatedTemplate)
+            return;
+        const currentSubmenu = selectedView.submenu || [];
+        const updatedSubmenu = updatedTemplate.submenu || [];
+        const hasChanged = currentSubmenu.length !== updatedSubmenu.length ||
+            currentSubmenu.some((col, idx) => {
+                const updatedCol = updatedSubmenu[idx];
+                if (!updatedCol)
+                    return true;
+                return col.selected !== updatedCol.selected || col.name !== updatedCol.name;
+            });
+        if (hasChanged) {
+            const fullView = Object.assign(Object.assign({}, updatedTemplate), { submenu: deepCloneColumns(updatedTemplate.submenu || []) });
+            setSelectedView(fullView);
+            setCurrentViewColumns(deepCloneColumns(updatedTemplate.submenu || []));
+            const viewForParent = getViewForParent(fullView);
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(viewForParent);
+        }
+    }, [allTemplates, selectedView, onViewChange]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorEl((current) => (current ? null : event.currentTarget));
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
+        setSelectedViewInfo(selected);
+        const newSelectedView = viewMenuItem || undefined;
+        setSelectedView(newSelectedView);
+        setCurrentViewColumns(deepCloneColumns((newSelectedView === null || newSelectedView === void 0 ? void 0 : newSelectedView.submenu) || []));
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView ? getViewForParent(newSelectedView) : undefined);
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown, onViewChange, getViewForParent]);
+    const updateSelectedView = useCallback((updatedView) => {
+        const viewWithNewRefs = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined, columns: updatedView.columns ? [...updatedView.columns] : undefined });
+        setSelectedView(viewWithNewRefs);
+        setCurrentViewColumns(deepCloneColumns(viewWithNewRefs.submenu || []));
+        setSelectedViewInfo({ id: viewWithNewRefs.id, label: viewWithNewRefs.label });
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(viewWithNewRefs));
+    }, [onViewChange, getViewForParent]);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setIsCreateDialogOpen(true);
+        setAnchorEl(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 templateId = editingView.templateId || editingView.id;
+            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
+        }
+        else {
+            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+        }
+    }), [editingView, onEditCustomView, onCreateCustomView]);
+    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
+        const viewToDelete = allTemplates.find((view) => view.id === viewId || view.templateId === viewId);
+        const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;
+        yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(templateId));
+        if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId || (selectedView === null || selectedView === void 0 ? void 0 : selectedView.templateId) === viewId) {
+            setSelectedView(defaultTemplate);
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+            if (defaultTemplate) {
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(defaultTemplate));
+            }
+        }
+    }), [allTemplates, onDeleteCustomView, selectedView, defaultTemplate, defaultColumns, onViewChange, getViewForParent]);
+    return {
+        anchorEl,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        selectedView,
+        currentViewColumns,
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        updateSelectedView,
+    };
+};

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 ViewSelector } from './ViewSelector';
+export { default as ViewsMenu } from './ViewsMenu';
 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 type { ViewMenuItem, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, Template, CreateTemplatePayload, UpdateTemplatePayload, } from './types';
 export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
-export { useSubmenuHover } from './hooks';
+export { useSubmenuHover, useViewsManager, useViewsMenu } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 export { defaultViewList, advancedColumns, sheetColumns } from './data';