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

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,9 @@ 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]);
+    // Process columns: use skeleton columns if defaultSkeleton is enabled and loading
+    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/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,19 @@
+import type { IColumnProps } from '../types/index.js';
+/**
+ * Default static widths for skeleton columns (10 columns with varied widths)
+ */
+export declare const DEFAULT_SKELETON_WIDTHS: string[];
+/**
+ * Generates skeleton columns with static widths for loading state
+ * @param staticWidths Optional array of static widths to use (defaults to DEFAULT_SKELETON_WIDTHS)
+ * @returns Array of skeleton column definitions
+ */
+export declare const generateSkeletonColumns: (staticWidths?: string[]) => IColumnProps[];
+/**
+ * Returns skeleton columns if loading with defaultSkeleton enabled, otherwise returns original columns
+ * @param columns Original columns array
+ * @param isLoading Loading state
+ * @param defaultSkeleton Whether to use default skeleton
+ * @returns Processed columns array
+ */
+export declare const getProcessedColumns: <T = any>(columns: readonly IColumnProps<T>[], isLoading: boolean, defaultSkeleton: boolean) => IColumnProps<T>[];

package/build/utils/skeletonColumns.js

@@ -0,0 +1,32 @@
+/**
+ * Default static widths for skeleton columns (10 columns with varied widths)
+ */
+export const DEFAULT_SKELETON_WIDTHS = ['120px', '180px', '100px', '150px', '200px', '140px', '160px', '110px', '190px', '130px'];
+/**
+ * Generates skeleton columns with static widths for loading state
+ * @param staticWidths Optional array of static widths to use (defaults to DEFAULT_SKELETON_WIDTHS)
+ * @returns Array of skeleton column definitions
+ */
+export const generateSkeletonColumns = (staticWidths = DEFAULT_SKELETON_WIDTHS) => {
+    return staticWidths.map((width, index) => ({
+        id: `skeleton-col-${index}`,
+        header: '',
+        width,
+        order: index,
+        hidden: false,
+        sortable: false,
+    }));
+};
+/**
+ * Returns skeleton columns if loading with defaultSkeleton enabled, otherwise returns original columns
+ * @param columns Original columns array
+ * @param isLoading Loading state
+ * @param defaultSkeleton Whether to use default skeleton
+ * @returns Processed columns array
+ */
+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-test.1-test.2-test.3-test.4-test.5",
-  "testVersion": 5,
+  "version": "0.1.376-test.1-test.2-test.3-test.4-test.5-test.6",
+  "testVersion": 6,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",