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

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

@@ -13,7 +13,7 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
     const { t } = useTranslation();
     // Map tableMode to viewMode: 'sheet' → 'sheet', 'default' → 'advanced'
     const mode = tableMode === 'sheet' ? 'sheet' : 'advanced';
-    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews } = useViewsManager({
+    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews, defaultTemplate, } = useViewsManager({
         mode,
         templates,
         lang,
@@ -22,6 +22,7 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
     const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
     const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, } = useViewSelector({
         mode,
+        onViewChange,
         onTableViewsChange,
         onCustomViewsChange,
         onCreateCustomView,
@@ -32,11 +33,11 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
         tableViews,
         customViews,
         defaultColumns,
+        defaultTemplate,
         setInternalCustomViews,
         setInternalTableViews,
     });
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, templateId) => {
-                                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(templateId);
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, selectedView) => {
                                 setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
                             }, setViews: handleResetViews, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
 }

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

@@ -39,24 +39,17 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
     // Default templates are merged into built-in Default view, so no need to sort
     const viewList = [...defaultViewList, ...customViews];
     const handleViewClick = (item) => {
-        setSelectedViewInfo(item);
         if (item.columns)
             setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
-        // Call onSelect with templateId for custom views
-        if (item.isCustom && item.templateId) {
-            // Create a synthetic event-like object for onSelect
-            const syntheticEvent = {
-                currentTarget: anchorEl || document.createElement('div'),
-            };
-            onSelect(syntheticEvent, item.templateId);
-        }
-        else {
-            // For default view, call onSelect without templateId
-            const syntheticEvent = {
-                currentTarget: anchorEl || document.createElement('div'),
-            };
-            onSelect(syntheticEvent);
-        }
+        // Call onSelect with the full view object
+        const syntheticEvent = {
+            currentTarget: anchorEl || document.createElement('div'),
+        };
+        // Pass the full view object for custom views, undefined for default view
+        const viewToPass = item.isCustom ? item : undefined;
+        onSelect(syntheticEvent, viewToPass);
+        // Update selected view info with the view object
+        setSelectedViewInfo(item, viewToPass);
     };
     const toggleColumnSelection = (columnName) => {
         if (!setDefaultColumns)

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

@@ -26,7 +26,16 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                         const isDate = isDateColumn(column.name);
                         const hasSubmenu = column.menuItems && column.menuItems.length > 0;
                         const { checked, indeterminate } = getColumnCheckState(column);
-                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }, style: { listStyle: 'none', margin: 0, padding: 0, position: 'relative', zIndex: 1, backgroundColor: '#fff' }, onDragStart: (e) => {
+                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1 }, style: {
+                                listStyle: 'none',
+                                margin: 0,
+                                padding: 0,
+                                position: 'relative',
+                                zIndex: 1,
+                                backgroundColor: '#fff',
+                                width: '100%',
+                                willChange: 'transform',
+                            }, onDragStart: (e) => {
                                 const target = e.target;
                                 if (target.closest('[role="checkbox"]') ||
                                     target.closest('input[type="checkbox"]') ||
@@ -37,7 +46,7 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                         if (e.target.closest('[role="checkbox"]') || e.target.closest('input[type="checkbox"]')) {
                                             e.stopPropagation();
                                         }
-                                    } }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, Object.assign({ onMouseDown: (e) => {
+                                    }, sx: { width: '100%', position: 'relative' } }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, Object.assign({ onMouseDown: (e) => {
                                                 e.stopPropagation();
                                             }, onPointerDown: (e) => {
                                                 e.stopPropagation();
@@ -46,7 +55,14 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                                     onColumnToggle(column.name);
                                                 }, onClick: (e) => {
                                                     e.stopPropagation();
-                                                }, disabled: isDate, size: "small", sx: checkboxSx }) })), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
+                                                }, disabled: isDate, size: "small", sx: checkboxSx }) })), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
+                                        {
+                                            name: 'offset',
+                                            options: {
+                                                offset: [0, 0],
+                                            },
+                                        },
+                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
                                                     var _a, _b;
                                                     return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onSubItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
                                                 }) })] })) })))] }), column.name));

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

@@ -37,7 +37,14 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             width: '100%',
-                                        } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
+                                        } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, onClick: () => onColumnToggle(column.name), sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [0, 0],
+                                                },
+                                            },
+                                        ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
                                                         var _a, _b;
                                                         return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, onClick: () => onNestedItemToggle(column.name, subItem.name) }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
                                                     }) })] })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }, column.name));

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

@@ -4,6 +4,7 @@ import type { ViewMenuItem, LayoutSection, ViewMode } from '../types';
 import type { ViewOption } from '../../type';
 export interface UseViewSelectorProps {
     mode: ViewMode;
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
     onCreateCustomView?: (data: {
@@ -25,10 +26,11 @@ export interface UseViewSelectorProps {
     tableViews: ColumnViewProps[];
     customViews: ViewMenuItem[];
     defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
     setInternalCustomViews: (views: ViewMenuItem[]) => void;
     setInternalTableViews: (views: ColumnViewProps[]) => void;
 }
-export declare const useViewSelector: ({ mode, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, setInternalCustomViews, setInternalTableViews, }: UseViewSelectorProps) => {
+export declare const useViewSelector: ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, }: UseViewSelectorProps) => {
     anchorViewEl: HTMLDivElement | null;
     defaultViewEl: HTMLDivElement | null;
     setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
@@ -39,7 +41,7 @@ export declare const useViewSelector: ({ mode, onTableViewsChange, onCustomViews
     handleViewButtonClick: (event: MouseEvent<HTMLDivElement>) => void;
     handleCloseViewDropdown: () => void;
     handleClose: () => void;
-    handleSelectedViewInfo: (selected: ViewOption) => void;
+    handleSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
     handleOpenCreateDialog: (useCurrentState?: boolean) => void;
     handleOpenEditDialog: (view: ViewMenuItem) => void;
     handleCloseCreateDialog: () => void;

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

@@ -7,15 +7,23 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { createCustomViewMenuItem } from '../utils';
-export const useViewSelector = ({ mode, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, setInternalCustomViews, setInternalTableViews, }) => {
+export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, }) => {
     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);
+    // Notify parent of initial view on mount
+    useEffect(() => {
+        // 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);
+    }, [onViewChange, defaultTemplate]);
     const handleTableViewsChange = useCallback((newTableViews) => {
         const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
         setTableViewsState(newTableViews);
@@ -37,10 +45,14 @@ export const useViewSelector = ({ mode, onTableViewsChange, onCustomViewsChange,
         setDefaultViewElement(null);
         setSelectedViewInfo({ label: 'Default', id: 'default' });
     }, []);
-    const handleSelectedViewInfo = useCallback((selected) => {
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
         setSelectedViewInfo(selected);
+        // Update selected view and notify parent
+        const newSelectedView = viewMenuItem || undefined;
+        setSelectedView(newSelectedView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
         handleCloseViewDropdown();
-    }, [handleCloseViewDropdown]);
+    }, [handleCloseViewDropdown, onViewChange]);
     const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
         setEditingView(null);
         setShouldUseCurrentState(useCurrentState);

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

@@ -8,4 +8,5 @@ export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManage
     setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
     internalCustomViews: ViewMenuItem[];
     setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
+    defaultTemplate: ViewMenuItem | undefined;
 };

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

@@ -1,13 +1,14 @@
 import { useState, useEffect, useMemo } from 'react';
-import { transformTemplatesToViewMenuItems, getLayoutDataFromTemplates, getColumnsByMode } from '../utils';
+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 } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
-        // Use default template columns if available, otherwise use layoutData from all 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
             ? [
                 {
@@ -31,11 +32,12 @@ export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
                     }),
                 },
             ]
-            : getLayoutDataFromTemplates(templatesArray);
+            : [];
         return {
             customViews,
             layoutData: effectiveLayoutData,
             defaultTemplateColumns,
+            defaultTemplate,
         };
     }, [templates, mode, lang]);
     const [defaultColumns, setDefaultColumns] = useState(() => {
@@ -71,23 +73,18 @@ export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
         return [];
     });
     useEffect(() => {
-        // Only use data from templates
+        // 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);
         }
-        else if ((transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData) && transformedTemplates.layoutData.length > 0) {
-            // Use layoutData from templates
-            const columns = getColumnsByMode(mode, transformedTemplates.layoutData);
-            setDefaultColumns(columns);
-            setInternalTableViews(columns);
-        }
         else {
-            // No templates - set empty arrays
+            // No default template found - set empty arrays
             setDefaultColumns([]);
             setInternalTableViews([]);
         }
-    }, [mode, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData]);
+    }, [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) {
@@ -104,5 +101,6 @@ export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
         setInternalTableViews,
         internalCustomViews,
         setInternalCustomViews,
+        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
     };
 };

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

@@ -122,8 +122,8 @@ export interface ViewSelectorProps {
 export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
-    setSelectedViewInfo: (selected: ViewOption) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>, templateId?: string) => void;
+    setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>, selectedView?: ViewMenuItem) => void;
     setViews?: (views: string[]) => void;
     anchorEl: Element | null;
     tableViews?: ColumnViewProps[];

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

@@ -36,6 +36,7 @@ export declare const transformTemplatesToViewMenuItems: (templates: Array<{
 }>, mode?: ViewMode, lang?: string) => {
     customViews: ViewMenuItem[];
     defaultTemplateColumns?: ColumnViewProps[] | undefined;
+    defaultTemplate?: ViewMenuItem | undefined;
 };
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests

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

@@ -99,6 +99,7 @@ export const setViewAsDefault = (views, viewId) => {
 export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
     const customViews = [];
     let defaultTemplateColumns;
+    let defaultTemplate;
     templates.forEach((template) => {
         // Get columns for the specified mode
         const section = template.layout.find((s) => s.code.toLowerCase() === mode.toLowerCase());
@@ -109,6 +110,16 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
         if (template.default) {
             // Store default template columns to merge into built-in Default view
             defaultTemplateColumns = columns;
+            // Also create a ViewMenuItem for the default template
+            defaultTemplate = {
+                id: 'default',
+                templateId: template.templateId,
+                label: template.name,
+                isCustom: false,
+                default: true,
+                columns: columns.map((col) => col.name),
+                submenu: columns,
+            };
         }
         else {
             // Add non-default templates as custom views
@@ -123,7 +134,7 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
             });
         }
     });
-    return { customViews, defaultTemplateColumns };
+    return { customViews, defaultTemplateColumns, defaultTemplate };
 };
 /**
  * Convert ColumnViewProps back to LayoutSection format for API requests

package/build/components/TableHeader/type.d.ts

@@ -23,7 +23,7 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
     calendarMode?: CalenderMode;
     onStatusChange?: <T extends IStatus>(status?: T) => void;
     onSearch?: (search: string) => void;
-    onViewChange?: (templateId?: string) => void;
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
     onDateChange?: (date: Date | [Date, Date]) => void;
     tableReportsComponent?: React.ReactNode;
     tableFilterComponent?: React.ReactNode;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.372-test.2-test.3-test.4-test.5",
-  "testVersion": 5,
+  "version": "0.1.372-test.2-test.3-test.4-test.5-test.6",
+  "testVersion": 6,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",