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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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 { useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router-dom';
 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,6 +17,7 @@ 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(() => {
@@ -49,11 +50,12 @@ 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,6 +1,4 @@
-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;
@@ -17,9 +15,6 @@ interface RangeCalendarProps {
     onChangeTimezone?: (timezone: Timezone) => void;
     defaultTimezone: Timezone;
     browserTimezone: string;
-    calendarPopperSx?: SxProps;
-    renderTrigger?: (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, calendarPopperSx, renderTrigger, mainSx, }: 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, }: 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, calendarPopperSx, renderTrigger, mainSx, }) {
+function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }) {
     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", sx: mainSx }, { children: [renderTrigger ? (renderTrigger(open, onOpenCalender)) : (_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" }, { children: [_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: 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) => {
+                } })), _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) => {
                                                 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';
+import { Navigate } from 'react-router-dom';
 function PrivateRoute({ children, isLoggedIn }) {
     if (!isLoggedIn) {
         return _jsx(Navigate, { to: "/login" });

package/build/components/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -272,9 +272,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -11,7 +11,9 @@ interface SheetViewTableHeaderProps {
     onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
     isPinnable?: boolean;
     lastColumnId?: string | null;
+    selectedColumns?: Set<string>;
+    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
 }
-declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumns, 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, }) {
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumns = new Set(), onColumnClick, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const theme = useTheme();
@@ -44,7 +44,11 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isLast = id === columns[columns.length - 1].id;
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
-                    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}`));
+                    const isSelected = selectedColumns.has(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);
+                                }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));
                 }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
                     {
                         label: 'Sort A-Z',

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) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCells, selectedColumns, onCellClick) => ({
     columns,
     isLoading,
     rows,
@@ -39,12 +39,56 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     newLoadedRowsEndIndex: lastItemIndex,
     isSheetView: true,
     isPinned,
+    selectedCells,
+    selectedColumns,
+    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, }) {
     var _a, _b, _c;
     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 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());
+        }
+    }, []);
+    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());
+        }
+    }, []);
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
@@ -61,9 +105,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);
-    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);
-    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);
+    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 createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
         const tableItemsCount = itemsCount;
         const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
@@ -94,6 +138,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         handleScroll,
         scrollToIndex,
         areTotalRowsNotFillingHeight,
+        selectedCells,
+        selectedColumns,
+        handleCellClick,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
     const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
@@ -109,12 +156,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 })), _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, selectedColumns: selectedColumns, 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 }) })), _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, selectedColumns: selectedColumns, 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, onClearValuesClick } }: InputsI): import("react/jsx-runtime").JSX.Element;
+declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter } }: 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, onClearValuesClick } }) {
+function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter } }) {
     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,7 +21,6 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
         onCloseDropdown();
     };
     const onClickClear = () => {
-        onClearValuesClick === null || onClearValuesClick === void 0 ? void 0 : onClearValuesClick();
         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,7 +11,11 @@ interface ITableRowProps<R = any> {
         showLoadedStyle?: boolean;
     };
     isSheetView?: boolean;
+    selectedCells?: Set<string>;
+    selectedColumns?: Set<string>;
+    onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    isLastRow?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells, selectedColumns, 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

@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from '../style';
-function TableRow({ row, columns, index, rowProps, isSheetView }) {
+import { getBorderStyle } from '../utils/getBorderStyle';
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCells = new Set(), selectedColumns = new Set(), onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -13,8 +14,19 @@ function TableRow({ row, columns, index, rowProps, isSheetView }) {
         return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
-            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}`));
-        }) })), [columns, row]);
+            const columnIdStr = String(column.id);
+            const cellKey = `${index}-${columnIdStr}`;
+            const isCellSelected = selectedCells.has(cellKey);
+            const isColumnSelected = selectedColumns.has(columnIdStr);
+            const isSelected = isCellSelected || isColumnSelected;
+            const borderStyle = getBorderStyle({
+                isSelected,
+                isCellSelected,
+                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 (_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 }, `row-${index}`);
+        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}`));
     }, [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/components/VirtualTable/style.d.ts

@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/utils/getBorderStyle.d.ts

@@ -0,0 +1,41 @@
+interface GetBorderStyleParams {
+    isSelected: boolean;
+    isCellSelected: boolean;
+    isColumnSelected: boolean;
+    isLastRow: boolean;
+}
+export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
+    border?: undefined;
+    backgroundColor?: undefined;
+    borderWidth?: undefined;
+    borderStyle?: undefined;
+    borderColor?: undefined;
+    borderBottom?: undefined;
+    height?: undefined;
+    minHeight?: undefined;
+    display?: undefined;
+    alignItems?: undefined;
+} | {
+    border: string;
+    backgroundColor: string;
+    borderWidth?: undefined;
+    borderStyle?: undefined;
+    borderColor?: undefined;
+    borderBottom?: undefined;
+    height?: undefined;
+    minHeight?: undefined;
+    display?: undefined;
+    alignItems?: undefined;
+} | {
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+    borderBottom: string;
+    backgroundColor: string;
+    height: string;
+    minHeight: string;
+    display: string;
+    alignItems: string;
+    border?: undefined;
+};
+export {};

package/build/components/VirtualTable/utils/getBorderStyle.js

@@ -0,0 +1,24 @@
+export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
+    if (!isSelected)
+        return {};
+    if (isCellSelected && !isColumnSelected) {
+        return {
+            border: '0.5px solid #1F88D0',
+            backgroundColor: '#F4F9FC',
+        };
+    }
+    if (isColumnSelected) {
+        return {
+            borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
+            borderStyle: 'solid',
+            borderColor: '#1F88D0',
+            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '0.5px solid #1F88D0',
+            backgroundColor: '#F4F9FC',
+            height: '100%',
+            minHeight: '28px',
+            display: 'flex',
+            alignItems: 'center',
+        };
+    }
+    return {};
+};

package/build/constants/table/cell/chargeTableCellWidth.d.ts

@@ -97,7 +97,7 @@ export declare const chargeTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "131px";
+        readonly sheet: "135px";
     };
     readonly fees: {
         readonly default: "150px";

package/build/constants/table/cell/chargeTableCellWidth.js

@@ -97,7 +97,7 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '131px',
+        sheet: '135px',
     },
     fees: {
         default: '150px',

package/build/hooks/useCheckUserLoggedIn.js

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

package/build/types/table.d.ts

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

package/package.json

@@ -1,132 +1,132 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.207",
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^7.7.0",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.0.209",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}