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

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/DropdownMenu/DropdownMenu.d.ts

@@ -1,3 +1,3 @@
 import { IProps } from './type';
-declare function Dropdown({ open, menuItems, anchorEl, onClose, selected, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown({ open, menuItems, anchorEl, onClose, selected, allowShadows, ...props }: IProps): import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

package/build/components/DropdownMenu/DropdownMenu.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, Box, useTheme } from '@mui/material';
 import { StyledListItemText, StyledMenu, StyledListItemIcon, StyledMenuItem } from './styles';
 function Dropdown(_a) {
-    var { open, menuItems, anchorEl, onClose, selected } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected"]);
+    var { open, menuItems, anchorEl, onClose, selected, allowShadows = true } = _a, props = __rest(_a, ["open", "menuItems", "anchorEl", "onClose", "selected", "allowShadows"]);
     const theme = useTheme();
     return (_jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, onClose: onClose, onContextMenu: (e) => {
             e.preventDefault();
@@ -27,7 +27,7 @@ function Dropdown(_a) {
                             item.onClick(e);
                     }, onContextMenu: item.onRightClick, selected: item.selected, sx: Object.assign({ '&:hover': {
                             backgroundColor: 'transparent',
-                            boxShadow: theme.shadows[10],
+                            boxShadow: allowShadows ? theme.shadows[10] : 'none',
                             '& .sandbox-Icon': {
                                 display: 'none',
                             },
@@ -36,7 +36,7 @@ function Dropdown(_a) {
                             },
                         } }, (idx === selected && {
                         backgroundColor: 'transparent',
-                        boxShadow: theme.shadows[10],
+                        boxShadow: allowShadows ? theme.shadows[10] : 'none',
                     })) }, { children: [item.icon && _jsx(StyledListItemIcon, { children: item.icon }), _jsx(StyledListItemText, { children: item.label }), _jsx(Box, Object.assign({ className: item.alwaysShowRightAction ? '' : 'menu-right-action' }, { children: item.rightAction && item.rightAction }))] }))) }, `${item.label}-${idx}`));
         }) })));
 }

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

@@ -17,4 +17,5 @@ export interface IProps {
     anchorEl?: Element | null | undefined;
     style?: CSSProperties;
     selected?: number;
+    allowShadows?: boolean;
 }

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MultiSelectStatusButtonProps } from './type';
+declare function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, label, variant }: MultiSelectStatusButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof MultiSelectStatusButton>;
+export default _default;

package/build/components/MultiSelectStatusButton/MultiSelectStatusButton.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 StyledBadge, { BadgeVariants } from '../CountBadge';
+import CountryFlag from '../CountryFlag';
+import { formatNumber } from '../../utils/index.js';
+import { closeXIcon } from '../../constants/index.js';
+import { ChevronContainer, Label, LabelWrapper, StyledDropdown, FlagContainer, MenuItemContainer, CheckboxStyles, StyledStatusButton, ClearIcon, } from './style';
+function MultiSelectStatusButton({ options, selectedValues, onSelectionChange, label, variant = 'inActive' }) {
+    const { t } = useTranslation();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const buttonRef = useRef(null);
+    const [internalSelectedValues, setInternalSelectedValues] = useState(selectedValues);
+    const [dropdownWidth, setDropdownWidth] = useState(0);
+    const [isHovered, setIsHovered] = useState(false);
+    const isOpen = Boolean(anchorEl);
+    useEffect(() => {
+        if (!isOpen) {
+            setInternalSelectedValues(selectedValues);
+        }
+    }, [selectedValues, isOpen]);
+    const handleDropdownClick = (event) => {
+        var _a;
+        event.stopPropagation();
+        event.preventDefault();
+        if (isOpen) {
+            handleClose();
+            return;
+        }
+        setAnchorEl(buttonRef.current);
+        const buttonWidth = ((_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 200;
+        setDropdownWidth(Math.max(buttonWidth, 200));
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+        setDropdownWidth(0);
+    };
+    const handleClearAll = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        setInternalSelectedValues([]);
+        onSelectionChange([]);
+    };
+    const handleOptionToggle = (optionStatus, event) => {
+        if (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        const newSelection = internalSelectedValues.includes(optionStatus)
+            ? internalSelectedValues.filter((status) => status !== optionStatus)
+            : [...internalSelectedValues, optionStatus];
+        setInternalSelectedValues(newSelection);
+        onSelectionChange(newSelection);
+    };
+    const getDisplayLabel = () => {
+        if (internalSelectedValues.length === 0) {
+            return (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: "11px", variant: "inherit" }, { children: label || t('Select currencies') })));
+        }
+        if (internalSelectedValues.length === 1) {
+            const selectedOption = options.find((opt) => opt.status === internalSelectedValues[0]);
+            return selectedOption ? (_jsxs(FlagContainer, { children: [_jsx(CountryFlag, { code: selectedOption.flagCode || selectedOption.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "inherit" }, { children: selectedOption.name }))] })) : (internalSelectedValues[0]);
+        }
+        const firstOption = options.find((opt) => opt.status === internalSelectedValues[0]);
+        return firstOption ? (_jsxs(FlagContainer, { children: [_jsx(CountryFlag, { code: firstOption.flagCode || firstOption.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "inherit" }, { children: firstOption.name }))] })) : (internalSelectedValues[0]);
+    };
+    const countBadge = (_jsx(StyledBadge, Object.assign({ pointer: true, variant: variant === 'active' ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE }, { children: formatNumber(internalSelectedValues.length > 0 ? internalSelectedValues.length : options.length) })));
+    return (_jsxs(_Fragment, { children: [_jsx(StyledStatusButton, Object.assign({ buttonVariant: variant, ref: buttonRef, sx: {
+                    paddingInlineEnd: '27px',
+                }, "data-testid": "MultiSelectStatusButton", onClick: handleDropdownClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) }, { children: _jsxs(LabelWrapper, { children: [_jsxs(Label, Object.assign({ variant: variant }, { children: [getDisplayLabel(), countBadge] })), _jsx(ChevronContainer, Object.assign({ onClick: isHovered && internalSelectedValues.length > 0 ? handleClearAll : undefined, sx: {
+                                '&:hover': {
+                                    backgroundColor: 'transparent',
+                                },
+                            } }, { children: isHovered && internalSelectedValues.length > 0 ? (_jsx(ClearIcon, { variant: variant, src: closeXIcon, alt: "clear all" })) : (_jsx(ChevronIcon, { disableHover: true, isActive: variant === 'active' })) }))] }) })), isOpen && anchorEl && (_jsx(StyledDropdown, { open: isOpen, onClose: handleClose, anchorEl: anchorEl, allowShadows: false, style: {
+                    minWidth: dropdownWidth || 200,
+                    width: dropdownWidth || 'auto',
+                    marginTop: '6px',
+                    maxWidth: 300,
+                }, sx: {
+                    boxShadow: 'none !important',
+                    '&:hover': {
+                        boxShadow: 'none !important',
+                    },
+                }, menuItems: options.map((option) => ({
+                    label: (_jsxs(MenuItemContainer, { children: [_jsx(Checkbox, { checked: internalSelectedValues.includes(option.status), size: "small", sx: CheckboxStyles, onClick: (e) => {
+                                    var _a;
+                                    e.stopPropagation();
+                                    handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
+                                } }), _jsx(CountryFlag, { code: option.flagCode || option.code, sx: { border: '1px solid white', borderRadius: '3px' } }), _jsx(Typography, Object.assign({ variant: "body2" }, { children: option.name }))] })),
+                    onClick: (e) => {
+                        var _a;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleOptionToggle((_a = option.status) !== null && _a !== void 0 ? _a : '', e);
+                    },
+                })) }))] }));
+}
+export default memo(MultiSelectStatusButton);

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

@@ -0,0 +1,3 @@
+import MultiSelectStatusButton from './MultiSelectStatusButton';
+export default MultiSelectStatusButton;
+export type { CurrencyOption, MultiSelectStatusButtonProps } from './type';

package/build/components/MultiSelectStatusButton/index.js

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

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

@@ -0,0 +1,36 @@
+import type React from 'react';
+import { type Theme } from '@mui/material';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/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> & {
+    buttonVariant: 'active' | 'inActive';
+}, {}, {}>;
+export declare const FlagContainer: 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 MenuItemContainer: 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 CheckboxStyles: {
+    padding: number;
+    color: string;
+    '&.Mui-checked': {
+        color: string;
+    };
+    '&.MuiCheckbox-root': {
+        color: string;
+    };
+    '& .MuiSvgIcon-root': {
+        color: string;
+    };
+    '&.Mui-checked .MuiSvgIcon-root': {
+        color: string;
+        '& path': {
+            fill: string;
+        };
+    };
+};
+export declare const ClearIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    variant: 'active' | 'inActive';
+}, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/MultiSelectStatusButton/style.js

@@ -0,0 +1,59 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown, } from '../TableHeader_V2/components/StatusButtons/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: 'none', paddingInline: theme.spacing(2) }));
+export const StyledStatusButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'buttonVariant',
+})(({ theme, buttonVariant }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), (buttonVariant === 'active'
+    ? {
+        background: theme.palette.background.gradient.shadedBlue,
+        color: theme.palette.common.white,
+    }
+    : {
+        backgroundColor: theme.palette.common.white,
+        borderColor: theme.palette.grey[100],
+        color: theme.palette.text.primary,
+        '&:hover': {
+            backgroundColor: 'white',
+        },
+    }))));
+export const FlagContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+export const MenuItemContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.3),
+    width: '100%',
+}));
+export const CheckboxStyles = {
+    padding: 0.3,
+    color: '#8C9196',
+    '&.Mui-checked': {
+        color: '#1F88D0',
+    },
+    '&.MuiCheckbox-root': {
+        color: '#8C9196',
+    },
+    '& .MuiSvgIcon-root': {
+        color: 'inherit',
+    },
+    '&.Mui-checked .MuiSvgIcon-root': {
+        color: '#1F88D0',
+        '& path': {
+            fill: '#1F88D0',
+        },
+    },
+};
+export const ClearIcon = styled('img')(({ variant }) => ({
+    width: '10px',
+    height: '10px',
+    filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '50%',
+    left: '47%',
+    transform: 'translate(-50%, -50%)',
+}));

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

@@ -0,0 +1,14 @@
+import { TableHeaderStatus } from '../../types/index.js';
+export interface CurrencyOption {
+    code: string;
+    name: string;
+    flagCode?: string;
+    status: TableHeaderStatus;
+}
+export interface MultiSelectStatusButtonProps {
+    options: CurrencyOption[];
+    selectedValues: TableHeaderStatus[];
+    onSelectionChange: (selected: TableHeaderStatus[]) => void;
+    label?: string;
+    variant?: 'active' | 'inActive';
+}

package/build/components/MultiSelectStatusButton/type.js

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

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

@@ -0,0 +1,20 @@
+import type { CalenderMode, Timezone } from '../../types/index.js';
+interface RangeCalendarProps {
+    defaultDate: [Date, Date];
+    onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
+    mode?: CalenderMode;
+    onCalendarModeSwitch?: (mode: CalenderMode) => void;
+    numberOfMonths?: number;
+    noTimezone?: boolean;
+    noQuickFilter?: boolean;
+    maxDateRange?: number;
+    onCalendarGroupChange?: (value: string) => void;
+    groupBy?: string;
+    timezone: Timezone | null;
+    onChangeTimezoneHistory?: (timezone: Timezone) => void;
+    onChangeTimezone?: (timezone: Timezone) => void;
+    defaultTimezone: Timezone;
+    browserTimezone: string;
+}
+declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
+export default RangeCalender;

package/build/components/RangeCalender/RangeCalender.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import Popper from '@mui/material/Popper';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { DateObject } from 'react-multi-date-picker';
+import { CustomBackdrop, Error } from '../index.js';
+import GroupBy from './components/GroupBy';
+import Hijri from './components/Hijri';
+import QuickFilters from './components/QuickFilters';
+import RangeDatePicker from './components/RangeDatepicker';
+import CustomTimezone from './components/Timezone';
+import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
+function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }) {
+    const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
+    const [values, setValues] = useState(dates);
+    const [selectedTimezone, setSelectedTimezone] = useState(timezone);
+    const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const [isError, setIsError] = useState(false);
+    const { t } = useTranslation();
+    const calendarRef = useRef();
+    const isHijri = mode === 'hijri';
+    const onCloseCalender = () => {
+        setAnchorEl(null);
+    };
+    const onOpenCalender = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    useEffect(() => {
+        if (!open) {
+            if (numberOfMonths === 1)
+                return;
+            setValues([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
+        }
+    }, [open]);
+    useEffect(() => {
+        setSelectedTimezone(timezone);
+    }, [timezone, open]);
+    const updateTimezone = (newTimezone) => {
+        onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(newTimezone);
+        onChangeTimezoneHistory === null || onChangeTimezoneHistory === void 0 ? void 0 : onChangeTimezoneHistory(newTimezone);
+    };
+    const formatDate = (date) => new Date(date.setHour(new Date().getHours()).setMinute(new Date().getMinutes()).setSecond(new Date().getSeconds()).toDate().toLocaleString('en-us', {
+        timeZone: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone,
+    }));
+    const submitDate = () => {
+        setDates(values);
+        onCloseCalender();
+        onDateChange([formatDate(values[0]), formatDate(values[1] || values[0])], timezone === null || timezone === void 0 ? void 0 : timezone.offset);
+        onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
+        updateTimezone(selectedTimezone);
+    };
+    const getSelectedDate = () => {
+        const startSelectedTime = dates[0].format('MMM D');
+        const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
+        return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
+    };
+    const onChange = (newDate) => {
+        if (newDate.length < 2 || !maxDateRange) {
+            setValues(newDate);
+            return;
+        }
+        const startDate = newDate[0].toDate();
+        const endDate = newDate[1].toDate();
+        const numberOfDays = dayjs(endDate).diff(startDate, 'day');
+        if (numberOfDays <= maxDateRange) {
+            setValues(newDate);
+            return;
+        }
+        setIsError(true);
+        setValues([newDate[0], newDate[1].subtract(numberOfDays - maxDateRange, 'd')]);
+        setTimeout(() => {
+            setIsError(false);
+        }, 3000);
+    };
+    const onChangeQuickFilter = (newValues) => {
+        setValues(newValues);
+        if (calendarRef.current)
+            calendarRef.current.set({ date: newValues[0] });
+    };
+    return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender" }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() })), open && (_jsx(CustomBackdrop, { onClick: (e) => {
+                    e.stopPropagation();
+                    onCloseCalender();
+                } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: { zIndex: 3 } }, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
+                                                setSelectedGroupBy(group);
+                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, { values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
+}
+export default RangeCalender;

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

@@ -0,0 +1,11 @@
+import { DateObject } from 'react-multi-date-picker';
+import { Dates } from '../../type';
+interface CustomTimePickerProps {
+    values: Dates;
+    startTime: DateObject;
+    endTime: DateObject;
+    onChangeStartTime: (value: DateObject) => void;
+    onChangeEndTime: (value: DateObject) => void;
+}
+declare function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export default CustomTimePicker;

package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import DatePicker, { DateObject } from 'react-multi-date-picker';
+import TimePicker from 'react-multi-date-picker/plugins/time_picker';
+import { IOSSwitch } from '../../../index.js';
+import { AllDayStyled, TimeArea, TimePickerWrapper, TimeAreaInner } from './style';
+function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }) {
+    const [isAllDay, setIsAllDay] = useState(false);
+    const [lastTime, setLastTime] = useState([startTime, endTime]);
+    const { t } = useTranslation();
+    useEffect(() => {
+        if (isAllDay)
+            setIsAllDay(new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear);
+    }, [values]);
+    return (_jsx(_Fragment, { children: new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear && (_jsx(TimeArea, { children: _jsxs(TimeAreaInner, { children: [_jsxs(AllDayStyled, Object.assign({ isAllDay: isAllDay }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('allDay') })), _jsx(IOSSwitch, { checked: isAllDay, onChange: (e) => {
+                                    setIsAllDay(!isAllDay);
+                                    if (e.target.checked) {
+                                        setLastTime([startTime, endTime]);
+                                        onChangeStartTime(new DateObject().setHour(0).setMinute(0));
+                                        onChangeEndTime(new DateObject().setHour(23).setMinute(59));
+                                    }
+                                    else {
+                                        onChangeStartTime(lastTime[0]);
+                                        onChangeEndTime(lastTime[1]);
+                                    }
+                                } })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: startTime, onChange: (time) => {
+                                    onChangeStartTime(time);
+                                }, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] }), _jsx(DatePicker, { arrow: false, disableDayPicker: true, hideOnScroll: true, format: "hh:mma", value: endTime, onChange: (time) => {
+                                    onChangeEndTime(time);
+                                }, type: "button", plugins: [_jsx(TimePicker, { position: "top", hideSeconds: true })] })] }))] }) })) }));
+}
+export default CustomTimePicker;

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

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

package/build/components/RangeCalender/components/CustomTimepicker/index.js

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

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const AllDayStyled: 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> & {
+    isAllDay: boolean;
+}, {}, {}>;
+export declare const TimeArea: 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 TimePickerWrapper: 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 TimeAreaInner: 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>, {}, {}>;