@geneui/components 2.11.1

package/index-5e722d91.js

@@ -0,0 +1,867 @@
+import './globalStyling-9c60a159.js';
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { d as dayjsWithPlugins, a as dayjs } from './dateValidation-67caec66.js';
+import { d as popoverConfig, i as inputConfig } from './configs-91c86664.js';
+import { n as noop, s as stopEvent } from './index-ac59cb10.js';
+import { u as useKeyDown } from './useKeyDown-38102ae7.js';
+import { u as useDeviceType } from './useDeviceType-dd51db38.js';
+import { c as classnames } from './index-6ff23041.js';
+import { P as PopoverV2 } from './index-702bf24a.js';
+import DatePicker from './DatePicker.js';
+import ExtendedInput from './ExtendedInput.js';
+import { g as getBrowserDateFormat } from './localization-4ba17032.js';
+
+function useClick(callback) {
+  const ref = useRef();
+  const handleClick = useCallback(e => {
+    if (ref.current && ref.current.contains(e.target)) {
+      callback && callback(e);
+    }
+  }, [ref.current, callback]);
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [handleClick]);
+  const setRef = node => ref.current = node;
+  return setRef;
+}
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-holder{width:100%}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .default-cursor{cursor:default!important}[data-gene-ui-version=\"2.11.0\"] .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.11.0\"] .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.11.0\"] .mobile-date-ranges-picker .m-start-date{grid-area:m-start-date}[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker .m-end-date{grid-area:m-end-date}[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker .m-start-time{grid-area:m-start-time}[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker .m-end-time{grid-area:m-end-time}[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker i[class*=calendar],[data-gene-ui-version=\"2.11.0\"] .mobile-single-date-picker i[class*=calendar]{order:-2;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker i[class*=clear],[data-gene-ui-version=\"2.11.0\"] .mobile-single-date-picker i[class*=clear]{order:-1}[data-gene-ui-version=\"2.11.0\"] .date-input .input-structure>label{height:var(--input-element-height)}[data-gene-ui-version=\"2.11.0\"] .date-input .input-structure>.icon+label input{padding-inline:2rem 4.4rem}[data-gene-ui-version=\"2.11.0\"] .date-input .input-structure .input-element-relative{inset-inline-start:0;position:absolute;top:0;width:90%}[data-gene-ui-version=\"2.11.0\"] .date-input .input-structure .input-element-relative>input{padding-inline:2rem 1.5rem;padding-inline-end:2.4rem}[data-gene-ui-version=\"2.11.0\"] .date-input .input-structure .input-element-relative>.read-only{padding-inline:2rem 1.5rem}[data-gene-ui-version=\"2.11.0\"] .date-input i[class*=calendar]{order:-2}[data-gene-ui-version=\"2.11.0\"] .date-input i[class*=clear]{order:-1}[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker .bc-icon-calendar,[data-gene-ui-version=\"2.11.0\"] .mobile-date-ranges-picker .bc-icon.clock,[data-gene-ui-version=\"2.11.0\"] .mobile-single-date-picker .bc-icon-calendar,[data-gene-ui-version=\"2.11.0\"] .mobile-single-date-picker .bc-icon.clock{pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .clearable-date-picker input{width:85%}";
+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);
+    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);
+    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) {
+      inputRef.current.focus();
+    }
+  }, [popoverOpened]);
+  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,
+      autocomplete: "off"
+    }))
+  }, /*#__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,
+      'clearable-date-picker': clearable
+    })
+  }, sharedProps)));
+}
+const {
+  flexibility: flexibility$1,
+  appearance: appearances$1,
+  size: size$1
+} = inputConfig;
+DatePickerInput.propTypes = {
+  /**
+   * Controls alignment of popover
+   */
+  popoverAlign: propTypesExports.oneOf(popoverConfig.align),
+  /**
+   * Controls flexibility of input element
+   */
+  flexibility: propTypesExports.oneOf(flexibility$1),
+  /**
+   * Controls appearance of input element
+   */
+  appearance: propTypesExports.oneOf(appearances$1),
+  /**
+   * Placeholder text for input
+   */
+  placeholder: propTypesExports.string,
+  /**
+   *  Disables datepicker when input is focused
+   */
+  withoutPicker: propTypesExports.bool,
+  /**
+   * Accepts same props as DatePicker component(organisms)
+   */
+  pickerProps: propTypesExports.object,
+  /**
+   * Min specifies the minimum value allowed for datepicker
+   */
+  min: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjsWithPlugins), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Max specifies the maximum value allowed for datepicker
+   */
+  max: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjsWithPlugins), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * The value of the input element, required for a controlled component.
+   */
+  value: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjsWithPlugins), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * The CSS class name of the wrapper element.
+   */
+  className: propTypesExports.string,
+  /**
+   * Controls input size
+   */
+  size: propTypesExports.oneOf(size$1),
+  /**
+   * Custom date format
+   */
+  format: propTypesExports.string,
+  /**
+   * If true, the input element will be disabled.
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * 	It prevents the user from changing the value of the field.
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * If true, the input element will show icon which can reset selected date.
+   */
+  clearable: propTypesExports.bool,
+  /**
+   * Callback fired when the value is changed.
+   * function(date: Date) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Callback fired when the input looses focus.
+   * function(e: Event) => void
+   */
+  onBlur: propTypesExports.func,
+  /**
+   * Callback fired when the input get focused.
+   * function(e: Event) => void
+   */
+  onFocus: propTypesExports.func,
+  /**
+   * If false, the input will indicate an error.
+   */
+  isValid: propTypesExports.bool,
+  /**
+   * Title for input
+   */
+  title: propTypesExports.string,
+  /**
+   *  MarkedDate specifies the default mark date
+   */
+  markedDate: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Prop is responsible for disabling selected range
+   */
+  frozenDateRange: propTypesExports.arrayOf(propTypesExports.shape({
+    from: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]).isRequired,
+    to: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.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);
+      setInputValue("".concat(start.format(validFormat)).concat(rangeSeparator).concat(end.format(validFormat)));
+      onChange(value);
+    }
+  }, [validFormat, rangeSeparator, onChange]);
+  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) {
+      inputRef.current.focus();
+    }
+  }, [popoverOpened]);
+  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,
+      'clearable-date-picker': clearable
+    }),
+    autoComplete: "off"
+  }, sharedProps)));
+}
+const {
+  flexibility,
+  appearance: appearances,
+  size
+} = inputConfig;
+DateRangePickerInput.propTypes = {
+  /**
+   * Controls appearance of input element
+   */
+  appearance: propTypesExports.oneOf(appearances),
+  /**
+   * Placeholder text for input
+   */
+  placeholder: propTypesExports.string,
+  /**
+   * Title for input
+   */
+  title: propTypesExports.string,
+  /**
+   * The CSS class name of the wrapper element.
+   */
+  className: propTypesExports.string,
+  /**
+   * Custom date format
+   */
+  format: propTypesExports.string,
+  /**
+   * Controls flexibility of input element
+   */
+  flexibility: propTypesExports.oneOf(flexibility),
+  /**
+   * Define range picker is with time or no.
+   */
+  withTime: propTypesExports.bool,
+  /**
+   * If true, the input element will show icon which can reset selected date.
+   */
+  clearable: propTypesExports.bool,
+  /**
+   * If true, the input element will be disabled.
+   */
+  disabled: propTypesExports.bool,
+  /**
+   * 	It prevents the user from changing the value of the field.
+   */
+  readOnly: propTypesExports.bool,
+  /**
+   * Callback fired when the value is changed.
+   * function([startDate: Date, endDate: Date) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Callback fired when the input looses focus.
+   * function(e: Event) => void
+   */
+  onBlur: propTypesExports.func,
+  /**
+   * Callback fired when the input get focused.
+   * function(e: Event) => void
+   */
+  onFocus: propTypesExports.func,
+  /**
+   * The value of the input element, required for a controlled component.
+   */
+  value: propTypesExports.oneOfType([propTypesExports.arrayOf(propTypesExports.instanceOf(dayjsWithPlugins)), propTypesExports.arrayOf(propTypesExports.instanceOf(Date)), propTypesExports.arrayOf(propTypesExports.string), propTypesExports.arrayOf(propTypesExports.number)]),
+  /**
+   * If false, the input will indicate an error.
+   */
+  isValid: propTypesExports.bool,
+  /**
+   *  Disables datepicker when input is focused
+   */
+  withoutPicker: propTypesExports.bool,
+  /**
+   * Accepts same props as DatePicker component(organisms)
+   */
+  pickerProps: propTypesExports.object,
+  /**
+   * Min specifies the minimum value allowed for datepicker
+   */
+  min: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjsWithPlugins), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Max specifies the maximum value allowed for datepicker
+   */
+  max: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjsWithPlugins), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Controls input size
+   */
+  size: propTypesExports.oneOf(size),
+  /**
+   * Controls alignment of popover
+   */
+  popoverAlign: propTypesExports.oneOf(popoverConfig.align),
+  /**
+   * Placeholder text for start date input, which is used in mobile version
+   */
+  startDatePlaceholder: propTypesExports.string,
+  /**
+   * Placeholder text for end date input, which is used in mobile version
+   */
+  endDatePlaceholder: propTypesExports.string,
+  /**
+   * Placeholder text for start time input, which is used in mobile version
+   */
+  startTimePlaceholder: propTypesExports.string,
+  /**
+   * Placeholder text for end time input, which is used in mobile version
+   */
+  endTimePlaceholder: propTypesExports.string,
+  /**
+   * Set default start time when date changed
+   */
+  defaultStartTime: propTypesExports.string,
+  /**
+   * Set default end time when date changed
+   */
+  defaultEndTime: propTypesExports.string,
+  /**
+   * Prop is responsible for add one second to end date time value in case of true parameter
+   */
+  isIncludeEndDateLastSecond: propTypesExports.bool,
+  /**
+   * MarkedDate specifies the default mark date
+   */
+  markedDate: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Prop is responsible for disabling selected range
+   */
+  frozenDateRange: propTypesExports.arrayOf(propTypesExports.shape({
+    from: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]).isRequired,
+    to: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.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
+};
+
+DatePickerInput.WithRange = DateRangePickerInput;
+
+export { DatePickerInput as D, useClick as u };