@tap-payments/os-micro-frontend-shared 0.0.175 → 0.0.180-alpha.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/Button/StyledButton/style.d.ts

@@ -2,6 +2,4 @@
 import { StyledButtonProps } from './StyledButton';
 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"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<StyledButtonProps, "isDisabled" | "isActive"> & {
-    hasImageFilter?: boolean | undefined;
-}, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & Pick<StyledButtonProps, "isDisabled" | "isActive">, {}, {}>;

package/build/components/Button/StyledButton/style.js

@@ -1,13 +1,11 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-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 && {
+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 && {
     boxShadow: theme.shadows[7],
     borderColor: theme.palette.info.dark,
 })), (isDisabled && {
     opacity: 0.5,
     pointerEvents: 'none',
-})), (hasImageFilter && {
-    img: {
+})), { img: {
         filter: 'brightness(0) invert(0)',
-    },
-}))));
+    } })));

package/build/components/CountryFlag/CountryFlag.js

@@ -15,6 +15,8 @@ import Box from '@mui/material/Box';
 import { defaultCountryIcon, getCountriesIcon } from '../../constants/index.js';
 function CountryFlag(_a) {
     var { code = '' } = _a, props = __rest(_a, ["code"]);
-    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" })));
+    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) => {
+            e.currentTarget.src = defaultCountryIcon;
+        } })));
 }
 export default memo(CountryFlag);

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { memo, useState, useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Typography, Checkbox } from '@mui/material';
-import { ChevronIcon } from '../TableHeader_V2/components/StatusButtons/ChevronIcon';
+import { ChevronIcon } from '../StatusButton/ChevronIcon';
 import StyledBadge, { BadgeVariants } from '../CountBadge';
 import CountryFlag from '../CountryFlag';
 import { formatNumber } from '../../utils/index.js';

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { type Theme } from '@mui/material';
-export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/style';
 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"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "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> & {

package/build/components/MultiSelectStatusButton/style.js

@@ -1,6 +1,6 @@
 import { Box, Button } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/style';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/style';
 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) }));
 export const StyledStatusButton = styled(Button, {
     shouldForwardProp: (prop) => prop !== 'buttonVariant',

package/build/components/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/StatusBar/StatusBar.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { AvailableStatus } from '../TableHeader_V2';
 import { CurrencyOption } from '../MultiSelectStatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
+import { AvailableStatus } from './type';
 interface StatusBarProps {
     status?: TableHeaderStatus;
     availableStatuses?: AvailableStatus[];

package/build/components/StatusBar/StatusBar.js

@@ -2,8 +2,8 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StatusButton } from '../TableHeader_V2';
 import MultiSelectStatusButton from '../MultiSelectStatusButton';
+import StatusButton from '../StatusButton';
 function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies = [], enableMultiSelectCurrency = false, }) {
     const { t } = useTranslation();
     const [multiSelectValues, setMultiSelectValues] = useState(selectedCurrencies);

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

@@ -0,0 +1,5 @@
+import { StatusButtonProps } from '../StatusButton';
+import { TableHeaderStatus } from '../../types/index.js';
+export type AvailableStatus<T = undefined> = StatusButtonProps & {
+    status: T | TableHeaderStatus | (TableHeaderStatus | T)[];
+};

package/build/components/StatusButton/ChevronIcon.d.ts

@@ -1,2 +1,2 @@
-import type { ChevronIconProps } from './type';
-export declare function ChevronIcon({ isActive }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;
+import { ChevronIconProps } from './type';
+export declare function ChevronIcon({ isActive, disableHover }: ChevronIconProps): import("react/jsx-runtime").JSX.Element;

package/build/components/StatusButton/ChevronIcon.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTheme } from '@mui/material';
-export function ChevronIcon({ isActive }) {
+export function ChevronIcon({ isActive, disableHover }) {
     const [isHovered, setIsHovered] = useState(false);
     const theme = useTheme();
     const handleMouseEnter = () => {
-        setIsHovered(true);
+        if (!disableHover) {
+            setIsHovered(true);
+        }
     };
     const handleMouseLeave = () => {
         setIsHovered(false);

package/build/components/StatusButton/StatusButton.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { StatusButtonProps } from './type';
-declare function StatusButton({ variant, badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon, ...props }: StatusButtonProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof StatusButton>;
-export default _default;
+import { type StatusButtonProps } from './type';
+declare const StatusButton: import("react").MemoExoticComponent<(props: StatusButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default StatusButton;

package/build/components/StatusButton/StatusButton.js

@@ -10,49 +10,65 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import StyledBadge, { BadgeVariants } from '../CountBadge';
 import { convertToNumber, formatNumber } from '../../utils/index.js';
 import { ChevronIcon } from './ChevronIcon';
-import { ChevronContainer, Label, LabelWrapper, StatusIcon, StyledDropdown, statusButtonVariants } from './style';
+import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants } from './style';
 import { statusButtonIcons } from './constant';
-function StatusButton(_a) {
-    var _b, _c;
-    var { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick, showDropdownIcon } = _a, props = __rest(_a, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick", "showDropdownIcon"]);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const buttonRef = useRef(null);
-    const [lastActiveStatus, setLastActiveStatus] = useState((_b = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _b === void 0 ? void 0 : _b.status);
+const StatusButton = memo((props) => {
+    var _a;
+    const { variant = 'inActive', badgeCount, icon, label, dropdownOptions, onButtonBodyClick } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "onButtonBodyClick"]);
+    const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
-    const open = Boolean(anchorEl);
-    const handleClose = () => {
+    const buttonRef = useRef(null);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [selectedStatus, setSelectedStatus] = useState((_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
+    const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
+    const isActiveVariant = variant === 'active';
+    const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
+    const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null), [icon, variant]);
+    const statusBadge = useMemo(() => {
+        if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
+            return null;
+        return _jsx(StyledBadge, Object.assign({ variant: badgeVariant }, { children: formatNumber(Number(badgeCount)) }));
+    }, [badgeCount, badgeVariant]);
+    const dropdownIcon = useMemo(() => (hasDropdown ? _jsx(ChevronIcon, { isActive: isActiveVariant }) : null), [hasDropdown, isActiveVariant]);
+    useEffect(() => {
+        if (!isActiveVariant) {
+            setButtonClicks(0);
+            setAnchorEl(null);
+        }
+    }, [isActiveVariant]);
+    const handleDropdownClose = useCallback(() => {
         setAnchorEl(null);
-    };
-    const Button = statusButtonVariants[variant];
-    const hasDropdown = (dropdownOptions && dropdownOptions.length > 0) || showDropdownIcon;
-    const statusIcon = icon ? _jsx(StatusIcon, { icon: icon, variant: variant, src: statusButtonIcons[icon], alt: `${icon}-icon` }) : null;
-    const statusBadge = badgeCount && !Number.isNaN(convertToNumber(badgeCount)) ? (_jsx(StyledBadge, Object.assign({ variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(Number(badgeCount)) }))) : null;
-    const dropdownIcon = hasDropdown ? _jsx(ChevronIcon, { isActive: variant === 'active' }) : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ "data-testid": "StatusButton" }, props, { ref: buttonRef, onClick: (e) => {
-                    var _a, _b;
-                    (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                    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');
-                }, sx: Object.assign({}, (hasDropdown && {
+    }, []);
+    const handleDropdownToggle = useCallback(() => {
+        if (!hasDropdown)
+            return;
+        setAnchorEl(isDropdownOpen ? null : buttonRef.current);
+    }, [hasDropdown, isDropdownOpen]);
+    const handleButtonClick = useCallback((e) => {
+        var _a, _b;
+        e.stopPropagation();
+        (_a = props === null || props === void 0 ? void 0 : props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        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');
+        handleDropdownToggle();
+        setButtonClicks((prev) => prev + 1);
+    }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
+    const handleMenuItemClick = useCallback((item) => (e) => {
+        var _a;
+        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+        setSelectedStatus(item.status);
+        handleDropdownClose();
+    }, [handleDropdownClose]);
+    const menuItems = useMemo(() => (dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((item) => (Object.assign(Object.assign({}, item), { onClick: handleMenuItemClick(item) })))) || [], [dropdownOptions, handleMenuItemClick]);
+    const ButtonComponent = statusButtonVariants[variant];
+    const displayLabel = selectedStatus ? t(selectedStatus) : label;
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign({}, (hasDropdown && {
                     paddingInlineEnd: '27px',
-                })) }, { children: _jsxs(LabelWrapper, Object.assign({ onClick: (e) => {
-                        if (showDropdownIcon) {
-                            return;
-                        }
-                        e.stopPropagation();
-                        e.preventDefault();
-                        if (hasDropdown) {
-                            setAnchorEl(buttonRef.current);
-                        }
-                    } }, { 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) => {
-                        var _a;
-                        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
-                        setLastActiveStatus(item.status);
-                        handleClose();
-                    } }))) }))] }));
-}
-export default memo(StatusButton);
+                })) }, { 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 }))] }));
+});
+export default StatusButton;

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

@@ -33,3 +33,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 export declare const LabelWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const StyledStatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    variant: StatusButtonVariant;
+    icon?: "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "reversed" | "authorized" | "paidOut" | "unauthenticated" | "authenticated" | "scheduled" | "unSettled" | "search" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/StatusButton/style.js

@@ -72,3 +72,10 @@ export const LabelWrapper = styled(Box)(() => ({
     justifyContent: 'center',
     width: '100%',
 }));
+export const StyledStatusIcon = styled('img')(({ theme, variant, icon }) => {
+    var _a;
+    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') &&
+        icon !== 'captured' && {
+        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    })), { maxWidth: '14px', maxHeight: '14px' }));
+});

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

@@ -19,5 +19,6 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
 }
 export interface ChevronIconProps {
     isActive?: boolean;
+    disableHover?: boolean;
 }
 export type StatusButtonIcon = keyof typeof statusButtonIcons;

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

@@ -272,9 +272,9 @@ 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -11,7 +11,7 @@ export const ActionCellContainer = styled('section', {
     gap: tableMode === 'sheet' ? '4px' : theme.spacing(1),
     overflow: 'visible',
 }));
-export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', '&:hover': {
+export const ActionsIconContainer = styled('span')(({ selected }) => (Object.assign(Object.assign({ overflow: 'visible', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', '&:hover': {
         boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.18);',
     } }, (selected && {
     boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.18);',

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

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/{TableHeader_V2 → TableHeader}/index.d.ts

@@ -2,4 +2,3 @@ export { default as TableHeader } from './TableHeader';
 export * from './style';
 export * from './type';
 export { FiltersRow } from './FiltersRow';
-export * from './components';

package/build/components/{TableHeader_V2 → TableHeader}/index.js

@@ -2,4 +2,3 @@ export { default as TableHeader } from './TableHeader';
 export * from './style';
 export * from './type';
 export { FiltersRow } from './FiltersRow';
-export * from './components';

package/build/components/{TableHeader_V2 → TableHeader}/type.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import type { CalenderMode, TableHeaderStatus, ColumnViewProps } from '../../types/index.js';
-import type { StatusButtonProps } from '../StatusButton/type';
+import { AvailableStatus } from '../StatusBar/type';
 declare const viewsOptions: {
     default: {};
     developer: {};
@@ -9,9 +9,6 @@ declare const viewsOptions: {
     custom: {};
 };
 export type View = keyof typeof viewsOptions;
-export type AvailableStatus<T = undefined> = StatusButtonProps & {
-    status: T | TableHeaderStatus | (TableHeaderStatus | T)[];
-};
 export interface TableHeaderProps {
     availableStatuses?: AvailableStatus[];
     status?: TableHeaderStatus;

package/build/components/{TableHeader_V2/components/TableView → TableView}/CustomViews.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TableHeaderProps } from '../../type';
+import type { TableHeaderProps } from '../TableHeader/type';
 interface CustomViewsProps {
     open: boolean;
     onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;

package/build/components/{TableHeader_V2/components/TableView → TableView}/CustomViews.js

@@ -6,9 +6,9 @@ import { Reorder } from 'framer-motion';
 import Box from '@mui/material/Box';
 import Menu from '@mui/material/Menu';
 import { useTheme } from '@mui/material/styles';
-import { downArrowIcon } from '../../../../constants/index.js';
+import { downArrowIcon } from '../../constants/index.js';
 import { ButtonStyled, ListStyled, DropdownStyled } from './style';
-import { NestedMenuItem as MenuItem } from '../../../NestedDropdown';
+import { NestedMenuItem as MenuItem } from '../NestedDropdown';
 function CustomViews({ open, onSelect, setTableViews: setColumns, tableViews, anchorEl, onClose }) {
     const columns = tableViews || [];
     const { t } = useTranslation();

package/build/components/{TableHeader_V2/components/TableView → TableView}/DefaultViews.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ViewOption } from '../../type';
+import type { ViewOption } from '../TableHeader/type';
 interface DefaultViewsProps {
     open: boolean;
     selectedViewInfo: ViewOption;

package/build/components/{TableHeader_V2/components/TableView → TableView}/DefaultViews.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Popper from '@mui/material/Popper';
 import { useTranslation } from 'react-i18next';
-import { downArrowIcon, checkIcon } from '../../../../constants/index.js';
+import { downArrowIcon, checkIcon } from '../../constants/index.js';
 import { ButtonStyled, ListStyled, DropdownStyled, MenuItem, Space, SpaceAfter } from './style';
-import { dummyViewList } from '../../data';
+import { dummyViewList } from './data';
 function DefaultViews({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl }) {
     const { t } = useTranslation();
     return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "TableView_DefaultViews" }, { children: [_jsxs(ButtonStyled, Object.assign({ onClick: (e) => {

package/build/components/{TableHeader_V2/components/TableView → TableView}/TableView.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { TableHeaderProps } from '../../type';
+import type { TableHeaderProps } from '../TableHeader/type';
 interface TableViewProps {
     onViewChange?: TableHeaderProps['onViewChange'];
     setIsViewVisible: (visible: boolean) => void;

package/build/components/{TableHeader_V2/components/TableView → TableView}/TableView.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useState } from 'react';
 import { ClickAwayListener } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { closeXIcon, viewIcon } from '../../../../constants/index.js';
-import { StyledButton } from '../../../Button';
-import Icon from '../../../Icon';
+import { closeXIcon, viewIcon } from '../../constants/index.js';
+import { StyledButton } from '../Button';
+import Icon from '../Icon';
 import CustomViews from './CustomViews';
 import DefaultViews from './DefaultViews';
 import { ButtonStyled, ViewWrapper } from './style';

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -52,7 +52,7 @@ function ColumnFilter(filter) {
     }, [open, filter, anchorEl, setAnchorEl]);
     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: () => {
                                 filter.onClear(filterApiKeys);
-                            } })] })) : (_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: {
+                            } })] })) : (_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: {
                         zIndex: 9999,
                     } }, { children: renderFilter }))] })) })));
 }

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

@@ -306,9 +306,9 @@ 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;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/index.d.ts

@@ -90,6 +90,6 @@ export { default as Error } from './Error';
 export { default as StatusBar } from './StatusBar';
 export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
 export * from './Chip';
-export * from './TableHeader_V2';
+export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';

package/build/components/index.js

@@ -90,6 +90,6 @@ export { default as Error } from './Error';
 export { default as StatusBar } from './StatusBar';
 export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
 export * from './Chip';
-export * from './TableHeader_V2';
+export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';

package/build/constants/assets.d.ts

@@ -316,7 +316,6 @@ export declare const intentInitiatedStatusIcon: string;
 export declare const intentCancelledStatusIcon: string;
 export declare const intentTransactedStatusIcon: string;
 export declare const longWordsIcon: string;
-export declare const sheetViewIcon: string;
 export declare const abandonedNoBGIcon: string;
 export declare const paidOutTableIcon: string;
 export declare const reversePayoutTableIcon: string;

package/build/constants/assets.js

@@ -317,7 +317,6 @@ export const intentInitiatedStatusIcon = `${appBaseUrl}/intentInitiatedStatus.sv
 export const intentCancelledStatusIcon = `${appBaseUrl}/intentCancelledStatus.svg`;
 export const intentTransactedStatusIcon = `${appBaseUrl}/intentTransactedStatus.svg`;
 export const longWordsIcon = `${appBaseUrl}/longWordsIcon.svg`;
-export const sheetViewIcon = `${lightUrl}/sheetView.svg`;
 export const abandonedNoBGIcon = `${lightUrl}/abandonedNoBG.svg`;
 export const paidOutTableIcon = `${lightUrl}/status/table/paidOut.svg`;
 export const reversePayoutTableIcon = `${lightUrl}/status/table/reversePayout.svg`;