@tap-payments/os-micro-frontend-shared 0.0.205 → 0.0.207

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.
@@ -1,4 +1,6 @@
1
+ import { MouseEvent } from 'react';
1
2
  import type { CalenderMode, Timezone } from '../../types/index.js';
3
+ import { SxProps } from '@mui/system';
2
4
  interface RangeCalendarProps {
3
5
  defaultDate: [Date, Date];
4
6
  onDateChange: (date: [Date, Date], timezoneOffset?: number) => void;
@@ -15,6 +17,9 @@ interface RangeCalendarProps {
15
17
  onChangeTimezone?: (timezone: Timezone) => void;
16
18
  defaultTimezone: Timezone;
17
19
  browserTimezone: string;
20
+ calendarPopperSx?: SxProps;
21
+ renderTrigger?: (open: boolean, onOpenCalender: (event: MouseEvent<HTMLElement>) => void) => React.ReactNode;
22
+ mainSx?: SxProps;
18
23
  }
19
- declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
24
+ declare function RangeCalender({ defaultDate, onDateChange, mode, onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderTrigger, mainSx, }: RangeCalendarProps): import("react/jsx-runtime").JSX.Element;
20
25
  export default RangeCalender;
@@ -13,7 +13,7 @@ import QuickFilters from './components/QuickFilters';
13
13
  import RangeDatePicker from './components/RangeDatepicker';
14
14
  import CustomTimezone from './components/Timezone';
15
15
  import { ButtonsWrapper, CalenderWrapper, CancelButton, FiltersArea, Footer, Main, OkayButton, SelectedDate, TimeZone, Settings } from './style';
16
- function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, }) {
16
+ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalendarModeSwitch, numberOfMonths, noTimezone, noQuickFilter, maxDateRange, onCalendarGroupChange, groupBy, timezone, onChangeTimezoneHistory, onChangeTimezone, defaultTimezone, browserTimezone, calendarPopperSx, renderTrigger, mainSx, }) {
17
17
  const [dates, setDates] = useState([new DateObject(defaultDate[0]), new DateObject(defaultDate[1])]);
18
18
  const [values, setValues] = useState(dates);
19
19
  const [selectedTimezone, setSelectedTimezone] = useState(timezone);
@@ -82,10 +82,10 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
82
82
  if (calendarRef.current)
83
83
  calendarRef.current.set({ date: newValues[0] });
84
84
  };
85
- return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender" }, { children: [_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() })), open && (_jsx(CustomBackdrop, { onClick: (e) => {
85
+ return (_jsxs(Main, Object.assign({ "data-testid": "RangeCalender", sx: mainSx }, { children: [renderTrigger ? (renderTrigger(open, onOpenCalender)) : (_jsx(SelectedDate, Object.assign({ onClick: onOpenCalender, open: open }, { children: (dates[0] || dates[1]) && getSelectedDate() }))), open && (_jsx(CustomBackdrop, { onClick: (e) => {
86
86
  e.stopPropagation();
87
87
  onCloseCalender();
88
- } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: { zIndex: 3 } }, { children: _jsxs(CalenderWrapper, { children: [!noQuickFilter && (_jsxs(FiltersArea, { children: [_jsx(QuickFilters, { onChange: onChangeQuickFilter, isHijri: isHijri }), _jsxs(Settings, { children: [groupBy && (_jsx(GroupBy, { groupBy: selectedGroupBy, isCalenderOpen: open, onUpdate: (group) => {
88
+ } })), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-end", sx: Object.assign({ zIndex: 3 }, calendarPopperSx) }, { 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) => {
89
89
  setSelectedGroupBy(group);
90
90
  } })), _jsx(Hijri, { isHijri: isHijri, onCalendarModeSwitch: onCalendarModeSwitch })] })] })), _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } }, { children: [_jsx(RangeDatePicker, { values: values, onChange: onChange, isHijri: isHijri, ref: calendarRef, numberOfMonths: numberOfMonths }), _jsx(Collapse, Object.assign({ in: isError && Boolean(maxDateRange) }, { children: _jsx(Error, { error: t('dateRangeError', { number: maxDateRange }), sx: { marginInline: '16px', marginBottom: '16px' } }) })), _jsxs(Footer, Object.assign({ sx: { borderBottomLeftRadius: '8px' } }, { children: [!noTimezone ? (_jsx(TimeZone, { children: _jsx(CustomTimezone, { onChange: setSelectedTimezone, selectedTimezone: selectedTimezone, defaultTimezone: defaultTimezone, browserTimezone: browserTimezone }, String(open)) })) : (_jsx("div", {})), _jsxs(ButtonsWrapper, { children: [_jsx(CancelButton, Object.assign({ variant: "contained", onClick: onCloseCalender }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ variant: "contained", onClick: submitDate }, { children: t('okay') }))] })] }))] }))] }) }))] })));
91
91
  }
@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
554
554
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
555
555
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
556
556
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
557
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
558
557
  src?: string | undefined;
559
558
  alt?: string | undefined;
559
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
560
560
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
561
561
  useMap?: string | undefined;
562
562
  loading?: "eager" | "lazy" | undefined;
@@ -272,9 +272,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
272
272
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
273
273
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
274
274
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
275
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
276
275
  src?: string | undefined;
277
276
  alt?: string | undefined;
277
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
278
278
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
279
279
  useMap?: string | undefined;
280
280
  loading?: "eager" | "lazy" | undefined;
@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
273
273
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
274
274
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
275
275
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
276
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
277
276
  src?: string | undefined;
278
277
  alt?: string | undefined;
278
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
279
279
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
280
280
  useMap?: string | undefined;
281
281
  loading?: "eager" | "lazy" | undefined;
@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
262
262
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
263
263
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
264
264
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
265
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
266
265
  src?: string | undefined;
267
266
  alt?: string | undefined;
267
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
268
268
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
269
269
  useMap?: string | undefined;
270
270
  loading?: "eager" | "lazy" | undefined;
@@ -3,5 +3,5 @@ interface InputsI {
3
3
  onCloseDropdown: () => void;
4
4
  filter: IColumnFilter & IColumnFilterInputs;
5
5
  }
6
- declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter } }: InputsI): import("react/jsx-runtime").JSX.Element;
6
+ declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onClearValuesClick } }: InputsI): import("react/jsx-runtime").JSX.Element;
7
7
  export default Inputs;
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
7
7
  import { grayCloseIcon, searchIcon } from '../../../../../constants/index.js';
8
8
  import { Wrapper, Text, InputStyled, InputsWrapper, ClearButton, ClearWrapper } from './style';
9
9
  import { CancelButton, Footer, OkayButton } from '../style';
10
- function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter } }) {
10
+ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onClearValuesClick } }) {
11
11
  const [values, setValues] = useState({});
12
12
  useEffect(() => {
13
13
  setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
@@ -21,6 +21,7 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
21
21
  onCloseDropdown();
22
22
  };
23
23
  const onClickClear = () => {
24
+ onClearValuesClick === null || onClearValuesClick === void 0 ? void 0 : onClearValuesClick();
24
25
  setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
25
26
  };
26
27
  const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;
@@ -306,9 +306,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
306
306
  onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
307
307
  onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
308
308
  onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
309
- referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
310
309
  src?: string | undefined;
311
310
  alt?: string | undefined;
311
+ referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
312
312
  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
313
313
  useMap?: string | undefined;
314
314
  loading?: "eager" | "lazy" | undefined;
@@ -134,6 +134,7 @@ export type ColumnFilterValues = Record<string, string | string[] | {
134
134
  export type IColumnFilter = ({
135
135
  onConfirm?: (filterValues: ColumnFilterValues) => void;
136
136
  onClear: (apiKeys: string[]) => void;
137
+ onClearValuesClick?: () => void;
137
138
  data?: ColumnFilterValues;
138
139
  isOnlyOneFilter?: boolean;
139
140
  } & (IColumnFilterList | IColumnFilterInputs | IColumnFilterCustom));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.0.205",
4
+ "version": "0.0.207",
5
5
  "type": "module",
6
6
  "main": "build/index.js",
7
7
  "module": "build/index.js",