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

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 (3) hide show
  1. package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js +1 -1
  2. package/build/components/VirtualTable/style.js +6 -6
  3. package/package.json +1 -1
package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js CHANGED
@@ -110,7 +110,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
110
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: {
111
111
  width: '100%',
112
112
  minWidth: 'fit-content',
113
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) })), _jsx("div", { style: { height: '15px', flexShrink: 0 } })] })) })));
113
+ } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
114
114
  };
115
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%',
package/build/components/VirtualTable/style.js CHANGED
@@ -91,21 +91,21 @@ 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
- transition: 'scrollbar-width 0.3s ease-in-out',
97
- },
94
+ scrollbarWidth: scrollable ? 'auto' : 'none',
98
95
  '&::-webkit-scrollbar': {
99
96
  display: 'block',
100
- height: '9px',
97
+ height: '13px',
101
98
  },
102
99
  '&::-webkit-scrollbar-track': {
103
100
  background: 'white',
104
- height: '7px',
101
+ border: '1px solid #F2F2F2',
105
102
  },
106
103
  '&::-webkit-scrollbar-thumb': {
107
104
  backgroundColor: '#DADCDF',
108
105
  borderRadius: '32px',
106
+ border: '2px solid transparent',
107
+ backgroundClip: 'content-box',
108
+ minHeight: '20px',
109
109
  },
110
110
  }));
111
111
  export const ActionIcon = styled(motion.img)(() => ({
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-v2",
4
+ "version": "0.0.84-sheet-view-scroll-v4",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",