@mailstep/design-system 0.4.21 → 0.5.0-beta.10

package/ui/Elements/DatePicker/DatePicker.js

@@ -0,0 +1,65 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import moment from 'moment';
+// @TODO each language has 62kb gziped, please replace moment with different lib
+import 'moment/dist/locale/cs';
+import 'moment/dist/locale/ru';
+import 'moment/dist/locale/sk';
+import 'moment/dist/locale/it';
+import 'moment/dist/locale/el';
+import React, { useCallback } from 'react';
+import DatetimePicker from './Datetime/DateTime';
+import { x } from '@xstyled/styled-components';
+import { DatePickerBase } from './styles';
+import SpaceAroundWrap from '../SpaceAround';
+import Input from '../../Forms/Input';
+import { getLanguage } from './utils/getLanguage';
+var defaultDateFormat = 'DD.MM.YYYY';
+var DatePicker = function (_a) {
+    var name = _a.name, value = _a.value, initialViewDate = _a.initialViewDate, error = _a.error, label = _a.label, disabled = _a.disabled, isValidDate = _a.isValidDate, onChange = _a.onChange, _b = _a.dateFormat, dateFormat = _b === void 0 ? defaultDateFormat : _b, _c = _a.timeFormat, timeFormat = _c === void 0 ? false : _c, open = _a.open, _d = _a.secondValue, secondValue = _d === void 0 ? null : _d, input = _a.input, _e = _a.icon, icon = _e === void 0 ? true : _e, _f = _a.showInputLabel, showInputLabel = _f === void 0 ? false : _f, _g = _a.showCalendarLabel, showCalendarLabel = _g === void 0 ? true : _g, _h = _a.spaceAround, spaceAround = _h === void 0 ? false : _h, className = _a.className, onClear = _a.onClear, passProps = __rest(_a, ["name", "value", "initialViewDate", "error", "label", "disabled", "isValidDate", "onChange", "dateFormat", "timeFormat", "open", "secondValue", "input", "icon", "showInputLabel", "showCalendarLabel", "spaceAround", "className", "onClear"]);
+    var format = "".concat(dateFormat).concat(timeFormat ? " ".concat(timeFormat) : "");
+    var isValid = !!value && moment(value, format).isValid();
+    var stringValue = isValid ? moment(value, format).format(format) : value;
+    var locale = getLanguage();
+    var handleRenderInput = useCallback(function (_, openCalendar) {
+        return (_jsx(Input, { type: "text", icon: icon ? 'calendar' : undefined, name: name, error: error, disabled: disabled, isInvalid: !!error, label: showInputLabel ? label : undefined, value: stringValue, onFocus: openCalendar, iconOnClick: openCalendar, onClear: onClear }));
+    }, [name, stringValue, error, label, showInputLabel, isValid, disabled]);
+    var handleRenderView = useCallback(function (_, renderCalendar) {
+        if (label && !showInputLabel) {
+            return (_jsx(x.div, { display: "flex", flexDirection: "column", children: renderCalendar() }));
+        }
+        return renderCalendar();
+    }, [label, showInputLabel]);
+    var handleChange = useCallback(function (value) {
+        var parsed = typeof value === 'string' ? value : value.toDate();
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
+    }, [onChange]);
+    var handleIsValid = useCallback(function (current, selected) {
+        var _a, _b;
+        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)) }) }));
+};
+export default React.memo(DatePicker);

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

@@ -0,0 +1,95 @@
+import moment from 'moment';
+import React from 'react';
+import { DatetimepickerProps } from './types';
+export default class Datetime extends React.Component<DatetimepickerProps> {
+    static defaultProps: {
+        onOpen: () => void;
+        onClose: () => void;
+        onCalendarOpen: () => void;
+        onCalendarClose: () => void;
+        onChange: () => void;
+        onNavigate: () => void;
+        onBeforeNavigate: (next: any) => any;
+        onNavigateBack: () => void;
+        onNavigateForward: () => void;
+        dateFormat: boolean;
+        timeFormat: boolean;
+        utc: boolean;
+        className: string;
+        input: boolean;
+        inputProps: {};
+        timeConstraints: {};
+        isValidDate: () => boolean;
+        strictParsing: boolean;
+        closeOnSelect: boolean;
+        closeOnTab: boolean;
+        closeOnClickOutside: boolean;
+        renderView: (_: any, renderFunc: any) => any;
+    };
+    static moment: typeof moment;
+    constructor(props: any);
+    render(): import("react/jsx-runtime").JSX.Element;
+    renderInput(): import("react/jsx-runtime").JSX.Element | undefined;
+    renderView(): JSX.Element;
+    _renderCalendar: () => import("react/jsx-runtime").JSX.Element;
+    getInitialState(): {
+        open: boolean;
+        currentView: string;
+        viewDate: any;
+        selectedDate: any;
+        inputValue: any;
+    };
+    getInitialViewDate(selectedDate: any): any;
+    getInitialDate(): any;
+    getInitialView(): string;
+    parseDate(date: any, dateFormat: any): any;
+    getClassName(): string;
+    isOpen(): any;
+    getUpdateOn(dateFormat: any): string;
+    getLocaleData(): any;
+    getDateFormat(): any;
+    getTimeFormat(): any;
+    getFormat(type: any): any;
+    _showView: (view: any, date: any) => void;
+    updateTime(op: any, amount: any, type: any, toSelected: any): void;
+    viewToMethod: {
+        days: string;
+        months: string;
+        years: string;
+    };
+    nextView: {
+        days: string;
+        months: string;
+        years: string;
+    };
+    _updateDate: (e: any) => void;
+    _viewNavigate: (modifier: any, unit: any) => void;
+    _setTime: (type: any, value: any) => void;
+    _openCalendar: () => void;
+    _closeCalendar: () => void;
+    _handleClickOutside: () => void;
+    localMoment(date: any, format: any, props: any): any;
+    checkTZ(): void;
+    componentDidUpdate(prevProps: any): void;
+    regenerateDates(): void;
+    getSelectedDate(): any;
+    getInitialInputValue(selectedDate: any): any;
+    getInputValue(): any;
+    /**
+     * Set the date that is currently shown in the calendar.
+     * This is independent from the selected date and it's the one used to navigate through months or days in the calendar.
+     * @param dateType date
+     * @public
+     */
+    setViewDate(date: any): void;
+    /**
+     * Set the view currently shown by the calendar. View modes shipped with react-datetime are 'years', 'months', 'days' and 'time'.
+     * @param TYPES.string mode
+     */
+    navigate(mode: any): void;
+    _onInputFocus: (e: any) => void;
+    _onInputChange: (e: any) => void;
+    _onInputKeyDown: (e: any) => void;
+    _onInputClick: (e: any) => void;
+    callHandler(method: any, e: any): boolean;
+}

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

@@ -0,0 +1,516 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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";
+// @ts-nocheck
+import moment from 'moment';
+import React from 'react';
+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',
+};
+var nofn = function () { };
+var Datetime = /** @class */ (function (_super) {
+    __extends(Datetime, _super);
+    function Datetime(props) {
+        var _this = _super.call(this, props) || this;
+        _this._renderCalendar = function () {
+            var props = _this.props;
+            var state = _this.state;
+            var viewProps = {
+                viewDate: state.viewDate.clone(),
+                label: props.label,
+                secondValue: props.secondValue,
+                selectedDate: _this.getSelectedDate(),
+                isValidDate: props.isValidDate,
+                updateDate: _this._updateDate,
+                navigate: _this._viewNavigate,
+                moment: moment,
+                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
+            switch (state.currentView) {
+                case viewModes.YEARS:
+                    // Used viewProps
+                    // { viewDate, selectedDate, renderYear, isValidDate, navigate, showView, updateDate }
+                    viewProps.renderYear = props.renderYear;
+                    return _jsx(YearsView, __assign({}, viewProps));
+                case viewModes.MONTHS:
+                    // { viewDate, selectedDate, renderMonth, isValidDate, navigate, showView, updateDate }
+                    viewProps.renderMonth = props.renderMonth;
+                    return _jsx(MonthsView, __assign({}, viewProps));
+                case viewModes.DAYS:
+                    // { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat
+                    viewProps.renderDay = props.renderDay;
+                    viewProps.timeFormat = _this.getFormat('time');
+                    viewProps.setTime = _this._setTime;
+                    viewProps.value = _this.props.value;
+                    viewProps.disabled = _this.props.disabled;
+                    return _jsx(DaysView, __assign({}, viewProps));
+                default:
+                    viewProps.renderDay = props.renderDay;
+                    viewProps.timeFormat = _this.getFormat('time');
+                    viewProps.setTime = _this._setTime;
+                    viewProps.value = _this.props.value;
+                    return _jsx(DaysView, __assign({}, viewProps));
+            }
+        };
+        _this._showView = function (view, date) {
+            var d = (date || _this.state.viewDate).clone();
+            var nextView = _this.props.onBeforeNavigate(view, _this.state.currentView, d);
+            if (nextView && _this.state.currentView !== nextView) {
+                _this.props.onNavigate(nextView);
+                _this.setState({ currentView: nextView });
+            }
+        };
+        _this.viewToMethod = { days: 'date', months: 'month', years: 'year' };
+        _this.nextView = { days: 'time', months: 'days', years: 'months' };
+        _this._updateDate = function (e) {
+            var state = _this.state;
+            var currentView = state.currentView;
+            var updateOnView = _this.getUpdateOn(_this.getFormat('date'));
+            var viewDate = _this.state.viewDate.clone();
+            // Set the value into day/month/year
+            viewDate[_this.viewToMethod[currentView]](parseInt(e.target.getAttribute('data-value'), 10));
+            // Need to set month and year will for days view (prev/next month)
+            if (currentView === 'days') {
+                viewDate.month(parseInt(e.target.getAttribute('data-month'), 10));
+                viewDate.year(parseInt(e.target.getAttribute('data-year'), 10));
+            }
+            var update = { viewDate: viewDate };
+            if (currentView === updateOnView) {
+                update.selectedDate = viewDate.clone();
+                update.inputValue = viewDate.format(_this.getFormat('datetime'));
+                if (_this.props.open === undefined && _this.props.input && _this.props.closeOnSelect) {
+                    _this._closeCalendar();
+                }
+                _this.props.onChange(viewDate.clone());
+            }
+            else {
+                _this._showView(_this.nextView[currentView], viewDate);
+            }
+            _this.setState(update);
+        };
+        _this._viewNavigate = function (modifier, unit) {
+            var viewDate = _this.state.viewDate.clone();
+            // Subtracting is just adding negative time
+            viewDate.add(modifier, unit);
+            if (modifier > 0) {
+                _this.props.onNavigateForward(modifier, unit);
+            }
+            else {
+                _this.props.onNavigateBack(-modifier, unit);
+            }
+            _this.setState({ viewDate: viewDate });
+        };
+        _this._setTime = function (type, value) {
+            var date = (_this.getSelectedDate() || _this.state.viewDate).clone();
+            date[type](value);
+            if (!_this.props.value) {
+                _this.setState({
+                    selectedDate: date,
+                    viewDate: date.clone(),
+                    inputValue: date.format(_this.getFormat('datetime')),
+                });
+            }
+            _this.props.onChange(date);
+        };
+        _this._openCalendar = function () {
+            if (_this.isOpen())
+                return;
+            _this.setState({ open: true }, _this.props.onOpen);
+        };
+        _this._closeCalendar = function () {
+            if (!_this.isOpen())
+                return;
+            _this.setState({ open: false }, function () {
+                _this.props.onClose(_this.state.selectedDate || _this.state.inputValue);
+            });
+        };
+        _this._handleClickOutside = function () {
+            var props = _this.props;
+            if (props.input && _this.state.open && props.open === undefined && props.closeOnClickOutside) {
+                _this._closeCalendar();
+            }
+        };
+        _this._onInputFocus = function (e) {
+            if (!_this.callHandler(_this.props.inputProps.onFocus, e))
+                return;
+            _this._openCalendar();
+        };
+        _this._onInputChange = function (e) {
+            if (!_this.callHandler(_this.props.inputProps.onChange, e))
+                return;
+            var value = e.target ? e.target.value : e;
+            var localMoment = _this.localMoment(value, _this.getFormat('datetime'));
+            var update = { inputValue: value };
+            if (localMoment.isValid()) {
+                update.selectedDate = localMoment;
+                update.viewDate = localMoment.clone().startOf('month');
+            }
+            else {
+                update.selectedDate = null;
+            }
+            _this.setState(update, function () {
+                _this.props.onChange(localMoment.isValid() ? localMoment : _this.state.inputValue);
+            });
+        };
+        _this._onInputKeyDown = function (e) {
+            if (!_this.callHandler(_this.props.inputProps.onKeyDown, e))
+                return;
+            if (e.which === 9 && _this.props.closeOnTab) {
+                _this._closeCalendar();
+            }
+        };
+        _this._onInputClick = function (e) {
+            // Focus event should open the calendar, but there is some case where
+            // the input is already focused and the picker is closed, so clicking the input
+            // should open it again see https://github.com/arqex/react-datetime/issues/717
+            if (!_this.callHandler(_this.props.inputProps.onClick, e))
+                return;
+            _this._openCalendar();
+        };
+        _this.state = _this.getInitialState();
+        return _this;
+    }
+    Datetime.prototype.render = function () {
+        return (_jsxs(ClickableWrapper, { className: this.getClassName(), onClickOut: this._handleClickOutside, children: [this.renderInput(), _jsx("div", { className: "rdtPicker", children: this.renderView() })] }));
+    };
+    Datetime.prototype.renderInput = function () {
+        if (!this.props.input)
+            return;
+        var finalInputProps = __assign(__assign({ type: 'text', className: 'form-control', value: this.getInputValue() }, this.props.inputProps), { onFocus: this._onInputFocus, onChange: this._onInputChange, onKeyDown: this._onInputKeyDown, onClick: this._onInputClick });
+        if (this.props.renderInput) {
+            return _jsx("div", { children: this.props.renderInput(finalInputProps, this._openCalendar, this._closeCalendar) });
+        }
+        return _jsx("input", __assign({}, finalInputProps));
+    };
+    Datetime.prototype.renderView = function () {
+        return this.props.renderView(this.state.currentView, this._renderCalendar);
+    };
+    Datetime.prototype.getInitialState = function () {
+        var props = this.props;
+        var inputFormat = this.getFormat('datetime');
+        var selectedDate = this.parseDate(props.value || props.initialValue, inputFormat);
+        this.checkTZ();
+        return {
+            open: !props.input,
+            currentView: props.initialViewMode || this.getInitialView(),
+            viewDate: this.getInitialViewDate(selectedDate),
+            selectedDate: selectedDate && selectedDate.isValid() ? selectedDate : undefined,
+            inputValue: this.getInitialInputValue(selectedDate),
+        };
+    };
+    Datetime.prototype.getInitialViewDate = function (selectedDate) {
+        var propDate = this.props.initialViewDate;
+        var viewDate;
+        if (propDate) {
+            viewDate = this.parseDate(propDate, this.getFormat('datetime'));
+            if (viewDate && viewDate.isValid()) {
+                return viewDate;
+            }
+            else {
+                console.log('The initialViewDated given "' + propDate + '" is not valid. Using current date instead.');
+            }
+        }
+        else if (selectedDate && selectedDate.isValid()) {
+            return selectedDate.clone();
+        }
+        return this.getInitialDate();
+    };
+    Datetime.prototype.getInitialDate = function () {
+        var m = this.localMoment();
+        m.hour(0).minute(0).second(0).millisecond(0);
+        return m;
+    };
+    Datetime.prototype.getInitialView = function () {
+        var dateFormat = this.getFormat('date');
+        return dateFormat ? this.getUpdateOn(dateFormat) : viewModes.TIME;
+    };
+    Datetime.prototype.parseDate = function (date, dateFormat) {
+        var parsedDate;
+        if (date && typeof date === 'string')
+            parsedDate = this.localMoment(date, dateFormat);
+        else if (date)
+            parsedDate = this.localMoment(date);
+        if (parsedDate && !parsedDate.isValid())
+            parsedDate = null;
+        return parsedDate;
+    };
+    Datetime.prototype.getClassName = function () {
+        var cn = 'rdt';
+        var props = this.props;
+        var propCn = props.className;
+        if (Array.isArray(propCn)) {
+            cn += ' ' + propCn.join(' ');
+        }
+        else if (propCn) {
+            cn += ' ' + propCn;
+        }
+        if (!props.input) {
+            cn += ' rdtStatic';
+        }
+        if (this.isOpen()) {
+            cn += ' rdtOpen';
+        }
+        return cn;
+    };
+    Datetime.prototype.isOpen = function () {
+        return !this.props.input || (this.props.open === undefined ? this.state.open : this.props.open);
+    };
+    Datetime.prototype.getUpdateOn = function (dateFormat) {
+        if (this.props.updateOnView) {
+            return this.props.updateOnView;
+        }
+        if (dateFormat.match(/[lLD]/)) {
+            return viewModes.DAYS;
+        }
+        if (dateFormat.indexOf('M') !== -1) {
+            return viewModes.MONTHS;
+        }
+        if (dateFormat.indexOf('Y') !== -1) {
+            return viewModes.YEARS;
+        }
+        return viewModes.DAYS;
+    };
+    Datetime.prototype.getLocaleData = function () {
+        var p = this.props;
+        return this.localMoment(p.value || p.defaultValue || new Date()).localeData();
+    };
+    Datetime.prototype.getDateFormat = function () {
+        var locale = this.getLocaleData();
+        var format = this.props.dateFormat;
+        if (format === true)
+            return locale.longDateFormat('L');
+        if (format)
+            return format;
+        return '';
+    };
+    Datetime.prototype.getTimeFormat = function () {
+        var locale = this.getLocaleData();
+        var format = this.props.timeFormat;
+        if (format === true) {
+            return locale.longDateFormat('LT');
+        }
+        return format || '';
+    };
+    Datetime.prototype.getFormat = function (type) {
+        if (type === 'date') {
+            return this.getDateFormat();
+        }
+        else if (type === 'time') {
+            return this.getTimeFormat();
+        }
+        var dateFormat = this.getDateFormat();
+        var timeFormat = this.getTimeFormat();
+        return dateFormat && timeFormat ? dateFormat + ' ' + timeFormat : dateFormat || timeFormat;
+    };
+    Datetime.prototype.updateTime = function (op, amount, type, toSelected) {
+        var update = {};
+        var date = toSelected ? 'selectedDate' : 'viewDate';
+        update[date] = this.state[date].clone()[op](amount, type);
+        this.setState(update);
+    };
+    Datetime.prototype.localMoment = function (date, format, props) {
+        props = props || this.props;
+        var m = null;
+        if (props.utc) {
+            m = moment.utc(date, format, props.strictParsing);
+        }
+        else if (props.displayTimeZone) {
+            m = moment.tz(date, format, props.displayTimeZone);
+        }
+        else {
+            m = moment(date, format, props.strictParsing);
+        }
+        if (props.locale)
+            m.locale(props.locale);
+        return m;
+    };
+    Datetime.prototype.checkTZ = function () {
+        var displayTimeZone = this.props.displayTimeZone;
+        if (displayTimeZone && !this.tzWarning && !moment.tz) {
+            this.tzWarning = true;
+        }
+    };
+    Datetime.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps === this.props)
+            return;
+        var needsUpdate = false;
+        var thisProps = this.props;
+        ['locale', 'utc', 'displayZone', 'dateFormat', 'timeFormat'].forEach(function (p) {
+            prevProps[p] !== thisProps[p] && (needsUpdate = true);
+        });
+        if (needsUpdate) {
+            this.regenerateDates();
+        }
+        if (thisProps.value && thisProps.value !== prevProps.value) {
+            this.setViewDate(thisProps.value);
+        }
+        this.checkTZ();
+    };
+    Datetime.prototype.regenerateDates = function () {
+        var props = this.props;
+        var viewDate = this.state.viewDate.clone();
+        var selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
+        if (props.locale) {
+            viewDate.locale(props.locale);
+            selectedDate && selectedDate.locale(props.locale);
+        }
+        if (props.utc) {
+            viewDate.utc();
+            selectedDate && selectedDate.utc();
+        }
+        else if (props.displayTimeZone) {
+            viewDate.tz(props.displayTimeZone);
+            selectedDate && selectedDate.tz(props.displayTimeZone);
+        }
+        else {
+            viewDate.locale();
+            selectedDate && selectedDate.locale();
+        }
+        var update = { viewDate: viewDate, selectedDate: selectedDate };
+        if (selectedDate && selectedDate.isValid()) {
+            update.inputValue = selectedDate.format(this.getFormat('datetime'));
+        }
+        this.setState(update);
+    };
+    Datetime.prototype.getSelectedDate = function () {
+        if (this.props.value === undefined)
+            return this.state.selectedDate;
+        var selectedDate = this.parseDate(this.props.value, this.getFormat('datetime'));
+        return selectedDate && selectedDate.isValid() ? selectedDate : false;
+    };
+    Datetime.prototype.getInitialInputValue = function (selectedDate) {
+        var props = this.props;
+        if (props.inputProps.value)
+            return props.inputProps.value;
+        if (selectedDate && selectedDate.isValid())
+            return selectedDate.format(this.getFormat('datetime'));
+        if (props.value && typeof props.value === 'string')
+            return props.value;
+        if (props.initialValue && typeof props.initialValue === 'string')
+            return props.initialValue;
+        return '';
+    };
+    Datetime.prototype.getInputValue = function () {
+        var selectedDate = this.getSelectedDate();
+        return selectedDate ? selectedDate.format(this.getFormat('datetime')) : this.state.inputValue;
+    };
+    /**
+     * Set the date that is currently shown in the calendar.
+     * This is independent from the selected date and it's the one used to navigate through months or days in the calendar.
+     * @param dateType date
+     * @public
+     */
+    Datetime.prototype.setViewDate = function (date) {
+        var logError = function () {
+            return console.log('Invalid date passed to the `setViewDate` method: ' + date);
+        };
+        if (!date)
+            return logError();
+        var viewDate;
+        if (typeof date === 'string') {
+            viewDate = this.localMoment(date, this.getFormat('datetime'));
+        }
+        else {
+            viewDate = this.localMoment(date);
+        }
+        if (!viewDate || !viewDate.isValid())
+            return logError();
+        this.setState({ viewDate: viewDate });
+    };
+    /**
+     * Set the view currently shown by the calendar. View modes shipped with react-datetime are 'years', 'months', 'days' and 'time'.
+     * @param TYPES.string mode
+     */
+    Datetime.prototype.navigate = function (mode) {
+        this._showView(mode);
+    };
+    Datetime.prototype.callHandler = function (method, e) {
+        if (!method)
+            return true;
+        return method(e) !== false;
+    };
+    Datetime.defaultProps = {
+        onOpen: nofn,
+        onClose: nofn,
+        onCalendarOpen: nofn,
+        onCalendarClose: nofn,
+        onChange: nofn,
+        onNavigate: nofn,
+        onBeforeNavigate: function (next) {
+            return next;
+        },
+        onNavigateBack: nofn,
+        onNavigateForward: nofn,
+        dateFormat: true,
+        timeFormat: true,
+        utc: false,
+        className: '',
+        input: true,
+        inputProps: {},
+        timeConstraints: {},
+        isValidDate: function () {
+            return true;
+        },
+        strictParsing: true,
+        closeOnSelect: false,
+        closeOnTab: true,
+        closeOnClickOutside: true,
+        renderView: function (_, renderFunc) { return renderFunc(); },
+    };
+    // Make moment accessible through the Datetime class
+    Datetime.moment = moment;
+    return Datetime;
+}(React.Component));
+export default Datetime;
+var ClickOutBase = /** @class */ (function (_super) {
+    __extends(ClickOutBase, _super);
+    function ClickOutBase() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.container = React.createRef();
+        return _this;
+    }
+    ClickOutBase.prototype.render = function () {
+        return (_jsx("div", { className: this.props.className, ref: this.container, children: this.props.children }));
+    };
+    ClickOutBase.prototype.handleClickOutside = function (e) {
+        this.props.onClickOut(e);
+    };
+    ClickOutBase.prototype.setClickOutsideRef = function () {
+        return this.container.current;
+    };
+    return ClickOutBase;
+}(React.Component));
+var ClickableWrapper = onClickOutside(ClickOutBase);

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

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