@tap-payments/os-micro-frontend-shared 0.0.91 → 0.0.92-multi-select-status-button-v1

package/build/components/RangeCalender/components/Timezone/style.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export declare const TimezoneWrapper: 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>, {}, {}>;
+export declare const TimezoneDropdown: 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>, {}, {}>;
+export declare const SelectedTimezone: 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> & {
+    open: boolean;
+}, {}, {}>;
+export declare const TimezoneElement: 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>, {}, {}>;
+export declare const Space: 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>, {}, {}>;
+export declare const Label: 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>, {}, {}>;

package/build/components/RangeCalender/components/Timezone/style.js

@@ -0,0 +1,61 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const TimezoneWrapper = styled(Box)(() => ({
+    '[class$="-IndicatorsContainer2"]': {
+        display: 'none',
+    },
+    '#react-select-2-listbox': {
+        width: 300,
+    },
+}));
+export const TimezoneDropdown = styled(Box)(({ theme }) => ({
+    borderRadius: theme.spacing(0.5),
+    border: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[10],
+    minWidth: 200,
+    width: 'max-content',
+    overflow: 'auto',
+}));
+export const SelectedTimezone = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign(Object.assign({ width: 156, fontSize: '11px', color: theme.palette.text.primary, border: '1px solid', borderColor: theme.palette.divider, minHeight: 32, borderRadius: '4px', padding: theme.spacing(1), whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: theme.spacing(1), fontWeight: 500 }, (open && {
+    borderRadius: '4px',
+    boxShadow: theme.shadows[7],
+    border: '1px solid',
+    borderColor: theme.palette.info.dark,
+    background: theme.palette.common.white,
+})), { span: { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' } })));
+export const TimezoneElement = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    height: 33,
+    cursor: 'pointer',
+    '&:hover': {
+        boxShadow: '0px 0px 16px 0px #00000021',
+    },
+    '&+&': {
+        borderTop: '1px solid',
+        borderColor: theme.palette.divider,
+    },
+    '&.active span': {
+        fontWeight: 500,
+    },
+    span: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+}));
+export const Space = styled(Box)(() => ({
+    width: 12,
+    height: 12,
+}));
+export const Label = styled(Box)(({ theme }) => ({
+    fontSize: '11px',
+    color: theme.palette.text.secondary,
+    lineHeight: '15.03px',
+    '&.selected': { color: theme.palette.info.dark },
+}));

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

@@ -0,0 +1,2 @@
+import RangeCalender from './RangeCalender';
+export default RangeCalender;

package/build/components/RangeCalender/index.js

@@ -0,0 +1,2 @@
+import RangeCalender from './RangeCalender';
+export default RangeCalender;

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

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export declare const CalenderWrapper: 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>, {}, {}>;
+export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("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<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const OkayButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("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<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ButtonsWrapper: 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>, {}, {}>;
+export declare const SelectedDate: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("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<import("@mui/material/styles").Theme> & {
+    open: boolean;
+}, {}, {}>;
+export declare const Footer: 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>, {}, {}>;
+export declare const FiltersArea: 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>, {}, {}>;
+export declare const TimeZone: 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>, {}, {}>;
+export declare const Main: 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>, {}, {}>;
+export declare const Settings: 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>, {}, {}>;

package/build/components/RangeCalender/style.js

@@ -0,0 +1,189 @@
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+export const CalenderWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    marginTop: '8px',
+    background: theme.palette.common.white,
+    boxShadow: theme.shadows[9],
+    borderRadius: theme.spacing(1),
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    '.rmdp-calendar': {
+        padding: '8px 16px 16px',
+    },
+    '.rmdp-rtl *': {
+        fontFamily: 'Tajawal',
+    },
+    '.rmdp-rtl .sd': {
+        paddingTop: '4px',
+    },
+    '.rmdp-wrapper': {
+        position: 'relative',
+        borderRadius: '8px',
+        boxShadow: 'none',
+    },
+    '.rmdp-day span': {
+        fontSize: '11px',
+        fontWeight: 500,
+    },
+    '.rmdp-day, .rmdp-week-day': {
+        width: 40,
+        height: 40,
+        marginBottom: '2px',
+        padding: '4px',
+        fontSize: '11px',
+        color: theme.palette.grey[900],
+    },
+    '.rmdp-day-picker': {
+        padding: 0,
+    },
+    '.rmdp-day.rmdp-today span': {
+        backgroundColor: 'transparent',
+        color: theme.palette.info.dark,
+    },
+    '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {
+        color: theme.palette.common.white,
+    },
+    '.rmdp-range, .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover': {
+        background: theme.palette.info.light,
+        boxShadow: 'none',
+        color: theme.palette.grey[900],
+    },
+    '.rmdp-range-hover.start, .rmdp-range.start, .rmdp-range-hover.end, .rmdp-range.end, .rmdp-rtl .rmdp-range-hover.start, .rmdp-rtl .rmdp-range.start, .rmdp-rtl .rmdp-range-hover.end, .rmdp-rtl .rmdp-range.end': {
+        borderRadius: '50%',
+        background: theme.palette.background.gradient.darkShadedBlue,
+        color: theme.palette.common.white,
+    },
+    '.rmdp-range.start:after': {
+        content: '""',
+        position: 'absolute',
+        background: theme.palette.info.light,
+        height: '100%',
+        width: '50%',
+        right: 0,
+        top: 0,
+        zIndex: -1,
+    },
+    '.rmdp-rtl .rmdp-range.start:after': {
+        right: 'unset',
+        left: 0,
+    },
+    '.rmdp-range.end:after': {
+        content: '""',
+        position: 'absolute',
+        background: theme.palette.info.light,
+        height: '100%',
+        width: '50%',
+        left: 0,
+        top: 0,
+        zIndex: -1,
+    },
+    '.rmdp-rtl .rmdp-range.end:after': {
+        left: 'unset',
+        right: 0,
+    },
+    '.rmdp-week-day': {
+        color: theme.palette.grey[700],
+        marginBottom: '4px',
+        fontSize: '11px',
+        padding: '4px',
+    },
+    '.rmdp-header-values': {
+        color: theme.palette.grey[900],
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '20px',
+        letterSpacing: '0.1px',
+    },
+    '.rmdp-header-values span:nth-of-type(2)': {
+        display: 'none',
+    },
+    '.rmdp-header': {
+        padding: '4px 0',
+        margin: 0,
+        fontSize: '12px',
+    },
+    '.rmdp-top-class': {
+        display: 'block !important',
+    },
+    '.rmdp-day.rmdp-selected span:not(.highlight)': {
+        background: theme.palette.info.dark,
+    },
+    '.rmdp-day.start.end': {
+        overflow: 'hidden',
+    },
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    padding: '8px 24px',
+    width: 75,
+    height: 32,
+    fontSize: '11px',
+    background: 'transparent',
+    color: theme.palette.text.primary,
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    fontWeight: 500,
+    borderRadius: '4px',
+    '&:hover': {
+        background: 'transparent',
+        color: theme.palette.text.primary,
+    },
+}));
+export const OkayButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    padding: '8px 24px',
+    width: 75,
+    height: 32,
+    fontSize: '11px',
+    borderRadius: '4px',
+    fontWeight: 700,
+    background: theme.palette.info.dark,
+    '&:hover': {
+        background: theme.palette.info.dark,
+    },
+}));
+export const ButtonsWrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: 8,
+}));
+export const SelectedDate = styled(Button, { shouldForwardProp: (props) => props !== 'open' })(({ open, theme }) => (Object.assign({ color: theme.palette.text.primary, fontSize: '11px', fontWeight: 500, padding: theme.spacing(1), borderRadius: '4px', border: '1px solid', borderColor: theme.palette.divider, background: theme.palette.common.white, textTransform: 'none', height: 32 }, (open && { border: '1px solid', borderColor: theme.palette.info.dark, boxShadow: theme.shadows[7] }))));
+export const Footer = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 10,
+    padding: '16px',
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
+    borderBottomRightRadius: '8px',
+}));
+export const FiltersArea = styled(Box)(({ theme }) => ({
+    padding: 16,
+    paddingInlineEnd: '23px',
+    borderRight: '1px solid',
+    borderColor: theme.palette.divider,
+    background: theme.palette.common.white,
+    width: 'max-content',
+    borderTopLeftRadius: '8px',
+    borderBottomLeftRadius: '8px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    justifyContent: 'space-between',
+}));
+export const TimeZone = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+}));
+export const Main = styled(Box)(() => ({
+    position: 'relative',
+}));
+export const Settings = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+}));

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

@@ -0,0 +1,2 @@
+import type { DateObject } from 'react-multi-date-picker';
+export type Dates = [DateObject, DateObject];

package/build/components/RangeCalender/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+/// <reference types="react-date-object" />
+export declare const getLocale: ({ isHijri, isAr }: {
+    isHijri: boolean;
+    isAr?: boolean | undefined;
+}) => import("react-date-object").Locale;
+export declare const getCalender: (isHijri: boolean) => import("react-date-object").Calendar;

package/build/components/RangeCalender/utils.js

@@ -0,0 +1,15 @@
+import arabic from 'react-date-object/calendars/arabic';
+import gregorian from 'react-date-object/calendars/gregorian';
+import arabicAr from 'react-date-object/locales/arabic_ar';
+import arabicEn from 'react-date-object/locales/arabic_en';
+import gregorianAr from 'react-date-object/locales/gregorian_ar';
+import gregorianEn from 'react-date-object/locales/gregorian_en';
+export const getLocale = ({ isHijri, isAr = false }) => {
+    if (isHijri) {
+        return isAr ? arabicAr : arabicEn;
+    }
+    return isAr ? gregorianAr : gregorianEn;
+};
+export const getCalender = (isHijri) => {
+    return isHijri ? arabic : gregorian;
+};

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

@@ -1,12 +1,17 @@
 /// <reference types="react" />
 import { AvailableStatus } from '../TableHeader_V2';
+import { CurrencyOption } from '../MultiSelectStatusButton';
 import { TableHeaderStatus } from '../../types/index.js';
 interface StatusBarProps {
     status?: TableHeaderStatus;
     availableStatuses?: AvailableStatus[];
     isFilteredIdsShown?: boolean;
     onStatusChange?: (status: TableHeaderStatus) => void;
+    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
+    currencyOptions?: CurrencyOption[];
+    selectedCurrencies?: TableHeaderStatus[];
+    enableMultiSelectCurrency?: boolean;
 }
-declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+declare function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies, enableMultiSelectCurrency, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof StatusBar>;
 export default _default;

package/build/components/StatusBar/StatusBar.js

@@ -1,32 +1,68 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { memo, useCallback } 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';
-function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status }) {
+import MultiSelectStatusButton from '../MultiSelectStatusButton';
+function StatusBar({ isFilteredIdsShown, onStatusChange, availableStatuses, status, onMultiSelectChange, currencyOptions, selectedCurrencies = [], enableMultiSelectCurrency = false, }) {
     const { t } = useTranslation();
-    const getButtonStatus = useCallback((buttonStatus) => (buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive'), [status, isFilteredIdsShown]);
-    return (_jsx(_Fragment, { children: availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((s) => {
-            var _a, _b;
-            if (!Array.isArray(s.status)) {
-                return (_createElement(StatusButton, Object.assign({}, s, { key: `status-button-array-${s.status}`, variant: getButtonStatus(s.status), onClick: () => {
-                        if (!Array.isArray(s.status)) {
-                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(s.status);
-                        }
-                    } })));
-            }
-            const isCurrentStatusDropdown = (_a = s.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
-            const variant = isCurrentStatusDropdown ? 'active' : 'inActive';
-            const statusLabel = isCurrentStatusDropdown ? status : s.status[0];
-            return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
-                        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(buttonStatus);
-                    }, dropdownOptions: s.status.map((stat) => ({
-                        label: t(stat || ''),
-                        onClick: () => {
-                            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(stat);
-                        },
-                        status: stat,
-                    })) })) }, (_b = s === null || s === void 0 ? void 0 : s.status) === null || _b === void 0 ? void 0 : _b[0]));
-        }) }));
+    const [multiSelectValues, setMultiSelectValues] = useState(selectedCurrencies);
+    useEffect(() => {
+        if (status && multiSelectValues.length > 0) {
+            setMultiSelectValues([]);
+        }
+    }, [status, multiSelectValues.length]);
+    useEffect(() => {
+        if (!status) {
+            setMultiSelectValues(selectedCurrencies);
+        }
+    }, [selectedCurrencies, status]);
+    const getButtonStatus = useCallback((buttonStatus) => {
+        if (multiSelectValues.length > 0) {
+            return 'inActive';
+        }
+        return buttonStatus === status && !isFilteredIdsShown ? 'active' : 'inActive';
+    }, [status, isFilteredIdsShown, multiSelectValues.length]);
+    const handleMultiSelectChange = useCallback((selected) => {
+        setMultiSelectValues(selected);
+        onMultiSelectChange === null || onMultiSelectChange === void 0 ? void 0 : onMultiSelectChange(selected);
+        if (selected.length > 0) {
+            onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange('');
+        }
+    }, [onMultiSelectChange, onStatusChange]);
+    const handleStatusChange = useCallback((newStatus) => {
+        if (multiSelectValues.length > 0) {
+            setMultiSelectValues([]);
+            onMultiSelectChange === null || onMultiSelectChange === void 0 ? void 0 : onMultiSelectChange([]);
+        }
+        onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(newStatus);
+    }, [multiSelectValues.length, onMultiSelectChange, onStatusChange]);
+    useEffect(() => {
+        if (enableMultiSelectCurrency && multiSelectValues.length === 0 && selectedCurrencies.length === 0 && !status) {
+            handleStatusChange('all');
+        }
+    }, [enableMultiSelectCurrency, multiSelectValues.length, selectedCurrencies.length, status, handleStatusChange]);
+    return (_jsxs(_Fragment, { children: [enableMultiSelectCurrency && currencyOptions && (_jsx(MultiSelectStatusButton, { options: currencyOptions, selectedValues: multiSelectValues, onSelectionChange: handleMultiSelectChange, label: t('Currencies') || 'Currencies', variant: multiSelectValues.length > 0 && !status ? 'active' : 'inActive' })), availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((s) => {
+                var _a, _b;
+                if (!Array.isArray(s.status)) {
+                    return (_createElement(StatusButton, Object.assign({}, s, { key: `status-button-array-${s.status}`, variant: getButtonStatus(s.status), onClick: () => {
+                            if (!Array.isArray(s.status)) {
+                                handleStatusChange(s.status);
+                            }
+                        } })));
+                }
+                const isCurrentStatusDropdown = (_a = s.status) === null || _a === void 0 ? void 0 : _a.includes(status || '');
+                const variant = multiSelectValues.length > 0 ? 'inActive' : isCurrentStatusDropdown ? 'active' : 'inActive';
+                const statusLabel = isCurrentStatusDropdown ? status : s.status[0];
+                return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { label: t(statusLabel || ''), variant: variant, onButtonBodyClick: (buttonStatus) => {
+                            handleStatusChange(buttonStatus);
+                        }, dropdownOptions: s.status.map((stat) => ({
+                            label: t(stat || ''),
+                            onClick: () => {
+                                handleStatusChange(stat);
+                            },
+                            status: stat,
+                        })) })) }, (_b = s === null || s === void 0 ? void 0 : s.status) === null || _b === void 0 ? void 0 : _b[0]));
+            })] }));
 }
 export default memo(StatusBar);

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

@@ -0,0 +1,2 @@
+declare function StatusBarExample(): import("react/jsx-runtime").JSX.Element;
+export default StatusBarExample;

package/build/components/StatusBar/example.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import StatusBar from './StatusBar';
+function StatusBarExample() {
+    const [selectedStatus, setSelectedStatus] = useState('all');
+    const [selectedCurrencies, setSelectedCurrencies] = useState([]);
+    const currencyOptions = [
+        {
+            code: 'SAR',
+            name: 'SAR',
+            flagCode: 'SA',
+            status: 'SAR',
+        },
+        {
+            code: 'USD',
+            name: 'USD',
+            flagCode: 'US',
+            status: 'USD',
+        },
+        {
+            code: 'EUR',
+            name: 'Euro',
+            flagCode: 'EU',
+            status: 'eur',
+        },
+        {
+            code: 'GBP',
+            name: 'GBP',
+            flagCode: 'GB',
+            status: 'gbp',
+        },
+        {
+            code: 'JPY',
+            name: 'JPY',
+            flagCode: 'JP',
+            status: 'jpy',
+        },
+    ];
+    const availableStatuses = [
+        {
+            status: 'all',
+            label: 'All',
+            badgeCount: 150,
+        },
+        {
+            status: 'completed',
+            label: 'Completed',
+            badgeCount: 85,
+        },
+        {
+            status: 'pending',
+            label: 'Pending',
+            badgeCount: 45,
+        },
+        {
+            status: ['initiated', 'captured', 'authorized'],
+            label: 'Processing',
+            badgeCount: 20,
+        },
+    ];
+    const handleStatusChange = (status) => {
+        console.log('Status changing from:', selectedStatus, 'to:', status);
+        setSelectedStatus(status);
+    };
+    const handleMultiSelectChange = (currencies) => {
+        setSelectedCurrencies(currencies);
+        console.log('Selected currencies:', currencies);
+    };
+    return (_jsxs(Box, Object.assign({ sx: { padding: 2 } }, { children: [_jsxs(Box, Object.assign({ sx: { marginBottom: 2 } }, { children: [_jsx("h3", { children: "Enhanced StatusBar with Multiselect Currency Dropdown" }), _jsx("p", { children: "This example demonstrates the enhanced StatusBar component with multiselect currency functionality. The currency dropdown shows checkboxes with currency flags and names." }), _jsxs("p", { children: [_jsx("strong", { children: "Features:" }), _jsxs("ul", { children: [_jsx("li", { children: "Button body click behavior same as existing StatusButton" }), _jsx("li", { children: "Dropdown opens only when clicking the chevron icon" }), _jsx("li", { children: "Count badge shows number of selected currencies" }), _jsx("li", { children: "Active state styling matches existing StatusButton" })] })] })] })), _jsx(Box, Object.assign({ sx: { display: 'flex', gap: 1, flexWrap: 'wrap' } }, { children: _jsx(StatusBar, { status: selectedStatus, availableStatuses: availableStatuses, isFilteredIdsShown: false, onStatusChange: handleStatusChange, onMultiSelectChange: handleMultiSelectChange, enableMultiSelectCurrency: true, currencyOptions: currencyOptions, selectedCurrencies: selectedCurrencies }) })), _jsxs(Box, Object.assign({ sx: { marginTop: 2 } }, { children: [_jsx("h4", { children: "Current State:" }), _jsxs("p", { children: [_jsx("strong", { children: "Selected Status:" }), " ", _jsx("code", { children: selectedStatus })] }), _jsxs("p", { children: [_jsx("strong", { children: "Selected Currencies:" }), " ", selectedCurrencies.length > 0 ? selectedCurrencies.join(', ') : 'None'] }), _jsxs("p", { children: [_jsx("strong", { children: "Note:" }), " Only one status button should be active at a time. The active button will have a blue background."] })] }))] })));
+}
+export default StatusBarExample;

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

@@ -1,2 +1,3 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
+export { default as StatusBarExample } from './example';

package/build/components/StatusBar/index.js

@@ -1,2 +1,3 @@
 import StatusBar from './StatusBar';
 export default StatusBar;
+export { default as StatusBarExample } from './example';

package/build/components/TableHeader_V2/components/StatusButtons/ChevronIcon.d.ts

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

package/build/components/TableHeader_V2/components/StatusButtons/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/TableHeader_V2/components/StatusButtons/type.d.ts

@@ -15,8 +15,11 @@ export interface StatusButtonProps extends Omit<ButtonProps, 'variant' | 'childr
     dropdownOptions?: Array<MenuItemI & {
         status: TableHeaderStatus;
     }>;
+    render?: (status: TableHeaderStatus) => ReactNode;
+    onMultiSelectChange?: (status: TableHeaderStatus[]) => void;
 }
 export interface ChevronIconProps {
     isActive?: boolean;
+    disableHover?: boolean;
 }
 export type StatusButtonIcon = keyof typeof statusButtonIcons;

package/build/components/index.d.ts

@@ -86,5 +86,7 @@ export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 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 { default as RangeCalender } from './RangeCalender';

package/build/components/index.js

@@ -86,5 +86,7 @@ export { default as FlagDetails } from './FlagDetails';
 export { default as TapLoader } from './Loaders';
 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 { default as RangeCalender } from './RangeCalender';