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

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 (9) 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 +1 -1
  6. package/build/components/VirtualTable/SheetView/style.js +11 -3
  7. package/build/components/VirtualTable/style.d.ts +2 -1
  8. package/build/components/VirtualTable/style.js +15 -2
  9. 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;
557
558
  src?: string | undefined;
558
559
  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;
272
273
  src?: string | undefined;
273
274
  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;
276
277
  src?: string | undefined;
277
278
  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;
265
266
  src?: string | undefined;
266
267
  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
@@ -112,7 +112,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
112
112
  minWidth: 'fit-content',
113
113
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
114
114
  };
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: {
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, 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: {
116
116
  width: '100%',
117
117
  minWidth: 'fit-content',
118
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
@@ -57,15 +57,20 @@ const PinnedColumnBase = styled('div', {
57
57
  flexDirection: 'column',
58
58
  position: 'relative',
59
59
  backgroundColor: theme.palette.primary.light,
60
- border: '1px solid #F2F2F2',
60
+ borderTop: '1px solid #F2F2F2',
61
+ borderBottom: '1px solid #F2F2F2',
61
62
  }));
62
63
  export const PinnedStartColumnWrapper = styled(PinnedColumnBase)({
63
64
  marginLeft: '32px',
64
65
  boxShadow: '4px 0px 24px 0px #00000014',
66
+ borderLeft: '1px solid #F2F2F2',
67
+ borderRight: 'none',
65
68
  });
66
69
  export const PinnedEndColumnWrapper = styled(PinnedColumnBase)({
67
70
  marginRight: '32px',
68
71
  boxShadow: '-4px 0px 24px 0px #00000014',
72
+ borderRight: '1px solid #F2F2F2',
73
+ borderLeft: 'none',
69
74
  });
70
75
  export const MainTableWrapper = styled('div', {
71
76
  shouldForwardProp: (prop) => prop !== 'hasPinnedStart' && prop !== 'hasPinnedEnd',
@@ -74,13 +79,16 @@ export const MainTableWrapper = styled('div', {
74
79
  minWidth: 0,
75
80
  display: 'flex',
76
81
  flexDirection: 'column',
77
- border: '1px solid #F2F2F2',
82
+ borderTop: '1px solid #F2F2F2',
83
+ borderBottom: '1px solid #F2F2F2',
84
+ borderLeft: hasPinnedStart ? 'none' : '1px solid #F2F2F2',
85
+ borderRight: hasPinnedEnd ? 'none' : '1px solid #F2F2F2',
78
86
  marginLeft: hasPinnedStart ? '0' : '32px',
79
87
  marginRight: hasPinnedEnd ? '0' : '32px',
80
88
  position: 'relative',
89
+ scrollbarWidth: 'auto',
81
90
  }));
82
91
  export const UnpinnedTableHeaderWrapper = styled('div')({
83
92
  flexShrink: 0,
84
- borderBottom: '1px solid #E0E0E0',
85
93
  height: 'auto',
86
94
  });
package/build/components/VirtualTable/style.d.ts CHANGED
@@ -41,6 +41,7 @@ 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;
44
45
  }, {}, {}>;
45
46
  export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
46
47
  width?: string | number | undefined;
@@ -305,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
305
306
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
306
307
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
307
308
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
309
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
308
310
  src?: string | undefined;
309
311
  alt?: string | undefined;
310
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
311
312
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
312
313
  useMap?: string | undefined;
313
314
  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',
86
- })(({ theme, showBackgroundColor, showNoDataView }) => ({
85
+ shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView' && prop !== 'scrollable',
86
+ })(({ theme, showBackgroundColor, showNoDataView, scrollable }) => ({
87
87
  position: 'relative',
88
88
  backgroundColor: showBackgroundColor ? theme.palette.background.default : 'transparent',
89
89
  height: '100%',
@@ -91,6 +91,19 @@ export const StyledTableBox = styled(Box, {
91
91
  paddingBottom: showBackgroundColor ? '52px' : '0',
92
92
  display: 'flex',
93
93
  flexDirection: 'column',
94
+ scrollbarWidth: scrollable ? 'auto' : 'none',
95
+ '&::-webkit-scrollbar': {
96
+ display: 'block',
97
+ height: '8px',
98
+ },
99
+ '&::-webkit-scrollbar-track': {
100
+ background: '#FFFFFF',
101
+ height: '13px',
102
+ },
103
+ '&::-webkit-scrollbar-thumb': {
104
+ backgroundColor: '#DADCDF',
105
+ borderRadius: '32px',
106
+ },
94
107
  }));
95
108
  export const ActionIcon = styled(motion.img)(() => ({
96
109
  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.83",
4
+ "version": "0.0.84-sheet-view-scroll-v1",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",