@mailstep/design-system 0.7.29 → 0.7.30-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.29",
+  "version": "0.7.30-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts

@@ -1,8 +1,10 @@
-import { FilterComponentProps } from '../../../types';
+import type { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
+import type { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
 type DatePickerRangeProps = FilterComponentProps<Date[]> & {
     filterTime?: number;
     initialView?: InitialView;
+    onChange: (value: Date[], others?: DateTimeOthers) => void;
 };
 type DateRangeProps = DatePickerRangeProps & {
     error?: string;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -27,33 +27,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState, useCallback, useMemo } from 'react';
 import { DateTime } from 'luxon';
-import styled from '@xstyled/styled-components';
-import { sameDate } from './utils/sameDate';
-import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
 import DatePicker from '../../../../../Elements/DatePicker';
 import Input from '../../../../../Forms/Input';
+import { useClickOutside } from '../../../../Modal/hooks/useClickOutside';
+import { getCleanValues } from './utils/getCleanValues';
+import { pickerRangeToString } from './utils/pickerRangeToString';
 import { i18n } from '@lingui/core';
-var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"
-    // User readable date range.
-])));
-// User readable date range.
-var pickerRangeToString = function (values) {
-    if (values === void 0) { values = []; }
-    // If no date is specified
-    if (!values[0] && !values[1]) {
-        return '';
-    }
-    // If only From date is specified
-    if (values[0] && !values[1]) {
-        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
-    }
-    // If both of date are same, show only one date
-    if (sameDate(values[0], values[1])) {
-        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
-    }
-    // Format each date separately and join together
-    return values.map(function (v) { return v && DateTime.fromJSDate(v).toFormat('dd.LL.yyyy'); }).join(' - ');
-};
+import styled from '@xstyled/styled-components';
+var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  margin-right: 20px;\n"], ["\n  display: inline-flex;\n  margin-right: 20px;\n"])));
 var OverlayComponentDefault = function (_a) {
     var children = _a.children;
     return _jsx("div", { children: children });
@@ -63,12 +44,10 @@ var DatePickerRange = function (props) {
     var onChange = props.onChange, error = props.error, label = props.label, value = props.value, filterTime = props.filterTime, initialView = props.initialView, _d = props.OverlayComponent, OverlayComponent = _d === void 0 ? OverlayComponentDefault : _d, rest = __rest(props, ["onChange", "error", "label", "value", "filterTime", "initialView", "OverlayComponent"]);
     var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
     var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
+    var _g = useState(undefined), others = _g[0], setOthersValues = _g[1];
     var timeFormat = filterTime ? 'HH:mm' : false;
     var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
-    var cleanValue = React.useMemo(function () { return [
-        typeof (value === null || value === void 0 ? void 0 : value[0]) === 'string' ? new Date(value[0]) : (value === null || value === void 0 ? void 0 : value[0]) || undefined,
-        typeof (value === null || value === void 0 ? void 0 : value[1]) === 'string' ? new Date(value[1]) : (value === null || value === void 0 ? void 0 : value[1]) || undefined,
-    ]; }, [value]);
+    var cleanValue = React.useMemo(function () { return getCleanValues(value); }, [value]);
     var initialViewDate = useMemo(function () {
         if (cleanValue[0] && cleanValue[1]) {
             return cleanValue;
@@ -82,22 +61,25 @@ var DatePickerRange = function (props) {
         else {
             firstDate.setMonth(firstDate.getMonth());
         }
-        return [firstDate, secondDate];
+        return [cleanValue[0] || firstDate, cleanValue[1] || secondDate];
     }, [cleanValue, initialView]);
-    var _g = useState(false), isOpen = _g[0], setOpen = _g[1];
+    var _h = useState(false), isOpen = _h[0], setOpen = _h[1];
     var setDateFrom = useCallback(function (v) {
         setStartRangeValue(v);
-        onChange([v, cleanValue[1]]);
-    }, [onChange, cleanValue]);
+        onChange([v, cleanValue[1]], others);
+    }, [onChange, others, cleanValue]);
     var setDateTo = useCallback(function (v) {
         setEndRangeValue(v);
-        onChange([cleanValue[0], v]);
-    }, [onChange, cleanValue]);
-    var openPicker = useCallback(function () { return setOpen(true); }, [setOpen]);
+        onChange([cleanValue[0], v], others);
+    }, [onChange, others, cleanValue]);
+    var openPicker = useCallback(function () {
+        setOpen(true);
+    }, [setOpen]);
     var clear = useCallback(function () {
         onChange([]);
         setStartRangeValue(undefined);
         setEndRangeValue(undefined);
+        setOthersValues(undefined);
     }, [onChange]);
     var isValidDateFrom = useCallback(function (current) { return !cleanValue[1] || DateTime.fromJSDate(cleanValue[1]) >= DateTime.fromJSDate(current); }, [cleanValue]);
     var isValidDateTo = useCallback(function (current) { return !cleanValue[0] || DateTime.fromJSDate(current) >= DateTime.fromJSDate(cleanValue[0]); }, [cleanValue]);
@@ -107,7 +89,8 @@ var DatePickerRange = function (props) {
     // Check if the second value is not selected and the first value is the same as the initial value
     var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
     var ref = useClickOutside({ onClose: onClose });
-    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null, isSecondDatePicker: true }))] })) }) })] }));
+    console.log('others', others);
+    return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, others: others, onChangeOthers: setOthersValues, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: true, open: true, disabled: cleanValue[0] === null })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: true, open: true, disabled: secondDatePickerValue === null || !!(others === null || others === void 0 ? void 0 : others.dateTypeRepeater), isSecondDatePicker: true }))] })) }) })] }));
 };
 export default DatePickerRange;
 var templateObject_1;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/getCleanValues.d.ts

@@ -0,0 +1 @@
+export declare const getCleanValues: (value: Date[]) => Array<Date | undefined>;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/getCleanValues.js

@@ -0,0 +1,11 @@
+var getCleanValue = function (value) {
+    if (typeof value === 'string') {
+        return new Date(value);
+    }
+    return value || undefined;
+};
+export var getCleanValues = function (value) {
+    var from = getCleanValue(value === null || value === void 0 ? void 0 : value[0]);
+    var to = getCleanValue(value === null || value === void 0 ? void 0 : value[1]);
+    return [from, to];
+};

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.d.ts

@@ -0,0 +1,2 @@
+import type { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
+export declare const pickerRangeToString: (values?: Date[], others?: DateTimeOthers) => string;

package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.js

@@ -0,0 +1,23 @@
+import { DateTime } from 'luxon';
+import { DatePickerRepeatTrans, TimePickerRepeatTrans } from '../../../../../../Elements/DatePicker/utils/constants';
+import { sameDate } from './sameDate';
+// User readable date range.
+export var pickerRangeToString = function (values, others) {
+    if (values === void 0) { values = []; }
+    if (others === null || others === void 0 ? void 0 : others.dateTypeRepeater) {
+        var repeaterDate = DatePickerRepeatTrans[others === null || others === void 0 ? void 0 : others.dateTypeRepeater];
+        var repeaterTime = (others === null || others === void 0 ? void 0 : others.timeTypeRepeater) ? TimePickerRepeatTrans[others === null || others === void 0 ? void 0 : others.timeTypeRepeater] : '';
+        var time = (others === null || others === void 0 ? void 0 : others.time) ? " ".concat(String(others === null || others === void 0 ? void 0 : others.time.h).padStart(2, '0'), ":").concat(String(others === null || others === void 0 ? void 0 : others.time.m).padStart(2, '0')) : '';
+        return "".concat(repeaterDate, " ").concat(repeaterTime).concat(time);
+    }
+    // If no date is specified
+    if (!values[0] && !values[1]) {
+        return '';
+    }
+    // If only From date is specified or if both of date are same, show only one date
+    if ((values[0] && !values[1]) || sameDate(values[0], values[1])) {
+        return DateTime.fromJSDate(values[0]).toFormat('dd.LL.yyyy');
+    }
+    // Format each date separately and join together
+    return values.map(function (v) { return v && DateTime.fromJSDate(v).toFormat('dd.LL.yyyy'); }).join(' - ');
+};

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SpaceAround } from '../SpaceAround';
-import { DatetimepickerProps } from './Datetime/types';
+import type { SpaceAround } from '../SpaceAround';
+import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;
@@ -15,8 +15,10 @@ export type DatePickerType = DatetimepickerProps & {
     error?: string;
     icon?: boolean;
     isSecondDatePicker?: boolean;
+    others?: DateTimeOthers;
     onClear?: () => void;
     onInputChange?: () => void;
+    onChangeOthers?: (others: DateTimeOthers) => void;
 };
 declare const _default: React.MemoExoticComponent<({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat, timeFormat, open, secondValue, input, icon, showInputLabel, showCalendarLabel, spaceAround, className, onClear, onInputChange, ...passProps }: DatePickerType) => JSX.Element>;
 export default _default;

package/ui/Elements/DatePicker/DatePicker.js

@@ -52,7 +52,8 @@ var DatePicker = function (_a) {
         return renderCalendar();
     }, [label, showInputLabel]);
     var handleChange = useCallback(function (value) {
-        var parsed = typeof value === 'string' ? value : value.toDate();
+        var _a;
+        var parsed = typeof value === 'string' ? value : (_a = value === null || value === void 0 ? void 0 : value.toDate) === null || _a === void 0 ? void 0 : _a.call(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
     }, [onChange]);
     var handleIsValid = useCallback(function (current, selected) {
@@ -60,6 +61,6 @@ var DatePicker = function (_a) {
         var parsed = [(_a = current === null || current === void 0 ? void 0 : current.toDate) === null || _a === void 0 ? void 0 : _a.call(current), (_b = selected === null || selected === void 0 ? void 0 : selected.toDate) === null || _b === void 0 ? void 0 : _b.call(selected)];
         return isValidDate ? isValidDate.apply(void 0, parsed) : true;
     }, [isValidDate]);
-    return (_jsx(SpaceAroundWrap, { spaceAround: spaceAround, children: _jsx(DatePickerBase, { className: className, children: _jsx(DatetimePicker, __assign({ value: value, dateFormat: dateFormat, timeFormat: timeFormat, secondValue: secondValue, open: open, input: input, label: showCalendarLabel ? label : undefined, onChange: handleChange, isValidDate: handleIsValid, renderView: handleRenderView, renderInput: handleRenderInput, initialViewDate: initialViewDate, locale: locale }, passProps)) }) }));
+    return (_jsx(SpaceAroundWrap, { spaceAround: spaceAround, children: _jsx(DatePickerBase, { className: className, children: _jsx(DatetimePicker, __assign({ value: value, dateFormat: dateFormat, timeFormat: timeFormat, secondValue: secondValue, open: open, input: input, label: showCalendarLabel ? label : undefined, onChange: handleChange, isValidDate: handleIsValid, renderView: handleRenderView, renderInput: handleRenderInput, initialViewDate: initialViewDate, locale: locale, disabled: disabled }, passProps)) }) }));
 };
 export default React.memo(DatePicker);

package/ui/Elements/DatePicker/Datetime/DateTime.d.ts

@@ -1,6 +1,6 @@
-import moment from 'moment';
 import React from 'react';
-import { DatetimepickerProps } from './types';
+import moment from 'moment';
+import type { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
         onOpen: () => void;
@@ -65,6 +65,7 @@ export default class Datetime extends React.Component<DatetimepickerProps> {
     _updateDate: (e: any) => void;
     _viewNavigate: (modifier: any, unit: any) => void;
     _setTime: (type: any, value: any) => void;
+    _reset: () => void;
     _openCalendar: () => void;
     _closeCalendar: () => void;
     _handleClickOutside: () => void;

package/ui/Elements/DatePicker/Datetime/DateTime.js

@@ -26,17 +26,17 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
-import moment from 'moment';
 import React from 'react';
+import moment from 'moment';
+import onClickOutside from 'react-onclickoutside';
 import DaysView from './views/DaysView';
 import MonthsView from './views/MonthsView';
 import YearsView from './views/YearsView';
-import onClickOutside from 'react-onclickoutside';
 var viewModes = {
     YEARS: 'years',
     MONTHS: 'months',
     DAYS: 'days',
-    TIME: 'time',
+    TIME: 'time'
 };
 var nofn = function () { };
 var Datetime = /** @class */ (function (_super) {
@@ -54,9 +54,12 @@ var Datetime = /** @class */ (function (_super) {
                 selectedDate: _this.getSelectedDate(),
                 isValidDate: props.isValidDate,
                 updateDate: _this._updateDate,
+                others: props.others,
+                onChangeOthers: props.onChangeOthers,
+                reset: _this._reset,
                 navigate: _this._viewNavigate,
                 moment: moment,
-                showView: _this._showView,
+                showView: _this._showView
             };
             // Probably updateOn, updateSelectedDate and setDate can be merged in the same method
             // that would update viewDate or selectedDate depending on the view and the dateFormat
@@ -141,11 +144,14 @@ var Datetime = /** @class */ (function (_super) {
                 _this.setState({
                     selectedDate: date,
                     viewDate: date.clone(),
-                    inputValue: date.format(_this.getFormat('datetime')),
+                    inputValue: date.format(_this.getFormat('datetime'))
                 });
             }
             _this.props.onChange(date);
         };
+        _this._reset = function () {
+            _this.props.onChange(undefined);
+        };
         _this._openCalendar = function () {
             if (_this.isOpen())
                 return;
@@ -229,7 +235,7 @@ var Datetime = /** @class */ (function (_super) {
             currentView: props.initialViewMode || this.getInitialView(),
             viewDate: this.getInitialViewDate(selectedDate),
             selectedDate: selectedDate && selectedDate.isValid() ? selectedDate : undefined,
-            inputValue: this.getInitialInputValue(selectedDate),
+            inputValue: this.getInitialInputValue(selectedDate)
         };
     };
     Datetime.prototype.getInitialViewDate = function (selectedDate) {
@@ -489,7 +495,7 @@ var Datetime = /** @class */ (function (_super) {
         closeOnSelect: false,
         closeOnTab: true,
         closeOnClickOutside: true,
-        renderView: function (_, renderFunc) { return renderFunc(); },
+        renderView: function (_, renderFunc) { return renderFunc(); }
     };
     // Make moment accessible through the Datetime class
     Datetime.moment = moment;

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { DateTimeOthers } from '../types';
+type DateRepeaterProps = {
+    onChangeOthers?: ({ dateTypeRepeater }: DateTimeOthers) => void;
+    others: DateTimeOthers;
+    reset: () => void;
+};
+export declare const DateRepeater: FC<DateRepeaterProps>;
+export {};

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import Icon from '../../../Icon';
+import { DatePickerRepeat, DatePickerRepeatTrans } from '../../utils/constants';
+import { i18n } from '@lingui/core';
+import { x } from '@xstyled/styled-components';
+import { FooterRow } from './FooterRow';
+import { FooterRowLabel } from './FooterRowLabel';
+export var DateRepeater = function (_a) {
+    var onChangeOthers = _a.onChangeOthers, others = _a.others, reset = _a.reset;
+    var handleChange = useCallback(function (e) {
+        var dateTypeRepeater = e.target.value;
+        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
+        if (dateTypeRepeater) {
+            reset();
+        }
+    }, [onChangeOthers, reset, others]);
+    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_LAST_WEEK, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_LAST_WEEK] })] })] }) }));
+};

package/ui/Elements/DatePicker/Datetime/components/Timepicker.d.ts

@@ -1,8 +1,12 @@
-import { FC } from 'react';
+import type { FC } from 'react';
+import type { DateTimeOthers } from '../types';
 interface TimepickerProps {
     setTime: (type: string, value: number) => void;
     value: Date | null;
     disabled?: boolean;
+    others: DateTimeOthers;
+    onChangeOthers: (others: DateTimeOthers) => void;
+    isSecondDatePicker?: boolean;
 }
 export declare const Timepicker: FC<TimepickerProps>;
 export {};

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -1,6 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import Icon from '../../../Icon';
+import { TimePickerRepeat, TimePickerRepeatTrans } from '../../utils/constants';
 import { i18n } from '@lingui/core';
 import { x } from '@xstyled/styled-components';
 import { FooterRow } from './FooterRow';
@@ -8,22 +20,30 @@ import { FooterRowLabel } from './FooterRowLabel';
 import { TimeInput } from './TimeInput';
 export var Timepicker = function (_a) {
     var _b, _c, _d, _e;
-    var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
-    var initialHours = (_c = (_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) !== null && _c !== void 0 ? _c : 0;
-    var initialMinutes = (_e = (_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) !== null && _e !== void 0 ? _e : 0;
+    var setTime = _a.setTime, others = _a.others, onChangeOthers = _a.onChangeOthers, value = _a.value, disabled = _a.disabled, isSecondDatePicker = _a.isSecondDatePicker;
+    var initialHours = ((_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) || ((_c = others === null || others === void 0 ? void 0 : others.time) === null || _c === void 0 ? void 0 : _c.h) || 0;
+    var initialMinutes = ((_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) || ((_e = others === null || others === void 0 ? void 0 : others.time) === null || _e === void 0 ? void 0 : _e.m) || 0;
     var _f = useState(initialHours), hours = _f[0], setHours = _f[1];
     var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
     var onChange = useCallback(function (e) {
-        var _a = e.target.value.split(':'), hours = _a[0], minutes = _a[1];
+        var value = e.target.value;
+        var _a = value.split(':'), hours = _a[0], minutes = _a[1];
+        var timeTypeRepeater = (others === null || others === void 0 ? void 0 : others.dateTypeRepeater) ? (others === null || others === void 0 ? void 0 : others.timeTypeRepeater) || TimePickerRepeat.FROM : undefined;
         setHours(Number(hours));
         setMinutes(Number(minutes));
-    }, []);
+        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { timeTypeRepeater: timeTypeRepeater, time: { h: Number(hours), m: Number(minutes) } }));
+    }, [onChangeOthers, others]);
+    var handleChangeTimer = useCallback(function (e) {
+        onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { timeTypeRepeater: e.target.value }));
+    }, [onChangeOthers, others]);
     useEffect(function () {
         !!value && setTime('hours', hours);
     }, [hours]);
     useEffect(function () {
         !!value && setTime('minutes', minutes);
     }, [minutes]);
-    var timeValue = "".concat((hours).toString().padStart(2, '0'), ":").concat((minutes).toString().padStart(2, '0'));
-    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { disabled: disabled || !value, children: [_jsxs(x.div, { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsx(x.div, { display: "flex", alignItems: "center", children: _jsx(TimeInput, { type: "time", onChange: onChange, disabled: disabled || !value, value: timeValue }) })] }) }));
+    var timeValue = "".concat(hours.toString().padStart(2, '0'), ":").concat(minutes.toString().padStart(2, '0'));
+    var staticTimerValue = isSecondDatePicker ? TimePickerRepeat.TO : TimePickerRepeat.FROM;
+    var timeTypeRepeaterValue = (others === null || others === void 0 ? void 0 : others.dateTypeRepeater) ? others === null || others === void 0 ? void 0 : others.timeTypeRepeater : staticTimerValue;
+    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { disabled: disabled, children: [_jsxs(x.div, { children: [_jsx(Icon, { icon: "clock" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.filterCell.time', message: 'Time' }) })] }), _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.select, { onChange: handleChangeTimer, value: timeTypeRepeaterValue, textAlign: "right", disabled: disabled || !(others === null || others === void 0 ? void 0 : others.dateTypeRepeater), children: [_jsx("option", { value: TimePickerRepeat.AT, children: TimePickerRepeatTrans[TimePickerRepeat.AT] }), _jsx("option", { value: TimePickerRepeat.FROM, children: TimePickerRepeatTrans[TimePickerRepeat.FROM] }), _jsx("option", { value: TimePickerRepeat.TO, children: TimePickerRepeatTrans[TimePickerRepeat.TO] })] }), _jsx(TimeInput, { type: "time", onChange: onChange, disabled: disabled, value: timeValue })] })] }) }));
 };

package/ui/Elements/DatePicker/Datetime/types.d.ts

@@ -1,5 +1,6 @@
-import { FocusEvent, FocusEventHandler } from 'react';
-import { Moment } from 'moment';
+import type { FocusEvent, FocusEventHandler } from 'react';
+import type { Moment } from 'moment';
+import type { DatePickerRepeat, TimePickerRepeat } from '../utils/constants';
 export type ViewMode = 'years' | 'months' | 'days' | 'time';
 export interface TimeConstraint {
     min: number;
@@ -47,6 +48,7 @@ export interface DatetimepickerProps {
     closeOnClickOutside?: boolean;
     secondValue?: Date | null;
     label?: string;
+    disabled?: boolean;
 }
 export interface DatetimepickerState {
     updateOn: string;
@@ -58,4 +60,12 @@ export interface DatetimepickerState {
     secondValue?: Date | null;
     label?: string;
 }
+export type DateTimeOthers = {
+    dateTypeRepeater: DatePickerRepeat;
+    timeTypeRepeater?: TimePickerRepeat;
+    time?: {
+        h: number;
+        m: number;
+    };
+};
 export {};

package/ui/Elements/DatePicker/Datetime/types.js

@@ -1,7 +1 @@
-// Type definitions for react-datetime
-// Project: https://github.com/arqex/react-datetime
-// Definitions by: Ivan Verevkin <vereva@x-root.org>
-//     Updates by: Aaron Spaulding <aaron@sachimp.com>,
-//                 Karol Janyst <http://github.com/LKay>,
-//                 Javier Marquez <javi@arqex.com>
 export {};

package/ui/Elements/DatePicker/Datetime/views/DaysView.js

@@ -27,9 +27,9 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import React from 'react';
+import { DateRepeater } from '../components/DateRepeater';
 import { Timepicker } from '../components/Timepicker';
 import ViewNavigation from '../components/ViewNavigation';
-import { ShortDatePick } from '../components/ShortDatePick';
 var DaysView = /** @class */ (function (_super) {
     __extends(DaysView, _super);
     function DaysView() {
@@ -73,6 +73,7 @@ var DaysView = /** @class */ (function (_super) {
         return rows.map(function (r, i) { return _jsx("tr", { children: r }, "".concat(endDate.month(), "_").concat(i)); });
     };
     DaysView.prototype.renderDay = function (date, startOfMonth, endOfMonth) {
+        var _a, _b;
         var selectedDate = this.props.selectedDate;
         var secondValue = this.props.secondValue;
         var dayProps = {
@@ -103,21 +104,26 @@ var DaysView = /** @class */ (function (_super) {
         if (date.isSame(this.props.moment(), 'day')) {
             className += ' rdtToday';
         }
-        if (this.props.isValidDate(date)) {
+        if (this.props.isValidDate(date) && !((_a = this.props.others) === null || _a === void 0 ? void 0 : _a.dateTypeRepeater) && !this.props.disabled) {
             dayProps.onClick = this._setDate;
         }
         else {
             className += ' rdtDisabled';
         }
+        if (((_b = this.props.others) === null || _b === void 0 ? void 0 : _b.dateTypeRepeater) || this.props.disabled) {
+            className += ' rdtDisabled';
+        }
         dayProps.className = className;
         return this.props.renderDay(dayProps, date.clone(), selectedDate && selectedDate.clone());
     };
     DaysView.prototype.renderFooter = function () {
         var setTime = this.props.setTime;
-        var setDate = this._setDate;
+        var onChangeOthers = this.props.onChangeOthers;
+        var reset = this.props.reset;
         var value = this.props.value;
+        var others = this.props.others;
         var disabled = this.props.disabled;
-        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { colSpan: 7, children: [_jsx(ShortDatePick, { setDate: setDate, isSecondDatePicker: this.props.isSecondDatePicker }), this.props.timeFormat && _jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled })] }) }) }));
+        return (_jsx("tfoot", { children: _jsx("tr", { children: _jsxs("td", { colSpan: 7, children: [onChangeOthers && _jsx(DateRepeater, { onChangeOthers: onChangeOthers, others: others, reset: reset }), this.props.timeFormat && (_jsx(Timepicker, { setTime: setTime, value: value, disabled: disabled || (!value && !(others === null || others === void 0 ? void 0 : others.dateTypeRepeater)), others: others, onChangeOthers: onChangeOthers, isSecondDatePicker: this.props.isSecondDatePicker }))] }) }) }));
     };
     DaysView.defaultProps = {
         isValidDate: function () { return true; },

package/ui/Elements/DatePicker/utils/constants.d.ts

@@ -0,0 +1,12 @@
+export declare enum DatePickerRepeat {
+    EVERY_TODAY = "every-today",
+    EVERY_YESTERDAY = "every-yesterday",
+    EVERY_LAST_WEEK = "every-last-week"
+}
+export declare const DatePickerRepeatTrans: Record<DatePickerRepeat, string>;
+export declare enum TimePickerRepeat {
+    FROM = "from",
+    TO = "to",
+    AT = "at"
+}
+export declare const TimePickerRepeatTrans: Record<TimePickerRepeat, string>;

package/ui/Elements/DatePicker/utils/constants.js

@@ -0,0 +1,24 @@
+var _a, _b;
+import { i18n } from '@lingui/core';
+export var DatePickerRepeat;
+(function (DatePickerRepeat) {
+    DatePickerRepeat["EVERY_TODAY"] = "every-today";
+    DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";
+    DatePickerRepeat["EVERY_LAST_WEEK"] = "every-last-week";
+})(DatePickerRepeat || (DatePickerRepeat = {}));
+export var DatePickerRepeatTrans = (_a = {},
+    _a[DatePickerRepeat.EVERY_TODAY] = i18n._({ id: 'dataGrid.everyToday', message: 'Every today' }),
+    _a[DatePickerRepeat.EVERY_YESTERDAY] = i18n._({ id: 'dataGrid.everyYesterday', message: 'Every yesterday' }),
+    _a[DatePickerRepeat.EVERY_LAST_WEEK] = i18n._({ id: 'dataGrid.everyLastWeek', message: 'Every last week' }),
+    _a);
+export var TimePickerRepeat;
+(function (TimePickerRepeat) {
+    TimePickerRepeat["FROM"] = "from";
+    TimePickerRepeat["TO"] = "to";
+    TimePickerRepeat["AT"] = "at";
+})(TimePickerRepeat || (TimePickerRepeat = {}));
+export var TimePickerRepeatTrans = (_b = {},
+    _b[TimePickerRepeat.FROM] = i18n._({ id: 'dataGrid.timepicker.from', message: 'from' }),
+    _b[TimePickerRepeat.TO] = i18n._({ id: 'dataGrid.timepicker.to', message: 'to' }),
+    _b[TimePickerRepeat.AT] = i18n._({ id: 'dataGrid.timepicker.at', message: 'at' }),
+    _b);