@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/components/datepicker/DateRangePicker.js

@@ -1,448 +1,443 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import onClickOutside from 'react-onclickoutside';
-import moment from 'moment';
-import classNames from 'classnames';
-import { isEqual, isNull, isNil } from 'es-toolkit/predicate';
-import DatePicker from "./DatePicker.js";
-import getDropDirection from "../../utils/getDropDirection.js";
-const Placeholder = ({ text }) => _jsx("span", { className: 'placeholder', children: text });
-const propTypes = {
-    startValue: PropTypes.object,
-    endValue: PropTypes.object,
-    defaultStartValue: PropTypes.object,
-    defaultEndValue: PropTypes.object,
-    minValue: PropTypes.object,
-    maxValue: PropTypes.object,
-    onRangeChange: PropTypes.func,
-    locale: PropTypes.string,
-    textDefault: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textToday: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textLastWeek: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textLastMonth: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textLastYear: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textCustom: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textApply: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textCancel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textFrom: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    textTo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    className: PropTypes.string,
-    dropdownClass: PropTypes.string,
-    dropdownMenuClass: PropTypes.string,
-    hasTimePicker: PropTypes.bool,
-    customRangeOnly: PropTypes.bool,
-    customPresets: PropTypes.arrayOf(PropTypes.shape({
-        startValue: PropTypes.object.isRequired,
-        endValue: PropTypes.object.isRequired,
-        text: PropTypes.string.isRequired,
-        onSelect: PropTypes.func,
-    })),
-    dropup: PropTypes.bool,
-    pullRight: PropTypes.bool,
-    autoDropDirection: PropTypes.bool,
-    clearable: PropTypes.bool,
-    onClear: PropTypes.func,
-};
-const defaultProps = {
-    defaultStartValue: moment().startOf('day'),
-    defaultEndValue: moment().endOf('day'),
-    minValue: null,
-    maxValue: null,
-    locale: 'en-GB',
-    textDefault: 'Select date range ...',
-    textToday: 'Today',
-    textLastWeek: 'Last week',
-    textLastMonth: 'Last month',
-    textCustom: 'Custom',
-    textFrom: 'From',
-    textTo: 'To',
-    textApply: 'Apply',
-    textCancel: 'Cancel',
-    dropdownClass: '',
-    dropdownMenuClass: '',
-    hasTimePicker: false,
-    customRangeOnly: false,
-    customPresets: [
-        {
-            text: 'Today',
-            startValue: moment().startOf('day'),
-            endValue: moment().endOf('day'),
-        },
-        {
-            text: 'Last week',
-            startValue: moment().subtract(1, 'weeks').startOf('isoWeek'),
-            endValue: moment().subtract(1, 'weeks').endOf('isoWeek'),
-        },
-        {
-            text: 'Last Month',
-            startValue: moment().subtract(1, 'months').startOf('month'),
-            endValue: moment().subtract(1, 'months').endOf('month'),
-        },
-    ],
-    onRangeChange: () => {
-        // function when range changes
+import { Component as W } from "react";
+import t from "prop-types";
+import b from "react-dom";
+import j from "react-onclickoutside";
+import o from "moment";
+import p from "classnames";
+import { isNil as R, isNull as T, isEqual as _ } from "es-toolkit/predicate";
+import y from "./DatePicker.js";
+import $ from "../../utils/getDropDirection.js";
+const S = ({ text: C }) => /* @__PURE__ */ React.createElement("span", { className: "placeholder" }, C), q = {
+  startValue: t.object,
+  endValue: t.object,
+  defaultStartValue: t.object,
+  defaultEndValue: t.object,
+  minValue: t.object,
+  maxValue: t.object,
+  onRangeChange: t.func,
+  locale: t.string,
+  textDefault: t.oneOfType([t.string, t.node]),
+  textToday: t.oneOfType([t.string, t.node]),
+  textLastWeek: t.oneOfType([t.string, t.node]),
+  textLastMonth: t.oneOfType([t.string, t.node]),
+  textLastYear: t.oneOfType([t.string, t.node]),
+  textCustom: t.oneOfType([t.string, t.node]),
+  textApply: t.oneOfType([t.string, t.node]),
+  textCancel: t.oneOfType([t.string, t.node]),
+  textFrom: t.oneOfType([t.string, t.node]),
+  textTo: t.oneOfType([t.string, t.node]),
+  className: t.string,
+  dropdownClass: t.string,
+  dropdownMenuClass: t.string,
+  hasTimePicker: t.bool,
+  customRangeOnly: t.bool,
+  customPresets: t.arrayOf(
+    t.shape({
+      startValue: t.object.isRequired,
+      endValue: t.object.isRequired,
+      text: t.string.isRequired,
+      onSelect: t.func
+    })
+  ),
+  dropup: t.bool,
+  pullRight: t.bool,
+  autoDropDirection: t.bool,
+  clearable: t.bool,
+  onClear: t.func
+}, w = {
+  defaultStartValue: o().startOf("day"),
+  defaultEndValue: o().endOf("day"),
+  minValue: null,
+  maxValue: null,
+  locale: "en-GB",
+  textDefault: "Select date range ...",
+  textToday: "Today",
+  textLastWeek: "Last week",
+  textLastMonth: "Last month",
+  textCustom: "Custom",
+  textFrom: "From",
+  textTo: "To",
+  textApply: "Apply",
+  textCancel: "Cancel",
+  dropdownClass: "",
+  dropdownMenuClass: "",
+  hasTimePicker: !1,
+  customRangeOnly: !1,
+  customPresets: [
+    {
+      text: "Today",
+      startValue: o().startOf("day"),
+      endValue: o().endOf("day")
     },
-    autoDropDirection: true,
-    dropup: false,
-    pullRight: false,
-    clearable: false,
-    onClear: () => undefined,
-};
-const LOCAL_DATE_FORMAT = 'dd L LT';
-const LOCAL_DATE_FORMAT_NO_TIME = 'dd L';
-const DROPDOWN_WIDTH = 600;
-/**
- * Wrapper component for React-Datetime.
- *
- * @deprecated This will be removed from the UIKIT at some time.
- */
-class DateRangePicker extends Component {
-    constructor(props) {
-        super(props);
-        const customRangeStartValue = props.startValue ? props.startValue : props.defaultStartValue;
-        const customRangeEndValue = props.endValue ? props.endValue : props.defaultEndValue;
-        this.state = {
-            internalStartValue: props.startValue,
-            internalEndValue: props.endValue,
-            isMounted: false,
-            isCustomVisible: props.customRangeOnly,
-            isDropdownOpen: false,
-            customRangeStartValue: moment(customRangeStartValue), // default value for individual datepickers
-            customRangeEndValue: moment(customRangeEndValue), // default value for individual datepickers
-            isStartValid: true,
-            isEndValid: true,
-            dropdownToggleText: _jsx(Placeholder, { text: props.textDefault }),
-            dropup: props.dropup,
-            pullRight: props.pullRight,
-        };
-        this.toggleDropdownOpen = this.toggleDropdownOpen.bind(this);
-        this.handleCustomToggle = this.handleCustomToggle.bind(this);
-        this.handleCustomApply = this.handleCustomApply.bind(this);
-        this.onStartChange = this.onStartChange.bind(this);
-        this.getValidStartDates = this.getValidStartDates.bind(this);
-        this.onEndChange = this.onEndChange.bind(this);
-        this.getValidEndDates = this.getValidEndDates.bind(this);
-        this.handleResetInternalState = this.handleResetInternalState.bind(this);
-    }
-    componentDidMount() {
-        const { startValue, endValue, locale } = this.props;
-        if (!this.state.isMounted) {
-            this.setState({
-                isMounted: true,
-            });
-        }
-        // initial mount value
-        if (startValue && endValue) {
-            this.update(startValue, endValue, locale);
-        }
-    }
-    /**
-     * Responsible for handling start/end values given from outside (controlled component context).
-     * @param {object} nextProps - The next props.
-     * @returns {undefined}
-     */
-    // eslint-disable-next-line camelcase
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        const { startValue, endValue, textDefault, customRangeOnly, locale, defaultStartValue, defaultEndValue } = nextProps;
-        const { internalStartValue, internalEndValue } = this.state;
-        // handle reset:
-        // reset condition 1 is for uncontrolled components,
-        // making sure that when a time is selected, and then the locale changed, that the selection remains
-        const resetCondition1 = isNil(startValue) && isNil(endValue) && isNil(internalStartValue) && isNil(internalEndValue);
-        // reset condition 2 is for controlled components,
-        // when a time is set / defined, and the controlling component wants a hard reset
-        const resetCondition2 = isNull(startValue) && isNull(endValue);
-        // reset to original state
-        if (resetCondition1 || resetCondition2) {
-            this.setState({
-                internalStartValue: undefined,
-                internalEndValue: undefined,
-                customRangeStartValue: defaultStartValue,
-                customRangeEndValue: defaultEndValue,
-                dropdownToggleText: _jsx(Placeholder, { text: textDefault }),
-                isCustomVisible: customRangeOnly,
-                isDropdownOpen: false,
-                isStartValid: true,
-                isEndValid: true,
-                pullRight: nextProps.pullRight,
-                dropup: nextProps.dropup,
-            });
-        }
-        else if (startValue !== this.props.startValue || endValue !== this.props.endValue) {
-            this.update(startValue, endValue, locale);
-        }
-        else {
-            this.update(internalStartValue, internalEndValue, locale);
-        }
-    }
-    /**
-     * Converts start/end values to moments, makes them readable,
-     * crafts a dropdownToggleText and updates state.
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} endValue - the start date (date or moment).
-     * @param {object} locale - the locale to use.
-     * @param {object} extras - additional state, which needs to update.
-     * @param {object} callback - callback to be called, after state has changed.
-     * @returns {undefined}
-     */
-    update(startValue, endValue, locale, extras, callback) {
-        const { hasTimePicker } = this.props;
-        const format = hasTimePicker ? LOCAL_DATE_FORMAT : LOCAL_DATE_FORMAT_NO_TIME;
-        // necessary to set start to startOf / end day to endOf, when selecting "without time"
-        const finalStartValue = hasTimePicker ? moment(startValue) : moment(startValue).startOf('day');
-        const finalEndValue = hasTimePicker ? moment(endValue) : moment(endValue).endOf('day');
-        // composition of dropdownToggleText
-        const startValueText = `${finalStartValue.locale(locale).format(format)}`;
-        const endValueText = `${finalEndValue.locale(locale).format(format)}`;
-        const dropdownToggleText = startValueText === endValueText ? startValueText : `${startValueText} → ${endValueText}`;
-        // set state, and call callback
-        this.setState({
-            internalStartValue: finalStartValue,
-            internalEndValue: finalEndValue,
-            customRangeStartValue: finalStartValue,
-            customRangeEndValue: finalEndValue,
-            dropdownToggleText,
-            startValueText,
-            endValueText,
-            isStartValid: true,
-            isEndValid: !finalEndValue.isBefore(finalStartValue),
-            ...extras,
-        }, () => {
-            callback && callback(finalStartValue, finalEndValue);
-        });
-    }
-    handleResetInternalState(event) {
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        const { textDefault, customRangeOnly, defaultStartValue, defaultEndValue, pullRight, dropup, onClear } = this.props;
-        this.setState({
-            internalStartValue: undefined,
-            internalEndValue: undefined,
-            customRangeStartValue: defaultStartValue,
-            customRangeEndValue: defaultEndValue,
-            dropdownToggleText: _jsx(Placeholder, { text: textDefault }),
-            isCustomVisible: customRangeOnly,
-            isDropdownOpen: false,
-            isStartValid: true,
-            isEndValid: true,
-            startValueText: null,
-            endValueText: null,
-            pullRight,
-            dropup,
-        });
-        onClear();
-    }
-    /**
-     * Gets called by wrapper component "onClickOutside".
-     * Responsible for closing the dropdown when a click occured outside.
-     * @returns {undefined}
-     */
-    handleClickOutside() {
-        if (this.state.isMounted) {
-            this.setState({
-                isDropdownOpen: false,
-            });
-        }
-    }
-    /**
-     * Toggles dropdown open status and visibility of custom range area.
-     * @param {object} event - mouse event on toggle dropdown
-     * @returns {undefined}
-     */
-    toggleDropdownOpen(event) {
-        const toggleNode = ReactDOM.findDOMNode(this.refDropdownToggle);
-        const menuNode = ReactDOM.findDOMNode(this.refDropdownMenu);
-        const dropDirection = this.isAutoDropActive() && !this.state.isDropdownOpen ? getDropDirection(toggleNode, menuNode) : {};
-        const left = event.currentTarget.getBoundingClientRect().left;
-        this.setState(prevState => ({
-            isDropdownOpen: !prevState.isDropdownOpen,
-            isCustomVisible: this.props.customRangeOnly,
-            ...dropDirection,
-            pullRight: left + DROPDOWN_WIDTH > document.body.clientWidth,
-        }));
-    }
-    isAutoDropActive() {
-        return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
-    }
-    /**
-     * Only gets called on manual change of datePicker (user interaction).
-     * Has influence the validity of the end date.
-     *
-     * Important to note that the start date is not limited,
-     * whereas the end date is limited by the start date (see 'getValidEndDates').
-     *
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} isValidDate - if the date is valid or not.
-     * @returns {undefined}
-     */
-    onStartChange(startValue, isValidDate) {
-        const newState = { isStartValid: false };
-        const { hasTimePicker, minValue, maxValue } = this.props;
-        const { customRangeEndValue } = this.state;
-        if (moment.isMoment(startValue)) {
-            // necessary to set start to startOf / end day to endOf, when selecting "without time"
-            const finalStartValue = hasTimePicker ? startValue : moment(startValue).startOf('day');
-            // check validity of input (min/max)
-            const passesMin = minValue ? finalStartValue.isSameOrAfter(moment(minValue)) : true;
-            const passesMax = maxValue ? finalStartValue.isSameOrBefore(moment(maxValue)) : true;
-            const isValidInput = isValidDate && passesMin && passesMax;
-            newState.isStartValid = isValidInput;
-            if (isValidDate) {
-                newState.customRangeStartValue = finalStartValue;
-                newState.isEndValid = !customRangeEndValue.isBefore(finalStartValue);
-            }
-        }
-        this.setState(newState);
-    }
-    /**
-     * Only gets called on manual change of datePicker (user interaction)
-     * @param {object} endValue - the start date (date or moment).
-     * @param {object} isValidDate - if the date is valid or not.
-     * @returns {undefined}
-     */
-    onEndChange(endValue, isValidDate) {
-        const newState = { isEndValid: false };
-        const { hasTimePicker, minValue, maxValue } = this.props;
-        const { customRangeStartValue } = this.state;
-        // let isValidInput = false;
-        if (moment.isMoment(endValue)) {
-            // necessary to set end of seconds and milliseconds for every end value
-            const correctedEndValue = isValidDate ? endValue.endOf('minute') : endValue;
-            // necessary to set start to startOf / end day to endOf, when selecting "without time"
-            const finalEndValue = hasTimePicker ? correctedEndValue : moment(endValue).endOf('day');
-            // check validity of input (min/max)
-            const passesMin = minValue ? finalEndValue.isSameOrAfter(moment(minValue)) : true;
-            const passesMax = maxValue ? finalEndValue.isSameOrBefore(moment(maxValue)) : true;
-            const isValidInput = isValidDate && passesMin && passesMax && finalEndValue.isAfter(customRangeStartValue);
-            newState.isEndValid = isValidInput;
-            if (isValidDate) {
-                newState.customRangeEndValue = finalEndValue;
-            }
-        }
-        this.setState(newState);
-    }
-    /**
-     * Callback method for DatePicker to limit selection in DatePicker.
-     * @param {object} current - Current date in the loop.
-     * @returns {undefined}
-     */
-    getValidStartDates(current) {
-        const { minValue, maxValue } = this.props;
-        const customRangeEndValue = moment(this.state.customRangeEndValue);
-        if (current.isSame(customRangeEndValue, 'day')) {
-            return true;
-        }
-        const passesMin = minValue ? current.isSameOrAfter(moment(minValue)) : true;
-        const passesMax = maxValue ? current.isSameOrBefore(moment(maxValue)) : true;
-        return passesMin && passesMax;
+    {
+      text: "Last week",
+      startValue: o().subtract(1, "weeks").startOf("isoWeek"),
+      endValue: o().subtract(1, "weeks").endOf("isoWeek")
+    },
+    {
+      text: "Last Month",
+      startValue: o().subtract(1, "months").startOf("month"),
+      endValue: o().subtract(1, "months").endOf("month")
     }
-    /**
-     * Callback method for DatePicker to limit selection in DatePicker.
-     * End date has to be after start date.
-     * @param {object} current - Current date in the loop.
-     * @returns {undefined}
-     */
-    getValidEndDates(current) {
-        const { minValue, maxValue } = this.props;
-        const customRangeStartValue = moment(this.state.customRangeStartValue);
-        if (current.isSame(customRangeStartValue, 'day')) {
-            return true;
-        }
-        const passesMin = minValue ? current.isSameOrAfter(moment(minValue)) : true;
-        const passesMax = maxValue ? current.isSameOrBefore(moment(maxValue)) : true;
-        const isAfterStart = current.isAfter(customRangeStartValue);
-        return passesMin && passesMax && isAfterStart;
+  ],
+  onRangeChange: () => {
+  },
+  autoDropDirection: !0,
+  dropup: !1,
+  pullRight: !1,
+  clearable: !1,
+  onClear: () => {
+  }
+}, G = "dd L LT", H = "dd L", U = 600;
+class E extends W {
+  constructor(e) {
+    super(e);
+    const a = e.startValue ? e.startValue : e.defaultStartValue, s = e.endValue ? e.endValue : e.defaultEndValue;
+    this.state = {
+      internalStartValue: e.startValue,
+      internalEndValue: e.endValue,
+      isMounted: !1,
+      isCustomVisible: e.customRangeOnly,
+      isDropdownOpen: !1,
+      customRangeStartValue: o(a),
+      // default value for individual datepickers
+      customRangeEndValue: o(s),
+      // default value for individual datepickers
+      isStartValid: !0,
+      isEndValid: !0,
+      dropdownToggleText: /* @__PURE__ */ React.createElement(S, { text: e.textDefault }),
+      dropup: e.dropup,
+      pullRight: e.pullRight
+    }, this.toggleDropdownOpen = this.toggleDropdownOpen.bind(this), this.handleCustomToggle = this.handleCustomToggle.bind(this), this.handleCustomApply = this.handleCustomApply.bind(this), this.onStartChange = this.onStartChange.bind(this), this.getValidStartDates = this.getValidStartDates.bind(this), this.onEndChange = this.onEndChange.bind(this), this.getValidEndDates = this.getValidEndDates.bind(this), this.handleResetInternalState = this.handleResetInternalState.bind(this);
+  }
+  componentDidMount() {
+    const { startValue: e, endValue: a, locale: s } = this.props;
+    this.state.isMounted || this.setState({
+      isMounted: !0
+    }), e && a && this.update(e, a, s);
+  }
+  /**
+   * Responsible for handling start/end values given from outside (controlled component context).
+   * @param {object} nextProps - The next props.
+   * @returns {undefined}
+   */
+  // eslint-disable-next-line camelcase
+  UNSAFE_componentWillReceiveProps(e) {
+    const { startValue: a, endValue: s, textDefault: i, customRangeOnly: n, locale: l, defaultStartValue: d, defaultEndValue: r } = e, { internalStartValue: u, internalEndValue: c } = this.state, m = R(a) && R(s) && R(u) && R(c), g = T(a) && T(s);
+    m || g ? this.setState({
+      internalStartValue: void 0,
+      internalEndValue: void 0,
+      customRangeStartValue: d,
+      customRangeEndValue: r,
+      dropdownToggleText: /* @__PURE__ */ React.createElement(S, { text: i }),
+      isCustomVisible: n,
+      isDropdownOpen: !1,
+      isStartValid: !0,
+      isEndValid: !0,
+      pullRight: e.pullRight,
+      dropup: e.dropup
+    }) : a !== this.props.startValue || s !== this.props.endValue ? this.update(a, s, l) : this.update(u, c, l);
+  }
+  /**
+   * Converts start/end values to moments, makes them readable,
+   * crafts a dropdownToggleText and updates state.
+   * @param {object} startValue - the start date (date or moment).
+   * @param {object} endValue - the start date (date or moment).
+   * @param {object} locale - the locale to use.
+   * @param {object} extras - additional state, which needs to update.
+   * @param {object} callback - callback to be called, after state has changed.
+   * @returns {undefined}
+   */
+  update(e, a, s, i, n) {
+    const { hasTimePicker: l } = this.props, d = l ? G : H, r = l ? o(e) : o(e).startOf("day"), u = l ? o(a) : o(a).endOf("day"), c = `${r.locale(s).format(d)}`, m = `${u.locale(s).format(d)}`, g = c === m ? c : `${c} → ${m}`;
+    this.setState(
+      {
+        internalStartValue: r,
+        internalEndValue: u,
+        customRangeStartValue: r,
+        customRangeEndValue: u,
+        dropdownToggleText: g,
+        startValueText: c,
+        endValueText: m,
+        isStartValid: !0,
+        isEndValid: !u.isBefore(r),
+        ...i
+      },
+      () => {
+        n && n(r, u);
+      }
+    );
+  }
+  handleResetInternalState(e) {
+    e && (e.preventDefault(), e.stopPropagation());
+    const { textDefault: a, customRangeOnly: s, defaultStartValue: i, defaultEndValue: n, pullRight: l, dropup: d, onClear: r } = this.props;
+    this.setState({
+      internalStartValue: void 0,
+      internalEndValue: void 0,
+      customRangeStartValue: i,
+      customRangeEndValue: n,
+      dropdownToggleText: /* @__PURE__ */ React.createElement(S, { text: a }),
+      isCustomVisible: s,
+      isDropdownOpen: !1,
+      isStartValid: !0,
+      isEndValid: !0,
+      startValueText: null,
+      endValueText: null,
+      pullRight: l,
+      dropup: d
+    }), r();
+  }
+  /**
+   * Gets called by wrapper component "onClickOutside".
+   * Responsible for closing the dropdown when a click occured outside.
+   * @returns {undefined}
+   */
+  handleClickOutside() {
+    this.state.isMounted && this.setState({
+      isDropdownOpen: !1
+    });
+  }
+  /**
+   * Toggles dropdown open status and visibility of custom range area.
+   * @param {object} event - mouse event on toggle dropdown
+   * @returns {undefined}
+   */
+  toggleDropdownOpen(e) {
+    const a = b.findDOMNode(this.refDropdownToggle), s = b.findDOMNode(this.refDropdownMenu), i = this.isAutoDropActive() && !this.state.isDropdownOpen ? $(a, s) : {}, n = e.currentTarget.getBoundingClientRect().left;
+    this.setState((l) => ({
+      isDropdownOpen: !l.isDropdownOpen,
+      isCustomVisible: this.props.customRangeOnly,
+      ...i,
+      pullRight: n + U > document.body.clientWidth
+    }));
+  }
+  isAutoDropActive() {
+    return !(!this.props.autoDropDirection || this.props.dropup || this.props.pullRight);
+  }
+  /**
+   * Only gets called on manual change of datePicker (user interaction).
+   * Has influence the validity of the end date.
+   *
+   * Important to note that the start date is not limited,
+   * whereas the end date is limited by the start date (see 'getValidEndDates').
+   *
+   * @param {object} startValue - the start date (date or moment).
+   * @param {object} isValidDate - if the date is valid or not.
+   * @returns {undefined}
+   */
+  onStartChange(e, a) {
+    const s = { isStartValid: !1 }, { hasTimePicker: i, minValue: n, maxValue: l } = this.props, { customRangeEndValue: d } = this.state;
+    if (o.isMoment(e)) {
+      const r = i ? e : o(e).startOf("day"), u = n ? r.isSameOrAfter(o(n)) : !0, c = l ? r.isSameOrBefore(o(l)) : !0, m = a && u && c;
+      s.isStartValid = m, a && (s.customRangeStartValue = r, s.isEndValid = !d.isBefore(r));
     }
-    /**
-     * Gets called when "custom ..." has been selected.
-     * @returns {undefined}
-     */
-    handleCustomToggle() {
-        this.setState(prevState => {
-            return {
-                isCustomVisible: !prevState.isCustomVisible,
-            };
-        });
+    this.setState(s);
+  }
+  /**
+   * Only gets called on manual change of datePicker (user interaction)
+   * @param {object} endValue - the start date (date or moment).
+   * @param {object} isValidDate - if the date is valid or not.
+   * @returns {undefined}
+   */
+  onEndChange(e, a) {
+    const s = { isEndValid: !1 }, { hasTimePicker: i, minValue: n, maxValue: l } = this.props, { customRangeStartValue: d } = this.state;
+    if (o.isMoment(e)) {
+      const r = a ? e.endOf("minute") : e, u = i ? r : o(e).endOf("day"), c = n ? u.isSameOrAfter(o(n)) : !0, m = l ? u.isSameOrBefore(o(l)) : !0, g = a && c && m && u.isAfter(d);
+      s.isEndValid = g, a && (s.customRangeEndValue = u);
     }
-    handleCustomPresetSelect(preset) {
-        if (typeof preset.onSelect === 'function') {
-            preset.onSelect();
-        }
-        this.handleSelect(preset.startValue, preset.endValue);
+    this.setState(s);
+  }
+  /**
+   * Callback method for DatePicker to limit selection in DatePicker.
+   * @param {object} current - Current date in the loop.
+   * @returns {undefined}
+   */
+  getValidStartDates(e) {
+    const { minValue: a, maxValue: s } = this.props, i = o(this.state.customRangeEndValue);
+    if (e.isSame(i, "day"))
+      return !0;
+    const n = a ? e.isSameOrAfter(o(a)) : !0, l = s ? e.isSameOrBefore(o(s)) : !0;
+    return n && l;
+  }
+  /**
+   * Callback method for DatePicker to limit selection in DatePicker.
+   * End date has to be after start date.
+   * @param {object} current - Current date in the loop.
+   * @returns {undefined}
+   */
+  getValidEndDates(e) {
+    const { minValue: a, maxValue: s } = this.props, i = o(this.state.customRangeStartValue);
+    if (e.isSame(i, "day"))
+      return !0;
+    const n = a ? e.isSameOrAfter(o(a)) : !0, l = s ? e.isSameOrBefore(o(s)) : !0, d = e.isAfter(i);
+    return n && l && d;
+  }
+  /**
+   * Gets called when "custom ..." has been selected.
+   * @returns {undefined}
+   */
+  handleCustomToggle() {
+    this.setState((e) => ({
+      isCustomVisible: !e.isCustomVisible
+    }));
+  }
+  handleCustomPresetSelect(e) {
+    typeof e.onSelect == "function" && e.onSelect(), this.handleSelect(e.startValue, e.endValue);
+  }
+  /**
+   * Gets called when a preset has been selected.
+   * @param {object} startValue - the start date (date or moment).
+   * @param {object} endValue - the start date (date or moment).
+   * @returns {undefined}
+   */
+  handleSelect(e, a) {
+    const { onRangeChange: s, locale: i } = this.props, n = { isDropdownOpen: !1 };
+    this.update(e, a, i, n, s);
+  }
+  /**
+   * Gets called user clicks the apply button.
+   * @returns {undefined}
+   */
+  handleCustomApply() {
+    const { customRangeStartValue: e, customRangeEndValue: a, isStartValid: s, isEndValid: i } = this.state, { onRangeChange: n, locale: l } = this.props;
+    if (s && i) {
+      const d = { isDropdownOpen: !1 };
+      this.update(e, a, l, d, n);
     }
-    /**
-     * Gets called when a preset has been selected.
-     * @param {object} startValue - the start date (date or moment).
-     * @param {object} endValue - the start date (date or moment).
-     * @returns {undefined}
-     */
-    handleSelect(startValue, endValue) {
-        const { onRangeChange, locale } = this.props;
-        const extras = { isDropdownOpen: false };
-        this.update(startValue, endValue, locale, extras, onRangeChange);
-    }
-    /**
-     * Gets called user clicks the apply button.
-     * @returns {undefined}
-     */
-    handleCustomApply() {
-        const { customRangeStartValue, customRangeEndValue, isStartValid, isEndValid } = this.state;
-        const { onRangeChange, locale } = this.props;
-        if (isStartValid && isEndValid) {
-            const extras = { isDropdownOpen: false };
-            this.update(customRangeStartValue, customRangeEndValue, locale, extras, onRangeChange);
+  }
+  getDropdownToggle(e) {
+    const { children: a, clearable: s } = this.props, { startValueText: i, endValueText: n } = this.state, l = s && e.type !== S, d = p(l && "withClearButton"), r = a && typeof a == "function";
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        type: "button",
+        className: "DateRangePickerToggle form-control dropdown-toggle text-left",
+        "aria-haspopup": "true",
+        "aria-expanded": "true",
+        onClick: this.toggleDropdownOpen,
+        ref: (u) => this.refDropdownToggle = u
+      },
+      r ? this.props.children(i, n) : /* @__PURE__ */ React.createElement("span", { className: d }, e),
+      l && this.getClearButton(),
+      /* @__PURE__ */ React.createElement("span", { className: "caret" })
+    );
+  }
+  getClearButton() {
+    return /* @__PURE__ */ React.createElement("span", { className: "clearButton", onClick: this.handleResetInternalState }, /* @__PURE__ */ React.createElement("span", { className: "clearButtonIcon rioglyph rioglyph-remove-sign" }));
+  }
+  getCustomPanelToggle(e, a) {
+    return /* @__PURE__ */ React.createElement("li", { className: p("custom-panel-toggle", e && "hidden") }, /* @__PURE__ */ React.createElement("a", { role: "button", onClick: this.handleCustomToggle }, a, " ..."));
+  }
+  getCustomPanelButtons(e, a, s, i, n) {
+    return /* @__PURE__ */ React.createElement("li", { className: p("custom-panel-buttons", "margin-20", !e && "hidden") }, /* @__PURE__ */ React.createElement("div", { className: "btn-toolbar" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        disabled: !a || !s,
+        onClick: this.handleCustomApply,
+        className: "btn btn-primary pull-right"
+      },
+      i
+    ), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: this.toggleDropdownOpen, className: "btn btn-default pull-right" }, n)));
+  }
+  // eslint-disable-next-line complexity
+  render() {
+    const {
+      locale: e,
+      textCustom: a,
+      textApply: s,
+      textCancel: i,
+      textFrom: n,
+      textTo: l,
+      textToday: d,
+      textLastWeek: r,
+      textLastMonth: u,
+      className: c,
+      clearable: m,
+      dropdownClass: g,
+      dropdownMenuClass: N,
+      customPresets: f,
+      hasTimePicker: D
+    } = this.props, {
+      customRangeStartValue: k,
+      customRangeEndValue: A,
+      isStartValid: O,
+      isEndValid: x,
+      isCustomVisible: V,
+      isDropdownOpen: M,
+      dropdownToggleText: P
+    } = this.state, v = this.isAutoDropActive() ? this.state.pullRight : this.props.pullRight, L = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
+    f && _(f, w.customPresets) && (f[0].text = d, f[1].text = r, f[2].text = u);
+    const B = p("DateRangePicker", c && c), F = p(
+      "select",
+      "dropdown",
+      g,
+      M && "open",
+      L && "dropup"
+    );
+    return /* @__PURE__ */ React.createElement("div", { className: B }, /* @__PURE__ */ React.createElement("div", { className: F }, this.getDropdownToggle(P, m), /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        className: p("dropdown-menu", v && "pull-right", N),
+        ref: (h) => this.refDropdownMenu = h
+      },
+      f.map((h, I) => /* @__PURE__ */ React.createElement(
+        "li",
+        {
+          key: `preset-${I}`,
+          title: h.disabled && h.disabledText || null,
+          className: p(h.disabled && "disabled")
+        },
+        /* @__PURE__ */ React.createElement(
+          "a",
+          {
+            role: "button",
+            className: p(V && "hidden"),
+            onClick: h.disabled ? void 0 : this.handleCustomPresetSelect.bind(this, h)
+          },
+          h.text
+        )
+      )),
+      /* @__PURE__ */ React.createElement("li", { role: "separator", className: p("divider", V && "hidden") }),
+      this.getCustomPanelToggle(V, a),
+      /* @__PURE__ */ React.createElement("li", { className: p("custom-panel", !V && "hidden") }, /* @__PURE__ */ React.createElement("div", { className: "row" }, /* @__PURE__ */ React.createElement("div", { className: "col-sm-6" }, /* @__PURE__ */ React.createElement("label", null, n), /* @__PURE__ */ React.createElement(
+        y,
+        {
+          locale: e,
+          open: !0,
+          autoDropDirection: !1,
+          dateFormat: !0,
+          timeFormat: D,
+          initialValue: k,
+          onChange: this.onStartChange,
+          closeOnSelect: !0,
+          isValidDate: this.getValidStartDates,
+          className: p("DatePicker", !O && "has-error")
         }
-    }
-    getDropdownToggle(dropdownToggleText) {
-        const { children, clearable } = this.props;
-        const { startValueText, endValueText } = this.state;
-        const isClearable = clearable && dropdownToggleText.type !== Placeholder;
-        const labelClassNames = classNames(isClearable && 'withClearButton');
-        const isRenderCallback = children && typeof children === 'function';
-        // Note: due to issues with nested events in Firefox (for toggle and inside the clear)
-        // the toggle element must not be a <button> but a div.
-        return (_jsxs("div", { type: 'button', className: 'DateRangePickerToggle form-control dropdown-toggle text-left', "aria-haspopup": 'true', "aria-expanded": 'true', onClick: this.toggleDropdownOpen, ref: node => (this.refDropdownToggle = node), children: [isRenderCallback ? (this.props.children(startValueText, endValueText)) : (_jsx("span", { className: labelClassNames, children: dropdownToggleText })), isClearable && this.getClearButton(), _jsx("span", { className: 'caret' })] }));
-    }
-    getClearButton() {
-        return (_jsx("span", { className: 'clearButton', onClick: this.handleResetInternalState, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }));
-    }
-    getCustomPanelToggle(isCustomVisible, textCustom) {
-        return (_jsx("li", { className: classNames('custom-panel-toggle', isCustomVisible && 'hidden'), children: _jsxs("a", { role: 'button', onClick: this.handleCustomToggle, children: [textCustom, " ..."] }) }));
-    }
-    getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel) {
-        return (_jsx("li", { className: classNames('custom-panel-buttons', 'margin-20', !isCustomVisible && 'hidden'), children: _jsxs("div", { className: 'btn-toolbar', children: [_jsx("button", { type: 'button', disabled: !isStartValid || !isEndValid, onClick: this.handleCustomApply, className: 'btn btn-primary pull-right', children: textApply }), _jsx("button", { type: 'button', onClick: this.toggleDropdownOpen, className: 'btn btn-default pull-right', children: textCancel })] }) }));
-    }
-    // eslint-disable-next-line complexity
-    render() {
-        const { locale, textCustom, textApply, textCancel, textFrom, textTo, textToday, textLastWeek, textLastMonth, className, clearable, dropdownClass, dropdownMenuClass, customPresets, hasTimePicker, } = this.props;
-        const { customRangeStartValue, customRangeEndValue, isStartValid, isEndValid, isCustomVisible, isDropdownOpen, dropdownToggleText, } = this.state;
-        const pullRight = this.isAutoDropActive() ? this.state.pullRight : this.props.pullRight;
-        const dropup = this.isAutoDropActive() ? this.state.dropup : this.props.dropup;
-        if (customPresets && isEqual(customPresets, defaultProps.customPresets)) {
-            // support backward compatibility to override default drop down text values
-            customPresets[0].text = textToday;
-            customPresets[1].text = textLastWeek;
-            customPresets[2].text = textLastMonth;
+      )), /* @__PURE__ */ React.createElement("div", { className: "col-sm-6" }, /* @__PURE__ */ React.createElement("label", null, l), /* @__PURE__ */ React.createElement(
+        y,
+        {
+          locale: e,
+          open: !0,
+          autoDropDirection: !1,
+          dateFormat: !0,
+          timeFormat: D,
+          initialValue: A,
+          onChange: this.onEndChange,
+          closeOnSelect: !0,
+          isValidDate: this.getValidEndDates,
+          className: p("DatePicker", !x && "has-error")
         }
-        const classes = classNames('DateRangePicker', className && className);
-        const dropDownClassNames = classNames('select', 'dropdown', dropdownClass, isDropdownOpen && 'open', dropup && 'dropup');
-        return (_jsx("div", { className: classes, children: _jsxs("div", { className: dropDownClassNames, children: [this.getDropdownToggle(dropdownToggleText, clearable), _jsxs("ul", { className: classNames('dropdown-menu', pullRight && 'pull-right', dropdownMenuClass), ref: node => (this.refDropdownMenu = node), children: [customPresets.map((preset, i) => {
-                                return (_jsx("li", { title: (preset.disabled && preset.disabledText) || null, className: classNames(preset.disabled && 'disabled'), children: _jsx("a", { role: 'button', className: classNames(isCustomVisible && 'hidden'), onClick: !preset.disabled
-                                            ? this.handleCustomPresetSelect.bind(this, preset)
-                                            : undefined, children: preset.text }) }, `preset-${i}`));
-                            }), _jsx("li", { role: 'separator', className: classNames('divider', isCustomVisible && 'hidden') }), this.getCustomPanelToggle(isCustomVisible, textCustom), _jsx("li", { className: classNames('custom-panel', !isCustomVisible && 'hidden'), children: _jsxs("div", { className: 'row', children: [_jsxs("div", { className: 'col-sm-6', children: [_jsx("label", { children: textFrom }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeStartValue, onChange: this.onStartChange, closeOnSelect: true, isValidDate: this.getValidStartDates, className: classNames('DatePicker', !isStartValid && 'has-error') })] }), _jsxs("div", { className: 'col-sm-6', children: [_jsx("label", { children: textTo }), _jsx(DatePicker, { locale: locale, open: true, autoDropDirection: false, dateFormat: true, timeFormat: hasTimePicker, initialValue: customRangeEndValue, onChange: this.onEndChange, closeOnSelect: true, isValidDate: this.getValidEndDates, className: classNames('DatePicker', !isEndValid && 'has-error') })] })] }) }), this.getCustomPanelButtons(isCustomVisible, isStartValid, isEndValid, textApply, textCancel)] })] }) }));
-    }
+      )))),
+      this.getCustomPanelButtons(V, O, x, s, i)
+    )));
+  }
 }
-DateRangePicker.propTypes = propTypes;
-DateRangePicker.defaultProps = defaultProps;
-/**
- * Wrapper component for React-Datetime.
- *
- * @deprecated This will be removed from the UIKIT at some time.
- */
-export default onClickOutside(DateRangePicker);
-export { DateRangePicker as DateRangePickerPure };
+E.propTypes = q;
+E.defaultProps = w;
+const ae = j(E);
+export {
+  E as DateRangePickerPure,
+  ae as default
+};
+//# sourceMappingURL=DateRangePicker.js.map