@tap-payments/os-micro-frontend-shared 0.0.216-test.3 → 0.0.217-test.4

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/TableCells/CustomCells/ActionCell/ActionIconColumn.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ActionCellProps } from '../type';
+type ActionIconColumnProps = Readonly<Pick<ActionCellProps, 'actions' | 'dropdownAction' | 'onCloseDropdown' | 'isDropdownShown' | 'renderDropdown'>>;
+declare function ActionIconColumn({ actions, dropdownAction, onCloseDropdown, isDropdownShown, renderDropdown, ...props }: ActionIconColumnProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ActionIconColumn>;
+export default _default;

package/build/components/TableCells/CustomCells/ActionCell/ActionIconColumn.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import Dropdown from '../../../DropdownMenu';
+import { TableCell } from '../../../TableCells';
+import ActionIconsVariants from './components/ActionIconsVariants';
+import { actionIcons } from './constant';
+import { useActionCell } from './hooks/useActionCell';
+import { ActionIcon, ActionsIconContainer } from './style';
+import { TransparentButton } from '../style';
+function ActionIconColumn(_a) {
+    var { actions, dropdownAction, onCloseDropdown, isDropdownShown = true, renderDropdown } = _a, props = __rest(_a, ["actions", "dropdownAction", "onCloseDropdown", "isDropdownShown", "renderDropdown"]);
+    const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, setAnchorEl, } = useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown });
+    return (_jsx(TableCell, Object.assign({}, props, { sx: {
+            overflow: 'visible',
+        } }, { children: _jsx("div", Object.assign({ "data-testid": "ActionIconColumn_Container", style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '5px',
+            } }, { children: _jsxs(ActionsIconContainer, Object.assign({ id: "styled-popover", selected: !!dropdownAction || open, "data-testid": "ActionIconColumn_ActionsIconContainer", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
+                    pointerEvents: 'none',
+                })) }, { children: [_jsx(TransparentButton, Object.assign({ onClick: handleClick, "data-testid": "ActionIconColumn_ActionsIconContainer_TransparentButton", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
+                            pointerEvents: 'none',
+                        })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), renderDropdown ? (renderDropdown(anchorEl, setAnchorEl)) : (_jsxs(_Fragment, { children: [dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: (e) => {
+                                        var _a;
+                                        (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
+                                        if (!action.hasActionMenu) {
+                                            handleClose();
+                                        }
+                                    }, onRightClick: (e) => {
+                                        var _a;
+                                        (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
+                                        handleClose();
+                                    }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] })) })) })));
+}
+export default memo(ActionIconColumn);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ActionCellProps } from '../type';
+import { TableMode } from '../../../../types/index.js';
+type ActionsColumnProps = Readonly<Pick<ActionCellProps, 'flag' | 'flagTooltip' | 'flagsCount' | 'row' | 'showJsonViewer' | 'isTextShown' | 'showIdButton' | 'rowId'>> & {
+    onJsonViewClick?: () => void;
+    tableMode?: TableMode;
+};
+declare function ActionsColumn({ flag, flagTooltip, flagsCount, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, tableMode, ...props }: ActionsColumnProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ActionsColumn>;
+export default _default;

package/build/components/TableCells/CustomCells/ActionCell/ActionsColumn.js

@@ -0,0 +1,78 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../../Tooltip';
+import { TableCell } from '../../../TableCells';
+import StyledBadge, { BadgeVariants } from '../../../CountBadge';
+import { jsonBlackIcon } from '../../../../constants/index.js';
+import { colorToVariant, flags } from './constant';
+import { ActionCellContainer, ActionIcon } from './style';
+import { IDButton } from '../IDButton';
+import { BadgeWrapper, IdButtonContainer, TextLabel, TransparentButton } from '../style';
+import SheetViewIDButton from '../SheetViewIDButton/SheetViewIDButton';
+function ActionsColumn(_a) {
+    var _b, _c;
+    var { flag, flagTooltip, flagsCount, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode } = _a, props = __rest(_a, ["flag", "flagTooltip", "flagsCount", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode"]);
+    const { t } = useTranslation();
+    return (_jsx(TableCell, Object.assign({}, props, { sx: {
+            overflow: 'visible',
+        } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionsColumn_ActionCellContainer", tableMode: tableMode }, { children: [flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionsColumn_FlagLabel", sx: {
+                                textAlign: 'left',
+                                justifyContent: 'flex-start',
+                            } }, { children: flagTooltip })) }))) : (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsxs(BadgeWrapper, Object.assign({ "data-testid": "ActionsColumn_FlagBadge", sx: {
+                                paddingInline: '12px',
+                                width: 'auto',
+                                alignItems: 'center',
+                                position: 'relative',
+                                zIndex: 21,
+                                gap: '0px',
+                            }, whileHover: ['animate', 'fadeIn'], variants: {
+                                animate: {
+                                    gap: '4px',
+                                },
+                            } }, { children: [_jsx(ActionIcon, { "data-testid": "ActionsColumn_FlagIcon", sx: {
+                                        width: '12px',
+                                        height: '11px',
+                                    }, src: (_b = flags[flag]) === null || _b === void 0 ? void 0 : _b.icon, alt: "flag-icon" }), (flagsCount !== null && flagsCount !== void 0 ? flagsCount : 0) > 1 && (_jsx(motion.div, Object.assign({ "data-testid": "ActionsColumn_StyledBadge_Container", style: {
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        gap: '4px',
+                                        display: 'flex',
+                                        zIndex: 10,
+                                    }, initial: { width: 0, opacity: 0 }, transition: {
+                                        animate: {
+                                            duration: 0.5,
+                                        },
+                                        fadeIn: {
+                                            duration: 0.2,
+                                        },
+                                    }, variants: {
+                                        animate: {
+                                            width: 'auto',
+                                        },
+                                        fadeIn: {
+                                            transition: {
+                                                delay: 0.5,
+                                            },
+                                            opacity: 1,
+                                        },
+                                    } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: colorToVariant[(_c = flags[flag]) === null || _c === void 0 ? void 0 : _c.color] || BadgeVariants.ORANGE, "data-testid": "ActionsColumn_StyledBadge" }, { children: [flagsCount, "x"] })) })))] })) }))) })), showIdButton ? (tableMode === 'sheet' ? (_jsx(SheetViewIDButton, { rowId: rowId || row.id })) : (_jsx(IDButton, { rowId: rowId || row.id }))) : null, _jsx("div", Object.assign({ "data-testid": "ActionsColumn_IconsContainer", style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '5px',
+                    } }, { children: showJsonViewer && (_jsx(TransparentButton, Object.assign({ onClick: onJsonViewClick, type: "button", "data-testid": "ActionsColumn_TransparentButton" }, { children: _jsx(Tooltip, Object.assign({ title: t('jsonViewer') }, { children: _jsx(IdButtonContainer, Object.assign({ tableMode: tableMode, "data-testid": "ActionsColumn_IdButtonContainer" }, { children: tableMode === 'sheet' ? (_jsx("span", Object.assign({ style: { fontSize: '11px', fontWeight: 400 } }, { children: "View API" }))) : (_jsx(motion.img, { src: jsonBlackIcon, alt: "icon" }, "id-icon")) })) })) }))) }))] })) })));
+}
+export default memo(ActionsColumn);

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

@@ -1,3 +1,5 @@
 export { default as ActionCell } from './ActionCell';
+export { default as ActionsColumn } from './ActionsColumn';
+export { default as ActionIconColumn } from './ActionIconColumn';
 export * from './components';
 export * from './type';

package/build/components/TableCells/CustomCells/ActionCell/index.js

@@ -1,3 +1,5 @@
 export { default as ActionCell } from './ActionCell';
+export { default as ActionsColumn } from './ActionsColumn';
+export { default as ActionIconColumn } from './ActionIconColumn';
 export * from './components';
 export * from './type';

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;
+    selectedColumn?: string | null;
+    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, 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, }) {
+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,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 = 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);
+                                }, 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, selectedCell, selectedColumn, onCellClick) => ({
     columns,
     isLoading,
     rows,
@@ -39,12 +39,28 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     newLoadedRowsEndIndex: lastItemIndex,
     isSheetView: true,
     isPinned,
+    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, }) {
     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 [selectedCell, setSelectedCell] = useState(null);
+    const [selectedColumn, setSelectedColumn] = useState(null);
+    const handleCellClick = useCallback((rowIndex, columnId, event) => {
+        event.stopPropagation();
+        const cellKey = `${rowIndex}-${columnId}`;
+        setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
+        setSelectedColumn(null);
+    }, []);
+    const handleColumnClick = useCallback((columnId, event) => {
+        event.stopPropagation();
+        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
+        setSelectedCell(null);
+    }, []);
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
@@ -61,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);
-    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, 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* () {
@@ -94,6 +110,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         handleScroll,
         scrollToIndex,
         areTotalRowsNotFillingHeight,
+        selectedCell,
+        selectedColumn,
+        handleCellClick,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
     const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
@@ -109,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 })), _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 }) })), _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/TableRow.d.ts

@@ -11,7 +11,11 @@ interface ITableRowProps<R = any> {
         showLoadedStyle?: boolean;
     };
     isSheetView?: boolean;
+    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 }: 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

@@ -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, 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)
@@ -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 = selectedCell === cellKey;
+            const isColumnSelected = selectedColumn === columnIdStr;
+            const isSelected = isCellSelected || isColumnSelected;
+            const borderStyle = getBorderStyle({
+                isSelected,
+                isCellSelected,
+                isColumnSelected,
+                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 }, `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/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";
@@ -159,4 +159,14 @@ export declare const chargeTableCellWidth: {
         readonly text: "52px";
         readonly sheet: "52px";
     };
+    readonly actionIcon: {
+        readonly default: "30px";
+        readonly text: "30px";
+        readonly sheet: "30px";
+    };
+    readonly actionIconSheet: {
+        readonly default: "100px";
+        readonly text: "100px";
+        readonly sheet: "300px";
+    };
 };

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',
@@ -159,4 +159,14 @@ export const chargeTableCellWidth = {
         text: '52px',
         sheet: '52px',
     },
+    actionIcon: {
+        default: '30px',
+        text: '30px',
+        sheet: '30px',
+    },
+    actionIconSheet: {
+        default: '100px',
+        text: '100px',
+        sheet: '300px',
+    },
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.216-test.3",
-  "testVersion": 3,
+  "version": "0.0.217-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -61,7 +61,7 @@
   "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",
-    "test-publish": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
     "dev": "vite",
     "build": "tsc -b && vite build ",
     "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",