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

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

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { createCustomViewMenuItem } from '../utils';
-export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, apiMetadata, }) => {
+import { deepCloneColumns } from '../utils';
+export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, allTemplates, setInternalCustomViews, apiMetadata, }) => {
     const [anchorViewEl, setAnchorViewEl] = useState(null);
     const [defaultViewEl, setDefaultViewElement] = useState(null);
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
@@ -17,79 +17,63 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
     const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
     const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
     const [selectedView, setSelectedView] = useState(undefined);
+    // Current view columns - this is what gets displayed and can be modified
+    const [currentViewColumns, setCurrentViewColumns] = useState([]);
     const hasInitializedRef = useRef(false);
-    const prevModeRef = useRef(mode);
-    // Update editingView when customViews changes to ensure it reflects the latest saved state
+    // Initialize with default template on mount
     useEffect(() => {
-        if (editingView && customViews.length > 0) {
-            const updatedView = customViews.find((view) => view.id === editingView.id);
-            if (updatedView && updatedView !== editingView) {
-                setEditingView(updatedView);
-            }
-        }
-    }, [customViews, editingView]);
-    // Update selectedView when customViews changes to ensure it reflects the latest saved state
-    useEffect(() => {
-        if (selectedView && selectedView.isCustom && customViews.length > 0) {
-            const updatedView = customViews.find((view) => view.id === selectedView.id);
-            if (updatedView) {
-                // Compare submenu to detect changes (deep comparison would be better, but this works for now)
-                const submenuChanged = JSON.stringify(updatedView.submenu) !== JSON.stringify(selectedView.submenu);
-                const labelChanged = updatedView.label !== selectedView.label;
-                if (submenuChanged || labelChanged) {
-                    // Create a new object reference to ensure React detects the change
-                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined });
-                    setSelectedView(newSelectedView);
-                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
-                }
-            }
-        }
-    }, [customViews, selectedView, onViewChange]);
-    // Notify parent of initial view on mount only
-    useEffect(() => {
-        // Only initialize once on mount, don't reset if user has already selected a view
         if (hasInitializedRef.current)
             return;
-        // Use defaultTemplate if available, otherwise undefined (built-in default view)
-        const initialView = defaultTemplate || undefined;
-        setSelectedView(initialView);
-        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
+        if (!defaultTemplate)
+            return;
+        setSelectedView(defaultTemplate);
+        setCurrentViewColumns(deepCloneColumns(defaultColumns));
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(defaultTemplate);
         hasInitializedRef.current = true;
-    }, [defaultTemplate, onViewChange]);
-    // Update selected view when mode changes
+    }, [defaultTemplate, defaultColumns, onViewChange]);
+    // Sync currentViewColumns with defaultColumns when they change (e.g., after save)
     useEffect(() => {
-        // Skip initial mount
         if (!hasInitializedRef.current)
             return;
-        // Only run if mode actually changed
-        if (prevModeRef.current === mode)
+        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]);
+    // Track the last mode we successfully synced columns for
+    const lastSyncedModeRef = useRef(null);
+    // Handle mode changes - sync with allTemplates updates
+    // This effect needs to run whenever mode changes OR when defaultColumns/allTemplates update
+    useEffect(() => {
+        if (!hasInitializedRef.current)
             return;
-        prevModeRef.current = mode;
-        if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === 'default' && defaultTemplate) {
-            // Mode has changed, update with new default template columns
-            const updatedView = Object.assign(Object.assign({}, defaultTemplate), { submenu: defaultTemplate.submenu ? [...defaultTemplate.submenu] : undefined });
-            setSelectedView(updatedView);
-            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
+        if (!selectedView)
+            return;
+        // Check if we need to sync: either mode changed, or we haven't synced for current mode yet
+        const needsSync = lastSyncedModeRef.current !== mode;
+        if (!needsSync)
+            return;
+        // For default template, wait until defaultColumns has data for the new mode
+        if (selectedView.default) {
+            if (defaultColumns.length === 0)
+                return; // Wait for columns to load
+            const newView = Object.assign(Object.assign({}, selectedView), { submenu: deepCloneColumns(defaultColumns), columns: defaultColumns.map((col) => col.name) });
+            setSelectedView(newView);
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
+            lastSyncedModeRef.current = mode; // Mark as synced only after successful update
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newView);
         }
-        else if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.isCustom) && customViews.length > 0) {
-            // If viewing a custom view, update it with the new columns for this mode
-            const updatedCustomView = customViews.find((view) => view.id === selectedView.id);
-            if (updatedCustomView) {
-                const newView = Object.assign(Object.assign({}, updatedCustomView), { submenu: updatedCustomView.submenu ? [...updatedCustomView.submenu] : undefined });
+        else {
+            // Custom template: find it in allTemplates (which has new mode's columns)
+            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; // Mark as synced only after successful update
                 onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newView);
             }
         }
-    }, [mode, defaultTemplate, customViews, selectedView, onViewChange]);
-    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]);
+    }, [mode, defaultColumns, selectedView, allTemplates, onViewChange]);
     const handleViewButtonClick = useCallback((event) => {
         setAnchorViewEl(event.currentTarget);
         setDefaultViewElement(event.currentTarget);
@@ -97,26 +81,25 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
     const handleCloseViewDropdown = useCallback(() => {
         setDefaultViewElement(null);
     }, []);
-    const handleClose = useCallback(() => {
-        setAnchorViewEl(null);
-        setDefaultViewElement(null);
-        setSelectedViewInfo({ label: 'Default', id: 'default' });
-    }, []);
     const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
         setSelectedViewInfo(selected);
-        // Update selected view and notify parent
         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);
         handleCloseViewDropdown();
     }, [handleCloseViewDropdown, onViewChange]);
-    // Internal function to update selected view and notify parent
-    // Used when default columns change via "Okay" button
+    // Update selected view with modified columns
     const updateSelectedView = useCallback((updatedView) => {
         setSelectedView(updatedView);
+        setCurrentViewColumns(deepCloneColumns(updatedView.submenu || []));
         setSelectedViewInfo({ id: updatedView.id, label: updatedView.label });
         onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
-    }, [onViewChange, setSelectedViewInfo]);
+    }, [onViewChange]);
+    // Update current view columns (for temporary modifications)
+    const updateCurrentViewColumns = useCallback((columns) => {
+        setCurrentViewColumns(columns);
+    }, []);
     const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
         setEditingView(null);
         setShouldUseCurrentState(useCurrentState);
@@ -134,67 +117,39 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         setShouldUseCurrentState(false);
     }, []);
     const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            if (editingView) {
-                // Use templateId for API calls, not the internal view id
-                const templateId = editingView.templateId || editingView.id;
-                yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
-                // Update state after promise resolves successfully
-                const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns });
-                const updatedViews = customViews.map((view) => (view.id === editingView.id ? updatedView : view));
-                handleCustomViewsChange(updatedViews);
-                // If the updated view is currently selected, update selectedView to reflect changes
-                // Create a new object reference to ensure React detects the change
-                if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === editingView.id) {
-                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: [...updatedView.submenu] });
-                    setSelectedView(newSelectedView);
-                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
-                }
-            }
-            else {
-                yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
-                // Update state after promise resolves successfully
-                const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
-                const updatedViews = [...customViews, newView];
-                handleCustomViewsChange(updatedViews);
-            }
+        if (editingView) {
+            const templateId = editingView.templateId || editingView.id;
+            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
         }
-        catch (error) {
-            // Error will be handled by the toast in CreateViewDialog
-            throw error;
+        else {
+            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
         }
-    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView, selectedView, onViewChange]);
+    }), [editingView, onEditCustomView, onCreateCustomView]);
     const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            // Find the view to get its templateId
-            const viewToDelete = customViews.find((view) => view.id === viewId);
-            const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;
-            yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(templateId));
-            // Update state after promise resolves successfully
-            const updatedViews = customViews.filter((view) => view.id !== viewId);
-            handleCustomViewsChange(updatedViews);
-            // If the deleted view was selected, reset to default
-            if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId) {
-                setSelectedView(undefined);
-                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
-            }
+        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 deleted view was selected, reset to default
+        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));
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(defaultTemplate);
         }
-        catch (error) {
-            // Error will be handled by the toast in CreateViewDialog
-            throw error;
-        }
-    }), [customViews, handleCustomViewsChange, onDeleteCustomView, selectedView, onViewChange]);
+    }), [allTemplates, onDeleteCustomView, selectedView, defaultTemplate, defaultColumns, onViewChange]);
     const handleResetViews = useCallback((views) => {
         if (resetTableViews) {
             resetTableViews({ id: views[0], label: views[0] });
         }
         else {
-            // Reset to default columns from templates
-            handleTableViewsChange([...defaultColumns]);
+            setCurrentViewColumns(deepCloneColumns(defaultColumns));
         }
-    }, [resetTableViews, defaultColumns, handleTableViewsChange]);
+    }, [resetTableViews, defaultColumns]);
+    const handleTableViewsChange = useCallback((newTableViews) => {
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(newTableViews);
+        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
+        setCurrentViewColumns(deepCloneColumns(newTableViews));
+    }, [setTableViews, onTableViewsChange]);
     return {
-        // State
         anchorViewEl,
         defaultViewEl,
         setDefaultViewElement,
@@ -202,10 +157,10 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         editingView,
         selectedViewInfo,
         shouldUseCurrentState,
-        // Handlers
+        selectedView,
+        currentViewColumns,
         handleViewButtonClick,
         handleCloseViewDropdown,
-        handleClose,
         handleSelectedViewInfo,
         handleOpenCreateDialog,
         handleOpenEditDialog,
@@ -215,5 +170,6 @@ export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCust
         handleResetViews,
         handleTableViewsChange,
         updateSelectedView,
+        updateCurrentViewColumns,
     };
 };

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

@@ -1,12 +1,20 @@
 /// <reference types="react" />
 import type { ColumnViewProps } from '../../../../types/index.js';
 import type { UseViewsManagerProps, ViewMenuItem } from '../types';
-export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManagerProps) => {
+/**
+ * Simplified hook for managing templates and views.
+ *
+ * Key principles:
+ * - Templates from parent are parsed into allTemplates
+ * - defaultColumns is the local working copy that can be modified
+ * - When user modifies default template, we keep changes locally
+ */
+export declare const useViewsManager: ({ tableMode, templates, lang }: UseViewsManagerProps) => {
+    defaultTemplate: ViewMenuItem | undefined;
+    customViews: ViewMenuItem[];
+    allTemplates: ViewMenuItem[];
     defaultColumns: ColumnViewProps[];
-    setDefaultColumns: (newColumns: ColumnViewProps[]) => void;
-    internalTableViews: ColumnViewProps[];
-    setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
+    updateDefaultColumns: (columns: ColumnViewProps[]) => void;
     internalCustomViews: ViewMenuItem[];
     setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
-    defaultTemplate: ViewMenuItem | undefined;
 };

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

@@ -1,139 +1,89 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { transformTemplatesToViewMenuItems } from '../utils';
-export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
-    // Maintain internal templates state that can be modified
-    const [internalTemplates, setInternalTemplates] = useState(() => templates);
-    // Update internal templates when external templates prop changes
-    useEffect(() => {
-        if (templates) {
-            setInternalTemplates(templates);
+import { transformTemplatesToViewMenuItems, deepCloneColumns } from '../utils';
+/**
+ * Simplified hook for managing templates and views.
+ *
+ * Key principles:
+ * - Templates from parent are parsed into allTemplates
+ * - defaultColumns is the local working copy that can be modified
+ * - When user modifies default template, we keep changes locally
+ */
+export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
+    // Parse templates (this just transforms the data, doesn't manage modifications)
+    const parsedTemplates = useMemo(() => {
+        if (!templates) {
+            return {
+                customViews: [],
+                defaultTemplate: undefined,
+                templateDefaultColumns: [],
+                allTemplates: [],
+            };
         }
-    }, [templates]);
-    // Transform templates internally - this is the only source of data
-    const transformedTemplates = useMemo(() => {
-        if (!internalTemplates)
-            return null;
-        const templatesArray = Array.isArray(internalTemplates) ? internalTemplates : internalTemplates.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,
-                                });
-                            }),
-                        });
-                    }),
-                },
-            ]
-            : [];
+        const templatesArray = Array.isArray(templates) ? templates : templates.templates;
+        const { customViews, defaultTemplate } = transformTemplatesToViewMenuItems(templatesArray, tableMode, lang);
+        // Combine all templates for easy access
+        const allTemplates = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
         return {
             customViews,
-            layoutData: effectiveLayoutData,
-            defaultTemplateColumns,
             defaultTemplate,
+            templateDefaultColumns: (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) || [],
+            allTemplates,
         };
-    }, [internalTemplates, mode, lang]);
+    }, [templates, tableMode, lang]);
+    // Local state for default columns - this is the working copy that can be modified
     const [defaultColumns, setDefaultColumns] = useState([]);
-    const [internalTableViews, setInternalTableViews] = useState([]);
-    const [internalCustomViews, setInternalCustomViews] = useState([]);
+    // Track if we've initialized for this mode (to avoid resetting user modifications)
+    const [initializedMode, setInitializedMode] = useState(null);
+    // Initialize defaultColumns when templates load or mode changes
     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) {
-            // Create new array references to ensure state updates
-            const newColumns = [...transformedTemplates.defaultTemplateColumns];
-            setDefaultColumns(newColumns);
-            setInternalTableViews(newColumns);
-        }
-        else {
-            // No default template found - set empty arrays
-            setDefaultColumns([]);
-            setInternalTableViews([]);
+        // Only initialize if mode changed or we haven't initialized yet
+        if (initializedMode !== tableMode && parsedTemplates.templateDefaultColumns.length > 0) {
+            setDefaultColumns(deepCloneColumns(parsedTemplates.templateDefaultColumns));
+            setInitializedMode(tableMode);
         }
-    }, [mode, transformedTemplates]);
-    // Update custom views when templates/mode change
+    }, [tableMode, parsedTemplates.templateDefaultColumns, initializedMode]);
+    // Custom views state
+    const [internalCustomViews, setInternalCustomViews] = useState([]);
     useEffect(() => {
-        if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) {
-            // Create new array reference to ensure state updates
-            setInternalCustomViews([...transformedTemplates.customViews]);
+        setInternalCustomViews([...parsedTemplates.customViews]);
+    }, [parsedTemplates.customViews]);
+    // Function to update default columns (called when user modifies and clicks Okay)
+    const updateDefaultColumns = useCallback((columns) => {
+        setDefaultColumns(deepCloneColumns(columns));
+    }, []);
+    // Create an updated default template with current defaultColumns
+    // IMPORTANT: When mode just changed (initializedMode !== tableMode), use parsedTemplates
+    // directly because defaultColumns state hasn't updated yet
+    const updatedDefaultTemplate = useMemo(() => {
+        if (!parsedTemplates.defaultTemplate) {
+            return parsedTemplates.defaultTemplate;
+        }
+        // If mode just changed, use the fresh parsed columns, not the stale state
+        const columnsToUse = initializedMode !== tableMode ? parsedTemplates.templateDefaultColumns : defaultColumns;
+        if (columnsToUse.length === 0) {
+            return parsedTemplates.defaultTemplate;
         }
-        else {
-            setInternalCustomViews([]);
+        return Object.assign(Object.assign({}, parsedTemplates.defaultTemplate), { submenu: columnsToUse, columns: columnsToUse.map((col) => col.name) });
+    }, [parsedTemplates.defaultTemplate, parsedTemplates.templateDefaultColumns, defaultColumns, initializedMode, tableMode]);
+    // Build allTemplates with the updated default template
+    const updatedAllTemplates = useMemo(() => {
+        if (!updatedDefaultTemplate) {
+            return parsedTemplates.customViews;
         }
-    }, [mode, transformedTemplates]);
-    // Custom setDefaultColumns that also updates the internal templates
-    const setDefaultColumnsWithTemplateUpdate = useCallback((newColumns) => {
-        setDefaultColumns(newColumns);
-        // Update the internal templates to persist the changes
-        setInternalTemplates((prevTemplates) => {
-            if (!prevTemplates)
-                return prevTemplates;
-            const templatesArray = Array.isArray(prevTemplates) ? prevTemplates : prevTemplates.templates;
-            const templatesCopy = templatesArray.map((t) => (Object.assign({}, t)));
-            // Find the default template
-            const defaultTemplateIndex = templatesCopy.findIndex((t) => t.default);
-            if (defaultTemplateIndex === -1)
-                return prevTemplates;
-            const defaultTemplate = Object.assign({}, templatesCopy[defaultTemplateIndex]);
-            const layoutCopy = [...defaultTemplate.layout];
-            // Find and update the appropriate layout section
-            const layoutCode = mode === 'advanced' ? 'Advanced' : 'Sheet';
-            const layoutSectionIndex = layoutCopy.findIndex((section) => section.code === layoutCode);
-            if (layoutSectionIndex !== -1) {
-                // Convert ColumnViewProps back to template format
-                const updatedColumns = newColumns.map((col, idx) => {
-                    var _a, _b;
-                    return ({
-                        code: col.name,
-                        name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
-                        order: idx + 1,
-                        default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
-                        fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
-                            var _a;
-                            return ({
-                                code: item.name,
-                                name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang }],
-                                order: null,
-                                default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
-                            });
-                        }),
-                    });
-                });
-                layoutCopy[layoutSectionIndex] = Object.assign(Object.assign({}, layoutCopy[layoutSectionIndex]), { columns: updatedColumns });
-                defaultTemplate.layout = layoutCopy;
-                templatesCopy[defaultTemplateIndex] = defaultTemplate;
-            }
-            // Return updated templates in the same format as the input
-            if (Array.isArray(prevTemplates)) {
-                return templatesCopy;
-            }
-            else {
-                return Object.assign(Object.assign({}, prevTemplates), { templates: templatesCopy });
-            }
-        });
-    }, [mode, lang]);
+        return [updatedDefaultTemplate, ...parsedTemplates.customViews];
+    }, [updatedDefaultTemplate, parsedTemplates.customViews]);
+    // Also ensure defaultColumns reflects the correct mode (for when mode just changed)
+    const effectiveDefaultColumns = initializedMode !== tableMode ? parsedTemplates.templateDefaultColumns : defaultColumns;
     return {
-        defaultColumns,
-        setDefaultColumns: setDefaultColumnsWithTemplateUpdate,
-        internalTableViews,
-        setInternalTableViews,
+        // Template data (with updated default template including modifications)
+        defaultTemplate: updatedDefaultTemplate,
+        customViews: parsedTemplates.customViews,
+        allTemplates: updatedAllTemplates,
+        // Default columns - use effective columns that match current mode
+        defaultColumns: effectiveDefaultColumns,
+        updateDefaultColumns,
+        // Internal state
         internalCustomViews,
         setInternalCustomViews,
-        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
     };
 };

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

@@ -5,8 +5,8 @@ export { default as CustomViews } from './CustomViews';
 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, TemplateAPIMetadata, CreateTemplatePayload, UpdateTemplatePayload, } from './types';
+export type { ViewMenuItem, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, TemplateResponse, TemplatesListResponse, TemplateAPIMetadata, CreateTemplatePayload, UpdateTemplatePayload, } from './types';
 export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
-export { useSubmenuHover } from './hooks';
+export { useSubmenuHover, useViewsManager, useViewSelector } 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

@@ -6,7 +6,7 @@ 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 } from './hooks';
+export { useSubmenuHover, useViewsManager, useViewSelector } from './hooks';
 export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 // Note: defaultViewList, advancedColumns, sheetColumns are only exported for demo purposes
 // They should not be used as defaults in production - all data should come from API

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { ColumnViewProps } from '../../../types/index.js';
+import type { ColumnViewProps, TableMode } from '../../../types/index.js';
 import type { TableHeaderProps, ViewOption } from '../type';
-export type ViewMode = 'advanced' | 'sheet';
 export interface ViewMenuItem {
     label: string;
     id: string;
@@ -102,7 +101,7 @@ export interface CreateCustomViewDialogProps {
     } | null;
     onDelete?: (viewId: string) => Promise<void>;
     tableViews?: ColumnViewProps[];
-    mode?: ViewMode;
+    mode?: TableMode;
 }
 export interface ColumnCheckState {
     checked: boolean;
@@ -126,7 +125,7 @@ export interface ViewSelectorProps {
         layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
-    tableMode?: import('../../../types/index.js').TableMode;
+    tableMode?: TableMode;
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     initialTableViews?: ColumnViewProps[];
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
@@ -140,17 +139,18 @@ export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
     setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>, selectedView?: ViewMenuItem) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
     setViews?: (views: string[]) => void;
     anchorEl: Element | null;
-    tableViews?: ColumnViewProps[];
-    setTableViews?: (columns: ColumnViewProps[]) => void;
     onCreateCustomView?: (useCurrentState?: boolean) => void;
     customViews?: ViewMenuItem[];
     onEditCustomView?: (view: ViewMenuItem) => void;
+    onSaveDefaultColumns?: (columns: ColumnViewProps[]) => void;
     defaultColumns?: ColumnViewProps[];
     setDefaultColumns?: (columns: ColumnViewProps[]) => void;
     updateSelectedView?: (view: ViewMenuItem) => void;
+    mode?: TableMode;
+    defaultTemplate?: ViewMenuItem;
 }
 export interface ColumnListProps {
     selectedColumns: ColumnViewProps[];
@@ -177,6 +177,7 @@ export interface ViewsSubmenuProps {
     onReset: () => void;
     onColumnToggle: (columnName: string) => void;
     onNestedItemToggle: (columnName: string, subItemName: string) => void;
+    onReorder: (reorderedColumnNames: string[]) => void;
     anchorEl: HTMLElement | null;
     isModified?: boolean;
 }
@@ -192,7 +193,7 @@ export interface UseCreateViewDialogProps {
     tableViews?: ColumnViewProps[];
 }
 export interface UseViewsManagerProps {
-    mode: ViewMode;
+    tableMode: TableMode;
     templates?: TemplatesListResponse | TemplateResponse[];
     lang?: string;
 }

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

@@ -1,10 +1,10 @@
-import type { ColumnViewProps } from '../../../types/index.js';
-import type { LayoutSection, ViewMenuItem, ColumnCheckState, ViewMode } from './types';
+import type { ColumnViewProps, TableMode } from '../../../types/index.js';
+import type { LayoutSection, ViewMenuItem, ColumnCheckState } from './types';
 /**
  * Transform API layout response to internal ColumnViewProps format
  */
 export declare const transformLayoutToColumns: (layout: LayoutSection[], lang?: string) => ColumnViewProps[];
-export declare const getColumnsByMode: (mode: ViewMode, layoutData?: LayoutSection[]) => ColumnViewProps[];
+export declare const getColumnsByMode: (mode: TableMode, layoutData?: LayoutSection[]) => ColumnViewProps[];
 export declare const isDateColumn: (name: string) => boolean;
 export declare const getColumnCheckState: (column: ColumnViewProps) => ColumnCheckState;
 export declare const createCustomViewMenuItem: (name: string, selectedColumns: ColumnViewProps[], isDefault?: boolean) => ViewMenuItem;
@@ -33,7 +33,7 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
     default: boolean;
     layout: LayoutSection[];
     templateId: string;
-}>, mode?: ViewMode, lang?: string) => {
+}>, mode?: TableMode, lang?: string) => {
     customViews: ViewMenuItem[];
     defaultTemplateColumns?: ColumnViewProps[] | undefined;
     defaultTemplate?: ViewMenuItem | undefined;
@@ -41,7 +41,7 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests
  */
-export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: ViewMode, lang?: string) => LayoutSection;
+export declare const convertColumnsToLayoutSection: (columns: ColumnViewProps[], mode: TableMode, lang?: string) => LayoutSection;
 /**
  * Initialize columns for editing mode
  */