@tap-payments/os-micro-frontend-shared 0.0.89 → 0.0.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/build/components/StatusBar/StatusBar.d.ts +12 -0
  2. package/build/components/StatusBar/StatusBar.js +32 -0
  3. package/build/components/StatusBar/index.d.ts +2 -0
  4. package/build/components/StatusBar/index.js +2 -0
  5. package/build/components/index.d.ts +1 -1
  6. package/build/components/index.js +1 -1
  7. package/package.json +4 -1
  8. package/build/components/RangeCalender/RangeCalender.d.ts +0 -20
  9. package/build/components/RangeCalender/RangeCalender.js +0 -92
  10. package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.d.ts +0 -11
  11. package/build/components/RangeCalender/components/CustomTimepicker/CustomTimepicker.js +0 -33
  12. package/build/components/RangeCalender/components/CustomTimepicker/index.d.ts +0 -2
  13. package/build/components/RangeCalender/components/CustomTimepicker/index.js +0 -2
  14. package/build/components/RangeCalender/components/CustomTimepicker/style.d.ts +0 -15
  15. package/build/components/RangeCalender/components/CustomTimepicker/style.js +0 -132
  16. package/build/components/RangeCalender/components/GroupBy/GroupBy.d.ts +0 -10
  17. package/build/components/RangeCalender/components/GroupBy/GroupBy.js +0 -33
  18. package/build/components/RangeCalender/components/GroupBy/index.d.ts +0 -2
  19. package/build/components/RangeCalender/components/GroupBy/index.js +0 -2
  20. package/build/components/RangeCalender/components/GroupBy/style.d.ts +0 -15
  21. package/build/components/RangeCalender/components/GroupBy/style.js +0 -39
  22. package/build/components/RangeCalender/components/Hijri/Hijri.d.ts +0 -7
  23. package/build/components/RangeCalender/components/Hijri/Hijri.js +0 -13
  24. package/build/components/RangeCalender/components/Hijri/index.d.ts +0 -2
  25. package/build/components/RangeCalender/components/Hijri/index.js +0 -2
  26. package/build/components/RangeCalender/components/Hijri/style.d.ts +0 -4
  27. package/build/components/RangeCalender/components/Hijri/style.js +0 -25
  28. package/build/components/RangeCalender/components/QuickFilters/QuickFilters.d.ts +0 -8
  29. package/build/components/RangeCalender/components/QuickFilters/QuickFilters.js +0 -47
  30. package/build/components/RangeCalender/components/QuickFilters/index.d.ts +0 -2
  31. package/build/components/RangeCalender/components/QuickFilters/index.js +0 -2
  32. package/build/components/RangeCalender/components/QuickFilters/style.d.ts +0 -7
  33. package/build/components/RangeCalender/components/QuickFilters/style.js +0 -27
  34. package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.d.ts +0 -12
  35. package/build/components/RangeCalender/components/RangeDatepicker/RangeDatepicker.js +0 -29
  36. package/build/components/RangeCalender/components/RangeDatepicker/index.d.ts +0 -2
  37. package/build/components/RangeCalender/components/RangeDatepicker/index.js +0 -2
  38. package/build/components/RangeCalender/components/RangeDatepicker/style.d.ts +0 -4
  39. package/build/components/RangeCalender/components/RangeDatepicker/style.js +0 -9
  40. package/build/components/RangeCalender/components/Timezone/Timezone.d.ts +0 -11
  41. package/build/components/RangeCalender/components/Timezone/Timezone.js +0 -32
  42. package/build/components/RangeCalender/components/Timezone/components/EntitiesTimezone.d.ts +0 -12
  43. package/build/components/RangeCalender/components/Timezone/components/EntitiesTimezone.js +0 -37
  44. package/build/components/RangeCalender/components/Timezone/components/UserTimezone.d.ts +0 -8
  45. package/build/components/RangeCalender/components/Timezone/components/UserTimezone.js +0 -14
  46. package/build/components/RangeCalender/components/Timezone/index.d.ts +0 -2
  47. package/build/components/RangeCalender/components/Timezone/index.js +0 -2
  48. package/build/components/RangeCalender/components/Timezone/style.d.ts +0 -21
  49. package/build/components/RangeCalender/components/Timezone/style.js +0 -61
  50. package/build/components/RangeCalender/index.d.ts +0 -2
  51. package/build/components/RangeCalender/index.js +0 -2
  52. package/build/components/RangeCalender/style.d.ts +0 -33
  53. package/build/components/RangeCalender/style.js +0 -189
  54. package/build/components/RangeCalender/type.d.ts +0 -2
  55. package/build/components/RangeCalender/type.js +0 -1
  56. package/build/components/RangeCalender/utils.d.ts +0 -6
  57. package/build/components/RangeCalender/utils.js +0 -15
@@ -1,47 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
3
- import Box from '@mui/material/Box';
4
- import { useTranslation } from 'react-i18next';
5
- import { DateObject } from 'react-multi-date-picker';
6
- import { CustomLabel, FiltersWrapper } from './style';
7
- import { getCalender, getLocale } from '../../utils';
8
- export default function QuickFilters({ onChange, isHijri, isAr = false }) {
9
- const calenderSettings = { locale: getLocale({ isHijri, isAr }), calendar: getCalender(isHijri) };
10
- const filterList = useMemo(() => [
11
- { id: 'today', value: [new DateObject(calenderSettings), new DateObject(calenderSettings)] },
12
- {
13
- id: 'lastWeek',
14
- value: [new DateObject(calenderSettings).subtract(7, 'day'), new DateObject(calenderSettings)],
15
- },
16
- {
17
- id: 'lastMonth',
18
- value: [new DateObject(calenderSettings).subtract(30, 'day'), new DateObject(calenderSettings)],
19
- },
20
- {
21
- id: new DateObject(calenderSettings).subtract(1, 'month').toFirstOfMonth().format('MMMM YYYY'),
22
- value: [
23
- new DateObject(calenderSettings).subtract(1, 'month').toFirstOfMonth(),
24
- new DateObject(calenderSettings).subtract(1, 'month').toLastOfMonth(),
25
- ],
26
- },
27
- {
28
- id: new DateObject(calenderSettings).subtract(2, 'month').toFirstOfMonth().format('MMMM YYYY'),
29
- value: [
30
- new DateObject(calenderSettings).subtract(2, 'month').toFirstOfMonth(),
31
- new DateObject(calenderSettings).subtract(2, 'month').toLastOfMonth(),
32
- ],
33
- },
34
- {
35
- id: new DateObject(calenderSettings).subtract(3, 'month').toFirstOfMonth().format('MMMM YYYY'),
36
- value: [
37
- new DateObject(calenderSettings).subtract(3, 'month').toFirstOfMonth(),
38
- new DateObject(calenderSettings).subtract(3, 'month').toLastOfMonth(),
39
- ],
40
- },
41
- ], [isHijri, isAr]);
42
- const { t } = useTranslation();
43
- return (_jsx(Box, Object.assign({ "data-testid": "RangeCalender_QuickFilters" }, { children: _jsx(FiltersWrapper, { children: filterList.map((item) => (_jsx(CustomLabel, Object.assign({ onClick: (e) => {
44
- e.preventDefault();
45
- onChange(item.value);
46
- } }, { children: t(item.id) }), item.id))) }) })));
47
- }
@@ -1,2 +0,0 @@
1
- import QuickFilters from './QuickFilters';
2
- export default QuickFilters;
@@ -1,2 +0,0 @@
1
- import QuickFilters from './QuickFilters';
2
- export default QuickFilters;
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- 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"> & {
3
- ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
4
- }, "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>, {}, {}>;
5
- 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"> & {
6
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -1,27 +0,0 @@
1
- import Box from '@mui/material/Box';
2
- import Button from '@mui/material/Button';
3
- import { styled } from '@mui/material/styles';
4
- export const CustomLabel = styled(Button)(({ theme }) => ({
5
- cursor: 'pointer',
6
- borderRadius: '50px',
7
- border: '1px solid',
8
- borderColor: theme.palette.divider,
9
- background: theme.palette.common.white,
10
- color: theme.palette.text.primary,
11
- fontSize: '11px',
12
- fontWeight: theme.typography.fontWeightRegular,
13
- paddingInline: '12px',
14
- height: 32,
15
- width: 'max-content',
16
- textTransform: 'unset',
17
- '&:hover': {
18
- boxShadow: theme.shadows[7],
19
- border: '1px solid',
20
- borderColor: theme.palette.info.dark,
21
- },
22
- }));
23
- export const FiltersWrapper = styled(Box)(() => ({
24
- display: 'flex',
25
- flexDirection: 'column',
26
- gap: '8px',
27
- }));
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import { CalendarProps } from 'react-multi-date-picker';
3
- import { Dates } from '../../type';
4
- interface RangeDatepickerProps extends Omit<CalendarProps, 'onChange'> {
5
- isAr?: boolean;
6
- isHijri: boolean;
7
- values: Dates;
8
- onChange: (v: Dates) => void;
9
- numberOfMonths?: number;
10
- }
11
- declare const _default: React.ForwardRefExoticComponent<Omit<RangeDatepickerProps, "ref"> & React.RefAttributes<unknown>>;
12
- export default _default;
@@ -1,29 +0,0 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- import { forwardRef } from 'react';
14
- import { Calendar } from 'react-multi-date-picker';
15
- import { darkLeftArrowIcon, darkRightArrowIcon } from '../../../../constants/index.js';
16
- import { ArrowButton } from './style';
17
- import { getLocale, getCalender } from '../../utils';
18
- const weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
19
- function RangeDatepicker(_a, ref) {
20
- var { isAr = false, isHijri, values, onChange, numberOfMonths = 2 } = _a, props = __rest(_a, ["isAr", "isHijri", "values", "onChange", "numberOfMonths"]);
21
- const getArrow = (direction) => {
22
- if (direction === 'right') {
23
- return isAr ? darkLeftArrowIcon : darkRightArrowIcon;
24
- }
25
- return isAr ? darkRightArrowIcon : darkLeftArrowIcon;
26
- };
27
- return (_jsx(Calendar, Object.assign({ ref: ref, numberOfMonths: numberOfMonths, value: values, onChange: onChange, calendar: getCalender(isHijri), locale: getLocale({ isHijri, isAr }), range: true, format: "MMM DD", monthYearSeparator: ' ', renderButton: (direction, handleClick) => (_jsx(ArrowButton, Object.assign({ onClick: handleClick }, { children: _jsx("img", { src: getArrow(direction), alt: "arrow" }) }))), weekDays: !isAr ? weekDays : undefined, maxDate: new Date() }, props)));
28
- }
29
- export default forwardRef(RangeDatepicker);
@@ -1,2 +0,0 @@
1
- import RangeDatepicker from './RangeDatepicker';
2
- export default RangeDatepicker;
@@ -1,2 +0,0 @@
1
- import RangeDatepicker from './RangeDatepicker';
2
- export default RangeDatepicker;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- 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"> & {
3
- ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
4
- }, "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>, {}, {}>;
@@ -1,9 +0,0 @@
1
- import Button from '@mui/material/Button';
2
- import { styled } from '@mui/material/styles';
3
- export const ArrowButton = styled(Button)(() => ({
4
- minWidth: 'auto',
5
- padding: 0,
6
- '& > img': {
7
- cursor: 'pointer',
8
- },
9
- }));
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import type { Timezone } from '../../../../types/index.js';
3
- interface CustomTimezoneProps {
4
- onChange: (timezone: Timezone) => void;
5
- selectedTimezone: Timezone | null;
6
- defaultTimezone: Timezone;
7
- browserTimezone: string;
8
- }
9
- declare function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTimezone }: CustomTimezoneProps): import("react/jsx-runtime").JSX.Element;
10
- declare const _default: import("react").MemoExoticComponent<typeof CustomTimezone>;
11
- export default _default;
@@ -1,32 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState, useMemo, memo } from 'react';
3
- import ClickAwayListener from '@mui/material/ClickAwayListener';
4
- import Popper from '@mui/material/Popper';
5
- import { entityTimezoneIcon, savedTimezoneIcon, userTimezoneIcon } from '../../../../constants/index.js';
6
- import { CountryFlag } from '../../../index.js';
7
- import { TimezoneWrapper, TimezoneDropdown, SelectedTimezone } from './style';
8
- import EntitiesTimezone from './components/EntitiesTimezone';
9
- import UserTimezone from './components/UserTimezone';
10
- function CustomTimezone({ onChange, selectedTimezone, defaultTimezone, browserTimezone }) {
11
- const [anchorEl, setAnchorEl] = useState(null);
12
- const open = Boolean(anchorEl);
13
- const onClose = () => {
14
- setAnchorEl(null);
15
- };
16
- const updateTimezone = (timezone) => {
17
- onChange(timezone);
18
- onClose();
19
- };
20
- const onOpen = (e) => {
21
- setAnchorEl(e.currentTarget);
22
- };
23
- const selectedTimezoneIcon = useMemo(() => {
24
- if (browserTimezone === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone))
25
- return userTimezoneIcon;
26
- if ((selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone) === defaultTimezone.timezone)
27
- return entityTimezoneIcon;
28
- return savedTimezoneIcon;
29
- }, [browserTimezone, defaultTimezone.timezone, selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone]);
30
- 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: 3 } }, { 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 })] })) }))] })) })));
31
- }
32
- export default memo(CustomTimezone);
@@ -1,12 +0,0 @@
1
- import type { Timezone } from '../../../../../types/index.js';
2
- interface EntitiesTimezoneProps {
3
- selectedTimezone: Timezone | null;
4
- onChange: (selected: Timezone) => void;
5
- defaultTimezone: Timezone;
6
- getTimezoneByCountryCode?: (countryCode: string) => Timezone;
7
- segmentCountries?: {
8
- code: string;
9
- }[];
10
- }
11
- export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTimezone, getTimezoneByCountryCode, segmentCountries, }: EntitiesTimezoneProps): import("react/jsx-runtime").JSX.Element;
12
- export {};
@@ -1,37 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useMemo, useState } from 'react';
3
- import Popper from '@mui/material/Popper';
4
- import { entityTimezoneIcon, smallBlueCheckIcon } from '../../../../../constants/index.js';
5
- import { CountryFlag } from '../../../../index.js';
6
- import { Label, Space, TimezoneDropdown, TimezoneElement } from '../style';
7
- export default function EntitiesTimezone({ selectedTimezone, onChange, defaultTimezone, getTimezoneByCountryCode, segmentCountries, }) {
8
- const [entitiesEl, setEntitiesEl] = useState(null);
9
- const onMouseEnter = (e) => {
10
- if (!entitiesEl)
11
- setEntitiesEl(e.currentTarget);
12
- };
13
- const onMouseLeave = () => {
14
- if (entitiesEl)
15
- setEntitiesEl(null);
16
- };
17
- const onSelectTimezone = (e, tz) => {
18
- e.stopPropagation();
19
- onChange(tz);
20
- };
21
- const availableTimezones = useMemo(() => segmentCountries === null || segmentCountries === void 0 ? void 0 : segmentCountries.map(({ code }) => getTimezoneByCountryCode === null || getTimezoneByCountryCode === void 0 ? void 0 : getTimezoneByCountryCode(code)), [segmentCountries]);
22
- 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]);
23
- const entityTimezone = useMemo(() => {
24
- if (!selectedTimezone)
25
- return defaultTimezone;
26
- return isSelectedTimezoneOneOFTheAvailable ? selectedTimezone : defaultTimezone;
27
- }, [selectedTimezone, defaultTimezone]);
28
- return (_jsxs(TimezoneElement, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => {
29
- if (selectedTimezone)
30
- onChange(entityTimezone);
31
- } }, { 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) => {
32
- const isActive = (timeZone === null || timeZone === void 0 ? void 0 : timeZone.timezone) === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone);
33
- return (_jsxs(TimezoneElement, Object.assign({ onClick: (e) => {
34
- onSelectTimezone(e, timeZone);
35
- }, 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}`));
36
- }) }) }))] })));
37
- }
@@ -1,8 +0,0 @@
1
- import type { Timezone } from '../../../../../types/index.js';
2
- interface UserTimezoneProps {
3
- selectedTimezone: Timezone | null;
4
- onChange: (selected: Timezone) => void;
5
- browserTimezone?: string;
6
- }
7
- export default function UserTimezone({ onChange, selectedTimezone, browserTimezone }: UserTimezoneProps): import("react/jsx-runtime").JSX.Element;
8
- export {};
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
3
- import { CountryFlag } from '../../../../index.js';
4
- import { userTimezoneIcon, smallBlueCheckIcon, COUNTRIES_TIMEZONES } from '../../../../../constants/index.js';
5
- import { Label, Space, TimezoneElement } from '../style';
6
- export default function UserTimezone({ onChange, selectedTimezone, browserTimezone }) {
7
- const browserTimezoneInfo = useMemo(() => COUNTRIES_TIMEZONES.find(({ timezone }) => timezone === browserTimezone), [browserTimezone]);
8
- const onSelectTimezone = () => {
9
- if (browserTimezoneInfo)
10
- onChange(browserTimezoneInfo);
11
- };
12
- const isBrowserTimezoneActive = (browserTimezoneInfo === null || browserTimezoneInfo === void 0 ? void 0 : browserTimezoneInfo.timezone) === (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.timezone);
13
- 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 }))] })));
14
- }
@@ -1,2 +0,0 @@
1
- import Timezone from './Timezone';
2
- export default Timezone;
@@ -1,2 +0,0 @@
1
- import Timezone from './Timezone';
2
- export default Timezone;
@@ -1,21 +0,0 @@
1
- /// <reference types="react" />
2
- 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"> & {
3
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
- 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"> & {
6
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
8
- 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"> & {
9
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
11
- open: boolean;
12
- }, {}, {}>;
13
- 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"> & {
14
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
15
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
16
- 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"> & {
17
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
18
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
19
- 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"> & {
20
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
21
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -1,61 +0,0 @@
1
- import Box from '@mui/material/Box';
2
- import { styled } from '@mui/material/styles';
3
- export const TimezoneWrapper = styled(Box)(() => ({
4
- '[class$="-IndicatorsContainer2"]': {
5
- display: 'none',
6
- },
7
- '#react-select-2-listbox': {
8
- width: 300,
9
- },
10
- }));
11
- export const TimezoneDropdown = styled(Box)(({ theme }) => ({
12
- borderRadius: theme.spacing(0.5),
13
- border: `1px solid ${theme.palette.divider}`,
14
- background: theme.palette.common.white,
15
- boxShadow: theme.shadows[10],
16
- minWidth: 200,
17
- width: 'max-content',
18
- overflow: 'auto',
19
- }));
20
- 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 && {
21
- borderRadius: '4px',
22
- boxShadow: theme.shadows[7],
23
- border: '1px solid',
24
- borderColor: theme.palette.info.dark,
25
- background: theme.palette.common.white,
26
- })), { span: { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' } })));
27
- export const TimezoneElement = styled(Box)(({ theme }) => ({
28
- padding: theme.spacing(1),
29
- color: theme.palette.text.primary,
30
- fontSize: '11px',
31
- display: 'flex',
32
- alignItems: 'center',
33
- gap: theme.spacing(1),
34
- height: 33,
35
- cursor: 'pointer',
36
- '&:hover': {
37
- boxShadow: '0px 0px 16px 0px #00000021',
38
- },
39
- '&+&': {
40
- borderTop: '1px solid',
41
- borderColor: theme.palette.divider,
42
- },
43
- '&.active span': {
44
- fontWeight: 500,
45
- },
46
- span: {
47
- whiteSpace: 'nowrap',
48
- overflow: 'hidden',
49
- textOverflow: 'ellipsis',
50
- },
51
- }));
52
- export const Space = styled(Box)(() => ({
53
- width: 12,
54
- height: 12,
55
- }));
56
- export const Label = styled(Box)(({ theme }) => ({
57
- fontSize: '11px',
58
- color: theme.palette.text.secondary,
59
- lineHeight: '15.03px',
60
- '&.selected': { color: theme.palette.info.dark },
61
- }));
@@ -1,2 +0,0 @@
1
- import RangeCalender from './RangeCalender';
2
- export default RangeCalender;
@@ -1,2 +0,0 @@
1
- import RangeCalender from './RangeCalender';
2
- export default RangeCalender;
@@ -1,33 +0,0 @@
1
- /// <reference types="react" />
2
- 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"> & {
3
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
- 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"> & {
6
- ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
7
- }, "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>, {}, {}>;
8
- 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"> & {
9
- ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
10
- }, "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>, {}, {}>;
11
- 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"> & {
12
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
13
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
14
- 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"> & {
15
- ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
16
- }, "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> & {
17
- open: boolean;
18
- }, {}, {}>;
19
- 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"> & {
20
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
21
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
22
- 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"> & {
23
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
24
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
25
- 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"> & {
26
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
27
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
28
- 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"> & {
29
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
30
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
31
- 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"> & {
32
- ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
33
- }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -1,189 +0,0 @@
1
- import Box from '@mui/material/Box';
2
- import Button from '@mui/material/Button';
3
- import { styled } from '@mui/material/styles';
4
- export const CalenderWrapper = styled(Box)(({ theme }) => ({
5
- display: 'flex',
6
- marginTop: '8px',
7
- background: theme.palette.common.white,
8
- boxShadow: theme.shadows[9],
9
- borderRadius: theme.spacing(1),
10
- color: theme.palette.text.primary,
11
- fontSize: '11px',
12
- '.rmdp-calendar': {
13
- padding: '8px 16px 16px',
14
- },
15
- '.rmdp-rtl *': {
16
- fontFamily: 'Tajawal',
17
- },
18
- '.rmdp-rtl .sd': {
19
- paddingTop: '4px',
20
- },
21
- '.rmdp-wrapper': {
22
- position: 'relative',
23
- borderRadius: '8px',
24
- boxShadow: 'none',
25
- },
26
- '.rmdp-day span': {
27
- fontSize: '11px',
28
- fontWeight: 500,
29
- },
30
- '.rmdp-day, .rmdp-week-day': {
31
- width: 40,
32
- height: 40,
33
- marginBottom: '2px',
34
- padding: '4px',
35
- fontSize: '11px',
36
- color: theme.palette.grey[900],
37
- },
38
- '.rmdp-day-picker': {
39
- padding: 0,
40
- },
41
- '.rmdp-day.rmdp-today span': {
42
- backgroundColor: 'transparent',
43
- color: theme.palette.info.dark,
44
- },
45
- '.rmdp-day.rmdp-today.end span, .rmdp-day.rmdp-today.end span': {
46
- color: theme.palette.common.white,
47
- },
48
- '.rmdp-range, .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover': {
49
- background: theme.palette.info.light,
50
- boxShadow: 'none',
51
- color: theme.palette.grey[900],
52
- },
53
- '.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': {
54
- borderRadius: '50%',
55
- background: theme.palette.background.gradient.darkShadedBlue,
56
- color: theme.palette.common.white,
57
- },
58
- '.rmdp-range.start:after': {
59
- content: '""',
60
- position: 'absolute',
61
- background: theme.palette.info.light,
62
- height: '100%',
63
- width: '50%',
64
- right: 0,
65
- top: 0,
66
- zIndex: -1,
67
- },
68
- '.rmdp-rtl .rmdp-range.start:after': {
69
- right: 'unset',
70
- left: 0,
71
- },
72
- '.rmdp-range.end:after': {
73
- content: '""',
74
- position: 'absolute',
75
- background: theme.palette.info.light,
76
- height: '100%',
77
- width: '50%',
78
- left: 0,
79
- top: 0,
80
- zIndex: -1,
81
- },
82
- '.rmdp-rtl .rmdp-range.end:after': {
83
- left: 'unset',
84
- right: 0,
85
- },
86
- '.rmdp-week-day': {
87
- color: theme.palette.grey[700],
88
- marginBottom: '4px',
89
- fontSize: '11px',
90
- padding: '4px',
91
- },
92
- '.rmdp-header-values': {
93
- color: theme.palette.grey[900],
94
- fontSize: '12px',
95
- fontWeight: 500,
96
- lineHeight: '20px',
97
- letterSpacing: '0.1px',
98
- },
99
- '.rmdp-header-values span:nth-of-type(2)': {
100
- display: 'none',
101
- },
102
- '.rmdp-header': {
103
- padding: '4px 0',
104
- margin: 0,
105
- fontSize: '12px',
106
- },
107
- '.rmdp-top-class': {
108
- display: 'block !important',
109
- },
110
- '.rmdp-day.rmdp-selected span:not(.highlight)': {
111
- background: theme.palette.info.dark,
112
- },
113
- '.rmdp-day.start.end': {
114
- overflow: 'hidden',
115
- },
116
- }));
117
- export const CancelButton = styled(Button)(({ theme }) => ({
118
- textTransform: 'capitalize',
119
- padding: '8px 24px',
120
- width: 75,
121
- height: 32,
122
- fontSize: '11px',
123
- background: 'transparent',
124
- color: theme.palette.text.primary,
125
- border: '1px solid',
126
- borderColor: theme.palette.divider,
127
- fontWeight: 500,
128
- borderRadius: '4px',
129
- '&:hover': {
130
- background: 'transparent',
131
- color: theme.palette.text.primary,
132
- },
133
- }));
134
- export const OkayButton = styled(Button)(({ theme }) => ({
135
- textTransform: 'capitalize',
136
- padding: '8px 24px',
137
- width: 75,
138
- height: 32,
139
- fontSize: '11px',
140
- borderRadius: '4px',
141
- fontWeight: 700,
142
- background: theme.palette.info.dark,
143
- '&:hover': {
144
- background: theme.palette.info.dark,
145
- },
146
- }));
147
- export const ButtonsWrapper = styled(Box)(() => ({
148
- display: 'flex',
149
- gap: 8,
150
- }));
151
- 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] }))));
152
- export const Footer = styled(Box)(({ theme }) => ({
153
- background: theme.palette.common.white,
154
- display: 'flex',
155
- justifyContent: 'space-between',
156
- alignItems: 'center',
157
- gap: 10,
158
- padding: '16px',
159
- borderTop: '1px solid',
160
- borderColor: theme.palette.divider,
161
- borderBottomRightRadius: '8px',
162
- }));
163
- export const FiltersArea = styled(Box)(({ theme }) => ({
164
- padding: 16,
165
- paddingInlineEnd: '23px',
166
- borderRight: '1px solid',
167
- borderColor: theme.palette.divider,
168
- background: theme.palette.common.white,
169
- width: 'max-content',
170
- borderTopLeftRadius: '8px',
171
- borderBottomLeftRadius: '8px',
172
- display: 'flex',
173
- flexDirection: 'column',
174
- gap: 10,
175
- justifyContent: 'space-between',
176
- }));
177
- export const TimeZone = styled(Box)(() => ({
178
- display: 'flex',
179
- alignItems: 'center',
180
- gap: '10px',
181
- }));
182
- export const Main = styled(Box)(() => ({
183
- position: 'relative',
184
- }));
185
- export const Settings = styled(Box)(() => ({
186
- display: 'flex',
187
- flexDirection: 'column',
188
- gap: '24px',
189
- }));