@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.hotfix.1

package/build/components/StatusIcons/SourceIcons/index.d.ts

@@ -1,2 +1,3 @@
 export * from './SourceIcons';
+export * from './utils';
 export * from './components';

package/build/components/StatusIcons/SourceIcons/index.js

@@ -1,2 +1,3 @@
 export * from './SourceIcons';
+export * from './utils';
 export * from './components';

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -3,11 +3,10 @@ export declare const StyledSourceCell: import("@emotion/styled").StyledComponent
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -15,20 +14,21 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -48,7 +48,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -64,7 +64,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -74,7 +74,7 @@ export declare const PaymentSourcesContainer: import("@emotion/styled").StyledCo
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

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

@@ -10,5 +10,5 @@ export { GeographyIcon } from './GeographyIcon';
 export { default as IssuerIcon, type IssuerIconProps } from './IssuerIcon';
 export { PayoutIcon } from './PayoutIcon';
 export { default as RefundIcon } from './RefundIcon';
-export { SourceIcons, SourceIcon } from './SourceIcons';
+export { SourceIcons, SourceIcon, getPaymentMethodKey } from './SourceIcons';
 export { DestinationIcon } from './DestinationIcon';

package/build/components/StatusIcons/index.js

@@ -10,5 +10,5 @@ export { GeographyIcon } from './GeographyIcon';
 export { default as IssuerIcon } from './IssuerIcon';
 export { PayoutIcon } from './PayoutIcon';
 export { default as RefundIcon } from './RefundIcon';
-export { SourceIcons, SourceIcon } from './SourceIcons';
+export { SourceIcons, SourceIcon, getPaymentMethodKey } from './SourceIcons';
 export { DestinationIcon } from './DestinationIcon';

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

@@ -4,6 +4,6 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<import("
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const TextStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -3,6 +3,5 @@ import type { ActionCellProps } from '../type';
 type Props = Readonly<ActionCellProps> & {
     onJsonViewClick?: () => void;
 };
-declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, renderDropdown, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ActionCell>;
-export default _default;
+export declare const ActionCell: React.MemoExoticComponent<({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, renderDropdown, startSlot, ...props }: Props) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -17,21 +17,21 @@ import Dropdown from '../../../DropdownMenu';
 import Tooltip from '../../../Tooltip';
 import { TableCell } from '../../../TableCells';
 import StyledBadge, { BadgeVariants } from '../../../CountBadge';
-import { jsonBlackIcon } from '../../../../constants/index.js';
+import { jsonBlackIcon, rowIdIcon } from '../../../../constants/index.js';
 import ActionIconsVariants from './components/ActionIconsVariants';
 import { actionIcons, colorToVariant, flags } from './constant';
 import { useActionCell } from './hooks/useActionCell';
 import { ActionCellContainer, ActionIcon, ActionsIconContainer } from './style';
 import { IDButton } from '../IDButton';
 import { BadgeWrapper, IdButtonContainer, TextLabel, TransparentButton } from '../style';
-function ActionCell(_a) {
+export const ActionCell = memo((_a) => {
     var _b, _c;
-    var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, renderDropdown } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "renderDropdown"]);
+    var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, renderDropdown, startSlot } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "renderDropdown", "startSlot"]);
     const { t } = useTranslation();
     const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, setAnchorEl, } = useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown });
     return (_jsx(TableCell, Object.assign({}, props, { sx: {
             overflow: 'visible',
-        } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionCell_ActionCellContainer" }, { children: [flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionCell_FlagLabel", sx: {
+        } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionCell_ActionCellContainer" }, { children: [startSlot, flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionCell_FlagLabel", sx: {
                                 textAlign: 'left',
                                 justifyContent: 'flex-start',
                             } }, { children: flagTooltip })) }))) : (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsxs(BadgeWrapper, Object.assign({ "data-testid": "ActionCell_FlagBadge", sx: {
@@ -71,7 +71,7 @@ function ActionCell(_a) {
                                             },
                                             opacity: 1,
                                         },
-                                    } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: colorToVariant[(_c = flags[flag]) === null || _c === void 0 ? void 0 : _c.color] || BadgeVariants.ORANGE, "data-testid": "ActionCell_StyledBadge" }, { children: [flagsCount, "x"] })) })))] })) }))) })), showIdButton && _jsx(IDButton, { rowId: rowId || row.id }), _jsxs("div", Object.assign({ "data-testid": "ActionCell_IconsContainer", style: {
+                                    } }, { children: _jsxs(StyledBadge, Object.assign({ compact: true, variant: colorToVariant[(_c = flags[flag]) === null || _c === void 0 ? void 0 : _c.color] || BadgeVariants.ORANGE, "data-testid": "ActionCell_StyledBadge" }, { children: [flagsCount, "x"] })) })))] })) }))) })), showIdButton && _jsx(IDButton, { id: rowId || row.id, icon: rowIdIcon }), _jsxs("div", Object.assign({ "data-testid": "ActionCell_IconsContainer", style: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -80,16 +80,18 @@ function ActionCell(_a) {
                                 pointerEvents: 'none',
                             })) }, { children: [_jsx(TransparentButton, Object.assign({ onClick: handleClick, "data-testid": "ActionCell_ActionsIconContainer_TransparentButton", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
                                         pointerEvents: 'none',
-                                    })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), renderDropdown ? (renderDropdown(anchorEl, setAnchorEl)) : (_jsxs(_Fragment, { children: [dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: (e) => {
-                                                    var _a;
-                                                    (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-                                                    if (!action.hasActionMenu) {
+                                    })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), renderDropdown ? (renderDropdown(anchorEl, setAnchorEl)) : (_jsxs(_Fragment, { children: [dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => {
+                                                var _a;
+                                                return (Object.assign(Object.assign({}, action), { onClick: (e) => {
+                                                        var _a;
+                                                        (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
+                                                        if (!action.hasActionMenu) {
+                                                            handleClose();
+                                                        }
+                                                    }, onRightClick: (e) => {
+                                                        var _a;
+                                                        (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
                                                         handleClose();
-                                                    }
-                                                }, onRightClick: (e) => {
-                                                    var _a;
-                                                    (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-                                                    handleClose();
-                                                }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] }))] }))] })) })));
-}
-export default memo(ActionCell);
+                                                    }, icon: action.customIcon || (_jsx(ActionIcon, { icon: action.icon, src: (_a = action.iconSrc) !== null && _a !== void 0 ? _a : (action.icon && actionIcons[action.icon]), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }));
+                                            }) }))] }))] }))] }))] })) })));
+});

package/build/components/TableCells/CustomCells/ActionCell/{ActionIconColumn.d.ts → components/ActionIconColumn.d.ts}

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

package/build/components/TableCells/CustomCells/ActionCell/{ActionIconColumn.js → components/ActionIconColumn.js}

@@ -12,13 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import { AnimatePresence } from 'framer-motion';
-import Dropdown from '../../../DropdownMenu';
-import { TableCell } from '../../../TableCells';
-import ActionIconsVariants from './components/ActionIconsVariants';
-import { actionIcons } from './constant';
-import { useActionCell } from './hooks/useActionCell';
-import { ActionIcon, ActionsIconContainer } from './style';
-import { TransparentButton } from '../style';
+import Dropdown from '../../../../DropdownMenu';
+import { TableCell } from '../../../../TableCells';
+import ActionIconsVariants from '../components/ActionIconsVariants';
+import { actionIcons } from '../constant';
+import { useActionCell } from '../hooks/useActionCell';
+import { ActionIcon, ActionsIconContainer } from '../style';
+import { TransparentButton } from '../../style';
 function ActionIconColumn(_a) {
     var { actions, dropdownAction, onCloseDropdown, isDropdownShown = true, renderDropdown } = _a, props = __rest(_a, ["actions", "dropdownAction", "onCloseDropdown", "isDropdownShown", "renderDropdown"]);
     const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, setAnchorEl, } = useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown });
@@ -33,16 +33,19 @@ function ActionIconColumn(_a) {
                     pointerEvents: 'none',
                 })) }, { children: [_jsx(TransparentButton, Object.assign({ onClick: handleClick, "data-testid": "ActionIconColumn_ActionsIconContainer_TransparentButton", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
                             pointerEvents: 'none',
-                        })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), renderDropdown ? (renderDropdown(anchorEl, setAnchorEl)) : (_jsxs(_Fragment, { children: [dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: (e) => {
-                                        var _a;
-                                        (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-                                        if (!action.hasActionMenu) {
+                        })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), renderDropdown ? (renderDropdown(anchorEl, setAnchorEl)) : (_jsxs(_Fragment, { children: [dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => {
+                                    var _a;
+                                    return (Object.assign(Object.assign({}, action), { onClick: (e) => {
+                                            var _a;
+                                            (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
+                                            if (!action.hasActionMenu) {
+                                                handleClose();
+                                            }
+                                        }, onRightClick: (e) => {
+                                            var _a;
+                                            (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
                                             handleClose();
-                                        }
-                                    }, onRightClick: (e) => {
-                                        var _a;
-                                        (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
-                                        handleClose();
-                                    }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] })) })) })));
+                                        }, icon: action.customIcon || (_jsx(ActionIcon, { icon: action.icon, src: (_a = action.iconSrc) !== null && _a !== void 0 ? _a : (action.icon && actionIcons[action.icon]), initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }));
+                                }) }))] }))] })) })) })));
 }
 export default memo(ActionIconColumn);

package/build/components/TableCells/CustomCells/ActionCell/{ActionsColumn.d.ts → components/ActionsColumn.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { ActionCellProps } from '../type';
-import { TableMode } from '../../../../types/index.js';
+import { TableMode } from '../../../../../types/index.js';
+import type { ActionCellProps } from '../../type';
 type ActionsColumnProps = Readonly<Pick<ActionCellProps, 'flag' | 'flagTooltip' | 'flagsCount' | 'row' | 'showJsonViewer' | 'isTextShown' | 'showIdButton' | 'rowId'>> & {
     onJsonViewClick?: () => void;
     tableMode?: TableMode;

package/build/components/TableCells/CustomCells/ActionCell/{ActionsColumn.js → components/ActionsColumn.js}

@@ -12,13 +12,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo } from 'react';
 import { motion } from 'framer-motion';
-import Tooltip from '../../../Tooltip';
-import { TableCell } from '../../../TableCells';
-import StyledBadge, { BadgeVariants } from '../../../CountBadge';
-import { colorToVariant, flags } from './constant';
-import { ActionCellContainer, ActionIcon } from './style';
-import { BadgeWrapper, TextLabel } from '../style';
-import StatusChip from '../../../StatusChip';
+import Tooltip from '../../../../Tooltip';
+import { TableCell } from '../../../../TableCells';
+import StyledBadge, { BadgeVariants } from '../../../../CountBadge';
+import StatusChip from '../../../../StatusChip';
+import { colorToVariant, flags } from '../constant';
+import { ActionCellContainer, ActionIcon } from '../style';
+import { BadgeWrapper, TextLabel } from '../../style';
 function ActionsColumn(_a) {
     var _b, _c;
     var { flag, flagTooltip, flagsCount, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode } = _a, props = __rest(_a, ["flag", "flagTooltip", "flagsCount", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode"]);

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

@@ -1 +1,3 @@
 export { default as ActionIconsVariants } from './ActionIconsVariants';
+export { default as ActionsColumn } from './ActionsColumn';
+export { default as ActionIconColumn } from './ActionIconColumn';

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

@@ -1 +1,3 @@
 export { default as ActionIconsVariants } from './ActionIconsVariants';
+export { default as ActionsColumn } from './ActionsColumn';
+export { default as ActionIconColumn } from './ActionIconColumn';

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

@@ -28,4 +28,6 @@ export declare const actionIcons: {
     users: string;
     brand: string;
     clipboard: string;
+    viewApi: string;
+    viewReceipt: string;
 };

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

@@ -1,5 +1,5 @@
 import { BadgeVariants } from '../../../CountBadge';
-import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, } from '../../../../constants/index.js';
+import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, jsonBlackIcon, receiptBillIcon, } from '../../../../constants/index.js';
 export const flags = {
     GRAY: { icon: closedFlagIcon, color: '#CFCFCF' },
     ORANGE: { icon: orangeFlagIcon, color: '#FFD503' },
@@ -24,4 +24,6 @@ export const actionIcons = {
     users: usersIcon,
     brand: brandPlaceholderIcon,
     clipboard: clipboardIcon,
+    viewApi: jsonBlackIcon,
+    viewReceipt: receiptBillIcon,
 };

package/build/components/TableCells/CustomCells/ActionCell/hooks/useActionCell.d.ts

@@ -13,12 +13,14 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
         label: string;
         onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
         onRightClick?: ((e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void) | undefined;
-        icon: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard";
+        icon?: "cancel" | "reverse" | "refund" | "brand" | "destination" | "flag" | "dispute" | "void" | "capture" | "clock" | "invoice" | "users" | "clipboard" | "viewApi" | "viewReceipt" | undefined;
         isLoading?: boolean | undefined;
         isError?: boolean | undefined;
         isSuccess?: boolean | undefined;
         isShown?: boolean | undefined;
         hasActionMenu?: boolean | undefined;
+        iconSrc?: string | undefined;
+        customIcon?: React.ReactNode;
     }[];
     isAnyActionLoading: boolean;
     isAnyActionHasError: boolean;

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

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

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

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

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

@@ -13,12 +13,11 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
+    loading?: "eager" | "lazy" | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -26,20 +25,21 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -59,7 +59,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -75,7 +75,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -85,7 +85,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -273,15 +273,15 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     useMap?: string | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     sizes?: string | undefined;
     src?: string | undefined;
     alt?: string | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
-    loading?: "eager" | "lazy" | undefined;
     fetchPriority?: "auto" | "high" | "low" | undefined;
     srcSet?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    icon?: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | undefined;
+    icon?: "cancel" | "reverse" | "refund" | "brand" | "destination" | "flag" | "dispute" | "void" | "capture" | "clock" | "invoice" | "users" | "clipboard" | "viewApi" | "viewReceipt" | undefined;
 }, {}, {}>;

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

@@ -16,12 +16,11 @@ import { useTheme } from '@mui/material/styles';
 import { CountAnimatedBadge } from '../../../CountBadge';
 import { AgreementImageWrapper, paymentSourceAnimation } from '../../../CountBadge/style';
 import { TableCell } from '../../../TableCells';
-import { PaymentSourcesContainer, StyledSourceCell, StyledSourceImage } from '../../../TableCells/CustomCells/SourceCell/style';
 import Tooltip from '../../../Tooltip';
 import { noAgreementIcon } from '../../../../constants/index.js';
 import { formatOrdinal } from '../../../../utils/index.js';
 import { agreementTypes, badgesTypes } from './constant';
-import { BadgeTextWrapper, TextLabel } from './style';
+import { BadgeTextWrapper, TextLabel, PaymentSourcesContainer, StyledSourceCell, StyledSourceImage } from './style';
 function AgreementCell(_a) {
     var { type, hasSavedCard, totalPaymentsCount, isTextShown } = _a, props = __rest(_a, ["type", "hasSavedCard", "totalPaymentsCount", "isTextShown"]);
     const theme = useTheme();