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

package/build/components/AppServices/AppServices.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useEffect, useRef, useState, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent } from '../index.js';
 import { APP_CODES, blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../constants/index.js';
 import { getNameText } from '../../utils/index.js';
@@ -17,7 +17,6 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
     const [selectedOption, setSelectedOption] = useState('');
     const servicesRef = useRef(null);
     const [openDropdown, setOpenDropdown] = React.useState(false);
-    const navigate = useNavigate();
     const pathname = useLocation();
     const { i18n } = useTranslation();
     const services = useMemo(() => {
@@ -50,12 +49,11 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
     useEffect(() => {
         setIsDropdown(Number(appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width) < initServicesWidth + 10);
     }, [appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width]);
-    const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
     const navigateToService = (serviceCode) => {
-        navigate(`${appInfo.appCode.toLowerCase()}/${serviceCode.toLowerCase()}`);
         onChangeAppServiceCode === null || onChangeAppServiceCode === void 0 ? void 0 : onChangeAppServiceCode(serviceCode);
         setOpenDropdown(false);
     };
+    const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
     return (_jsxs(Wrapper, Object.assign({ maximized: appInfo.isMaximized }, { children: [services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { appInfo: appInfo, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
                     anchorOrigin: {
                         vertical: 40,

package/build/components/RangeCalender/RangeCalender.d.ts

@@ -1,4 +1,6 @@
+import { MouseEvent } from 'react';
 import type { CalenderMode, Timezone } from '../../types/index.js';
+import { SxProps } from '@mui/system';
 interface RangeCalendarProps {
     defaultDate: [Date, Date];
     onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
@@ -15,6 +17,9 @@ interface RangeCalendarProps {
     onChangeTimezone?: (timezone: Timezone) => void;
     defaultTimezone: Timezone;
     browserTimezone: string;
+    calendarPopperSx?: SxProps;
+    renderCalendarButton?: (open: boolean, onOpenCalender: (event: MouseEvent<HTMLElement>) => void) => React.ReactNode;
+    mainSx?: SxProps;
 }
-declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
+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;
 export default RangeCalender;

package/build/components/RangeCalender/RangeCalender.js

@@ -13,7 +13,7 @@ import QuickFilters from './components/QuickFilters';
 import RangeDatePicker from './components/RangeDatepicker';
 import CustomTimezone from './components/Timezone';
 import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
-function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }) {
+function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderCalendarButton, mainSx, }) {
     const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
     const [values, setValues] = useState(dates);
     const [selectedTimezone, setSelectedTimezone] = useState(timezone);
@@ -82,10 +82,10 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
         if (calendarRef.current)
             calendarRef.current.set({ date: newValues[0] });
     };
-    return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender" }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() })), open && (_jsx(CustomBackdrop, { onClick: (e) => {
+    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) => {
                     e.stopPropagation();
                     onCloseCalender();
-                } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: { zIndex: 3 } }, { 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) => {
+                } })), _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) => {
                                                 setSelectedGroupBy(group);
                                             } })), _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') }))] })] }))] }))] }) }))] })));
 }

package/build/components/Routes/PrivateRoute.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, Suspense } from 'react';
-import { Navigate } from 'react-router-dom';
+import { Navigate } from 'react-router';
 function PrivateRoute({ children, isLoggedIn }) {
     if (!isLoggedIn) {
         return _jsx(Navigate, { to: "/login" });

package/build/components/VirtualTable/SheetView/SheetViewTableHeader.d.ts

@@ -11,9 +11,9 @@ interface SheetViewTableHeaderProps {
     onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
     isPinnable?: boolean;
     lastColumnId?: string | null;
-    selectedColumns?: Set<string>;
+    selectedColumn?: string | null;
     onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
 }
-declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumns, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
 export default _default;

package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js

@@ -6,7 +6,7 @@ import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../..
 import ColumnFilter from '../components/ColumnFilter';
 import { StyledCell } from '../style';
 import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow } from './style';
-function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumns = new Set(), onColumnClick, }) {
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const theme = useTheme();
@@ -44,7 +44,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isLast = id === columns[columns.length - 1].id;
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
-                    const isSelected = selectedColumns.has(id);
+                    const isSelected = selectedColumn === id;
                     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) => {
                                     event.stopPropagation();
                                     handlePinClick(id);

package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js

@@ -25,7 +25,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { usePinnedColumns } from './hooks/usePinnedColumns';
 import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCells, selectedColumns, onCellClick) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick) => ({
     columns,
     isLoading,
     rows,
@@ -39,8 +39,8 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     newLoadedRowsEndIndex: lastItemIndex,
     isSheetView: true,
     isPinned,
-    selectedCells,
-    selectedColumns,
+    selectedCell,
+    selectedColumn,
     onCellClick,
 }));
 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, }) {
@@ -48,46 +48,18 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     const theme = useTheme();
     const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
-    const [selectedCells, setSelectedCells] = useState(new Set());
-    const [selectedColumns, setSelectedColumns] = useState(new Set());
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [selectedColumn, setSelectedColumn] = useState(null);
     const handleCellClick = useCallback((rowIndex, columnId, event) => {
         event.stopPropagation();
         const cellKey = `${rowIndex}-${columnId}`;
-        setSelectedCells((prev) => {
-            const newSelected = new Set(prev);
-            if (newSelected.has(cellKey)) {
-                newSelected.delete(cellKey);
-            }
-            else {
-                if (!event.ctrlKey && !event.metaKey) {
-                    newSelected.clear();
-                }
-                newSelected.add(cellKey);
-            }
-            return newSelected;
-        });
-        if (!event.ctrlKey && !event.metaKey) {
-            setSelectedColumns(new Set());
-        }
+        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
+        setSelectedColumn(null);
     }, []);
     const handleColumnClick = useCallback((columnId, event) => {
         event.stopPropagation();
-        setSelectedColumns((prev) => {
-            const newSelected = new Set(prev);
-            if (newSelected.has(columnId)) {
-                newSelected.delete(columnId);
-            }
-            else {
-                if (!event.ctrlKey && !event.metaKey) {
-                    newSelected.clear();
-                }
-                newSelected.add(columnId);
-            }
-            return newSelected;
-        });
-        if (!event.ctrlKey && !event.metaKey) {
-            setSelectedCells(new Set());
-        }
+        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
+        setSelectedCell(null);
     }, []);
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
@@ -105,9 +77,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     const lastItemIndex = rows.length - 1;
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
-    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, selectedCells, selectedColumns, handleCellClick);
-    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, selectedCells, selectedColumns, handleCellClick);
-    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, selectedCells, selectedColumns, handleCellClick);
+    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);
+    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);
+    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);
     const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
         const tableItemsCount = itemsCount;
         const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
@@ -138,8 +110,8 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         handleScroll,
         scrollToIndex,
         areTotalRowsNotFillingHeight,
-        selectedCells,
-        selectedColumns,
+        selectedCell,
+        selectedColumn,
         handleCellClick,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
@@ -156,12 +128,12 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
         if (columnsData.length === 0)
             return null;
-        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, selectedColumns: selectedColumns, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+        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: {
                             width: '100%',
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
     };
-    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, selectedColumns: selectedColumns, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    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: {
                                                     width: '100%',
                                                     minWidth: 'fit-content',
                                                 } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.d.ts

@@ -3,5 +3,5 @@ interface InputsI {
     onCloseDropdown: () => void;
     filter: IColumnFilter & IColumnFilterInputs;
 }
-declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter } }: InputsI): import("react/jsx-runtime").JSX.Element;
+declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick } }: InputsI): import("react/jsx-runtime").JSX.Element;
 export default Inputs;

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { grayCloseIcon, searchIcon } from '../../../../../constants/index.js';
 import { Wrapper, Text, InputStyled, InputsWrapper, ClearButton, ClearWrapper } from './style';
 import { CancelButton, Footer, OkayButton } from '../style';
-function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter } }) {
+function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick } }) {
     const [values, setValues] = useState({});
     useEffect(() => {
         setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
@@ -21,6 +21,7 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
         onCloseDropdown();
     };
     const onClickClear = () => {
+        onColumnFilterClearClick === null || onColumnFilterClearClick === void 0 ? void 0 : onColumnFilterClearClick();
         setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
     };
     const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;

package/build/components/VirtualTable/components/TableRow.d.ts

@@ -11,11 +11,11 @@ interface ITableRowProps<R = any> {
         showLoadedStyle?: boolean;
     };
     isSheetView?: boolean;
-    selectedCells?: Set<string>;
-    selectedColumns?: Set<string>;
+    selectedCell?: string | null;
+    selectedColumn?: string | null;
     onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
     isLastRow?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells, selectedColumns, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

package/build/components/VirtualTable/components/TableRow.js

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from '../style';
 import { getBorderStyle } from '../utils/getBorderStyle';
-function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells = new Set(), selectedColumns = new Set(), onCellClick, isLastRow = false, }) {
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -16,8 +16,8 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells =
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             const columnIdStr = String(column.id);
             const cellKey = `${index}-${columnIdStr}`;
-            const isCellSelected = selectedCells.has(cellKey);
-            const isColumnSelected = selectedColumns.has(columnIdStr);
+            const isCellSelected = selectedCell === cellKey;
+            const isColumnSelected = selectedColumn === columnIdStr;
             const isSelected = isCellSelected || isColumnSelected;
             const borderStyle = getBorderStyle({
                 isSelected,
@@ -25,8 +25,8 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells =
                 isColumnSelected,
                 isLastRow,
             });
-            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "SheetViewTableRow_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}`));
-        }) })), [columns, row, index, selectedCells, selectedColumns, onCellClick, isLastRow]);
+            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}`));
+        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
     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));
 }
 export default memo(TableRow, areEqual);

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js

@@ -68,7 +68,7 @@ function ListItemWrapper(_a) {
                         height: '100%',
                     } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
         }
-        return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCells: restData.selectedCells, selectedColumns: restData.selectedColumns, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
+        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}`));
     }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
     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 })) })));
 }

package/build/hooks/useCheckUserLoggedIn.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { isUserLoggedInAndJwtTokenExistsAndNotExpired } from '../utils/index.js';
 export const useCheckUserLoggedIn = () => {
     const { pathname } = useLocation();

package/build/types/table.d.ts

@@ -134,6 +134,7 @@ export type ColumnFilterValues = Record<string, string | string[] | {
 export type IColumnFilter = ({
     onConfirm?: (filterValues: ColumnFilterValues) => void;
     onClear: (apiKeys: string[]) => void;
+    onColumnFilterClearClick?: () => void;
     data?: ColumnFilterValues;
     isOnlyOneFilter?: boolean;
 } & (IColumnFilterList | IColumnFilterInputs | IColumnFilterCustom));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.209",
+  "version": "0.0.212",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",