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

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

@@ -40,7 +40,9 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
     const handleDelete = () => __awaiter(this, void 0, void 0, function* () {
         if (!editingView)
             return;
-        yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(editingView.id));
+        const templateId = editingView.templateId || editingView.id;
+        console.log({ templateId });
+        yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(templateId));
         onClose();
     });
     if (!open)

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ViewSelectorProps } from './types';
-declare function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }: ViewSelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, onTableViewsChange, onCustomViewsChange, templates, lang, }: ViewSelectorProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ViewSelector>;
 export default _default;

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

@@ -9,15 +9,12 @@ import CreateViewDialog from './CreateViewDialog';
 import { ViewWrapper } from './styles';
 import { useViewsManager } from './hooks';
 import { useViewSelector } from './hooks/useViewSelector';
-function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang = 'en', }) {
+function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', onTableViewsChange, onCustomViewsChange, templates, lang = 'en', }) {
     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,
-        layoutData,
-        initialTableViews,
-        initialCustomViews,
         templates,
         lang,
     });
@@ -25,7 +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,
-        layoutData,
+        onViewChange,
         onTableViewsChange,
         onCustomViewsChange,
         onCreateCustomView,
@@ -35,11 +32,12 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
         setTableViews,
         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) => {
-                                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange();
+    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

@@ -38,6 +38,19 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
     const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
     // Default templates are merged into built-in Default view, so no need to sort
     const viewList = [...defaultViewList, ...customViews];
+    const handleViewClick = (item) => {
+        if (item.columns)
+            setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
+        // 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)
             return;
@@ -149,11 +162,7 @@ function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect,
                                 else if (hasSubmenu(item, defaultColumns)) {
                                     handleMenuItemLeave();
                                 }
-                            }, onClick: () => {
-                                setSelectedViewInfo(item);
-                                if (item.columns)
-                                    setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
-                            }, sx: {
+                            }, onClick: () => handleViewClick(item), sx: {
                                 position: 'relative',
                                 cursor: 'pointer',
                                 pr: 1.5,

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,7 +4,7 @@ import type { ViewMenuItem, LayoutSection, ViewMode } from '../types';
 import type { ViewOption } from '../../type';
 export interface UseViewSelectorProps {
     mode: ViewMode;
-    layoutData?: LayoutSection[];
+    onViewChange?: (selectedView?: ViewMenuItem) => void;
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
     onCreateCustomView?: (data: {
@@ -25,10 +25,12 @@ export interface UseViewSelectorProps {
     setTableViews?: (columns: ColumnViewProps[]) => void;
     tableViews: ColumnViewProps[];
     customViews: ViewMenuItem[];
+    defaultColumns: ColumnViewProps[];
+    defaultTemplate?: ViewMenuItem;
     setInternalCustomViews: (views: ViewMenuItem[]) => void;
     setInternalTableViews: (views: ColumnViewProps[]) => void;
 }
-export declare const useViewSelector: ({ mode, layoutData, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, 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, layoutData, onTableViewsChange, o
     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 { getColumnsByMode, createCustomViewMenuItem } from '../utils';
-export const useViewSelector = ({ mode, layoutData, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, setInternalCustomViews, setInternalTableViews, }) => {
+import { useState, useCallback, useEffect } from 'react';
+import { createCustomViewMenuItem } from '../utils';
+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, layoutData, onTableViewsChange, onCustom
         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);
@@ -81,10 +93,10 @@ export const useViewSelector = ({ mode, layoutData, onTableViewsChange, onCustom
             resetTableViews({ id: views[0], label: views[0] });
         }
         else {
-            const resetColumns = getColumnsByMode(mode, layoutData);
-            handleTableViewsChange(resetColumns);
+            // Reset to default columns from templates
+            handleTableViewsChange([...defaultColumns]);
         }
-    }, [resetTableViews, mode, layoutData, handleTableViewsChange]);
+    }, [resetTableViews, defaultColumns, handleTableViewsChange]);
     return {
         // State
         anchorViewEl,

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import type { ColumnViewProps } from '../../../../types/index.js';
 import type { UseViewsManagerProps, ViewMenuItem } from '../types';
-export declare const useViewsManager: ({ mode, layoutData, initialTableViews, initialCustomViews, templates, lang }: UseViewsManagerProps) => {
+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[]>>;
+    defaultTemplate: ViewMenuItem | undefined;
 };

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

@@ -1,13 +1,14 @@
 import { useState, useEffect, useMemo } from 'react';
-import { getColumnsByMode, transformTemplatesToViewMenuItems, getLayoutDataFromTemplates } from '../utils';
-export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCustomViews, templates, lang = 'en' }) => {
-    // Transform templates internally if provided
+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,18 +32,16 @@ export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCu
                     }),
                 },
             ]
-            : getLayoutDataFromTemplates(templatesArray);
+            : [];
         return {
             customViews,
             layoutData: effectiveLayoutData,
             defaultTemplateColumns,
+            defaultTemplate,
         };
     }, [templates, mode, lang]);
-    // Use transformed templates or provided props
-    const effectiveLayoutData = (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData) || layoutData;
-    const effectiveCustomViews = (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) || initialCustomViews;
     const [defaultColumns, setDefaultColumns] = useState(() => {
-        // If we have default template columns from templates, use them; otherwise use layoutData
+        // Only use data from templates - no other sources
         if (templates) {
             const templatesArray = Array.isArray(templates) ? templates : templates.templates;
             const { defaultTemplateColumns } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
@@ -50,31 +49,50 @@ export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCu
                 return defaultTemplateColumns;
             }
         }
-        return getColumnsByMode(mode, layoutData || []);
+        // 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 [];
     });
-    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || defaultColumns || []);
-    const [internalCustomViews, setInternalCustomViews] = useState(effectiveCustomViews || []);
     useEffect(() => {
-        // If we have default template columns, use them; otherwise use layoutData
+        // 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);
-            if (!initialTableViews) {
-                setInternalTableViews(transformedTemplates.defaultTemplateColumns);
-            }
+            setInternalTableViews(transformedTemplates.defaultTemplateColumns);
         }
         else {
-            const columns = getColumnsByMode(mode, effectiveLayoutData);
-            setDefaultColumns(columns);
-            if (!initialTableViews && effectiveLayoutData) {
-                setInternalTableViews(columns);
-            }
+            // No default template found - set empty arrays
+            setDefaultColumns([]);
+            setInternalTableViews([]);
         }
-    }, [mode, effectiveLayoutData, initialTableViews, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns]);
+    }, [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);
         }
+        else {
+            setInternalCustomViews([]);
+        }
     }, [transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews]);
     return {
         defaultColumns,
@@ -83,5 +101,6 @@ export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCu
         setInternalTableViews,
         internalCustomViews,
         setInternalCustomViews,
+        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
     };
 };

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

@@ -8,4 +8,6 @@ export { default as CreateViewDialog } from './CreateViewDialog';
 export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
 export { useSubmenuHover } 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/types.d.ts

@@ -5,6 +5,7 @@ export type ViewMode = 'advanced' | 'sheet';
 export interface ViewMenuItem {
     label: string;
     id: string;
+    templateId?: string;
     columns?: string[];
     submenu?: ColumnViewProps[];
     isCustom?: boolean;
@@ -16,6 +17,7 @@ export interface FieldItem {
         text: string;
         lang: string;
     }[];
+    order?: number | null;
     default?: boolean;
 }
 export interface ColumnItem {
@@ -33,23 +35,28 @@ export interface LayoutSection {
     columns: ColumnItem[];
 }
 export interface TemplateResponse {
-    id: string;
-    object: string;
-    master: boolean;
-    live_mode: boolean;
-    api_version: string;
-    feature_version: string;
-    created: number;
-    updated: number;
+    templateId: string;
     segment: string;
     app: string;
     service: string;
+    name: string;
+    layout: LayoutSection[];
+    id: {
+        timestamp: number;
+        date: string;
+    };
+    masterTemplateId: string;
     user: {
         id: string;
     };
-    name: string;
+    created: number;
+    updated: number;
     default: boolean;
-    layout: LayoutSection[];
+    object?: string;
+    master?: boolean;
+    live_mode?: boolean;
+    api_version?: string;
+    feature_version?: string;
 }
 export interface TemplatesListResponse {
     object: string;
@@ -74,6 +81,7 @@ export interface CreateCustomViewDialogProps {
     editingView?: {
         id: string;
         label: string;
+        templateId?: string;
         submenu?: ColumnViewProps[];
     } | null;
     onDelete?: (viewId: string) => Promise<void>;
@@ -114,8 +122,8 @@ export interface ViewSelectorProps {
 export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
-    setSelectedViewInfo: (selected: ViewOption) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setSelectedViewInfo: (selected: ViewOption, viewMenuItem?: ViewMenuItem) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>, selectedView?: ViewMenuItem) => void;
     setViews?: (views: string[]) => void;
     anchorEl: Element | null;
     tableViews?: ColumnViewProps[];
@@ -167,9 +175,6 @@ export interface UseCreateViewDialogProps {
 }
 export interface UseViewsManagerProps {
     mode: ViewMode;
-    layoutData?: LayoutSection[];
-    initialTableViews?: ColumnViewProps[];
-    initialCustomViews?: ViewMenuItem[];
     templates?: TemplatesListResponse | TemplateResponse[];
     lang?: string;
 }

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

@@ -25,13 +25,18 @@ export declare const setViewAsDefault: (views: ViewMenuItem[], viewId: string) =
  * Separates default templates (to be merged into built-in Default view) from custom views
  */
 export declare const transformTemplatesToViewMenuItems: (templates: Array<{
-    id: string;
+    id: string | {
+        timestamp: number;
+        date: string;
+    };
     name: string;
     default: boolean;
     layout: LayoutSection[];
+    templateId: string;
 }>, 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

@@ -1,4 +1,4 @@
-import { advancedColumns, sheetColumns } from './data';
+// Note: advancedColumns and sheetColumns are only used in demo - not imported here to avoid default data
 /**
  * Transform API layout response to internal ColumnViewProps format
  */
@@ -35,7 +35,8 @@ export const getColumnsByMode = (mode, layoutData) => {
             return transformLayoutToColumns([section]);
         }
     }
-    return mode === 'advanced' ? [...advancedColumns] : [...sheetColumns];
+    // Return empty array - all data should come from API
+    return [];
 };
 export const isDateColumn = (name) => {
     return name.toLowerCase() === 'date';
@@ -98,18 +99,33 @@ 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());
         const columns = section ? transformLayoutToColumns([section], lang) : [];
+        // Handle id as either string or object
+        const templateIdString = typeof template.id === 'string' ? template.id : template.templateId;
+        const viewId = typeof template.id === 'string' ? template.id : template.templateId;
         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
             customViews.push({
-                id: template.id,
+                id: viewId,
+                templateId: template.templateId,
                 label: template.name,
                 isCustom: true,
                 default: false,
@@ -118,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?: () => 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",
-  "testVersion": 3,
+  "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",