@tap-payments/os-micro-frontend-shared 0.0.69 → 0.0.70-sheet-view-table-row-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 (24) hide show
  1. package/build/components/SearchButton/styles.d.ts +1 -1
  2. package/build/components/StatusButton/StatusButton.js +4 -1
  3. package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -1
  4. package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.js +2 -2
  5. package/build/components/TableCells/CustomCells/BrandsCell/constants.js +3 -3
  6. package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts +1 -1
  7. package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -1
  8. package/build/components/VirtualTable/VirtualTable.d.ts +1 -1
  9. package/build/components/VirtualTable/VirtualTable.js +11 -7
  10. package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js +1 -1
  11. package/build/components/VirtualTable/components/TableHeader.d.ts +2 -1
  12. package/build/components/VirtualTable/components/TableHeader.js +12 -11
  13. package/build/components/VirtualTable/components/TableRow.d.ts +2 -1
  14. package/build/components/VirtualTable/components/TableRow.js +3 -3
  15. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts +1 -1
  16. package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js +5 -5
  17. package/build/components/VirtualTable/style.d.ts +5 -1
  18. package/build/components/VirtualTable/style.js +15 -27
  19. package/build/constants/assets.d.ts +3 -0
  20. package/build/constants/assets.js +3 -0
  21. package/build/constants/table.d.ts +1 -0
  22. package/build/constants/table.js +1 -0
  23. package/build/types/table.d.ts +1 -0
  24. 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/StatusButton/StatusButton.js CHANGED
@@ -40,12 +40,15 @@ function StatusButton(_a) {
40
40
  }, sx: Object.assign({}, (hasDropdown && {
41
41
  paddingInlineEnd: '27px',
42
42
  })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && (_jsx(ChevronContainer, Object.assign({ onClick: (e) => {
43
+ if (showDropdownIcon) {
44
+ return;
45
+ }
43
46
  e.stopPropagation();
44
47
  e.preventDefault();
45
48
  if (hasDropdown) {
46
49
  setAnchorEl(buttonRef.current);
47
50
  }
48
- } }, { children: dropdownIcon })))] }) })), open && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_c = (dropdownOptions || [])) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
51
+ } }, { children: dropdownIcon })))] }) })), open && !showDropdownIcon && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_c = (dropdownOptions || [])) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
49
52
  var _a;
50
53
  (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
51
54
  setLastActiveStatus(item.status);
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/ApplicationStatusCell/ApplicationStatusCell.js CHANGED
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { acceptanceAppIcon, acceptanceDisabledRoundedIcon, payoutsAppIcon, payoutDisabledRoundedIcon } from '../../../../constants/index.js';
13
+ import { acceptanceDisabledRoundedIcon, payoutDisabledRoundedIcon, payoutEnabledIcon, acceptanceEnabledIcon } from '../../../../constants/index.js';
14
14
  import Tooltip from '../../../Tooltip';
15
15
  import TableCell from '../../TableCell';
16
16
  import { AppsWrapper, IconWrapper } from './style';
@@ -18,5 +18,5 @@ export default function ApplicationStatusCell(_a) {
18
18
  var { acceptance, payout } = _a, props = __rest(_a, ["acceptance", "payout"]);
19
19
  const isAcceptanceEnabled = (acceptance === null || acceptance === void 0 ? void 0 : acceptance.toLowerCase()) === 'enabled';
20
20
  const isPayoutEnabled = (payout === null || payout === void 0 ? void 0 : payout.toLowerCase()) === 'enabled';
21
- return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceAppIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance), _jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutsAppIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout)] }) })));
21
+ return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceEnabledIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance), _jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutEnabledIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout)] }) })));
22
22
  }
package/build/components/TableCells/CustomCells/BrandsCell/constants.js CHANGED
@@ -1,7 +1,7 @@
1
- import { blueVerifyIcon, grayVerifyIcon, greenVerifyIcon } from '../../../../constants/index.js';
1
+ import { darkBlueVerifyIcon, grayVerifyIcon, greenVerifyIcon } from '../../../../constants/index.js';
2
2
  export const verificationIcon = {
3
3
  incomplete: grayVerifyIcon,
4
- complete: blueVerifyIcon,
5
- reviewed: blueVerifyIcon,
4
+ complete: darkBlueVerifyIcon,
5
+ reviewed: darkBlueVerifyIcon,
6
6
  verified: greenVerifyIcon,
7
7
  };
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/VirtualTable.d.ts CHANGED
@@ -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, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
3
+ declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, 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;
package/build/components/VirtualTable/VirtualTable.js CHANGED
@@ -13,7 +13,7 @@ import { useTheme } from '@mui/material/styles';
13
13
  import memoize from 'memoize-one';
14
14
  import AutoSizer from 'react-virtualized-auto-sizer';
15
15
  import InfiniteLoader from 'react-window-infinite-loader';
16
- import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../constants/index.js';
16
+ import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../constants/index.js';
17
17
  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';
@@ -22,7 +22,7 @@ import TableLastItem from './components/TableLastItem';
22
22
  import TableNoData from './components/TableNoData';
23
23
  import ListItemWrapper from './components/virtualScroll/ListItemWrapper';
24
24
  import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from './style';
25
- const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded) => ({
25
+ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isSheetView) => ({
26
26
  columns,
27
27
  isLoading,
28
28
  rows,
@@ -32,8 +32,9 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
32
32
  lastItemIndex,
33
33
  isError,
34
34
  areAllRowsLoaded,
35
+ isSheetView,
35
36
  }));
36
- function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, }) {
37
+ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
37
38
  var _a;
38
39
  const theme = useTheme();
39
40
  const onPointerDown = (e) => {
@@ -54,7 +55,8 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
54
55
  const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
55
56
  const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
56
57
  const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
57
- const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight);
58
+ const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
59
+ const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
58
60
  const renderTableContainer = useMemo(() => {
59
61
  const setBackdropVisibility = (isVisible) => {
60
62
  setShowBackdrop(isVisible);
@@ -64,7 +66,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
64
66
  return;
65
67
  yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
66
68
  });
67
- return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => TABLE_ROW_HEIGHT, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapper }))) }))) })));
69
+ return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView }, { children: ListItemWrapper }))) }))) })));
68
70
  }, [
69
71
  orderedColumns,
70
72
  error,
@@ -81,11 +83,13 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
81
83
  areAllRowsLoaded,
82
84
  areTotalRowsNotFillingHeight,
83
85
  itemsCount,
86
+ tableRowHeight,
87
+ isSheetView,
84
88
  ]);
85
89
  const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
86
- 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "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 })), 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
+ 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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: {
87
91
  width: '100%',
88
92
  minWidth: 'fit-content',
89
- } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, 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))] }));
93
+ } }, { 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))] }));
90
94
  }
91
95
  export default memo(VirtualTable);
package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js CHANGED
@@ -50,7 +50,7 @@ function ColumnFilter(filter) {
50
50
  }
51
51
  return null;
52
52
  }, [open, filter, anchorEl, setAnchorEl]);
53
- return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'inline-block', marginTop: 'auto' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
53
+ return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
54
54
  filter.onClear(filterApiKeys);
55
55
  } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { marginInlineStart: '8px', cursor: 'pointer' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
56
56
  zIndex: 9999,
package/build/components/VirtualTable/components/TableHeader.d.ts CHANGED
@@ -20,7 +20,8 @@ interface TableHeaderProps {
20
20
  columnsSorting?: IVirtualTable['columnsSorting'];
21
21
  onColumnSort?: IVirtualTable['onColumnSort'];
22
22
  showBackDrop: boolean;
23
+ isSheetView?: boolean;
23
24
  }
24
- declare function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
25
+ declare function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
25
26
  declare const _default: import("react").MemoExoticComponent<typeof TableHeader>;
26
27
  export default _default;
package/build/components/VirtualTable/components/TableHeader.js CHANGED
@@ -31,15 +31,16 @@ export const StyledHeader = styled(TableHead, {
31
31
  backgroundColor: theme.palette.background.default,
32
32
  zIndex: 1,
33
33
  }));
34
- const StyledMUITableRow = styled(MUITableRow)({
35
- display: 'flex',
36
- justifyContent: 'flex-start',
37
- paddingInline: '32px',
38
- paddingBlock: '16px',
39
- width: '100%',
40
- minWidth: 'fit-content',
41
- });
42
- function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting }) {
34
+ const StyledMUITableRow = styled(MUITableRow, {
35
+ shouldForwardProp: (prop) => prop !== 'isSheetView',
36
+ })(({ theme, isSheetView }) => (Object.assign({ display: 'flex', justifyContent: 'flex-start', width: '100%', minWidth: 'fit-content', paddingInline: '32px', paddingBlock: '16px' }, (isSheetView && {
37
+ height: '28px',
38
+ borderBottom: `1px solid ${theme.palette.divider}`,
39
+ backgroundColor: theme.palette.primary.light,
40
+ paddingInline: 0,
41
+ paddingBlock: 0,
42
+ }))));
43
+ function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
43
44
  const [anchorEl, setAnchorEl] = useState(null);
44
45
  const open = Boolean(anchorEl);
45
46
  const theme = useTheme();
@@ -57,11 +58,11 @@ function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columns
57
58
  handleClose();
58
59
  }
59
60
  };
60
- return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
61
+ return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow", isSheetView: isSheetView }, { children: columns.map((column, colIndex) => {
61
62
  const { header, id, align, headerStyle, sortable, filter } = column;
62
63
  const isFirst = id === columns[0].id;
63
64
  const isLast = id === columns[columns.length - 1].id;
64
- return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'baseline', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
65
+ return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
65
66
  }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
66
67
  {
67
68
  label: 'Sort A-Z',
package/build/components/VirtualTable/components/TableRow.d.ts CHANGED
@@ -10,7 +10,8 @@ interface ITableRowProps<R = any> {
10
10
  onRowClick?: (row: R) => void;
11
11
  showLoadedStyle?: boolean;
12
12
  };
13
+ isSheetView?: boolean;
13
14
  }
14
- declare function TableRow({ row, columns, index, rowProps }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
15
+ declare function TableRow({ row, columns, index, rowProps, isSheetView }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
15
16
  declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
16
17
  export default _default;
package/build/components/VirtualTable/components/TableRow.js CHANGED
@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
3
3
  import { memo, useMemo } from 'react';
4
4
  import { areEqual } from 'react-window';
5
5
  import { StyledCell, StyledTableRow } from '../style';
6
- function TableRow({ row, columns, index, rowProps }) {
6
+ function TableRow({ row, columns, index, rowProps, isSheetView }) {
7
7
  const renderCell = (column) => {
8
8
  const { render, format, selector } = column;
9
9
  if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -13,8 +13,8 @@ function TableRow({ row, columns, index, rowProps }) {
13
13
  return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
14
14
  };
15
15
  const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
16
- return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle) }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
16
+ return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
17
17
  }) })), [columns, row]);
18
- return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index }), content));
18
+ return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
19
19
  }
20
20
  export default memo(TableRow, areEqual);
package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts CHANGED
@@ -6,5 +6,5 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow }
6
6
  export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
7
7
  showShadowHighlight?: boolean | undefined;
8
8
  }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
- declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
9
+ declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
10
10
  export default ListItemWrapper;
package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js CHANGED
@@ -14,7 +14,7 @@ import React from 'react';
14
14
  import { Box } from '@mui/material';
15
15
  import { styled } from '@mui/material/styles';
16
16
  import { useTranslation } from 'react-i18next';
17
- import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
17
+ import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
18
18
  import { ActionIcon } from '../../style';
19
19
  import { RowErrorState } from '../RowErrorState';
20
20
  import { StyledParagraph } from '../TableLastItem';
@@ -44,7 +44,7 @@ export const StyledItemWrapper = styled('div', {
44
44
  height: '100%',
45
45
  }));
46
46
  function ListItemWrapper(_a) {
47
- var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded"]);
47
+ var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView"]);
48
48
  const lastItemIndex = rows.length - 1;
49
49
  const row = rows[index];
50
50
  const isLoadingRow = isLoading && index === lastItemIndex + 1;
@@ -56,7 +56,7 @@ function ListItemWrapper(_a) {
56
56
  const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
57
57
  if (isLastRow) {
58
58
  return (_jsx(Box, Object.assign({ sx: {
59
- height: TABLE_ROW_HEIGHT,
59
+ height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
60
60
  display: 'flex',
61
61
  justifyContent: 'center',
62
62
  alignItems: 'center',
@@ -69,8 +69,8 @@ function ListItemWrapper(_a) {
69
69
  height: '100%',
70
70
  } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
71
71
  }
72
- return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps }, `row-${index}`);
73
- }, [restData, index, row, columns, memoizedRowProps]);
72
+ return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
73
+ }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
74
74
  return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
75
75
  }
76
76
  export default ListItemWrapper;
package/build/components/VirtualTable/style.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  interface TableWrapperProps {
3
3
  showNoDataView?: boolean;
4
+ isSheetView?: boolean;
4
5
  }
5
6
  export declare const TableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
6
7
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
@@ -16,9 +17,11 @@ export declare const StyledSolidBackground: import("@emotion/styled").StyledComp
16
17
  export declare const StyledCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
17
18
  isLast: boolean;
18
19
  isFirst: boolean;
20
+ isSheetView?: boolean | undefined;
19
21
  }, {}, {}>;
20
22
  interface StyledVirtualListProps {
21
23
  areTotalRowsNotFillingHeight: boolean;
24
+ isSheetView?: boolean;
22
25
  }
23
26
  export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
24
27
  setBackdropVisibility: (isVisible: boolean) => void;
@@ -29,6 +32,7 @@ export declare const StyledTableRow: import("@emotion/styled").StyledComponent<i
29
32
  }, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
30
33
  showShadowHighlight?: boolean | undefined;
31
34
  showLoadedStyle?: boolean | undefined;
35
+ isSheetView?: boolean | undefined;
32
36
  }, {}, {}>;
33
37
  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"> & {
34
38
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
@@ -299,9 +303,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
299
303
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
300
304
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
301
305
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
306
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
302
307
  src?: string | undefined;
303
308
  alt?: string | undefined;
304
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
305
309
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
306
310
  useMap?: string | undefined;
307
311
  loading?: "eager" | "lazy" | undefined;
package/build/components/VirtualTable/style.js CHANGED
@@ -6,8 +6,8 @@ import { motion } from 'framer-motion';
6
6
  import { TABLE_FOOTER_HEIGHT } from './components/TableFooter/style';
7
7
  import VirtualScrollList from './components/virtualScroll/VirtualScrollList';
8
8
  export const TableWrapper = styled(Box, {
9
- shouldForwardProp: (prop) => prop !== 'showNoDataView',
10
- })(({ showNoDataView }) => ({
9
+ shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'isSheetView',
10
+ })(({ showNoDataView, isSheetView }) => ({
11
11
  display: 'flex',
12
12
  flexDirection: 'column',
13
13
  height: '100%',
@@ -15,6 +15,8 @@ export const TableWrapper = styled(Box, {
15
15
  minWidth: showNoDataView ? 'unset' : 'fit-content',
16
16
  overflow: 'hidden',
17
17
  overflowX: showNoDataView ? 'hidden' : 'scroll',
18
+ margin: isSheetView ? '0 32px' : '0',
19
+ border: isSheetView ? '1px solid #F2F2F2' : 'none',
18
20
  }));
19
21
  export const StyledBox = styled(Box, {
20
22
  shouldForwardProp: (prop) => prop !== 'hidePadding',
@@ -27,30 +29,18 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
27
29
  backgroundColor: theme.palette.background.default,
28
30
  }));
29
31
  export const StyledCell = styled(TableCell, {
30
- shouldForwardProp: (prop) => prop !== 'isLast' && prop !== 'isFirst',
31
- })(({ theme, isLast, isFirst }) => ({
32
- paddingBlock: '0',
33
- paddingInline: '0.3875rem !important',
34
- paddingLeft: isFirst ? '0 !important' : '0.3875rem !important',
35
- paddingRight: isLast ? '0 !important' : '0.3875rem !important',
36
- color: theme.palette.grey[700],
37
- fontSize: theme.typography.caption.fontSize,
38
- height: '100%',
39
- fontWeight: theme.typography.fontWeightRegular,
40
- whiteSpace: 'nowrap',
41
- overflow: 'hidden',
42
- textOverflow: 'ellipsis',
43
- display: 'flex',
44
- alignItems: 'center',
45
- }));
32
+ shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
33
+ })(({ theme, isLast, isFirst, isSheetView }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: theme.palette.grey[700], fontSize: theme.typography.caption.fontSize, height: '100%', fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
34
+ borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
35
+ }))));
46
36
  export const StyledVirtualList = styled(VirtualScrollList, {
47
- shouldForwardProp: (prop) => prop !== 'areTotalRowsNotFillingHeight',
48
- })(({ theme, areTotalRowsNotFillingHeight }) => ({
49
- backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default,
50
- }));
37
+ shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
38
+ })(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
39
+ backgroundColor: theme.palette.common.white,
40
+ }))));
51
41
  export const StyledTableRow = styled(MUITableRow, {
52
- shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'showLoadedStyle',
53
- })(({ theme, showShadowHighlight, showLoadedStyle }) => (Object.assign(Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, paddingInline: '32px', position: 'relative', height: '100%', width: '100%', '&:hover': {
42
+ shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].includes(props),
43
+ })(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
54
44
  boxShadow: theme.shadows[12],
55
45
  zIndex: 1,
56
46
  '.payment-sources-container': {
@@ -87,7 +77,7 @@ export const StyledTableRow = styled(MUITableRow, {
87
77
  position: 'absolute',
88
78
  left: 0,
89
79
  },
90
- }))));
80
+ }))))));
91
81
  export const StyledTableBox = styled(Box, {
92
82
  shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView',
93
83
  })(({ theme, showBackgroundColor, showNoDataView }) => ({
@@ -98,8 +88,6 @@ export const StyledTableBox = styled(Box, {
98
88
  paddingBottom: showBackgroundColor ? '52px' : '0',
99
89
  display: 'flex',
100
90
  flexDirection: 'column',
101
- borderBottomLeftRadius: theme.spacing(1.5),
102
- borderBottomRightRadius: theme.spacing(1.5),
103
91
  }));
104
92
  export const ActionIcon = styled(motion.img)(() => ({
105
93
  width: '24px',
package/build/constants/assets.d.ts CHANGED
@@ -131,8 +131,10 @@ export declare const billingAppIcon: string;
131
131
  export declare const receiptBillIcon: string;
132
132
  export declare const newReceiptIcon: string;
133
133
  export declare const acceptanceAppIcon: string;
134
+ export declare const acceptanceEnabledIcon: string;
134
135
  export declare const acceptanceAppDisabledIcon: string;
135
136
  export declare const payoutAppDisabledIcon: string;
137
+ export declare const payoutEnabledIcon: string;
136
138
  export declare const payoutDisabledRoundedIcon: string;
137
139
  export declare const acceptanceDisabledRoundedIcon: string;
138
140
  export declare const authenticationAppIcon: string;
@@ -405,6 +407,7 @@ export declare const addItemIcon: string;
405
407
  export declare const blueCircleCheckIcon: string;
406
408
  export declare const trashBinIcon: string;
407
409
  export declare const blueVerifyIcon: string;
410
+ export declare const darkBlueVerifyIcon: string;
408
411
  export declare const grayVerifyIcon: string;
409
412
  export declare const greenVerifyIcon: string;
410
413
  export declare const redVerifyIcon: string;
package/build/constants/assets.js CHANGED
@@ -132,8 +132,10 @@ export const billingAppIcon = `${lightUrl}/other/billing.svg`;
132
132
  export const receiptBillIcon = `${lightUrl}/other/receiptBill.svg`;
133
133
  export const newReceiptIcon = `${lightUrl}/newReceiptIcon.svg`;
134
134
  export const acceptanceAppIcon = `${lightUrl}/other/acceptance.svg`;
135
+ export const acceptanceEnabledIcon = `${lightUrl}/acceptanceEnabled.svg`;
135
136
  export const acceptanceAppDisabledIcon = `${lightUrl}/other/acceptanceAppIconDisabled.svg`;
136
137
  export const payoutAppDisabledIcon = `${lightUrl}/other/payoutsAppIconDisabled.svg`;
138
+ export const payoutEnabledIcon = `${lightUrl}/payoutEnabled.svg`;
137
139
  export const payoutDisabledRoundedIcon = `${lightUrl}/payoutDisabledRounded.svg`;
138
140
  export const acceptanceDisabledRoundedIcon = `${lightUrl}/acceptanceDisabledRounded.svg`;
139
141
  export const authenticationAppIcon = `${lightUrl}/other/AuthenticationApp.svg`;
@@ -409,6 +411,7 @@ export const addItemIcon = `${lightUrl}/addItemIcon.svg`;
409
411
  export const blueCircleCheckIcon = `${lightUrl}/blueCheckIcon.svg`;
410
412
  export const trashBinIcon = `${lightUrl}/other/trash-bin.svg`;
411
413
  export const blueVerifyIcon = `${lightUrl}/blueVerifyIcon.svg`;
414
+ export const darkBlueVerifyIcon = `${lightUrl}/verificationDarkBlue.svg`;
412
415
  export const grayVerifyIcon = `${lightUrl}/grayVerifyIcon.svg`;
413
416
  export const greenVerifyIcon = `${lightUrl}/greenVerifyIcon.svg`;
414
417
  export const redVerifyIcon = `${lightUrl}/redVerifyIcon.svg`;
package/build/constants/table.d.ts CHANGED
@@ -3,3 +3,4 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
3
3
  export declare const TABLE_ROW_HEIGHT = 57;
4
4
  export declare const TABLE_THRESHOLD = 200;
5
5
  export declare const TABLE_LIST_OVER_SCAN = 5;
6
+ export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;
package/build/constants/table.js CHANGED
@@ -3,3 +3,4 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
3
3
  export const TABLE_ROW_HEIGHT = 57;
4
4
  export const TABLE_THRESHOLD = 200;
5
5
  export const TABLE_LIST_OVER_SCAN = 5;
6
+ export const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;
package/build/types/table.d.ts CHANGED
@@ -121,6 +121,7 @@ export interface IVirtualTable<R = any> {
121
121
  width: string | number;
122
122
  };
123
123
  dragControls?: DragControls;
124
+ isSheetView?: boolean;
124
125
  }
125
126
  export type ColumnFilterValues = Record<string, string | string[] | {
126
127
  phone: string;
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.69",
4
+ "version": "0.0.70-sheet-view-table-row-v1",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",