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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -18,13 +18,13 @@ import { useDelayToSetValue } from '../../../hooks/index.js';
18
18
  import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
19
19
  import TableFooter from '../components/TableFooter/TableFooter';
20
20
  import TableNoData from '../components/TableNoData';
21
- import { SheetViewTableNoData } from './components';
22
21
  import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
23
22
  import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
24
23
  import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
25
24
  import SheetViewTableHeader from './components/SheetViewTableHeader';
26
25
  import { usePinnedColumns } from './hooks/usePinnedColumns';
27
26
  import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
27
+ import SheetViewTableLoading from './components/SheetViewTableLoading';
28
28
  const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
29
29
  columns,
30
30
  isLoading,
@@ -170,23 +170,16 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
170
170
  width: '100%',
171
171
  minWidth: 'fit-content',
172
172
  overflowX: 'hidden',
173
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
173
+ } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
174
174
  };
175
- return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true, sx: {
176
- marginLeft: '28px',
177
- maxHeight: 'calc(100vh - 300px)',
178
- overflow: 'auto',
179
- } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
180
- width: '100%',
181
- minWidth: 'fit-content',
182
- height: 'auto',
183
- display: 'flex',
184
- flexDirection: 'column',
185
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
186
- height: 'auto',
187
- display: 'flex',
188
- flexDirection: 'column',
189
- } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tablePosition: "scrollable", hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
175
+ return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tablePosition: "scrollable", hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
176
+ width: '100%',
177
+ minWidth: 'fit-content',
178
+ } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
179
+ height: '100%',
180
+ display: 'flex',
181
+ flexDirection: 'column',
182
+ } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tablePosition: "scrollable", hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
190
183
  width: '100%',
191
184
  minWidth: 'fit-content',
192
185
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
@@ -6,7 +6,8 @@ interface ISheetViewTableLoadingProps {
6
6
  animationType?: AnimationType;
7
7
  isLoading?: boolean;
8
8
  rowsCount?: number;
9
+ isPinned?: boolean;
9
10
  }
10
- declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
11
+ declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
11
12
  declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableLoading>;
12
13
  export default _default;
@@ -4,17 +4,17 @@ import { styled } from '@mui/material/styles';
4
4
  import uniqueId from 'lodash/uniqueId';
5
5
  import { calculateMaxAllowedRows } from '../../../../utils/index.js';
6
6
  import SheetViewTableRowLoading from './SheetViewTableRowLoading';
7
- const Wrapper = styled('section')(({ isLoaded = false }) => ({
7
+ const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
8
8
  overflow: 'hidden',
9
- paddingInline: isLoaded ? '32px' : '0px',
10
- backgroundColor: isLoaded ? 'rgba(255, 255, 255, 0.60)' : 'none',
11
- filter: isLoaded ? 'blur(8px)' : 'none',
12
- marginTop: isLoaded ? '1rem' : '0',
9
+ paddingInline: isLoaded && !isPinned ? '32px' : '0px',
10
+ backgroundColor: isLoaded && !isPinned ? 'rgba(255, 255, 255, 0.60)' : 'none',
11
+ filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
12
+ marginTop: isLoaded && !isPinned ? '1rem' : '0',
13
13
  height: 'auto',
14
14
  }));
15
- function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount }) {
15
+ function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, }) {
16
16
  let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
17
17
  maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
18
- return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
18
+ return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
19
19
  }
20
20
  export default memo(SheetViewTableLoading);
@@ -8,7 +8,7 @@ import { StyledSolidBackground } from '../../components/style';
8
8
  function SheetViewTableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }) {
9
9
  let content;
10
10
  if (tableLoading) {
11
- content = (_jsx(StyledSolidBackground, Object.assign({ "data-testid": "SheetViewVirtualTable_SolidBackground" }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: orderedColumns, isLoading: true }) })));
11
+ content = (_jsx(StyledSolidBackground, Object.assign({ "data-testid": "SheetViewVirtualTable_SolidBackground" }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: orderedColumns, isLoading: true, isPinned: false }) })));
12
12
  }
13
13
  else if (isTimeoutError) {
14
14
  content = (_jsx(ErrorList, { "data-testid": "SheetViewVirtualTable_ErrorList_timeoutError", shouldMinimizeWidth: true, heading: "timeOut", message: "yourRequestOutPleaseTryAgain", triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.11-test.2-test.3",
5
- "testVersion": 3,
4
+ "version": "0.1.11-test.2-test.3-test.4",
5
+ "testVersion": 4,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",