@tap-payments/os-micro-frontend-shared 0.1.37 → 0.1.38

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

@@ -1,3 +1,3 @@
 import { MaskedTextProps } from './type';
-declare const MaskedText: ({ text, startLength, endLength }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
+declare const MaskedText: ({ text, startLength, endLength, chipIndex, copyText, selectionProps }: MaskedTextProps) => import("react/jsx-runtime").JSX.Element;
 export default MaskedText;

package/build/components/MaskedText/MaskedText.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import StatusChip from '../StatusChip';
+import StatusChipWithCopy from '../StatusChipWithCopy';
 import { passwordDotsIcon } from '../../constants/index.js';
-const MaskedText = ({ text, startLength = 8, endLength = 4 }) => {
+const MaskedText = ({ text, startLength = 8, endLength = 4, chipIndex, copyText, selectionProps }) => {
     const startText = text.slice(0, startLength);
     const endText = text.slice(text.length - endLength);
-    return (_jsxs(StatusChip, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [startText, _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), endText] })));
+    return (_jsxs(StatusChipWithCopy, Object.assign({ chipIndex: chipIndex, copyText: copyText, selectionProps: selectionProps }, { children: [startText, _jsx("img", { src: passwordDotsIcon, alt: "passwordDots" }), endText] })));
 };
 export default MaskedText;

package/build/components/MaskedText/type.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-export interface MaskedTextProps {
+import { StatusChipWithCopyProps } from '../StatusChipWithCopy';
+export interface MaskedTextProps extends StatusChipWithCopyProps {
     text: string;
     startLength?: number;
     endLength?: number;

package/build/components/StatusChip/StatusChip.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './type';
-declare const StatusChip: ({ children, unknownText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusChip: ({ children, unknownText, copyText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -9,16 +9,37 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { AnimatePresence, motion } from 'framer-motion';
+import { copyText as copyTextHandler } from '../../utils/index.js';
+import { blueCopyIcon, greenCheckIcon } from '../../constants/index.js';
 import { unknownGeographyColors } from './constants';
-import { ChipStyled } from './style';
+import { ChipStyled, Wrapper, CopyWrapper } from './style';
 const StatusChip = (_a) => {
-    var { children, unknownText } = _a, props = __rest(_a, ["children", "unknownText"]);
+    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
+    const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
+    const isSelected = props.isSelected;
     if (!children) {
-        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { children: unknownText ? t(unknownText) : t('unknown') })));
+        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { isSelected: false }, { children: unknownText ? t(unknownText) : t('unknown') })));
     }
-    return _jsx(ChipStyled, Object.assign({}, props, { children: children }));
+    const handleCopy = (e) => {
+        e.stopPropagation();
+        if (copyText) {
+            setShowCopy(true);
+            copyTextHandler(copyText);
+            const timer = setTimeout(() => {
+                setShowCopy(false);
+            }, 2000);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    };
+    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                        paddingRight: isSelected && copyText ? 12 : 0,
+                    }, transition: { delay: !isSelected ? 0.2 : 0 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: Object.assign({ height: 12, width: 12, objectFit: 'contain' }, (showCopy && { filter: 'none' })) }) })) })] })) }))] })));
 };
 export default StatusChip;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & 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/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     textColor?: string | undefined;
     bgColor?: string | undefined;
     borderColor?: string | undefined;
@@ -9,8 +9,18 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     padding?: string | undefined;
     unknownText?: string | undefined;
     maxWidth?: string | undefined;
+    isSelected?: boolean | undefined;
+    copyText?: string | undefined;
 } & 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").Theme>> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {
     children?: import("react").ReactNode;
+} & {
+    isSelected?: boolean | undefined;
 }, {}, {}>;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & 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/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const CopyWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & 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/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/StatusChip/style.js

@@ -1,38 +1,33 @@
-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 { Box, styled } from '@mui/material';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { SELECTION_COLORS } from '../../utils/index.js';
 export const ChipStyled = styled(Box, {
-    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth'].includes(prop),
-})((_a) => {
-    var { theme } = _a, props = __rest(_a, ["theme"]);
-    const { textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth } = props;
-    return {
-        display: 'block',
-        textAlign: 'center',
-        verticalAlign: 'middle',
-        height: '18px',
-        padding: padding || '0px 9.5px',
-        borderRadius: '30px',
-        border: `1px solid ${borderColor}`,
-        backgroundColor: bgColor,
-        color: textColor,
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        opacity: disabled ? 0.5 : 1,
-        whiteSpace: 'nowrap',
-        fontSize: '11px',
-        minWidth: '67px',
-        maxWidth: maxWidth || 'none',
-        overflow: 'hidden',
-        textOverflow: maxWidth ? 'ellipsis' : 'unset',
-        boxSizing: 'border-box',
-    };
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected'].includes(prop),
+})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, }) => {
+    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+        color: SELECTION_COLORS.primary,
+        borderColor: SELECTION_COLORS.primary,
+        img: {
+            filter: 'brightness(0) saturate(100%) invert(44%) sepia(54%) saturate(1203%) hue-rotate(170deg) brightness(91%) contrast(84%)',
+        },
+    }));
 });
+export const Wrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '4px',
+    minWidth: 46,
+    textAlign: 'center',
+}));
+export const CopyWrapper = styled(Box)(() => ({
+    position: 'absolute',
+    right: '8px',
+    top: 0,
+    height: '100%',
+    width: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+}));

package/build/components/StatusChip/type.d.ts

@@ -8,4 +8,6 @@ export type ChipProps = PropsWithChildren<{
     padding?: string;
     unknownText?: string;
     maxWidth?: string;
+    isSelected?: boolean;
+    copyText?: string;
 } & BoxProps>;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { StatusChipProps } from '../StatusChip';
+import { SelectionProps } from '../../types/index.js';
+export interface StatusChipWithCopyProps extends StatusChipProps {
+    copyText?: string;
+    chipIndex: number;
+    selectionProps: SelectionProps;
+}
+declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof StatusChipWithCopy>;
+export default _default;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.js

@@ -0,0 +1,23 @@
+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 { memo, useMemo } from 'react';
+import StatusChip from '../StatusChip';
+import { checkIsSelected } from './utils';
+function StatusChipWithCopy(_a) {
+    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
+    const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
+    return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
+        }, isSelected: isSelected }, { children: children })));
+}
+export default memo(StatusChipWithCopy);

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

@@ -0,0 +1,4 @@
+import StatusChipWithCopy from './StatusChipWithCopy';
+export * from './StatusChipWithCopy';
+export * from './utils';
+export default StatusChipWithCopy;

package/build/components/StatusChipWithCopy/index.js

@@ -0,0 +1,4 @@
+import StatusChipWithCopy from './StatusChipWithCopy';
+export * from './StatusChipWithCopy';
+export * from './utils';
+export default StatusChipWithCopy;

package/build/components/StatusChipWithCopy/utils.d.ts

@@ -0,0 +1,4 @@
+import { SelectionProps } from '../../types/index.js';
+export declare const checkIsSelected: ({ chipIndex, rowIndex, colIndex, selectedId, }: Pick<SelectionProps, "rowIndex" | "selectedId" | "colIndex"> & {
+    chipIndex: number;
+}) => boolean;

package/build/components/StatusChipWithCopy/utils.js

@@ -0,0 +1,4 @@
+export const checkIsSelected = ({ chipIndex, rowIndex, colIndex, selectedId, }) => {
+    const [, selectedRowIndex, selectedColumnIndex, selectedChipIndex] = (selectedId !== null && selectedId !== void 0 ? selectedId : '').split('-');
+    return Number(selectedRowIndex) === rowIndex && Number(selectedColumnIndex) === colIndex && Number(selectedChipIndex) === chipIndex;
+};

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

@@ -2,16 +2,4 @@
 export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & 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/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledStatusChip: import("@emotion/styled").StyledComponent<{
-    textColor?: string | undefined;
-    bgColor?: string | undefined;
-    borderColor?: string | undefined;
-    disabled?: boolean | undefined;
-    padding?: string | undefined;
-    unknownText?: string | undefined;
-    maxWidth?: string | undefined;
-} & import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & {
-    children?: import("react").ReactNode;
-} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledStatusChip: import("@emotion/styled").StyledComponent<import("../StatusChipWithCopy").StatusChipWithCopyProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/StatusGroupChips/style.js

@@ -1,12 +1,12 @@
 import { styled, Box } from '@mui/material';
-import StatusChip from '../StatusChip';
+import StatusChipWithCopy from '../StatusChipWithCopy';
 export const StyledContainer = styled(Box)(() => ({
     display: 'flex',
     gap: '4px',
     alignItems: 'center',
     flexDirection: 'row',
 }));
-export const StyledStatusChip = styled(StatusChip)(() => ({
+export const StyledStatusChip = styled(StatusChipWithCopy)(() => ({
     padding: '0.75px 12px',
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/build/components/StatusGroupChips/type.d.ts

@@ -1,10 +1,10 @@
 import type React from 'react';
-import type { BoxProps } from '@mui/material';
-export interface ChipConfig {
+import type { BoxProps } from '@mui/material/Box';
+import { StatusChipWithCopyProps } from '../StatusChipWithCopy';
+export interface ChipConfig extends Omit<StatusChipWithCopyProps, 'content'> {
     key: string;
     content: React.ReactNode;
     sx?: object;
-    onClick?: (event: React.MouseEvent) => void;
 }
 export interface StatusGroupChipsProps extends Omit<BoxProps, 'children'> {
     chips: ChipConfig[];

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

@@ -1,3 +1,3 @@
 import { DestinationCellProps } from '../type';
-declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
+declare function DestinationCell({ destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, selectionProps, ...props }: DestinationCellProps): import("react/jsx-runtime").JSX.Element | null;
 export default DestinationCell;

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

@@ -10,16 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
 import Tooltip from '../../../Tooltip';
 import { destinationSolidIcon } from '../../../../constants/index.js';
 import { formatAmount } from '../../../../utils/index.js';
 import { DestinationCellContainer, DestinationCount, StyledDestinationCell, StyledDestinationIcon } from './styled';
-import TableCell from '../../TableCell';
 import { TextLabel } from '../style';
 import { CurrencyIcon, StatusGroupChips } from '../../../index.js';
 function DestinationCell(_a) {
     var _b, _c, _d, _e, _f;
-    var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode"]);
+    var { destinationsCount, destinationsTooltip, isTextShown, destination, destinationsAmount, hidden, iconDirection, tableMode, selectionProps } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode", "selectionProps"]);
     const destinations = (destination === null || destination === void 0 ? void 0 : destination.destination) || [];
     const formattedAmount = formatAmount(destinationsAmount || 0);
     const firstDestinationFormattedAmount = formatAmount(((_b = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _b === void 0 ? void 0 : _b.amount) || 0);
@@ -30,12 +30,12 @@ function DestinationCell(_a) {
             return {
                 key: `destination-${(dest === null || dest === void 0 ? void 0 : dest.id) || index}`,
                 content: (_jsxs(_Fragment, { children: [_jsxs("div", { children: [dest === null || dest === void 0 ? void 0 : dest.id, " |"] }), _jsx(CurrencyIcon, { currency: dest === null || dest === void 0 ? void 0 : dest.currency }), _jsxs("span", { children: [formattedDestAmount.integerAmount, ".", formattedDestAmount.decimalAmount] })] })),
+                chipIndex: index,
+                selectionProps,
+                copyText: `${formattedDestAmount.integerAmount}.${formattedDestAmount.decimalAmount}`,
             };
-        }, []);
-        return (_jsx(TableCell, Object.assign({ sx: {
-                width: 'fit-content',
-                overflow: 'visible',
-            } }, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
+        }, [selectionProps]);
+        return (_jsx(Box, Object.assign({}, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
     }
     if (!destinationsCount || hidden) {
         return null;
@@ -45,9 +45,6 @@ function DestinationCell(_a) {
             justifyContent: 'flex-start',
             height: 'auto',
         } }, { children: destinationsCount > 1 ? (_jsxs("div", { children: ["Destination ", (_c = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _c === void 0 ? void 0 : _c.id, " - ", _jsx(CurrencyIcon, { currency: (_d = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _d === void 0 ? void 0 : _d.currency }), ' ', firstDestinationFormattedAmount.integerAmount, ".", firstDestinationFormattedAmount.decimalAmount, " +", destinationsCount - 1] })) : (_jsxs("div", { children: ["Destination ", (_e = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _e === void 0 ? void 0 : _e.id, " - ", _jsx(CurrencyIcon, { currency: (_f = destinations === null || destinations === void 0 ? void 0 : destinations[0]) === null || _f === void 0 ? void 0 : _f.currency }), " ", formattedAmount.integerAmount, ".", formattedAmount.decimalAmount] })) })));
-    return (_jsx(TableCell, Object.assign({ sx: {
-            width: 'fit-content',
-            overflow: 'visible',
-        } }, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, Object.assign({ tableMode: tableMode }, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] }))) : (textView) })) })));
+    return (_jsx(Box, Object.assign({}, props, { children: _jsx(Tooltip, Object.assign({ title: destinationsTooltip }, { children: !isTextShown ? (_jsxs(StyledDestinationCell, Object.assign({ tableMode: tableMode }, { children: [_jsx(StyledDestinationIcon, { src: destinationSolidIcon, pointLeft: iconDirection === 'left' }), destinationsCount > 1 && (_jsx(DestinationCellContainer, Object.assign({ destinationsCount: 1 }, { children: _jsx(DestinationCount, { children: destinationsCount }) })))] }))) : (textView) })) })));
 }
 export default DestinationCell;

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { TableCellProps } from '@mui/material';
-import type { Charge, TableMode } from '../../../types/index.js';
+import type { Charge, TableMode, SelectionProps } from '../../../types/index.js';
 import type { ActionType, FlagType } from './ActionCell';
 import { getGeographyBoxColor } from '../../../utils/index.js';
 export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
@@ -91,6 +91,7 @@ export interface DestinationCellProps extends TableCellProps {
     };
     iconDirection?: 'left' | 'right';
     tableMode?: TableMode;
+    selectionProps: SelectionProps;
 }
 export interface ActionCellProps extends TableCellProps {
     row?: unknown;

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

@@ -7,7 +7,7 @@ import { SheetViewVirtualTableWrapper } from './style';
 import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
 function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
-    const { selectedCell, selectedColumn, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick } = useTableState();
+    const { selectedCell, selectedColumn, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip } = useTableState();
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
         isLoading,
@@ -29,7 +29,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         isError,
         selectedCell,
         selectedColumn,
+        selectedChip,
         handleCellClick,
+        handleChipClick,
     });
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useTableState.d.ts

@@ -8,7 +8,9 @@ export declare const useTableState: () => {
     selectedCell: string | null;
     selectedColumn: string | null;
     showBackDrop: boolean;
+    selectedChip: string | null;
     setShowBackdrop: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     handleColumnClick: (columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     resetSelection: () => void;

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

@@ -2,28 +2,47 @@ import { useState, useCallback } from 'react';
 export const useTableState = () => {
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
+    const [selectedChip, setSelectedChip] = useState(null);
     const [showBackDrop, setShowBackdrop] = useState(false);
+    const handleChipClick = useCallback((rowIndex, columnIndex, event, chipIndex, pinnedType) => {
+        event.stopPropagation();
+        const chipKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}-${chipIndex}`;
+        const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
+        const isChipAlreadySelected = selectedChip === chipKey;
+        if (isChipAlreadySelected) {
+            setSelectedChip(null);
+            setSelectedCell(null);
+            return;
+        }
+        setSelectedChip(chipKey);
+        setSelectedCell(cellKey);
+    }, [selectedChip, setSelectedChip, setSelectedCell]);
     const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
         event.stopPropagation();
         const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
         setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
         setSelectedColumn(null);
+        setSelectedChip(null);
     }, []);
     const handleColumnClick = useCallback((columnIndex, event, pinnedType) => {
         event.stopPropagation();
         const columnKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${columnIndex}`;
         setSelectedColumn((prev) => (prev === columnKey ? null : columnKey));
         setSelectedCell(null);
+        setSelectedChip(null);
     }, []);
     const resetSelection = useCallback(() => {
         setSelectedCell(null);
         setSelectedColumn(null);
+        setSelectedChip(null);
     }, []);
     return {
         selectedCell,
         selectedColumn,
         showBackDrop,
+        selectedChip,
         setShowBackdrop,
+        handleChipClick,
         handleCellClick,
         handleColumnClick,
         resetSelection,

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { IColumnProps } from '../../../../types/index.js';
+import type { IColumnProps, TableChipProps } from '../../../../types/index.js';
 import type { TableRowProps } from '@mui/material/TableRow';
-interface UseVirtualTableContainerProps<T = unknown> {
+interface UseVirtualTableContainerProps<T = unknown> extends TableChipProps {
     rowHeight: number;
     areAllRowsLoaded?: boolean;
     rows: T[];
@@ -16,9 +16,11 @@ interface UseVirtualTableContainerProps<T = unknown> {
     isError: boolean;
     selectedCell: string | null;
     selectedColumn: string | null;
+    selectedChip: string | null;
     handleCellClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    handleChipClick: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
 }
-export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }: UseVirtualTableContainerProps<T>) => {
+export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick, }: UseVirtualTableContainerProps<T>) => {
     getItemSize: (index: number, height: number) => number;
     getItemDataForContainer: (columnsData: IColumnProps[], isPinnedColumn: boolean, height: number) => {
         columns: any;
@@ -36,7 +38,9 @@ export declare const useVirtualTableContainer: <T = unknown>({ rowHeight, areAll
         isPinned: any;
         selectedCell: any;
         selectedColumn: any;
+        selectedChip: any;
         onCellClick: any;
+        onChipClick: any;
         containerHeight: any;
         rowHeight: any;
     };

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import memoize from 'memoize-one';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
     columns,
     isLoading,
     rows,
@@ -16,11 +16,13 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     isPinned,
     selectedCell,
     selectedColumn,
+    selectedChip,
     onCellClick,
+    onChipClick,
     containerHeight,
     rowHeight,
 }));
-export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, handleCellClick, }) => {
+export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick, }) => {
     const getItemSize = useCallback((index, height) => {
         const isLastRow = areAllRowsLoaded && index === rows.length;
         if (isLastRow) {
@@ -44,7 +46,7 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
             areAllRowsLoaded,
         ];
     }, [isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount, isError, areAllRowsLoaded]);
-    const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, handleCellClick], [selectedCell, selectedColumn, handleCellClick]);
+    const commonItemDataSuffix = useMemo(() => [selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick], [selectedCell, selectedColumn, selectedChip, handleCellClick, handleChipClick]);
     const getItemDataForContainer = useCallback((columnsData, isPinnedColumn, height) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, height, rowHeight), [commonItemDataParams, commonItemDataSuffix, rowHeight]);
     return {
         getItemSize,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { TableRowProps } from '@mui/material';
+import { type TableRowProps } from '@mui/material';
 import type { IColumnProps } from '../../../types/index.js';
 interface ITableRowProps<R = any> {
     row: R;
@@ -13,9 +13,11 @@ interface ITableRowProps<R = any> {
     isSheetView?: boolean;
     selectedCell?: string | null;
     selectedColumn?: string | null;
+    selectedChip?: string | null;
     onCellClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
+    onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     isLastRow?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, selectedChip, onCellClick, isLastRow, onChipClick, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

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

@@ -1,17 +1,27 @@
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import { Box } from '@mui/material';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
 import { getSelectionStyles } from '../../../utils/index.js';
-function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
-    const renderCell = (column) => {
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
+    const renderCell = (column, rowIndex, colIndex) => {
         const { render, format, selector } = column;
+        const handleChipClick = (event, chipIndex) => {
+            onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(rowIndex, colIndex, event, chipIndex, column.pinned);
+        };
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
             return null;
         const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
         const formattedValue = format ? format({ value, row, index }) : value;
-        return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
+        return render ? (render({
+            row,
+            column,
+            index,
+            value: row[column === null || column === void 0 ? void 0 : column.id],
+            selectionProps: { onClick: handleChipClick, rowIndex, colIndex, selectedId: selectedChip },
+        })) : (_jsx(_Fragment, { children: formattedValue }));
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             var _a, _b;
@@ -34,8 +44,10 @@ 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, colIndex, event, column.pinned), 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 (_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, colIndex, event, column.pinned);
+                }, 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: _jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1, width: '100%' } }, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow, selectedChip, isSheetView]);
     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/VirtualTables/components/virtualScroll/ListItemWrapper.js

@@ -57,7 +57,7 @@ function ListItemWrapper(_a) {
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
-    const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    const rowClickHandler = React.useCallback(() => createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
     const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
     const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
         return (_jsx(Box, Object.assign({ sx: {

package/build/components/index.d.ts

@@ -98,6 +98,7 @@ export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
 export * from './RightLeftExpandingCenterChip';
+export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';

package/build/components/index.js

@@ -98,6 +98,7 @@ export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
 export * from './RightLeftExpandingCenterChip';
+export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
 export * from './RadioGroup';
 export * from './LeftPeekRightExpandingChip';

package/build/constants/assets.d.ts

@@ -524,3 +524,4 @@ export declare const deactivatedCircle: string;
 export declare const exclamationOutlinedCircle: string;
 export declare const outlinedCircle: string;
 export declare const greenCheck2ACE00: string;
+export declare const blueCopyIcon: string;

package/build/constants/assets.js

@@ -528,3 +528,4 @@ export const deactivatedCircle = `${lightUrl}/deactivatedCircle.svg`;
 export const exclamationOutlinedCircle = `${lightUrl}/exclamationOutlinedCircle.svg`;
 export const outlinedCircle = `${lightUrl}/outlinedCircle.svg`;
 export const greenCheck2ACE00 = `${lightUrl}/greenCheck2ACE00.svg`;
+export const blueCopyIcon = `${lightUrl}/blueCopyIcon.svg`;

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

@@ -12,7 +12,7 @@ export declare const chargeTableCellWidth: {
     readonly id: {
         readonly default: "225px";
         readonly text: "225px";
-        readonly sheet: "235px";
+        readonly sheet: "245px";
     };
     readonly product: {
         readonly default: "85px";
@@ -92,7 +92,7 @@ export declare const chargeTableCellWidth: {
     readonly eci: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "90px";
+        readonly sheet: "100px";
     };
     readonly amount: {
         readonly default: "170px";
@@ -152,7 +152,7 @@ export declare const chargeTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "155px";
+        readonly sheet: "165px";
     };
     readonly fees: {
         readonly default: "150px";
@@ -162,7 +162,7 @@ export declare const chargeTableCellWidth: {
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "265px";
+        readonly sheet: "275px";
     };
     readonly settlement: {
         readonly default: "200px";
@@ -187,7 +187,7 @@ export declare const chargeTableCellWidth: {
     readonly card_number: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "145px";
+        readonly sheet: "155px";
     };
     readonly auth_code: {
         readonly default: "80px";
@@ -202,12 +202,12 @@ export declare const chargeTableCellWidth: {
     readonly device: {
         readonly default: "70px";
         readonly text: "190px";
-        readonly sheet: "225px";
+        readonly sheet: "235px";
     };
     readonly card_no: {
         readonly default: "120px";
         readonly text: "120px";
-        readonly sheet: "190px";
+        readonly sheet: "200px";
     };
     readonly meta: {
         readonly default: "52px";

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

@@ -12,7 +12,7 @@ export const chargeTableCellWidth = {
     id: {
         default: '225px',
         text: '225px',
-        sheet: '235px',
+        sheet: '245px',
     },
     product: {
         default: '85px',
@@ -92,7 +92,7 @@ export const chargeTableCellWidth = {
     eci: {
         default: '150px',
         text: '150px',
-        sheet: '90px',
+        sheet: '100px',
     },
     amount: {
         default: '170px',
@@ -152,7 +152,7 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '155px',
+        sheet: '165px',
     },
     fees: {
         default: '150px',
@@ -162,7 +162,7 @@ export const chargeTableCellWidth = {
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '265px',
+        sheet: '275px',
     },
     settlement: {
         default: '200px',
@@ -187,7 +187,7 @@ export const chargeTableCellWidth = {
     card_number: {
         default: '120px',
         text: '120px',
-        sheet: '145px',
+        sheet: '155px',
     },
     auth_code: {
         default: '80px',
@@ -202,12 +202,12 @@ export const chargeTableCellWidth = {
     device: {
         default: '70px',
         text: '190px',
-        sheet: '225px',
+        sheet: '235px',
     },
     card_no: {
         default: '120px',
         text: '120px',
-        sheet: '190px',
+        sheet: '200px',
     },
     meta: {
         default: '52px',

package/build/types/table.d.ts

@@ -47,11 +47,21 @@ export interface TableFooterProps extends BoxProps {
     maximized?: boolean;
     children?: React.ReactNode;
 }
+export interface TableChipProps {
+    onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
+}
+export interface SelectionProps {
+    onClick?: (event: React.MouseEvent, index: number) => void;
+    colIndex?: number;
+    rowIndex?: number;
+    selectedId?: string | null;
+}
 export interface IRenderAttr<R, C> {
     row: R;
     column: C;
     index: number;
     value: any;
+    selectionProps?: SelectionProps;
 }
 export interface IFormatAttr<R> {
     value: string | Record<string, any> | number;

package/build/utils/style.d.ts

@@ -1,3 +1,9 @@
+export declare const SELECTION_COLORS: {
+    readonly primary: "#1F88D0";
+    readonly background: "white";
+    readonly border: "#F2F2F2";
+    readonly transparent: "transparent";
+};
 interface GetSelectionStylesParams {
     isSelected: boolean;
     isCellSelected: boolean;

package/build/utils/style.js

@@ -1,4 +1,4 @@
-const SELECTION_COLORS = {
+export const SELECTION_COLORS = {
     primary: '#1F88D0',
     background: 'white',
     border: '#F2F2F2',

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.37",
-  "testVersion": 1,
-  "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.38",
+  "testVersion": 1,
+  "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/"
+  }
+}