@retailcrm/datalens-ui 0.0.0

package/components/common.js

@@ -0,0 +1,4451 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { Component } from "react";
+import { TextInput, Icon, TabProvider, TabList, Tab, Button, MobileContext, Sheet, Popup, eventBroker, Loader } from "@gravity-ui/uikit";
+import block from "bem-cn-lite";
+import { debounce } from "lodash";
+import Slider from "rc-slider";
+import _range from "lodash/range";
+import { l as I18n } from "./AccessRights.js";
+import { DateTime, Interval } from "luxon";
+import PropTypes from "prop-types";
+import { F as FieldWrapper } from "./FieldWrapper.js";
+import throttle from "lodash/throttle";
+import _repeat from "lodash/repeat";
+import { ChevronRight, ArrowUpRightFromSquare, Check, ChevronDown } from "@gravity-ui/icons";
+import debounce$1 from "lodash/debounce";
+import _filter from "lodash/filter";
+import _flatMap from "lodash/flatMap";
+import isEqual from "lodash/isEqual";
+import isUndefined from "lodash/isUndefined";
+import _max from "lodash/max";
+import uniq from "lodash/uniq";
+import _uniqBy from "lodash/uniqBy";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { VariableSizeList } from "react-window";
+import md5 from "blueimp-md5";
+const LEFT_INFO_POINT_STYLE = {
+  position: "static",
+  marginLeft: 0,
+  display: "flex",
+  verticalAlign: "none"
+};
+const RIGHT_INFO_POINT_STYLE = {
+  position: "static",
+  marginLeft: 0,
+  display: "flex",
+  verticalAlign: "none",
+  flexDirection: "row-reverse"
+};
+const prepareAvailableValues = (availableValues) => {
+  if (!availableValues || !availableValues.length) {
+    return void 0;
+  }
+  return [...availableValues].sort((v1, v2) => v1 - v2);
+};
+const prepareValue = ({
+  value = 0,
+  min = 0,
+  max = 100
+}) => {
+  if (value > max) {
+    return max;
+  }
+  if (value < min) {
+    return min;
+  }
+  return value;
+};
+const getInfoPoints = ({
+  infoPointsCount,
+  min,
+  max,
+  values
+}) => {
+  let mapInfoPoints;
+  if (values && infoPointsCount >= values.length) {
+    return values;
+  }
+  if (infoPointsCount < 1) {
+    return [];
+  }
+  if (infoPointsCount === 1) {
+    return [min];
+  }
+  if (!values || !values.length) {
+    const step = Math.abs(max - min) / (infoPointsCount - 1);
+    mapInfoPoints = (el) => Math.round((min + step * el) * 100) / 100;
+  } else {
+    const step = values.length / infoPointsCount;
+    mapInfoPoints = (el, i, arr) => {
+      let index = Math.ceil(el * step);
+      if (i === arr.length - 1) {
+        index = values.length - 1;
+      }
+      return values[index];
+    };
+  }
+  return _range(0, infoPointsCount).map(mapInfoPoints);
+};
+const getParsedValue = (textValue, parse) => {
+  return parse ? parse(textValue) : parseFloat(textValue);
+};
+const getTextValue = (value, format) => {
+  return format ? format(value) : value.toString();
+};
+const getClosestValue = (value, values) => {
+  if (!values || !values.length) {
+    return value;
+  }
+  let low = 0;
+  let hi = values.length - 1;
+  while (hi - low > 1) {
+    const mid = Math.floor((low + hi) / 2);
+    if (values[mid] < value) {
+      low = mid;
+    } else {
+      hi = mid;
+    }
+  }
+  const left = values[low];
+  const right = values[hi];
+  return value - left <= right - value ? left : right;
+};
+const b$d = block("dl-range-input-picker");
+const _RangeInputPicker = class _RangeInputPicker extends Component {
+  constructor(props) {
+    super(props);
+    this.wrapperRef = React__default.createRef();
+    this.sliderRef = React__default.createRef();
+    this.textInputInnerRef = React__default.createRef();
+    this.callOnUpdate = () => {
+      const { onUpdate } = this.props;
+      const { currentValue } = this.state;
+      if (onUpdate) {
+        onUpdate(currentValue);
+      }
+    };
+    this.prepareChange = (textValue) => {
+      const { parse } = this.props;
+      const { values, min, max, currentValue } = this.state;
+      let value = getParsedValue(textValue, parse);
+      if (isNaN(value)) {
+        value = currentValue;
+      }
+      let actualValue = prepareValue({ value, min, max });
+      if (values && values.length) {
+        actualValue = getClosestValue(actualValue, values);
+      }
+      return actualValue;
+    };
+    this.handleOnAfterUpdate = () => {
+      const { onAfterUpdate } = this.props;
+      const { currentValue } = this.state;
+      if (onAfterUpdate) {
+        onAfterUpdate(currentValue);
+      }
+    };
+    this.handleInputBlur = (event) => {
+      event.preventDefault();
+      const { onBlur } = this.props;
+      const { textValue } = this.state;
+      const actualValue = this.prepareChange(textValue);
+      this.setState(
+        {
+          focused: false,
+          currentValue: actualValue,
+          textValue: _RangeInputPicker.getDisplayTextValue(this.props, actualValue)
+        },
+        () => {
+          if (onBlur) {
+            onBlur(actualValue);
+          }
+        }
+      );
+    };
+    this.handleInputFocus = () => {
+      const { format, onFocus } = this.props;
+      const { currentValue } = this.state;
+      this.setState(
+        {
+          textValue: getTextValue(currentValue, format)
+        },
+        () => {
+          if (onFocus) {
+            onFocus(currentValue);
+          }
+        }
+      );
+    };
+    this.handleInputUpdate = (newValue) => {
+      if (this.patternRegex && !this.patternRegex.test(newValue)) {
+        return;
+      }
+      const actualValue = this.prepareChange(newValue);
+      this.setState(
+        {
+          currentValue: actualValue,
+          textValue: newValue
+        },
+        this.debouncedCallOnUpdate
+      );
+    };
+    this.handleKeyDown = (event) => {
+      if (event.key !== "Enter") {
+        return;
+      }
+      const { format, onSubmit } = this.props;
+      const { textValue } = this.state;
+      const actualValue = this.prepareChange(textValue);
+      this.setState(
+        {
+          currentValue: actualValue,
+          textValue: getTextValue(actualValue, format),
+          focused: false
+        },
+        () => {
+          if (this.textInputInnerRef.current) {
+            this.textInputInnerRef.current.blur();
+          }
+          if (onSubmit) {
+            onSubmit(actualValue);
+          }
+        }
+      );
+    };
+    this.handleSliderChange = (sliderValue) => {
+      const { min, max, values } = this.state;
+      const nextValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;
+      const value = getClosestValue(prepareValue({ min, max, value: nextValue }), values);
+      this.setState(
+        {
+          currentValue: value,
+          textValue: _RangeInputPicker.getDisplayTextValue(this.props, value)
+        },
+        this.debouncedCallOnUpdate
+      );
+    };
+    this.handleWrapperClick = (event) => {
+      const slider = this.sliderRef.current && this.sliderRef.current.sliderRef;
+      const isSliderContainsTarget = slider && slider.contains(event.target);
+      if (!isSliderContainsTarget) {
+        this.setState({ focused: true });
+      }
+    };
+    this.handleInfoPointClick = (value) => {
+      return (event) => {
+        const { format, parse } = this.props;
+        event.preventDefault();
+        const val = getParsedValue(getTextValue(value, format), parse);
+        this.setState(
+          {
+            currentValue: val,
+            textValue: _RangeInputPicker.getDisplayTextValue(this.props, val)
+          },
+          () => {
+            const { onUpdate, onAfterUpdate } = this.props;
+            if (onUpdate) {
+              onUpdate(val);
+            }
+            if (onAfterUpdate) {
+              onAfterUpdate(val);
+            }
+          }
+        );
+      };
+    };
+    this.handleOutsideClick = (event) => {
+      const { onOutsideClick } = this.props;
+      const { currentValue, focused } = this.state;
+      const wrapper = this.wrapperRef.current;
+      if (!onOutsideClick || !wrapper) {
+        return;
+      }
+      if (!wrapper.contains(event.target) && focused) {
+        this.setState(
+          {
+            focused: false
+          },
+          () => {
+            if (onOutsideClick) {
+              onOutsideClick(currentValue);
+            }
+          }
+        );
+      }
+    };
+    this.renderItem = (value) => _RangeInputPicker.getDisplayTextValue(this.props, value);
+    this.renderRangeItem = (value) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: b$d("range-info-item"),
+        onClick: this.handleInfoPointClick(value),
+        children: _RangeInputPicker.getDisplayTextValue(this.props, value)
+      },
+      value
+    );
+    this.renderRangeInfoItems = () => {
+      const { infoPointsCount = 2, minValue = 0, maxValue = 100 } = this.props;
+      const { values } = this.state;
+      if (infoPointsCount < 1) {
+        return [];
+      }
+      let infoItems = [];
+      if (infoPointsCount === 1) {
+        infoItems.push(minValue);
+      } else if (!values || !values.length) {
+        const step = Math.abs(maxValue - minValue) / (infoPointsCount - 1);
+        for (let i = 0; i < infoPointsCount; i++) {
+          const point = Math.round((minValue + step * i) * 100) / 100;
+          infoItems.push(point);
+        }
+      } else {
+        infoItems = values;
+      }
+      const pointsCount = infoItems.length;
+      const unit = 100 / (pointsCount - 1);
+      const pointWidth = unit * 0.9;
+      const pointsRange = maxValue - minValue;
+      return infoItems.map((point, i) => {
+        const style = {
+          width: pointWidth + "%",
+          marginLeft: -pointWidth / 2 + "%",
+          left: (point - minValue) / pointsRange * 100 + "%"
+        };
+        if (i === 0) {
+          Object.assign(style, LEFT_INFO_POINT_STYLE);
+        } else if (i === infoItems.length - 1) {
+          Object.assign(style, RIGHT_INFO_POINT_STYLE);
+        }
+        return /* @__PURE__ */ jsx("span", { className: b$d("range-info-item-container"), style, children: this.renderRangeItem(point) }, point);
+      });
+    };
+    this.renderInfoItems = () => {
+      const { infoPointsCount = 2 } = this.props;
+      const { values, min, max } = this.state;
+      const points = getInfoPoints({ infoPointsCount, min, max, values });
+      const infoItems = points.reduce(
+        (acc, point) => {
+          acc[point] = { label: this.renderItem(point), style: {} };
+          return acc;
+        },
+        {}
+      );
+      if (infoItems[min]) {
+        infoItems[min].style = LEFT_INFO_POINT_STYLE;
+      }
+      if (infoItems[max]) {
+        infoItems[max].style = RIGHT_INFO_POINT_STYLE;
+      }
+      return infoItems;
+    };
+    this.debouncedCallOnUpdate = debounce(this.callOnUpdate, props.debounceDelay);
+    this.debouncedHandleOnAfterUpdate = debounce(this.handleOnAfterUpdate, props.debounceDelay);
+    this.state = _RangeInputPicker.getPreparedState(props);
+  }
+  static getDisplayTextValue(props, value) {
+    const { displayFormat, format } = props;
+    const formatFunc = displayFormat || format || String;
+    return formatFunc(value);
+  }
+  static getPreparedState(props, currentState) {
+    const { availableValues, value, minValue = 0, maxValue = 100 } = props;
+    const { focused = false, textValue = "" } = currentState || {};
+    const values = prepareAvailableValues(availableValues);
+    const min = values ? values[0] : minValue;
+    const max = values ? values[values.length - 1] : maxValue;
+    const actualValue = prepareValue({ value, min, max });
+    return {
+      prevProps: props,
+      textValue: focused ? textValue : _RangeInputPicker.getDisplayTextValue(props, value),
+      currentValue: actualValue,
+      min,
+      max,
+      values,
+      focused
+    };
+  }
+  static getDerivedStateFromProps(nextProps, state) {
+    if (nextProps === state.prevProps) {
+      return null;
+    }
+    return _RangeInputPicker.getPreparedState(nextProps, state);
+  }
+  componentDidMount() {
+    const { onOutsideClick } = this.props;
+    if (onOutsideClick) {
+      document.addEventListener("touchstart", this.handleOutsideClick);
+      document.addEventListener("mousedown", this.handleOutsideClick);
+    }
+  }
+  componentWillUnmount() {
+    this.debouncedCallOnUpdate.cancel();
+    this.debouncedHandleOnAfterUpdate.cancel();
+    document.removeEventListener("touchstart", this.handleOutsideClick);
+    document.removeEventListener("mousedown", this.handleOutsideClick);
+  }
+  render() {
+    const { placeholder, autoFocus, disabled, readOnly, size, pattern, className } = this.props;
+    const { currentValue, textValue, min, max, values } = this.state;
+    let rangeInfoItems;
+    let rcSliderInfoItems;
+    if (!values || !values.length) {
+      rangeInfoItems = this.renderRangeInfoItems();
+    } else {
+      rcSliderInfoItems = this.renderInfoItems();
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: this.wrapperRef,
+        className: b$d({ size }, className),
+        tabIndex: 0,
+        onKeyDown: this.handleKeyDown,
+        onMouseDown: this.handleWrapperClick,
+        children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              controlRef: this.textInputInnerRef,
+              placeholder,
+              size,
+              disabled,
+              onUpdate: this.handleInputUpdate,
+              onFocus: this.handleInputFocus,
+              onBlur: this.handleInputBlur,
+              value: textValue,
+              autoFocus,
+              controlProps: { readOnly, pattern }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              ref: this.sliderRef,
+              tabIndex: 0,
+              min,
+              max,
+              value: currentValue,
+              disabled,
+              onChange: this.handleSliderChange,
+              step: this.step,
+              marks: rcSliderInfoItems,
+              onAfterChange: this.debouncedHandleOnAfterUpdate
+            }
+          ),
+          rangeInfoItems && /* @__PURE__ */ jsx("div", { className: b$d("range-info-items-list"), children: rangeInfoItems })
+        ]
+      }
+    );
+  }
+  get patternRegex() {
+    const { pattern } = this.props;
+    if (!pattern) {
+      return null;
+    }
+    return new RegExp(`^(?:${pattern})$`);
+  }
+  get step() {
+    const { step } = this.props;
+    const { values } = this.state;
+    return !values || !values.length ? step : void 0;
+  }
+};
+_RangeInputPicker.defaultProps = {
+  size: "m",
+  placeholder: "",
+  value: 0,
+  minValue: 0,
+  maxValue: 100,
+  debounceDelay: 200,
+  disabled: false,
+  readOnly: false,
+  autoFocus: false,
+  infoPointsCount: 2,
+  step: 1
+};
+let RangeInputPicker = _RangeInputPicker;
+const i18n$5 = I18n.keyset("components.common.Datepicker");
+const MINUTES_IN_HOUR = 60;
+const AVAILABLE_POPUP_PLACEMENT = ["bottom-start", "bottom-end", "top-start", "top-end"];
+const WEEKDAYS = {
+  MONDAY: 1,
+  THURSDAY: 4,
+  SATURDAY: 6,
+  SUNDAY: 7
+};
+const MONTHS = {
+  JANUARY: 1,
+  DECEMBER: 12
+};
+const TABS = {
+  DAY: "day",
+  WEEK: "week",
+  MONTH: "month",
+  QUARTER: "quarter",
+  YEAR: "year"
+};
+const DISPLAY_FORMAT = {
+  DATE: "dd.MM.yyyy",
+  DATETIME: "dd.MM.yyyy HH:mm:ss"
+};
+const OUTPUT_FORMAT = {
+  DATE: "date",
+  DATETIME: "datetime"
+};
+function getTabs() {
+  return [TABS.DAY, TABS.WEEK, TABS.MONTH, TABS.QUARTER, TABS.YEAR].map((tab) => ({
+    id: tab,
+    title: i18n$5(`tab_${tab}`)
+  }));
+}
+const i18n$4 = I18n.keyset("components.common.Datepicker");
+const b$c = block("dl-datepicker-month");
+const CELLS$2 = {
+  DAY: "day",
+  TITLE: "title"
+};
+const isDatesEqual = (d1, d2) => {
+  if (!d1 || !d2) {
+    return false;
+  }
+  return d1.hasSame(d2, "day") && d1.hasSame(d2, "month") && d1.hasSame(d2, "year");
+};
+class Month extends React__default.Component {
+  static propTypes = {
+    month: PropTypes.number.isRequired,
+    year: PropTypes.number.isRequired,
+    from: PropTypes.object,
+    to: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    selectedInterval: PropTypes.object,
+    hovered: PropTypes.object,
+    zone: PropTypes.string,
+    isDefaultFrom: PropTypes.bool,
+    isNeedScroll: PropTypes.bool,
+    onDateClick: PropTypes.func,
+    onRangeDateClick: PropTypes.func
+  };
+  scrollRef = React__default.createRef();
+  firstMonthDate = DateTime.fromObject({
+    year: this.props.year,
+    month: this.props.month,
+    day: 1,
+    zone: this.props.zone
+  });
+  todayDateTime = DateTime.fromObject({ zone: this.props.zone });
+  titleCells = this.firstMonthDate.weekday < WEEKDAYS.THURSDAY ? WEEKDAYS.SUNDAY : this.firstMonthDate.weekday - 1;
+  isMonthIncludeToday = this.todayDateTime >= this.firstMonthDate && this.todayDateTime <= this.firstMonthDate.endOf("month");
+  getOnDateClick = ({ start, end }) => {
+    const { onDateClick, onRangeDateClick } = this.props;
+    if (onRangeDateClick) {
+      return () => onRangeDateClick({ start, end });
+    }
+    return () => onDateClick({ dateTime: start });
+  };
+  renderTitleCell = ({ titleCell, month, year }) => {
+    const { min, max } = this.props;
+    const startMonth = this.firstMonthDate;
+    const endMonth = this.firstMonthDate.set({ day: startMonth.daysInMonth });
+    const disabled = min && endMonth < min || max && startMonth > max;
+    let title = titleCell === 0 ? i18n$4(`month_long_${month}`) : null;
+    if (title && [MONTHS.DECEMBER, MONTHS.JANUARY].includes(month)) {
+      title += ` ${year}`;
+    }
+    return /* @__PURE__ */ React__default.createElement("div", { key: `title-${titleCell}-${month}-${year}`, className: b$c(CELLS$2.TITLE, { disabled }) }, title);
+  };
+  renderEmptyCell = ({ emptyCell, month, year }) => {
+    return /* @__PURE__ */ React__default.createElement("div", { key: `empty-${emptyCell}-${month}-${year}` });
+  };
+  // eslint-disable-next-line complexity
+  getMods = ({ currentDateTime, mergedIntervals, flags }) => {
+    const { min, max, selectedInterval, hovered, isDefaultFrom, onRangeDateClick } = this.props;
+    let isToday = false;
+    let isSelected = false;
+    if (this.isMonthIncludeToday && !flags.hasToday) {
+      isToday = isDatesEqual(currentDateTime, this.todayDateTime);
+      if (isToday) {
+        flags.hasToday = true;
+      }
+    }
+    if (hovered && onRangeDateClick) {
+      isSelected = selectedInterval.contains(currentDateTime) || hovered.contains(currentDateTime);
+    } else if (hovered) {
+      isSelected = mergedIntervals ? mergedIntervals.contains(currentDateTime) : hovered.contains(currentDateTime);
+    } else {
+      isSelected = selectedInterval.contains(currentDateTime) && !isDefaultFrom;
+    }
+    const disabled = min && currentDateTime < min || max && currentDateTime > max;
+    const isMonday = currentDateTime.weekday === WEEKDAYS.MONDAY;
+    const isSunday = currentDateTime.weekday === WEEKDAYS.SUNDAY;
+    const isFirsDay = currentDateTime.day === 1;
+    const isLastDay = currentDateTime.day === currentDateTime.daysInMonth;
+    const mods = {
+      disabled,
+      weekend: currentDateTime.weekday >= WEEKDAYS.SATURDAY,
+      today: isToday,
+      selected: isSelected,
+      "left-edge": isMonday || isFirsDay,
+      "right-edge": isSunday || isLastDay
+    };
+    return mods;
+  };
+  renderDayCell = ({ day, month, year, mergedIntervals }) => {
+    const { hovered, onRangeDateClick } = this.props;
+    const flags = {
+      hasToday: false
+    };
+    const currentDateTime = this.firstMonthDate.set({ day });
+    const mods = this.getMods({ currentDateTime, mergedIntervals, flags });
+    let start = currentDateTime;
+    let end;
+    if (hovered && onRangeDateClick) {
+      [start, end] = [hovered.start, hovered.end];
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: `${day}-${month}-${year}`,
+        className: b$c(CELLS$2.DAY, mods),
+        date: currentDateTime.toISODate(),
+        ...!mods.disabled && { onClick: this.getOnDateClick({ start, end }) }
+      },
+      day
+    );
+  };
+  renderMonth = () => {
+    const { month, year, selectedInterval, hovered, onRangeDateClick } = this.props;
+    const emptyCells = this.titleCells === WEEKDAYS.SUNDAY ? this.firstMonthDate.weekday - 1 : 0;
+    const mergedIntervals = !onRangeDateClick && selectedInterval && hovered && selectedInterval.union(hovered);
+    return _range(this.titleCells).map((titleCell) => this.renderTitleCell({ titleCell, month, year })).concat(
+      _range(emptyCells).map(
+        (emptyCell) => this.renderEmptyCell({ emptyCell, month, year })
+      )
+    ).concat(
+      _range(1, this.firstMonthDate.daysInMonth + 1).map(
+        (day) => this.renderDayCell({ day, month, year, mergedIntervals })
+      )
+    );
+  };
+  render() {
+    const { isNeedScroll } = this.props;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ...isNeedScroll && { ref: this.scrollRef },
+        style: {
+          gridTemplateAreas: `"${_repeat("title ", this.titleCells)}"`
+        },
+        className: b$c(),
+        year: this.firstMonthDate.year,
+        month: this.firstMonthDate.month
+      },
+      this.renderMonth()
+    );
+  }
+}
+const i18n$3 = I18n.keyset("components.common.Datepicker");
+const b$b = block("dl-datepicker-months");
+const CELLS_COUNT$1 = 17;
+const EMPTY_CELLS = [5, 9, 13];
+const CELLS$1 = {
+  MONTH: "month",
+  TITLE: "title"
+};
+const COLUMNS$2 = {
+  LEFT: 1,
+  RIGHT: 3
+};
+class Months extends React__default.PureComponent {
+  static propTypes = {
+    year: PropTypes.number.isRequired,
+    from: PropTypes.object,
+    to: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    selectedInterval: PropTypes.object,
+    hovered: PropTypes.object,
+    zone: PropTypes.string,
+    isNeedScroll: PropTypes.bool,
+    onRangeDateClick: PropTypes.func
+  };
+  scrollRef = React__default.createRef();
+  dateTime = DateTime.fromObject({
+    year: this.props.year,
+    month: 1,
+    day: 1,
+    zone: this.props.zone
+  });
+  todayDateTime = DateTime.fromObject({ zone: this.props.zone });
+  getOnRangeDateClick = ({ start, end, isAllRangePicked }) => {
+    return () => this.props.onRangeDateClick({ start, end, isAllRangePicked });
+  };
+  renderMonthes() {
+    const { from, to, min, max, selectedInterval, hovered } = this.props;
+    let currentMonth = 0;
+    let currentColumn = 0;
+    return _range(1, CELLS_COUNT$1).map((cell) => {
+      const isTitle = cell === 1;
+      const isEmpty = EMPTY_CELLS.includes(cell);
+      if (isTitle || isEmpty) {
+        const startYear = this.dateTime;
+        let endYear = this.dateTime.set({ month: MONTHS.DECEMBER });
+        endYear = endYear.set({ day: endYear.daysInMonth });
+        const disabled2 = min && endYear < min || max && startYear > max;
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            key: `title-${cell}-${this.dateTime.year}`,
+            ...isTitle && { className: b$b(CELLS$1.TITLE, { disabled: disabled2 }) },
+            ...isTitle && {
+              onClick: this.getOnRangeDateClick({
+                start: this.dateTime,
+                end: this.dateTime.set({ month: 12, day: 31 }),
+                isAllRangePicked: true
+              })
+            }
+          },
+          isTitle && this.dateTime.year
+        );
+      }
+      currentMonth += 1;
+      currentColumn += 1;
+      if (currentColumn > COLUMNS$2.RIGHT) {
+        currentColumn = COLUMNS$2.LEFT;
+      }
+      const startMonth = this.dateTime.set({
+        day: 1,
+        month: currentMonth
+      });
+      const endMonth = this.dateTime.set({
+        day: startMonth.daysInMonth,
+        month: currentMonth
+      }).endOf("month");
+      const disabled = min && endMonth < min || max && startMonth > max;
+      const monthInterval = Interval.fromDateTimes(startMonth, endMonth);
+      const isContainsFrom = from && monthInterval.contains(from);
+      const isContainsTo = to && monthInterval.end >= to;
+      const isSelected = Boolean(
+        selectedInterval && selectedInterval.intersection(monthInterval)
+      );
+      const isHovered = Boolean(hovered && hovered.intersection(monthInterval));
+      const isContainsHoverStart = isHovered && monthInterval.contains(hovered.start);
+      const isContainsHoverEnd = isHovered && monthInterval.end >= hovered.end;
+      const mods = {
+        disabled,
+        today: monthInterval.contains(this.todayDateTime),
+        selected: isSelected || isHovered
+      };
+      if (isHovered) {
+        mods["left-edge"] = currentColumn === COLUMNS$2.LEFT || isContainsHoverStart;
+        mods["right-edge"] = currentColumn === COLUMNS$2.RIGHT || isContainsHoverEnd;
+      } else {
+        mods["left-edge"] = currentColumn === COLUMNS$2.LEFT || isContainsFrom;
+        mods["right-edge"] = currentColumn === COLUMNS$2.RIGHT || isContainsTo;
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: `${cell}-${this.dateTime.year}`,
+          className: b$b(CELLS$1.MONTH, mods),
+          range: `${startMonth.toISODate()}/${endMonth.toISODate()}`,
+          ...!disabled && {
+            onClick: this.getOnRangeDateClick({
+              start: startMonth,
+              end: endMonth
+            })
+          }
+        },
+        i18n$3(`month_short_${currentMonth}`)
+      );
+    });
+  }
+  render() {
+    const { isNeedScroll } = this.props;
+    return /* @__PURE__ */ React__default.createElement("div", { ...isNeedScroll && { ref: this.scrollRef }, className: b$b() }, this.renderMonthes());
+  }
+}
+const b$a = block("dl-datepicker-quarters");
+const CELLS_COUNT = 5;
+const CELLS = {
+  QUARTER: "quarter",
+  TITLE: "title"
+};
+const COLUMNS$1 = {
+  LEFT: 1,
+  RIGHT: 4
+};
+class Quarters extends React__default.PureComponent {
+  static propTypes = {
+    year: PropTypes.number.isRequired,
+    from: PropTypes.object,
+    to: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    selectedInterval: PropTypes.object,
+    hovered: PropTypes.object,
+    zone: PropTypes.string,
+    isNeedScroll: PropTypes.bool,
+    onRangeDateClick: PropTypes.func
+  };
+  scrollRef = React__default.createRef();
+  dateTime = DateTime.fromObject({
+    year: this.props.year,
+    month: 1,
+    day: 1,
+    zone: this.props.zone
+  });
+  todayDateTime = DateTime.fromObject({ zone: this.props.zone });
+  getOnRangeDateClick = ({ start, end }) => {
+    return () => this.props.onRangeDateClick({ start, end });
+  };
+  renderQuarter() {
+    const { from, to, min, max, selectedInterval, hovered } = this.props;
+    return _range(0, CELLS_COUNT).map((cell) => {
+      if (cell === 0) {
+        const startYear = this.dateTime;
+        let endYear = this.dateTime.set({ month: MONTHS.DECEMBER });
+        endYear = endYear.set({ day: endYear.daysInMonth });
+        const disabled2 = min && endYear < min || max && startYear > max;
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            key: `title-${cell}-${this.dateTime.year}`,
+            className: b$a(CELLS.TITLE, { disabled: disabled2 })
+          },
+          this.dateTime.year
+        );
+      }
+      const quarter = cell;
+      const startQuarter = this.dateTime.set({
+        day: 1,
+        month: quarter * 3 - 2
+      });
+      const endQuarter = this.dateTime.set({
+        day: 1,
+        month: quarter * 3
+      }).endOf("month");
+      const disabled = min && endQuarter < min || max && startQuarter > max;
+      const quarterInterval = Interval.fromDateTimes(startQuarter, endQuarter);
+      const isContainsFrom = from && quarterInterval.contains(from);
+      const isContainsTo = to && quarterInterval.end >= to;
+      const isSelected = Boolean(
+        selectedInterval && selectedInterval.intersection(quarterInterval)
+      );
+      const isHovered = Boolean(hovered && hovered.intersection(quarterInterval));
+      const isContainsHoverStart = isHovered && quarterInterval.contains(hovered.start);
+      const isContainsHoverEnd = isHovered && quarterInterval.end >= hovered.end;
+      const mods = {
+        disabled,
+        selected: isSelected || isHovered,
+        today: quarterInterval.contains(this.todayDateTime)
+      };
+      if (isHovered) {
+        mods["left-edge"] = cell === COLUMNS$1.LEFT || isContainsHoverStart;
+        mods["right-edge"] = cell === COLUMNS$1.RIGHT || isContainsHoverEnd;
+      } else {
+        mods["left-edge"] = cell === COLUMNS$1.LEFT || isContainsFrom;
+        mods["right-edge"] = cell === COLUMNS$1.RIGHT || isContainsTo;
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          key: `${cell}-${this.dateTime.year}`,
+          className: b$a(CELLS.QUARTER, mods),
+          range: `${startQuarter.toISODate()}/${endQuarter.toISODate()}`,
+          ...!disabled && {
+            onClick: this.getOnRangeDateClick({
+              start: startQuarter,
+              end: endQuarter
+            })
+          }
+        },
+        `Q${quarter}`
+      );
+    });
+  }
+  render() {
+    const { isNeedScroll } = this.props;
+    return /* @__PURE__ */ React__default.createElement("div", { ...isNeedScroll && { ref: this.scrollRef }, className: b$a() }, this.renderQuarter());
+  }
+}
+const b$9 = block("dl-datepicker-year-switcher");
+class YearSwitcher extends React__default.Component {
+  static propTypes = {
+    switcherDate: PropTypes.object,
+    offsetTop: PropTypes.number,
+    visible: PropTypes.bool,
+    onShiftMonths: PropTypes.func
+  };
+  static getDerivedStateFromProps(props) {
+    const changedState = {};
+    if (props.switcherDate) {
+      changedState.switcherDate = props.switcherDate;
+    }
+    return changedState;
+  }
+  state = {
+    switcherDate: this.props.switcherDate
+  };
+  onLeftArrowClick = () => this.props.onShiftMonths(-12);
+  onRightArrowClick = () => this.props.onShiftMonths(12);
+  render() {
+    const { offsetTop, visible } = this.props;
+    const { switcherDate } = this.state;
+    if (!visible) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: b$9(),
+        style: {
+          top: offsetTop + 4
+        }
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: b$9("arrow", { left: true }), onClick: this.onLeftArrowClick }, /* @__PURE__ */ React__default.createElement(Icon, { data: ChevronRight })),
+      /* @__PURE__ */ React__default.createElement("div", { className: b$9("value") }, switcherDate.year),
+      /* @__PURE__ */ React__default.createElement("div", { className: b$9("arrow", { right: true }), onClick: this.onRightArrowClick }, /* @__PURE__ */ React__default.createElement(Icon, { data: ChevronRight }))
+    );
+  }
+}
+const b$8 = block("dl-datepicker-years");
+const COLUMNS = {
+  LEFT: 1,
+  RIGHT: 4
+};
+class Years extends React__default.PureComponent {
+  static propTypes = {
+    years: PropTypes.array.isRequired,
+    from: PropTypes.object,
+    to: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    middle: PropTypes.object,
+    selectedInterval: PropTypes.object,
+    hovered: PropTypes.object,
+    zone: PropTypes.string,
+    onRangeDateClick: PropTypes.func
+  };
+  scrollRef = React__default.createRef();
+  todayDateTime = DateTime.fromObject({ zone: this.props.zone });
+  getOnRangeDateClick = ({ start, end }) => {
+    return () => this.props.onRangeDateClick({ start, end });
+  };
+  renderYears() {
+    const { from, to, min, max, middle, zone, years, selectedInterval, hovered } = this.props;
+    let currentColumn = 0;
+    return years.map((year) => {
+      currentColumn += 1;
+      if (currentColumn > COLUMNS.RIGHT) {
+        currentColumn = COLUMNS.LEFT;
+      }
+      const startYear = DateTime.fromObject({
+        year,
+        month: 1,
+        day: 1,
+        zone
+      });
+      const endYear = startYear.endOf("year");
+      const disabled = min && endYear < min || max && startYear > max;
+      const yearInterval = Interval.fromDateTimes(startYear, endYear);
+      const isContainsFrom = from && yearInterval.contains(from);
+      const isContainsTo = to && yearInterval.end >= to;
+      const isSelected = Boolean(
+        selectedInterval && selectedInterval.intersection(yearInterval)
+      );
+      const isHovered = Boolean(hovered && hovered.intersection(yearInterval));
+      const isContainsHoverStart = isHovered && yearInterval.contains(hovered.start);
+      const isContainsHoverEnd = isHovered && yearInterval.end >= hovered.end;
+      const isNeedScroll = middle.year === year;
+      const mods = {
+        disabled,
+        selected: isSelected || isHovered,
+        today: yearInterval.contains(this.todayDateTime)
+      };
+      if (isHovered) {
+        mods["left-edge"] = currentColumn === COLUMNS.LEFT || isContainsHoverStart;
+        mods["right-edge"] = currentColumn === COLUMNS.RIGHT || isContainsHoverEnd;
+      } else {
+        mods["left-edge"] = currentColumn === COLUMNS.LEFT || isContainsFrom;
+        mods["right-edge"] = currentColumn === COLUMNS.RIGHT || isContainsTo;
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ...isNeedScroll && { ref: this.scrollRef },
+          key: year,
+          className: b$8("year", mods),
+          range: `${startYear.toISODate()}/${endYear.toISODate()}`,
+          onClick: this.getOnRangeDateClick({
+            start: startYear,
+            end: endYear
+          })
+        },
+        year
+      );
+    });
+  }
+  render() {
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$8() }, this.renderYears());
+  }
+}
+const i18n$2 = I18n.keyset("components.common.Datepicker");
+const FORMAT_LETTERS = ["y", "M", "d", "h", "H", "m", "s", "S"];
+function createDateTime({ date, zone }) {
+  if (!date) {
+    return void 0;
+  }
+  const type = typeof date;
+  let dateTime;
+  switch (type) {
+    case "string": {
+      dateTime = DateTime.fromISO(date, { zone });
+      break;
+    }
+    case "number": {
+      dateTime = DateTime.fromMillis(date, { zone });
+      break;
+    }
+  }
+  return dateTime;
+}
+function getPlaceholder(format) {
+  return format.split("").map((letter) => {
+    return FORMAT_LETTERS.includes(letter) ? i18n$2(`placeholder_letter_${letter}`) : letter;
+  }).join("");
+}
+function getSearchText({ from, to, format, emptyValueText, range, required }) {
+  switch (true) {
+    case Boolean(!range && from): {
+      return `${from.toFormat(format)}`;
+    }
+    case Boolean(from && !to): {
+      return `${from.toFormat(format)} - ${emptyValueText ? emptyValueText : ""}`;
+    }
+    case Boolean(from && to): {
+      return `${from.toFormat(format)} - ${to.toFormat(format)}`;
+    }
+    // return value_required text if value is required and is not fully filled
+    case (required && (range && !from && !to || !range && !from)): {
+      return i18n$2("value_required");
+    }
+    case Boolean(range): {
+      return emptyValueText ? `${emptyValueText} - ${emptyValueText}` : "";
+    }
+    default: {
+      return emptyValueText || "";
+    }
+  }
+}
+function getZone(offset) {
+  if (!offset && offset !== 0) {
+    return DateTime.local().zoneName;
+  }
+  const offsetHours = Math.round(offset / MINUTES_IN_HOUR);
+  if (offsetHours === 0) {
+    return "UTC";
+  }
+  return `UTC${offsetHours > 0 ? "+" : ""}${offsetHours}`;
+}
+function isValidDate(dateTime) {
+  if (!dateTime) {
+    return false;
+  }
+  return dateTime.isValid;
+}
+function getDefaultPreset({ zone, activeTab, range }) {
+  switch (activeTab) {
+    case "day": {
+      if (range) {
+        return [
+          {
+            title: () => i18n$2("preset_day_7"),
+            start: DateTime.fromObject({ zone }).plus({ day: -6 }).startOf("day"),
+            end: DateTime.fromObject({ zone })
+          },
+          {
+            title: () => i18n$2("preset_day_30"),
+            start: DateTime.fromObject({ zone }).plus({ day: -29 }).startOf("day"),
+            end: DateTime.fromObject({ zone })
+          },
+          {
+            title: () => i18n$2("preset_day_90"),
+            start: DateTime.fromObject({ zone }).plus({ day: -89 }).startOf("day"),
+            end: DateTime.fromObject({ zone })
+          },
+          {
+            title: () => i18n$2("preset_day_365"),
+            start: DateTime.fromObject({ zone }).plus({ day: -364 }).startOf("day"),
+            end: DateTime.fromObject({ zone })
+          }
+        ];
+      }
+      return [
+        {
+          title: () => i18n$2("preset_day_today"),
+          start: DateTime.fromObject({ zone }).startOf("day"),
+          end: DateTime.fromObject({ zone })
+        },
+        {
+          title: () => i18n$2("preset_day_yesterday"),
+          start: DateTime.fromObject({ zone }).plus({ day: -1 }).startOf("day"),
+          end: DateTime.fromObject({ zone }).plus({ day: -1 })
+        },
+        {
+          title: () => i18n$2("preset_day_two_days_ago"),
+          start: DateTime.fromObject({ zone }).plus({ day: -2 }).startOf("day"),
+          end: DateTime.fromObject({ zone }).plus({ day: -2 })
+        }
+      ];
+    }
+    case "week": {
+      return [
+        {
+          title: () => i18n$2("preset_week_current"),
+          start: DateTime.fromObject({ zone }).startOf("week"),
+          end: DateTime.fromObject({ zone }).endOf("week")
+        },
+        {
+          title: () => i18n$2("preset_week_past"),
+          start: DateTime.fromObject({ zone }).startOf("week").plus({ day: -7 }),
+          end: DateTime.fromObject({ zone }).startOf("week").plus({ day: -1 })
+        }
+      ];
+    }
+    case "month": {
+      return [
+        {
+          title: () => i18n$2("preset_current"),
+          start: DateTime.fromObject({ zone }).startOf("month"),
+          end: DateTime.fromObject({ zone }).endOf("month")
+        },
+        {
+          title: () => i18n$2("preset_past"),
+          start: DateTime.fromObject({ zone }).startOf("month").plus({ day: -1 }).startOf("month"),
+          end: DateTime.fromObject({ zone }).startOf("month").plus({ day: -1 })
+        }
+      ];
+    }
+    case "quarter": {
+      return [
+        {
+          title: () => i18n$2("preset_current"),
+          start: DateTime.fromObject({ zone }).startOf("quarter"),
+          end: DateTime.fromObject({ zone }).endOf("quarter")
+        },
+        {
+          title: () => i18n$2("preset_past"),
+          start: DateTime.fromObject({ zone }).startOf("quarter").plus({ day: -1 }).startOf("quarter"),
+          end: DateTime.fromObject({ zone }).startOf("quarter").plus({ day: -1 })
+        }
+      ];
+    }
+    case "year": {
+      return [
+        {
+          title: () => i18n$2("preset_current"),
+          start: DateTime.fromObject({ zone }).startOf("year"),
+          end: DateTime.fromObject({ zone }).endOf("year")
+        },
+        {
+          title: () => i18n$2("preset_past"),
+          start: DateTime.fromObject({ zone }).startOf("year").plus({ day: -1 }).startOf("year"),
+          end: DateTime.fromObject({ zone }).startOf("year").plus({ day: -1 })
+        }
+      ];
+    }
+  }
+}
+function getHashedData(data) {
+  return JSON.stringify(data);
+}
+function resolveDates({ from, to }) {
+  let resolveFrom = from;
+  let resolveTo = to;
+  const isFromValid = isValidDate(resolveFrom);
+  const isToValid = isValidDate(resolveTo);
+  if (isFromValid && isToValid && resolveTo < resolveFrom) {
+    [resolveFrom, resolveTo] = [resolveTo, resolveFrom];
+  }
+  if (!isFromValid && isToValid) {
+    [resolveFrom, resolveTo] = [resolveTo, resolveFrom];
+  }
+  resolveFrom = isValidDate(resolveFrom) ? resolveFrom : void 0;
+  resolveTo = isValidDate(resolveTo) ? resolveTo : void 0;
+  return [resolveFrom, resolveTo];
+}
+function checkBrowser$1() {
+  const agent = navigator.userAgent;
+  if (agent.indexOf("Firefox") !== -1 && parseFloat(agent.substring(agent.indexOf("Firefox") + 8)) >= 3.6) {
+    return "Firefox";
+  } else if (agent.indexOf("Safari") !== -1 && agent.indexOf("Version") !== -1 && parseFloat(agent.substring(agent.indexOf("Version") + 8).split(" ")[0]) >= 5) {
+    return "Safari";
+  }
+  return "Good Browser";
+}
+function getListWithoutNullableValues(...args) {
+  return args.filter(Boolean);
+}
+function hasTimeUnitsInFormat(format) {
+  return /H|h|m|s/.test(format);
+}
+const fillEmptyToDate = (from) => {
+  const diff = from.toUTC().startOf("day").diff(from).toMillis();
+  return diff === 0 ? from.toUTC().endOf("day") : from;
+};
+const b$7 = block("dl-datepicker-calendar");
+const MONTH_NARGIN_BOTTOM = 5;
+const MIN_YEAR = 1e3;
+const MAX_YEAR = 3e3;
+const THRESHOLD = {
+  [TABS.DAY]: 150,
+  [TABS.WEEK]: 150,
+  [TABS.MONTH]: 150,
+  [TABS.QUARTER]: 100,
+  [TABS.YEAR]: 50
+};
+const SHIFT = {
+  [TABS.DAY]: 4,
+  [TABS.WEEK]: 4,
+  [TABS.MONTH]: 48,
+  [TABS.QUARTER]: 344,
+  [TABS.YEAR]: 1008
+};
+const getWarningMessage = ({ from, min, max }) => {
+  const date = min ? min : max;
+  const dateType2 = min ? "min" : "max";
+  const adverb = min ? "less" : "more";
+  return `'from' date (${from.toString()}) is ${adverb} than '${dateType2}' date (${date.toString()})`;
+};
+const getMiddleDate = ({ zone, from, min, max }) => {
+  let middle = from ? from : DateTime.fromObject({ zone });
+  let warningMessage;
+  if (from) {
+    if (max && from > max) {
+      middle = max;
+      warningMessage = getWarningMessage({ from, max });
+    } else if (min && from < min) {
+      middle = min;
+      warningMessage = getWarningMessage({ from, min });
+    }
+  } else if (max) {
+    middle = max;
+  } else if (min) {
+    middle = min;
+  }
+  if (warningMessage) {
+    console.warn(warningMessage);
+  }
+  return middle;
+};
+const getInterval = ({ zone, activeTab, from, min, max, init }) => {
+  const middle = getMiddleDate({ zone, from, min, max });
+  const start = middle.plus({ month: -SHIFT[activeTab] });
+  const end = middle.plus({ month: SHIFT[activeTab] });
+  return {
+    middle,
+    interval: Interval.fromDateTimes(start, end)
+  };
+};
+const getOffsetTop = (calendarNode) => {
+  let offset = 0;
+  if (!calendarNode) {
+    return offset;
+  }
+  let sib = calendarNode.previousSibling;
+  while (sib) {
+    offset += sib.clientHeight;
+    sib = sib.previousSibling;
+  }
+  return offset;
+};
+const getSwitcherDate = ({ zone, nodes, currentScrollTop }) => {
+  let switcherDate = null;
+  nodes.forEach((node) => {
+    const year = node.getAttribute("year");
+    const month = node.getAttribute("month");
+    if (!year || !month) {
+      return;
+    }
+    if (currentScrollTop >= node.offsetTop - node.clientHeight && currentScrollTop < node.offsetTop) {
+      switcherDate = DateTime.fromObject({
+        zone,
+        year: Number(year),
+        month: Number(month)
+      });
+    }
+  });
+  return switcherDate;
+};
+class Calendar extends React__default.Component {
+  static propTypes = {
+    zone: PropTypes.string,
+    activeTab: PropTypes.string,
+    from: PropTypes.object,
+    to: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    pick: PropTypes.number,
+    range: PropTypes.bool,
+    scrollCalendar: PropTypes.bool,
+    onDateClick: PropTypes.func,
+    onRangeDateClick: PropTypes.func
+  };
+  static getDerivedStateFromProps(props, state) {
+    const changedState = {
+      prevProps: props
+    };
+    if (props.activeTab !== state.prevProps.activeTab || props.from !== state.prevProps.from && props.scrollCalendar && !state.interval.contains(props.from) || props.max !== state.prevProps.max || props.min !== state.prevProps.min) {
+      const { interval, middle } = getInterval({
+        zone: props.zone,
+        activeTab: props.activeTab,
+        from: props.from,
+        min: props.min,
+        max: props.max
+      });
+      changedState.interval = interval;
+      changedState.middle = middle;
+      changedState.switcherDate = null;
+    }
+    if (props.from !== state.prevProps.from) {
+      changedState.switcherDate = null;
+    }
+    return changedState;
+  }
+  constructor(props) {
+    super(props);
+    const { zone, activeTab, from, min, max } = this.props;
+    this.containerRef = React__default.createRef();
+    this.contentRef = React__default.createRef();
+    const { interval, middle } = getInterval({ zone, activeTab, from, min, max });
+    this.state = {
+      interval,
+      middle,
+      prevProps: this.props,
+      hovered: void 0,
+      switcherDate: middle,
+      switcherOffset: 0
+    };
+  }
+  componentDidMount() {
+    const browser = checkBrowser$1();
+    this.isNeedScrollOffsetHandling = browser === "Safari" || browser === "Firefox";
+    this.containerRef.current.addEventListener("scroll", throttle(this.onScroll, 5));
+    this.scrollTo();
+    this.setState({
+      switcherOffset: getOffsetTop(this.containerRef.current)
+    });
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.switcherClicked || prevProps.activeTab !== this.props.activeTab || prevProps.from !== this.props.from && this.props.scrollCalendar || prevProps.max !== this.props.max || prevProps.min !== this.props.min) {
+      this.scrollTo();
+    }
+    const switcherOffset = getOffsetTop(this.containerRef.current);
+    if ((switcherOffset || switcherOffset === 0) && switcherOffset !== this.state.switcherOffset) {
+      this.setState({ switcherOffset });
+    }
+  }
+  componentWillUnmount() {
+    this.containerRef.current.removeEventListener("scroll", this.onScroll);
+  }
+  onScroll = (e) => {
+    const container = this.containerRef.current;
+    if (!container) {
+      return;
+    }
+    const { clientHeight, scrollHeight, scrollTop } = e.target;
+    const { zone, activeTab } = this.props;
+    const { interval } = this.state;
+    const changedState = {};
+    const threshold = THRESHOLD[activeTab];
+    let switcherDate = null;
+    let diff;
+    let scrollToTop;
+    if (activeTab === TABS.DAY || activeTab === TABS.WEEK) {
+      switcherDate = getSwitcherDate({
+        zone,
+        nodes: Array.from(e.target.children),
+        currentScrollTop: scrollTop
+      });
+    }
+    if (scrollTop < threshold && interval.start.year >= MIN_YEAR) {
+      scrollToTop = true;
+      container.scrollTop = threshold;
+      const start = interval.start.plus({ month: -SHIFT[activeTab] });
+      const end = interval.end.plus({ month: -SHIFT[activeTab] });
+      changedState.interval = Interval.fromDateTimes(start, end);
+      changedState.switcherDate = null;
+      diff = changedState.interval.difference(this.state.interval);
+    }
+    if (scrollTop + clientHeight > scrollHeight - threshold && interval.end.year <= MAX_YEAR) {
+      container.scrollTop = scrollHeight - threshold - clientHeight;
+      const start = interval.start.plus({ month: SHIFT[activeTab] });
+      const end = interval.end.plus({ month: SHIFT[activeTab] });
+      changedState.interval = Interval.fromDateTimes(start, end);
+      changedState.switcherDate = null;
+      diff = changedState.interval.difference(this.state.interval);
+    }
+    if (!this.state.switcherDate || switcherDate && this.state.switcherDate && switcherDate.year !== this.state.switcherDate.year) {
+      changedState.switcherDate = switcherDate;
+    }
+    if (Object.keys(changedState).length) {
+      this.setState(changedState, () => {
+        if (changedState.interval && this.isNeedScrollOffsetHandling) {
+          switch (activeTab) {
+            case TABS.DAY:
+            case TABS.WEEK: {
+              let browserOffset = 0;
+              Array.from(container.children).forEach((node) => {
+                const year = node.getAttribute("year");
+                const month = node.getAttribute("month");
+                const dateTime = DateTime.fromObject({
+                  zone,
+                  year: Number(year),
+                  month: Number(month)
+                });
+                if (diff[0].start.startOf("month") <= dateTime && diff[0].end >= dateTime) {
+                  browserOffset += node.offsetHeight + MONTH_NARGIN_BOTTOM;
+                }
+              });
+              if (scrollToTop) {
+                this.containerRef.current.scrollTop = browserOffset;
+              } else {
+                this.containerRef.current.scrollTop = this.containerRef.current.scrollHeight - clientHeight - browserOffset;
+              }
+              break;
+            }
+            case TABS.MONTH: {
+              if (scrollToTop) {
+                this.containerRef.current.scrollTop = 317 * 3 - 34;
+              } else {
+                this.containerRef.current.scrollTop = scrollHeight - 317 * 3 - 198;
+              }
+              break;
+            }
+            case TABS.QUARTER: {
+              if (scrollToTop) {
+                this.containerRef.current.scrollTop = this.containerRef.current.scrollHeight / 2 + 74;
+              } else {
+                this.containerRef.current.scrollTop = this.containerRef.current.scrollHeight / 2 - 312;
+              }
+              break;
+            }
+            case TABS.YEAR: {
+              if (scrollToTop) {
+                this.containerRef.current.scrollTop = this.containerRef.current.scrollHeight / 2 + 50;
+              } else {
+                this.containerRef.current.scrollTop = this.containerRef.current.scrollHeight / 2 - 284;
+              }
+            }
+          }
+        }
+      });
+    }
+  };
+  scrollTo = () => {
+    const container = this.containerRef.current;
+    const content = this.contentRef.current;
+    if (!content) {
+      return;
+    }
+    const nodeToScroll = content.scrollRef.current;
+    if (!nodeToScroll) {
+      return;
+    }
+    const offset = getOffsetTop(container);
+    container.scrollTop = nodeToScroll.offsetTop - offset;
+  };
+  onSwitcherClick = (middleShift) => {
+    const { zone, activeTab, from } = this.props;
+    let switcherDate = null;
+    if (this.state.switcherDate) {
+      switcherDate = this.state.switcherDate;
+    } else {
+      switcherDate = from ? from : DateTime.fromObject({ zone });
+    }
+    const middle = switcherDate.plus({ month: middleShift });
+    const start = middle.plus({ month: -SHIFT[activeTab] });
+    const end = middle.plus({ month: SHIFT[activeTab] });
+    this.setState(
+      {
+        interval: Interval.fromDateTimes(start, end),
+        switcherDate: middle,
+        switcherClicked: true
+      },
+      () => this.setState({ switcherClicked: false })
+    );
+  };
+  getMouseOverHandler() {
+    const { zone, activeTab, range } = this.props;
+    switch (activeTab) {
+      case TABS.DAY: {
+        return range ? this.onDayMouseOver : null;
+      }
+      case TABS.WEEK: {
+        return this.onWeekMouseOver;
+      }
+      default: {
+        return (e) => {
+          const { from, to, pick } = this.props;
+          const range2 = e.target.getAttribute("range");
+          if (!range2 || !from || !to || !pick) {
+            if (this.state.hovered && !pick) {
+              this.setState({ hovered: void 0 });
+            }
+            return;
+          }
+          const hovered = Interval.fromDateTimes(from, to).union(
+            Interval.fromISO(range2, { zone })
+          );
+          if (!this.state.hovered || !hovered.equals(this.state.hovered)) {
+            this.setState({ hovered });
+          }
+        };
+      }
+    }
+  }
+  onDayMouseOver = (e) => {
+    const { from, to, zone } = this.props;
+    const date = e.target.getAttribute("date");
+    if (!date || !from || to) {
+      if (this.state.hovered && to) {
+        this.setState({ hovered: void 0 });
+      }
+      return;
+    }
+    const dateTime = DateTime.fromISO(date, { zone });
+    let hovered;
+    if (from < dateTime) {
+      hovered = Interval.fromDateTimes(from, dateTime.endOf("day"));
+    } else {
+      hovered = Interval.fromDateTimes(dateTime, from.endOf("day"));
+    }
+    if (!this.state.hovered || !hovered.equals(this.state.hovered)) {
+      this.setState({ hovered });
+    }
+  };
+  onWeekMouseOver = (e) => {
+    const { zone } = this.props;
+    const date = e.target.getAttribute("date");
+    if (!date) {
+      return;
+    }
+    const dateTime = DateTime.fromISO(date, { zone });
+    const monday = dateTime.startOf("week");
+    const sunday = dateTime.endOf("week");
+    const hovered = Interval.fromDateTimes(monday, sunday);
+    if (!this.state.hovered || !hovered.equals(this.state.hovered)) {
+      this.setState({ hovered });
+    }
+  };
+  onMouseLeave = () => {
+    if (this.state.hovered) {
+      this.setState({ hovered: void 0 });
+    }
+  };
+  renderDayContent() {
+    const { zone, activeTab, to, min, max } = this.props;
+    const { switcherDate, hovered } = this.state;
+    const months = [];
+    const from = this.props.from ? this.props.from : DateTime.fromObject({ zone });
+    const isDefaultFrom = !this.props.from;
+    let interval = this.state.interval;
+    let start = interval.start;
+    const selectedInterval = to ? Interval.fromDateTimes(from.startOf("day"), to.endOf("day")) : Interval.fromDateTimes(from.startOf("day"), from.endOf("day"));
+    while (start) {
+      let isNeedScroll;
+      if (switcherDate) {
+        isNeedScroll = switcherDate.month === start.month && switcherDate.year === start.year;
+      } else if (isDefaultFrom && max) {
+        isNeedScroll = max.month === start.month && max.year === start.year;
+      } else {
+        isNeedScroll = from.month === start.month && from.year === start.year;
+      }
+      months.push(
+        /* @__PURE__ */ React__default.createElement(
+          Month,
+          {
+            ...isNeedScroll && { ref: this.contentRef },
+            key: `month-${start.month}-${start.year}`,
+            year: start.year,
+            month: start.month,
+            from,
+            to,
+            min: min && min.startOf("day"),
+            max,
+            zone,
+            selectedInterval,
+            hovered,
+            isDefaultFrom,
+            isNeedScroll,
+            onDateClick: this.props.onDateClick,
+            onRangeDateClick: activeTab === TABS.WEEK ? this.props.onRangeDateClick : void 0
+          }
+        )
+      );
+      interval = interval.set({ start: start.plus({ month: 1 }) });
+      start = interval.start;
+    }
+    return months;
+  }
+  renderMonthContent() {
+    const { to, min, max, zone } = this.props;
+    const { hovered, middle } = this.state;
+    const years = [];
+    const from = this.props.from ? this.props.from : DateTime.fromObject({ zone });
+    let interval = this.state.interval;
+    let start = interval.start;
+    const selectedInterval = from && to && Interval.fromDateTimes(from, to);
+    while (start) {
+      const isNeedScroll = middle.year === start.year;
+      years.push(
+        /* @__PURE__ */ React__default.createElement(
+          Months,
+          {
+            ...isNeedScroll && { ref: this.contentRef },
+            key: `year-${start.year}`,
+            year: start.year,
+            from,
+            to,
+            min,
+            max,
+            zone,
+            selectedInterval,
+            hovered,
+            isNeedScroll,
+            onRangeDateClick: this.props.onRangeDateClick
+          }
+        )
+      );
+      interval = interval.set({ start: start.plus({ month: 12 }) });
+      start = interval.start;
+    }
+    return years;
+  }
+  renderQuartersContent() {
+    const { to, min, max, zone } = this.props;
+    const { hovered, middle } = this.state;
+    const years = [];
+    const from = this.props.from ? this.props.from : DateTime.fromObject({ zone });
+    let interval = this.state.interval;
+    let start = interval.start;
+    const selectedInterval = from && to && Interval.fromDateTimes(from, to);
+    while (start) {
+      const isNeedScroll = middle.year === start.year;
+      years.push(
+        /* @__PURE__ */ React__default.createElement(
+          Quarters,
+          {
+            ...isNeedScroll && { ref: this.contentRef },
+            key: `quarter-year-${start.year}`,
+            year: start.year,
+            from,
+            to,
+            min,
+            max,
+            zone,
+            selectedInterval,
+            hovered,
+            isNeedScroll,
+            onRangeDateClick: this.props.onRangeDateClick
+          }
+        )
+      );
+      interval = interval.set({ start: start.plus({ month: 12 }) });
+      start = interval.start;
+    }
+    return years;
+  }
+  renderYearsContent() {
+    const { to, min, max, zone } = this.props;
+    const { hovered, middle } = this.state;
+    const from = this.props.from ? this.props.from : DateTime.fromObject({ zone });
+    const isDefaultFrom = !this.props.from;
+    const selectedInterval = from && to && Interval.fromDateTimes(from, to);
+    const yearsCount = this.state.interval.length("years");
+    const startYear = this.state.interval.start.year;
+    return /* @__PURE__ */ React__default.createElement(
+      Years,
+      {
+        ref: this.contentRef,
+        years: _range(startYear, startYear + yearsCount),
+        from,
+        to,
+        min,
+        max,
+        middle,
+        zone,
+        isDefaultFrom,
+        selectedInterval,
+        hovered,
+        onRangeDateClick: this.props.onRangeDateClick
+      }
+    );
+  }
+  // eslint-disable-next-line consistent-return
+  renderContent() {
+    const { activeTab } = this.props;
+    switch (activeTab) {
+      case TABS.DAY:
+      case TABS.WEEK: {
+        return this.renderDayContent();
+      }
+      case TABS.MONTH: {
+        return this.renderMonthContent();
+      }
+      case TABS.QUARTER: {
+        return this.renderQuartersContent();
+      }
+      case TABS.YEAR: {
+        return this.renderYearsContent();
+      }
+    }
+  }
+  render() {
+    const { activeTab } = this.props;
+    const { switcherDate, switcherOffset } = this.state;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref: this.containerRef,
+        className: b$7(),
+        onMouseOver: this.getMouseOverHandler(),
+        onMouseLeave: this.onMouseLeave
+      },
+      /* @__PURE__ */ React__default.createElement(
+        YearSwitcher,
+        {
+          switcherDate,
+          offsetTop: switcherOffset,
+          onShiftMonths: this.onSwitcherClick,
+          visible: activeTab === TABS.DAY || activeTab === TABS.WEEK
+        }
+      ),
+      this.renderContent()
+    );
+  }
+}
+const b$6 = block("dl-datepicker-presets");
+class Presets extends React__default.PureComponent {
+  static propTypes = {
+    zone: PropTypes.string,
+    activeTab: PropTypes.string,
+    range: PropTypes.bool,
+    onRangeDateClick: PropTypes.func
+  };
+  renderPresetItem({ title, start, end }) {
+    const presetTitle = typeof title === "function" ? title() : title;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: presetTitle,
+        className: b$6("item"),
+        onClick: () => this.props.onRangeDateClick({
+          start,
+          end,
+          isAllRangePicked: true,
+          scrollCalendar: true
+        })
+      },
+      presetTitle
+    );
+  }
+  render() {
+    const { zone, activeTab, range } = this.props;
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$6() }, getDefaultPreset({ zone, activeTab, range }).map(
+      (preset) => this.renderPresetItem(preset)
+    ));
+  }
+}
+const i18n$1 = I18n.keyset("components.common.Datepicker");
+const b$5 = block("dl-datepicker-popup-content");
+class PopupContent extends React__default.PureComponent {
+  static propTypes = {
+    from: PropTypes.object,
+    to: PropTypes.object,
+    min: PropTypes.object,
+    max: PropTypes.object,
+    zone: PropTypes.string,
+    activeTab: PropTypes.string,
+    mod: PropTypes.string,
+    pick: PropTypes.number,
+    range: PropTypes.bool,
+    scrollCalendar: PropTypes.bool,
+    showTabs: PropTypes.bool,
+    showApply: PropTypes.bool,
+    onDateClick: PropTypes.func,
+    onRangeDateClick: PropTypes.func,
+    onSelectTab: PropTypes.func,
+    onSubmit: PropTypes.func
+  };
+  render() {
+    const {
+      from,
+      to,
+      min,
+      max,
+      zone,
+      activeTab,
+      mod,
+      pick,
+      range,
+      scrollCalendar,
+      showTabs,
+      showApply
+    } = this.props;
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$5(null, mod) }, showTabs && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: b$5("tabs") }, /* @__PURE__ */ React__default.createElement(TabProvider, { value: activeTab, onUpdate: this.props.onSelectTab }, /* @__PURE__ */ React__default.createElement(TabList, null, getTabs().map((item) => /* @__PURE__ */ React__default.createElement(Tab, { key: item.id, value: item.id }, item.title))))), range && /* @__PURE__ */ React__default.createElement(
+      Presets,
+      {
+        zone,
+        activeTab,
+        range,
+        onRangeDateClick: this.props.onRangeDateClick
+      }
+    )), /* @__PURE__ */ React__default.createElement(
+      Calendar,
+      {
+        from,
+        to,
+        min,
+        max,
+        zone,
+        activeTab,
+        pick,
+        range,
+        scrollCalendar,
+        onDateClick: this.props.onDateClick,
+        onRangeDateClick: this.props.onRangeDateClick
+      }
+    ), showApply && /* @__PURE__ */ React__default.createElement("div", { className: b$5("apply-btn") }, /* @__PURE__ */ React__default.createElement(Button, { view: "action", size: "l", width: "max", onClick: this.props.onSubmit }, i18n$1("apply_button_text"))));
+  }
+}
+const i18n = I18n.keyset("components.common.Datepicker");
+const b$4 = block("dl-datepicker");
+const dateType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+const getModifier$1 = (name) => b$4({ [name]: true }).split(" ")[1];
+const datepickerDefaultProps = {
+  format: DISPLAY_FORMAT.DATE,
+  outputFormat: OUTPUT_FORMAT.DATETIME,
+  range: true,
+  allowNullableValues: false,
+  showApply: false,
+  hasClear: true,
+  disabled: false,
+  controlSize: "m",
+  fillPartialInterval: false
+};
+class Datepicker extends React__default.PureComponent {
+  static propTypes = {
+    onUpdate: PropTypes.func.isRequired,
+    onError: PropTypes.func,
+    from: dateType,
+    to: dateType,
+    min: dateType,
+    max: dateType,
+    format: PropTypes.string,
+    emptyValueText: PropTypes.string,
+    placeholder: PropTypes.string,
+    timezoneOffset: PropTypes.number,
+    outputFormat: PropTypes.oneOf([OUTPUT_FORMAT.DATE, OUTPUT_FORMAT.DATETIME]),
+    scale: PropTypes.oneOf([TABS.DAY, TABS.WEEK, TABS.MONTH, TABS.QUARTER, TABS.YEAR]),
+    controlWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    range: PropTypes.bool,
+    allowNullableValues: PropTypes.bool,
+    showApply: PropTypes.bool,
+    hasClear: PropTypes.bool,
+    disabled: PropTypes.bool,
+    controlSize: PropTypes.oneOf(["s", "m", "l", "xl"]),
+    className: PropTypes.string,
+    popupClassName: PropTypes.string,
+    required: PropTypes.bool,
+    hasValidationError: PropTypes.bool,
+    fillPartialInterval: PropTypes.bool,
+    label: PropTypes.string
+  };
+  static defaultProps = datepickerDefaultProps;
+  static getDerivedStateFromProps(props, state) {
+    const changedState = {};
+    const zone = getZone(props.timezoneOffset);
+    if (props.from !== state.prevProps.from || props.to !== state.prevProps.to || props.timezoneOffset !== state.prevProps.timezoneOffset) {
+      changedState.from = createDateTime({ date: props.from, zone });
+      changedState.to = createDateTime({ date: props.to, zone });
+      [changedState.from, changedState.to] = resolveDates({
+        from: changedState.from,
+        to: changedState.to
+      });
+      changedState.searchText = getSearchText({
+        from: changedState.from,
+        to: changedState.to,
+        format: props.format,
+        emptyValueText: props.emptyValueText,
+        range: props.range,
+        required: props.required
+      });
+      changedState.zone = zone;
+      changedState.lastValidHash = getHashedData({
+        from: changedState.from,
+        to: changedState.to
+      });
+    }
+    if (props.min !== state.prevProps.min) {
+      const min = createDateTime({ date: props.min, zone });
+      changedState.min = isValidDate(min) ? min : void 0;
+    }
+    if (props.max !== state.prevProps.max) {
+      const max = createDateTime({ date: props.max, zone });
+      changedState.max = isValidDate(max) ? max : void 0;
+    }
+    if (props.disabled && !state.prevProps.disabled) {
+      changedState.error = "";
+    }
+    changedState.prevProps = props;
+    return changedState;
+  }
+  constructor(props) {
+    super(props);
+    const { format, timezoneOffset, emptyValueText, range, required } = this.props;
+    const zone = getZone(timezoneOffset);
+    let from = createDateTime({ date: this.props.from, zone });
+    let to = createDateTime({ date: this.props.to, zone });
+    const min = createDateTime({ date: this.props.min, zone });
+    const max = createDateTime({ date: this.props.max, zone });
+    [from, to] = resolveDates({ from, to });
+    const searchText = getSearchText({
+      from,
+      to,
+      format,
+      emptyValueText,
+      range,
+      required
+    });
+    this.ControlNodeRef = React__default.createRef();
+    this.state = {
+      searchText,
+      from,
+      to,
+      zone,
+      min: isValidDate(min) ? min : void 0,
+      max: isValidDate(max) ? max : void 0,
+      lastValidHash: getHashedData({ from, to }),
+      prevProps: this.props,
+      activeTab: "day",
+      pick: 0,
+      error: "",
+      active: false
+    };
+  }
+  static SCALE = TABS;
+  static DISPLAY_FORMAT = DISPLAY_FORMAT;
+  static OUTPUT_FORMAT = OUTPUT_FORMAT;
+  get placeholder() {
+    const { format, range, placeholder } = this.props;
+    if (placeholder) {
+      return placeholder;
+    }
+    const placeholderPart = getPlaceholder(format);
+    return `${placeholderPart}${range ? ` - ${placeholderPart}` : ""}`;
+  }
+  isInvalidState() {
+    const { range, allowNullableValues } = this.props;
+    const { invalidInput, from, to } = this.state;
+    if (allowNullableValues) {
+      return invalidInput;
+    }
+    if (range) {
+      return !from || !to || invalidInput;
+    }
+    return !from || invalidInput;
+  }
+  getErrorText() {
+    const { range, onError } = this.props;
+    if (!this.isInvalidState() || onError) {
+      return "";
+    }
+    return range ? i18n("error_dates_range") : i18n("error_date");
+  }
+  onSelectTab = (activeTab) => {
+    this.setState({
+      activeTab,
+      pick: 0
+    });
+  };
+  onDateClick = ({ dateTime }) => {
+    const state = {
+      pick: 0,
+      error: "",
+      invalidInput: false,
+      scrollCalendar: false
+    };
+    if (this.state.from && this.state.to || this.state.from && !this.props.range) {
+      state.from = dateTime;
+      state.to = void 0;
+    } else if (!this.state.from && !this.state.to) {
+      state.from = dateTime;
+    } else {
+      const isStartBeforeDateTime = this.state.from < dateTime;
+      if (isStartBeforeDateTime) {
+        state.from = this.state.from;
+        state.to = dateTime;
+      } else {
+        state.from = dateTime;
+        state.to = this.state.from;
+      }
+    }
+    if (state.to) {
+      state.to = state.to.endOf("day");
+    }
+    state.searchText = getSearchText({
+      from: state.from,
+      to: state.to,
+      format: this.props.format,
+      emptyValueText: this.props.emptyValueText,
+      range: this.props.range,
+      required: this.props.required
+    });
+    this.setState(state, () => {
+      const { range, showApply } = this.props;
+      const { from, to } = this.state;
+      if (!showApply && range && from && to || !showApply && !range && from) {
+        this.onUpdate();
+      }
+    });
+  };
+  onRangeDateClick = ({ start, end, isAllRangePicked, scrollCalendar }) => {
+    const { range } = this.props;
+    let pick = this.state.pick + 1;
+    let from, to;
+    switch (true) {
+      case (pick === 1 || isAllRangePicked || !range): {
+        from = start;
+        to = end;
+        if (isAllRangePicked || !range) {
+          pick = 0;
+        }
+        break;
+      }
+      case pick === 2: {
+        const dates = getListWithoutNullableValues(
+          start,
+          end,
+          this.state.from,
+          this.state.to
+        );
+        from = DateTime.min(...dates);
+        to = DateTime.max(...dates);
+        pick = 0;
+        break;
+      }
+    }
+    if (to) {
+      to = to.endOf("day");
+    }
+    const searchText = getSearchText({
+      from,
+      to,
+      format: this.props.format,
+      emptyValueText: this.props.emptyValueText,
+      range: this.props.range,
+      required: this.props.required
+    });
+    this.setState(
+      {
+        searchText,
+        pick,
+        from,
+        to,
+        scrollCalendar,
+        error: "",
+        invalidInput: false
+      },
+      () => {
+        const { showApply } = this.props;
+        const { from: from2, to: to2, pick: pick2 } = this.state;
+        if (!showApply && from2 && to2 && pick2 === 0) {
+          this.onUpdate();
+        }
+      }
+    );
+  };
+  onInputUpdate = (searchText) => {
+    const { format, range } = this.props;
+    const { zone } = this.state;
+    const dates = searchText.split(/\s-\s?/);
+    let from;
+    let to;
+    let isFromValid = true;
+    let isToValid = true;
+    if (dates[0]) {
+      from = DateTime.fromFormat(dates[0].trim(), format, { zone });
+      isFromValid = isValidDate(from);
+    }
+    if (dates[1] && dates[1] !== this.props.emptyValueText) {
+      to = DateTime.fromFormat(dates[1].trim(), format, { zone });
+      isToValid = isValidDate(to);
+    }
+    if (range) {
+      [from, to] = resolveDates({ from, to });
+      if (to && !hasTimeUnitsInFormat(format)) {
+        to = to.endOf("day");
+      }
+    }
+    if (!isFromValid || !isToValid) {
+      this.setState({
+        searchText,
+        invalidInput: true
+      });
+      return;
+    }
+    const resetPickCounter = !searchText || range && !to;
+    this.setState(
+      {
+        searchText,
+        from,
+        to: range ? to : void 0,
+        error: "",
+        invalidInput: false,
+        ...resetPickCounter ? { pick: 0 } : {}
+      },
+      () => {
+        if (!from && !to) {
+          this.ControlNodeRef.current.focus();
+        }
+      }
+    );
+  };
+  onInputKeyPress = (e) => {
+    switch (e.key) {
+      case "Enter": {
+        this.ControlNodeRef.current.blur();
+        this.onUpdate();
+        break;
+      }
+    }
+  };
+  onInputFocus = () => {
+    if (!this.state.active) {
+      this.setState({ active: true });
+    }
+  };
+  onClose = () => {
+    if (document.activeElement === this.ControlNodeRef.current) {
+      return;
+    }
+    const { format, emptyValueText, range, required } = this.props;
+    const { from, to, lastValidHash } = this.state;
+    const currentHash = getHashedData({ from, to });
+    if (lastValidHash === currentHash) {
+      const searchText = getSearchText({
+        from,
+        to,
+        format,
+        emptyValueText,
+        range,
+        required
+      });
+      this.setState({ searchText, active: false });
+    } else {
+      this.onUpdate();
+    }
+  };
+  onUpdate = () => {
+    const { allowNullableValues, onError, fillPartialInterval } = this.props;
+    const { min, max } = this.state;
+    if (this.isInvalidState()) {
+      this.setState(
+        {
+          error: this.getErrorText(),
+          active: false
+        },
+        () => onError && onError()
+      );
+      return;
+    }
+    let from = this.state.from;
+    let to = this.state.to;
+    if (min && from && from < min) {
+      from = min;
+    }
+    if (min && to && from < min) {
+      to = min;
+    }
+    if (max && from && from > max) {
+      from = max;
+    }
+    if (max && to && to > max) {
+      to = max;
+    }
+    [from, to] = resolveDates({ from, to });
+    if (fillPartialInterval && from && !to) {
+      to = fillEmptyToDate(from);
+    }
+    const searchText = getSearchText({
+      from,
+      to,
+      format: this.props.format,
+      emptyValueText: this.props.emptyValueText,
+      range: this.props.range,
+      required: this.props.required
+    });
+    this.ControlNodeRef.current.blur();
+    const showSearchText = Boolean(allowNullableValues || from && to);
+    this.setState(
+      {
+        from,
+        to,
+        active: false,
+        lastValidHash: getHashedData({ from, to }),
+        ...showSearchText ? { searchText } : {}
+      },
+      () => {
+        const { range, outputFormat } = this.props;
+        let outputFrom = null;
+        let outputTo = null;
+        if (from) {
+          outputFrom = outputFormat === OUTPUT_FORMAT.DATE ? from.toISODate() : from.toISO();
+        }
+        if (range && to) {
+          outputTo = outputFormat === OUTPUT_FORMAT.DATE ? to.toISODate() : to.toISO();
+        }
+        this.props.onUpdate({
+          from: outputFrom,
+          to: outputTo
+        });
+      }
+    );
+  };
+  renderContent(mobile) {
+    const { scale, range, showApply } = this.props;
+    const { from, to, min, max, zone, activeTab, pick, scrollCalendar } = this.state;
+    const mod = mobile ? getModifier$1("mobile") : getModifier$1("desktop");
+    return /* @__PURE__ */ React__default.createElement(
+      PopupContent,
+      {
+        from,
+        to,
+        min,
+        max,
+        zone,
+        activeTab: scale || activeTab,
+        mod,
+        pick,
+        range,
+        scrollCalendar,
+        showTabs: !scale,
+        showApply,
+        onDateClick: this.onDateClick,
+        onRangeDateClick: this.onRangeDateClick,
+        onSelectTab: this.onSelectTab,
+        onSubmit: this.onUpdate
+      }
+    );
+  }
+  render() {
+    const {
+      controlWidth,
+      hasClear,
+      disabled,
+      controlSize,
+      className,
+      popupClassName,
+      hasValidationError,
+      label
+    } = this.props;
+    const { searchText, active, error, from } = this.state;
+    const hasPlaceholderError = hasValidationError && !from;
+    return /* @__PURE__ */ React__default.createElement(MobileContext.Consumer, null, ({ mobile }) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: b$4("control", className),
+        ...controlWidth ? {
+          style: {
+            width: controlWidth
+          }
+        } : {}
+      },
+      /* @__PURE__ */ React__default.createElement(FieldWrapper, { error }, /* @__PURE__ */ React__default.createElement(
+        TextInput,
+        {
+          value: searchText,
+          size: controlSize,
+          placeholder: this.placeholder,
+          hasClear: hasClear && !mobile,
+          disabled,
+          onUpdate: this.onInputUpdate,
+          onFocus: this.onInputFocus,
+          onKeyDown: this.onInputKeyPress,
+          controlRef: this.ControlNodeRef,
+          error: hasValidationError,
+          controlProps: {
+            className: b$4("input", { error: hasPlaceholderError })
+          },
+          label
+        }
+      ), mobile && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: b$4("control-veil"),
+          onClick: this.onInputFocus
+        }
+      ))
+    ), mobile ? /* @__PURE__ */ React__default.createElement(
+      Sheet,
+      {
+        id: "datepicker",
+        visible: active && !disabled,
+        contentClassName: b$4("sheet"),
+        allowHideOnContentScroll: false,
+        onClose: this.onClose
+      },
+      this.renderContent(mobile)
+    ) : /* @__PURE__ */ React__default.createElement(
+      Popup,
+      {
+        contentClassName: b$4("popup", popupClassName),
+        open: active && !disabled,
+        anchorElement: this.ControlNodeRef.current,
+        placement: AVAILABLE_POPUP_PLACEMENT,
+        onOpenChange: (open) => {
+          if (!open) {
+            this.onClose();
+          }
+        },
+        returnFocus: false
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: b$4("popup-content") }, this.renderContent(mobile))
+    )));
+  }
+}
+const DatepickerControl = ({ widgetId: _id, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(Datepicker, { ...otherProps });
+};
+const trans$4 = I18n.keyset("components.common.YCSelect");
+const MULTIPLE_MIN_WIDTH = 150;
+const WITH_SEARCH_MIN_WIDTH = 170;
+const WITH_SEARCH_MULTIPLE_MIN_WIDTH = 200;
+function checkBrowser() {
+  const agent = navigator.userAgent;
+  if (agent.indexOf("Firefox") !== -1 && parseFloat(agent.substring(agent.indexOf("Firefox") + 8)) >= 3.6) {
+    return "Firefox";
+  } else if (agent.indexOf("Safari") !== -1 && agent.indexOf("Version") !== -1 && parseFloat(agent.substring(agent.indexOf("Version") + 8).split(" ")[0]) >= 5) {
+    return "Safari";
+  }
+  return "Good Browser";
+}
+function getEscapedRegExp(string) {
+  return new RegExp(string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), "i");
+}
+function getTitleValue(title) {
+  if (title === null) {
+    return trans$4("null");
+  }
+  if (title === "") {
+    return trans$4("empty_string");
+  }
+  return title;
+}
+function isFalsy(value) {
+  return !value && value !== 0;
+}
+function getPossiblePopupMinWidth({ withSearch, multiple }) {
+  let possibleMinWidth;
+  if (withSearch && multiple) {
+    possibleMinWidth = WITH_SEARCH_MULTIPLE_MIN_WIDTH;
+  } else if (withSearch) {
+    possibleMinWidth = WITH_SEARCH_MIN_WIDTH;
+  } else if (multiple) {
+    possibleMinWidth = MULTIPLE_MIN_WIDTH;
+  }
+  return possibleMinWidth;
+}
+const trans$3 = I18n.keyset("components.common.YCSelect");
+const b$3 = block("yc-select-item");
+const bWrap = block("yc-select-item-wrap");
+const ACTION_WIDTH = 80;
+const DESKTOP_TICK_ICON_SIZE = 16;
+const MOBILE_TICK_ICON_SIZE = 14;
+const SWIPE_DIR = {
+  LEFT: "left",
+  RIGHT: "right"
+};
+class Item extends React__default.PureComponent {
+  static propTypes = {
+    onItemClick: PropTypes.func,
+    selectOnlyCurrentItem: PropTypes.func,
+    getTouchedItem: PropTypes.func,
+    setTouchedItem: PropTypes.func,
+    selectType: PropTypes.string,
+    showItemIcon: PropTypes.bool,
+    showItemMeta: PropTypes.bool,
+    isSelected: PropTypes.bool,
+    mobile: PropTypes.bool,
+    item: PropTypes.object,
+    selectedCurrentItem: PropTypes.object,
+    style: PropTypes.object
+  };
+  state = {
+    startX: 0,
+    deltaX: 0,
+    actionNodes: [],
+    swipeDirection: null,
+    opening: false
+  };
+  componentDidMount() {
+    const actionNodes = [];
+    if (this._linkButtonRef.current) {
+      actionNodes.push(this._linkButtonRef.current);
+    }
+    if (this._onlyButtonRef.current) {
+      actionNodes.push(this._onlyButtonRef.current);
+    }
+    this.setState({ actionNodes });
+  }
+  _itemRef = React__default.createRef();
+  _onlyButtonRef = React__default.createRef();
+  _linkButtonRef = React__default.createRef();
+  _publishEvent = eventBroker.withEventPublisher("Select");
+  get height() {
+    if (this._itemRef.current) {
+      return this._itemRef.current.getBoundingClientRect().height;
+    }
+    return void 0;
+  }
+  get prevLeft() {
+    if (this._itemRef.current && this._itemRef.current.style.left) {
+      return parseFloat(this._itemRef.current.style.left);
+    }
+    return 0;
+  }
+  _handleTouchedItem = () => {
+    const { item, actions } = this.props.getTouchedItem();
+    if (item && item !== this._itemRef.current) {
+      item.style.left = "0px";
+      actions.forEach((node) => {
+        node.style.right = `${-ACTION_WIDTH}px`;
+      });
+    }
+    this.props.setTouchedItem({
+      item: this._itemRef.current,
+      actions: this.state.actionNodes
+    });
+  };
+  _handleItemMovement = (deltaX) => {
+    const { actionNodes, opening } = this.state;
+    const preparedDeltaX = deltaX * actionNodes.length;
+    let left;
+    if (opening) {
+      left = preparedDeltaX;
+      if (left > 0) {
+        left = 0;
+      } else if (Math.abs(left) > actionNodes.length * ACTION_WIDTH) {
+        left = -actionNodes.length * ACTION_WIDTH;
+      }
+    } else {
+      left = -actionNodes.length * ACTION_WIDTH + preparedDeltaX;
+      if (left > 0) {
+        left = 0;
+      } else if (left < -actionNodes.length * ACTION_WIDTH) {
+        left = -actionNodes.length * ACTION_WIDTH;
+      }
+    }
+    this._itemRef.current.style.left = `${left}px`;
+  };
+  _handleActionsMovement = (deltaX) => {
+    this.state.actionNodes.forEach((node, index) => {
+      const preparedDeltaX = deltaX * (index + 1);
+      const rightBound = ACTION_WIDTH * index;
+      let right;
+      if (this.state.opening) {
+        right = Math.abs(preparedDeltaX) - ACTION_WIDTH;
+      } else {
+        right = rightBound - preparedDeltaX;
+      }
+      if (right > rightBound) {
+        right = rightBound;
+      } else if (right < -ACTION_WIDTH) {
+        right = -ACTION_WIDTH;
+      }
+      node.style.right = `${right}px`;
+    });
+  };
+  _setItemToExtremePosition = () => {
+    const { actionNodes, swipeDirection } = this.state;
+    if (!this._itemRef.current) {
+      return;
+    }
+    const left = swipeDirection === SWIPE_DIR.LEFT ? -actionNodes.length * ACTION_WIDTH : 0;
+    this._itemRef.current.style.left = `${left}px`;
+  };
+  _setActionsToExtremePosition = () => {
+    const { actionNodes, swipeDirection } = this.state;
+    actionNodes.forEach((node, index) => {
+      const right = swipeDirection === SWIPE_DIR.LEFT ? ACTION_WIDTH * index : -ACTION_WIDTH;
+      node.style.right = `${right}px`;
+    });
+  };
+  _onOnlyButtonClick = (e) => {
+    const { item, selectOnlyCurrentItem } = this.props;
+    e.stopPropagation();
+    selectOnlyCurrentItem(item);
+  };
+  _onItemClick = () => this.props.onItemClick(this.props.item);
+  _onItemClickCapture = (e) => {
+    const {
+      item: { value }
+    } = this.props;
+    this._publishEvent({
+      eventId: "select",
+      domEvent: e,
+      meta: {
+        valueHash: md5(value)
+      }
+    });
+  };
+  _onTouchStart = (e) => {
+    this._handleTouchedItem();
+    this.setState({
+      startX: e.nativeEvent.touches[0].clientX,
+      opening: this.prevLeft === 0
+    });
+  };
+  _onTouchMove = (e) => {
+    const deltaX = e.nativeEvent.touches[0].clientX - this.state.startX;
+    const swipeDirection = this.state.deltaX > deltaX ? SWIPE_DIR.LEFT : SWIPE_DIR.RIGHT;
+    const handleMovement = !(this.state.opening && deltaX > 0);
+    if (handleMovement) {
+      this._handleItemMovement(deltaX);
+      this._handleActionsMovement(deltaX);
+    }
+    this.setState({ deltaX, swipeDirection });
+  };
+  _onTouchEnd = () => {
+    const endDeltaX = this.state.deltaX;
+    this.setState(
+      {
+        startX: 0,
+        deltaX: 0,
+        opening: false
+      },
+      () => {
+        if (endDeltaX === 0) {
+          return;
+        }
+        this._setItemToExtremePosition();
+        this._setActionsToExtremePosition();
+      }
+    );
+  };
+  _renderItemIcon() {
+    const {
+      showItemIcon,
+      showItemMeta,
+      item: { icon }
+    } = this.props;
+    if (!showItemIcon || !icon) {
+      return null;
+    }
+    const mods = {
+      small: !showItemMeta,
+      large: showItemMeta
+    };
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$3("icon", mods) }, icon);
+  }
+  _renderItemInfo() {
+    const {
+      item: { title, meta, hint },
+      showItemMeta
+    } = this.props;
+    const titleValue = getTitleValue(title);
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$3("info") }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: b$3("title", { secondary: title === "" || title === null }),
+        title: hint ?? (typeof titleValue === "string" && titleValue || "")
+      },
+      titleValue
+    ), showItemMeta && meta && /* @__PURE__ */ React__default.createElement("div", { className: b$3("meta"), title: meta }, meta));
+  }
+  _renderOnlyButton() {
+    const {
+      item: { value },
+      selectedCurrentItem: { value: selectedCurrentItemValue } = {},
+      selectType,
+      mobile,
+      style
+    } = this.props;
+    const { deltaX } = this.state;
+    if (selectType !== "multiple") {
+      return null;
+    }
+    const text = selectedCurrentItemValue === value ? trans$3("item_except") : trans$3("item_only");
+    if (mobile) {
+      const mods = {
+        mobile: true,
+        "with-transition": deltaX === 0
+      };
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref: this._onlyButtonRef,
+          className: b$3("only-btn", mods),
+          style: {
+            top: style.top,
+            height: this.height
+          },
+          onClick: this._onOnlyButtonClick
+        },
+        text
+      );
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        view: "flat-secondary",
+        size: "s",
+        className: b$3("only-btn"),
+        onClick: this._onOnlyButtonClick
+      },
+      text
+    );
+  }
+  _renderExternalUrl() {
+    const {
+      item: { url },
+      mobile,
+      style
+    } = this.props;
+    const { deltaX } = this.state;
+    if (!url) {
+      return null;
+    }
+    if (mobile) {
+      const mods = {
+        mobile: true,
+        "with-transition": deltaX === 0
+      };
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref: this._linkButtonRef,
+          className: b$3("ext-link", mods),
+          style: {
+            top: style.top,
+            height: this.height
+          },
+          onClick: () => window.open(url, "_blank")
+        },
+        /* @__PURE__ */ React__default.createElement(Icon, { data: ArrowUpRightFromSquare })
+      );
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        view: "flat-secondary",
+        size: "s",
+        href: url,
+        target: "_blank",
+        onClick: (e) => e.stopPropagation(),
+        className: b$3("ext-link")
+      },
+      /* @__PURE__ */ React__default.createElement(Icon, { data: ArrowUpRightFromSquare })
+    );
+  }
+  _renderTickIcon() {
+    const { mobile } = this.props;
+    const tickIconSize = mobile ? MOBILE_TICK_ICON_SIZE : DESKTOP_TICK_ICON_SIZE;
+    return /* @__PURE__ */ React__default.createElement("div", { className: b$3("tick-wrap") }, /* @__PURE__ */ React__default.createElement(
+      Icon,
+      {
+        data: Check,
+        className: b$3("tick"),
+        width: tickIconSize,
+        height: tickIconSize
+      }
+    ));
+  }
+  render() {
+    const {
+      item: { value, disabled, modifier, meta },
+      selectType,
+      showItemMeta,
+      isSelected,
+      mobile,
+      style
+    } = this.props;
+    const { actionNodes, deltaX } = this.state;
+    const isMultiple = selectType === "multiple";
+    const hasTouchHandlers = mobile && actionNodes.length;
+    const mods = {
+      disabled,
+      selected: isSelected,
+      multiple: isMultiple,
+      [modifier]: Boolean(modifier),
+      "show-meta": Boolean(showItemMeta && meta),
+      "with-transition": deltaX === 0
+    };
+    return /* @__PURE__ */ React__default.createElement("div", { className: bWrap() }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref: this._itemRef,
+        className: b$3(mods),
+        style,
+        "data-value": value,
+        onClick: this._onItemClick,
+        onClickCapture: this._onItemClickCapture,
+        onTouchStart: hasTouchHandlers ? this._onTouchStart : void 0,
+        onTouchMove: hasTouchHandlers ? this._onTouchMove : void 0,
+        onTouchEnd: hasTouchHandlers ? this._onTouchEnd : void 0
+      },
+      this._renderItemIcon(),
+      this._renderItemInfo(),
+      !mobile && this._renderOnlyButton(),
+      !mobile && this._renderExternalUrl(),
+      isSelected && isMultiple && this._renderTickIcon()
+    ), mobile && this._renderOnlyButton(), mobile && this._renderExternalUrl());
+  }
+}
+const trans$2 = I18n.keyset("components.common.YCSelect");
+const b$2 = block("yc-select-items");
+const ITEM_HEIGHT = 28;
+const MOBILE_ITEM_HEIGHT = 40;
+const ITEM_WITH_META_HEIGHT = 48;
+const MOBILE_ITEM_WITH_META_HEIGHT = 60;
+const GROUP_TITLE_HEIGHT = 21;
+const MARGIN_OFFSET = 4;
+class ItemsWrapper extends React__default.PureComponent {
+  static propTypes = {
+    virtualizeThreshold: PropTypes.number,
+    items: PropTypes.array,
+    inputValue: PropTypes.string,
+    innerValue: PropTypes.object,
+    isFetchingItems: PropTypes.bool,
+    isDynamic: PropTypes.bool,
+    isItemsGrouped: PropTypes.bool,
+    showItemMeta: PropTypes.bool,
+    showMoreItems: PropTypes.bool,
+    showSearch: PropTypes.bool,
+    showApply: PropTypes.bool,
+    selectedItemsPopup: PropTypes.bool,
+    mobile: PropTypes.bool,
+    fetchError: PropTypes.any,
+    onFetchErrorDetails: PropTypes.func,
+    fetchErrorDetailsTitle: PropTypes.string,
+    visible: PropTypes.bool,
+    fetchItems: PropTypes.func,
+    addNewItem: PropTypes.func,
+    setPopupWidth: PropTypes.func,
+    setAllowHideOnContentScroll: PropTypes.func,
+    errorContent: PropTypes.node
+  };
+  static defaultProps = {
+    showMoreItems: false
+  };
+  static getDerivedStateFromProps(props, state) {
+    const changedState = {};
+    if (props.visible) {
+      changedState.items = props.selectedItemsPopup ? props.items : props.items.filter(({ missing }) => !missing);
+      if (!state.hasItems) {
+        changedState.hasItems = true;
+      }
+    }
+    return Object.keys(changedState).length > 0 ? changedState : null;
+  }
+  state = {
+    items: [],
+    touchedItem: {},
+    minHeight: void 0,
+    isAddingUserItem: false,
+    isFetchingNextItems: false,
+    hasItems: false
+  };
+  componentDidMount() {
+    this.addedItemsCount = this.state.items.length;
+    this._setPopupWidth();
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const { isDynamic } = this.props;
+    const { isFetchingNextItems } = this.state;
+    const listRef = this.listRef.current;
+    const isSelectedItemsChanged = prevProps.innerValue !== this.props.innerValue;
+    if (isSelectedItemsChanged && listRef || isFetchingNextItems && listRef) {
+      listRef.forceUpdate();
+    }
+    if (prevProps.inputValue && !this.props.inputValue && isDynamic && listRef) {
+      listRef.scrollTo(0);
+    }
+    if (prevState.items.length !== this.state.items.length) {
+      this.addedItemsCount = prevState.items.length > this.state.items.length ? this.state.items.length : this.state.items.length - prevState.items.length;
+    }
+    if (prevProps.showItemMeta !== this.props.showItemMeta && listRef) {
+      listRef.resetAfterIndex(0);
+    }
+    if (prevProps.errorContent && !this.props.errorContent) {
+      this._setPopupWidth();
+    }
+  }
+  componentWillUnmount() {
+    this._removeObserver();
+  }
+  addedItemsCount = 0;
+  ref = React__default.createRef();
+  listRef = React__default.createRef();
+  observer = null;
+  get items() {
+    const { isItemsGrouped } = this.props;
+    let items = this.state.items;
+    if (isItemsGrouped) {
+      items = [];
+      this.state.items.forEach((group) => {
+        items.push({ groupTitle: group.groupTitle });
+        items = items.concat(group.items);
+      });
+    }
+    return items;
+  }
+  getTouchedItem = () => {
+    return this.state.touchedItem;
+  };
+  setTouchedItem = (touchedItem) => {
+    this.setState({ touchedItem });
+  };
+  _onResize = () => {
+    if (!this.ref.current) {
+      return;
+    }
+    const { minHeight } = this.state;
+    const height = this.ref.current.getBoundingClientRect().height;
+    if (height > minHeight) {
+      this.setState({ minHeight: height });
+    }
+  };
+  _addObserver() {
+    const config = { subtree: true, childList: true };
+    this.observer = new MutationObserver(this._onResize);
+    this.observer.observe(this.ref.current, config);
+  }
+  _setPopupWidth() {
+    if (!this.ref.current) {
+      return;
+    }
+    const { width } = this.ref.current.getBoundingClientRect();
+    this.props.setPopupWidth(width + this._getScrollbarWidth());
+    if (this.props.mobile) {
+      this._addObserver();
+    }
+  }
+  _removeObserver() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  _getScrollbarWidth() {
+    if (!this.ref.current) {
+      return 0;
+    }
+    const browser = checkBrowser();
+    let offset = 0;
+    if (browser === "Firefox" || browser === "Safari") {
+      offset = this.ref.current.offsetWidth - this.ref.current.clientWidth;
+    }
+    return offset;
+  }
+  _getItemHeight = () => {
+    const { showItemMeta, mobile } = this.props;
+    if (mobile) {
+      return showItemMeta ? MOBILE_ITEM_WITH_META_HEIGHT : MOBILE_ITEM_HEIGHT;
+    }
+    return showItemMeta ? ITEM_WITH_META_HEIGHT : ITEM_HEIGHT;
+  };
+  _getItemSize = (index) => {
+    const items = this.items;
+    const itemHeight = this._getItemHeight();
+    if (!items[index]) {
+      return itemHeight;
+    }
+    return items[index].groupTitle ? GROUP_TITLE_HEIGHT : itemHeight;
+  };
+  _fetchNextItems = async () => {
+    const { fetchItems } = this.props;
+    this.setState({ isFetchingNextItems: true });
+    await fetchItems();
+    this.setState({ isFetchingNextItems: false });
+  };
+  _addUserItem = async () => {
+    const { inputValue, addNewItem } = this.props;
+    this.setState({ isAddingUserItem: true });
+    await addNewItem(inputValue);
+    this.setState({ isAddingUserItem: false });
+  };
+  _onAddButtonClick = (e) => {
+    e.stopPropagation();
+    this._addUserItem();
+  };
+  _renderItem = (item, style = {}) => {
+    const { innerValue } = this.props;
+    const isSelected = innerValue.has(item.value);
+    if (style.left) {
+      delete style.left;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      Item,
+      {
+        ...this.props,
+        key: item.key || item.value,
+        style,
+        item,
+        isSelected,
+        getTouchedItem: this.getTouchedItem,
+        setTouchedItem: this.setTouchedItem
+      }
+    );
+  };
+  _renderGroupTitle = (title, style = {}) => {
+    return /* @__PURE__ */ React__default.createElement("div", { style, key: title, className: b$2("group-title") }, title);
+  };
+  _itemRenderer = ({ index, style }) => {
+    const { isFetchingNextItems } = this.state;
+    const items = this.items;
+    const item = items[index];
+    if (index === items.length && isFetchingNextItems) {
+      return /* @__PURE__ */ React__default.createElement("div", { className: b$2("loader"), style }, /* @__PURE__ */ React__default.createElement(Loader, { size: "s" }));
+    }
+    if (!item) {
+      return null;
+    }
+    if (item.groupTitle) {
+      return this._renderGroupTitle(item.groupTitle, style);
+    }
+    return this._renderItem(item, style);
+  };
+  _onItemsRendered = ({ visibleStopIndex }) => {
+    const { showMoreItems } = this.props;
+    const { items, isFetchingNextItems } = this.state;
+    const threshold = Math.round(this.addedItemsCount / 3);
+    const needFetch = showMoreItems && !isFetchingNextItems && items.length - visibleStopIndex < threshold;
+    if (needFetch) {
+      this._fetchNextItems();
+    }
+  };
+  _renderItemsWithoutVirtualized() {
+    const { isItemsGrouped } = this.props;
+    const { items } = this.state;
+    if (isItemsGrouped) {
+      return items.map((item) => {
+        const { groupTitle, items: items2 } = item;
+        if (!groupTitle && !items2) {
+          return this._renderItem(item);
+        }
+        const groupTitleNode = this._renderGroupTitle(groupTitle);
+        const groupItems = items2.map((item2) => this._renderItem(item2));
+        return groupItems.length ? [groupTitleNode, ...groupItems] : null;
+      });
+    }
+    return items.map((item) => this._renderItem(item));
+  }
+  // eslint-disable-next-line complexity
+  render() {
+    const {
+      virtualizeThreshold,
+      inputValue,
+      showSearch,
+      showApply,
+      isDynamic,
+      showMoreItems,
+      selectedItemsPopup,
+      mobile,
+      addNewItem,
+      fetchItems,
+      isFetchingItems,
+      isItemsGrouped,
+      fetchError,
+      itemsListTestAnchor,
+      errorContent
+    } = this.props;
+    const { minHeight, hasItems, isAddingUserItem, isFetchingNextItems } = this.state;
+    const items = this.items;
+    if (!hasItems) {
+      return null;
+    }
+    if (isFetchingItems && !isFetchingNextItems) {
+      return /* @__PURE__ */ React__default.createElement("div", { ref: this.ref, className: b$2("loader"), style: { minHeight } }, /* @__PURE__ */ React__default.createElement(Loader, { size: "s" }));
+    }
+    if (fetchError || errorContent) {
+      const { onFetchErrorDetails, fetchErrorDetailsTitle } = this.props;
+      return /* @__PURE__ */ React__default.createElement("div", { ref: this.ref, className: b$2("prompt"), style: { minHeight } }, errorContent ? errorContent : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", null, trans$2("items_fetch_error")), /* @__PURE__ */ React__default.createElement("div", { className: b$2("buttons") }, /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          disabled: isAddingUserItem,
+          className: b$2("prompt-button", { retry: true }),
+          onClick: fetchItems
+        },
+        trans$2("refresh_button_text")
+      ), onFetchErrorDetails && /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          view: "flat",
+          className: b$2("prompt-button"),
+          onClick: () => onFetchErrorDetails(fetchError)
+        },
+        fetchErrorDetailsTitle || trans$2("error_details_button_text")
+      ))));
+    }
+    if (isDynamic && !inputValue && !items.length) {
+      return /* @__PURE__ */ React__default.createElement("div", { ref: this.ref, className: b$2("prompt"), style: { minHeight } }, /* @__PURE__ */ React__default.createElement("span", null, trans$2("items_prompt")));
+    }
+    const isNotFound = !items.length || isItemsGrouped && items.every((group) => group.items && !group.items.length);
+    if (isNotFound) {
+      return /* @__PURE__ */ React__default.createElement("div", { ref: this.ref, className: b$2("prompt"), style: { minHeight } }, /* @__PURE__ */ React__default.createElement("span", null, trans$2("items_not_found", { inputValue })), addNewItem && !isItemsGrouped && /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          disabled: isAddingUserItem,
+          className: b$2("prompt-button"),
+          onClick: this._onAddButtonClick
+        },
+        trans$2("items_add_new")
+      ));
+    }
+    const wrapperMods = {
+      "with-search": !selectedItemsPopup && showSearch,
+      "with-selected-title": selectedItemsPopup,
+      "with-apply-button": showApply,
+      grouped: isItemsGrouped,
+      mobile
+    };
+    if (!isDynamic && items.length < virtualizeThreshold) {
+      wrapperMods["without-virtualized"] = true;
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref: this.ref,
+          className: b$2(wrapperMods),
+          style: { minHeight },
+          "data-qa": itemsListTestAnchor
+        },
+        this._renderItemsWithoutVirtualized()
+      );
+    }
+    const itemHeight = this._getItemHeight();
+    const itemCount = showMoreItems ? items.length + 1 : items.length;
+    const marginOffset = items.length === 1 ? MARGIN_OFFSET * 2 : MARGIN_OFFSET;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref: this.ref,
+        className: b$2(wrapperMods),
+        style: {
+          minHeight,
+          height: itemCount * itemHeight + marginOffset
+        },
+        "data-qa": itemsListTestAnchor
+      },
+      /* @__PURE__ */ React__default.createElement(AutoSizer, null, ({ width, height }) => /* @__PURE__ */ React__default.createElement(
+        VariableSizeList,
+        {
+          ref: this.listRef,
+          style: { overflowX: "hidden" },
+          width,
+          height,
+          itemSize: this._getItemSize,
+          itemData: items,
+          itemCount,
+          overscanCount: 5,
+          estimatedItemSize: itemHeight,
+          onItemsRendered: this._onItemsRendered
+        },
+        this._itemRenderer
+      ))
+    );
+  }
+}
+const trans$1 = I18n.keyset("components.common.YCSelect");
+const b$1 = block("yc-select-search");
+class Search extends React__default.PureComponent {
+  static propTypes = {
+    value: PropTypes.string,
+    width: PropTypes.number,
+    minWidth: PropTypes.number,
+    searchButtonSettings: PropTypes.object,
+    onInputUpdate: PropTypes.func,
+    selectAllItems: PropTypes.func,
+    onClick: PropTypes.func
+  };
+  focusInput = () => {
+    if (!this.inputNode) {
+      return;
+    }
+    this.inputNode.focus({ preventScroll: true });
+  };
+  _setInputNode = (ref) => {
+    if (!this.inputNode) {
+      this.inputNode = ref;
+    }
+  };
+  _handleOnClick = () => {
+    if (this.props.onClick) {
+      this.props.onClick();
+    }
+  };
+  render() {
+    const {
+      value,
+      width,
+      minWidth,
+      searchButtonSettings: { isCleaning, visible },
+      onInputUpdate,
+      selectAllItems
+    } = this.props;
+    return /* @__PURE__ */ React__default.createElement(MobileContext.Consumer, null, ({ mobile }) => {
+      const size = mobile ? "xl" : "m";
+      let style;
+      if (!mobile) {
+        style = {
+          width,
+          minWidth
+        };
+      }
+      return /* @__PURE__ */ React__default.createElement("div", { className: b$1(), style, onClick: this._handleOnClick }, /* @__PURE__ */ React__default.createElement("div", { className: b$1("input-wrap") }, /* @__PURE__ */ React__default.createElement(
+        TextInput,
+        {
+          controlRef: mobile ? void 0 : this._setInputNode,
+          view: "clear",
+          size,
+          value,
+          placeholder: trans$1("search_placeholder"),
+          onUpdate: onInputUpdate,
+          clear: true
+        }
+      )), visible && /* @__PURE__ */ React__default.createElement(Button, { view: "flat", size, onClick: selectAllItems }, isCleaning ? trans$1("search_clear") : trans$1("search_select_all")));
+    });
+  }
+}
+const MIN_VIRTUALIZED_POPUP_WIDTH = 170;
+const MAX_CONTROL_WIDTH_WITH_ANIMATION = 500;
+function isBothEmpty(valueA, valueB) {
+  if (Array.isArray(valueA) && Array.isArray(valueB)) {
+    return valueA.length === 0 && valueB.length === 0;
+  }
+  if (valueA instanceof Set && valueB instanceof Set) {
+    return valueA.size === 0 && valueB.size === 0;
+  }
+  return false;
+}
+const trans = I18n.keyset("components.common.YCSelect");
+const b = block("yc-select");
+const bControl = block("yc-select-control");
+const bAction = block("yc-select-action");
+const bPopup = block("yc-select-popup");
+const bSheet = block("yc-select-sheet");
+const DEBOUNCE_DELAY = 350;
+const THROTTLE_DELAY = 33;
+const EMPTY_VALUE = "—";
+const AVAILABLE_POPUP_DIRECTIONS = ["bottom-start", "bottom-end", "top-start", "top-end"];
+const getModifier = (name) => b({ [name]: true }).split(" ")[1];
+const ItemShape = PropTypes.shape({
+  value: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  key: PropTypes.string,
+  meta: PropTypes.string,
+  icon: PropTypes.node,
+  disabled: PropTypes.bool,
+  url: PropTypes.string
+});
+const ItemsGroupShape = PropTypes.shape({
+  groupTitle: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(ItemShape)
+});
+const ItemsShape = PropTypes.oneOfType([
+  PropTypes.array,
+  PropTypes.arrayOf(ItemShape),
+  PropTypes.arrayOf(ItemsGroupShape)
+]);
+const getFlattenItems = ({ items, isItemsGrouped, innerValue }) => {
+  return isItemsGrouped ? _flatMap(
+    items,
+    ({ items: groupedItems }) => groupedItems.filter((item) => innerValue.has(item.value))
+  ) : items.filter((item) => innerValue.has(item.value));
+};
+function getInnerValueLength(value) {
+  if (value === void 0 || value === null) {
+    return 0;
+  }
+  return Array.isArray(value) ? value.length : 1;
+}
+const arrayProps = ["items", "titles", "innerValue", "prevPropsItems", "shownItems"];
+function safeStateUpdater(currentState, nextPartialState) {
+  let nextState = currentState;
+  const entries = Object.entries(nextPartialState);
+  for (const [key, nextValue] of entries) {
+    const currentValue = nextState[key];
+    if (arrayProps.includes(key) && !isBothEmpty(currentValue, nextValue) || currentValue !== nextValue) {
+      nextState = { ...nextState, [key]: nextValue };
+    }
+  }
+  return nextState;
+}
+class YCSelect extends React__default.PureComponent {
+  static SINGLE = "single";
+  static MULTIPLE = "multiple";
+  static INIT_ITEMS_PLACEHOLDER = "Fetching initial items...";
+  static getInnerValue(value, allowNullableValues) {
+    const checkFunction = allowNullableValues ? isUndefined : isFalsy;
+    if (checkFunction(value)) {
+      return /* @__PURE__ */ new Set();
+    }
+    return Array.isArray(value) ? new Set(value.filter((val) => !checkFunction(val))) : /* @__PURE__ */ new Set([value]);
+  }
+  static getMissingItems(items = [], value, showMissingItems) {
+    if (!showMissingItems) {
+      return [];
+    }
+    const itemsSet = new Set(items.map((item) => item.value));
+    return (Array.isArray(value) ? value : [value]).filter((valueItem) => {
+      return !itemsSet.has(valueItem);
+    }).map((missingValue) => ({
+      value: missingValue,
+      title: missingValue,
+      missing: true
+    }));
+  }
+  static getDerivedStateFromProps(props, state) {
+    const changedState = {};
+    const isPropsItemsChange = props.items !== state.prevPropsItems && !props.getItems;
+    if (isPropsItemsChange) {
+      const missingItems = YCSelect.getMissingItems(
+        props.items,
+        props.value,
+        props.showMissingItems
+      );
+      const items = missingItems.concat(props.items);
+      changedState.prevPropsItems = props.items;
+      changedState.items = items;
+      changedState.isItemsGrouped = YCSelect.isItemsGrouped(props.items);
+      if (state.inputValue) {
+        const regExp = getEscapedRegExp(state.inputValue);
+        if (changedState.isItemsGrouped) {
+          changedState.shownItems = props.items.map((group) => {
+            const groupItems = group.items.filter(
+              (item) => regExp.test(item.title)
+            );
+            return {
+              groupTitle: group.groupTitle,
+              items: groupItems
+            };
+          }).filter((group) => group.items.length);
+        } else {
+          changedState.shownItems = items.filter((item) => regExp.test(item.title));
+        }
+      } else {
+        changedState.shownItems = items;
+      }
+    }
+    if (props.value !== state.prevPropsValue || isPropsItemsChange) {
+      const missingItems = YCSelect.getMissingItems(
+        props.getItems ? state.items.concat(state.selectItems) : props.items,
+        props.value,
+        props.showMissingItems
+      );
+      let items = YCSelect.isItemsGrouped(props.items) ? props.items : missingItems.concat(props.getItems ? state.items : props.items);
+      if (props.getItems) {
+        items = _uniqBy(items.concat(state.selectItems), "value");
+      }
+      changedState.prevPropsValue = props.value;
+      const { innerValue, singleSelectItem, titles } = YCSelect.getInnerValueState(
+        props,
+        items
+      );
+      Object.assign(changedState, { innerValue, singleSelectItem, titles });
+      if (props.getItems) {
+        const length = getInnerValueLength(props.value);
+        if (length !== 0 && titles.length !== length) {
+          changedState.isInitPending = true;
+        } else {
+          changedState.selectItems = _filter(
+            state.selectItems,
+            (item) => innerValue.has(item.value)
+          );
+        }
+      }
+      if (props.showMissingItems) {
+        changedState.items = items;
+      }
+    }
+    return Object.keys(changedState).length > 0 ? changedState : null;
+  }
+  static getInnerValueState(props, items) {
+    const { value, type, showItemIcon, allowNullableValues } = props;
+    const res = {};
+    res.innerValue = YCSelect.getInnerValue(value, allowNullableValues);
+    if (type === YCSelect.SINGLE && showItemIcon) {
+      res.singleSelectItem = YCSelect.getSingleSelectedItem(items, res.innerValue);
+    }
+    res.titles = YCSelect.getTitles(items, res.innerValue);
+    return res;
+  }
+  static getTitles(items, innerValue) {
+    if (!innerValue.size) {
+      return [];
+    }
+    const isItemsGrouped = YCSelect.isItemsGrouped(items);
+    if (isItemsGrouped) {
+      return _flatMap(
+        items,
+        ({ items: groupedItems }) => groupedItems.filter((item) => innerValue.has(item.value)).map((item) => item.title)
+      );
+    }
+    return items.filter((item) => innerValue.has(item.value)).map(({ title }) => getTitleValue(title));
+  }
+  static getSingleSelectedItem(items, innerValue) {
+    const isItemsGrouped = YCSelect.isItemsGrouped(items);
+    if (isItemsGrouped) {
+      const filteredList = items.map(
+        ({ items: groupedItems }) => groupedItems.find((item) => innerValue.has(item.value))
+      ).filter(Boolean);
+      return filteredList[0];
+    }
+    return items.find((item) => innerValue.has(item.value));
+  }
+  static isItemsGrouped(items) {
+    if (!items || !items.length) {
+      return false;
+    }
+    return Object.prototype.hasOwnProperty.call(items[0], "groupTitle");
+  }
+  static propTypes = {
+    onUpdate: PropTypes.func.isRequired,
+    getItems: PropTypes.func,
+    addItem: PropTypes.func,
+    renderSwitcher: PropTypes.func,
+    onOpenChange: PropTypes.func,
+    size: PropTypes.oneOf(["xs", "s", "m", "n", "promo"]),
+    type: PropTypes.oneOf([YCSelect.SINGLE, YCSelect.MULTIPLE]),
+    className: PropTypes.string,
+    popupClassName: PropTypes.string,
+    controlTestAnchor: PropTypes.string,
+    itemsListTestAnchor: PropTypes.string,
+    switcherClassName: PropTypes.string,
+    label: PropTypes.string,
+    limitLabel: PropTypes.bool,
+    itemsLoaderClassName: PropTypes.string,
+    controlWidth: PropTypes.number,
+    popupWidth: PropTypes.number,
+    itemsPageSize: PropTypes.number,
+    virtualizeThreshold: PropTypes.number,
+    showSearch: PropTypes.bool,
+    showArrow: PropTypes.bool,
+    showApply: PropTypes.bool,
+    showItemIcon: PropTypes.bool,
+    showItemMeta: PropTypes.bool,
+    showMissingItems: PropTypes.bool,
+    showSelectAll: PropTypes.bool,
+    allowEmptyValue: PropTypes.bool,
+    allowNullableValues: PropTypes.bool,
+    hiding: PropTypes.bool,
+    disabled: PropTypes.bool,
+    stretched: PropTypes.bool,
+    loading: PropTypes.bool,
+    loadingItems: PropTypes.bool,
+    applyOnOutsideClick: PropTypes.bool,
+    items: ItemsShape,
+    initialItems: ItemsShape,
+    value: (props, propName, componentName) => {
+      const propTypeSpec = props["type"] === YCSelect.SINGLE ? { [propName]: PropTypes.string } : { [propName]: PropTypes.arrayOf(PropTypes.string) };
+      PropTypes.checkPropTypes(propTypeSpec, props, propName, componentName);
+    },
+    placeholder: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.shape({
+        text: PropTypes.string.isRequired,
+        icon: PropTypes.node.isRequired
+      })
+    ]),
+    errorContent: PropTypes.node,
+    onFetchErrorDetails: PropTypes.func,
+    fetchErrorDetailsTitle: PropTypes.string,
+    hasValidationError: PropTypes.bool
+  };
+  constructor(props) {
+    super(props);
+    const {
+      type,
+      value,
+      showItemIcon,
+      showMissingItems,
+      allowNullableValues,
+      getItems,
+      initialItems,
+      controlTestAnchor
+    } = this.props;
+    this.controlRef = React__default.createRef();
+    this.badgeRef = React__default.createRef();
+    this.searchRef = React__default.createRef();
+    this.popupRef = React__default.createRef();
+    this.selectorRef = React__default.createRef();
+    this._publishEvent = eventBroker.withEventPublisher("Select", controlTestAnchor);
+    this.fetchCounter = 0;
+    let items = [];
+    let titles = [];
+    let isInitPending = false;
+    let innerValue = /* @__PURE__ */ new Set();
+    let singleSelectItem;
+    if (getItems && (!this.isEmpty() || initialItems)) {
+      const missingItems = YCSelect.getMissingItems(initialItems, value, showMissingItems);
+      items = missingItems.concat(initialItems || []);
+      isInitPending = true;
+      innerValue = YCSelect.getInnerValue(value, allowNullableValues);
+    } else if (!getItems) {
+      const missingItems = YCSelect.getMissingItems(
+        this.props.items,
+        value,
+        showMissingItems
+      );
+      items = missingItems.concat(this.props.items || []);
+      innerValue = YCSelect.getInnerValue(value, allowNullableValues);
+      titles = YCSelect.getTitles(items, innerValue);
+    }
+    if (type === YCSelect.SINGLE && showItemIcon) {
+      singleSelectItem = YCSelect.getSingleSelectedItem(items, innerValue);
+    }
+    this.state = {
+      items,
+      titles,
+      innerValue,
+      isInitPending,
+      singleSelectItem,
+      prevPropsItems: items,
+      prevPropsValue: value,
+      shownItems: items,
+      selectedPopupItems: [],
+      selectItems: [],
+      inputValue: "",
+      showMainPopup: false,
+      showSelectedPopup: false,
+      isFetchingItems: false,
+      isControlClicked: false,
+      isItemsGrouped: YCSelect.isItemsGrouped(items),
+      fetchError: null
+    };
+  }
+  _updateControlWidth = throttle(() => {
+    if (!this._isMounted) {
+      return;
+    }
+    const controlWidth = Math.ceil(this.controlRef.current.getBoundingClientRect().width);
+    if (this.state.controlWidth !== controlWidth) {
+      this.setState({ controlWidth });
+    }
+  }, THROTTLE_DELAY);
+  componentDidMount() {
+    this._isMounted = true;
+    setTimeout(() => {
+      this._updateControlWidth();
+    }, 0);
+    if (this.state.isInitPending) {
+      this._initItems();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    const { controlWidth } = this.props;
+    if (!prevProps.getItems && this.props.getItems || prevProps.getItems && this.props.getItems && !isEqual(prevProps.initialItems, this.props.initialItems)) {
+      const { type, value, showItemIcon, showMissingItems, allowNullableValues, initialItems } = this.props;
+      this.fetchCounter = 0;
+      let items = [];
+      let isInitPending = false;
+      let innerValue = /* @__PURE__ */ new Set();
+      let singleSelectItem;
+      if (!this.isEmpty() || initialItems) {
+        const missingItems = YCSelect.getMissingItems(
+          initialItems,
+          value,
+          showMissingItems
+        );
+        items = missingItems.concat(initialItems);
+        isInitPending = true;
+        innerValue = YCSelect.getInnerValue(value, allowNullableValues);
+      }
+      const titles = YCSelect.getTitles(items, innerValue);
+      if (type === YCSelect.SINGLE && showItemIcon) {
+        singleSelectItem = YCSelect.getSingleSelectedItem(items, innerValue);
+      }
+      this.setState(
+        safeStateUpdater(this.state, {
+          items,
+          titles,
+          innerValue,
+          isInitPending,
+          singleSelectItem,
+          prevPropsItems: items,
+          prevPropsValue: value,
+          shownItems: items,
+          inputValue: ""
+        })
+      );
+      return;
+    }
+    if (this.state.isInitPending) {
+      this._initItems();
+    }
+    if (controlWidth) {
+      return;
+    }
+    this._updateControlWidth();
+    if (this.selectorRef.current) {
+      if (this.state.showMainPopup) {
+        this.selectorRef.current.addEventListener(
+          "scroll",
+          this._handleSelectorScroll,
+          true
+        );
+      } else {
+        this.selectorRef.current.removeEventListener(
+          "scroll",
+          this._handleSelectorScroll,
+          true
+        );
+      }
+    }
+  }
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.selectorRef.current) {
+      this.selectorRef.current.removeEventListener(
+        "scroll",
+        this._handleSelectorScroll,
+        true
+      );
+    }
+  }
+  isEmpty() {
+    const { type, value } = this.props;
+    if (type === YCSelect.SINGLE) {
+      return isFalsy(value);
+    } else {
+      return (value || []).filter((value2) => !isFalsy(value2)).length === 0;
+    }
+  }
+  selectItem = (item) => {
+    const { allowEmptyValue } = this.props;
+    const prevInnerValue = new Set(this.state.innerValue);
+    const innerValue = allowEmptyValue && prevInnerValue.has(item.value) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([item.value]);
+    const state = {
+      innerValue,
+      showMainPopup: false
+    };
+    this.setState(safeStateUpdater(this.state, state), () => {
+      this._onUpdate();
+      this._onOpenChange({ open: false });
+    });
+  };
+  selectItems = (item) => {
+    const { getItems } = this.props;
+    const { items } = this.state;
+    const innerValue = new Set(this.state.innerValue);
+    if (innerValue.has(item.value)) {
+      innerValue.delete(item.value);
+    } else {
+      innerValue.add(item.value);
+    }
+    const state = {
+      innerValue,
+      selectedCurrentItem: void 0
+    };
+    if (getItems) {
+      state.selectItems = [
+        .../* @__PURE__ */ new Set([...this.state.selectItems, ...this.state.selectedPopupItems, ...items])
+      ].filter((item2) => innerValue.has(item2.value));
+    }
+    this.setState(safeStateUpdater(this.state, state), this._beforeOnUpdate);
+  };
+  onSingleSearchButtonClick = () => {
+    this.setState(
+      safeStateUpdater(this.state, {
+        innerValue: /* @__PURE__ */ new Set(),
+        showMainPopup: false
+      }),
+      this._onUpdate
+    );
+  };
+  onMultipleSearchButtonClick = () => {
+    const { getItems } = this.props;
+    const { items, shownItems, isItemsGrouped } = this.state;
+    const state = {};
+    let shownItemsValue;
+    if (isItemsGrouped) {
+      shownItemsValue = new Set(
+        _flatMap(
+          shownItems,
+          ({ items: groupedItems }) => groupedItems.filter((item) => !item.disabled).map((item) => item.value)
+        )
+      );
+    } else {
+      shownItemsValue = new Set(
+        shownItems.filter((item) => !item.disabled && !item.missing).map((item) => item.value)
+      );
+    }
+    let innerValue = /* @__PURE__ */ new Set([...this.state.innerValue, ...shownItemsValue]);
+    if (innerValue.size === this.state.innerValue.size) {
+      innerValue = new Set(
+        [...this.state.innerValue].filter((innerVal) => !shownItemsValue.has(innerVal))
+      );
+    }
+    state.innerValue = innerValue;
+    if (getItems) {
+      const allItems = /* @__PURE__ */ new Set([
+        ...items,
+        ...this.state.selectedPopupItems,
+        ...this.state.selectItems || []
+      ]);
+      state.selectItems = [...allItems].filter((item) => innerValue.has(item.value));
+    }
+    this.setState(safeStateUpdater(this.state, state), this._beforeOnUpdate);
+  };
+  selectOnlyCurrentItem = (selectedItem) => {
+    const { getItems } = this.props;
+    const {
+      items,
+      selectedCurrentItem: { value: prevSelectedItemValue } = {},
+      shownItems,
+      selectedPopupItems,
+      showSelectedPopup,
+      isItemsGrouped
+    } = this.state;
+    const state = { selectedCurrentItem: void 0 };
+    if (selectedItem.value === prevSelectedItemValue) {
+      const itemsToFilter = showSelectedPopup ? selectedPopupItems : shownItems;
+      let innerValue;
+      if (isItemsGrouped) {
+        innerValue = new Set(
+          _flatMap(
+            itemsToFilter,
+            ({ items: groupedItems }) => groupedItems.filter((item) => !item.disabled && item.value !== selectedItem.value).map((item) => item.value)
+          )
+        );
+      } else {
+        innerValue = new Set(
+          itemsToFilter.filter((item) => !item.disabled && item.value !== selectedItem.value).map((item) => item.value)
+        );
+      }
+      state.innerValue = innerValue;
+      if (getItems) {
+        const allItems = /* @__PURE__ */ new Set([...items, ...this.state.selectedPopupItems]);
+        state.selectItems = [...allItems].filter((item) => innerValue.has(item.value));
+      }
+    } else {
+      state.innerValue = /* @__PURE__ */ new Set([selectedItem.value]);
+      state.selectedCurrentItem = selectedItem;
+      if (getItems) {
+        state.selectItems = [selectedItem];
+      }
+    }
+    this.setState(safeStateUpdater(this.state, state), this._beforeOnUpdate);
+  };
+  addNewItem = async (inputValue) => {
+    const { getItems, addItem } = this.props;
+    await addItem(inputValue);
+    if (getItems) {
+      this._onInputUpdateDynamic(inputValue);
+    } else {
+      this._onInputUpdateStatic(inputValue);
+    }
+  };
+  setPopupWidth = (width) => {
+    this.setState({ popupWidth: width });
+  };
+  _handleSelectorScroll = debounce$1((event) => {
+    const { scrollTop } = event.target || {};
+    this._publishEvent({ eventId: "selector-scroll", meta: { scrollTop } });
+  }, 200);
+  _initItems = async () => {
+    const { value, initialItems, showMissingItems } = this.props;
+    const { initialNextPageToken } = this.state;
+    const exactKeys = new Set(Array.isArray(value) ? value.filter(Boolean) : [value]);
+    const { items: fetchedItems, nextPageToken } = await this.props.getItems({
+      exactKeys: [...exactKeys.values()]
+    });
+    let items = fetchedItems;
+    let shownItems = fetchedItems;
+    if (initialItems && (nextPageToken === initialNextPageToken || !initialNextPageToken)) {
+      items = uniq(this.state.items, fetchedItems);
+      shownItems = items;
+    }
+    const missingItems = YCSelect.getMissingItems(fetchedItems, value, showMissingItems);
+    const { innerValue, singleSelectItem, titles } = YCSelect.getInnerValueState(
+      this.props,
+      missingItems.length ? _uniqBy(fetchedItems.concat(missingItems), "value") : fetchedItems
+    );
+    this.setState(
+      safeStateUpdater(this.state, {
+        items,
+        shownItems,
+        selectItems: fetchedItems,
+        innerValue,
+        titles,
+        singleSelectItem,
+        nextPageToken,
+        initialNextPageToken: nextPageToken,
+        isInitPending: false
+      })
+    );
+  };
+  _fetchItems = async () => {
+    const { getItems, itemsPageSize } = this.props;
+    if (getItems) {
+      const { inputValue, nextPageToken, selectItems = [] } = this.state;
+      this.setState(
+        { isFetchingItems: true },
+        this.popupRef.current && this.popupRef.current.forceUpdate
+      );
+      try {
+        this.fetchCounter += 1;
+        const fetchData = await getItems({
+          searchPattern: inputValue,
+          itemsPageSize,
+          nextPageToken
+        });
+        this.fetchCounter -= 1;
+        if (this.fetchCounter > 0) {
+          this.setState(
+            {
+              fetchError: null,
+              isFetchingItems: true
+            },
+            this.popupRef.current && this.popupRef.current.forceUpdate
+          );
+          return;
+        }
+        const items = uniq(
+          nextPageToken ? this.state.items.concat(fetchData.items) : fetchData.items,
+          selectItems
+        );
+        this.setState(
+          safeStateUpdater(this.state, {
+            items,
+            shownItems: items,
+            nextPageToken: fetchData.nextPageToken,
+            fetchError: null,
+            isFetchingItems: false
+          }),
+          this.popupRef.current && this.popupRef.current.forceUpdate
+        );
+      } catch (error) {
+        this.fetchCounter -= 1;
+        if (this.fetchCounter > 0) {
+          this.setState({
+            fetchError: null,
+            isFetchingItems: true
+          });
+          return;
+        }
+        this.setState({
+          fetchError: error,
+          isFetchingItems: false
+        });
+      }
+    }
+  };
+  _getSearchButtonSettings() {
+    const { type, allowEmptyValue, showSelectAll } = this.props;
+    const { shownItems = [], isItemsGrouped } = this.state;
+    const settings = {
+      isCleaning: true,
+      visible: showSelectAll
+    };
+    if (type === YCSelect.SINGLE) {
+      settings.visible = Boolean(
+        showSelectAll && this.state.innerValue.size && allowEmptyValue
+      );
+      return settings;
+    }
+    if (!shownItems.length) {
+      settings.visible = false;
+      return settings;
+    }
+    let shownItemsValue;
+    if (isItemsGrouped) {
+      shownItemsValue = new Set(
+        _flatMap(
+          shownItems,
+          ({ items: groupedItems }) => groupedItems.filter((item) => !item.disabled).map((item) => item.value)
+        )
+      );
+    } else {
+      shownItemsValue = new Set(
+        shownItems.filter((item) => !item.disabled).map((item) => item.value)
+      );
+    }
+    const innerValue = /* @__PURE__ */ new Set([...this.state.innerValue, ...shownItemsValue]);
+    settings.isCleaning = innerValue.size === this.state.innerValue.size;
+    return settings;
+  }
+  _getOutputItems() {
+    const {
+      innerValue,
+      items,
+      selectItems,
+      selectedPopupItems,
+      showSelectedPopup,
+      isItemsGrouped
+    } = this.state;
+    if (showSelectedPopup) {
+      return getFlattenItems({
+        innerValue,
+        isItemsGrouped,
+        items: selectedPopupItems
+      });
+    }
+    const knownItems = _uniqBy(items.concat(selectItems), "value");
+    return getFlattenItems({
+      innerValue,
+      isItemsGrouped,
+      items: knownItems
+    });
+  }
+  _getPreviousValue = () => {
+    const { value, allowNullableValues } = this.props;
+    const { items, selectItems } = this.state;
+    const knownItems = _uniqBy(items.concat(selectItems), "value");
+    const innerValue = YCSelect.getInnerValue(value, allowNullableValues);
+    const titles = YCSelect.getTitles(knownItems, innerValue);
+    return { innerValue, titles };
+  };
+  _onInputUpdateStatic = (inputValue) => {
+    const { showItemMeta } = this.props;
+    const { items, isItemsGrouped } = this.state;
+    let shownItems;
+    if (inputValue) {
+      const regExp = getEscapedRegExp(inputValue);
+      if (isItemsGrouped) {
+        shownItems = items.map((group) => {
+          const groupItems = group.items.filter(
+            (item) => regExp.test(item.title) || showItemMeta && regExp.test(item.meta)
+          );
+          return {
+            groupTitle: group.groupTitle,
+            items: groupItems
+          };
+        }).filter((group) => group.items.length);
+      } else {
+        shownItems = items.filter(
+          (item) => regExp.test(item.title) || showItemMeta && regExp.test(item.meta)
+        );
+      }
+    } else {
+      shownItems = [...items];
+    }
+    const state = {
+      shownItems,
+      inputValue
+    };
+    this.setState(safeStateUpdater(this.state, state));
+  };
+  _onInputUpdateDynamic = (inputValue) => {
+    const { initialItems } = this.props;
+    if (!inputValue) {
+      this.setState(
+        safeStateUpdater(this.state, {
+          items: initialItems || [],
+          shownItems: initialItems || [],
+          inputValue: "",
+          nextPageToken: this.state.initialNextPageToken,
+          fetchError: false,
+          isFetchingItems: false
+        }),
+        () => {
+          if (this.popupRef.current) {
+            this.popupRef.current.forceUpdate();
+          }
+          if (this.debouncedFetchItems) {
+            this.debouncedFetchItems.cancel();
+          }
+        }
+      );
+      return;
+    }
+    const { nextPageToken } = this.state;
+    this.setState(
+      safeStateUpdater(this.state, {
+        inputValue,
+        prevInputValue: this.state.inputValue,
+        nextPageToken: inputValue === this.state.inputValue ? nextPageToken : void 0,
+        isFetchingItems: true
+      }),
+      () => {
+        if (this.debouncedFetchItems) {
+          this.debouncedFetchItems.cancel();
+        }
+        this.debouncedFetchItems = debounce$1(this._fetchItems, DEBOUNCE_DELAY);
+        this.debouncedFetchItems();
+        if (this.popupRef.current) {
+          this.popupRef.current.forceUpdate();
+        }
+      }
+    );
+  };
+  _onBadgeClick = (e) => {
+    const { getItems, showApply, applyOnOutsideClick, loadingItems } = this.props;
+    const {
+      items,
+      innerValue,
+      showSelectedPopup,
+      selectItems,
+      isItemsGrouped,
+      isControlClicked,
+      showMainPopup
+    } = this.state;
+    if (e.target !== this.badgeRef.current) {
+      return;
+    }
+    let state = {
+      showSelectedPopup: !showSelectedPopup,
+      showMainPopup: false
+    };
+    if (loadingItems) {
+      state = {
+        showMainPopup: !showMainPopup,
+        showSelectedPopup: false
+      };
+      this.setState(state);
+      return;
+    }
+    if (showApply && !applyOnOutsideClick) {
+      state = {
+        ...state,
+        ...this._getPreviousValue()
+      };
+    }
+    if (getItems) {
+      state.selectedPopupItems = _uniqBy(
+        [
+          ...items.filter((item) => (state.innerValue || innerValue).has(item.value)),
+          ...selectItems
+        ],
+        "value"
+      );
+    } else if (isItemsGrouped) {
+      state.selectedPopupItems = items.map((group) => {
+        const groupItems = group.items.filter(
+          (item) => (state.innerValue || innerValue).has(item.value)
+        );
+        return {
+          groupTitle: group.groupTitle,
+          items: groupItems
+        };
+      });
+    } else {
+      state.selectedPopupItems = items.filter(
+        (item) => (state.innerValue || innerValue).has(item.value)
+      );
+    }
+    if (!isControlClicked) {
+      state.isControlClicked = true;
+    }
+    if (!showMainPopup) {
+      this._onOpenChange({ open: state.showSelectedPopup });
+    }
+    this.setState(safeStateUpdater(this.state, state));
+  };
+  _onControlClick = (e) => {
+    const { showMainPopup, isControlClicked, showSelectedPopup } = this.state;
+    const { showApply, applyOnOutsideClick, disabled } = this.props;
+    if (disabled || e.target === this.badgeRef.current) {
+      return;
+    }
+    let state = {
+      showMainPopup: !showMainPopup,
+      showSelectedPopup: false
+    };
+    if (showMainPopup && showApply) {
+      if (applyOnOutsideClick) {
+        this._onUpdate({ isOutsideClick: true });
+      } else {
+        state = {
+          ...state,
+          ...this._getPreviousValue()
+        };
+      }
+    }
+    if (!isControlClicked) {
+      state.isControlClicked = true;
+    }
+    if (!showSelectedPopup) {
+      this._onOpenChange({ open: state.showMainPopup });
+    }
+    this.setState(safeStateUpdater(this.state, state));
+  };
+  _onControlClickCapture = (e) => {
+    this._publishEvent({
+      eventId: "click",
+      domEvent: e
+    });
+  };
+  _onControlKeyPress = (e) => {
+    if (e.nativeEvent.code === "Enter" || e.nativeEvent.code === "Space") {
+      this._onControlClick(e);
+      e.preventDefault();
+    }
+  };
+  _onControlKeyPressCapture = (e) => {
+    if (e.nativeEvent.code === "Enter" || e.nativeEvent.code === "Space") {
+      this._onControlClickCapture(e);
+    }
+  };
+  _onApplyClick = () => {
+    this._onUpdate();
+    this.setState({
+      showMainPopup: false,
+      showSelectedPopup: false
+    });
+  };
+  _beforeOnUpdate() {
+    const { getItems, showApply } = this.props;
+    const { selectItems, innerValue } = this.state;
+    let items = this.state.items;
+    if (getItems) {
+      items = [...new Set(items.concat(selectItems || []))];
+    }
+    if (showApply) {
+      this.setState(
+        safeStateUpdater(this.state, {
+          titles: YCSelect.getTitles(items, innerValue)
+        })
+      );
+    } else {
+      this._onUpdate();
+    }
+  }
+  _onUpdate = ({ isOutsideClick } = {}) => {
+    const { type, allowNullableValues, onUpdate } = this.props;
+    const { innerValue } = this.state;
+    const values = [...innerValue];
+    let outputValues;
+    let outputItems;
+    if (onUpdate.length > 1) {
+      outputItems = this._getOutputItems();
+    }
+    if (type === YCSelect.SINGLE) {
+      const checkFunction = allowNullableValues ? isUndefined : isFalsy;
+      const nullableValue = allowNullableValues ? void 0 : null;
+      outputValues = checkFunction(values[0]) ? nullableValue : values[0];
+      outputItems = outputItems ? outputItems[0] : nullableValue;
+    } else {
+      outputValues = values;
+    }
+    onUpdate(outputValues, { items: outputItems, isOutsideClick });
+  };
+  _onOutsideMainPopupClick = () => {
+    const { showApply, applyOnOutsideClick } = this.props;
+    const { shownItems, isItemsGrouped } = this.state;
+    const isDisabled = isItemsGrouped ? shownItems.every((group) => group.items && !group.items.length) : !shownItems.length;
+    let state = { showMainPopup: false };
+    if (showApply && !isDisabled) {
+      if (applyOnOutsideClick) {
+        this._onUpdate({ isOutsideClick: true });
+      } else {
+        state = {
+          ...state,
+          ...this._getPreviousValue()
+        };
+      }
+    }
+    this.setState(safeStateUpdater(this.state, state));
+    this._onOpenChange({ open: state.showMainPopup });
+  };
+  _onOutsideSelectedItemsPopupClick = () => {
+    const { showApply, applyOnOutsideClick } = this.props;
+    const { selectedPopupItems, isItemsGrouped } = this.state;
+    const isDisabled = isItemsGrouped ? selectedPopupItems.every((group) => group.items && !group.items.length) : !selectedPopupItems.length;
+    let state = { showSelectedPopup: false };
+    if (showApply && !isDisabled) {
+      if (applyOnOutsideClick) {
+        this._onUpdate({ isOutsideClick: true });
+      } else {
+        state = {
+          ...state,
+          ...this._getPreviousValue()
+        };
+      }
+    }
+    this.setState(safeStateUpdater(this.state, state));
+    this._onOpenChange({ open: state.showSelectedPopup });
+  };
+  _onOpenChange = (popupState) => {
+    const { onOpenChange } = this.props;
+    if (onOpenChange && typeof onOpenChange === "function") {
+      onOpenChange(popupState);
+    }
+  };
+  _getPopupMinWidth() {
+    const { controlWidth, type, showSearch, onFetchErrorDetails } = this.props;
+    const { fetchError } = this.state;
+    const errorDetailsMinWidth = fetchError && onFetchErrorDetails ? 250 : void 0;
+    const possibleMinWidth = getPossiblePopupMinWidth({
+      withSearch: showSearch,
+      multiple: type === YCSelect.MULTIPLE
+    });
+    return _max([
+      errorDetailsMinWidth,
+      possibleMinWidth,
+      controlWidth || this.state.controlWidth
+    ]);
+  }
+  _getPopupClassNames() {
+    const { popupClassName, type, showSearch } = this.props;
+    const isMultiply = type === YCSelect.MULTIPLE;
+    const mods = {
+      search: showSearch,
+      multi: isMultiply
+    };
+    let mixins = getModifier("desktop");
+    if (popupClassName) {
+      mixins += " " + popupClassName;
+    }
+    return bPopup(mods, mixins);
+  }
+  _getPopupStyles() {
+    const { controlWidth, virtualizeThreshold, getItems, errorContent } = this.props;
+    const { shownItems = [] } = this.state;
+    const popupStyles = { minWidth: this._getPopupMinWidth() };
+    if (!errorContent) {
+      if (getItems || shownItems.length > virtualizeThreshold || this.props.popupWidth) {
+        const width = this.props.popupWidth || controlWidth || this.state.controlWidth;
+        popupStyles.width = width > MIN_VIRTUALIZED_POPUP_WIDTH ? width : MIN_VIRTUALIZED_POPUP_WIDTH;
+      } else if (this.state.popupWidth) {
+        popupStyles.width = this.state.popupWidth;
+      }
+    }
+    return popupStyles;
+  }
+  _renderTokens() {
+    const { placeholder } = this.props;
+    const { titles, isInitPending } = this.state;
+    let placeholderIcon;
+    let placeholderText;
+    if (placeholder && typeof placeholder === "object") {
+      placeholderIcon = placeholder.icon;
+      placeholderText = placeholder.text;
+    } else if (placeholder) {
+      placeholderText = placeholder;
+    }
+    placeholderText = isInitPending ? YCSelect.INIT_ITEMS_PLACEHOLDER : placeholderText || EMPTY_VALUE;
+    const empty = !titles.length;
+    return /* @__PURE__ */ React__default.createElement("div", { className: bControl("tokens") }, placeholderIcon && !titles.length && /* @__PURE__ */ React__default.createElement("div", { className: bControl("placeholder-icon") }, placeholderIcon), /* @__PURE__ */ React__default.createElement("span", { className: bControl("tokens-text", { empty }) }, empty ? placeholderText : this._renderTitles(titles)));
+  }
+  _renderTitles(titles) {
+    return titles.map((title, index) => {
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: index }, title, index === titles.length - 1 ? "" : ", ");
+    });
+  }
+  _renderControl() {
+    const {
+      controlWidth,
+      size,
+      type,
+      className,
+      label,
+      limitLabel,
+      showArrow,
+      showItemIcon,
+      stretched,
+      disabled,
+      loading,
+      renderSwitcher,
+      switcherClassName,
+      controlTestAnchor,
+      errorContent,
+      hasValidationError
+    } = this.props;
+    const {
+      showMainPopup,
+      showSelectedPopup,
+      innerValue,
+      isInitPending,
+      singleSelectItem: { icon } = {}
+    } = this.state;
+    if (renderSwitcher) {
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref: this.controlRef,
+          className: b("switcher", switcherClassName),
+          onClick: this._onControlClick,
+          onClickCapture: this._onControlClickCapture,
+          "data-qa": controlTestAnchor
+        },
+        renderSwitcher()
+      );
+    }
+    const controlMods = {
+      size,
+      focused: showMainPopup || showSelectedPopup,
+      stretched,
+      disabled: disabled || isInitPending || loading,
+      "without-animation": (controlWidth || this.state.controlWidth) > MAX_CONTROL_WIDTH_WITH_ANIMATION,
+      error: Boolean(errorContent) || hasValidationError
+    };
+    const badgeMods = {
+      clicked: showSelectedPopup,
+      "without-arrow": !showArrow
+    };
+    const isMultiply = type === YCSelect.MULTIPLE;
+    const controlStyles = {};
+    if (controlWidth) {
+      controlStyles.width = controlWidth;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref: this.controlRef,
+        tabIndex: disabled ? -1 : 0,
+        className: className ? bControl(controlMods, className) : bControl(controlMods),
+        style: controlStyles,
+        onClick: this._onControlClick,
+        onClickCapture: this._onControlClickCapture,
+        onKeyPressCapture: this._onControlKeyPressCapture,
+        onKeyPress: this._onControlKeyPress,
+        "data-qa": controlTestAnchor
+      },
+      loading ? /* @__PURE__ */ React__default.createElement("div", { className: bControl("loader") }, /* @__PURE__ */ React__default.createElement(Loader, { size: "s" })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, label && /* @__PURE__ */ React__default.createElement("span", { className: bControl("label", { limited: limitLabel }) }, label), !isMultiply && showItemIcon && icon && /* @__PURE__ */ React__default.createElement("div", { className: bControl("selected-item-icon") }, icon), this._renderTokens(), isMultiply && Boolean(innerValue.size) && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ref: this.badgeRef,
+          className: bControl("badge", badgeMods),
+          onClick: this._onBadgeClick
+        },
+        innerValue.size
+      )),
+      showArrow && /* @__PURE__ */ React__default.createElement("div", { className: bControl("arrow", { loading }) }, /* @__PURE__ */ React__default.createElement(Icon, { data: ChevronDown }))
+    );
+  }
+  _renderSearch() {
+    const { controlWidth, type, virtualizeThreshold, getItems } = this.props;
+    const { inputValue, shownItems } = this.state;
+    const inputUpdateHandler = getItems ? this._onInputUpdateDynamic : this._onInputUpdateStatic;
+    let searchWidth;
+    if (getItems || shownItems.length > virtualizeThreshold || this.props.popupWidth) {
+      const width = this.props.popupWidth || controlWidth || this.state.controlWidth;
+      searchWidth = width > MIN_VIRTUALIZED_POPUP_WIDTH ? width : MIN_VIRTUALIZED_POPUP_WIDTH;
+    } else if (this.state.popupWidth) {
+      searchWidth = this.state.popupWidth > this.state.controlWidth ? this.state.popupWidth : this.state.controlWidth;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      Search,
+      {
+        ref: this.searchRef,
+        value: inputValue,
+        width: this.props.popupWidth || searchWidth,
+        minWidth: _max([this._getPopupMinWidth(), controlWidth || this.state.controlWidth]),
+        searchButtonSettings: this._getSearchButtonSettings(),
+        onInputUpdate: inputUpdateHandler,
+        selectAllItems: type === YCSelect.MULTIPLE ? this.onMultipleSearchButtonClick : this.onSingleSearchButtonClick,
+        onClick: () => this._publishEvent({ eventId: "search-tap" })
+      }
+    );
+  }
+  _renderItems({ selectedPopup = false, mobile = false } = {}) {
+    const {
+      virtualizeThreshold,
+      type,
+      showSearch,
+      showApply,
+      showItemIcon,
+      showItemMeta,
+      getItems,
+      addItem,
+      onFetchErrorDetails,
+      fetchErrorDetailsTitle,
+      itemsListTestAnchor,
+      errorContent
+    } = this.props;
+    const {
+      shownItems,
+      selectedPopupItems,
+      showMainPopup,
+      showSelectedPopup,
+      selectedCurrentItem,
+      inputValue,
+      isFetchingItems,
+      isItemsGrouped,
+      innerValue,
+      nextPageToken,
+      fetchError
+    } = this.state;
+    let props = {
+      innerValue,
+      inputValue,
+      virtualizeThreshold,
+      selectedCurrentItem,
+      selectType: type,
+      showSearch,
+      showApply,
+      showItemIcon,
+      showItemMeta,
+      isItemsGrouped,
+      mobile,
+      itemsListTestAnchor,
+      onItemClick: type === YCSelect.MULTIPLE ? this.selectItems : this.selectItem,
+      selectOnlyCurrentItem: this.selectOnlyCurrentItem,
+      setPopupWidth: this.setPopupWidth,
+      errorContent
+    };
+    if (selectedPopup) {
+      props = {
+        ...props,
+        items: selectedPopupItems,
+        visible: showSelectedPopup,
+        selectedItemsPopup: true
+      };
+    } else {
+      props = {
+        ...props,
+        items: shownItems,
+        visible: showMainPopup,
+        showMoreItems: Boolean(nextPageToken),
+        isDynamic: Boolean(getItems),
+        isFetchingItems,
+        fetchError,
+        onFetchErrorDetails,
+        fetchErrorDetailsTitle,
+        fetchItems: this._fetchItems,
+        addNewItem: addItem ? this.addNewItem : void 0
+      };
+    }
+    return /* @__PURE__ */ React__default.createElement(ItemsWrapper, { ...props });
+  }
+  _renderApplyButton() {
+    const { type, showApply } = this.props;
+    const { shownItems, selectedPopupItems, isItemsGrouped, showMainPopup, showSelectedPopup } = this.state;
+    const isMultiply = type === YCSelect.MULTIPLE;
+    if (!isMultiply || !showApply) {
+      return null;
+    }
+    const isClosing = !showMainPopup && !showSelectedPopup;
+    let isDisabled;
+    if (showMainPopup) {
+      isDisabled = isItemsGrouped ? shownItems.every((group) => group.items && !group.items.length) : !shownItems.length;
+    } else {
+      isDisabled = isItemsGrouped ? selectedPopupItems.every((group) => group.items && !group.items.length) : !selectedPopupItems.length;
+    }
+    return /* @__PURE__ */ React__default.createElement("div", { className: bAction() }, /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        view: "action",
+        size: "l",
+        width: "max",
+        onClick: this._onApplyClick,
+        disabled: isDisabled || isClosing
+      },
+      trans("apply_button_text")
+    ));
+  }
+  _renderPopupContent({ isMobile }) {
+    const { showSearch, errorContent, loadingItems, itemsLoaderClassName } = this.props;
+    const shouldRenderSearch = showSearch && !errorContent && (isMobile || this.state.popupWidth);
+    return loadingItems ? /* @__PURE__ */ React__default.createElement("div", { className: bPopup("loader", { mobile: isMobile }, itemsLoaderClassName) }, /* @__PURE__ */ React__default.createElement(Loader, { size: "s" })) : /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: isMobile ? {} : this._getPopupStyles(),
+        className: isMobile ? {} : this._getPopupClassNames()
+      },
+      shouldRenderSearch && this._renderSearch(),
+      /* @__PURE__ */ React__default.createElement("div", { ref: this.selectorRef }, this._renderItems({ mobile: isMobile })),
+      this._renderApplyButton()
+    );
+  }
+  _renderDesktopContent() {
+    const { showMainPopup, showSelectedPopup, isControlClicked } = this.state;
+    if (!isControlClicked) {
+      return null;
+    }
+    const popupStyles = this._getPopupStyles();
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      Popup,
+      {
+        open: showMainPopup,
+        anchorElement: this.controlRef.current,
+        placement: AVAILABLE_POPUP_DIRECTIONS,
+        onOpenChange: (open) => {
+          if (!open) {
+            this._onOutsideMainPopupClick();
+          }
+        },
+        initialFocus: 0
+      },
+      this._renderPopupContent({ isMobile: false })
+    ), /* @__PURE__ */ React__default.createElement(
+      Popup,
+      {
+        open: showSelectedPopup,
+        anchorElement: this.controlRef.current,
+        placement: AVAILABLE_POPUP_DIRECTIONS,
+        onOpenChange: (open) => {
+          if (!open) {
+            this._onOutsideSelectedItemsPopupClick();
+          }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement("div", { style: popupStyles, className: this._getPopupClassNames() }, /* @__PURE__ */ React__default.createElement("div", { className: bPopup("select-title") }, trans("selected_popup_title")), this._renderItems({ selectedPopup: true }), this._renderApplyButton())
+    ));
+  }
+  _renderMobileContent() {
+    const { label } = this.props;
+    const { showMainPopup, showSelectedPopup } = this.state;
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      Sheet,
+      {
+        id: "yc-select-main",
+        title: label,
+        visible: showMainPopup,
+        contentClassName: bSheet(null, getModifier("mobile")),
+        allowHideOnContentScroll: false,
+        onClose: this._onOutsideMainPopupClick
+      },
+      this._renderPopupContent({ isMobile: true })
+    ), /* @__PURE__ */ React__default.createElement(
+      Sheet,
+      {
+        id: "yc-select-selected",
+        title: label,
+        visible: showSelectedPopup,
+        contentClassName: bSheet(null, getModifier("mobile")),
+        allowHideOnContentScroll: false,
+        onClose: this._onOutsideSelectedItemsPopupClick
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: bPopup("select-title") }, trans("selected_popup_title")),
+      this._renderItems({ selectedPopup: true, mobile: true }),
+      this._renderApplyButton()
+    ));
+  }
+  render() {
+    return /* @__PURE__ */ React__default.createElement(MobileContext.Consumer, null, ({ mobile }) => {
+      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, this._renderControl(), mobile ? this._renderMobileContent() : this._renderDesktopContent());
+    });
+  }
+}
+const YCSelectDefaultProps = {
+  size: "s",
+  itemsPageSize: 100,
+  virtualizeThreshold: 100,
+  type: YCSelect.SINGLE,
+  items: [],
+  showSearch: true,
+  showArrow: true,
+  stretched: true,
+  showApply: false,
+  showItemIcon: false,
+  showItemMeta: false,
+  showMissingItems: false,
+  allowEmptyValue: false,
+  allowNullableValues: false,
+  showSelectAll: true,
+  hiding: false,
+  disabled: false,
+  loading: false,
+  applyOnOutsideClick: true,
+  loadingItems: false
+};
+YCSelect.defaultProps = YCSelectDefaultProps;
+export {
+  Datepicker as D,
+  RangeInputPicker as R,
+  YCSelect as Y,
+  DatepickerControl as a
+};