@tap-payments/os-micro-frontend-shared 0.1.1 → 0.1.2-test.1
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.
- package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts +1 -1
- package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js +4 -4
- package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts +1 -1
- package/build/components/VirtualTables/VirtualTable/VirtualTable.js +2 -2
- package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.d.ts +1 -1
- package/build/components/VirtualTables/components/style.d.ts +0 -1
- package/build/components/VirtualTables/components/style.js +3 -4
- package/build/types/apps.d.ts +0 -1
- package/build/types/table.d.ts +0 -1
- package/package.json +3 -3
|
@@ -5,6 +5,6 @@ interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
|
|
|
5
5
|
isPinnable?: boolean;
|
|
6
6
|
clearBackdropVisibilityTimeout?: number;
|
|
7
7
|
}
|
|
8
|
-
declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex,
|
|
8
|
+
declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
|
|
9
9
|
declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
|
|
10
10
|
export default _default;
|
|
@@ -45,7 +45,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
|
|
|
45
45
|
containerHeight,
|
|
46
46
|
rowHeight,
|
|
47
47
|
}));
|
|
48
|
-
function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex,
|
|
48
|
+
function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
|
|
49
49
|
const theme = useTheme();
|
|
50
50
|
const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
|
|
51
51
|
const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
|
|
@@ -166,13 +166,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
166
166
|
const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
|
|
167
167
|
if (columnsData.length === 0)
|
|
168
168
|
return null;
|
|
169
|
-
return (_jsx(Wrapper, { children: _jsxs(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-
|
|
169
|
+
return (_jsx(Wrapper, { children: _jsxs(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: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
170
170
|
width: '100%',
|
|
171
171
|
minWidth: 'fit-content',
|
|
172
172
|
overflowX: 'hidden',
|
|
173
173
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: 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-
|
|
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
176
|
marginLeft: '28px',
|
|
177
177
|
maxHeight: 'calc(100vh - 300px)',
|
|
178
178
|
overflow: 'auto',
|
|
@@ -186,7 +186,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
|
|
|
186
186
|
height: 'auto',
|
|
187
187
|
display: 'flex',
|
|
188
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-
|
|
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({ isSheetView: true, "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 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
190
190
|
width: '100%',
|
|
191
191
|
minWidth: 'fit-content',
|
|
192
192
|
} }, { 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))] }));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { IVirtualTable } from '../../../types/index.js';
|
|
3
|
-
declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex,
|
|
3
|
+
declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
|
|
5
5
|
export default _default;
|
|
@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
|
|
|
34
34
|
areAllRowsLoaded,
|
|
35
35
|
isSheetView,
|
|
36
36
|
}));
|
|
37
|
-
function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex,
|
|
37
|
+
function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
|
|
38
38
|
var _a;
|
|
39
39
|
const theme = useTheme();
|
|
40
40
|
const onPointerDown = (e) => {
|
|
@@ -86,7 +86,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
|
|
|
86
86
|
scrollToIndex,
|
|
87
87
|
]);
|
|
88
88
|
const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
|
|
89
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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-
|
|
89
|
+
return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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({ isSheetView: isSheetView, "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
|
|
90
90
|
width: '100%',
|
|
91
91
|
minWidth: 'fit-content',
|
|
92
92
|
} }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode, ReactElement } from 'react';
|
|
2
2
|
import type { IVirtualTable } from '../../../types/index.js';
|
|
3
|
-
export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHeader' | 'dimensions' | '
|
|
3
|
+
export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHeader' | 'dimensions' | 'columns'> {
|
|
4
4
|
tableHeader?: ReactNode;
|
|
5
5
|
renderCardComponent: (rows: any) => ReactElement | null;
|
|
6
6
|
cardLoadingComponent: ReactNode;
|
|
@@ -40,7 +40,6 @@ export declare const StyledTableRow: import("@emotion/styled").StyledComponent<i
|
|
|
40
40
|
export declare const StyledTableBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
41
41
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
42
42
|
}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
|
|
43
|
-
showBackgroundColor: boolean;
|
|
44
43
|
showNoDataView: boolean;
|
|
45
44
|
scrollable?: boolean | undefined;
|
|
46
45
|
}, {}, {}>;
|
|
@@ -87,13 +87,12 @@ export const StyledTableRow = styled(MUITableRow, {
|
|
|
87
87
|
},
|
|
88
88
|
}))))));
|
|
89
89
|
export const StyledTableBox = styled(Box, {
|
|
90
|
-
shouldForwardProp: (prop) => prop !== '
|
|
91
|
-
})(({ theme,
|
|
90
|
+
shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'scrollable',
|
|
91
|
+
})(({ theme, showNoDataView, scrollable }) => ({
|
|
92
92
|
position: 'relative',
|
|
93
|
-
backgroundColor:
|
|
93
|
+
backgroundColor: theme.palette.background.default,
|
|
94
94
|
height: '100%',
|
|
95
95
|
overflowX: showNoDataView ? 'hidden' : 'scroll',
|
|
96
|
-
paddingBottom: showBackgroundColor ? '52px' : '0',
|
|
97
96
|
display: 'flex',
|
|
98
97
|
flexDirection: 'column',
|
|
99
98
|
'&:hover': {
|
package/build/types/apps.d.ts
CHANGED
package/build/types/table.d.ts
CHANGED
|
@@ -116,7 +116,6 @@ export interface IVirtualTable<R = any> {
|
|
|
116
116
|
loadMoreItems?: () => Promise<unknown>;
|
|
117
117
|
triggerDataRefetch: () => Promise<unknown>;
|
|
118
118
|
scrollToIndex?: number;
|
|
119
|
-
showBackgroundColor: boolean;
|
|
120
119
|
areAllRowsLoaded?: boolean;
|
|
121
120
|
tableBodyStyles?: React.CSSProperties;
|
|
122
121
|
isTextShown?: boolean;
|
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.1",
|
|
5
|
-
"testVersion":
|
|
4
|
+
"version": "0.1.2-test.1",
|
|
5
|
+
"testVersion": 1,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "build/index.js",
|
|
8
8
|
"module": "build/index.js",
|
|
@@ -131,4 +131,4 @@
|
|
|
131
131
|
"publishConfig": {
|
|
132
132
|
"registry": "https://registry.npmjs.org/"
|
|
133
133
|
}
|
|
134
|
-
}
|
|
134
|
+
}
|