@tap-payments/os-micro-frontend-shared 0.0.176 → 0.0.180-alpha.1

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.
Files changed (70) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +12 -12
  3. package/build/components/Button/StyledButton/StyledButton.d.ts +0 -1
  4. package/build/components/Button/StyledButton/style.d.ts +1 -1
  5. package/build/components/Button/StyledButton/style.js +3 -5
  6. package/build/components/CountryFlag/CountryFlag.js +3 -1
  7. package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js +1 -1
  8. package/build/components/MultiSelectStatusButton/style.d.ts +1 -1
  9. package/build/components/MultiSelectStatusButton/style.js +1 -1
  10. package/build/components/SearchButton/styles.d.ts +1 -1
  11. package/build/components/StatusBar/StatusBar.d.ts +1 -1
  12. package/build/components/StatusBar/StatusBar.js +1 -1
  13. package/build/components/StatusBar/type.d.ts +5 -0
  14. package/build/components/StatusButton/ChevronIcon.d.ts +2 -2
  15. package/build/components/StatusButton/ChevronIcon.js +4 -2
  16. package/build/components/StatusButton/StatusButton.d.ts +3 -4
  17. package/build/components/StatusButton/StatusButton.js +54 -38
  18. package/build/components/StatusButton/style.d.ts +4 -0
  19. package/build/components/StatusButton/style.js +7 -0
  20. package/build/components/StatusButton/type.d.ts +1 -0
  21. package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +1 -1
  22. package/build/components/TableCells/CustomCells/ActionCell/style.js +1 -1
  23. package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts +1 -1
  24. package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +1 -1
  25. package/build/components/{TableHeader_V2 → TableHeader}/index.d.ts +0 -1
  26. package/build/components/{TableHeader_V2 → TableHeader}/index.js +0 -1
  27. package/build/components/{TableHeader_V2 → TableHeader}/type.d.ts +1 -4
  28. package/build/components/{TableHeader_V2/components/TableView → TableView}/CustomViews.d.ts +1 -1
  29. package/build/components/{TableHeader_V2/components/TableView → TableView}/CustomViews.js +2 -2
  30. package/build/components/{TableHeader_V2/components/TableView → TableView}/DefaultViews.d.ts +1 -1
  31. package/build/components/{TableHeader_V2/components/TableView → TableView}/DefaultViews.js +2 -2
  32. package/build/components/{TableHeader_V2/components/TableView → TableView}/TableView.d.ts +1 -1
  33. package/build/components/{TableHeader_V2/components/TableView → TableView}/TableView.js +3 -3
  34. package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js +1 -1
  35. package/build/components/VirtualTable/style.d.ts +1 -1
  36. package/build/components/index.d.ts +1 -1
  37. package/build/components/index.js +1 -1
  38. package/build/constants/assets.d.ts +0 -1
  39. package/build/constants/assets.js +0 -1
  40. package/build/types/api.d.ts +1 -0
  41. package/package.json +132 -132
  42. package/build/components/TableHeader_V2/components/StatusButtons/ChevronIcon.d.ts +0 -2
  43. package/build/components/TableHeader_V2/components/StatusButtons/ChevronIcon.js +0 -18
  44. package/build/components/TableHeader_V2/components/StatusButtons/StatusButton.d.ts +0 -3
  45. package/build/components/TableHeader_V2/components/StatusButtons/StatusButton.js +0 -54
  46. package/build/components/TableHeader_V2/components/StatusButtons/StatusButtons.d.ts +0 -11
  47. package/build/components/TableHeader_V2/components/StatusButtons/StatusButtons.js +0 -38
  48. package/build/components/TableHeader_V2/components/StatusButtons/constant.d.ts +0 -21
  49. package/build/components/TableHeader_V2/components/StatusButtons/constant.js +0 -22
  50. package/build/components/TableHeader_V2/components/StatusButtons/index.d.ts +0 -3
  51. package/build/components/TableHeader_V2/components/StatusButtons/index.js +0 -3
  52. package/build/components/TableHeader_V2/components/StatusButtons/style.d.ts +0 -35
  53. package/build/components/TableHeader_V2/components/StatusButtons/style.js +0 -75
  54. package/build/components/TableHeader_V2/components/StatusButtons/type.d.ts +0 -25
  55. package/build/components/TableHeader_V2/components/index.d.ts +0 -2
  56. package/build/components/TableHeader_V2/components/index.js +0 -2
  57. /package/build/components/{TableHeader_V2/components/StatusButtons → StatusBar}/type.js +0 -0
  58. /package/build/components/{TableHeader_V2 → TableHeader}/FiltersRow.d.ts +0 -0
  59. /package/build/components/{TableHeader_V2 → TableHeader}/FiltersRow.js +0 -0
  60. /package/build/components/{TableHeader_V2 → TableHeader}/TableHeader.d.ts +0 -0
  61. /package/build/components/{TableHeader_V2 → TableHeader}/TableHeader.js +0 -0
  62. /package/build/components/{TableHeader_V2 → TableHeader}/style.d.ts +0 -0
  63. /package/build/components/{TableHeader_V2 → TableHeader}/style.js +0 -0
  64. /package/build/components/{TableHeader_V2 → TableHeader}/type.js +0 -0
  65. /package/build/components/{TableHeader_V2 → TableView}/data.d.ts +0 -0
  66. /package/build/components/{TableHeader_V2 → TableView}/data.js +0 -0
  67. /package/build/components/{TableHeader_V2/components/TableView → TableView}/index.d.ts +0 -0
  68. /package/build/components/{TableHeader_V2/components/TableView → TableView}/index.js +0 -0
  69. /package/build/components/{TableHeader_V2/components/TableView → TableView}/style.d.ts +0 -0
  70. /package/build/components/{TableHeader_V2/components/TableView → TableView}/style.js +0 -0
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 Tap Payments
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Tap Payments
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
- # os-micro-frontend-shared
2
-
3
- ## Publishing Workflow
4
-
5
- 1. Update version in package.json
6
- 2. Commit changes
7
- 3. Create and push a tag:
8
-
9
- ```bash
10
- npm version patch # or minor, major
11
- git push origin main --tags
12
- ```
1
+ # os-micro-frontend-shared
2
+
3
+ ## Publishing Workflow
4
+
5
+ 1. Update version in package.json
6
+ 2. Commit changes
7
+ 3. Create and push a tag:
8
+
9
+ ```bash
10
+ npm version patch # or minor, major
11
+ git push origin main --tags
12
+ ```
@@ -4,7 +4,6 @@ export interface StyledButtonProps extends BoxProps {
4
4
  title?: string;
5
5
  isActive?: boolean;
6
6
  isDisabled?: boolean;
7
- hasImageFilter?: boolean;
8
7
  }
9
8
  declare function StyledButton({ children, title, ...props }: StyledButtonProps): import("react/jsx-runtime").JSX.Element;
10
9
  declare const _default: import("react").MemoExoticComponent<typeof StyledButton>;
@@ -2,4 +2,4 @@
2
2
  import { StyledButtonProps } from './StyledButton';
3
3
  export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
4
4
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
5
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<StyledButtonProps, "isDisabled" | "isActive" | "hasImageFilter">, {}, {}>;
5
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<StyledButtonProps, "isDisabled" | "isActive">, {}, {}>;
@@ -1,13 +1,11 @@
1
1
  import Box from '@mui/material/Box';
2
2
  import { styled } from '@mui/material/styles';
3
- export const Button = styled(Box)(({ isActive, isDisabled, hasImageFilter = true, 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)(({ 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 && {
7
7
  opacity: 0.5,
8
8
  pointerEvents: 'none',
9
- })), (hasImageFilter && {
10
- img: {
9
+ })), { img: {
11
10
  filter: 'brightness(0) invert(0)',
12
- },
13
- }))));
11
+ } })));
@@ -15,6 +15,8 @@ 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" })));
18
+ return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCountriesIcon(code + 'ss') || 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
+ } })));
19
21
  }
20
22
  export default memo(CountryFlag);
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { memo, useState, useRef, useEffect } from 'react';
3
3
  import { useTranslation } from 'react-i18next';
4
4
  import { Typography, Checkbox } from '@mui/material';
5
- import { ChevronIcon } from '../TableHeader_V2/components/StatusButtons/ChevronIcon';
5
+ import { ChevronIcon } from '../StatusButton/ChevronIcon';
6
6
  import StyledBadge, { BadgeVariants } from '../CountBadge';
7
7
  import CountryFlag from '../CountryFlag';
8
8
  import { formatNumber } from '../../utils/index.js';
@@ -1,6 +1,6 @@
1
1
  import type React from 'react';
2
2
  import { type Theme } from '@mui/material';
3
- export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
3
+ export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/style';
4
4
  export declare const StyledStatusButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
5
5
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
6
6
  }, "disabled" | "className" | "style" | "classes" | "color" | "children" | "sx" | "tabIndex" | "size" | "variant" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "href" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
@@ -1,6 +1,6 @@
1
1
  import { Box, Button } from '@mui/material';
2
2
  import { styled } from '@mui/material/styles';
3
- export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
3
+ export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/style';
4
4
  const baseButtonStyle = (theme) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'background-color 0.5s ease, color 0.3s ease', paddingInline: theme.spacing(2) }));
5
5
  export const StyledStatusButton = styled(Button, {
6
6
  shouldForwardProp: (prop) => prop !== 'buttonVariant',
@@ -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;
558
557
  src?: string | undefined;
559
558
  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;
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { AvailableStatus } from '../TableHeader_V2';
3
2
  import { CurrencyOption } from '../MultiSelectStatusButton';
4
3
  import { TableHeaderStatus } from '../../types/index.js';
4
+ import { AvailableStatus } from './type';
5
5
  interface StatusBarProps {
6
6
  status?: TableHeaderStatus;
7
7
  availableStatuses?: AvailableStatus[];
@@ -2,8 +2,8 @@ import { createElement as _createElement } from "react";
2
2
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { memo, useCallback, useState, useEffect } from 'react';
4
4
  import { useTranslation } from 'react-i18next';
5
- import { StatusButton } from '../TableHeader_V2';
6
5
  import MultiSelectStatusButton from '../MultiSelectStatusButton';
6
+ import StatusButton from '../StatusButton';
7
7
  function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies = [], enableMultiSelectCurrency = false, }) {
8
8
  const { t } = useTranslation();
9
9
  const [multiSelectValues, setMultiSelectValues] = useState(selectedCurrencies);
@@ -0,0 +1,5 @@
1
+ import { StatusButtonProps } from '../StatusButton';
2
+ import { TableHeaderStatus } from '../../types/index.js';
3
+ export type AvailableStatus<T = undefined> = StatusButtonProps & {
4
+ status: T | TableHeaderStatus | (TableHeaderStatus | T)[];
5
+ };
@@ -1,2 +1,2 @@
1
- import type { ChevronIconProps } from './type';
2
- export declare function ChevronIcon({ isActive }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;
1
+ import { ChevronIconProps } from './type';
2
+ export declare function ChevronIcon({ isActive, disableHover }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;
@@ -1,11 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
3
  import { useTheme } from '@mui/material';
4
- export function ChevronIcon({ isActive }) {
4
+ export function ChevronIcon({ isActive, disableHover }) {
5
5
  const [isHovered, setIsHovered] = useState(false);
6
6
  const theme = useTheme();
7
7
  const handleMouseEnter = () => {
8
- setIsHovered(true);
8
+ if (!disableHover) {
9
+ setIsHovered(true);
10
+ }
9
11
  };
10
12
  const handleMouseLeave = () => {
11
13
  setIsHovered(false);
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- import type { StatusButtonProps } from './type';
3
- declare function StatusButton({ variant, badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon, ...props }: StatusButtonProps): import("react/jsx-runtime").JSX.Element;
4
- declare const _default: import("react").MemoExoticComponent<typeof StatusButton>;
5
- export default _default;
2
+ import { type StatusButtonProps } from './type';
3
+ declare const StatusButton: import("react").MemoExoticComponent<(props: StatusButtonProps) => import("react/jsx-runtime").JSX.Element>;
4
+ export default StatusButton;
@@ -10,49 +10,65 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
13
- import { memo, useRef, useState } from 'react';
13
+ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
14
14
  import { useTranslation } from 'react-i18next';
15
15
  import StyledBadge, { BadgeVariants } from '../CountBadge';
16
16
  import { convertToNumber, formatNumber } from '../../utils/index.js';
17
17
  import { ChevronIcon } from './ChevronIcon';
18
- import { ChevronContainer, Label, LabelWrapper, StatusIcon, StyledDropdown, statusButtonVariants } from './style';
18
+ import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants } from './style';
19
19
  import { statusButtonIcons } from './constant';
20
- function StatusButton(_a) {
21
- var _b, _c;
22
- var { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon } = _a, props = __rest(_a, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick", "showDropdownIcon"]);
23
- const [anchorEl, setAnchorEl] = useState(null);
24
- const buttonRef = useRef(null);
25
- const [lastActiveStatus, setLastActiveStatus] = useState((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status);
20
+ const StatusButton = memo((props) => {
21
+ var _a;
22
+ const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
23
+ const [buttonClicks, setButtonClicks] = useState(0);
26
24
  const { t } = useTranslation();
27
- const open = Boolean(anchorEl);
28
- const handleClose = () => {
25
+ const buttonRef = useRef(null);
26
+ const [anchorEl, setAnchorEl] = useState(null);
27
+ const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
28
+ const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
29
+ const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
30
+ const isActiveVariant = variant === 'active';
31
+ const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
32
+ const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null), [icon, variant]);
33
+ const statusBadge = useMemo(() => {
34
+ if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
35
+ return null;
36
+ return _jsx(StyledBadge, Object.assign({ variant: badgeVariant }, { children: formatNumber(Number(badgeCount)) }));
37
+ }, [badgeCount, badgeVariant]);
38
+ const dropdownIcon = useMemo(() => (hasDropdown ? _jsx(ChevronIcon, { isActive: isActiveVariant }) : null), [hasDropdown, isActiveVariant]);
39
+ useEffect(() => {
40
+ if (!isActiveVariant) {
41
+ setButtonClicks(0);
42
+ setAnchorEl(null);
43
+ }
44
+ }, [isActiveVariant]);
45
+ const handleDropdownClose = useCallback(() => {
29
46
  setAnchorEl(null);
30
- };
31
- const Button = statusButtonVariants[variant];
32
- const hasDropdown = (dropdownOptions && dropdownOptions.length > 0) || showDropdownIcon;
33
- const statusIcon = icon ? _jsx(StatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null;
34
- const statusBadge = badgeCount && !Number.isNaN(convertToNumber(badgeCount)) ? (_jsx(StyledBadge, Object.assign({ variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }))) : null;
35
- const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;
36
- return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, props, { ref: buttonRef, onClick: (e) => {
37
- var _a, _b;
38
- (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
39
- onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(lastActiveStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
40
- }, sx: Object.assign({}, (hasDropdown && {
47
+ }, []);
48
+ const handleDropdownToggle = useCallback(() => {
49
+ if (!hasDropdown)
50
+ return;
51
+ setAnchorEl(isDropdownOpen ? null : buttonRef.current);
52
+ }, [hasDropdown, isDropdownOpen]);
53
+ const handleButtonClick = useCallback((e) => {
54
+ var _a, _b;
55
+ e.stopPropagation();
56
+ (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
57
+ onButtonBodyClick === null || onButtonBodyClick === void 0 ? void 0 : onButtonBodyClick(selectedStatus || ((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status) || 'all');
58
+ handleDropdownToggle();
59
+ setButtonClicks((prev) => prev + 1);
60
+ }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
61
+ const handleMenuItemClick = useCallback((item) => (e) => {
62
+ var _a;
63
+ (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
64
+ setSelectedStatus(item.status);
65
+ handleDropdownClose();
66
+ }, [handleDropdownClose]);
67
+ const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
68
+ const ButtonComponent = statusButtonVariants[variant];
69
+ const displayLabel = selectedStatus ? t(selectedStatus) : label;
70
+ return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign({}, (hasDropdown && {
41
71
  paddingInlineEnd: '27px',
42
- })) }, { children: _jsxs(LabelWrapper, Object.assign({ onClick: (e) => {
43
- if (showDropdownIcon) {
44
- return;
45
- }
46
- e.stopPropagation();
47
- e.preventDefault();
48
- if (hasDropdown) {
49
- setAnchorEl(buttonRef.current);
50
- }
51
- } }, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, lastActiveStatus ? t(lastActiveStatus) : label, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] })) })), open && !showDropdownIcon && (_jsx(StyledDropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: (_c = (dropdownOptions || [])) === null || _c === void 0 ? void 0 : _c.map((item) => (Object.assign(Object.assign({}, item), { onClick: (e) => {
52
- var _a;
53
- (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
54
- setLastActiveStatus(item.status);
55
- handleClose();
56
- } }))) }))] }));
57
- }
58
- export default memo(StatusButton);
72
+ })) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [statusIcon, displayLabel, statusBadge] })), dropdownIcon && _jsx(ChevronContainer, { children: dropdownIcon })] }) })), isDropdownOpen && hasDropdown && (_jsx(StyledDropdown, { open: isDropdownOpen, onClose: handleDropdownClose, anchorEl: anchorEl, menuItems: menuItems }))] }));
73
+ });
74
+ export default StatusButton;
@@ -33,3 +33,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
33
33
  export declare const LabelWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
34
34
  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
35
35
  }, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
36
+ export declare const StyledStatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
37
+ variant: StatusButtonVariant;
38
+ icon?: "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "reversed" | "authorized" | "paidOut" | "unauthenticated" | "authenticated" | "scheduled" | "unSettled" | "search" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
39
+ }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
@@ -72,3 +72,10 @@ export const LabelWrapper = styled(Box)(() => ({
72
72
  justifyContent: 'center',
73
73
  width: '100%',
74
74
  }));
75
+ export const StyledStatusIcon = styled('img')(({ theme, variant, icon }) => {
76
+ var _a;
77
+ return (Object.assign(Object.assign({ fill: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary, color: variant === 'active' ? theme.palette.common.white : theme.palette.text.primary }, (!(((_a = ['openFlag', 'closedFlag']) === null || _a === void 0 ? void 0 : _a.includes(icon !== null && icon !== void 0 ? icon : '')) && variant === 'inActive') &&
78
+ icon !== 'captured' && {
79
+ filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
80
+ })), { maxWidth: '14px', maxHeight: '14px' }));
81
+ });
@@ -19,5 +19,6 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
19
19
  }
20
20
  export interface ChevronIconProps {
21
21
  isActive?: boolean;
22
+ disableHover?: boolean;
22
23
  }
23
24
  export type StatusButtonIcon = keyof typeof statusButtonIcons;
@@ -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;
276
275
  src?: string | undefined;
277
276
  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', '&:hover': {
14
+ export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', '&: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;
277
276
  src?: string | undefined;
278
277
  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;
266
265
  src?: string | undefined;
267
266
  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;
@@ -2,4 +2,3 @@ export { default as TableHeader } from './TableHeader';
2
2
  export * from './style';
3
3
  export * from './type';
4
4
  export { FiltersRow } from './FiltersRow';
5
- export * from './components';
@@ -2,4 +2,3 @@ export { default as TableHeader } from './TableHeader';
2
2
  export * from './style';
3
3
  export * from './type';
4
4
  export { FiltersRow } from './FiltersRow';
5
- export * from './components';
@@ -1,6 +1,6 @@
1
1
  import React, { PropsWithChildren, ReactNode } from 'react';
2
2
  import type { CalenderMode, TableHeaderStatus, ColumnViewProps } from '../../types/index.js';
3
- import type { StatusButtonProps } from '../StatusButton/type';
3
+ import { AvailableStatus } from '../StatusBar/type';
4
4
  declare const viewsOptions: {
5
5
  default: {};
6
6
  developer: {};
@@ -9,9 +9,6 @@ declare const viewsOptions: {
9
9
  custom: {};
10
10
  };
11
11
  export type View = keyof typeof viewsOptions;
12
- export type AvailableStatus<T = undefined> = StatusButtonProps & {
13
- status: T | TableHeaderStatus | (TableHeaderStatus | T)[];
14
- };
15
12
  export interface TableHeaderProps {
16
13
  availableStatuses?: AvailableStatus[];
17
14
  status?: TableHeaderStatus;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { TableHeaderProps } from '../../type';
2
+ import type { TableHeaderProps } from '../TableHeader/type';
3
3
  interface CustomViewsProps {
4
4
  open: boolean;
5
5
  onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -6,9 +6,9 @@ import { Reorder } from 'framer-motion';
6
6
  import Box from '@mui/material/Box';
7
7
  import Menu from '@mui/material/Menu';
8
8
  import { useTheme } from '@mui/material/styles';
9
- import { downArrowIcon } from '../../../../constants/index.js';
9
+ import { downArrowIcon } from '../../constants/index.js';
10
10
  import { ButtonStyled, ListStyled, DropdownStyled } from './style';
11
- import { NestedMenuItem as MenuItem } from '../../../NestedDropdown';
11
+ import { NestedMenuItem as MenuItem } from '../NestedDropdown';
12
12
  function CustomViews({ open, onSelect, setTableViews: setColumns, tableViews, anchorEl, onClose }) {
13
13
  const columns = tableViews || [];
14
14
  const { t } = useTranslation();
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import type { ViewOption } from '../../type';
2
+ import type { ViewOption } from '../TableHeader/type';
3
3
  interface DefaultViewsProps {
4
4
  open: boolean;
5
5
  selectedViewInfo: ViewOption;
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import Popper from '@mui/material/Popper';
4
4
  import { useTranslation } from 'react-i18next';
5
- import { downArrowIcon, checkIcon } from '../../../../constants/index.js';
5
+ import { downArrowIcon, checkIcon } from '../../constants/index.js';
6
6
  import { ButtonStyled, ListStyled, DropdownStyled, MenuItem, Space, SpaceAfter } from './style';
7
- import { dummyViewList } from '../../data';
7
+ import { dummyViewList } from './data';
8
8
  function DefaultViews({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl }) {
9
9
  const { t } = useTranslation();
10
10
  return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "TableView_DefaultViews" }, { children: [_jsxs(ButtonStyled, Object.assign({ onClick: (e) => {
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import type { TableHeaderProps } from '../../type';
2
+ import type { TableHeaderProps } from '../TableHeader/type';
3
3
  interface TableViewProps {
4
4
  onViewChange?: TableHeaderProps['onViewChange'];
5
5
  setIsViewVisible: (visible: boolean) => void;
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { memo, useState } from 'react';
3
3
  import { ClickAwayListener } from '@mui/material';
4
4
  import { useTranslation } from 'react-i18next';
5
- import { closeXIcon, viewIcon } from '../../../../constants/index.js';
6
- import { StyledButton } from '../../../Button';
7
- import Icon from '../../../Icon';
5
+ import { closeXIcon, viewIcon } from '../../constants/index.js';
6
+ import { StyledButton } from '../Button';
7
+ import Icon from '../Icon';
8
8
  import CustomViews from './CustomViews';
9
9
  import DefaultViews from './DefaultViews';
10
10
  import { ButtonStyled, ViewWrapper } from './style';
@@ -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: { marginInlineStart: '8px', cursor: 'pointer' }, 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: { cursor: 'pointer', marginTop: '2px' }, 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;
310
309
  src?: string | undefined;
311
310
  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;
@@ -90,6 +90,6 @@ export { default as Error } from './Error';
90
90
  export { default as StatusBar } from './StatusBar';
91
91
  export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
92
92
  export * from './Chip';
93
- export * from './TableHeader_V2';
93
+ export * from './TableHeader';
94
94
  export { default as RangeCalender } from './RangeCalender';
95
95
  export { default as AppServices } from './AppServices';
@@ -90,6 +90,6 @@ export { default as Error } from './Error';
90
90
  export { default as StatusBar } from './StatusBar';
91
91
  export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
92
92
  export * from './Chip';
93
- export * from './TableHeader_V2';
93
+ export * from './TableHeader';
94
94
  export { default as RangeCalender } from './RangeCalender';
95
95
  export { default as AppServices } from './AppServices';
@@ -316,7 +316,6 @@ export declare const intentInitiatedStatusIcon: string;
316
316
  export declare const intentCancelledStatusIcon: string;
317
317
  export declare const intentTransactedStatusIcon: string;
318
318
  export declare const longWordsIcon: string;
319
- export declare const sheetViewIcon: string;
320
319
  export declare const abandonedNoBGIcon: string;
321
320
  export declare const paidOutTableIcon: string;
322
321
  export declare const reversePayoutTableIcon: string;
@@ -317,7 +317,6 @@ export const intentInitiatedStatusIcon = `${appBaseUrl}/intentInitiatedStatus.sv
317
317
  export const intentCancelledStatusIcon = `${appBaseUrl}/intentCancelledStatus.svg`;
318
318
  export const intentTransactedStatusIcon = `${appBaseUrl}/intentTransactedStatus.svg`;
319
319
  export const longWordsIcon = `${appBaseUrl}/longWordsIcon.svg`;
320
- export const sheetViewIcon = `${lightUrl}/sheetView.svg`;
321
320
  export const abandonedNoBGIcon = `${lightUrl}/abandonedNoBG.svg`;
322
321
  export const paidOutTableIcon = `${lightUrl}/status/table/paidOut.svg`;
323
322
  export const reversePayoutTableIcon = `${lightUrl}/status/table/reversePayout.svg`;
@@ -16,6 +16,7 @@ export interface HttpMethodFilters {
16
16
  startAfter?: string;
17
17
  keyword?: string;
18
18
  merchants?: string[];
19
+ merchantIds?: string[];
19
20
  }
20
21
  export interface QueryConfig extends Omit<HttpMethodConfig, 'signal'> {
21
22
  }