@skbkontur/react-ui 0.0.0-edbe8cfc5c → 0.0.0-ee57da3e1e

package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js

@@ -0,0 +1,198 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import { isFunction, isNullable } from "../../../lib/utils";
+import { locale } from "../../../lib/locale/decorators";
+import { Menu } from "../../Menu";
+import { isMenuItem, MenuItem } from "../../../components/MenuItem";
+import { Spinner } from "../../../components/Spinner";
+import { MenuSeparator } from "../../../components/MenuSeparator";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { MenuMessage } from "../../MenuMessage";
+import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
+import { CustomComboBoxLocaleHelper } from "../locale";
+export var ComboBoxMenuDataTids = {
+  loading: 'ComboBoxMenu__loading',
+  failed: 'ComboBoxMenu__failed',
+  notFound: 'ComboBoxMenu__notFound',
+  items: 'ComboBoxMenu__items',
+  item: 'ComboBoxMenu__item'
+};
+export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ComboBoxMenu, _React$Component);
+
+  function ComboBoxMenu() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComboBoxMenu.defaultProps);
+
+    _this.renderItem = function (item, index) {
+      // NOTE this is undesireable feature, better
+      // to remove it from further versions
+      var _this$props = _this.props,
+          renderItem = _this$props.renderItem,
+          onValueChange = _this$props.onValueChange,
+          itemWrapper = _this$props.itemWrapper;
+
+      if (isFunction(item) || /*#__PURE__*/React.isValidElement(item)) {
+        var element = isFunction(item) ? item() : item;
+        var props = Object.assign({
+          key: index,
+          onClick: function onClick() {
+            return onValueChange(element.props);
+          }
+        }, element.props);
+        return /*#__PURE__*/React.cloneElement(element, props);
+      }
+
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        component: itemWrapper == null ? void 0 : itemWrapper(item),
+        "data-tid": ComboBoxMenuDataTids.item,
+        onClick: function onClick() {
+          return onValueChange(item);
+        },
+        key: index,
+        isMobile: _this.props.isMobile
+      }, function (state) {
+        return renderItem(item, state);
+      });
+    };
+
+    return _this;
+  }
+
+  var _proto = ComboBoxMenu.prototype;
+
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        opened = _this$props2.opened,
+        items = _this$props2.items,
+        totalCount = _this$props2.totalCount,
+        loading = _this$props2.loading,
+        refMenu = _this$props2.refMenu,
+        _this$props2$renderNo = _this$props2.renderNotFound,
+        renderNotFound = _this$props2$renderNo === void 0 ? function () {
+      return notFound;
+    } : _this$props2$renderNo,
+        renderTotalCount = _this$props2.renderTotalCount,
+        maxMenuHeight = _this$props2.maxMenuHeight,
+        isMobile = _this$props2.isMobile;
+    var requestStatus = this.getProps().requestStatus;
+    var _this$locale = this.locale,
+        notFound = _this$locale.notFound,
+        errorNetworkButton = _this$locale.errorNetworkButton,
+        errorNetworkMessage = _this$locale.errorNetworkMessage;
+
+    if (!opened) {
+      return null;
+    }
+
+    var renderAddButton = null;
+
+    if (this.props.renderAddButton) {
+      renderAddButton = this.props.renderAddButton();
+    }
+
+    var maxHeight = isMobile ? 'auto' : maxMenuHeight;
+
+    if (loading && (!items || !items.length)) {
+      return /*#__PURE__*/React.createElement(Menu, {
+        maxHeight: maxHeight,
+        ref: refMenu,
+        disableScrollContainer: isMobile,
+        "data-tid": ComboBoxMenuDataTids.loading
+      }, /*#__PURE__*/React.createElement(MenuMessage, {
+        as: "div"
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        type: "mini",
+        dimmed: true
+      })));
+    }
+
+    if (items === null && requestStatus === ComboBoxRequestStatus.Failed) {
+      return /*#__PURE__*/React.createElement(Menu, {
+        ref: refMenu,
+        maxHeight: maxHeight,
+        disableScrollContainer: isMobile,
+        "data-tid": ComboBoxMenuDataTids.failed
+      }, /*#__PURE__*/React.createElement(MenuMessage, {
+        key: "message"
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          maxWidth: 300,
+          whiteSpace: 'normal'
+        }
+      }, errorNetworkMessage)), /*#__PURE__*/React.createElement(MenuItem, {
+        link: true,
+        onClick: this.getProps().repeatRequest,
+        key: "retry",
+        isMobile: isMobile
+      }, errorNetworkButton));
+    }
+
+    if ((isNullable(items) || items.length === 0) && renderNotFound) {
+      var notFoundValue = renderNotFound();
+
+      if (renderAddButton) {
+        return /*#__PURE__*/React.createElement(Menu, {
+          maxHeight: maxHeight,
+          ref: refMenu,
+          disableScrollContainer: isMobile
+        }, renderAddButton);
+      }
+
+      if (notFoundValue) {
+        return /*#__PURE__*/React.createElement(Menu, {
+          maxHeight: maxHeight,
+          ref: refMenu,
+          disableScrollContainer: isMobile
+        }, /*#__PURE__*/React.createElement(MenuMessage, {
+          "data-tid": ComboBoxMenuDataTids.notFound
+        }, notFoundValue));
+      }
+
+      return null;
+    }
+
+    var total = null;
+    var renderedItems = items && items.map(this.renderItem);
+    var menuItems = renderedItems == null ? void 0 : renderedItems.filter(function (item) {
+      return isMenuItem(item);
+    });
+    var countItems = menuItems == null ? void 0 : menuItems.length;
+
+    if (countItems && renderTotalCount && totalCount && countItems < totalCount) {
+      total = /*#__PURE__*/React.createElement(MenuMessage, {
+        key: "total",
+        as: "div"
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          fontSize: 12
+        }
+      }, renderTotalCount(countItems, totalCount)));
+    }
+
+    return /*#__PURE__*/React.createElement(Menu, {
+      "data-tid": ComboBoxMenuDataTids.items,
+      ref: refMenu,
+      maxHeight: maxHeight,
+      disableScrollContainer: isMobile
+    }, renderedItems, total, renderAddButton && [/*#__PURE__*/React.createElement(MenuSeparator, {
+      key: "separator"
+    }), renderAddButton]);
+  };
+
+  return ComboBoxMenu;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxMenu', _class2.defaultProps = {
+  repeatRequest: function repeatRequest() {
+    return undefined;
+  },
+  requestStatus: ComboBoxRequestStatus.Unknown
+}, _temp)) || _class);

package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ComboBoxMenu.tsx"],"names":["React","isFunction","isNullable","locale","Menu","isMenuItem","MenuItem","Spinner","MenuSeparator","createPropsGetter","MenuMessage","ComboBoxRequestStatus","CustomComboBoxLocaleHelper","ComboBoxMenuDataTids","loading","failed","notFound","items","item","ComboBoxMenu","getProps","defaultProps","renderItem","index","props","onValueChange","itemWrapper","isValidElement","element","Object","assign","key","onClick","cloneElement","isMobile","state","render","opened","totalCount","refMenu","renderNotFound","renderTotalCount","maxMenuHeight","requestStatus","errorNetworkButton","errorNetworkMessage","renderAddButton","maxHeight","length","Failed","maxWidth","whiteSpace","repeatRequest","notFoundValue","total","renderedItems","map","menuItems","filter","countItems","fontSize","Component","__KONTUR_REACT_UI__","undefined","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isFunction, isNullable } from '../../lib/utils';\nimport { locale } from '../../lib/locale/decorators';\nimport { Menu } from '../Menu';\nimport { isMenuItem, MenuItem, MenuItemState } from '../../components/MenuItem';\nimport { Spinner } from '../../components/Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { MenuSeparator } from '../../components/MenuSeparator';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { MenuMessage } from '../MenuMessage';\n\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { ComboBoxLocale, CustomComboBoxLocaleHelper } from './locale';\n\nexport interface ComboBoxMenuProps<T> {\n  opened?: boolean;\n  items?: Nullable<T[]>;\n  totalCount?: number;\n  loading?: boolean;\n  maxMenuHeight?: number | string;\n  refMenu?: (menu: Nullable<Menu>) => void;\n  renderNotFound?: () => React.ReactNode;\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n  renderItem: (item: T, state: MenuItemState) => React.ReactNode;\n  itemWrapper?: (item?: T) => React.ComponentType<unknown>;\n  onValueChange: (value: T) => any;\n  renderAddButton?: () => React.ReactNode;\n  caption?: React.ReactNode;\n  repeatRequest?: () => void;\n  requestStatus?: ComboBoxRequestStatus;\n  isMobile?: boolean;\n}\n\nexport const ComboBoxMenuDataTids = {\n  loading: 'ComboBoxMenu__loading',\n  failed: 'ComboBoxMenu__failed',\n  notFound: 'ComboBoxMenu__notFound',\n  items: 'ComboBoxMenu__items',\n  item: 'ComboBoxMenu__item',\n} as const;\n\ntype DefaultProps<T> = Required<Pick<ComboBoxMenuProps<T>, 'repeatRequest' | 'requestStatus'>>;\n\n@locale('ComboBox', CustomComboBoxLocaleHelper)\nexport class ComboBoxMenu<T> extends React.Component<ComboBoxMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBoxMenu';\n\n  public static defaultProps: DefaultProps<unknown> = {\n    repeatRequest: () => undefined,\n    requestStatus: ComboBoxRequestStatus.Unknown,\n  };\n\n  private getProps = createPropsGetter(ComboBoxMenu.defaultProps);\n\n  private readonly locale!: ComboBoxLocale;\n\n  public render() {\n    const {\n      opened,\n      items,\n      totalCount,\n      loading,\n      refMenu,\n      renderNotFound = () => notFound,\n      renderTotalCount,\n      maxMenuHeight,\n      isMobile,\n    } = this.props;\n\n    const requestStatus = this.getProps().requestStatus;\n\n    const { notFound, errorNetworkButton, errorNetworkMessage } = this.locale;\n\n    if (!opened) {\n      return null;\n    }\n\n    let renderAddButton = null;\n    if (this.props.renderAddButton) {\n      renderAddButton = this.props.renderAddButton();\n    }\n\n    const maxHeight = isMobile ? 'auto' : maxMenuHeight;\n\n    if (loading && (!items || !items.length)) {\n      return (\n        <Menu\n          maxHeight={maxHeight}\n          ref={refMenu}\n          disableScrollContainer={isMobile}\n          data-tid={ComboBoxMenuDataTids.loading}\n        >\n          <MenuMessage as=\"div\">\n            <Spinner type=\"mini\" dimmed />\n          </MenuMessage>\n        </Menu>\n      );\n    }\n\n    if (items === null && requestStatus === ComboBoxRequestStatus.Failed) {\n      return (\n        <Menu\n          ref={refMenu}\n          maxHeight={maxHeight}\n          disableScrollContainer={isMobile}\n          data-tid={ComboBoxMenuDataTids.failed}\n        >\n          <MenuMessage key=\"message\">\n            <div style={{ maxWidth: 300, whiteSpace: 'normal' }}>{errorNetworkMessage}</div>\n          </MenuMessage>\n          <MenuItem link onClick={this.getProps().repeatRequest} key=\"retry\" isMobile={isMobile}>\n            {errorNetworkButton}\n          </MenuItem>\n        </Menu>\n      );\n    }\n\n    if ((isNullable(items) || items.length === 0) && renderNotFound) {\n      const notFoundValue = renderNotFound();\n      if (renderAddButton) {\n        return (\n          <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>\n            {renderAddButton}\n          </Menu>\n        );\n      }\n\n      if (notFoundValue) {\n        return (\n          <Menu maxHeight={maxHeight} ref={refMenu} disableScrollContainer={isMobile}>\n            <MenuMessage data-tid={ComboBoxMenuDataTids.notFound}>{notFoundValue}</MenuMessage>\n          </Menu>\n        );\n      }\n\n      return null;\n    }\n\n    let total = null;\n    const renderedItems = items && items.map(this.renderItem);\n    const menuItems = renderedItems?.filter((item) => {\n      return isMenuItem(item);\n    });\n    const countItems = menuItems?.length;\n\n    if (countItems && renderTotalCount && totalCount && countItems < totalCount) {\n      total = (\n        <MenuMessage key=\"total\" as=\"div\">\n          <div style={{ fontSize: 12 }}>{renderTotalCount(countItems, totalCount)}</div>\n        </MenuMessage>\n      );\n    }\n\n    return (\n      <Menu data-tid={ComboBoxMenuDataTids.items} ref={refMenu} maxHeight={maxHeight} disableScrollContainer={isMobile}>\n        {renderedItems}\n        {total}\n        {renderAddButton && [<MenuSeparator key=\"separator\" />, renderAddButton]}\n      </Menu>\n    );\n  }\n\n  private renderItem = (item: T, index: number): React.ReactNode => {\n    // NOTE this is undesireable feature, better\n    // to remove it from further versions\n    const { renderItem, onValueChange, itemWrapper } = this.props;\n    if (isFunction(item) || React.isValidElement(item)) {\n      const element = isFunction(item) ? item() : item;\n      const props = Object.assign(\n        {\n          key: index,\n          onClick: () => onValueChange(element.props),\n        },\n        element.props,\n      );\n      return React.cloneElement(element, props);\n    }\n\n    return (\n      <MenuItem\n        component={itemWrapper?.(item)}\n        data-tid={ComboBoxMenuDataTids.item}\n        onClick={() => onValueChange(item)}\n        key={index}\n        isMobile={this.props.isMobile}\n      >\n        {(state) => renderItem(item, state)}\n      </MenuItem>\n    );\n  };\n}\n"]}

package/internal/CustomComboBox/ComboBoxMenu/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/CustomComboBox/ComboBoxMenu.js",
+  "module": "ComboBoxMenu",
+  "types": "../ComboBoxMenu.d.ts",
+  "sideEffects": false
+}

package/internal/CustomComboBox/ComboBoxMenu.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Menu } from '../Menu';
+import { MenuItemState } from '../../components/MenuItem';
+import { Nullable } from '../../typings/utility-types';
+import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
+export interface ComboBoxMenuProps<T> {
+    opened?: boolean;
+    items?: Nullable<T[]>;
+    totalCount?: number;
+    loading?: boolean;
+    maxMenuHeight?: number | string;
+    refMenu?: (menu: Nullable<Menu>) => void;
+    renderNotFound?: () => React.ReactNode;
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    renderItem: (item: T, state: MenuItemState) => React.ReactNode;
+    itemWrapper?: (item?: T) => React.ComponentType<unknown>;
+    onValueChange: (value: T) => any;
+    renderAddButton?: () => React.ReactNode;
+    caption?: React.ReactNode;
+    repeatRequest?: () => void;
+    requestStatus?: ComboBoxRequestStatus;
+    isMobile?: boolean;
+}
+export declare const ComboBoxMenuDataTids: {
+    readonly loading: "ComboBoxMenu__loading";
+    readonly failed: "ComboBoxMenu__failed";
+    readonly notFound: "ComboBoxMenu__notFound";
+    readonly items: "ComboBoxMenu__items";
+    readonly item: "ComboBoxMenu__item";
+};
+declare type DefaultProps<T> = Required<Pick<ComboBoxMenuProps<T>, 'repeatRequest' | 'requestStatus'>>;
+export declare class ComboBoxMenu<T> extends React.Component<ComboBoxMenuProps<T>> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps<unknown>;
+    private getProps;
+    private readonly locale;
+    render(): JSX.Element | null;
+    private renderItem;
+}
+export {};

package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js

@@ -0,0 +1,378 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { isNonNullable } from "../../../lib/utils";
+import { DropdownContainer } from "../../DropdownContainer";
+import { Input } from "../../../components/Input";
+import { InputLikeText } from "../../InputLikeText";
+import { RenderLayer } from "../../RenderLayer";
+import { Spinner } from "../../../components/Spinner";
+import { ArrowChevronDownIcon } from "../../icons/16px";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { MobilePopup } from "../../MobilePopup";
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { rootNode, getRootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { LoadingIcon } from "../../icons2022/LoadingIcon";
+import { ArrowDownIcon } from "../ArrowDownIcon";
+import { ComboBoxMenu } from "../ComboBoxMenu";
+import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
+import { styles } from "../CustomComboBox.styles";
+import { CustomComboBoxDataTids } from "../CustomComboBox";
+import { getComboBoxTheme } from "../getComboBoxTheme";
+export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ComboBoxView, _React$Component);
+
+  function ComboBoxView() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComboBoxView.defaultProps);
+    _this.mobileInput = null;
+    _this.dropdownContainerRef = /*#__PURE__*/React.createRef();
+    _this.state = {
+      isMobileOpened: false
+    };
+
+    _this.getComboBoxMenu = function () {
+      var _this$props = _this.props,
+          items = _this$props.items,
+          loading = _this$props.loading,
+          opened = _this$props.opened,
+          refMenu = _this$props.refMenu,
+          maxMenuHeight = _this$props.maxMenuHeight,
+          renderTotalCount = _this$props.renderTotalCount,
+          renderNotFound = _this$props.renderNotFound,
+          totalCount = _this$props.totalCount;
+
+      var _this$getProps = _this.getProps(),
+          repeatRequest = _this$getProps.repeatRequest,
+          requestStatus = _this$getProps.requestStatus,
+          renderItem = _this$getProps.renderItem,
+          itemWrapper = _this$getProps.itemWrapper;
+
+      return /*#__PURE__*/React.createElement(ComboBoxMenu, {
+        items: items,
+        loading: loading,
+        maxMenuHeight: maxMenuHeight,
+        onValueChange: _this.handleItemSelect,
+        opened: opened,
+        refMenu: refMenu,
+        renderTotalCount: renderTotalCount,
+        renderItem: renderItem,
+        renderNotFound: renderNotFound,
+        itemWrapper: itemWrapper,
+        renderAddButton: _this.renderAddButton,
+        repeatRequest: repeatRequest,
+        requestStatus: requestStatus,
+        totalCount: totalCount,
+        isMobile: _this.isMobileLayout
+      });
+    };
+
+    _this.renderMenu = function () {
+      var _this$props2 = _this.props,
+          menuAlign = _this$props2.menuAlign,
+          opened = _this$props2.opened,
+          menuPos = _this$props2.menuPos;
+      return opened && /*#__PURE__*/React.createElement(DropdownContainer, {
+        menuPos: menuPos,
+        align: menuAlign,
+        getParent: _this.getParent,
+        disablePortal: _this.props.disablePortal,
+        ref: _this.dropdownContainerRef
+      }, _this.getComboBoxMenu());
+    };
+
+    _this.renderMobileMenu = function () {
+      var rightIcon = null;
+      var _this$props3 = _this.props,
+          loading = _this$props3.loading,
+          items = _this$props3.items;
+
+      if (loading && items && !!items.length) {
+        rightIcon = _this.renderSpinner();
+      }
+
+      var inputProps = {
+        autoFocus: true,
+        width: '100%',
+        onFocus: _this.props.onFocus,
+        onValueChange: _this.props.onInputValueChange,
+        value: _this.props.textValue,
+        placeholder: _this.props.placeholder,
+        rightIcon: rightIcon
+      };
+      return /*#__PURE__*/React.createElement(MobilePopup, {
+        headerChildComponent: /*#__PURE__*/React.createElement(Input, _extends({
+          ref: _this.refMobileInput
+        }, inputProps)),
+        onCloseRequest: _this.handleCloseMobile,
+        opened: _this.state.isMobileOpened
+      }, _this.getComboBoxMenu());
+    };
+
+    _this.handleCloseMobile = function () {
+      _this.setState({
+        isMobileOpened: false
+      });
+
+      if (_this.props.onInputBlur) {
+        _this.props.onInputBlur();
+      }
+    };
+
+    _this.getParent = function () {
+      return getRootNode(_assertThisInitialized(_this));
+    };
+
+    _this.renderAddButton = function () {
+      return _this.getProps().renderAddButton(_this.props.textValue);
+    };
+
+    _this.handleFocusMobile = function () {
+      _this.setState({
+        isMobileOpened: true
+      });
+
+      if (_this.mobileInput) {
+        _this.mobileInput.focus();
+      }
+    };
+
+    _this.handleItemSelect = function (item) {
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange(item);
+      }
+
+      if (_this.isMobileLayout) {
+        _this.handleCloseMobile();
+      }
+    };
+
+    _this.refInput = function (input) {
+      if (_this.props.refInput) {
+        _this.props.refInput(input);
+      }
+
+      _this.input = input;
+    };
+
+    _this.renderSpinner = function () {
+      return /*#__PURE__*/React.createElement("span", {
+        className: styles.spinnerWrapper()
+      }, /*#__PURE__*/React.createElement(Spinner, {
+        type: "mini",
+        caption: "",
+        dimmed: true
+      }));
+    };
+
+    _this.getRightIcon = function () {
+      var _this$props4 = _this.props,
+          loading = _this$props4.loading,
+          items = _this$props4.items,
+          drawArrow = _this$props4.drawArrow,
+          rightIcon = _this$props4.rightIcon,
+          size = _this$props4.size;
+
+      if (loading && items && !!items.length) {
+        if (isTheme2022(_this.theme)) {
+          return /*#__PURE__*/React.createElement(LoadingIcon, {
+            size: size
+          });
+        }
+
+        return _this.renderSpinner();
+      }
+
+      if (rightIcon || drawArrow) {
+        if (isTheme2022(_this.theme)) {
+          return rightIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, {
+            size: size
+          });
+        }
+
+        return /*#__PURE__*/React.createElement("span", {
+          className: styles.rightIconWrapper()
+        }, rightIcon != null ? rightIcon : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null));
+      }
+
+      return null;
+    };
+
+    _this.refMobileInput = function (input) {
+      _this.mobileInput = input;
+    };
+
+    return _this;
+  }
+
+  var _proto = ComboBoxView.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    var _this$dropdownContain;
+
+    if (this.props.autoFocus && this.props.onFocus) {
+      this.props.onFocus();
+    }
+
+    this.props.opened && ((_this$dropdownContain = this.dropdownContainerRef.current) == null ? void 0 : _this$dropdownContain.position());
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var input = this.input,
+        props = this.props;
+
+    if (props.editing && !prevProps.editing && input) {
+      input.focus();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = getComboBoxTheme(theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain());
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this$props5 = this.props,
+        onMouseEnter = _this$props5.onMouseEnter,
+        onMouseLeave = _this$props5.onMouseLeave,
+        onMouseOver = _this$props5.onMouseOver,
+        opened = _this$props5.opened;
+
+    var _this$getProps2 = this.getProps(),
+        onClickOutside = _this$getProps2.onClickOutside,
+        onFocusOutside = _this$getProps2.onFocusOutside,
+        width = _this$getProps2.width;
+
+    var isMobile = this.isMobileLayout;
+    var input = this.renderInput();
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
+      onClickOutside: onClickOutside,
+      onFocusOutside: onFocusOutside,
+      active: opened
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-tid": CustomComboBoxDataTids.comboBoxView,
+      style: {
+        width: width
+      },
+      className: styles.root(),
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseOver: onMouseOver,
+      ref: this.setRootNode
+    }, input, isMobile ? this.renderMobileMenu() : this.renderMenu())));
+  };
+
+  _proto.renderInput = function renderInput() {
+    var isMobile = this.isMobileLayout;
+    var _this$props6 = this.props,
+        align = _this$props6.align,
+        borderless = _this$props6.borderless,
+        disabled = _this$props6.disabled,
+        editing = _this$props6.editing,
+        error = _this$props6.error,
+        onFocus = _this$props6.onFocus,
+        onInputBlur = _this$props6.onInputBlur,
+        onInputValueChange = _this$props6.onInputValueChange,
+        onInputFocus = _this$props6.onInputFocus,
+        onInputClick = _this$props6.onInputClick,
+        onInputKeyDown = _this$props6.onInputKeyDown,
+        placeholder = _this$props6.placeholder,
+        textValue = _this$props6.textValue,
+        value = _this$props6.value,
+        warning = _this$props6.warning,
+        refInputLikeText = _this$props6.refInputLikeText,
+        leftIcon = _this$props6.leftIcon,
+        inputMode = _this$props6.inputMode,
+        ariaDescribedby = _this$props6['aria-describedby'];
+
+    var _this$getProps3 = this.getProps(),
+        renderValue = _this$getProps3.renderValue,
+        size = _this$getProps3.size;
+
+    var rightIcon = this.getRightIcon();
+
+    if (editing) {
+      return /*#__PURE__*/React.createElement(Input, {
+        align: align,
+        borderless: borderless,
+        disabled: disabled,
+        error: error,
+        maxLength: this.props.maxLength,
+        onBlur: isMobile ? undefined : onInputBlur,
+        onValueChange: onInputValueChange,
+        onFocus: isMobile ? this.handleFocusMobile : onInputFocus,
+        onClick: isMobile ? this.handleFocusMobile : onInputClick,
+        leftIcon: leftIcon,
+        rightIcon: rightIcon,
+        value: textValue || '',
+        onKeyDown: onInputKeyDown,
+        placeholder: placeholder,
+        width: "100%",
+        size: size,
+        ref: this.refInput,
+        warning: warning,
+        inputMode: inputMode,
+        "aria-describedby": ariaDescribedby
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(InputLikeText, {
+      align: align,
+      borderless: borderless,
+      error: error,
+      onFocus: onFocus,
+      leftIcon: leftIcon,
+      rightIcon: rightIcon,
+      disabled: disabled,
+      warning: warning,
+      placeholder: placeholder,
+      size: size,
+      width: "100%",
+      ref: refInputLikeText,
+      "aria-describedby": ariaDescribedby
+    }, isNonNullable(value) && renderValue ? renderValue(value) : null);
+  };
+
+  return ComboBoxView;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxView', _class2.defaultProps = {
+  renderItem: function renderItem(item) {
+    return item;
+  },
+  renderValue: function renderValue(item) {
+    return item;
+  },
+  renderAddButton: function renderAddButton() {
+    return null;
+  },
+  repeatRequest: function repeatRequest() {
+    return undefined;
+  },
+  requestStatus: ComboBoxRequestStatus.Unknown,
+  onClickOutside: function onClickOutside() {
+    /**/
+  },
+  onFocusOutside: function onFocusOutside() {
+    /**/
+  },
+  size: 'small',
+  width: 250
+}, _temp)) || _class) || _class;