@tap-payments/os-micro-frontend-shared 0.0.84-sheet-view-scroll-v8 → 0.0.84

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.
Files changed (10) hide show
  1. package/build/components/SearchButton/styles.d.ts +1 -1
  2. package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -1
  3. package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts +1 -1
  4. package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -1
  5. package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +2 -4
  6. package/build/components/VirtualTable/SheetView/style.js +0 -1
  7. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +2 -2
  8. package/build/components/VirtualTable/style.d.ts +1 -2
  9. package/build/components/VirtualTable/style.js +2 -20
  10. package/package.json +1 -1
package/build/components/SearchButton/styles.d.ts CHANGED
@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
554
554
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
555
555
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
556
556
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
557
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
558
557
  src?: string | undefined;
559
558
  alt?: string | undefined;
559
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
560
560
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
561
561
  useMap?: string | undefined;
562
562
  loading?: "eager" | "lazy" | undefined;
package/build/components/TableCells/CustomCells/ActionCell/style.d.ts CHANGED
@@ -269,9 +269,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
269
269
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
270
270
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
271
271
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
272
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
273
272
  src?: string | undefined;
274
273
  alt?: string | undefined;
274
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
275
275
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
276
276
  useMap?: string | undefined;
277
277
  loading?: "eager" | "lazy" | undefined;
package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts CHANGED
@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
273
273
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
274
274
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
275
275
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
276
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
277
276
  src?: string | undefined;
278
277
  alt?: string | undefined;
278
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
279
279
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
280
280
  useMap?: string | undefined;
281
281
  loading?: "eager" | "lazy" | undefined;
package/build/components/TableCells/CustomCells/StatusCell/style.d.ts CHANGED
@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
262
262
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
263
263
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
264
264
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
265
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
266
265
  src?: string | undefined;
267
266
  alt?: string | undefined;
267
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
268
268
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
269
269
  useMap?: string | undefined;
270
270
  loading?: "eager" | "lazy" | undefined;
package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js CHANGED
@@ -79,8 +79,6 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
79
79
  };
80
80
  return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
81
81
  overflowX: isPinned ? 'hidden' : 'auto',
82
- paddingBottom: '12px',
83
- backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
84
82
  } }, { children: ListItemWrapper }))) })) })));
85
83
  }, [
86
84
  itemsCount,
@@ -109,12 +107,12 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
109
107
  const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
110
108
  if (columnsData.length === 0)
111
109
  return null;
112
- return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: false, 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 })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
110
+ return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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 })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
113
111
  width: '100%',
114
112
  minWidth: 'fit-content',
115
113
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
116
114
  };
117
- return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
115
+ return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { 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 }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
118
116
  width: '100%',
119
117
  minWidth: 'fit-content',
120
118
  } }, { 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])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
package/build/components/VirtualTable/SheetView/style.js CHANGED
@@ -86,7 +86,6 @@ export const MainTableWrapper = styled('div', {
86
86
  marginLeft: hasPinnedStart ? '0' : '32px',
87
87
  marginRight: hasPinnedEnd ? '0' : '32px',
88
88
  position: 'relative',
89
- scrollbarWidth: 'auto',
90
89
  }));
91
90
  export const UnpinnedTableHeaderWrapper = styled('div')({
92
91
  flexShrink: 0,
package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js CHANGED
@@ -56,11 +56,11 @@ function ListItemWrapper(_a) {
56
56
  const lastRowContent = _jsx(LastRowContent, { isLoadingRow: isLoadingRow });
57
57
  const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
58
58
  if (isPinned && isLastRow) {
59
- return _jsx(Box, { sx: { minHeight: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT, backgroundColor: '#F6F8FACC' } });
59
+ return _jsx(Box, { sx: { height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT, backgroundColor: '#F6F8FACC' } });
60
60
  }
61
61
  if (isLastRow) {
62
62
  return (_jsx(Box, Object.assign({ sx: {
63
- minHeight: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
63
+ height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
64
64
  display: 'flex',
65
65
  justifyContent: 'center',
66
66
  alignItems: 'center',
package/build/components/VirtualTable/style.d.ts CHANGED
@@ -41,7 +41,6 @@ export declare const StyledTableBox: import("@emotion/styled").StyledComponent<i
41
41
  }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
42
42
  showBackgroundColor: boolean;
43
43
  showNoDataView: boolean;
44
- scrollable?: boolean | undefined;
45
44
  }, {}, {}>;
46
45
  export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
47
46
  width?: string | number | undefined;
@@ -306,9 +305,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
306
305
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
307
306
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
308
307
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
309
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
310
308
  src?: string | undefined;
311
309
  alt?: string | undefined;
310
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
312
311
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
313
312
  useMap?: string | undefined;
314
313
  loading?: "eager" | "lazy" | undefined;
package/build/components/VirtualTable/style.js CHANGED
@@ -82,8 +82,8 @@ export const StyledTableRow = styled(MUITableRow, {
82
82
  },
83
83
  }))))));
84
84
  export const StyledTableBox = styled(Box, {
85
- shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView' && prop !== 'scrollable',
86
- })(({ theme, showBackgroundColor, showNoDataView, scrollable }) => ({
85
+ shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView',
86
+ })(({ theme, showBackgroundColor, showNoDataView }) => ({
87
87
  position: 'relative',
88
88
  backgroundColor: showBackgroundColor ? theme.palette.background.default : 'transparent',
89
89
  height: '100%',
@@ -91,24 +91,6 @@ export const StyledTableBox = styled(Box, {
91
91
  paddingBottom: showBackgroundColor ? '52px' : '0',
92
92
  display: 'flex',
93
93
  flexDirection: 'column',
94
- '&:hover': {
95
- scrollbarWidth: scrollable ? 'auto' : 'none',
96
- },
97
- '&::-webkit-scrollbar': {
98
- display: 'block',
99
- height: '13px',
100
- },
101
- '&::-webkit-scrollbar-track': {
102
- background: 'white',
103
- border: '1px solid #F2F2F2',
104
- },
105
- '&::-webkit-scrollbar-thumb': {
106
- backgroundColor: '#DADCDF',
107
- borderRadius: '32px',
108
- border: '3px solid transparent',
109
- backgroundClip: 'content-box',
110
- minHeight: '20px',
111
- },
112
94
  }));
113
95
  export const ActionIcon = styled(motion.img)(() => ({
114
96
  width: '24px',
package/package.json CHANGED
@@ -1,7 +1,7 @@
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.0.84-sheet-view-scroll-v8",
4
+ "version": "0.0.84",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",