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

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({
         mode,
-        layoutData,
-        initialTableViews,
-        initialCustomViews,
         templates,
         lang,
     });
@@ -25,7 +22,6 @@ 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,
         onTableViewsChange,
         onCustomViewsChange,
         onCreateCustomView,
@@ -35,11 +31,12 @@ function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableView
         setTableViews,
         tableViews,
         customViews,
+        defaultColumns,
         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, templateId) => {
+                                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(templateId);
                                 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,26 @@ 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) => {
+        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);
+        }
+    };
     const toggleColumnSelection = (columnName) => {
         if (!setDefaultColumns)
             return;
@@ -149,11 +169,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/hooks/useViewSelector.d.ts

@@ -4,7 +4,6 @@ import type { ViewMenuItem, LayoutSection, ViewMode } from '../types';
 import type { ViewOption } from '../../type';
 export interface UseViewSelectorProps {
     mode: ViewMode;
-    layoutData?: LayoutSection[];
     onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
     onCreateCustomView?: (data: {
@@ -25,10 +24,11 @@ export interface UseViewSelectorProps {
     setTableViews?: (columns: ColumnViewProps[]) => void;
     tableViews: ColumnViewProps[];
     customViews: ViewMenuItem[];
+    defaultColumns: ColumnViewProps[];
     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, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, setInternalCustomViews, setInternalTableViews, }: UseViewSelectorProps) => {
     anchorViewEl: HTMLDivElement | null;
     defaultViewEl: HTMLDivElement | null;
     setDefaultViewElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;

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

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { useState, useCallback } from 'react';
-import { getColumnsByMode, createCustomViewMenuItem } from '../utils';
-export const useViewSelector = ({ mode, layoutData, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, setInternalCustomViews, setInternalTableViews, }) => {
+import { createCustomViewMenuItem } from '../utils';
+export const useViewSelector = ({ mode, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, setInternalCustomViews, setInternalTableViews, }) => {
     const [anchorViewEl, setAnchorViewEl] = useState(null);
     const [defaultViewEl, setDefaultViewElement] = useState(null);
     const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
@@ -81,10 +81,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,7 +1,7 @@
 /// <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[];

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

@@ -1,7 +1,7 @@
 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, getLayoutDataFromTemplates, getColumnsByMode } 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;
@@ -38,11 +38,8 @@ export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCu
             defaultTemplateColumns,
         };
     }, [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 +47,55 @@ 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 data from templates
         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);
+        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);
-            if (!initialTableViews && effectiveLayoutData) {
-                setInternalTableViews(columns);
-            }
+            setInternalTableViews(columns);
         }
-    }, [mode, effectiveLayoutData, initialTableViews, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns]);
+        else {
+            // No templates - set empty arrays
+            setDefaultColumns([]);
+            setInternalTableViews([]);
+        }
+    }, [mode, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns, transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData]);
     // 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,

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>;
@@ -115,7 +123,7 @@ export interface ViewsDropdownProps {
     open: boolean;
     selectedViewInfo: ViewOption;
     setSelectedViewInfo: (selected: ViewOption) => void;
-    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>, templateId?: string) => 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,10 +25,14 @@ 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;

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';
@@ -102,6 +103,9 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
         // 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;
@@ -109,7 +113,8 @@ export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lan
         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,

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?: (templateId?: string) => 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",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",