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

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

@@ -18,9 +18,7 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         if (wasClosed && open) {
             if (editingView) {
                 // Use the saved submenu from editingView if available, otherwise fall back to defaultColumns
-                const savedColumns = editingView.submenu && editingView.submenu.length > 0
-                    ? editingView.submenu
-                    : defaultColumns;
+                const savedColumns = editingView.submenu && editingView.submenu.length > 0 ? editingView.submenu : defaultColumns;
                 const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
                 setSelectedColumns([dateColumn, ...otherColumns]);
                 // Ensure templateName is set to editingView.label (fallback to empty string if undefined)

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';

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

@@ -2,12 +2,10 @@ export { default } from './TableView';
 export { default as TableView } from './TableView';
 export { default as DefaultViews } from './DefaultViews';
 export { default as CustomViews } from './CustomViews';
-export { default as ViewSelector } from './ViewSelector';
+export { default as ViewsMenu } from './ViewsMenu';
 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, useViewsMenu } 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';

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

@@ -350,18 +350,24 @@ export const ResetCheckboxSx = {
 };
 export const SubmenuContainer = styled(Box)(() => ({
     minWidth: 200,
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '80vh',
+    overflow: 'hidden',
 }));
 export const ColumnItemsContainer = styled(Box)(() => ({
-    maxHeight: 300,
+    flex: 1,
     overflowY: 'auto',
     paddingLeft: 6,
     paddingRight: 6,
+    minHeight: 0,
 }));
 export const SaveCustomViewBox = styled(Box)(() => ({
     paddingLeft: 8,
     paddingRight: 8,
     paddingTop: 8,
     paddingBottom: 8,
+    flexShrink: 0,
 }));
 export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
     width: '100%',
@@ -376,7 +382,7 @@ export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
     cursor: disabled ? 'not-allowed' : 'pointer',
     opacity: disabled ? 0.5 : 1,
 }));
-export const ButtonsContainer = styled(Box)(() => ({
+export const ButtonsContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-end',
     gap: 12,
@@ -384,6 +390,9 @@ export const ButtonsContainer = styled(Box)(() => ({
     paddingBottom: 8,
     paddingLeft: 12,
     paddingRight: 12,
+    flexShrink: 0,
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
 }));
 export const CancelButtonSx = {
     fontSize: 11,

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

@@ -1,7 +1,5 @@
-/// <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;
@@ -34,7 +32,24 @@ export interface LayoutSection {
     code: string;
     columns: ColumnItem[];
 }
-export interface TemplateResponse {
+export interface TemplateAPIMetadata {
+    segment: string;
+    app: string;
+    service: string;
+    user: {
+        id: string;
+    };
+    master_template_id?: string;
+}
+export interface CreateTemplatePayload extends TemplateAPIMetadata {
+    name: string;
+    layout: LayoutSection[];
+}
+export interface UpdateTemplatePayload extends TemplateAPIMetadata {
+    name: string;
+    layout: LayoutSection[];
+}
+export interface Template {
     templateId: string;
     segment: string;
     app: string;
@@ -52,20 +67,15 @@ export interface TemplateResponse {
     created: number;
     updated: number;
     default: boolean;
-    object?: string;
-    master?: boolean;
-    live_mode?: boolean;
-    api_version?: string;
-    feature_version?: string;
 }
-export interface TemplatesListResponse {
+export interface TemplatesList {
     object: string;
     live_mode: boolean;
     api_version: string;
     feature_version: string;
     count: number;
     has_more: boolean;
-    templates: TemplateResponse[];
+    templates: Template[];
 }
 export interface CreateCustomViewDialogProps {
     open: boolean;
@@ -85,19 +95,14 @@ export interface CreateCustomViewDialogProps {
     } | null;
     onDelete?: (viewId: string) => Promise<void>;
     tableViews?: ColumnViewProps[];
-    mode?: ViewMode;
+    mode?: TableMode;
 }
 export interface ColumnCheckState {
     checked: boolean;
     indeterminate: boolean;
 }
-export interface ViewSelectorProps {
+export interface ViewsMenuProps {
     onViewChange?: TableHeaderProps['onViewChange'];
-    setIsViewVisible: (visible: boolean) => void;
-    setTableViews?: TableHeaderProps['setTableViews'];
-    tableViews?: TableHeaderProps['tableViews'];
-    resetTableViews?: TableHeaderProps['resetTableViews'];
-    customViews?: ViewMenuItem[];
     onCreateCustomView?: (data: {
         name: string;
         selectedColumns: ColumnViewProps[];
@@ -109,29 +114,26 @@ export interface ViewSelectorProps {
         layout: LayoutSection;
     }) => Promise<void>;
     onDeleteCustomView?: (viewId: string) => Promise<void>;
-    tableMode?: import('../../../types/index.js').TableMode;
-    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
-    initialTableViews?: ColumnViewProps[];
-    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
-    initialCustomViews?: ViewMenuItem[];
-    layoutData?: LayoutSection[];
-    templates?: TemplatesListResponse | TemplateResponse[];
+    tableMode?: TableMode;
+    templates: Template[];
     lang?: string;
 }
 export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
     setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>, selectedView?: ViewMenuItem) => void;
-    setViews?: (views: string[]) => void;
     anchorEl: Element | null;
-    tableViews?: ColumnViewProps[];
-    setTableViews?: (columns: ColumnViewProps[]) => void;
+    defaultModified?: boolean;
+    onMarkDefaultModified?: () => 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[];
@@ -158,6 +160,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;
 }
@@ -173,7 +176,7 @@ export interface UseCreateViewDialogProps {
     tableViews?: ColumnViewProps[];
 }
 export interface UseViewsManagerProps {
-    mode: ViewMode;
-    templates?: TemplatesListResponse | TemplateResponse[];
+    tableMode: TableMode;
+    templates: Template[];
     lang?: string;
 }