@tap-payments/os-micro-frontend-shared 0.1.15 → 0.1.17

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/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ChipProps } from './type';
-declare const Chip: import("react").ForwardRefExoticComponent<Omit<ChipProps, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material").Theme>>>>;
+declare const Chip: import("react").FC<ChipProps>;
 export default Chip;

package/build/components/Chip/style.js

@@ -19,18 +19,18 @@ export const ChipStyled = styled(forwardRef((props, ref) => {
     return _jsx(Box, Object.assign({ ref: ref }, restProps, { className: calcClassName }));
 }), {
     shouldForwardProp: (prop) => prop !== 'icon',
-})(({ theme, icon }) => {
-    return Object.assign(Object.assign({ border: `1px solid ${theme.palette.divider}`, borderRadius: '30px', backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }, (icon && { justifyContent: 'flex-start', gap: theme.spacing(1) })), { '&.CustomVariant_text': {
-            padding: `${theme.spacing(0.75)} ${theme.spacing(1)}`,
-            height: '30px',
-            maxWidth: '150px',
-        }, '&.CustomVariant_circular': {
-            height: 24,
-            width: 24,
-        }, '&.CustomVariant_pill-icon': {
-            height: 24,
-            width: 36,
-        } });
+})(({ theme, variant = 'text', icon }) => {
+    return Object.assign(Object.assign(Object.assign(Object.assign({ border: `1px solid ${theme.palette.divider}`, borderRadius: '30px', backgroundColor: theme.palette.background.paper, display: 'flex', alignItems: 'center', justifyContent: 'center' }, (icon && { justifyContent: 'flex-start', gap: theme.spacing(1) })), (variant === 'text' && {
+        padding: `${theme.spacing(0.75)} ${theme.spacing(1)}`,
+        height: '30px',
+        maxWidth: '150px',
+    })), (variant === 'circular' && {
+        height: 24,
+        width: 24,
+    })), (variant === 'pill-icon' && {
+        height: 24,
+        width: 36,
+    }));
 });
 export const StyledSourceCell = styled('span')(({ theme }) => ({
     display: 'flex',

package/build/components/TableCells/CustomCells/TerminalsBrandCell/TerminalsBrandCell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TextAndLang } from '../../../../types/index.js';
+type TerminalsBrandCellProps = {
+    name: TextAndLang[];
+    icon?: React.ReactNode;
+    displayRules: {
+        showIcon: boolean;
+        showLabel: boolean;
+    };
+};
+declare const TerminalsBrandCell: (props: TerminalsBrandCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TerminalsBrandCell;

package/build/components/TableCells/CustomCells/TerminalsBrandCell/TerminalsBrandCell.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { Chip, Tooltip } from '../../../index.js';
+import { getNameText } from '../../../../utils/index.js';
+const TerminalsBrandCell = (props) => {
+    const { name, icon, displayRules } = props;
+    const { i18n } = useTranslation();
+    if (!name && !icon)
+        return null;
+    const { showIcon, showLabel } = displayRules;
+    const brandName = name ? getNameText(name, i18n.language) : '';
+    const displayLabel = showLabel && !!brandName;
+    const displayIcon = showIcon && !!icon;
+    if (!displayIcon && !displayLabel)
+        return null;
+    return (_jsxs(Stack, Object.assign({ "data-testid": "TerminalsBrandCell", direction: "row", alignItems: "center", spacing: 1, color: "text.primary" }, { children: [displayIcon && (_jsx(Chip, Object.assign({ variant: "circular", sx: { '&.CustomVariant_circular': { minWidth: 32, height: 32 } } }, { children: icon }))), displayLabel && (_jsx(Tooltip, Object.assign({ title: brandName }, { children: _jsx(Typography, Object.assign({ noWrap: true, fontSize: 12, fontWeight: 500 }, { children: brandName })) })))] })));
+};
+export default TerminalsBrandCell;

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

@@ -0,0 +1 @@
+export { default as TerminalsBrandCell } from './TerminalsBrandCell';

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

@@ -0,0 +1 @@
+export { default as TerminalsBrandCell } from './TerminalsBrandCell';

package/build/components/TableCells/CustomCells/TerminalsPlatformCell/TerminalsPlatformCell.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TextAndLang } from '../../../../types/index.js';
+type TerminalsPlatformCellProps = {
+    name: TextAndLang[];
+    icon?: React.ReactNode;
+    displayRules?: {
+        showIcon?: boolean;
+        showLabel?: boolean;
+    };
+};
+declare const _default: import("react").MemoExoticComponent<({ name, icon, displayRules }: TerminalsPlatformCellProps) => import("react/jsx-runtime").JSX.Element | null>;
+export default _default;

package/build/components/TableCells/CustomCells/TerminalsPlatformCell/TerminalsPlatformCell.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Chip, Tooltip } from '../../../index.js';
+import { getNameText } from '../../../../utils/index.js';
+const TerminalsPlatformCell = ({ name, icon, displayRules }) => {
+    const { i18n } = useTranslation();
+    const { showIcon = true, showLabel = true } = displayRules || {};
+    const platformName = getNameText(name, i18n.language);
+    const displayIcon = showIcon && !!icon;
+    const displayLabel = showLabel || !!platformName;
+    if (!displayIcon && !displayLabel)
+        return null;
+    return (_jsxs(Stack, Object.assign({ "data-testid": "TerminalsPlatformCell", direction: "row", alignItems: "center", spacing: 1, color: "text.primary" }, { children: [displayIcon && (_jsx(Chip, Object.assign({ variant: "circular", sx: { '&.CustomVariant_circular': { minWidth: 32, height: 32 } } }, { children: icon }))), displayLabel && (_jsx(Tooltip, Object.assign({ title: platformName }, { children: _jsx(Typography, Object.assign({ noWrap: true, fontSize: 12, fontWeight: 500 }, { children: platformName || (_jsx(Box, Object.assign({ component: "span", sx: { opacity: 0.2 } }, { children: "Unavailable" }))) })) })))] })));
+};
+export default memo(TerminalsPlatformCell);

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

@@ -0,0 +1 @@
+export { default as TerminalsPlatformCell } from './TerminalsPlatformCell';

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

@@ -0,0 +1 @@
+export { default as TerminalsPlatformCell } from './TerminalsPlatformCell';

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

@@ -44,5 +44,7 @@ export * from './MarketPlaceCell';
 export * from './IndividualsCell';
 export * from './BrandsCell';
 export * from './SalesChannelCell';
+export * from './TerminalsBrandCell';
+export * from './TerminalsPlatformCell';
 export * from './type';
 export * from './style';

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

@@ -44,5 +44,7 @@ export * from './MarketPlaceCell';
 export * from './IndividualsCell';
 export * from './BrandsCell';
 export * from './SalesChannelCell';
+export * from './TerminalsBrandCell';
+export * from './TerminalsPlatformCell';
 export * from './type';
 export * from './style';

package/build/components/TooltipChip/TooltipChip.d.ts

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react';
+import Tooltip from '../Tooltip';
+import { type ChipProps } from '../Chip';
+type TooltipChipProps = PropsWithChildren<{
+    title: React.ReactNode;
+    variant?: ChipProps['variant'];
+    slotProps?: {
+        tooltip?: React.ComponentProps<typeof Tooltip>;
+        chip?: Partial<ChipProps>;
+    };
+    children: React.ReactNode;
+}>;
+declare const TooltipChip: ({ title, slotProps, children }: TooltipChipProps) => import("react/jsx-runtime").JSX.Element;
+export default TooltipChip;

package/build/components/TooltipChip/TooltipChip.js

@@ -0,0 +1,20 @@
+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 } from "react/jsx-runtime";
+import Tooltip from '../Tooltip';
+import { StyledChip } from './style';
+const TooltipChip = ({ title, slotProps = {}, children }) => {
+    const { chip = {}, tooltip = {} } = slotProps;
+    const { sx: chipSx } = chip, chipProps = __rest(chip, ["sx"]);
+    return (_jsx(Tooltip, Object.assign({}, tooltip, { title: title }, { children: _jsx(StyledChip, Object.assign({}, chipProps, { sx: Object.assign({ height: 24, display: 'inline-flex', color: 'text.primary' }, chipSx) }, { children: children })) })));
+};
+export default TooltipChip;

package/build/components/TooltipChip/index.d.ts

@@ -0,0 +1 @@
+export { default as TooltipChip } from './TooltipChip';

package/build/components/TooltipChip/index.js

@@ -0,0 +1 @@
+export { default as TooltipChip } from './TooltipChip';

package/build/components/TooltipChip/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledChip: import("@emotion/styled").StyledComponent<{
+    variant?: import("../Chip").ChipVariant | undefined;
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactDOM | null | undefined;
+} & import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {
+    children?: import("react").ReactNode;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/TooltipChip/style.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+import { Chip } from '../Chip';
+export const StyledChip = styled(Chip)(({ theme }) => ({
+    color: theme.palette.text.primary,
+    '&.CustomVariant_text': { height: 24 },
+    display: 'inline-flex',
+}));

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -51,15 +51,16 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
-    const handleCellClick = useCallback((rowIndex, columnId, event) => {
+    const handleCellClick = useCallback((rowIndex, columnId, event, tableViewId) => {
         event.stopPropagation();
-        const cellKey = `${rowIndex}-${columnId}`;
+        const cellKey = tableViewId ? `${rowIndex}-${columnId}-${tableViewId}` : `${rowIndex}-${columnId}`;
         setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
         setSelectedColumn(null);
     }, []);
-    const handleColumnClick = useCallback((columnId, event) => {
+    const handleColumnClick = useCallback((columnId, event, tableViewId) => {
         event.stopPropagation();
-        setSelectedColumn((prev) => (prev === columnId ? null : columnId));
+        const columnKey = tableViewId ? `${columnId}-${tableViewId}` : columnId;
+        setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
         setSelectedCell(null);
     }, []);
     const onPointerDown = (e) => {

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/SheetViewTableHeader.d.ts

@@ -1,22 +1,5 @@
 /// <reference types="react" />
-import { type TableHeadProps } from '@mui/material/TableHead';
-import type { IColumnProps, IVirtualTable, TablePosition } from '../../../../../types/index.js';
-interface SheetViewTableHeaderProps {
-    columns: IColumnProps[];
-    headerProps?: TableHeadProps;
-    columnsSorting?: IVirtualTable['columnsSorting'];
-    onColumnSort?: IVirtualTable['onColumnSort'];
-    showBackDrop: boolean;
-    pinnedColumns?: string[];
-    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
-    isPinnable?: boolean;
-    lastColumnId?: string | null;
-    selectedColumn?: string | null;
-    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
-    tablePosition?: TablePosition;
-    hasPinnedStart?: boolean;
-    hasPinnedEnd?: boolean;
-}
+import { SheetViewTableHeaderProps } from './type';
 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/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/SheetViewTableHeader.js

@@ -4,7 +4,8 @@ import { StyledHeader, StyledMUITableRow } from '../../style';
 import TableCell from './TableCell';
 function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
     return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
+                const columnKey = column.tableViewId ? `${column.id}-${column.tableViewId}` : column.id;
+                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(SheetViewTableHeader);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.d.ts

@@ -8,6 +8,6 @@ interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort'
     isSelected: boolean;
     isDefaultPinned: boolean;
 }
-declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableCell>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.js

@@ -6,7 +6,7 @@ import ColumnFilter from '../../../components/ColumnFilter';
 import { StyledCell } from '../../../components/style';
 import { PinIconContainer, HeaderText } from '../../style';
 import ColumnSort from '../../../../VirtualTables/components/ColumnSort';
-function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
+function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, tableViewId }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
     const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
     const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
@@ -24,7 +24,7 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
         }
     };
     return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
-            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
+            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event, tableViewId);
             setColumnFilterEl(event.currentTarget);
         }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {
                 content: '""',
@@ -35,9 +35,9 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
                 left: 0,
                 bottom: 0,
             } }, 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(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
-                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
+                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event, tableViewId);
                 } }))), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
-                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e);
+                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, e, tableViewId);
                 } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
                     event.stopPropagation();
                     handlePinClick(id);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/type.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { TableHeaderProps } from '../../../../VirtualTables/components/TableHeader/type';
-import { IColumnProps, IVirtualTable } from '../../../../../types/index.js';
+import { type TableHeadProps } from '@mui/material/TableHead';
+import { IColumnProps, IVirtualTable, TablePosition } from '../../../../../types/index.js';
 export interface SheetViewTableHeaderProps {
     columns: IColumnProps[];
-    headerProps?: TableHeaderProps;
+    headerProps?: TableHeadProps;
     columnsSorting?: IVirtualTable['columnsSorting'];
     onColumnSort?: IVirtualTable['onColumnSort'];
     showBackDrop: boolean;
@@ -12,5 +12,8 @@ export interface SheetViewTableHeaderProps {
     isPinnable?: boolean;
     lastColumnId?: string | null;
     selectedColumn?: string | null;
-    onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    onColumnClick?: (columnId: string, event: React.MouseEvent, tableViewId?: string) => void;
+    tablePosition?: TablePosition;
+    hasPinnedStart?: boolean;
+    hasPinnedEnd?: boolean;
 }

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

@@ -13,7 +13,7 @@ interface ITableRowProps<R = any> {
     isSheetView?: boolean;
     selectedCell?: string | null;
     selectedColumn?: string | null;
-    onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
+    onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent, tableViewId?: string) => void;
     isLastRow?: boolean;
 }
 declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;

package/build/components/VirtualTables/components/TableRow.js

@@ -15,9 +15,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             const columnIdStr = String(column.id);
-            const cellKey = `${index}-${columnIdStr}`;
+            const cellKey = column.tableViewId ? `${index}-${columnIdStr}-${column.tableViewId}` : `${index}-${columnIdStr}`;
             const isCellSelected = selectedCell === cellKey;
-            const isColumnSelected = selectedColumn === columnIdStr;
+            const columnKey = column.tableViewId ? `${columnIdStr}-${column.tableViewId}` : columnIdStr;
+            const isColumnSelected = selectedColumn === columnKey;
             const isSelected = isCellSelected || isColumnSelected;
             const selectionStyles = getSelectionStyles({
                 isSelected,
@@ -33,7 +34,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 effectiveFirst = isFirstColumn && column.pinned !== 'start';
                 effectiveLast = isLastColumn && column.pinned !== 'end';
             }
-            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: effectiveFirst, isLast: effectiveLast, 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: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${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: effectiveFirst, isLast: effectiveLast, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event, column.tableViewId), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { 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));
 }

package/build/components/index.d.ts

@@ -96,3 +96,4 @@ export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
+export * from './TooltipChip';

package/build/components/index.js

@@ -96,3 +96,4 @@ export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
+export * from './TooltipChip';

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

@@ -1,8 +1,8 @@
 export declare const terminalsTableCellWidth: {
     readonly device: {
-        readonly default: "180px";
-        readonly text: "180px";
-        readonly sheet: "180px";
+        readonly default: "120px";
+        readonly text: "120px";
+        readonly sheet: "120px";
     };
     readonly terminalId: {
         readonly default: "100px";

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

@@ -1,8 +1,8 @@
 export const terminalsTableCellWidth = {
     device: {
-        default: '180px',
-        text: '180px',
-        sheet: '180px',
+        default: '120px',
+        text: '120px',
+        sheet: '120px',
     },
     terminalId: {
         default: '100px',

package/build/types/user.d.ts

@@ -78,8 +78,6 @@ export interface Segment {
             };
         };
     };
-    is_business_segment?: boolean;
-    is_segment_has_more_than_one_merchant?: boolean;
 }
 interface SegmentUserName {
     first: string;

package/package.json

@@ -1,134 +1,134 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.15",
-  "testVersion": 0,
-  "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 run ts:build && npm publish --access public",
-    "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}\"",
-    "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.1.17",
+  "testVersion": 0,
+  "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 run ts:build && npm publish --access public",
+    "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}\"",
+    "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/"
+  }
+}