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

package/build/components/RangeCalender/RangeCalender.js

@@ -13,8 +13,10 @@ 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, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, }) {
-    const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
+import CustomTimePicker from './components/CustomTimepicker';
+import { getDateRange, getEndOfDate, getStartOfDate } from './utils';
+function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezone, browserTimezone, renderCalendarButton, mainSx, popperProps, rangeDatePickerProps, defaultCountryTimezone, timezoneCountriesCodes, }) {
+    const [dates, setDates] = useState(getDateRange(defaultDate));
     const [values, setValues] = useState(dates);
     const [selectedTimezone, setSelectedTimezone] = useState(timezone);
     const [selectedGroupBy, setSelectedGroupBy] = useState(groupBy || 'day');
@@ -22,6 +24,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
     const open = Boolean(anchorEl);
     const [isError, setIsError] = useState(false);
     const { t } = useTranslation();
+    // eslint-disable-next-line
     const calendarRef = useRef();
     const isHijri = mode === 'hijri';
     const onCloseCalender = () => {
@@ -34,25 +37,25 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
         if (!open) {
             if (numberOfMonths === 1)
                 return;
-            setValues([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
+            setValues(getDateRange(defaultDate));
         }
     }, [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);
+        let newDates;
+        if (values[0].dayOfYear === values[1].dayOfYear) {
+            newDates = [values[0], values[1]];
+        }
+        else {
+            newDates = [getStartOfDate(values[0]), getEndOfDate(values[1])];
+        }
+        onDateChange([newDates[0].toDate(), newDates[1].toDate()]);
         onCalendarGroupChange === null || onCalendarGroupChange === void 0 ? void 0 : onCalendarGroupChange(selectedGroupBy || 'day');
-        updateTimezone(selectedTimezone);
+        onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
     };
     const getSelectedDate = () => {
         const startSelectedTime = dates[0].format('MMM D');
@@ -64,8 +67,8 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
             setValues(newDate);
             return;
         }
-        const startDate = newDate[0].toDate();
-        const endDate = newDate[1].toDate();
+        const startDate = getStartOfDate(newDate[0]).toDate();
+        const endDate = getEndOfDate(newDate[1]).toDate();
         const numberOfDays = dayjs(endDate).diff(startDate, 'day');
         if (numberOfDays <= maxDateRange) {
             setValues(newDate);
@@ -78,7 +81,7 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
         }, 3000);
     };
     const onChangeQuickFilter = (newValues) => {
-        setValues(newValues);
+        setValues([getStartOfDate(newValues[0]), getEndOfDate(newValues[1])]);
         if (calendarRef.current)
             calendarRef.current.set({ date: newValues[0] });
     };
@@ -87,6 +90,6 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
                     onCloseCalender();
                 } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end" }, popperProps, { 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, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _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') }))] })] }))] }))] }) }))] })));
+                                            } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, Object.assign({ values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }, rangeDatePickerProps)), _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, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, timezoneCountriesCodes: timezoneCountriesCodes }, String(open)) })) : (_jsx("div", {})), new DateObject(values[0]).dayOfYear === new DateObject(values[1]).dayOfYear && (_jsx(CustomTimePicker, { values: values, setValues: setValues })), _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

@@ -1,11 +1,7 @@
-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;
+    setValues: (values: Dates) => void;
 }
-declare function CustomTimePicker({ values, onChangeStartTime, onChangeEndTime, startTime, endTime }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function CustomTimePicker({ values, setValues }: CustomTimePickerProps): import("react/jsx-runtime").JSX.Element;
 export default CustomTimePicker;

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

@@ -1,33 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } 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 { DateObject } from 'react-multi-date-picker';
 import { IOSSwitch } from '../../../index.js';
+import TimePicker, { convertTo12Hour, maxHour } from '../../../Timepicker';
 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]);
+import { getEndOfDate, getStartOfDate } from '../../utils';
+function CustomTimePicker({ values, setValues }) {
+    var _a, _b;
     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 })] })] }))] }) })) }));
+    const startDate = new DateObject(values[0]);
+    const endDate = new DateObject(values[1]);
+    const [isAllDay, setIsAllDay] = useState(startDate.dayOfYear === endDate.dayOfYear && startDate.hour === 0 && startDate.minute === 0 && endDate.hour === 23 && endDate.minute === 59);
+    const formatHour = ({ period, hour }) => period === 'PM' && hour !== 12 ? hour + 12 : period === 'AM' && hour === 12 ? 0 : hour;
+    const onChangeStartTime = ({ hour, minute, period }) => {
+        setValues([startDate.setHour(formatHour({ hour, period })).setMinute(minute).setSecond(0), endDate]);
+    };
+    const onChangeEndTime = ({ hour, minute, period }) => {
+        setValues([startDate, endDate.setHour(formatHour({ hour, period })).setMinute(minute).setSecond(59)]);
+    };
+    return (_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) {
+                                    setValues([getStartOfDate(values[0]), getEndOfDate(values[1])]);
+                                }
+                                else {
+                                    setValues(values);
+                                }
+                            } })] })), !isAllDay && (_jsxs(TimePickerWrapper, { children: [_jsx(TimePicker, { defaultTime: {
+                                hour: convertTo12Hour(startDate.hour),
+                                minute: startDate.minute,
+                                period: startDate.hour >= maxHour ? 'PM' : 'AM',
+                            }, size: "small", onChange: onChangeStartTime, enableRealTimeChange: true }, `${(_a = values[0]) === null || _a === void 0 ? void 0 : _a.toString()}-start`), _jsx(TimePicker, { defaultTime: {
+                                hour: convertTo12Hour(endDate.hour),
+                                minute: endDate.minute,
+                                period: endDate.hour >= maxHour ? 'PM' : 'AM',
+                            }, size: "small", onChange: onChangeEndTime, enableRealTimeChange: true }, `${(_b = values[1]) === null || _b === void 0 ? void 0 : _b.toString()}-end`)] }))] }) }));
 }
 export default CustomTimePicker;

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

@@ -2,7 +2,7 @@
 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;
+    isAllDay?: boolean | undefined;
 }, {}, {}>;
 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;

package/build/components/RangeCalender/components/GroupBy/GroupBy.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useState } from 'react';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import Popper from '@mui/material/Popper';
 import { useTranslation } from 'react-i18next';
 import { blackHeadingDownArrow } from '../../../../constants/index.js';
+import { Menu } from '../../../index.js';
 import { GroupByLabel, GroupByDropdownButton, GroupByDropdown, Option } from './style';
 const groupByLabel = {
     day: 'Day',
@@ -26,7 +26,7 @@ function GroupBy({ sx, groupBy, isCalenderOpen, onUpdate }) {
         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(value);
         onClose();
     };
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, Object.assign({ sx: sx }, { children: [_jsx(GroupByLabel, { children: t('groupedBy') }), _jsxs(GroupByDropdownButton, Object.assign({ onClick: onOpen, open: open }, { children: [_jsx("span", { children: groupByLabel[groupBy] }), _jsx(Box, { component: "img", src: blackHeadingDownArrow, alt: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, sx: { zIndex: 3 } }, { children: _jsx(GroupByDropdown, Object.assign({ sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth } }, { children: Object.entries(groupByLabel).map(([key, value]) => (_jsx(Option, Object.assign({ onClick: () => {
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, Object.assign({ sx: sx }, { children: [_jsx(GroupByLabel, { children: t('groupedBy') }), _jsxs(GroupByDropdownButton, Object.assign({ onClick: onOpen, open: open }, { children: [_jsx("span", { children: groupByLabel[groupBy] }), _jsx(Box, { component: "img", src: blackHeadingDownArrow, alt: "arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) })] })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl }, { children: _jsx(GroupByDropdown, Object.assign({ sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth } }, { children: Object.entries(groupByLabel).map(([key, value]) => (_jsx(Option, Object.assign({ onClick: () => {
                                 onSelect(key);
                             }, className: groupBy === key ? 'active' : '' }, { children: value }), `${key}-groupedBy`))) })) }))] })) })));
 }

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const CustomLabel: 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" | "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<import("@mui/material/styles").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<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const FiltersWrapper: 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/RangeDatepicker/RangeDatepicker.d.ts

@@ -1,12 +1,4 @@
 import React from 'react';
-import { CalendarProps } from 'react-multi-date-picker';
-import { Dates } from '../../type';
-export interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
-    isAr?: boolean;
-    isHijri: boolean;
-    values: Dates;
-    onChange: (v: Dates) => void;
-    numberOfMonths?: number;
-}
+import { RangeDatepickerProps } from './type';
 declare const _default: React.ForwardRefExoticComponent<Omit<RangeDatepickerProps, "ref"> & React.RefAttributes<unknown>>;
 export default _default;

package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.js

@@ -16,7 +16,9 @@ import { darkLeftArrowIcon, darkRightArrowIcon } from '../../../../constants/ind
 import { ArrowButton } from './style';
 import { getLocale, getCalender } from '../../utils';
 const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-function RangeDatepicker(_a, ref) {
+function RangeDatepicker(_a, 
+// eslint-disable-next-line
+ref) {
     var { isAr = false, isHijri, values, onChange, numberOfMonths = 2 } = _a, props = __rest(_a, ["isAr", "isHijri", "values", "onChange", "numberOfMonths"]);
     const getArrow = (direction) => {
         if (direction === 'right') {

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

@@ -1,2 +1,3 @@
 import RangeDatepicker from './RangeDatepicker';
+export * from './type';
 export default RangeDatepicker;

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

@@ -1,2 +1,3 @@
 import RangeDatepicker from './RangeDatepicker';
+export * from './type';
 export default RangeDatepicker;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const ArrowButton: 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" | "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<import("@mui/material/styles").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<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -0,0 +1,9 @@
+import { CalendarProps } from 'react-multi-date-picker';
+import { Dates } from '../../type';
+export interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
+    isAr?: boolean;
+    isHijri: boolean;
+    values: Dates;
+    onChange: (v: Dates) => void;
+    numberOfMonths?: number;
+}

package/build/components/RangeCalender/components/RangeDatepicker/type.js

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

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

@@ -3,9 +3,10 @@ import type { Timezone } from '../../../../types/index.js';
 interface CustomTimezoneProps {
     onChange: (timezone: Timezone) => void;
     selectedTimezone: Timezone | null;
-    defaultTimezone: Timezone;
+    defaultCountryTimezone: Timezone;
     browserTimezone: string;
+    timezoneCountriesCodes: string[];
 }
-declare function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTimezone }: CustomTimezoneProps): import("react/jsx-runtime").JSX.Element;
+declare function CustomTimezone({ onChange, selectedTimezone, browserTimezone, defaultCountryTimezone, timezoneCountriesCodes }: CustomTimezoneProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof CustomTimezone>;
 export default _default;

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

@@ -7,7 +7,7 @@ import { CountryFlag } from '../../../index.js';
 import { TimezoneWrapper, TimezoneDropdown, SelectedTimezone } from './style';
 import EntitiesTimezone from './components/EntitiesTimezone';
 import UserTimezone from './components/UserTimezone';
-function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTimezone }) {
+function CustomTimezone({ onChange, selectedTimezone, browserTimezone, defaultCountryTimezone, timezoneCountriesCodes }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const onClose = () => {
@@ -23,10 +23,10 @@ function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTi
     const selectedTimezoneIcon = useMemo(() => {
         if (browserTimezone === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone))
             return userTimezoneIcon;
-        if ((selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === defaultTimezone.timezone)
+        if ((selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === defaultCountryTimezone.timezone)
             return entityTimezoneIcon;
         return savedTimezoneIcon;
-    }, [browserTimezone, defaultTimezone.timezone, selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(TimezoneWrapper, Object.assign({ "data-testid": "CustomTimezone" }, { children: [_jsxs(SelectedTimezone, Object.assign({ open: open, onClick: onOpen }, { children: [_jsx("img", { src: selectedTimezoneIcon, alt: "timezone-icon" }), _jsx(CountryFlag, { code: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.countryCode }), _jsx("span", { children: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { zIndex: 1400 } }, { children: _jsxs(TimezoneDropdown, Object.assign({ "data-testid": "CustomTimezone_dropdown" }, { children: [_jsx(EntitiesTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone }), _jsx(UserTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone })] })) }))] })) })));
+    }, [browserTimezone, defaultCountryTimezone.timezone, selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(TimezoneWrapper, Object.assign({ "data-testid": "CustomTimezone" }, { children: [_jsxs(SelectedTimezone, Object.assign({ open: open, onClick: onOpen }, { children: [_jsx("img", { src: selectedTimezoneIcon, alt: "timezone-icon" }), _jsx(CountryFlag, { countryCode: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.countryCode }), _jsx("span", { children: selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label })] })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "top-start", sx: { zIndex: 1400 } }, { children: _jsxs(TimezoneDropdown, Object.assign({ "data-testid": "CustomTimezone_dropdown" }, { children: [_jsx(EntitiesTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, defaultCountryTimezone: defaultCountryTimezone, timezoneCountriesCodes: timezoneCountriesCodes }), _jsx(UserTimezone, { onChange: updateTimezone, selectedTimezone: selectedTimezone, browserTimezone: browserTimezone })] })) }))] })) })));
 }
 export default memo(CustomTimezone);

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

@@ -2,11 +2,8 @@ import type { Timezone } from '../../../../../types/index.js';
 interface EntitiesTimezoneProps {
     selectedTimezone: Timezone | null;
     onChange: (selected: Timezone) => void;
-    defaultTimezone: Timezone;
-    getTimezoneByCountryCode?: (countryCode: string) => Timezone;
-    segmentCountries?: {
-        code: string;
-    }[];
+    timezoneCountriesCodes?: string[];
+    defaultCountryTimezone: Timezone;
 }
-export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTimezone, getTimezoneByCountryCode, segmentCountries, }: EntitiesTimezoneProps): import("react/jsx-runtime").JSX.Element;
+export default function EntitiesTimezone({ selectedTimezone, onChange, timezoneCountriesCodes, defaultCountryTimezone }: EntitiesTimezoneProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,8 +3,9 @@ import { useMemo, useState } from 'react';
 import Popper from '@mui/material/Popper';
 import { entityTimezoneIcon, smallBlueCheckIcon } from '../../../../../constants/index.js';
 import { CountryFlag } from '../../../../index.js';
+import { getTimezoneByCountryCode } from '../../../../../utils/index.js';
 import { Label, Space, TimezoneDropdown, TimezoneElement } from '../style';
-export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTimezone, getTimezoneByCountryCode, segmentCountries, }) {
+export default function EntitiesTimezone({ selectedTimezone, onChange, timezoneCountriesCodes, defaultCountryTimezone }) {
     const [entitiesEl, setEntitiesEl] = useState(null);
     const onMouseEnter = (e) => {
         if (!entitiesEl)
@@ -18,20 +19,20 @@ export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTi
         e.stopPropagation();
         onChange(tz);
     };
-    const availableTimezones = useMemo(() => segmentCountries === null || segmentCountries === void 0 ? void 0 : segmentCountries.map(({ code }) => getTimezoneByCountryCode === null || getTimezoneByCountryCode === void 0 ? void 0 : getTimezoneByCountryCode(code)), [segmentCountries]);
-    const isSelectedTimezoneOneOFTheAvailable = useMemo(() => availableTimezones === null || availableTimezones === void 0 ? void 0 : availableTimezones.find((item) => (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === (item === null || item === void 0 ? void 0 : item.timezone)), [availableTimezones, selectedTimezone]);
+    const availableTimezones = useMemo(() => timezoneCountriesCodes === null || timezoneCountriesCodes === void 0 ? void 0 : timezoneCountriesCodes.map((code) => getTimezoneByCountryCode(code)), [timezoneCountriesCodes]);
+    const isSelectedTimezoneOneOFTheAvailable = useMemo(() => availableTimezones === null || availableTimezones === void 0 ? void 0 : availableTimezones.some((item) => (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === (item === null || item === void 0 ? void 0 : item.timezone)), [availableTimezones, selectedTimezone]);
     const entityTimezone = useMemo(() => {
         if (!selectedTimezone)
-            return defaultTimezone;
-        return isSelectedTimezoneOneOFTheAvailable ? selectedTimezone : defaultTimezone;
-    }, [selectedTimezone, defaultTimezone]);
+            return defaultCountryTimezone;
+        return isSelectedTimezoneOneOFTheAvailable ? selectedTimezone : defaultCountryTimezone;
+    }, [selectedTimezone, defaultCountryTimezone, isSelectedTimezoneOneOFTheAvailable]);
     return (_jsxs(TimezoneElement, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
             if (selectedTimezone)
                 onChange(entityTimezone);
-        } }, { children: [isSelectedTimezoneOneOFTheAvailable ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx("img", { src: entityTimezoneIcon, alt: "entity-timezone" }), _jsx(CountryFlag, { code: entityTimezone === null || entityTimezone === void 0 ? void 0 : entityTimezone.countryCode }), _jsx(Label, Object.assign({ className: isSelectedTimezoneOneOFTheAvailable ? 'selected' : '' }, { children: isSelectedTimezoneOneOFTheAvailable ? selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label : defaultTimezone.label })), _jsx(Popper, Object.assign({ open: Boolean(entitiesEl), anchorEl: entitiesEl, placement: "right-start", sx: { zIndex: 3 }, disablePortal: true }, { children: _jsx(TimezoneDropdown, { children: availableTimezones === null || availableTimezones === void 0 ? void 0 : availableTimezones.map((timeZone, idx) => {
+        } }, { children: [isSelectedTimezoneOneOFTheAvailable ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx("img", { src: entityTimezoneIcon, alt: "entity-timezone" }), _jsx(CountryFlag, { countryCode: entityTimezone === null || entityTimezone === void 0 ? void 0 : entityTimezone.countryCode }), _jsx(Label, Object.assign({ className: isSelectedTimezoneOneOFTheAvailable ? 'selected' : '' }, { children: isSelectedTimezoneOneOFTheAvailable ? selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.label : defaultCountryTimezone === null || defaultCountryTimezone === void 0 ? void 0 : defaultCountryTimezone.label })), _jsx(Popper, Object.assign({ open: Boolean(entitiesEl), anchorEl: entitiesEl, placement: "right-start", sx: { zIndex: 3 }, disablePortal: true }, { children: _jsx(TimezoneDropdown, Object.assign({ sx: { maxHeight: 300 } }, { children: availableTimezones === null || availableTimezones === void 0 ? void 0 : availableTimezones.map((timeZone, idx) => {
                         const isActive = (timeZone === null || timeZone === void 0 ? void 0 : timeZone.timezone) === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone);
                         return (_jsxs(TimezoneElement, Object.assign({ onClick: (e) => {
                                 onSelectTimezone(e, timeZone);
-                            }, sx: { gap: '4px' } }, { children: [isActive ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx(CountryFlag, { code: timeZone === null || timeZone === void 0 ? void 0 : timeZone.countryCode }), _jsx(Label, Object.assign({ className: isActive ? 'selected' : '' }, { children: timeZone === null || timeZone === void 0 ? void 0 : timeZone.label }))] }), `timezone-item-${idx}`));
-                    }) }) }))] })));
+                            }, sx: { gap: '4px' } }, { children: [isActive ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx(CountryFlag, { countryCode: timeZone === null || timeZone === void 0 ? void 0 : timeZone.countryCode }), _jsx(Label, Object.assign({ className: isActive ? 'selected' : '' }, { children: timeZone === null || timeZone === void 0 ? void 0 : timeZone.label }))] }), `timezone-item-${idx}`));
+                    }) })) }))] })));
 }

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

@@ -10,5 +10,5 @@ export default function UserTimezone({ onChange, selectedTimezone, browserTimezo
             onChange(browserTimezoneInfo);
     };
     const isBrowserTimezoneActive = (browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.timezone) === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone);
-    return (_jsxs(TimezoneElement, Object.assign({ onClick: onSelectTimezone }, { children: [isBrowserTimezoneActive ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx("img", { src: userTimezoneIcon, alt: "user-timezone" }), _jsx(CountryFlag, { code: browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.countryCode }), _jsx(Label, Object.assign({ className: isBrowserTimezoneActive ? 'selected' : '' }, { children: browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.label }))] })));
+    return (_jsxs(TimezoneElement, Object.assign({ onClick: onSelectTimezone }, { children: [isBrowserTimezoneActive ? _jsx("img", { src: smallBlueCheckIcon, alt: "icon" }) : _jsx(Space, {}), _jsx("img", { src: userTimezoneIcon, alt: "user-timezone" }), _jsx(CountryFlag, { countryCode: browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.countryCode }), _jsx(Label, Object.assign({ className: isBrowserTimezoneActive ? 'selected' : '' }, { children: browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.label }))] })));
 }

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

@@ -4,16 +4,16 @@ export declare const CalenderWrapper: import("@emotion/styled").StyledComponent<
 }, 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" | "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<import("@mui/material/styles").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<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" | "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<import("@mui/material/styles").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<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" | "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<import("@mui/material/styles").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<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"> & {

package/build/components/RangeCalender/style.js

@@ -39,7 +39,7 @@ export const CalenderWrapper = styled(Box)(({ theme }) => ({
         padding: 0,
     },
     '.rmdp-day.rmdp-today span': {
-        backgroundColor: 'transparent',
+        backgroundColor: 'transparent !important',
         color: theme.palette.info.dark,
     },
     '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {

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

@@ -1,2 +1,28 @@
+import { MouseEvent } from 'react';
+import { PopperProps } from '@mui/material/Popper';
+import { SxProps } from '@mui/system';
 import type { DateObject } from 'react-multi-date-picker';
+import type { CalenderMode, Timezone } from '../../types/index.js';
+import { RangeDatepickerProps } from './components/RangeDatepicker';
 export type Dates = [DateObject, DateObject];
+export interface RangeCalendarProps {
+    defaultDate: [Date, Date];
+    onDateChange: (date: [Date, Date]) => void;
+    mode?: CalenderMode;
+    onCalendarModeSwitch?: (mode: CalenderMode) => void;
+    numberOfMonths?: number;
+    noTimezone?: boolean;
+    noQuickFilter?: boolean;
+    maxDateRange?: number;
+    onCalendarGroupChange?: (value: string) => void;
+    groupBy?: string;
+    timezone: Timezone | null;
+    onChangeTimezone?: (timezone: Timezone) => void;
+    defaultCountryTimezone: Timezone;
+    browserTimezone: string;
+    renderCalendarButton?: (open: boolean, onOpenCalender: (event: MouseEvent<HTMLElement>) => void) => React.ReactNode;
+    mainSx?: SxProps;
+    popperProps?: Partial<PopperProps>;
+    rangeDatePickerProps?: Partial<RangeDatepickerProps>;
+    timezoneCountriesCodes: string[];
+}

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

@@ -1,6 +1,10 @@
-/// <reference types="react-date-object" />
+import DateObject from 'react-date-object';
+import { Dates } from './type';
 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;
+export declare const getStartOfDate: (date: DateObject) => DateObject;
+export declare const getEndOfDate: (date: DateObject) => DateObject;
+export declare const getDateRange: (dates: [Date, Date]) => Dates;

package/build/components/RangeCalender/utils.js

@@ -1,9 +1,11 @@
+import DateObject from 'react-date-object';
 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';
+import { getDefaultDateRange } from '../../utils/index.js';
 export const getLocale = ({ isHijri, isAr = false }) => {
     if (isHijri) {
         return isAr ? arabicAr : arabicEn;
@@ -13,3 +15,12 @@ export const getLocale = ({ isHijri, isAr = false }) => {
 export const getCalender = (isHijri) => {
     return isHijri ? arabic : gregorian;
 };
+export const getStartOfDate = (date) => date.setHour(0).setMinute(0).setSecond(0);
+export const getEndOfDate = (date) => date.setHour(23).setMinute(59).setSecond(59);
+export const getDateRange = (dates) => {
+    if (!((dates === null || dates === void 0 ? void 0 : dates[0]) instanceof Date) || !((dates === null || dates === void 0 ? void 0 : dates[1]) instanceof Date)) {
+        const [startDate, endDate] = getDefaultDateRange();
+        return [new DateObject(startDate), new DateObject(endDate)];
+    }
+    return [new DateObject(dates === null || dates === void 0 ? void 0 : dates[0]), new DateObject(dates === null || dates === void 0 ? void 0 : dates[1])];
+};

package/build/components/ReceiptsViewer/ReceiptViewer.d.ts

@@ -0,0 +1,2 @@
+import { ReceiptViewerProps } from './type';
+export default function ReceiptViewer({ isOpen, receipt, order, appWindow, onClose }: Readonly<ReceiptViewerProps>): import("react/jsx-runtime").JSX.Element;

package/build/components/ReceiptsViewer/ReceiptViewer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { AppWindowWrapper } from '../index.js';
+import { Wrapper } from './style';
+export default function ReceiptViewer({ isOpen, receipt, order, appWindow, onClose }) {
+    return (_jsx(AppWindowWrapper, Object.assign({ isOpen: isOpen, onClose: () => {
+            onClose(receipt.id);
+        }, initialPosition: {
+            x: 1000 - 20 * order,
+        }, windowProps: {
+            titleBarText: 'Receipt',
+            mainAppIsMinimized: appWindow === null || appWindow === void 0 ? void 0 : appWindow.isMinimized,
+            mainAppOrder: appWindow === null || appWindow === void 0 ? void 0 : appWindow.order,
+            showSectionsButton: false,
+        }, defaultWindowWidth: 502, defaultWindowHeight: 745 }, { children: _jsx(Wrapper, { children: _jsx(Box, { sx: { height: 715, overflow: 'auto' }, dangerouslySetInnerHTML: { __html: receipt.content } }) }) })));
+}

package/build/components/ReceiptsViewer/ReceiptsViewer.d.ts

@@ -0,0 +1,11 @@
+import { Receipt } from '../../types/index.js';
+type ReceiptsViewerProps = {
+    receipts: Receipt[];
+    appWindow?: {
+        isMinimized?: boolean;
+        order?: number;
+    };
+    onCloseReceipt: (id: string) => void;
+};
+export default function ReceiptsViewer({ receipts, onCloseReceipt, appWindow }: Readonly<ReceiptsViewerProps>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/components/ReceiptsViewer/ReceiptsViewer.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import ReceiptViewer from './ReceiptViewer';
+export default function ReceiptsViewer({ receipts, onCloseReceipt, appWindow }) {
+    if (!receipts.length)
+        return null;
+    return (_jsx(_Fragment, { children: receipts.map((receipt, index) => (_jsx(ReceiptViewer, { order: index, isOpen: true, onClose: (id) => onCloseReceipt(id), receipt: receipt, appWindow: appWindow }, receipt.id))) }));
+}

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

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

package/build/components/ReceiptsViewer/index.js

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ReceiptsViewer/style.js

@@ -0,0 +1,7 @@
+import { Box, styled } from '@mui/material';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    width: '100%',
+    height: '100%',
+    overflow: 'auto',
+}));

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

@@ -0,0 +1,11 @@
+import { Receipt } from '../../types/index.js';
+export interface ReceiptViewerProps {
+    isOpen: boolean;
+    receipt: Receipt;
+    order: number;
+    appWindow?: {
+        isMinimized?: boolean;
+        order?: number;
+    };
+    onClose: (id: string) => void;
+}

package/build/components/ReceiptsViewer/type.js

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