@tap-payments/os-micro-frontend-shared 0.0.184 → 0.0.186

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,6 @@
1
1
  import Box from '@mui/material/Box';
2
2
  import { styled } from '@mui/material/styles';
3
- export const Button = styled(Box)(({ isActive, isDisabled, theme }) => (Object.assign(Object.assign(Object.assign({ minWidth: 32, height: 32, width: 'fit-content', borderRadius: '4px', padding: '9px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${theme.palette.divider}`, cursor: 'pointer' }, (isActive && {
3
+ export const Button = styled(Box, { shouldForwardProp: (prop) => prop !== 'isActive' && prop !== 'isDisabled' })(({ isActive, isDisabled, theme }) => (Object.assign(Object.assign(Object.assign({ minWidth: 32, height: 32, width: 'fit-content', borderRadius: '4px', padding: '9px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${theme.palette.divider}`, cursor: 'pointer' }, (isActive && {
4
4
  boxShadow: theme.shadows[7],
5
5
  borderColor: theme.palette.info.dark,
6
6
  })), (isDisabled && {
@@ -15,8 +15,6 @@ import Box from '@mui/material/Box';
15
15
  import { defaultCountryIcon, getCountriesIcon } from '../../constants/index.js';
16
16
  function CountryFlag(_a) {
17
17
  var { code = '' } = _a, props = __rest(_a, ["code"]);
18
- return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCountriesIcon(code) || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy", onError: (e) => {
19
- e.currentTarget.src = defaultCountryIcon;
20
- } })));
18
+ return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCountriesIcon(code) || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy" })));
21
19
  }
22
20
  export default memo(CountryFlag);
@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
554
554
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
555
555
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
556
556
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
557
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
557
558
  src?: string | undefined;
558
559
  alt?: string | undefined;
559
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
560
560
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
561
561
  useMap?: string | undefined;
562
562
  loading?: "eager" | "lazy" | undefined;
@@ -5,6 +5,6 @@ type Props = Readonly<ActionCellProps> & {
5
5
  onJsonViewClick?: () => void;
6
6
  tableMode?: TableMode;
7
7
  };
8
- declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, tableMode, renderDropdown, ...props }: Props): import("react/jsx-runtime").JSX.Element;
8
+ declare function ActionCell({ flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown, row, showJsonViewer, isTextShown, showIdButton, rowId, onJsonViewClick, tableMode, ...props }: Props): import("react/jsx-runtime").JSX.Element;
9
9
  declare const _default: React.MemoExoticComponent<typeof ActionCell>;
10
10
  export default _default;
@@ -27,9 +27,9 @@ import { BadgeWrapper, IdButtonContainer, TextLabel, TransparentButton } from '.
27
27
  import SheetViewIDButton from '../SheetViewIDButton/SheetViewIDButton';
28
28
  function ActionCell(_a) {
29
29
  var _b, _c;
30
- var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode, renderDropdown } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode", "renderDropdown"]);
30
+ var { flag, actions, flagTooltip, flagsCount, dropdownAction, onCloseDropdown, isDropdownShown = true, row, showJsonViewer = true, isTextShown, showIdButton = true, rowId, onJsonViewClick, tableMode } = _a, props = __rest(_a, ["flag", "actions", "flagTooltip", "flagsCount", "dropdownAction", "onCloseDropdown", "isDropdownShown", "row", "showJsonViewer", "isTextShown", "showIdButton", "rowId", "onJsonViewClick", "tableMode"]);
31
31
  const { t } = useTranslation();
32
- const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, setAnchorEl, } = useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown });
32
+ const { open, anchorEl, filteredActions, isAnyActionLoading, isAnyActionHasError, isAnyActionSuccessful, areThereAnyShownActions, handleClick, handleClose, } = useActionCell({ actions, isDropdownShown, onCloseDropdown });
33
33
  return (_jsx(TableCell, Object.assign({}, props, { sx: {
34
34
  overflow: 'visible',
35
35
  } }, { children: _jsxs(ActionCellContainer, Object.assign({ "data-testid": "ActionCell_ActionCellContainer", tableMode: tableMode }, { children: [flag && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: flagTooltip }, { children: _jsx(TextLabel, Object.assign({ "data-testid": "ActionCell_FlagLabel", sx: {
@@ -81,16 +81,16 @@ function ActionCell(_a) {
81
81
  pointerEvents: 'none',
82
82
  })) }, { children: [_jsx(TransparentButton, Object.assign({ onClick: handleClick, "data-testid": "ActionCell_ActionsIconContainer_TransparentButton", "data-is-active": areThereAnyShownActions, sx: Object.assign({}, (!areThereAnyShownActions && {
83
83
  pointerEvents: 'none',
84
- })) }, { 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) => {
85
- var _a;
86
- (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
87
- if (!action.hasActionMenu) {
88
- handleClose();
89
- }
90
- }, onRightClick: (e) => {
91
- var _a;
92
- (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
93
- handleClose();
94
- }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] }))] }))] })) })));
84
+ })) }, { children: _jsx(AnimatePresence, Object.assign({ mode: "wait" }, { children: _jsx(ActionIconsVariants, { isAnyActionLoading: isAnyActionLoading, isAnyActionHasError: isAnyActionHasError, isAnyActionSuccessful: isAnyActionSuccessful, areThereAnyShownActions: areThereAnyShownActions }) })) })), dropdownAction, areThereAnyShownActions && (_jsx(Dropdown, { style: { zIndex: 2000 }, open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: filteredActions.map((action) => (Object.assign(Object.assign({}, action), { onClick: (e) => {
85
+ var _a;
86
+ (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
87
+ if (!action.hasActionMenu) {
88
+ handleClose();
89
+ }
90
+ }, onRightClick: (e) => {
91
+ var _a;
92
+ (_a = action === null || action === void 0 ? void 0 : action.onRightClick) === null || _a === void 0 ? void 0 : _a.call(action, e);
93
+ handleClose();
94
+ }, icon: (_jsx(ActionIcon, { icon: action.icon, src: actionIcons[action.icon], initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, `action.label-${action.label.trim()}`)) }))) }))] }))] }))] })) })));
95
95
  }
96
96
  export default memo(ActionCell);
@@ -4,9 +4,8 @@ interface UseActionCellProps {
4
4
  actions: ActionCellProps['actions'];
5
5
  isDropdownShown?: ActionCellProps['isDropdownShown'];
6
6
  onCloseDropdown?: ActionCellProps['onCloseDropdown'];
7
- renderDropdown?: ActionCellProps['renderDropdown'];
8
7
  }
9
- export declare function useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown }: Readonly<UseActionCellProps>): {
8
+ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdown }: Readonly<UseActionCellProps>): {
10
9
  anchorEl: HTMLElement | null;
11
10
  open: boolean;
12
11
  filteredActions: {
@@ -26,6 +25,5 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
26
25
  areThereAnyShownActions: boolean;
27
26
  handleClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
28
27
  handleClose: () => void;
29
- setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
30
28
  };
31
29
  export {};
@@ -1,12 +1,12 @@
1
1
  import { useEffect, useState } from 'react';
2
- export function useActionCell({ actions, isDropdownShown, onCloseDropdown, renderDropdown }) {
2
+ export function useActionCell({ actions, isDropdownShown, onCloseDropdown }) {
3
3
  const [anchorEl, setAnchorEl] = useState(null);
4
4
  const open = Boolean(anchorEl);
5
- const filteredActions = (actions || []).filter((a) => a.isShown !== false);
5
+ const filteredActions = actions.filter((a) => a.isShown !== false);
6
6
  const isAnyActionLoading = filteredActions.some((a) => a.isLoading);
7
7
  const isAnyActionHasError = filteredActions.some((a) => a.isError);
8
8
  const isAnyActionSuccessful = filteredActions.some((a) => a.isSuccess);
9
- const areThereAnyShownActions = filteredActions.length > 0 || !!renderDropdown;
9
+ const areThereAnyShownActions = filteredActions.length > 0;
10
10
  const handleClick = (event) => {
11
11
  if (isAnyActionLoading || !areThereAnyShownActions) {
12
12
  return;
@@ -32,6 +32,5 @@ export function useActionCell({ actions, isDropdownShown, onCloseDropdown, rende
32
32
  areThereAnyShownActions,
33
33
  handleClick,
34
34
  handleClose,
35
- setAnchorEl,
36
35
  };
37
36
  }
@@ -272,9 +272,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
272
272
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
273
273
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
274
274
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
275
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
275
276
  src?: string | undefined;
276
277
  alt?: string | undefined;
277
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
278
278
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
279
279
  useMap?: string | undefined;
280
280
  loading?: "eager" | "lazy" | undefined;
@@ -11,7 +11,7 @@ export const ActionCellContainer = styled('section', {
11
11
  gap: tableMode === 'sheet' ? '4px' : theme.spacing(1),
12
12
  overflow: 'visible',
13
13
  }));
14
- export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', '&:hover': {
14
+ export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', '&:hover': {
15
15
  boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.18);',
16
16
  } }, (selected && {
17
17
  boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.18);',
@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
273
273
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
274
274
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
275
275
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
276
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
276
277
  src?: string | undefined;
277
278
  alt?: string | undefined;
278
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
279
279
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
280
280
  useMap?: string | undefined;
281
281
  loading?: "eager" | "lazy" | undefined;
@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
262
262
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
263
263
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
264
264
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
265
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
265
266
  src?: string | undefined;
266
267
  alt?: string | undefined;
267
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
268
268
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
269
269
  useMap?: string | undefined;
270
270
  loading?: "eager" | "lazy" | undefined;
@@ -89,7 +89,7 @@ export interface DestinationCellProps extends TableCellProps {
89
89
  export interface ActionCellProps extends TableCellProps {
90
90
  row?: unknown;
91
91
  flag?: FlagType;
92
- actions?: Array<{
92
+ actions: Array<{
93
93
  label: string;
94
94
  onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
95
95
  onRightClick?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
@@ -109,7 +109,6 @@ export interface ActionCellProps extends TableCellProps {
109
109
  showJsonViewer?: boolean;
110
110
  isTextShown?: boolean;
111
111
  showIdButton?: boolean;
112
- renderDropdown?: (anchorEl: HTMLElement | null, setAnchorEl: (anchorEl: HTMLElement | null) => void) => React.ReactNode;
113
112
  }
114
113
  export interface DeviceCellProps extends TableCellProps {
115
114
  deviceType?: 'DESKTOP' | 'PHONE' | 'TABLET';
@@ -52,7 +52,7 @@ function ColumnFilter(filter) {
52
52
  }, [open, filter, anchorEl, setAnchorEl]);
53
53
  return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
54
54
  filter.onClear(filterApiKeys);
55
- } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
55
+ } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { marginInlineStart: '8px', cursor: 'pointer' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
56
56
  zIndex: 9999,
57
57
  } }, { children: renderFilter }))] })) })));
58
58
  }
@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
306
306
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
307
307
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
308
308
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
309
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
309
310
  src?: string | undefined;
310
311
  alt?: string | undefined;
311
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
312
312
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
313
313
  useMap?: string | undefined;
314
314
  loading?: "eager" | "lazy" | undefined;
@@ -493,14 +493,3 @@ export declare const navigationPointerBlack: string;
493
493
  export declare const addIconWhite: string;
494
494
  export declare const greyUpArrowIcon: string;
495
495
  export declare const greyDownArrowIcon: string;
496
- export declare const brandServiceIcon: string;
497
- export declare const authorizationServiceIcon: string;
498
- export declare const chargebacksServiceIcon: string;
499
- export declare const chargesServiceIcon: string;
500
- export declare const destinationsServiceIcon: string;
501
- export declare const entityServiceIcon: string;
502
- export declare const invoiceServiceIcon: string;
503
- export declare const payoutServiceIcon: string;
504
- export declare const refundsServiceIcon: string;
505
- export declare const usersServiceIcon: string;
506
- export declare const walletServiceIcon: string;
@@ -497,14 +497,3 @@ export const navigationPointerBlack = `${lightUrl}/navigationPointerBlack.svg`;
497
497
  export const addIconWhite = `${lightUrl}/addIconWhite.svg`;
498
498
  export const greyUpArrowIcon = `${lightUrl}/greyUpArrow.svg`;
499
499
  export const greyDownArrowIcon = `${lightUrl}/greyDownArrow.svg`;
500
- export const brandServiceIcon = `${lightUrl}/services/brandService.svg`;
501
- export const authorizationServiceIcon = `${lightUrl}/services/authorizationService.svg`;
502
- export const chargebacksServiceIcon = `${lightUrl}/services/chargebacksService.svg`;
503
- export const chargesServiceIcon = `${lightUrl}/services/chargesService.svg`;
504
- export const destinationsServiceIcon = `${lightUrl}/services/destinationsService.svg`;
505
- export const entityServiceIcon = `${lightUrl}/services/entityService.svg`;
506
- export const invoiceServiceIcon = `${lightUrl}/services/invoiceService.svg`;
507
- export const payoutServiceIcon = `${lightUrl}/services/payoutService.svg`;
508
- export const refundsServiceIcon = `${lightUrl}/services/refundsService.svg`;
509
- export const usersServiceIcon = `${lightUrl}/services/usersService.svg`;
510
- export const walletServiceIcon = `${lightUrl}/services/walletService.svg`;
@@ -16,7 +16,6 @@ export interface HttpMethodFilters {
16
16
  startAfter?: string;
17
17
  keyword?: string;
18
18
  merchants?: string[];
19
- merchantIds?: string[];
20
19
  }
21
20
  export interface QueryConfig extends Omit<HttpMethodConfig, 'signal'> {
22
21
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.184",
4
+ "version": "0.0.186",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",