@tap-payments/os-micro-frontend-shared 0.1.30 → 0.1.31-test.11

package/build/components/RightLeftExpandingCenterChip/style.js

@@ -0,0 +1,104 @@
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export const CHIP_GAP = 3;
+export const CenterIconWrapper = styled(motion.div)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 0,
+    minWidth: 0,
+    height: 'auto',
+    lineHeight: 1,
+    position: 'relative',
+    zIndex: 1001,
+    fontSize: '12px',
+    color: theme.palette.text.primary,
+}));
+export const CenterShiftWrapper = styled(motion.div)(() => ({
+    display: 'inline-flex',
+}));
+export const LeftExpandIcon = styled(motion.span)(({ theme }) => ({
+    position: 'static',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 0,
+    overflow: 'visible',
+    margin: 0,
+    padding: 0,
+    fontSize: '10px',
+    lineHeight: 1,
+    color: theme.palette.text.secondary,
+    fontWeight: 'bold',
+    userSelect: 'none',
+}));
+export const RightExpandIcon = styled(motion.span)(({ theme }) => ({
+    position: 'static',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 0,
+    overflow: 'visible',
+    margin: 0,
+    padding: 0,
+    fontSize: '10px',
+    lineHeight: 1,
+    color: theme.palette.text.secondary,
+    fontWeight: 'bold',
+    userSelect: 'none',
+}));
+export const ExpandedSection = styled(motion.div)(({ side }) => (Object.assign(Object.assign(Object.assign({ position: 'absolute', display: 'flex', alignItems: 'center' }, (side === 'left' ? { right: '100%', flexDirection: 'row-reverse', transformOrigin: 'right center' } : {})), (side === 'right' ? { left: '100%', flexDirection: 'row', transformOrigin: 'left center' } : {})), { top: '50%', transform: 'translateY(-50%)', gap: 0, pointerEvents: 'auto', overflow: 'visible' })));
+export const HoverBridge = styled('div')(({ side }) => (Object.assign(Object.assign({ position: 'absolute', top: 0, bottom: 0 }, (side === 'left' ? { right: '100%' } : { left: '100%' })), { pointerEvents: 'auto', background: 'transparent' })));
+export const PeekContainer = styled(motion.div)(() => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 24,
+    overflow: 'visible',
+}));
+const baseChipStyles = (theme) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: '12px',
+    backgroundColor: theme.palette.background.paper,
+    paddingInline: '8px',
+    height: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: 1,
+    fontSize: 12,
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+});
+export const CenterChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'relative', zIndex: 2, minWidth: 24, flex: '0 0 auto', display: 'inline-flex', overflow: 'hidden', willChange: 'transform' })));
+export const CenterContent = styled(motion.span)(() => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    transform: 'translateZ(0)',
+}));
+export const ExpandableContainer = styled(motion.span)(() => ({
+    display: 'inline-flex',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    willChange: 'width',
+}));
+export const ExpandableInner = styled(motion.span)(() => ({
+    display: 'inline-flex',
+    whiteSpace: 'nowrap',
+    paddingLeft: `${CHIP_GAP}px`,
+}));
+export const LeftPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', left: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
+export const RightPeekChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { position: 'absolute', right: 0, zIndex: 1, pointerEvents: 'none', minWidth: 24, paddingInline: 0 })));
+export const ExpandChip = styled(motion.div)(({ theme }) => (Object.assign(Object.assign({}, baseChipStyles(theme)), { minWidth: 24, flex: '0 0 auto', display: 'inline-flex' })));
+export const tableCellSx = {
+    position: 'relative',
+    overflow: 'visible',
+    zIndex: 101,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '20px',
+};

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

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { SxProps } from '@mui/material';
+export interface RightLeftExpandingCenterChipProps {
+    leftIcons?: React.ReactNode[];
+    rightIcons?: React.ReactNode[];
+    centerIcon: React.ReactNode;
+    expandableCenter?: React.ReactNode;
+    sx?: SxProps;
+    expandedZIndex?: number;
+}

package/build/components/RightLeftExpandingCenterChip/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+export declare const DEFAULT_CHIP_MIN_WIDTH = 24;
+export type UseRightLeftExpandingCenterChipArgs = {
+    leftIcons: ReactNode[];
+    rightIcons: ReactNode[];
+    centerIcon: ReactNode;
+    expandableCenter?: ReactNode;
+};
+export declare function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }: UseRightLeftExpandingCenterChipArgs): {
+    isHovering: boolean;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    centerWrapRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    centerContentRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    centerChipRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    anchors: {
+        left: number;
+        right: number;
+    };
+    leftChipRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+    rightChipRefs: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
+    leftOffsets: number[];
+    rightOffsets: number[];
+    expandableInnerRef: import("react").MutableRefObject<HTMLSpanElement | null>;
+    expandableWidth: number;
+    expandedMV: import("framer-motion").MotionValue<number>;
+    shiftX: import("framer-motion").MotionValue<number>;
+    rightShift: number;
+    leftHoverWidth: number;
+    rightHoverWidth: number;
+};

package/build/components/RightLeftExpandingCenterChip/useRightLeftExpandingCenterChip.js

@@ -0,0 +1,156 @@
+import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
+import { animate, useMotionValue, useTransform } from 'framer-motion';
+import { CHIP_GAP } from './style';
+export const DEFAULT_CHIP_MIN_WIDTH = 24;
+export function useRightLeftExpandingCenterChip({ leftIcons, rightIcons, centerIcon, expandableCenter }) {
+    const [isHovering, setIsHovering] = useState(false);
+    const [anchors, setAnchors] = useState({ left: 0, right: 0 });
+    const [leftWidths, setLeftWidths] = useState([]);
+    const [rightWidths, setRightWidths] = useState([]);
+    const [expandableWidth, setExpandableWidth] = useState(0);
+    const hoverTimeoutRef = useRef(null);
+    const centerWrapRef = useRef(null);
+    const centerContentRef = useRef(null);
+    const centerChipRef = useRef(null);
+    const leftChipRefs = useRef([]);
+    const rightChipRefs = useRef([]);
+    const expandableInnerRef = useRef(null);
+    const resizeRaf = useRef(null);
+    const expandedMV = useMotionValue(0);
+    const shiftX = useTransform(expandedMV, (v) => v / 2);
+    const leftOffsets = useMemo(() => {
+        if (!leftWidths.length)
+            return [];
+        const acc = [];
+        let sum = CHIP_GAP + leftWidths[0] / 2;
+        acc.push(sum);
+        for (let i = 1; i < leftWidths.length; i++) {
+            sum += leftWidths[i - 1] / 2 + CHIP_GAP + leftWidths[i] / 2;
+            acc.push(sum);
+        }
+        return acc;
+    }, [leftWidths]);
+    const rightOffsets = useMemo(() => {
+        if (!rightWidths.length)
+            return [];
+        const acc = [];
+        let sum = CHIP_GAP + rightWidths[0] / 2;
+        acc.push(sum);
+        for (let i = 1; i < rightWidths.length; i++) {
+            sum += rightWidths[i - 1] / 2 + CHIP_GAP + rightWidths[i] / 2;
+            acc.push(sum);
+        }
+        return acc;
+    }, [rightWidths]);
+    const rightShift = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
+    const maxRightShift = expandableCenter ? expandableWidth + CHIP_GAP : 0;
+    const handleMouseEnter = useCallback(() => {
+        if (hoverTimeoutRef.current)
+            clearTimeout(hoverTimeoutRef.current);
+        setIsHovering(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (hoverTimeoutRef.current)
+            clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
+    }, []);
+    const measureAnchors = useCallback(() => {
+        var _a;
+        const wrap = centerWrapRef.current;
+        const chip = centerChipRef.current;
+        const content = centerContentRef.current;
+        if (!wrap)
+            return;
+        const wrapRect = wrap.getBoundingClientRect();
+        const targetRect = (_a = (chip !== null && chip !== void 0 ? chip : content)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!targetRect)
+            return;
+        const left = targetRect.left - wrapRect.left;
+        const right = targetRect.right - wrapRect.left;
+        setAnchors({ left, right });
+    }, []);
+    const measureStackChipWidths = useCallback(() => {
+        setLeftWidths(leftChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH)));
+        setRightWidths(rightChipRefs.current.map((el) => (el ? el.offsetWidth : DEFAULT_CHIP_MIN_WIDTH)));
+    }, []);
+    const measureExpandableWidth = useCallback(() => {
+        var _a, _b;
+        setExpandableWidth((_b = (_a = expandableInnerRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0);
+    }, []);
+    const onResize = useCallback(() => {
+        if (resizeRaf.current)
+            cancelAnimationFrame(resizeRaf.current);
+        resizeRaf.current = requestAnimationFrame(() => {
+            measureAnchors();
+            measureStackChipWidths();
+            measureExpandableWidth();
+        });
+    }, [measureAnchors, measureStackChipWidths, measureExpandableWidth]);
+    useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current)
+                clearTimeout(hoverTimeoutRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        measureAnchors();
+    }, [centerIcon, measureAnchors]);
+    useEffect(() => {
+        measureStackChipWidths();
+    }, [leftIcons, rightIcons, measureStackChipWidths]);
+    useEffect(() => {
+        measureExpandableWidth();
+    }, [expandableCenter, measureExpandableWidth]);
+    useEffect(() => {
+        onResize();
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            if (resizeRaf.current)
+                cancelAnimationFrame(resizeRaf.current);
+        };
+    }, [onResize]);
+    useEffect(() => {
+        const target = isHovering && expandableCenter ? expandableWidth + CHIP_GAP : 0;
+        const controls = animate(expandedMV, target, { duration: 0.2, ease: 'easeOut' });
+        return () => controls.stop();
+    }, [isHovering, expandableCenter, expandableWidth, expandedMV]);
+    const leftHoverWidth = useMemo(() => {
+        var _a;
+        if (!leftOffsets.length)
+            return 0;
+        const last = leftOffsets.length - 1;
+        const lastWidth = (_a = leftWidths[last]) !== null && _a !== void 0 ? _a : DEFAULT_CHIP_MIN_WIDTH;
+        const farthest = leftOffsets[last] + lastWidth / 2;
+        return farthest + CHIP_GAP;
+    }, [leftOffsets, leftWidths]);
+    const rightHoverWidth = useMemo(() => {
+        var _a;
+        if (!rightOffsets.length)
+            return 0;
+        const last = rightOffsets.length - 1;
+        const lastWidth = (_a = rightWidths[last]) !== null && _a !== void 0 ? _a : DEFAULT_CHIP_MIN_WIDTH;
+        const farthest = maxRightShift + rightOffsets[last] + lastWidth / 2;
+        return farthest + CHIP_GAP;
+    }, [rightOffsets, rightWidths, maxRightShift]);
+    return {
+        isHovering,
+        handleMouseEnter,
+        handleMouseLeave,
+        centerWrapRef,
+        centerContentRef,
+        centerChipRef,
+        anchors,
+        leftChipRefs,
+        rightChipRefs,
+        leftOffsets,
+        rightOffsets,
+        expandableInnerRef,
+        expandableWidth,
+        expandedMV,
+        shiftX,
+        rightShift,
+        leftHoverWidth,
+        rightHoverWidth,
+    };
+}

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,49 @@ 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 Box from '@mui/material/Box';
 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 } 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();
     if (!children) {
         return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { 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(Box, Object.assign({ sx: { position: 'relative', zIndex: props.isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ layout: true, transition: {
+                    type: 'spring',
+                    stiffness: 180,
+                    damping: 25,
+                    mass: 0.4,
+                } }, { children: _jsxs(ChipStyled, Object.assign({}, props, { sx: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        zIndex: props.isSelected ? 3 : 0,
+                    } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: props.isSelected && copyText && (_jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: {
+                                    height: 12,
+                                    width: 12,
+                                    objectFit: 'contain',
+                                } })) }))] })) }))] })));
 };
 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,15 @@ 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>, {}, {}>;

package/build/components/StatusChip/style.js

@@ -1,38 +1,16 @@
-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', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box', transition: 'width 0.5s ease-in-out' }, (isSelected && { color: SELECTION_COLORS.primary, borderColor: SELECTION_COLORS.primary }));
 });
+export const Wrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '4px',
+    minWidth: 46,
+    textAlign: '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 { ChipSelection } from '../../types/index.js';
+export interface StatusChipWithCopyProps extends StatusChipProps {
+    copyText?: string;
+    chipIndex: number;
+    chipSelection: ChipSelection;
+}
+declare function StatusChipWithCopy({ children, copyText, chipIndex, chipSelection: { onChipClick, rowIndex, colIndex, selectedChip }, ...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 { checkIsChipSelected } from './utils';
+function StatusChipWithCopy(_a) {
+    var { children, copyText, chipIndex, chipSelection: { onChipClick, rowIndex, colIndex, selectedChip } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "chipSelection"]);
+    const isSelected = useMemo(() => checkIsChipSelected({ rowIndex, colIndex, selectedChip, chipIndex }), [rowIndex, colIndex, selectedChip, chipIndex]);
+    return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
+            onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(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 { ChipSelection } from '../../types/index.js';
+export declare const checkIsChipSelected: ({ chipIndex, rowIndex, colIndex, selectedChip, }: Pick<ChipSelection, "rowIndex" | "selectedChip" | "colIndex"> & {
+    chipIndex: number;
+}) => boolean;

package/build/components/StatusChipWithCopy/utils.js

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

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

@@ -10,6 +10,8 @@ export declare const StyledStatusChip: import("@emotion/styled").StyledComponent
     padding?: string | undefined;
     unknownText?: string | undefined;
     maxWidth?: string | undefined;
+    isSelected?: boolean | undefined;
+    copyText?: 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>> & {

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

@@ -5,6 +5,8 @@ export interface ChipConfig {
     content: React.ReactNode;
     sx?: object;
     onClick?: (event: React.MouseEvent) => void;
+    copyText: string;
+    isSelected?: boolean;
 }
 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, onChipClick, selectedChip, rowIndex, colIndex, ...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, onChipClick, selectedChip, rowIndex, colIndex } = _a, props = __rest(_a, ["destinationsCount", "destinationsTooltip", "isTextShown", "destination", "destinationsAmount", "hidden", "iconDirection", "tableMode", "onChipClick", "selectedChip", "rowIndex", "colIndex"]);
     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);
@@ -27,15 +27,19 @@ function DestinationCell(_a) {
     if (isSheetView) {
         const sheetViewChips = destinations === null || destinations === void 0 ? void 0 : destinations.map((dest, index) => {
             const formattedDestAmount = formatAmount((dest === null || dest === void 0 ? void 0 : dest.amount) || 0);
+            const [, selectedRowIndex, selectedColumnIndex, selectedChipIndex] = (selectedChip !== null && selectedChip !== void 0 ? selectedChip : '').split('-');
+            const isSelected = Number(selectedRowIndex) === rowIndex && Number(selectedColumnIndex) === colIndex && Number(selectedChipIndex) === index;
             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] })] })),
+                isSelected,
+                onClick: (e) => {
+                    onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(e, index);
+                },
+                copyText: `${formattedDestAmount.integerAmount}.${formattedDestAmount.decimalAmount}`,
             };
-        }, []);
-        return (_jsx(TableCell, Object.assign({ sx: {
-                width: 'fit-content',
-                overflow: 'visible',
-            } }, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
+        }, [selectedChip, rowIndex, colIndex]);
+        return (_jsx(Box, Object.assign({}, props, { children: _jsx(StatusGroupChips, { chips: sheetViewChips }) })));
     }
     if (!destinationsCount || hidden) {
         return null;
@@ -45,9 +49,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, ChipSelection } from '../../../types/index.js';
 import type { ActionType, FlagType } from './ActionCell';
 import { getGeographyBoxColor } from '../../../utils/index.js';
 export type GeographyBoxVariant = keyof ReturnType<typeof getGeographyBoxColor>;
@@ -62,7 +62,7 @@ export interface AmountCellProps extends TableCellProps {
     isTextShown?: boolean;
     tableMode?: TableMode;
 }
-export interface DestinationCellProps extends TableCellProps {
+export interface DestinationCellProps extends TableCellProps, ChipSelection {
     destinationsCount?: number;
     flagIcon?: string;
     destinationsTooltip?: React.ReactNode;