@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

package/DatePickerInput/index.js

@@ -1,883 +0,0 @@
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { d as dayjsWithPlugins, a as dayjs } from '../dateValidation-67caec66.js';
-import { c as classnames } from '../index-031ff73c.js';
-import { g as popoverConfig, i as inputConfig } from '../configs-00612ce0.js';
-import { n as noop, s as stopEvent } from '../index-5f37f281.js';
-import useClick from '../hooks/useClick.js';
-import useKeyDown from '../hooks/useKeyDown.js';
-import useDeviceType from '../hooks/useDeviceType.js';
-import { P as PopoverV2 } from '../index-73aaa093.js';
-import ExtendedInput from '../ExtendedInput/index.js';
-import DatePicker from '../DatePicker/index.js';
-import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../index-122432cd.js';
-import '../hooks/useClickOutside.js';
-import '../Scrollbar/index.js';
-import '../GeneUIProvider/index.js';
-import '../debounce-4419bc2f.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../Icon/index.js';
-import '../SuggestionList/index.js';
-import '../config-1053d64d.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-65217440.js';
-import '../tslib.es6-f211516f.js';
-import '../guid-8ddf77b3.js';
-import '../Button/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-holder{width:100%}[data-gene-ui-version=\"2.16.3\"] .md-range-title{font:600 1.6rem/2.2rem var(--font-family);margin:0 0 1.5rem;padding:0 1rem}[data-gene-ui-version=\"2.16.3\"] .default-cursor{cursor:default!important}[data-gene-ui-version=\"2.16.3\"] .text-cursor{cursor:text}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker{grid-column-gap:2rem;grid-row-gap:2rem;display:grid;grid-template-areas:\"m-start-date m-end-date\";grid-template-columns:repeat(2,calc(50% - 1rem));width:100%}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker.with-time{grid-template-areas:\"m-start-date m-start-time\" \"m-end-date m-end-time\";grid-template-columns:calc(55% - 1rem) calc(45% - 1rem)}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker .m-start-date{grid-area:m-start-date}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker .m-end-date{grid-area:m-end-date}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker .m-start-time{grid-area:m-start-time}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker .m-end-time{grid-area:m-end-time}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker i[class*=calendar],[data-gene-ui-version=\"2.16.3\"] .mobile-single-date-picker i[class*=calendar]{order:-2;pointer-events:none}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker i[class*=clear],[data-gene-ui-version=\"2.16.3\"] .mobile-single-date-picker i[class*=clear]{order:-1}[data-gene-ui-version=\"2.16.3\"] .date-input .input-structure>label{height:var(--input-element-height)}[data-gene-ui-version=\"2.16.3\"] .date-input .input-structure>.icon+label input{padding-inline:2rem 4.4rem}[data-gene-ui-version=\"2.16.3\"] .date-input .input-structure .input-element-relative{left:0;position:absolute;width:100%}[data-gene-ui-version=\"2.16.3\"] .date-input .input-structure .input-element-relative>input{padding-inline:2rem 1.5rem;padding-inline-end:6.4rem}[data-gene-ui-version=\"2.16.3\"] .date-input .input-structure .input-element-relative>.read-only{padding-inline:2rem 1.5rem}[data-gene-ui-version=\"2.16.3\"] .date-input i[class*=calendar]{order:-2}[data-gene-ui-version=\"2.16.3\"] .date-input i[class*=clear]{order:-1}[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker .bc-icon-calendar,[data-gene-ui-version=\"2.16.3\"] .mobile-date-ranges-picker .bc-icon.clock,[data-gene-ui-version=\"2.16.3\"] .mobile-single-date-picker .bc-icon-calendar,[data-gene-ui-version=\"2.16.3\"] .mobile-single-date-picker .bc-icon.clock{pointer-events:none}";
-styleInject(css_248z);
-
-const getLastValidValue$1 = (date, validFormat) => date && date.isValid() ? date.format(validFormat) : '';
-function DatePickerInput(_ref) {
-  let {
-    min,
-    max,
-    size,
-    title,
-    value,
-    onBlur,
-    onFocus,
-    isValid,
-    required,
-    onChange,
-    readOnly,
-    disabled,
-    className,
-    appearance,
-    pickerProps,
-    flexibility,
-    popoverAlign,
-    withoutPicker,
-    withTime,
-    format: dateFormat,
-    placeholder: inputPlaceholder,
-    markedDate,
-    frozenDateRange,
-    clearable,
-    ...restProps
-  } = _ref;
-  const {
-    isMobile
-  } = useDeviceType();
-  const maxDate = max && dayjsWithPlugins(max);
-  const minDate = min && dayjsWithPlugins(min);
-  const mobileFormat = useMemo(() => withTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD', [withTime]);
-  const defaultFormat = useMemo(() => withTime ? 'DD/MM/YYYY HH:mm:ss' : 'DD/MM/YYYY', [withTime]);
-  const format = useMemo(() => dateFormat || defaultFormat, [dateFormat, defaultFormat]);
-  const placeholder = useMemo(() => inputPlaceholder || format, [inputPlaceholder, format]);
-  const validFormat = useMemo(() => isMobile ? mobileFormat : format, [isMobile, mobileFormat, format]);
-  const [date, setDate] = useState('');
-  const [inputValue, setInputValue] = useState('');
-  const [popoverOpened, setPopoverState] = useState(false);
-  const setPickerRef = useClick(e => {
-    e.preventDefault();
-  });
-  const inputRef = useRef();
-  const handleChange = useCallback(value => {
-    const date = dayjsWithPlugins(value);
-    if (!withTime) {
-      setPopoverState(false);
-      inputRef.current.blur();
-    }
-    setDate(date);
-    onChange(date.toDate());
-    setInputValue(date.format(validFormat));
-  }, [validFormat, withTime, onChange]);
-  const handleInputChange = useCallback(e => {
-    const {
-      value
-    } = e.target;
-    const isPM = dayjs(value.toLocaleLowerCase().replace('am', '').replace('pm', '')).hour() >= 12;
-    const customValue = isPM ? value.replace('am', 'PM') : value.replace('pm', 'AM');
-    let isFrozenDate = false;
-    const date = dayjsWithPlugins(customValue, validFormat);
-    const isValid = dayjs(date).format(validFormat) === customValue;
-    if (frozenDateRange.length && Array.isArray(frozenDateRange)) {
-      const format = 'YYYY/MM/DD';
-      isFrozenDate = !!frozenDateRange.find(_ref2 => {
-        let {
-          from,
-          to
-        } = _ref2;
-        return from && to && date.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]');
-      });
-    }
-    if (!isFrozenDate) {
-      if (isValid) {
-        setDate(date);
-        onChange(date.toDate());
-      } else if (!required && value === '') {
-        setDate('');
-        onChange(null);
-      }
-    }
-    setInputValue(value);
-  }, [frozenDateRange, validFormat, onChange, required]);
-  const checkDateInerval = useCallback(() => {
-    let value = getLastValidValue$1(date, validFormat);
-    if (!value) {
-      return null;
-    }
-    const minUnix = minDate && minDate.valueOf();
-    const maxUnix = maxDate && maxDate.valueOf();
-    const dateUnix = date && dayjs(date, validFormat).valueOf();
-    if (value) {
-      if (minUnix > dateUnix) {
-        value = minDate.format(validFormat);
-      } else if (maxUnix < dateUnix) {
-        value = maxDate.format(validFormat);
-      }
-    }
-    handleInputChange({
-      target: {
-        value
-      }
-    });
-  }, [date, validFormat, minDate, maxDate, handleInputChange]);
-  const handleBlur = useCallback(e => {
-    onBlur(e);
-    setPopoverState(false);
-    checkDateInerval();
-  }, [onBlur, checkDateInerval]);
-  const handleFocus = useCallback(e => {
-    setPopoverState(true);
-    onFocus(e);
-  }, [onFocus]);
-  const handleIconClick = useCallback((e, isBlurInitiatorCalendarIcon) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!popoverOpened && !isBlurInitiatorCalendarIcon || withoutPicker) {
-      inputRef.current.focus();
-    }
-  }, [popoverOpened, withoutPicker]);
-  useEffect(() => {
-    const date = dayjsWithPlugins(value);
-    if (value) {
-      setDate(dayjsWithPlugins(date, validFormat));
-      setInputValue(date.format(validFormat));
-    } else if (value === null) {
-      setDate('');
-      setInputValue('');
-    }
-  }, [value, validFormat]);
-  useKeyDown(() => setPopoverState(false), [], {
-    current: window
-  }, ['Escape']);
-  const sharedProps = {
-    flexibility,
-    placeholder,
-    appearance,
-    label: title,
-    isValid,
-    inputSize: size,
-    disabled,
-    readOnly,
-    required,
-    ref: inputRef,
-    canClear: clearable,
-    ...restProps
-  };
-
-  /* *** Mobile functions *** */
-  const mobileValue = useMemo(() => {
-    const val = value || inputValue;
-    return val ? dayjs(val).format(withTime ? 'YYYY-MM-DDTHH:mm' : 'YYYY-MM-DD') : '';
-  }, [withTime, value, inputValue]);
-  const mobileInputType = useMemo(() => withTime ? 'datetime-local' : 'date', [withTime]);
-  const handleMobileChange = useCallback(event => {
-    const {
-      value
-    } = event.target;
-    withTime ? handleChange(value) : handleInputChange({
-      target: {
-        value
-      }
-    });
-  }, [handleChange, handleInputChange, withTime]);
-  return isMobile ? /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    value: mobileValue,
-    itemsDirection: "end",
-    onKeyDown: stopEvent,
-    type: mobileInputType,
-    onChange: handleMobileChange,
-    className: "mobile-single-date-picker",
-    icon: readOnly ? '' : 'bc-icon-calendar'
-  }, sharedProps)) : /*#__PURE__*/React__default.createElement(PopoverV2, {
-    behave: "open",
-    align: popoverAlign,
-    isOpen: popoverOpened,
-    extendTargetWidth: false,
-    Content: !withoutPicker && /*#__PURE__*/React__default.createElement(DatePicker, _extends({
-      value: date,
-      min: minDate,
-      max: maxDate,
-      ref: setPickerRef,
-      withTime: withTime,
-      format: validFormat,
-      defaultValue: value,
-      defaultPreview: date,
-      onChange: handleChange,
-      onTimeChange: handleChange,
-      className: readOnly ? 'pointer-events-none' : ''
-    }, pickerProps, {
-      markedDate: markedDate,
-      frozenDateRange: frozenDateRange
-    }))
-  }, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    clickableIcon: true,
-    value: inputValue,
-    onBlur: handleBlur,
-    itemsDirection: "end",
-    onFocus: handleFocus,
-    onIconClick: handleIconClick,
-    onChange: handleInputChange,
-    icon: readOnly ? '' : 'bc-icon-calendar',
-    className: classnames(className, 'date-input', {
-      'default-cursor': readOnly || disabled,
-      'clearable-date-picker': clearable,
-      'text-cursor': withoutPicker
-    })
-  }, sharedProps)));
-}
-const {
-  flexibility: flexibility$1,
-  appearance: appearances$1,
-  size: size$1
-} = inputConfig;
-DatePickerInput.propTypes = {
-  /**
-   * Controls alignment of popover
-   */
-  popoverAlign: PropTypes.oneOf(popoverConfig.align),
-  /**
-   * Controls flexibility of input element
-   */
-  flexibility: PropTypes.oneOf(flexibility$1),
-  /**
-   * Controls appearance of input element
-   */
-  appearance: PropTypes.oneOf(appearances$1),
-  /**
-   * Placeholder text for input
-   */
-  placeholder: PropTypes.string,
-  /**
-   *  Disables datepicker when input is focused
-   */
-  withoutPicker: PropTypes.bool,
-  /**
-   * Accepts same props as DatePicker component(organisms)
-   */
-  pickerProps: PropTypes.object,
-  /**
-   * Min specifies the minimum value allowed for datepicker
-   */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Max specifies the maximum value allowed for datepicker
-   */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * The value of the input element, required for a controlled component.
-   */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * The CSS class name of the wrapper element.
-   */
-  className: PropTypes.string,
-  /**
-   * Controls input size
-   */
-  size: PropTypes.oneOf(size$1),
-  /**
-   * Custom date format
-   */
-  format: PropTypes.string,
-  /**
-   * If true, the input element will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * 	It prevents the user from changing the value of the field.
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * If true, the input element will show icon which can reset selected date.
-   */
-  clearable: PropTypes.bool,
-  /**
-   * Callback fired when the value is changed.
-   * function(date: Date) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fired when the input looses focus.
-   * function(e: Event) => void
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Callback fired when the input get focused.
-   * function(e: Event) => void
-   */
-  onFocus: PropTypes.func,
-  /**
-   * If false, the input will indicate an error.
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Title for input
-   */
-  title: PropTypes.string,
-  /**
-   *  MarkedDate specifies the default mark date
-   */
-  markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Prop is responsible for disabling selected range
-   */
-  frozenDateRange: PropTypes.arrayOf(PropTypes.shape({
-    from: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired,
-    to: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired
-  }))
-};
-DatePickerInput.defaultProps = {
-  popoverAlign: popoverConfig.align[1],
-  flexibility: flexibility$1[0],
-  appearance: appearances$1[0],
-  title: 'Datepicker',
-  onChange: noop,
-  onFocus: noop,
-  onBlur: noop,
-  size: size$1[1],
-  frozenDateRange: [],
-  clearable: false
-};
-
-function getLastValidValue(startDate, endDate, validFormat, rangeSeparator) {
-  if (startDate && endDate && startDate.isValid() && endDate.isValid()) {
-    return "".concat(startDate.format(validFormat)).concat(rangeSeparator).concat(endDate.format(validFormat));
-  }
-  return '';
-}
-const rangeSeparator = ' — ';
-function DateRangePickerInput(_ref) {
-  let {
-    startTimePlaceholder,
-    startDatePlaceholder,
-    endDatePlaceholder,
-    endTimePlaceholder,
-    defaultStartTime,
-    defaultEndTime,
-    withoutPicker,
-    popoverAlign,
-    flexibility,
-    placeholder,
-    pickerProps,
-    appearance,
-    className,
-    withTime,
-    onChange,
-    required,
-    disabled,
-    readOnly,
-    isValid,
-    onFocus,
-    format,
-    onBlur,
-    title,
-    value,
-    size,
-    max,
-    min,
-    isIncludeEndDateLastSecond,
-    markedDate,
-    frozenDateRange,
-    clearable,
-    ...restProps
-  } = _ref;
-  const {
-    isMobile
-  } = useDeviceType();
-  const maxDate = max && dayjsWithPlugins(max);
-  const minDate = min && dayjsWithPlugins(min);
-  const validFormat = useMemo(() => isMobile ? withTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD' : format || getBrowserDateFormat(!!withTime), [isMobile, withTime, format]);
-  const [inputValue, setInputValue] = useState('');
-  const [startDate, setStartDate] = useState('');
-  const [endDate, setEndDate] = useState('');
-  const [mobileStartDate, setMobileStartDate] = useState('');
-  const [mobileEndDate, setMobileEndDate] = useState('');
-  const [mobileStartTime, setMobileStartTime] = useState('');
-  const [mobileEndTime, setMobileEndTime] = useState('');
-  const [popoverOpened, setPopoverState] = useState(false);
-  const inputRef = useRef();
-  const setPickerRef = useClick(e => {
-    e.preventDefault();
-  });
-  const setMobileDate = useCallback((start, end) => {
-    setMobileStartDate(start ? start.format('YYYY-MM-DD') : '');
-    setMobileEndDate(end ? end.format('YYYY-MM-DD') : '');
-    setMobileStartTime(start ? start.format('HH:mm') : '');
-    setMobileEndTime(end ? end.format('HH:mm') : '');
-  }, []);
-  const handleDateValidation = useCallback((first, second, value) => {
-    const startDateLocal = dayjsWithPlugins(first, validFormat);
-    const endDateLocal = dayjsWithPlugins(second, validFormat);
-    const isStartDateValid = startDateLocal.isValid() && startDateLocal.format(validFormat) === first;
-    const isEndDateValid = endDateLocal.isValid() && endDateLocal.format(validFormat) === second;
-    if (frozenDateRange.length && Array.isArray(frozenDateRange)) {
-      const format = 'YYYY/MM/DD';
-      const isValid = !frozenDateRange.find(_ref2 => {
-        let {
-          from,
-          to
-        } = _ref2;
-        return from && to && (startDateLocal.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]') || endDateLocal.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]'));
-      });
-      if (!isValid) {
-        return [null, null];
-      }
-    }
-    if (isStartDateValid && isEndDateValid && dayjsWithPlugins(startDateLocal).isAfter(endDateLocal)) {
-      const diff = endDate && startDate ? dayjsWithPlugins(endDate).diff(startDate, 'm') : 0;
-      const changedDate = dayjsWithPlugins(startDateLocal).isSame(startDate) ? {
-        start: endDateLocal.subtract(diff, 'minute'),
-        end: endDateLocal
-      } : {
-        start: startDateLocal,
-        end: startDateLocal.add(diff, 'minute')
-      };
-      setStartDate(changedDate.start);
-      setEndDate(changedDate.end);
-      return [changedDate.start, changedDate.end];
-    }
-    if (isStartDateValid && isEndDateValid) {
-      setStartDate(startDateLocal);
-      setEndDate(endDateLocal);
-      return [startDateLocal, endDateLocal];
-    }
-    if (!required && value === '') {
-      setStartDate('');
-      setEndDate('');
-      return [null, null];
-    }
-  }, [frozenDateRange, validFormat, endDate, startDate, required]);
-  const handleRangeChange = useCallback(value => {
-    const [startDate, endDate] = value;
-    if (startDate && endDate) {
-      const start = dayjsWithPlugins(startDate);
-      const end = dayjsWithPlugins(endDate);
-      setStartDate(start);
-      setEndDate(end);
-      if (!withTime && !isMobile) {
-        inputRef.current.blur();
-        setPopoverState(false);
-      }
-      setInputValue("".concat(start.format(validFormat)).concat(rangeSeparator).concat(end.format(validFormat)));
-      onChange(value);
-    }
-  }, [validFormat, rangeSeparator, onChange, withTime]);
-  const handleInputChange = useCallback(e => {
-    var _value, _value2, _value3;
-    let {
-      value
-    } = e.target;
-    if (((_value = value) === null || _value === void 0 ? void 0 : _value.length) >= (validFormat === null || validFormat === void 0 ? void 0 : validFormat.length) && !((_value2 = value) !== null && _value2 !== void 0 && _value2.includes(rangeSeparator)) && (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) < ((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3.length)) {
-      value = "".concat(value).concat(rangeSeparator);
-    }
-    const [startDate = null, endDate = null] = value.split(rangeSeparator.trim());
-    const dates = handleDateValidation(startDate === null || startDate === void 0 ? void 0 : startDate.trim(), endDate === null || endDate === void 0 ? void 0 : endDate.trim(), value);
-    if (dates && dates[0] && dates[1]) {
-      onChange([dates[0].toDate(), dates[1].toDate()]);
-    }
-    setInputValue(value);
-    return dates;
-  }, [onChange, handleDateValidation, inputValue]);
-  const handleMobileDateChange = useCallback((e, index) => {
-    const isStart = index === 0;
-    const {
-      value
-    } = e.target;
-    const date = dayjsWithPlugins(value);
-    const start = isStart ? value : mobileStartDate || date.subtract(1, 'day').format('YYYY-MM-DD');
-    const end = !isStart ? value : mobileEndDate || date.add(1, 'day').format('YYYY-MM-DD');
-    const startTime = mobileStartTime || defaultStartTime;
-    const endTime = mobileEndTime || defaultEndTime;
-    const fullStartDate = withTime ? "".concat(start, " ").concat(startTime).concat(rangeSeparator).concat(end, " ").concat(endTime) : "".concat(start).concat(rangeSeparator).concat(end);
-    const [first, second] = handleInputChange({
-      target: {
-        value: fullStartDate
-      }
-    }) || [];
-    setMobileStartDate(first === null || first === void 0 ? void 0 : first.format('YYYY-MM-DD'));
-    setMobileEndDate(second === null || second === void 0 ? void 0 : second.format('YYYY-MM-DD'));
-    setMobileStartTime(startTime);
-    setMobileEndTime(endTime);
-  }, [mobileStartDate, mobileEndDate, mobileStartTime, defaultStartTime, mobileEndTime, defaultEndTime, withTime, rangeSeparator, handleInputChange]);
-  const handleMobileTimeChange = useCallback((e, index) => {
-    const isStart = index === 0;
-    const {
-      value
-    } = e.target;
-    const date = dayjsWithPlugins();
-    const startTime = isStart ? value : mobileStartTime || defaultStartTime;
-    const endTime = !isStart ? value : mobileEndTime || defaultEndTime;
-    const start = mobileStartDate || date.format('YYYY-MM-DD');
-    const end = mobileEndDate || date.add(1, 'day').format('YYYY-MM-DD');
-    if (startTime && endTime) {
-      const [first, second] = handleInputChange({
-        target: {
-          value: "".concat(start, " ").concat(startTime).concat(rangeSeparator).concat(end, " ").concat(endTime)
-        }
-      });
-      setMobileStartDate(first.format('YYYY-MM-DD'));
-      setMobileEndDate(second.format('YYYY-MM-DD'));
-      setMobileStartTime(first.format('HH:mm'));
-      setMobileEndTime(second.format('HH:mm'));
-    } else {
-      endTime && setMobileStartTime(startTime);
-      startTime && setMobileEndTime(endTime);
-    }
-  }, [mobileStartTime, defaultStartTime, mobileEndTime, defaultEndTime, mobileStartDate, mobileEndDate, handleInputChange, rangeSeparator]);
-  const checkDateInerval = useCallback(validDate => {
-    if (!validDate) {
-      return null;
-    }
-    let value = dayjs(validDate, validFormat);
-    const minUnix = minDate && minDate.valueOf();
-    const maxUnix = maxDate && maxDate.valueOf();
-    const dateUnix = value && value.valueOf();
-    if (minUnix > dateUnix) {
-      value = minUnix;
-    } else if (maxUnix < dateUnix) {
-      value = maxUnix;
-    }
-    return dayjs(value);
-  }, [validFormat, maxDate, minDate]);
-  const handleBlur = useCallback(e => {
-    const lastValidValue = getLastValidValue(startDate, endDate, validFormat, rangeSeparator);
-    setInputValue(lastValidValue);
-    setPopoverState(false);
-    onBlur(e);
-    if (lastValidValue) {
-      handleRangeChange([checkDateInerval(startDate.format(validFormat)), checkDateInerval(endDate.format(validFormat))]);
-    } else {
-      onChange([null, null]);
-    }
-  }, [startDate, endDate, validFormat, rangeSeparator, onBlur, handleRangeChange, checkDateInerval, onChange]);
-  const handleFocus = useCallback(e => {
-    setPopoverState(true);
-    onFocus(e);
-  }, [onFocus]);
-  const handleOnApply = useCallback(e => {
-    pickerProps === null || pickerProps === void 0 ? void 0 : pickerProps.onApply(e);
-    setPopoverState(false);
-  }, [pickerProps]);
-  const handleIconClick = useCallback((e, isBlurInitiatorCalendarIcon) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!popoverOpened && !isBlurInitiatorCalendarIcon || withoutPicker) {
-      inputRef.current.focus();
-    }
-  }, [popoverOpened, withoutPicker]);
-  useEffect(() => {
-    const [first, second] = value;
-    const startDate = dayjsWithPlugins(first);
-    const endDate = dayjsWithPlugins(second);
-    if (first && second) {
-      setStartDate(dayjsWithPlugins(startDate, validFormat));
-      setEndDate(dayjsWithPlugins(endDate, validFormat));
-      isMobile && setMobileDate(startDate, endDate);
-      setInputValue("".concat(startDate.format(validFormat)).concat(rangeSeparator).concat(endDate.format(validFormat)));
-    } else if (first === null && second === null) {
-      setStartDate('');
-      setEndDate('');
-      isMobile && setMobileDate();
-      setInputValue('');
-    }
-  }, [value, validFormat, isMobile]);
-  useKeyDown(() => setPopoverState(false), [], {
-    current: window
-  }, ['Escape']);
-  const onClear = useCallback(() => onChange([null, null]), []);
-  const sharedProps = {
-    appearance,
-    inputSize: size,
-    disabled,
-    readOnly,
-    required,
-    onClear,
-    canClear: clearable,
-    ...restProps
-  };
-  const dynamicProps = {};
-  if (isIncludeEndDateLastSecond) {
-    // @TODO need move to separated file
-    // add constants available for all lib components
-    // as this constant value also used in organisms
-    dynamicProps.defaultTimeValues = [['00', '00', '00'], ['00', '00', '00']];
-  }
-  return isMobile ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mobile-date-ranges-holder"
-  }, placeholder && /*#__PURE__*/React__default.createElement("div", {
-    className: "md-range-title"
-  }, placeholder), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('mobile-date-ranges-picker', {
-      'with-time': withTime
-    })
-  }, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    type: "date",
-    label: "From",
-    isValid: isValid,
-    onBlur: handleBlur,
-    itemsDirection: "end",
-    onFocus: handleFocus,
-    value: mobileStartDate,
-    className: "m-start-date",
-    placeholder: startDatePlaceholder,
-    onKeyDown: e => stopEvent(e, true),
-    icon: readOnly ? '' : 'bc-icon-calendar',
-    onChange: e => handleMobileDateChange(e, 0)
-  }, sharedProps)), /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    label: "To",
-    type: "date",
-    isValid: isValid,
-    onBlur: handleBlur,
-    itemsDirection: "end",
-    onFocus: handleFocus,
-    value: mobileEndDate,
-    className: "m-end-date",
-    placeholder: endDatePlaceholder,
-    onKeyDown: e => stopEvent(e, true),
-    icon: readOnly ? '' : 'bc-icon-calendar',
-    onChange: e => handleMobileDateChange(e, 1)
-  }, sharedProps)), withTime && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    type: "time",
-    label: "Time",
-    isValid: isValid,
-    value: mobileStartTime,
-    className: "m-start-time",
-    placeholder: startTimePlaceholder,
-    icon: readOnly ? '' : 'bc-icon-clock',
-    onChange: e => handleMobileTimeChange(e, 0)
-  }, sharedProps)), /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    type: "time",
-    label: "Time",
-    isValid: isValid,
-    value: mobileEndTime,
-    className: "m-end-time",
-    placeholder: endTimePlaceholder,
-    icon: readOnly ? '' : 'bc-icon-clock',
-    onChange: e => handleMobileTimeChange(e, 1)
-  }, sharedProps))))) : /*#__PURE__*/React__default.createElement(PopoverV2, {
-    behave: "open",
-    align: popoverAlign,
-    isOpen: popoverOpened,
-    extendTargetWidth: false,
-    Content: !withoutPicker && /*#__PURE__*/React__default.createElement(DatePicker.RangePicker, _extends({
-      min: minDate,
-      max: maxDate,
-      value: value,
-      withApply: false,
-      ref: setPickerRef,
-      withTime: withTime,
-      rangeEndDefault: endDate,
-      onChange: handleRangeChange,
-      rangeStartDefault: startDate,
-      frozenDateRange: frozenDateRange,
-      className: classnames({
-        'pointer-events-none': readOnly
-      })
-    }, pickerProps, {
-      onApply: handleOnApply
-    }, dynamicProps, {
-      markedDate: markedDate
-    }))
-  }, /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    label: title,
-    clickableIcon: true,
-    ref: inputRef,
-    isValid: isValid,
-    value: inputValue,
-    onBlur: handleBlur,
-    itemsDirection: "end",
-    onFocus: handleFocus,
-    flexibility: flexibility,
-    placeholder: placeholder,
-    onChange: handleInputChange,
-    icon: readOnly ? '' : 'bc-icon-calendar',
-    onIconClick: handleIconClick,
-    className: classnames(className, 'date-input', {
-      'default-cursor': readOnly || disabled,
-      'clearable-date-picker': clearable,
-      'text-cursor': withoutPicker
-    }),
-    autocomplete: "off"
-  }, sharedProps)));
-}
-const {
-  flexibility,
-  appearance: appearances,
-  size
-} = inputConfig;
-DateRangePickerInput.propTypes = {
-  /**
-   * Controls appearance of input element
-   */
-  appearance: PropTypes.oneOf(appearances),
-  /**
-   * Placeholder text for input
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Title for input
-   */
-  title: PropTypes.string,
-  /**
-   * The CSS class name of the wrapper element.
-   */
-  className: PropTypes.string,
-  /**
-   * Custom date format
-   */
-  format: PropTypes.string,
-  /**
-   * Controls flexibility of input element
-   */
-  flexibility: PropTypes.oneOf(flexibility),
-  /**
-   * Define range picker is with time or no.
-   */
-  withTime: PropTypes.bool,
-  /**
-   * If true, the input element will show icon which can reset selected date.
-   */
-  clearable: PropTypes.bool,
-  /**
-   * If true, the input element will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * 	It prevents the user from changing the value of the field.
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Callback fired when the value is changed.
-   * function([startDate: Date, endDate: Date) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fired when the input looses focus.
-   * function(e: Event) => void
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Callback fired when the input get focused.
-   * function(e: Event) => void
-   */
-  onFocus: PropTypes.func,
-  /**
-   * The value of the input element, required for a controlled component.
-   */
-  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(dayjsWithPlugins)), PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
-  /**
-   * If false, the input will indicate an error.
-   */
-  isValid: PropTypes.bool,
-  /**
-   *  Disables datepicker when input is focused
-   */
-  withoutPicker: PropTypes.bool,
-  /**
-   * Accepts same props as DatePicker component(organisms)
-   */
-  pickerProps: PropTypes.object,
-  /**
-   * Min specifies the minimum value allowed for datepicker
-   */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Max specifies the maximum value allowed for datepicker
-   */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(dayjsWithPlugins), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Controls input size
-   */
-  size: PropTypes.oneOf(size),
-  /**
-   * Controls alignment of popover
-   */
-  popoverAlign: PropTypes.oneOf(popoverConfig.align),
-  /**
-   * Placeholder text for start date input, which is used in mobile version
-   */
-  startDatePlaceholder: PropTypes.string,
-  /**
-   * Placeholder text for end date input, which is used in mobile version
-   */
-  endDatePlaceholder: PropTypes.string,
-  /**
-   * Placeholder text for start time input, which is used in mobile version
-   */
-  startTimePlaceholder: PropTypes.string,
-  /**
-   * Placeholder text for end time input, which is used in mobile version
-   */
-  endTimePlaceholder: PropTypes.string,
-  /**
-   * Set default start time when date changed
-   */
-  defaultStartTime: PropTypes.string,
-  /**
-   * Set default end time when date changed
-   */
-  defaultEndTime: PropTypes.string,
-  /**
-   * Prop is responsible for add one second to end date time value in case of true parameter
-   */
-  isIncludeEndDateLastSecond: PropTypes.bool,
-  /**
-   * MarkedDate specifies the default mark date
-   */
-  markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Prop is responsible for disabling selected range
-   */
-  frozenDateRange: PropTypes.arrayOf(PropTypes.shape({
-    from: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired,
-    to: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]).isRequired
-  }))
-};
-DateRangePickerInput.defaultProps = {
-  popoverAlign: popoverConfig.align[1],
-  placeholder: getBrowserDateFormat(),
-  flexibility: flexibility[0],
-  appearance: appearances[0],
-  title: 'Datepicker',
-  onChange: noop,
-  size: size[1],
-  onFocus: noop,
-  onBlur: noop,
-  value: [],
-  defaultStartTime: '00:00',
-  defaultEndTime: '00:00',
-  startDatePlaceholder: 'Start date',
-  endDatePlaceholder: 'End date',
-  startTimePlaceholder: 'Start',
-  endTimePlaceholder: 'End',
-  isIncludeEndDateLastSecond: false,
-  frozenDateRange: [],
-  clearable: false
-};
-
-// Styles
-DatePickerInput.WithRange = DateRangePickerInput;
-
-export { DatePickerInput as default };