@tap-payments/os-micro-frontend-shared 0.1.376 → 0.1.377-test.1

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

@@ -0,0 +1,469 @@
+import { DATE_COLUMN_CONFIG } from './constants';
+// Note: advancedColumns and sheetColumns are only used in demo - not imported here to avoid default data
+/**
+ * Transform API layout response to internal ColumnViewProps format
+ */
+export const transformLayoutToColumns = (layout, lang = 'en') => {
+    const columns = [];
+    layout.forEach((section) => {
+        section.columns.forEach((col) => {
+            var _a, _b, _c, _d;
+            const label = ((_a = col.name.find((n) => n.lang === lang)) === null || _a === void 0 ? void 0 : _a.text) || ((_b = col.name[0]) === null || _b === void 0 ? void 0 : _b.text) || col.code;
+            const menuItems = ((_c = col.fields) === null || _c === void 0 ? void 0 : _c.length)
+                ? col.fields.map((field) => {
+                    var _a, _b;
+                    return ({
+                        name: field.code,
+                        label: ((_a = field.name.find((n) => n.lang === lang || n.lang === '')) === null || _a === void 0 ? void 0 : _a.text) || field.code,
+                        selected: (_b = field.default) !== null && _b !== void 0 ? _b : false,
+                    });
+                })
+                : undefined;
+            columns.push({
+                name: col.code,
+                label,
+                selected: isDateColumn(col.code) ? true : (_d = col.default) !== null && _d !== void 0 ? _d : false,
+                menuItems: (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? menuItems : undefined,
+            });
+        });
+    });
+    return columns;
+};
+export const getColumnsByMode = (mode, layoutData) => {
+    if (layoutData && layoutData.length > 0) {
+        // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+        const sectionCode = mode === 'sheet' ? 'sheet' : 'advanced';
+        const section = layoutData.find((s) => s.code.toLowerCase() === sectionCode);
+        if (section) {
+            return transformLayoutToColumns([section]);
+        }
+    }
+    // Return empty array - all data should come from API
+    return [];
+};
+export const isDateColumn = (name) => {
+    return name.toLowerCase() === 'date';
+};
+export const getColumnCheckState = (column) => {
+    var _a, _b;
+    if (!((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length)) {
+        return { checked: (_b = column.selected) !== null && _b !== void 0 ? _b : false, indeterminate: false };
+    }
+    const selectedCount = column.menuItems.filter((item) => item.selected).length;
+    return {
+        checked: selectedCount > 0,
+        indeterminate: selectedCount > 0 && selectedCount < column.menuItems.length,
+    };
+};
+export const createCustomViewMenuItem = (name, selectedColumns, isDefault = false) => ({
+    label: name,
+    id: `custom_${Date.now()}`,
+    columns: selectedColumns.map((col) => col.name),
+    submenu: selectedColumns,
+    isCustom: true,
+    default: isDefault,
+});
+/**
+ * Extract layout data from templates (combine all sections from all templates)
+ * This is used for the built-in "Default" view's layoutData prop
+ */
+export const getLayoutDataFromTemplates = (templates) => {
+    const sectionsMap = new Map();
+    templates.forEach((template) => {
+        template.layout.forEach((section) => {
+            const existingSection = sectionsMap.get(section.code);
+            if (existingSection) {
+                // Merge columns, avoiding duplicates
+                const existingCodes = new Set(existingSection.columns.map((col) => col.code));
+                section.columns.forEach((col) => {
+                    if (!existingCodes.has(col.code)) {
+                        existingSection.columns.push(col);
+                    }
+                });
+            }
+            else {
+                sectionsMap.set(section.code, Object.assign(Object.assign({}, section), { columns: [...section.columns] }));
+            }
+        });
+    });
+    return Array.from(sectionsMap.values());
+};
+/**
+ * Set a view as default and ensure only one view is default at a time
+ */
+export const setViewAsDefault = (views, viewId) => {
+    return views.map((view) => (Object.assign(Object.assign({}, view), { default: view.id === viewId })));
+};
+/**
+ * Transform API templates response to ViewMenuItem array
+ * Filters templates by mode and only shows the section matching the current mode
+ * Separates default templates (to be merged into built-in Default view) from custom views
+ */
+export const transformTemplatesToViewMenuItems = (templates, mode = 'sheet', lang = 'en') => {
+    const customViews = [];
+    let defaultTemplateColumns;
+    let defaultTemplate;
+    templates.forEach((template) => {
+        // Get columns for the specified mode
+        // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+        const sectionCode = mode === 'sheet' ? 'sheet' : 'advanced';
+        const section = template.layout.find((s) => s.code.toLowerCase() === sectionCode);
+        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;
+        // Always include date column at the beginning
+        const dateColumn = DATE_COLUMN_CONFIG;
+        const columnsWithDate = columns.some((col) => col.name.toLowerCase() === 'date') ? columns : [dateColumn, ...columns];
+        // Ensure date column is first
+        const dateColumnIndex = columnsWithDate.findIndex((col) => col.name.toLowerCase() === 'date');
+        const finalColumns = dateColumnIndex > 0
+            ? [columnsWithDate[dateColumnIndex], ...columnsWithDate.filter((col) => col.name.toLowerCase() !== 'date')]
+            : columnsWithDate;
+        if (template.default) {
+            // Store default template columns to merge into built-in Default view
+            defaultTemplateColumns = finalColumns;
+            // Also create a ViewMenuItem for the default template
+            defaultTemplate = {
+                id: 'default',
+                templateId: template.templateId,
+                label: template.name,
+                isCustom: false,
+                default: true,
+                columns: finalColumns.map((col) => col.name),
+                submenu: finalColumns,
+            };
+        }
+        else {
+            // Add non-default templates as custom views
+            customViews.push({
+                id: viewId,
+                templateId: template.templateId,
+                label: template.name,
+                isCustom: true,
+                default: false,
+                columns: finalColumns.map((col) => col.name),
+                submenu: finalColumns,
+            });
+        }
+    });
+    return { customViews, defaultTemplateColumns, defaultTemplate };
+};
+/**
+ * Convert ColumnViewProps back to LayoutSection format for API requests
+ */
+export const convertColumnsToLayoutSection = (columns, mode, lang = 'en') => {
+    const columnItems = columns.map((col, index) => {
+        var _a, _b;
+        const fieldItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((field) => {
+            var _a;
+            return ({
+                code: field.name,
+                name: [
+                    {
+                        text: typeof field.label === 'string' ? field.label : field.name,
+                        lang: lang || '',
+                    },
+                ],
+                default: (_a = field.selected) !== null && _a !== void 0 ? _a : false,
+            });
+        });
+        const columnLabel = typeof col.label === 'string' ? col.label : col.name;
+        return Object.assign({ code: col.name, name: [
+                {
+                    text: columnLabel,
+                    lang,
+                },
+            ], order: index + 1, default: (_b = col.selected) !== null && _b !== void 0 ? _b : false }, (fieldItems && fieldItems.length > 0 && { fields: fieldItems }));
+    });
+    // Map TableMode to layout section code: 'default' → 'Advanced', 'sheet' → 'Sheet'
+    const sectionCode = mode === 'sheet' ? 'Sheet' : 'Advanced';
+    return {
+        code: sectionCode,
+        columns: columnItems,
+    };
+};
+/**
+ * Initialize columns for editing mode
+ */
+export const initializeEditingColumns = (editingColumns, availableColumns) => {
+    return availableColumns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a;
+        const savedCol = editingColumns.find((ec) => ec.name === col.name);
+        return (savedCol || 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 }))) }));
+    });
+};
+/**
+ * Initialize columns for create mode (all unchecked except date)
+ */
+export const initializeCreateColumns = (availableColumns) => {
+    return availableColumns
+        .filter((col) => !isDateColumn(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 }))) }));
+    });
+};
+/**
+ * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values)
+ */
+export const initializeCreateColumnsWithCurrentState = (availableColumns, currentTableViews) => {
+    return availableColumns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a, _b, _c;
+        const currentCol = currentTableViews.find((tc) => tc.name === col.name);
+        if (currentCol) {
+            return Object.assign(Object.assign({}, col), { selected: (_a = currentCol.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                    var _a, _b;
+                    const currentMenuItem = (_a = currentCol.menuItems) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.name === item.name);
+                    return Object.assign(Object.assign({}, item), { selected: (_b = currentMenuItem === null || currentMenuItem === void 0 ? void 0 : currentMenuItem.selected) !== null && _b !== void 0 ? _b : false });
+                }) });
+        }
+        return Object.assign(Object.assign({}, col), { selected: false, menuItems: (_c = col.menuItems) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { selected: false }))) });
+    });
+};
+/**
+ * Reset columns to their default selection state
+ */
+export const resetColumnsToDefault = (columns) => {
+    return columns
+        .filter((col) => !isDateColumn(col.name))
+        .map((col) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => { var _a; return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false })); }) }));
+    });
+};
+/**
+ * Toggle a column's selection (including all children if present)
+ */
+export const toggleColumn = (columns, columnName) => {
+    return columns.map((col) => {
+        var _a;
+        if (col.name !== columnName)
+            return col;
+        const newSelected = !col.selected;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+        return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Toggle a sub-item's selection and update parent state
+ */
+export const toggleSubItem = (columns, columnName, subItemName) => {
+    return columns.map((col) => {
+        var _a, _b;
+        if (col.name !== columnName)
+            return col;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (item.name === subItemName ? Object.assign(Object.assign({}, item), { selected: !item.selected }) : item));
+        const hasSelectedChildren = (_b = updatedMenuItems === null || updatedMenuItems === void 0 ? void 0 : updatedMenuItems.some((item) => item.selected)) !== null && _b !== void 0 ? _b : false;
+        return Object.assign(Object.assign({}, col), { menuItems: updatedMenuItems, selected: hasSelectedChildren });
+    });
+};
+/**
+ * Select or deselect all columns (except date)
+ */
+export const toggleAllColumns = (columns, selectAll) => {
+    return columns.map((col) => {
+        var _a;
+        if (isDateColumn(col.name))
+            return col;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: selectAll })));
+        return Object.assign(Object.assign({}, col), { selected: selectAll, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Check if all non-date columns are selected
+ */
+export const areAllColumnsSelected = (columns) => {
+    const nonDateColumns = columns.filter((col) => !isDateColumn(col.name));
+    return (nonDateColumns.length > 0 &&
+        nonDateColumns.every((col) => {
+            var _a;
+            if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+                // For columns with menuItems, all items must be selected
+                return col.menuItems.every((item) => item.selected);
+            }
+            return col.selected;
+        }));
+};
+/**
+ * Check if some (but not all) non-date columns are selected
+ */
+export const areSomeColumnsSelected = (columns, allSelected) => {
+    const nonDateColumns = columns.filter((col) => !isDateColumn(col.name));
+    const hasAnySelected = nonDateColumns.some((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+            return col.menuItems.some((item) => item.selected);
+        }
+        return col.selected;
+    });
+    return hasAnySelected && !allSelected;
+};
+/**
+ * Validate template name
+ */
+export const isValidTemplateName = (name, maxLength) => {
+    return name.trim().length > 0 && name.length <= maxLength;
+};
+/**
+ * Deep clone columns array with all nested properties
+ */
+export const deepCloneColumns = (columns) => {
+    return columns.map((col) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false }));
+            }) }));
+    });
+};
+/**
+ * Toggle a single column's selection state
+ */
+export const toggleSingleColumn = (columns, columnName) => {
+    return columns.map((col) => {
+        var _a;
+        if (col.name !== columnName)
+            return col;
+        if (isDateColumn(col.name)) {
+            return Object.assign(Object.assign({}, col), { selected: true });
+        }
+        const newSelected = !col.selected;
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+        return Object.assign(Object.assign({}, col), { selected: newSelected, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Get submenu items for a view menu item
+ * Always includes the date column at the beginning
+ */
+export const getSubmenuItems = (item, defaultColumns) => {
+    var _a;
+    let columns = [];
+    if (item.isCustom && ((_a = item.submenu) === null || _a === void 0 ? void 0 : _a.length)) {
+        columns = item.submenu;
+    }
+    else if (item.id === 'default') {
+        columns = defaultColumns;
+    }
+    else {
+        columns = item.submenu || [];
+    }
+    // Always include date column at the beginning if it's not already present
+    const hasDateColumn = columns.some((col) => col.name.toLowerCase() === 'date');
+    if (!hasDateColumn) {
+        const dateColumn = {
+            name: 'date',
+            label: 'Date',
+            selected: true,
+        };
+        return [dateColumn, ...columns];
+    }
+    // Ensure date column is first
+    const dateColumnIndex = columns.findIndex((col) => col.name.toLowerCase() === 'date');
+    if (dateColumnIndex > 0) {
+        const dateColumn = columns[dateColumnIndex];
+        const otherColumns = columns.filter((col) => col.name.toLowerCase() !== 'date');
+        return [dateColumn, ...otherColumns];
+    }
+    return columns;
+};
+/**
+ * Check if a view menu item has submenu
+ */
+export const hasSubmenu = (item, defaultColumns) => {
+    return getSubmenuItems(item, defaultColumns).length > 0;
+};
+/**
+ * Check if all columns in current state are selected
+ */
+export const areAllCurrentColumnsSelected = (columns) => {
+    if (columns.length === 0)
+        return false;
+    return columns.every((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+            // For columns with menuItems, all items must be selected
+            return col.menuItems.every((item) => item.selected);
+        }
+        return col.selected;
+    });
+};
+/**
+ * Check if some (but not all) columns in current state are selected
+ */
+export const areSomeCurrentColumnsSelected = (columns, allSelected) => {
+    if (columns.length === 0)
+        return false;
+    const hasAny = columns.some((col) => {
+        var _a;
+        if ((_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.length) {
+            return col.menuItems.some((item) => item.selected);
+        }
+        return col.selected;
+    });
+    return hasAny && !allSelected;
+};
+/**
+ * Toggle all columns selection (select all or unselect all)
+ */
+export const toggleAllCurrentColumns = (columns, shouldSelect) => {
+    return columns.map((col) => {
+        var _a;
+        if (isDateColumn(col.name)) {
+            return Object.assign(Object.assign({}, col), { selected: true });
+        }
+        const updatedMenuItems = (_a = col.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: shouldSelect })));
+        return Object.assign(Object.assign({}, col), { selected: shouldSelect, menuItems: updatedMenuItems });
+    });
+};
+/**
+ * Normalize columns by converting undefined selected values to false for consistent comparison
+ */
+export const normalizeColumnsSelected = (columns) => {
+    return columns.map((col) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, col), { selected: (_a = col.selected) !== null && _a !== void 0 ? _a : false, menuItems: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                var _a;
+                return (Object.assign(Object.assign({}, item), { selected: (_a = item.selected) !== null && _a !== void 0 ? _a : false }));
+            }) }));
+    });
+};
+/**
+ * Compare two columns arrays to check if they are equal (same order, same selection states)
+ */
+export const areColumnsEqual = (cols1, cols2) => {
+    if (cols1.length !== cols2.length)
+        return false;
+    const normalizedCols1 = normalizeColumnsSelected(cols1);
+    const normalizedCols2 = normalizeColumnsSelected(cols2);
+    for (let i = 0; i < normalizedCols1.length; i++) {
+        const col1 = normalizedCols1[i];
+        const col2 = normalizedCols2[i];
+        if (col1.name !== col2.name)
+            return false;
+        if (col1.selected !== col2.selected)
+            return false;
+        if (col1.menuItems && col2.menuItems) {
+            if (col1.menuItems.length !== col2.menuItems.length)
+                return false;
+            for (let j = 0; j < col1.menuItems.length; j++) {
+                const item1 = col1.menuItems[j];
+                const item2 = col2.menuItems[j];
+                if (item1.name !== item2.name)
+                    return false;
+                if (item1.selected !== item2.selected) {
+                    return false;
+                }
+            }
+        }
+        else if (col1.menuItems || col2.menuItems) {
+            return false;
+        }
+    }
+    return true;
+};

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

@@ -6,3 +6,4 @@ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
 export { default as FiltersRow } from './FiltersRow';
 export * from './style';
 export * from './type';
+export type { Template, LayoutSection, ViewMenuItem } from './TableView/types';

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
 import { AvailableStatus } from '../StatusBar/type';
 import { PartialExcept } from '../../types/index.js';
+import type { ViewMenuItem, LayoutSection, Template } from './TableView/types';
 type ViewsOptions = {
     default: {};
     developer: {};
@@ -22,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;
@@ -44,6 +45,19 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         id: string;
         label: string;
     }) => void;
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    templates?: Template[];
+    lang?: string;
     onToggleTextButtonClick?: () => void;
     children?: ReactNode;
     calendarGroupBy?: string;

package/build/components/TableReports/components/DownloadButton/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableReports/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 type ExportButtonProps = {
     notificationState?: {
         success: boolean;

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, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+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 const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

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

@@ -15,7 +15,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 import InfiniteLoader from 'react-window-infinite-loader';
 import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../constants/index.js';
 import { useDelayToSetValue } from '../../../hooks/index.js';
-import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError, getProcessedColumns } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import TableHeader from '../components/TableHeader';
 import TableLastItem from '../components/TableLastItem';
@@ -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, }) {
+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, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -58,7 +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 shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    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 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/components/VirtualTables/components/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/constants/assets.d.ts

@@ -339,6 +339,7 @@ export declare const TAP3DSPROVIDERIcon: string;
 export declare const greyPlusIcon: string;
 export declare const greyMinusIcon: string;
 export declare const noPreviewIcon: string;
+export declare const editIcon: string;
 export declare const viewInvoiceIcon: string;
 export declare const checkoutStatusIcon: string;
 export declare const checkoutStatusBlueIcon: string;

package/build/constants/assets.js

@@ -345,6 +345,7 @@ export const TAP3DSPROVIDERIcon = `${lightUrl}/provider/TAP3DS.svg`;
 export const greyPlusIcon = `${lightUrl}/greyPlusIcon.svg`;
 export const greyMinusIcon = `${lightUrl}/greyMinusIcon.svg`;
 export const noPreviewIcon = `${lightUrl}/noPreviewIcon.svg`;
+export const editIcon = `${lightUrl}/other/editIcon.svg`;
 export const viewInvoiceIcon = `${appBaseUrl}/viewInvoice.svg`;
 export const checkoutStatusIcon = `${appBaseUrl}/checkoutStatus.svg`;
 export const checkoutStatusBlueIcon = `${appBaseUrl}/checkStatusOutBlue.svg`;

package/build/types/table.d.ts

@@ -116,6 +116,7 @@ export interface IVirtualTable<R = any> {
     headerProps?: TableHeadProps;
     isLoading?: boolean;
     isFetchingNextPage?: boolean;
+    defaultSkeleton?: boolean;
     rowProps?: TableRowProps & {
         onRowClick?: (row: R, index: number) => void;
     };

package/build/utils/index.d.ts

@@ -45,3 +45,4 @@ export * from './boolean';
 export * from './columnResizeStorage';
 export * from './timezone';
 export * from './merchantSource';
+export * from './skeletonColumns';

package/build/utils/index.js

@@ -45,3 +45,4 @@ export * from './boolean';
 export * from './columnResizeStorage';
 export * from './timezone';
 export * from './merchantSource';
+export * from './skeletonColumns';

package/build/utils/skeletonColumns.d.ts

@@ -0,0 +1,4 @@
+import type { IColumnProps } from '../types/index.js';
+export declare const DEFAULT_SKELETON_WIDTHS: string[];
+export declare const generateSkeletonColumns: (staticWidths?: string[]) => IColumnProps[];
+export declare const getProcessedColumns: <T = any>(columns: readonly IColumnProps<T>[], isLoading: boolean, defaultSkeleton: boolean) => IColumnProps<T>[];

package/build/utils/skeletonColumns.js

@@ -0,0 +1,17 @@
+export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
+export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
+    return staticWidths.map((width, index) => ({
+        id: `skeleton-col-${index}`,
+        header: '',
+        width,
+        order: index,
+        hidden: false,
+        sortable: false,
+    }));
+};
+export const getProcessedColumns = (columns, isLoading, defaultSkeleton) => {
+    if (defaultSkeleton && isLoading) {
+        return generateSkeletonColumns();
+    }
+    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.376",
-  "testVersion": 0,
+  "version": "0.1.377-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -78,6 +78,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.1",
     "@mui/material": "^5.12.3",
+    "@tap-payments/os-micro-frontend-shared": "file:.yalc/@tap-payments/os-micro-frontend-shared",
     "@uiw/react-json-view": "^2.0.0-alpha.16",
     "axios": "^1.4.0",
     "color": "^5.0.0",
@@ -164,4 +165,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}