@tap-payments/os-micro-frontend-shared 0.0.212 → 0.0.215

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 Tap Payments
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Tap Payments
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
- # os-micro-frontend-shared
2
-
3
- ## Publishing Workflow
4
-
5
- 1. Update version in package.json
6
- 2. Commit changes
7
- 3. Create and push a tag:
8
-
9
- ```bash
10
- npm version patch # or minor, major
11
- git push origin main --tags
12
- ```
1
+ # os-micro-frontend-shared
2
+
3
+ ## Publishing Workflow
4
+
5
+ 1. Update version in package.json
6
+ 2. Commit changes
7
+ 3. Create and push a tag:
8
+
9
+ ```bash
10
+ npm version patch # or minor, major
11
+ git push origin main --tags
12
+ ```
@@ -1,4 +1,5 @@
1
1
  import { MouseEvent } from 'react';
2
+ import { PopperProps } from '@mui/material/Popper';
2
3
  import type { CalenderMode, Timezone } from '../../types/index.js';
3
4
  import { SxProps } from '@mui/system';
4
5
  interface RangeCalendarProps {
@@ -20,6 +21,7 @@ interface RangeCalendarProps {
20
21
  calendarPopperSx?: SxProps;
21
22
  renderCalendarButton?: (open: boolean, onOpenCalender: (event: MouseEvent<HTMLElement>) => void) => React.ReactNode;
22
23
  mainSx?: SxProps;
24
+ popperProps?: Partial<PopperProps>;
23
25
  }
24
- declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
26
+ declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, popperProps, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
25
27
  export default RangeCalender;
@@ -13,7 +13,7 @@ import QuickFilters from './components/QuickFilters';
13
13
  import RangeDatePicker from './components/RangeDatepicker';
14
14
  import CustomTimezone from './components/Timezone';
15
15
  import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
16
- function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, }) {
16
+ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, popperProps, }) {
17
17
  const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
18
18
  const [values, setValues] = useState(dates);
19
19
  const [selectedTimezone, setSelectedTimezone] = useState(timezone);
@@ -85,7 +85,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
85
85
  return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender", sx: mainSx }, { children: [renderCalendarButton ? (renderCalendarButton(open, onOpenCalender)) : (_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() }))), open && (_jsx(CustomBackdrop, { onClick: (e) => {
86
86
  e.stopPropagation();
87
87
  onCloseCalender();
88
- } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: Object.assign({ zIndex: 3 }, calendarPopperSx) }, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
88
+ } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: Object.assign({ zIndex: 3 }, calendarPopperSx) }, popperProps, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
89
89
  setSelectedGroupBy(group);
90
90
  } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, { values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
91
91
  }
@@ -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;
@@ -272,9 +272,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
272
272
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
273
273
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
274
274
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
275
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
276
275
  src?: string | undefined;
277
276
  alt?: string | undefined;
277
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
278
278
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
279
279
  useMap?: string | undefined;
280
280
  loading?: "eager" | "lazy" | undefined;
@@ -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;
@@ -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;
@@ -11,9 +11,7 @@ interface SheetViewTableHeaderProps {
11
11
  onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
12
12
  isPinnable?: boolean;
13
13
  lastColumnId?: string | null;
14
- selectedColumn?: string | null;
15
- onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
16
14
  }
17
- declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
15
+ declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
18
16
  declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
19
17
  export default _default;
@@ -6,7 +6,7 @@ import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../..
6
6
  import ColumnFilter from '../components/ColumnFilter';
7
7
  import { StyledCell } from '../style';
8
8
  import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow } from './style';
9
- function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
9
+ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, }) {
10
10
  const [anchorEl, setAnchorEl] = useState(null);
11
11
  const open = Boolean(anchorEl);
12
12
  const theme = useTheme();
@@ -44,11 +44,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
44
44
  const isLast = id === columns[columns.length - 1].id;
45
45
  const isPinned = pinnedColumns.includes(id);
46
46
  const isDefaultPinned = !!column.isDefaultPinned;
47
- const isSelected = selectedColumn === id;
48
- return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_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, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#e3f2fd' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_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": "SheetViewVirtualTable_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 }), isPinnable && pinnable && !isDefaultPinned && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: (event) => {
49
- event.stopPropagation();
50
- handlePinClick(id);
51
- }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
47
+ return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_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, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', 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": "SheetViewTableHeader_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": "SheetViewVirtualTable_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 }), isPinnable && pinnable && !isDefaultPinned && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: () => handlePinClick(id), title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
52
48
  }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
53
49
  {
54
50
  label: 'Sort A-Z',
@@ -25,7 +25,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
25
25
  import AutoSizer from 'react-virtualized-auto-sizer';
26
26
  import { usePinnedColumns } from './hooks/usePinnedColumns';
27
27
  import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
28
- const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick) => ({
28
+ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned) => ({
29
29
  columns,
30
30
  isLoading,
31
31
  rows,
@@ -39,28 +39,12 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
39
39
  newLoadedRowsEndIndex: lastItemIndex,
40
40
  isSheetView: true,
41
41
  isPinned,
42
- selectedCell,
43
- selectedColumn,
44
- onCellClick,
45
42
  }));
46
43
  function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
47
44
  var _a, _b, _c;
48
45
  const theme = useTheme();
49
46
  const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
50
47
  const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
51
- const [selectedCell, setSelectedCell] = useState(null);
52
- const [selectedColumn, setSelectedColumn] = useState(null);
53
- const handleCellClick = useCallback((rowIndex, columnId, event) => {
54
- event.stopPropagation();
55
- const cellKey = `${rowIndex}-${columnId}`;
56
- setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
57
- setSelectedColumn(null);
58
- }, []);
59
- const handleColumnClick = useCallback((columnId, event) => {
60
- event.stopPropagation();
61
- setSelectedColumn((prev) => (prev === columnId ? null : columnId));
62
- setSelectedCell(null);
63
- }, []);
64
48
  const onPointerDown = (e) => {
65
49
  dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
66
50
  };
@@ -77,9 +61,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
77
61
  const lastItemIndex = rows.length - 1;
78
62
  const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
79
63
  const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
80
- const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
81
- const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true, selectedCell, selectedColumn, handleCellClick);
82
- const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false, selectedCell, selectedColumn, handleCellClick);
64
+ const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
65
+ const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
66
+ const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false);
83
67
  const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
84
68
  const tableItemsCount = itemsCount;
85
69
  const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
@@ -110,9 +94,6 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
110
94
  handleScroll,
111
95
  scrollToIndex,
112
96
  areTotalRowsNotFillingHeight,
113
- selectedCell,
114
- selectedColumn,
115
- handleCellClick,
116
97
  ]);
117
98
  const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
118
99
  const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
@@ -128,12 +109,12 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
128
109
  const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
129
110
  if (columnsData.length === 0)
130
111
  return null;
131
- 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, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
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: 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: {
132
113
  width: '100%',
133
114
  minWidth: 'fit-content',
134
115
  } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
135
116
  };
136
- 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, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
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: {
137
118
  width: '100%',
138
119
  minWidth: 'fit-content',
139
120
  } }, { 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))] }));
@@ -11,11 +11,7 @@ interface ITableRowProps<R = any> {
11
11
  showLoadedStyle?: boolean;
12
12
  };
13
13
  isSheetView?: boolean;
14
- selectedCell?: string | null;
15
- selectedColumn?: string | null;
16
- onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
17
- isLastRow?: boolean;
18
14
  }
19
- declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: 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;
20
16
  declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
21
17
  export default _default;
@@ -3,8 +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
- import { getBorderStyle } from '../utils/getBorderStyle';
7
- function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
6
+ function TableRow({ row, columns, index, rowProps, isSheetView }) {
8
7
  const renderCell = (column) => {
9
8
  const { render, format, selector } = column;
10
9
  if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -14,19 +13,8 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
14
13
  return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
15
14
  };
16
15
  const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
17
- const columnIdStr = String(column.id);
18
- const cellKey = `${index}-${columnIdStr}`;
19
- const isCellSelected = selectedCell === cellKey;
20
- const isColumnSelected = selectedColumn === columnIdStr;
21
- const isSelected = isCellSelected || isColumnSelected;
22
- const borderStyle = getBorderStyle({
23
- isSelected,
24
- isCellSelected,
25
- isColumnSelected,
26
- isLastRow,
27
- });
28
- 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, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: 'pointer' }, borderStyle), column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
29
- }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
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
+ }) })), [columns, row]);
30
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));
31
19
  }
32
20
  export default memo(TableRow, areEqual);
@@ -68,7 +68,7 @@ function ListItemWrapper(_a) {
68
68
  height: '100%',
69
69
  } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
70
70
  }
71
- return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCell: restData.selectedCell, selectedColumn: restData.selectedColumn, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
71
+ return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
72
72
  }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
73
73
  return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
74
74
  }
@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
306
306
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
307
307
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
308
308
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
309
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
310
309
  src?: string | undefined;
311
310
  alt?: string | undefined;
311
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
312
312
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
313
313
  useMap?: string | undefined;
314
314
  loading?: "eager" | "lazy" | undefined;
@@ -97,7 +97,7 @@ export declare const chargeTableCellWidth: {
97
97
  readonly receipt: {
98
98
  readonly default: "85px";
99
99
  readonly text: "150px";
100
- readonly sheet: "135px";
100
+ readonly sheet: "131px";
101
101
  };
102
102
  readonly fees: {
103
103
  readonly default: "150px";
@@ -97,7 +97,7 @@ export const chargeTableCellWidth = {
97
97
  receipt: {
98
98
  default: '85px',
99
99
  text: '150px',
100
- sheet: '135px',
100
+ sheet: '131px',
101
101
  },
102
102
  fees: {
103
103
  default: '150px',
package/package.json CHANGED
@@ -1,132 +1,132 @@
1
- {
2
- "name": "@tap-payments/os-micro-frontend-shared",
3
- "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.212",
5
- "type": "module",
6
- "main": "build/index.js",
7
- "module": "build/index.js",
8
- "types": "build/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./build/index.d.ts",
12
- "import": "./build/index.js",
13
- "require": "./build/index.js"
14
- },
15
- "./constants": {
16
- "types": "./build/constants/index.d.ts",
17
- "import": "./build/constants/index.js",
18
- "require": "./build/constants/index.js"
19
- },
20
- "./components": {
21
- "types": "./build/components/index.d.ts",
22
- "import": "./build/components/index.js",
23
- "require": "./build/components/index.js"
24
- },
25
- "./components/*": {
26
- "types": "./build/components/*/index.d.ts",
27
- "import": "./build/components/*/index.js",
28
- "require": "./build/components/*/index.js"
29
- },
30
- "./hooks": {
31
- "types": "./build/hooks/index.d.ts",
32
- "import": "./build/hooks/index.js",
33
- "require": "./build/hooks/index.js"
34
- },
35
- "./utils": {
36
- "types": "./build/utils/index.d.ts",
37
- "import": "./build/utils/index.js",
38
- "require": "./build/utils/index.js"
39
- },
40
- "./theme": {
41
- "types": "./build/theme/index.d.ts",
42
- "import": "./build/theme/index.js",
43
- "require": "./build/theme/index.js"
44
- },
45
- "./types": {
46
- "types": "./build/types/index.d.ts",
47
- "import": "./build/types/index.js",
48
- "require": "./build/types/index.js"
49
- }
50
- },
51
- "license": "MIT",
52
- "author": {
53
- "name": "Ahmed Sharkawy",
54
- "email": "a.elsharkawy@tap.company"
55
- },
56
- "files": [
57
- "build",
58
- "readme.md"
59
- ],
60
- "scripts": {
61
- "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
62
- "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
63
- "dev": "vite",
64
- "build": "tsc -b && vite build ",
65
- "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
66
- "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
67
- "lint": "eslint . --color",
68
- "lint:fix": "eslint src --fix --color",
69
- "preview": "vite preview",
70
- "prepare": "husky"
71
- },
72
- "dependencies": {
73
- "@emotion/react": "^11.11.0",
74
- "@emotion/styled": "^11.11.0",
75
- "@hookform/resolvers": "^3.3.1",
76
- "@mui/material": "^5.12.3",
77
- "@uiw/react-json-view": "^2.0.0-alpha.16",
78
- "axios": "^1.4.0",
79
- "dayjs": "^1.11.8",
80
- "framer-motion": "10.11.0",
81
- "i18next": "^22.4.15",
82
- "memoize-one": "^6.0.0",
83
- "re-resizable": "^6.9.9",
84
- "react": "^18.2.0",
85
- "react-currency-input-field": "^3.6.11",
86
- "react-dom": "^18.2.0",
87
- "react-draggable": "^4.4.6",
88
- "react-dropzone": "^14.2.3",
89
- "react-hook-form": "^7.45.4",
90
- "react-hot-toast": "^2.4.1",
91
- "react-i18next": "^12.2.2",
92
- "react-multi-date-picker": "^4.1.2",
93
- "react-router-dom": "^7.7.0",
94
- "react-virtualized-auto-sizer": "^1.0.20",
95
- "react-window": "^1.8.9",
96
- "react-window-infinite-loader": "^1.0.9",
97
- "react18-input-otp": "^1.1.4",
98
- "recharts": "^2.15.1"
99
- },
100
- "devDependencies": {
101
- "@eslint/js": "^9.17.0",
102
- "@testing-library/jest-dom": "^5.16.5",
103
- "@types/lodash": "^4.17.15",
104
- "@types/react": "^18.2.6",
105
- "@types/react-dom": "^18.3.5",
106
- "@types/react-virtualized-auto-sizer": "^1.0.8",
107
- "@types/react-window": "^1.8.5",
108
- "@types/react-window-infinite-loader": "^1.0.6",
109
- "@vitejs/plugin-react": "^4.3.4",
110
- "eslint": "^9.17.0",
111
- "eslint-plugin-react-hooks": "^5.0.0",
112
- "eslint-plugin-react-refresh": "^0.4.16",
113
- "globals": "^15.14.0",
114
- "husky": "^8.0.3",
115
- "lint-staged": "^13.2.2",
116
- "prettier": "^2.8.8",
117
- "tsc-alias": "^1.8.16",
118
- "typescript": "5.0.2",
119
- "typescript-eslint": "^8.18.2",
120
- "vite": "6.0.5",
121
- "vite-tsconfig-paths": "^4.2.0"
122
- },
123
- "lint-staged": {
124
- "src/**/*.{ts,tsx,json,js,jsx}": [
125
- "yarn run prettier:fix",
126
- "yarn run lint"
127
- ]
128
- },
129
- "publishConfig": {
130
- "registry": "https://registry.npmjs.org/"
131
- }
132
- }
1
+ {
2
+ "name": "@tap-payments/os-micro-frontend-shared",
3
+ "description": "Shared components and utilities for Tap Payments micro frontends",
4
+ "version": "0.0.215",
5
+ "type": "module",
6
+ "main": "build/index.js",
7
+ "module": "build/index.js",
8
+ "types": "build/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./build/index.d.ts",
12
+ "import": "./build/index.js",
13
+ "require": "./build/index.js"
14
+ },
15
+ "./constants": {
16
+ "types": "./build/constants/index.d.ts",
17
+ "import": "./build/constants/index.js",
18
+ "require": "./build/constants/index.js"
19
+ },
20
+ "./components": {
21
+ "types": "./build/components/index.d.ts",
22
+ "import": "./build/components/index.js",
23
+ "require": "./build/components/index.js"
24
+ },
25
+ "./components/*": {
26
+ "types": "./build/components/*/index.d.ts",
27
+ "import": "./build/components/*/index.js",
28
+ "require": "./build/components/*/index.js"
29
+ },
30
+ "./hooks": {
31
+ "types": "./build/hooks/index.d.ts",
32
+ "import": "./build/hooks/index.js",
33
+ "require": "./build/hooks/index.js"
34
+ },
35
+ "./utils": {
36
+ "types": "./build/utils/index.d.ts",
37
+ "import": "./build/utils/index.js",
38
+ "require": "./build/utils/index.js"
39
+ },
40
+ "./theme": {
41
+ "types": "./build/theme/index.d.ts",
42
+ "import": "./build/theme/index.js",
43
+ "require": "./build/theme/index.js"
44
+ },
45
+ "./types": {
46
+ "types": "./build/types/index.d.ts",
47
+ "import": "./build/types/index.js",
48
+ "require": "./build/types/index.js"
49
+ }
50
+ },
51
+ "license": "MIT",
52
+ "author": {
53
+ "name": "Ahmed Sharkawy",
54
+ "email": "a.elsharkawy@tap.company"
55
+ },
56
+ "files": [
57
+ "build",
58
+ "readme.md"
59
+ ],
60
+ "scripts": {
61
+ "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
62
+ "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
63
+ "dev": "vite",
64
+ "build": "tsc -b && vite build ",
65
+ "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
66
+ "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
67
+ "lint": "eslint . --color",
68
+ "lint:fix": "eslint src --fix --color",
69
+ "preview": "vite preview",
70
+ "prepare": "husky"
71
+ },
72
+ "dependencies": {
73
+ "@emotion/react": "^11.11.0",
74
+ "@emotion/styled": "^11.11.0",
75
+ "@hookform/resolvers": "^3.3.1",
76
+ "@mui/material": "^5.12.3",
77
+ "@uiw/react-json-view": "^2.0.0-alpha.16",
78
+ "axios": "^1.4.0",
79
+ "dayjs": "^1.11.8",
80
+ "framer-motion": "10.11.0",
81
+ "i18next": "^22.4.15",
82
+ "memoize-one": "^6.0.0",
83
+ "re-resizable": "^6.9.9",
84
+ "react": "^18.2.0",
85
+ "react-currency-input-field": "^3.6.11",
86
+ "react-dom": "^18.2.0",
87
+ "react-draggable": "^4.4.6",
88
+ "react-dropzone": "^14.2.3",
89
+ "react-hook-form": "^7.45.4",
90
+ "react-hot-toast": "^2.4.1",
91
+ "react-i18next": "^12.2.2",
92
+ "react-multi-date-picker": "^4.1.2",
93
+ "react-router-dom": "^7.7.0",
94
+ "react-virtualized-auto-sizer": "^1.0.20",
95
+ "react-window": "^1.8.9",
96
+ "react-window-infinite-loader": "^1.0.9",
97
+ "react18-input-otp": "^1.1.4",
98
+ "recharts": "^2.15.1"
99
+ },
100
+ "devDependencies": {
101
+ "@eslint/js": "^9.17.0",
102
+ "@testing-library/jest-dom": "^5.16.5",
103
+ "@types/lodash": "^4.17.15",
104
+ "@types/react": "^18.2.6",
105
+ "@types/react-dom": "^18.3.5",
106
+ "@types/react-virtualized-auto-sizer": "^1.0.8",
107
+ "@types/react-window": "^1.8.5",
108
+ "@types/react-window-infinite-loader": "^1.0.6",
109
+ "@vitejs/plugin-react": "^4.3.4",
110
+ "eslint": "^9.17.0",
111
+ "eslint-plugin-react-hooks": "^5.0.0",
112
+ "eslint-plugin-react-refresh": "^0.4.16",
113
+ "globals": "^15.14.0",
114
+ "husky": "^8.0.3",
115
+ "lint-staged": "^13.2.2",
116
+ "prettier": "^2.8.8",
117
+ "tsc-alias": "^1.8.16",
118
+ "typescript": "5.0.2",
119
+ "typescript-eslint": "^8.18.2",
120
+ "vite": "6.0.5",
121
+ "vite-tsconfig-paths": "^4.2.0"
122
+ },
123
+ "lint-staged": {
124
+ "src/**/*.{ts,tsx,json,js,jsx}": [
125
+ "yarn run prettier:fix",
126
+ "yarn run lint"
127
+ ]
128
+ },
129
+ "publishConfig": {
130
+ "registry": "https://registry.npmjs.org/"
131
+ }
132
+ }
@@ -1,41 +0,0 @@
1
- interface GetBorderStyleParams {
2
- isSelected: boolean;
3
- isCellSelected: boolean;
4
- isColumnSelected: boolean;
5
- isLastRow: boolean;
6
- }
7
- export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
8
- border?: undefined;
9
- backgroundColor?: undefined;
10
- borderWidth?: undefined;
11
- borderStyle?: undefined;
12
- borderColor?: undefined;
13
- borderBottom?: undefined;
14
- height?: undefined;
15
- minHeight?: undefined;
16
- display?: undefined;
17
- alignItems?: undefined;
18
- } | {
19
- border: string;
20
- backgroundColor: string;
21
- borderWidth?: undefined;
22
- borderStyle?: undefined;
23
- borderColor?: undefined;
24
- borderBottom?: undefined;
25
- height?: undefined;
26
- minHeight?: undefined;
27
- display?: undefined;
28
- alignItems?: undefined;
29
- } | {
30
- borderWidth: string;
31
- borderStyle: string;
32
- borderColor: string;
33
- borderBottom: string;
34
- backgroundColor: string;
35
- height: string;
36
- minHeight: string;
37
- display: string;
38
- alignItems: string;
39
- border?: undefined;
40
- };
41
- export {};
@@ -1,24 +0,0 @@
1
- export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
2
- if (!isSelected)
3
- return {};
4
- if (isCellSelected && !isColumnSelected) {
5
- return {
6
- border: '0.5px solid #1F88D0',
7
- backgroundColor: '#F4F9FC',
8
- };
9
- }
10
- if (isColumnSelected) {
11
- return {
12
- borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
13
- borderStyle: 'solid',
14
- borderColor: '#1F88D0',
15
- borderBottom: !isLastRow ? '1px solid #F2F2F2' : '0.5px solid #1F88D0',
16
- backgroundColor: '#F4F9FC',
17
- height: '100%',
18
- minHeight: '28px',
19
- display: 'flex',
20
- alignItems: 'center',
21
- };
22
- }
23
- return {};
24
- };