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

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

@@ -46,9 +46,16 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], defa
             return;
         setIsLoading(true);
         try {
-            const columnsToCreate = selectedColumns.filter((col) => col.selected);
-            const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
-            yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
+            if (editingView) {
+                // On update: send whole layout with current selected/default (true/false) for every column and field
+                const layout = convertColumnsToLayoutSection(selectedColumns, mode);
+                yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns, layout }));
+            }
+            else {
+                const columnsToCreate = selectedColumns.filter((col) => col.selected);
+                const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
+                yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
+            }
             onClose();
         }
         catch (error) {

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

@@ -71,6 +71,6 @@ function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDelet
     });
     return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, defaultModified: (_a = modifiedModes[tableMode]) !== null && _a !== void 0 ? _a : false, onMarkDefaultModified: () => {
                                 setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
-                            }, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, setDefaultColumns: updateDefaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? currentViewColumns : undefined, mode: tableMode })] }));
+                            }, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, setDefaultColumns: updateDefaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: editingView && baseDefaultColumns.length > 0 ? baseDefaultColumns : defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? currentViewColumns : undefined, mode: tableMode })] }));
 }
 export default memo(ViewsMenu);

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

@@ -8,4 +8,8 @@ export declare const DATE_COLUMN_CONFIG: {
     readonly label: "Date";
     readonly selected: true;
     readonly menuItems: undefined;
+    readonly order: 1;
+    readonly pinned: "start";
+    readonly isDefaultPinned: true;
+    readonly pinnable: true;
 };

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

@@ -8,4 +8,8 @@ export const DATE_COLUMN_CONFIG = {
     label: 'Date',
     selected: true,
     menuItems: undefined,
+    order: 1,
+    pinned: 'start',
+    isDefaultPinned: true,
+    pinnable: true,
 };

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from '../constants';
-import { initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns as copyColumns, } from '../utils';
+import { isDateColumn, initializeCreateColumns, initializeCreateColumnsWithCurrentState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns as copyColumns, } from '../utils';
 import { useSubmenuHover } from './useSubmenuHover';
 export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
     const [templateName, setTemplateName] = useState(() => (editingView === null || editingView === void 0 ? void 0 : editingView.label) || '');
@@ -10,7 +10,7 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
     const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
     const dateColumn = DATE_COLUMN_CONFIG;
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!open) {
             previousOpenRef.current = false;
             return;
@@ -18,12 +18,21 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
         const wasClosed = !previousOpenRef.current;
         if (wasClosed && open) {
             if (editingView) {
-                const savedColumns = editingView.submenu && editingView.submenu.length > 0 ? editingView.submenu : defaultColumns;
-                const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
-                const columnsToSet = [dateColumn, ...otherColumns];
+                // Use template's submenu as source of truth so selection state is preserved (don't rely on name matching vs availableColumns)
+                const submenu = ((_a = editingView.submenu) === null || _a === void 0 ? void 0 : _a.length) ? copyColumns(editingView.submenu) : [];
+                const templateNonDate = submenu.filter((c) => !isDateColumn(c.name));
+                const templateWithDateFirst = [dateColumn, ...templateNonDate];
+                const templateNames = new Set(templateWithDateFirst.map((c) => c.name));
+                const missingFromAvailable = availableColumns
+                    .filter((col) => !isDateColumn(col.name) && !templateNames.has(col.name))
+                    .map((col) => {
+                    var _a;
+                    return (Object.assign(Object.assign({}, col), { selected: false, menuItems: (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) }));
+                });
+                const columnsToSet = [...templateWithDateFirst, ...missingFromAvailable];
                 setSelectedColumns(columnsToSet);
                 initialColumnsRef.current = copyColumns(columnsToSet);
-                const nameToSet = ((_a = editingView.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+                const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
                 setTemplateName(nameToSet);
             }
             else {
@@ -37,7 +46,7 @@ export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, ed
             }
         }
         else if (open && editingView) {
-            const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
+            const nameToSet = ((_c = editingView.label) === null || _c === void 0 ? void 0 : _c.trim()) || '';
             setTemplateName(nameToSet);
         }
         previousOpenRef.current = open;

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

@@ -139,16 +139,12 @@ export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCus
         if (editingView) {
             const templateId = editingView.templateId || editingView.id;
             yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
-            const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, submenu: deepCloneColumns(data.selectedColumns), columns: data.selectedColumns.map((c) => c.name) });
-            setSelectedView(updatedView);
-            setSelectedViewInfo({ id: updatedView.id, label: updatedView.label });
-            setCurrentViewColumns(deepCloneColumns(data.selectedColumns));
-            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(updatedView));
+            // List/selection update is handled internally by parent (e.g. templates state refresh)
         }
         else {
             yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
         }
-    }), [editingView, onEditCustomView, onCreateCustomView, onViewChange, getViewForParent]);
+    }), [editingView, onEditCustomView, onCreateCustomView]);
     const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
         const viewToDelete = allTemplates.find((view) => view.id === viewId || view.templateId === viewId);
         const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;

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

@@ -356,18 +356,19 @@ export const getSubmenuItems = (item, defaultColumns) => {
     // Always include date column at the beginning if it's not already present (date column submenu disabled)
     const hasDateColumn = columns.some((col) => col.name.toLowerCase() === 'date');
     if (!hasDateColumn) {
-        const dateColumn = Object.assign(Object.assign({}, DATE_COLUMN_CONFIG), { menuItems: undefined });
+        const dateColumn = Object.assign({}, DATE_COLUMN_CONFIG);
         return [dateColumn, ...columns];
     }
-    // Ensure date column is first and strip submenu from date (date column submenu disabled)
+    // Ensure date column is first and strip submenu from date (date column submenu disabled); always apply date pin/order config
     const dateColumnIndex = columns.findIndex((col) => col.name.toLowerCase() === 'date');
     if (dateColumnIndex > 0) {
         const dateCol = columns[dateColumnIndex];
-        const dateColumn = Object.assign(Object.assign({}, dateCol), { menuItems: undefined });
+        const dateColumn = Object.assign(Object.assign(Object.assign({}, DATE_COLUMN_CONFIG), dateCol), { menuItems: undefined });
         const otherColumns = columns.filter((col) => col.name.toLowerCase() !== 'date');
         return [dateColumn, ...otherColumns];
     }
-    return columns.map((col) => col.name.toLowerCase() === 'date' ? Object.assign(Object.assign({}, col), { menuItems: undefined }) : col);
+    return columns.map((col) => col.name.toLowerCase() === 'date'
+        ? Object.assign(Object.assign(Object.assign({}, DATE_COLUMN_CONFIG), col), { menuItems: undefined }) : col);
 };
 /**
  * Check if a view menu item has submenu

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns: inputColumns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useRef, useEffect } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
+import { getProcessedColumns } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
@@ -8,7 +9,9 @@ import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, u
 import { useColumnResize, useColumnResizeWithPinned, applyColumnWidths } from './features/resize';
 import { ResizeOverlay } from './features/resize/components';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
-function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, }) {
+function SheetViewVirtualTable({ columns: inputColumns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, windowId, serviceCode, customNoDataComponent, defaultSkeleton = false, }) {
+    // Use skeleton columns when loading and defaultSkeleton is true (same behavior as VirtualTable)
+    const columns = useMemo(() => getProcessedColumns(inputColumns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [inputColumns, isLoading, defaultSkeleton]);
     // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     // Refs and state for resize indicator positioning

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns: inputColumns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
+function VirtualTable({ columns: inputColumns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, footerComponent, customNoDataComponent, defaultSkeleton = false, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -58,8 +58,8 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const tableEmpty = !isLoading && rows.length === 0;
     const hasTimeoutError = isTimeoutError(error);
     const lastItemIndex = rows.length - 1;
-    const processedColumns = useMemo(() => getProcessedColumns(columns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [columns, isLoading, defaultSkeleton]);
-    const shownColumns = useMemo(() => processedColumns.filter((column) => !column.hidden), [processedColumns]);
+    const columns = useMemo(() => getProcessedColumns(inputColumns, isLoading !== null && isLoading !== void 0 ? isLoading : false, defaultSkeleton), [inputColumns, isLoading, defaultSkeleton]);
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
     const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;

package/build/types/column.d.ts

@@ -40,4 +40,12 @@ export interface ColumnViewProps {
     disabled?: boolean;
     sx?: SxProps<Theme>;
     menuSx?: SxProps<Theme>;
+    /** Table column order (date column should always be 1) */
+    order?: number;
+    /** Pinned position (date column should always be 'start') */
+    pinned?: 'start' | 'end';
+    /** Whether column is pinned by default (date column should always be true) */
+    isDefaultPinned?: boolean;
+    /** Whether column can be pinned (date column should always be true) */
+    pinnable?: boolean;
 }

package/build/utils/skeletonColumns.d.ts

@@ -1,4 +1,8 @@
 import type { IColumnProps } from '../types/index.js';
 export declare const DEFAULT_SKELETON_WIDTHS: string[];
 export declare const generateSkeletonColumns: (staticWidths?: string[]) => IColumnProps[];
+/**
+ * Returns columns to display: when loading and defaultSkeleton is true, returns skeleton columns
+ * (with date column first so it shows skeleton); otherwise returns the given columns.
+ */
 export declare const getProcessedColumns: <T = unknown>(columns: readonly IColumnProps<T>[], isLoading: boolean, defaultSkeleton: boolean) => IColumnProps<T>[];

package/build/utils/skeletonColumns.js

@@ -1,4 +1,16 @@
 export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
+/** Date column config for skeleton so the date column shows skeleton like other columns */
+const SKELETON_DATE_COLUMN = {
+    id: 'date',
+    header: '',
+    width: DEFAULT_SKELETON_WIDTHS[0],
+    order: 1,
+    pinned: 'start',
+    isDefaultPinned: true,
+    pinnable: true,
+    hidden: false,
+    sortable: false,
+};
 export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
     return staticWidths.map((width, index) => ({
         id: `skeleton-col-${index}`,
@@ -9,9 +21,14 @@ export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS)
         sortable: false,
     }));
 };
+/**
+ * Returns columns to display: when loading and defaultSkeleton is true, returns skeleton columns
+ * (with date column first so it shows skeleton); otherwise returns the given columns.
+ */
 export const getProcessedColumns = (columns, isLoading, defaultSkeleton) => {
     if (defaultSkeleton && isLoading) {
-        return generateSkeletonColumns();
+        const restSkeleton = generateSkeletonColumns(DEFAULT_SKELETON_WIDTHS.slice(1)).map((col, i) => (Object.assign(Object.assign({}, col), { order: i + 2 })));
+        return [SKELETON_DATE_COLUMN, ...restSkeleton];
     }
     return [...columns];
 };

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.373-test.2",
-  "testVersion": 2,
+  "version": "0.1.373-test.3-test.4-test.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",