@tap-payments/os-micro-frontend-shared 0.1.375 → 0.1.376-test.1-test.2

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

@@ -0,0 +1,34 @@
+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);
+    }, []);
+    const cancelNestedClose = useCallback(() => {
+        if (nestedCloseTimeoutRef.current) {
+            clearTimeout(nestedCloseTimeoutRef.current);
+            nestedCloseTimeoutRef.current = null;
+        }
+    }, []);
+    return {
+        hoveredNestedColumn,
+        nestedSubmenuAnchorEl,
+        openNestedSubmenu,
+        closeNestedSubmenu,
+        cancelNestedClose,
+    };
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+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 UseViewSelectorProps {
+    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>;
+    customViews: ViewMenuItem[];
+    defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
+    allTemplates: ViewMenuItem[];
+    setInternalCustomViews: (views: ViewMenuItem[]) => void;
+}
+export declare const useViewSelector: ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, customViews, defaultColumns, defaultTemplate, allTemplates, setInternalCustomViews, }: UseViewSelectorProps) => {
+    anchorViewEl: HTMLDivElement | null;
+    defaultViewEl: HTMLDivElement | null;
+    setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    isCreateDialogOpen: boolean;
+    editingView: ViewMenuItem | null;
+    selectedViewInfo: ViewOption;
+    shouldUseCurrentState: boolean;
+    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>;
+    handleResetViews: () => void;
+    updateSelectedView: (updatedView: ViewMenuItem) => void;
+    updateCurrentViewColumns: (columns: ColumnViewProps[]) => void;
+};

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

@@ -0,0 +1,239 @@
+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 useViewSelector = ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, customViews, defaultColumns, defaultTemplate, allTemplates, setInternalCustomViews, }) => {
+    const [anchorViewEl, setAnchorViewEl] = useState(null);
+    const [defaultViewEl, setDefaultViewElement] = useState(null);
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const [editingView, setEditingView] = useState(null);
+    const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
+    const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
+    const [selectedView, setSelectedView] = useState(undefined);
+    // Current view columns - this is what gets displayed and can be modified
+    const [currentViewColumns, setCurrentViewColumns] = useState([]);
+    const hasInitializedRef = useRef(false);
+    // Helper: Filter view to only include selected columns for parent
+    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) });
+    }, []);
+    // Initialize with default template on mount
+    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]);
+    // Sync currentViewColumns with defaultColumns when they change (e.g., after save)
+    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]);
+    // 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;
+        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(getViewForParent(newView));
+        }
+        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(getViewForParent(newView));
+            }
+        }
+    }, [mode, defaultColumns, selectedView, allTemplates, onViewChange]);
+    // Track template updates ref to detect external changes
+    const templatesUpdateRef = useRef(0);
+    // Sync selected view when templates change (for edits/updates)
+    // This ensures that template edits automatically reflect in the selected view
+    // ONLY when triggered by explicit save actions (Okay/Update buttons)
+    useEffect(() => {
+        var _a;
+        if (!hasInitializedRef.current)
+            return;
+        if (!selectedView)
+            return;
+        // Find the current selected view in updated allTemplates
+        const updatedTemplate = allTemplates.find((t) => {
+            const templateId = t.templateId || t.id;
+            const selectedId = selectedView.templateId || selectedView.id;
+            return templateId === selectedId;
+        });
+        if (!updatedTemplate)
+            return;
+        // Check if the template has actually changed by comparing submenu
+        const currentSubmenu = selectedView.submenu || [];
+        const updatedSubmenu = updatedTemplate.submenu || [];
+        // Simple check: if lengths differ or selected states differ, update
+        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) {
+            console.log('🔄 Template updated, syncing selected view:', selectedView.label);
+            console.log('   Old columns count:', currentSubmenu.length, 'New columns count:', updatedSubmenu.length);
+            console.log('   Old selected:', currentSubmenu.filter((c) => c.selected).length, 'New selected:', updatedSubmenu.filter((c) => c.selected).length);
+            // Store the full view internally (with all columns)
+            const fullView = Object.assign(Object.assign({}, updatedTemplate), { submenu: deepCloneColumns(updatedTemplate.submenu || []) });
+            setSelectedView(fullView);
+            setCurrentViewColumns(deepCloneColumns(updatedTemplate.submenu || []));
+            // Pass only selected columns to parent
+            const viewForParent = getViewForParent(fullView);
+            console.log('✅ Calling onViewChange with', (_a = viewForParent.submenu) === null || _a === void 0 ? void 0 : _a.length, 'selected columns');
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(viewForParent);
+            templatesUpdateRef.current++;
+        }
+    }, [allTemplates, selectedView, onViewChange]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorViewEl(event.currentTarget);
+        setDefaultViewElement(event.currentTarget);
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setDefaultViewElement(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) || []));
+        if (newSelectedView) {
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(newSelectedView));
+        }
+        else {
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
+        }
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown, onViewChange, getViewForParent]);
+    // Update selected view with modified columns
+    const updateSelectedView = useCallback((updatedView) => {
+        var _a, _b;
+        console.log('🔴 updateSelectedView called:', {
+            id: updatedView.id,
+            columnsCount: (_a = updatedView.submenu) === null || _a === void 0 ? void 0 : _a.length,
+            selectedColumns: (_b = updatedView.submenu) === null || _b === void 0 ? void 0 : _b.filter((c) => c.selected).length,
+        });
+        // CRITICAL: Force new object/array references to trigger React re-renders
+        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]);
+    // Update current view columns (for temporary modifications)
+    const updateCurrentViewColumns = useCallback((columns) => {
+        setCurrentViewColumns(columns);
+    }, []);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setIsCreateDialogOpen(true);
+        setDefaultViewElement(null);
+    }, []);
+    const handleOpenEditDialog = useCallback((view) => {
+        setEditingView(view);
+        setShouldUseCurrentState(true);
+        setIsCreateDialogOpen(true);
+    }, []);
+    const handleCloseCreateDialog = useCallback(() => {
+        setIsCreateDialogOpen(false);
+        setEditingView(null);
+        setShouldUseCurrentState(false);
+    }, []);
+    const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
+        if (editingView) {
+            const templateId = editingView.templateId || editingView.id;
+            // Call the edit handler - parent will update templates
+            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
+            // After edit completes successfully, the template will be updated externally via templates prop
+            // The useEffect watching allTemplates will automatically sync the view
+            console.log('✅ View saved - templates will update and trigger sync');
+        }
+        else {
+            // Call the create handler - parent will add new template
+            yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+            // After create completes successfully, the new template will be added externally via templates prop
+            // The new template will automatically appear in the dropdown
+            console.log('✅ View created - new template will appear in dropdown');
+        }
+    }), [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 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));
+            if (defaultTemplate) {
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(defaultTemplate));
+            }
+        }
+    }), [allTemplates, onDeleteCustomView, selectedView, defaultTemplate, defaultColumns, onViewChange, getViewForParent]);
+    // Reset views to default
+    const handleResetViews = useCallback(() => {
+        setCurrentViewColumns(deepCloneColumns(defaultColumns));
+    }, [defaultColumns]);
+    return {
+        anchorViewEl,
+        defaultViewEl,
+        setDefaultViewElement,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        selectedView,
+        currentViewColumns,
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        handleResetViews,
+        updateSelectedView,
+        updateCurrentViewColumns,
+    };
+};

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { UseViewsManagerProps, ViewMenuItem } from '../types';
+/**
+ * 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[];
+    updateDefaultColumns: (columns: ColumnViewProps[]) => void;
+    internalCustomViews: ViewMenuItem[];
+    setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
+};

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

@@ -0,0 +1,96 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+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 || templates.length === 0) {
+            return {
+                customViews: [],
+                defaultTemplate: undefined,
+                templateDefaultColumns: [],
+                allTemplates: [],
+            };
+        }
+        const { customViews, defaultTemplate } = transformTemplatesToViewMenuItems(templates, tableMode, lang);
+        // Combine all templates for easy access
+        const allTemplates = defaultTemplate ? [defaultTemplate, ...customViews] : customViews;
+        return {
+            customViews,
+            defaultTemplate,
+            templateDefaultColumns: (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) || [],
+            allTemplates,
+        };
+    }, [templates, tableMode, lang]);
+    // Local state for default columns - this is the working copy that can be modified
+    const [defaultColumns, setDefaultColumns] = 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 initialize if mode changed or we haven't initialized yet
+        if (initializedMode !== tableMode && parsedTemplates.templateDefaultColumns.length > 0) {
+            setDefaultColumns(deepCloneColumns(parsedTemplates.templateDefaultColumns));
+            setInitializedMode(tableMode);
+        }
+    }, [tableMode, parsedTemplates.templateDefaultColumns, initializedMode]);
+    // Custom views state
+    const [internalCustomViews, setInternalCustomViews] = useState([]);
+    useEffect(() => {
+        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;
+        }
+        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;
+        }
+        return [updatedDefaultTemplate, ...parsedTemplates.customViews];
+    }, [updatedDefaultTemplate, parsedTemplates.customViews]);
+    // For mode changes, provide the correct columns
+    // Key: ALWAYS prefer state columns if they exist (preserves user modifications)
+    const effectiveDefaultColumns = useMemo(() => {
+        // If mode just changed AND we have no initialized state, use parsed columns
+        if (initializedMode !== tableMode && defaultColumns.length === 0) {
+            return parsedTemplates.templateDefaultColumns;
+        }
+        // Otherwise use state columns (which may include user edits)
+        return defaultColumns.length > 0 ? defaultColumns : parsedTemplates.templateDefaultColumns;
+    }, [initializedMode, tableMode, defaultColumns, parsedTemplates.templateDefaultColumns]);
+    return {
+        // Template data (with updated default template including modifications)
+        defaultTemplate: updatedDefaultTemplate,
+        customViews: parsedTemplates.customViews,
+        allTemplates: updatedAllTemplates,
+        // Default columns - preserves user edits
+        defaultColumns: effectiveDefaultColumns,
+        updateDefaultColumns,
+        // Internal state
+        internalCustomViews,
+        setInternalCustomViews,
+    };
+};

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

@@ -1,3 +1,12 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+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 ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+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, 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

@@ -1,3 +1,13 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+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 ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+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
+export { defaultViewList, advancedColumns, sheetColumns } from './data';