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

package/build/components/StatusButton/StatusButton.js

@@ -15,33 +15,50 @@ 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, StyledStatusIcon, StyledDropdown, statusButtonVariants } from './style';
+import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants, IconWrapper } from './style';
 import { statusButtonIcons } from './constant';
 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 { variant = 'inActive', badgeCount, icon, label, dropdownOptions, selectedStatus: initialStatus, onButtonBodyClick, iconMapper = statusButtonIcons, buttonSx } = props, restProps = __rest(props, ["variant", "badgeCount", "icon", "label", "dropdownOptions", "selectedStatus", "onButtonBodyClick", "iconMapper", "buttonSx"]);
     const [buttonClicks, setButtonClicks] = useState(0);
     const { t } = useTranslation();
     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 [selectedStatus, setSelectedStatus] = useState(initialStatus !== null && initialStatus !== void 0 ? initialStatus : (_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
+    useEffect(() => {
+        if (initialStatus !== undefined) {
+            setSelectedStatus(initialStatus);
+        }
+    }, [initialStatus]);
     const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
+    // only open if button is clicked more than once
     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 selectedOption = useMemo(() => (selectedStatus ? dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option.status === selectedStatus) : null), [selectedStatus, dropdownOptions]);
+    const statusIcon = useMemo(() => {
+        if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) {
+            return _jsx(IconWrapper, Object.assign({ variant: variant }, { children: selectedOption.icon }));
+        }
+        const iconKey = selectedStatus && iconMapper[selectedStatus] ? selectedStatus : icon;
+        if (iconKey && iconMapper[iconKey]) {
+            return _jsx(StyledStatusIcon, { icon: iconKey, variant: variant, src: iconMapper[iconKey], alt: `${iconKey}-icon` });
+        }
+    }, [selectedOption, selectedStatus, iconMapper, 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]);
+    // Reset button clicks and anchor element when variant changes
     useEffect(() => {
         if (!isActiveVariant) {
             setButtonClicks(0);
             setAnchorEl(null);
         }
     }, [isActiveVariant]);
+    // Event handlers
     const handleDropdownClose = useCallback(() => {
         setAnchorEl(null);
     }, []);
@@ -58,17 +75,20 @@ const StatusButton = memo((props) => {
         handleDropdownToggle();
         setButtonClicks((prev) => prev + 1);
     }, [props, onButtonBodyClick, selectedStatus, dropdownOptions, handleDropdownToggle]);
-    const handleMenuItemClick = useCallback((item) => (e) => {
+    const handleMenuItemClick = useCallback(
+    // eslint-disable-next-line
+    (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]);
+    // Enhanced dropdown menu items
     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, { 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 }))] }));
+    const displayLabel = useMemo(() => {
+        return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedStatus ? t(selectedStatus) : label);
+    }, [selectedOption, selectedStatus, t, label]);
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, Object.assign({ "data-testid": "StatusButton" }, restProps, { ref: buttonRef, onClick: handleButtonClick, sx: Object.assign(Object.assign({}, (hasDropdown && { paddingInlineEnd: '27px' })), buttonSx) }, { 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/constant.d.ts

@@ -19,4 +19,9 @@ export declare const statusButtonIcons: {
     paidOut: string;
     scheduled: string;
     checked: string;
+    dashedChecked: string;
+    deactivated: string;
+    destination: string;
+    destinationReversed: string;
+    outstanding: string;
 };

package/build/components/StatusButton/constant.js

@@ -1,4 +1,6 @@
-import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, } from '../../constants/index.js';
+import { initiatedIcon, abandonedIcon, cancelledIcon, reportsIcon, searchIcon, chevronDownIcon, unAuthorizedIcon, settlementInitiatedIcon, unCapturedIcon, capturedIcon, authorizedIcon, openFlagIcon, closedFlagIcon, reverseActionIcon, authenticatedIcon, unauthenticatedIcon, paidOutFilterIcon, scheduledFilterIcon, completedBlackIcon, dashedCheckIcon, deactivatedIcon, destinationsServiceIcon, destinationWithoutBackgroundIcon, outstandingIcon,
+// trashBinIcon,
+ } from '../../constants/index.js';
 export const statusButtonIcons = {
     inProgress: initiatedIcon,
     initiated: initiatedIcon,
@@ -20,4 +22,9 @@ export const statusButtonIcons = {
     paidOut: paidOutFilterIcon,
     scheduled: scheduledFilterIcon,
     checked: completedBlackIcon,
+    dashedChecked: dashedCheckIcon,
+    deactivated: deactivatedIcon,
+    destination: destinationsServiceIcon,
+    destinationReversed: destinationWithoutBackgroundIcon,
+    outstanding: outstandingIcon,
 };

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

@@ -1,14 +1,15 @@
 import type React from 'react';
 import { type Theme } from '@mui/material';
+import { StatusButtonProps } from './type';
 export declare const statusButtonVariants: {
     active: 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" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    }, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
         icon?: string | undefined;
     }, {}, {}>;
     inActive: 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" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    }, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
         icon?: string | undefined;
     }, {}, {}>;
 };
@@ -20,7 +21,7 @@ export declare const CountBadge: import("@emotion/styled").StyledComponent<impor
 }, {}, {}>;
 export declare const StatusIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
     variant: StatusButtonVariant;
-    icon?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+    icon?: "search" | "scheduled" | "paidOut" | "destination" | "reversed" | "checked" | "inProgress" | "initiated" | "abandoned" | "cancelled" | "reports" | "chevronDown" | "unAuthorized" | "unSettled" | "unCaptured" | "captured" | "authorized" | "openFlag" | "closedFlag" | "unauthenticated" | "authenticated" | "dashedChecked" | "deactivated" | "destinationReversed" | "outstanding" | undefined;
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StyledFilterName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const StyledDropdown: import("@emotion/styled").StyledComponent<import("../DropdownMenu").IProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
@@ -35,5 +36,10 @@ export declare const LabelWrapper: import("@emotion/styled").StyledComponent<imp
 }, 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?: "search" | "scheduled" | "paidOut" | "reversed" | "checked" | "initiated" | "captured" | "unCaptured" | "inProgress" | "abandoned" | "cancelled" | "authorized" | "unauthenticated" | "authenticated" | "unSettled" | "reports" | "chevronDown" | "unAuthorized" | "openFlag" | "closedFlag" | undefined;
+    icon?: StatusButtonProps['icon'];
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const IconWrapper: 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> & {
+    variant: StatusButtonVariant;
+}, {}, {}>;

package/build/components/StatusButton/style.js

@@ -79,3 +79,14 @@ export const StyledStatusIcon = styled('img')(({ theme, variant, icon }) => {
         filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
     })), { maxWidth: '14px', maxHeight: '14px' }));
 });
+export const IconWrapper = styled(Box)(({ variant }) => ({
+    width: '14px',
+    height: '14px',
+    display: 'flex',
+    alignItems: 'center',
+    '& img': {
+        width: '14px',
+        height: '14px',
+        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    },
+}));

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { type ButtonProps } from '@mui/material';
+import { SxProps, type ButtonProps } from '@mui/material';
 import { TableHeaderStatus } from '../../types/index.js';
 import { type StatusButtonVariant } from './style';
 import { MenuItemI } from '../DropdownMenu';
@@ -8,14 +8,28 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     variant?: StatusButtonVariant;
     badgeCount?: number | string;
     hasDropdown?: boolean;
-    icon?: StatusButtonIcon;
+    icon?: StatusButtonIcon | (string & {});
     label?: ReactNode | null;
     showDropdownIcon?: boolean;
     totalCount?: number;
+    selectedStatus?: TableHeaderStatus;
     onButtonBodyClick?: (status: TableHeaderStatus) => void;
+    /**
+     * @description
+     * `iconMapper` is used as an override for mapping between a given key (statusKey .. ex:`"active"`) and icon src URL
+     * @example
+     * ```js
+     *  iconMapper: {
+     *    active:'http://base-url/active.svg',
+     *    inactive:'http://base-url/inactive.svg',
+     *  }
+     * ```
+     */
+    iconMapper?: Record<StatusButtonIcon | (string & {}), string>;
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;
+    buttonSx?: SxProps;
 }
 export interface ChevronIconProps {
     isActive?: boolean;

package/build/components/StatusChip/StatusChip.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './type';
-declare const StatusChip: ({ children, unknownText, copyText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusChip: ({ children, unknownText, copyText, expandDirection, chipStyles, containerStyles, fullWidth, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -10,22 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AnimatePresence, motion } from 'framer-motion';
-import { copyText as copyTextHandler } from '../../utils/index.js';
-import { blueCopyIcon, greenCheckIcon } from '../../constants/index.js';
-import { unknownGeographyColors } from './constants';
+import { copyText as copyTextHandler, isArabic } from '../../utils/index.js';
+import { copyIcon, greenCheckIcon } from '../../constants/index.js';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
+import { emptyStatusChipColors } from '../../constants/index.js';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
+    var { children, unknownText, copyText, expandDirection = 'right', chipStyles, containerStyles, fullWidth = false } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection", "chipStyles", "containerStyles", "fullWidth"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
-    if (!children) {
-        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { isSelected: false }, { children: unknownText ? t(unknownText) : t('unknown') })));
-    }
-    const handleCopy = (e) => {
+    const isCopyActive = isSelected && copyText;
+    const handleCopy = useCallback((e) => {
         e.stopPropagation();
         if (copyText) {
             setShowCopy(true);
@@ -37,9 +35,24 @@ const StatusChip = (_a) => {
                 clearTimeout(timer);
             };
         }
-    };
-    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
-                        paddingRight: isSelected && copyText ? 12 : 0,
-                    }, transition: { delay: !isSelected ? 0.2 : 0 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : blueCopyIcon, style: Object.assign({ height: 12, width: 12, objectFit: 'contain' }, (showCopy && { filter: 'none' })) }) })) })] })) }))] })));
+    }, [copyText]);
+    const copyButton = useMemo(() => (_jsx(CopyWrapper, Object.assign({ sx: Object.assign(Object.assign({}, (expandDirection === 'right' && { right: '8px' })), (expandDirection === 'left' && { left: '8px' })) }, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
+                height: 12,
+                width: 12,
+                objectFit: 'contain',
+            } }) }))), [showCopy, handleCopy, expandDirection]);
+    const isExpandedRightActive = isCopyActive && expandDirection === 'right';
+    const isExpandedLeftActive = isCopyActive && expandDirection === 'left';
+    if (!children) {
+        return (_jsx(ChipStyled, Object.assign({}, emptyStatusChipColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider, width: fullWidth ? '100%' : 'auto' }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
+    }
+    return (_jsxs(motion.div, Object.assign({ style: Object.assign(Object.assign({ position: 'relative' }, containerStyles), (fullWidth && { width: '100%', minWidth: 0 })), animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none', width: fullWidth ? '100%' : 'auto' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ style: {
+                    position: 'absolute',
+                    top: 0,
+                    zIndex: isSelected ? 3 : 0,
+                    width: fullWidth ? '100%' : 'auto',
+                    left: expandDirection === 'right' ? 0 : 'unset',
+                    right: expandDirection === 'left' ? 0 : 'unset',
+                }, transition: { delay: isSelected ? 0 : 0.3, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, sx: { width: fullWidth ? '100%' : 'auto' } }, chipStyles, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: Object.assign({ display: 'flex', gap: '4px' }, (fullWidth && { maxWidth: '100%', width: '100%' })), animate: Object.assign(Object.assign({}, (isExpandedRightActive && { paddingRight: 12 })), (isExpandedLeftActive && { paddingLeft: 12 })), transition: { delay: isSelected ? 0 : 0.3, duration: 0.2 } }, { children: [_jsx(AnimatePresence, { children: isExpandedLeftActive && copyButton }), _jsx(Wrapper, Object.assign({ "data-is-arabic": typeof children === 'string' && isArabic(children) }, { children: children })), _jsx(AnimatePresence, { children: isExpandedRightActive && copyButton })] })) })) }))] })));
 };
 export default StatusChip;

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

@@ -8,9 +8,15 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     disabled?: boolean | undefined;
     padding?: string | undefined;
     unknownText?: string | undefined;
+    minWidth?: string | undefined;
     maxWidth?: string | undefined;
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
+    expandDirection?: "left" | "right" | undefined;
+    chipStyles?: object | undefined;
+    disableAnimation?: boolean | undefined;
+    containerStyles?: object | undefined;
+    fullWidth?: boolean | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {

package/build/components/StatusChip/style.js

@@ -1,28 +1,32 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { SELECTION_COLORS } from '../../utils/index.js';
 export const ChipStyled = styled(Box, {
-    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected'].includes(prop),
-})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, }) => {
-    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
-        color: SELECTION_COLORS.primary,
-        borderColor: SELECTION_COLORS.primary,
-        img: {
-            filter: 'brightness(0) saturate(100%) invert(44%) sepia(54%) saturate(1203%) hue-rotate(170deg) brightness(91%) contrast(84%)',
+    shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'minWidth', 'padding', 'maxWidth', 'isSelected', 'disableAnimation'].includes(prop),
+})(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, minWidth, maxWidth, disableAnimation, }) => {
+    return Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 8px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: minWidth || '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+        boxShadow: 'white 7px 0px 8px 2px',
+    })), (disableAnimation && {
+        transition: 'none !important',
+        animation: 'none !important',
+        transform: 'none !important',
+        '& *': {
+            transition: 'none !important',
+            animation: 'none !important',
+            transform: 'none !important',
         },
     }));
 });
 export const Wrapper = styled(Box)(() => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     gap: '4px',
-    minWidth: 46,
     textAlign: 'center',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+    flex: 1,
 }));
 export const CopyWrapper = styled(Box)(() => ({
     position: 'absolute',
-    right: '8px',
     top: 0,
     height: '100%',
     width: '12px',

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

@@ -7,7 +7,13 @@ export type ChipProps = PropsWithChildren<{
     disabled?: boolean;
     padding?: string;
     unknownText?: string;
+    minWidth?: string;
     maxWidth?: string;
     isSelected?: boolean;
     copyText?: string;
+    expandDirection?: 'left' | 'right';
+    chipStyles?: object;
+    disableAnimation?: boolean;
+    containerStyles?: object;
+    fullWidth?: boolean;
 } & BoxProps>;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.d.ts

@@ -5,7 +5,9 @@ export interface StatusChipWithCopyProps extends StatusChipProps {
     copyText?: string;
     chipIndex: number;
     selectionProps: SelectionProps;
+    chipStyles?: object;
+    fullWidth?: boolean;
 }
-declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...reset }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusChipWithCopy({ children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId }, ...rest }: StatusChipWithCopyProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusChipWithCopy>;
 export default _default;

package/build/components/StatusChipWithCopy/StatusChipWithCopy.js

@@ -14,9 +14,9 @@ import { memo, useMemo } from 'react';
 import StatusChip from '../StatusChip';
 import { checkIsSelected } from './utils';
 function StatusChipWithCopy(_a) {
-    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, reset = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
+    var { children, copyText, chipIndex, selectionProps: { onClick, rowIndex, colIndex, selectedId } } = _a, rest = __rest(_a, ["children", "copyText", "chipIndex", "selectionProps"]);
     const isSelected = useMemo(() => checkIsSelected({ rowIndex, colIndex, selectedId, chipIndex }), [rowIndex, colIndex, selectedId, chipIndex]);
-    return (_jsx(StatusChip, Object.assign({}, reset, { copyText: copyText, onClick: (e) => {
+    return (_jsx(StatusChip, Object.assign({}, rest, { copyText: copyText, onClick: (e) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(e, chipIndex);
         }, isSelected: isSelected }, { children: children })));
 }

package/build/components/StatusFilter/StatusFilter.d.ts

@@ -0,0 +1,15 @@
+import { CustomColumnFilterProps } from '../VirtualTables';
+import { ColumnFilterValues, StatusValue } from '../../types/index.js';
+interface StatusFilterProps extends CustomColumnFilterProps {
+    options: {
+        icon: string;
+        label: string;
+        value: string;
+    }[];
+    apiKey?: string;
+    initialStatuses?: Record<string, StatusValue>;
+    onClear: (apiKeys: string[]) => void;
+    onConfirm: (filterValues: ColumnFilterValues) => void;
+}
+export default function StatusFilter({ anchorEl, options, apiKey, initialStatuses, onCloseDropdown, onClear, onConfirm, }: Readonly<StatusFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/StatusFilter/StatusFilter.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { Menu, MenuItem, RadioGroup } from '../index.js';
+import { FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../Filters';
+import { rightArrow } from '../../constants/index.js';
+import { ClickAwayListener, Popper } from '@mui/material';
+import { getInitialStatuses } from './utils';
+import { StatusValue } from '../../types/index.js';
+export default function StatusFilter({ anchorEl, options, apiKey = 'statuses', initialStatuses, onCloseDropdown, onClear, onConfirm, }) {
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const [statuses, setStatuses] = useState(() => {
+        return getInitialStatuses(initialStatuses, options);
+    });
+    const containerRef = useRef(null);
+    const [childAnchorEl, setChildAnchorEl] = useState(null);
+    const [hoveredStatus, setHoveredStatus] = useState(null);
+    const onChildMouseOver = (event, status) => {
+        setChildAnchorEl(event.currentTarget);
+        setHoveredStatus(status);
+    };
+    const onChildLeave = useCallback(() => {
+        setChildAnchorEl(null);
+        setHoveredStatus(null);
+    }, []);
+    const onCloseDropdowns = useCallback((e) => {
+        onCloseDropdown(e);
+        onChildLeave();
+    }, [onChildLeave, onCloseDropdown]);
+    const handleOkButtonClick = (e) => {
+        const newStatuses = Object.keys(statuses).reduce((acc, key) => {
+            const value = statuses[key];
+            if (value !== StatusValue.ALL) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        const isAllStatuses = Object.values(statuses).every((value) => value === StatusValue.ALL);
+        if (isAllStatuses) {
+            // when all statuses are selected as `all`, remove the active filter icon if it exists
+            onClear([apiKey]);
+        }
+        else {
+            onConfirm({ [apiKey]: newStatuses });
+        }
+        onCloseDropdown(e);
+    };
+    const onClickStatus = (value) => {
+        if (hoveredStatus) {
+            setStatuses((prev) => (Object.assign(Object.assign({}, prev), { [hoveredStatus]: value })));
+        }
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: (e) => {
+            e.stopPropagation();
+            onCloseDropdown(e);
+        } }, { children: _jsxs(Box, Object.assign({ ref: containerRef }, { children: [_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), options.map(({ value, label }) => (_jsxs(MenuItem, Object.assign({ onClick: (e) => {
+                                setChildAnchorEl(e.currentTarget);
+                            }, onMouseOver: (e) => {
+                                onChildMouseOver(e, value);
+                            }, sx: {
+                                minHeight: '35px',
+                                padding: '8px 16px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                cursor: 'pointer',
+                                '&:hover': { backgroundColor: '#fff', boxShadow: '0px 0px 16px 0px #00000021' },
+                            }, hideCheckbox: true }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: label })), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] }), value))), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdowns }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })), _jsx(Popper, Object.assign({ open: Boolean(childAnchorEl), anchorEl: childAnchorEl, placement: "right-start", onMouseLeave: onChildLeave }, { children: _jsx(Box, Object.assign({ sx: {
+                            backgroundColor: '#fff',
+                            borderEndEndRadius: '8px',
+                            border: '1px solid #F2F2F2',
+                        } }, { children: _jsx(RadioGroup, { options: [
+                                {
+                                    value: StatusValue.ALL,
+                                    label: 'All',
+                                },
+                                {
+                                    value: StatusValue.ENABLED,
+                                    label: 'Enabled',
+                                },
+                                {
+                                    value: StatusValue.DISABLED,
+                                    label: 'Disabled',
+                                },
+                            ], value: statuses[hoveredStatus || ''], onOptionChange: onClickStatus }) })) }))] })) })));
+}

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

@@ -0,0 +1 @@
+export { default as StatusFilter } from './StatusFilter';

package/build/components/StatusFilter/index.js

@@ -0,0 +1 @@
+export { default as StatusFilter } from './StatusFilter';

package/build/components/StatusFilter/utils.d.ts

@@ -0,0 +1,4 @@
+import { StatusValue } from '../../types/index.js';
+export declare const getInitialStatuses: (statuses?: Record<string, StatusValue>, options?: {
+    value: string;
+}[]) => Record<string, StatusValue>;

package/build/components/StatusFilter/utils.js

@@ -0,0 +1,10 @@
+import { StatusValue } from '../../types/index.js';
+export const getInitialStatuses = (statuses, options) => {
+    const rawStatuses = (statuses || {});
+    const mappedStatuses = {};
+    options === null || options === void 0 ? void 0 : options.forEach(({ value }) => {
+        const statusValue = rawStatuses === null || rawStatuses === void 0 ? void 0 : rawStatuses[value];
+        mappedStatuses[value] = statusValue === undefined ? StatusValue.ALL : statusValue;
+    });
+    return mappedStatuses;
+};

package/build/components/StatusIcons/AuthIcons/constants.js

@@ -27,4 +27,9 @@ export const statusLabels = {
         icon: authenticationDeclinedIcon,
         borderColor: 'rgba(255, 61, 0, 0.10)',
     },
+    // noAuth: {
+    // 	tooltip: 'Not Authenticated',
+    // 	icon: authenticationNoAuthIcon,
+    // 	borderColor: '#F2F2F2'
+    // }
 };