@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/cjs/internal/CustomComboBox/ComboBoxView.js

@@ -0,0 +1,380 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ComboBoxView = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _reactDom = require("react-dom");
+
+var _utils = require("../../lib/utils");
+var _DropdownContainer = require("../DropdownContainer");
+var _Input = require("../../components/Input");
+var _InputLikeText = require("../InputLikeText");
+
+
+var _RenderLayer = require("../RenderLayer");
+var _Spinner = require("../../components/Spinner");
+
+var _px = require("../icons/16px");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _MobilePopup = require("../MobilePopup");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _ResponsiveLayout = require("../../components/ResponsiveLayout");
+
+var _ComboBoxMenu = require("./ComboBoxMenu");
+var _CustomComboBoxTypes = require("./CustomComboBoxTypes");
+var _CustomComboBox = require("./CustomComboBox.styles");var _class, _class2, _temp;var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ComboBoxView = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    input = void 0;_this.
+    mobileInput = null;_this.
+
+    theme = void 0;_this.
+    isMobileLayout = void 0;_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,renderItem = _this$props.renderItem,renderNotFound = _this$props.renderNotFound,repeatRequest = _this$props.repeatRequest,requestStatus = _this$props.requestStatus,totalCount = _this$props.totalCount;
+
+      return /*#__PURE__*/(
+        _react.default.createElement(_ComboBoxMenu.ComboBoxMenu, {
+          items: items,
+          loading: loading,
+          maxMenuHeight: maxMenuHeight,
+          onValueChange: _this.handleItemSelect,
+          opened: opened,
+          refMenu: refMenu,
+          renderTotalCount: renderTotalCount,
+          renderItem: renderItem,
+          renderNotFound: renderNotFound,
+          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;
+
+      return (
+        opened && /*#__PURE__*/
+        _react.default.createElement(_DropdownContainer.DropdownContainer, {
+          align: menuAlign,
+          getParent: function getParent() {return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));},
+          offsetY: 1,
+          disablePortal: _this.props.disablePortal },
+
+        _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.default.createElement(_MobilePopup.MobilePopup, {
+          headerChildComponent: /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({ ref: _this.refMobileInput }, inputProps)),
+          useFullHeight: true,
+          onCloseRequest: _this.handleCloseMobile,
+          opened: _this.state.isMobileOpened },
+
+        _this.getComboBoxMenu()));
+
+
+    };_this.
+
+    handleCloseMobile = function () {
+      _this.setState({
+        isMobileOpened: false });
+
+
+      if (_this.props.onInputBlur) {
+        _this.props.onInputBlur();
+      }
+    };_this.
+
+    renderAddButton = function () {
+      return _this.props.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.default.createElement("span", { className: _CustomComboBox.styles.spinnerWrapper() }, /*#__PURE__*/
+        _react.default.createElement(_Spinner.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;
+
+      if (loading && items && !!items.length) {
+        return _this.renderSpinner();
+      }
+
+      if (rightIcon || drawArrow) {
+        return /*#__PURE__*/_react.default.createElement("span", { className: _CustomComboBox.styles.rightIconWrapper() }, rightIcon != null ? rightIcon : /*#__PURE__*/_react.default.createElement(_px.ArrowChevronDownIcon, null));
+      }
+
+      return null;
+    };_this.
+
+    refMobileInput = function (input) {
+      _this.mobileInput = input;
+    };return _this;}var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_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;var _this$props5 = this.props,onClickOutside = _this$props5.onClickOutside,onFocusOutside = _this$props5.onFocusOutside,onMouseEnter = _this$props5.onMouseEnter,onMouseLeave = _this$props5.onMouseLeave,onMouseOver = _this$props5.onMouseOver,opened = _this$props5.opened,width = _this$props5.width;var isMobile = this.isMobileLayout;var input = this.renderInput();return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver }, input, isMobile ? _this2.renderMobileMenu() : _this2.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,renderValue = _this$props6.renderValue,size = _this$props6.size,textValue = _this$props6.textValue,value = _this$props6.value,warning = _this$props6.warning,refInputLikeText = _this$props6.refInputLikeText,leftIcon = _this$props6.leftIcon,inputMode = _this$props6.inputMode;var rightIcon = this.getRightIcon();if (editing) {return /*#__PURE__*/_react.default.createElement(_Input.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 });}return /*#__PURE__*/_react.default.createElement(_InputLikeText.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 }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.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: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250 }, _temp)) || _class;exports.ComboBoxView = ComboBoxView;

package/cjs/internal/CustomComboBox/ComboBoxView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ComboBoxView.tsx"],"names":["ComboBoxView","responsiveLayout","input","mobileInput","theme","isMobileLayout","state","isMobileOpened","getComboBoxMenu","props","items","loading","opened","refMenu","maxMenuHeight","renderTotalCount","renderItem","renderNotFound","repeatRequest","requestStatus","totalCount","handleItemSelect","renderAddButton","renderMenu","menuAlign","disablePortal","renderMobileMenu","rightIcon","length","renderSpinner","inputProps","autoFocus","width","onFocus","onValueChange","onInputValueChange","value","textValue","placeholder","refMobileInput","handleCloseMobile","setState","onInputBlur","handleFocusMobile","focus","item","refInput","styles","spinnerWrapper","getRightIcon","drawArrow","rightIconWrapper","componentDidMount","componentDidUpdate","prevProps","editing","render","onClickOutside","onFocusOutside","onMouseEnter","onMouseLeave","onMouseOver","isMobile","renderInput","root","align","borderless","disabled","error","onInputFocus","onInputClick","onInputKeyDown","renderValue","size","warning","refInputLikeText","leftIcon","inputMode","maxLength","undefined","React","Component","__KONTUR_REACT_UI__","defaultProps","ComboBoxRequestStatus","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { findDOMNode } from 'react-dom';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { DropdownContainer } from '../DropdownContainer';\nimport { Input, InputIconType, InputProps } from '../../components/Input';\nimport { InputLikeText } from '../InputLikeText';\nimport { Menu } from '../Menu';\nimport { MenuItemState } from '../../components/MenuItem';\nimport { RenderLayer } from '../RenderLayer';\nimport { Spinner } from '../../components/Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ArrowChevronDownIcon } from '../icons/16px';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { MobilePopup } from '../MobilePopup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { responsiveLayout } from '../../components/ResponsiveLayout';\n\nimport { ComboBoxMenu } from './ComboBoxMenu';\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { styles } from './CustomComboBox.styles';\n\ninterface ComboBoxViewProps<T> extends CommonProps {\n  align?: 'left' | 'center' | 'right';\n  autoFocus?: boolean;\n  borderless?: boolean;\n  disablePortal?: boolean;\n  disabled?: boolean;\n  editing?: boolean;\n  /**\n   * Cостояние валидации при ошибке.\n   */\n  error?: boolean;\n  items?: Nullable<T[]>;\n  loading?: boolean;\n  menuAlign?: 'left' | 'right';\n  opened?: boolean;\n  drawArrow?: boolean;\n  placeholder?: string;\n  size?: 'small' | 'medium' | 'large';\n  textValue?: string;\n  totalCount?: number;\n  value?: Nullable<T>;\n  /**\n   * Cостояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  width?: string | number;\n  maxLength?: number;\n  maxMenuHeight?: number | string;\n  leftIcon?: InputIconType;\n  rightIcon?: InputIconType;\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n\n  onValueChange?: (value: T) => void;\n  onClickOutside?: (e: Event) => void;\n  onFocus?: () => void;\n  onFocusOutside?: () => void;\n  onInputBlur?: () => void;\n  onInputValueChange?: (value: string) => void;\n  onInputFocus?: () => void;\n  onInputClick?: () => void;\n  onInputKeyDown?: (e: React.KeyboardEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseOver?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n  renderItem?: (item: T, state: MenuItemState) => React.ReactNode;\n  renderNotFound?: () => React.ReactNode;\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n  renderValue?: (item: T) => React.ReactNode;\n  renderAddButton: (query?: string) => React.ReactNode;\n  repeatRequest?: () => void;\n  requestStatus?: ComboBoxRequestStatus;\n  refInput?: (input: Nullable<Input>) => void;\n  refMenu?: (menu: Nullable<Menu>) => void;\n  refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;\n}\n\ninterface ComboBoxViewState {\n  isMobileOpened: boolean;\n}\n\n@responsiveLayout\nexport class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, ComboBoxViewState> {\n  public static __KONTUR_REACT_UI__ = 'ComboBoxView';\n\n  public static defaultProps = {\n    renderItem: (item: any) => item,\n    renderValue: (item: any) => item,\n    renderAddButton: () => null,\n    repeatRequest: () => undefined,\n    requestStatus: ComboBoxRequestStatus.Unknown,\n    onClickOutside: () => {\n      /**/\n    },\n    onFocusOutside: () => {\n      /**/\n    },\n    size: 'small',\n    width: 250,\n  };\n\n  private input: Nullable<Input>;\n  private mobileInput: Nullable<Input> = null;\n  //@ts-ignore\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n\n  public componentDidMount() {\n    if (this.props.autoFocus && this.props.onFocus) {\n      this.props.onFocus();\n    }\n  }\n\n  public state: ComboBoxViewState = {\n    isMobileOpened: false,\n  };\n\n  public componentDidUpdate(prevProps: ComboBoxViewProps<T>) {\n    const { input, props } = this;\n\n    if (props.editing && !prevProps.editing && input) {\n      input.focus();\n    }\n  }\n\n  public render() {\n    const { onClickOutside, onFocusOutside, onMouseEnter, onMouseLeave, onMouseOver, opened, width } = this.props;\n\n    const isMobile = this.isMobileLayout;\n\n    const input = this.renderInput();\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n\n          return (\n            <CommonWrapper {...this.props}>\n              <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>\n                <span\n                  style={{ width }}\n                  className={styles.root()}\n                  onMouseEnter={onMouseEnter}\n                  onMouseLeave={onMouseLeave}\n                  onMouseOver={onMouseOver}\n                >\n                  {input}\n                  {isMobile ? this.renderMobileMenu() : this.renderMenu()}\n                </span>\n              </RenderLayer>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getComboBoxMenu = () => {\n    const {\n      items,\n      loading,\n      opened,\n      refMenu,\n      maxMenuHeight,\n      renderTotalCount,\n      renderItem,\n      renderNotFound,\n      repeatRequest,\n      requestStatus,\n      totalCount,\n    } = this.props;\n\n    return (\n      <ComboBoxMenu\n        items={items}\n        loading={loading}\n        maxMenuHeight={maxMenuHeight}\n        onValueChange={this.handleItemSelect}\n        opened={opened}\n        refMenu={refMenu}\n        renderTotalCount={renderTotalCount}\n        renderItem={renderItem!}\n        renderNotFound={renderNotFound}\n        renderAddButton={this.renderAddButton}\n        repeatRequest={repeatRequest}\n        requestStatus={requestStatus}\n        totalCount={totalCount}\n        isMobile={this.isMobileLayout}\n      />\n    );\n  };\n\n  private renderMenu = () => {\n    const { menuAlign, opened } = this.props;\n\n    return (\n      opened && (\n        <DropdownContainer\n          align={menuAlign}\n          getParent={() => findDOMNode(this)}\n          offsetY={1}\n          disablePortal={this.props.disablePortal}\n        >\n          {this.getComboBoxMenu()}\n        </DropdownContainer>\n      )\n    );\n  };\n\n  private renderMobileMenu = () => {\n    let rightIcon = null;\n\n    const { loading, items } = this.props;\n    if (loading && items && !!items.length) {\n      rightIcon = this.renderSpinner();\n    }\n\n    const inputProps: InputProps = {\n      autoFocus: true,\n      width: '100%',\n      onFocus: this.props.onFocus,\n      onValueChange: this.props.onInputValueChange,\n      value: this.props.textValue,\n      placeholder: this.props.placeholder,\n      rightIcon,\n    };\n\n    return (\n      <MobilePopup\n        headerChildComponent={<Input ref={this.refMobileInput} {...inputProps} />}\n        useFullHeight\n        onCloseRequest={this.handleCloseMobile}\n        opened={this.state.isMobileOpened}\n      >\n        {this.getComboBoxMenu()}\n      </MobilePopup>\n    );\n  };\n\n  private handleCloseMobile = () => {\n    this.setState({\n      isMobileOpened: false,\n    });\n\n    if (this.props.onInputBlur) {\n      this.props.onInputBlur();\n    }\n  };\n\n  private renderAddButton = (): React.ReactNode => {\n    return this.props.renderAddButton(this.props.textValue);\n  };\n\n  private renderInput(): React.ReactNode {\n    const isMobile = this.isMobileLayout;\n\n    const {\n      align,\n      borderless,\n      disabled,\n      editing,\n      error,\n      onFocus,\n      onInputBlur,\n      onInputValueChange,\n      onInputFocus,\n      onInputClick,\n      onInputKeyDown,\n      placeholder,\n      renderValue,\n      size,\n      textValue,\n      value,\n      warning,\n      refInputLikeText,\n      leftIcon,\n      inputMode,\n    } = this.props;\n\n    const rightIcon = this.getRightIcon();\n\n    if (editing) {\n      return (\n        <Input\n          align={align}\n          borderless={borderless}\n          disabled={disabled}\n          error={error}\n          maxLength={this.props.maxLength}\n          onBlur={isMobile ? undefined : onInputBlur}\n          onValueChange={onInputValueChange}\n          onFocus={isMobile ? this.handleFocusMobile : onInputFocus}\n          onClick={isMobile ? this.handleFocusMobile : onInputClick}\n          leftIcon={leftIcon}\n          rightIcon={rightIcon}\n          value={textValue || ''}\n          onKeyDown={onInputKeyDown}\n          placeholder={placeholder}\n          width=\"100%\"\n          size={size}\n          ref={this.refInput}\n          warning={warning}\n          inputMode={inputMode}\n        />\n      );\n    }\n\n    return (\n      <InputLikeText\n        align={align}\n        borderless={borderless}\n        error={error}\n        onFocus={onFocus}\n        leftIcon={leftIcon}\n        rightIcon={rightIcon}\n        disabled={disabled}\n        warning={warning}\n        placeholder={placeholder}\n        size={size}\n        width=\"100%\"\n        ref={refInputLikeText}\n      >\n        {isNonNullable(value) && renderValue ? renderValue(value) : null}\n      </InputLikeText>\n    );\n  }\n\n  private handleFocusMobile = () => {\n    this.setState({\n      isMobileOpened: true,\n    });\n\n    if (this.mobileInput) {\n      this.mobileInput.focus();\n    }\n  };\n\n  private handleItemSelect = (item: T) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(item);\n    }\n\n    if (this.isMobileLayout) {\n      this.handleCloseMobile();\n    }\n  };\n\n  private refInput = (input: Nullable<Input>) => {\n    if (this.props.refInput) {\n      this.props.refInput(input);\n    }\n    this.input = input;\n  };\n\n  private renderSpinner = () => (\n    <span className={styles.spinnerWrapper()}>\n      <Spinner type=\"mini\" caption=\"\" dimmed />\n    </span>\n  );\n\n  private getRightIcon = () => {\n    const { loading, items, drawArrow, rightIcon } = this.props;\n\n    if (loading && items && !!items.length) {\n      return this.renderSpinner();\n    }\n\n    if (rightIcon || drawArrow) {\n      return <span className={styles.rightIconWrapper()}>{rightIcon ?? <ArrowChevronDownIcon />}</span>;\n    }\n\n    return null;\n  };\n\n  private refMobileInput = (input: Nullable<Input>) => {\n    this.mobileInput = input;\n  };\n}\n"]}

package/cjs/internal/CustomComboBox/CustomComboBox.d.ts

@@ -0,0 +1,136 @@
+import React from 'react';
+import { Nullable } from '../../typings/utility-types';
+import { Input, InputIconType } from '../../components/Input';
+import { Menu } from '../Menu';
+import { InputLikeText } from '../InputLikeText';
+import { MenuItemState } from '../../components/MenuItem';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
+export interface CustomComboBoxProps<T> extends CommonProps {
+    align?: 'left' | 'center' | 'right';
+    autoFocus?: boolean;
+    borderless?: boolean;
+    disablePortal?: boolean;
+    disabled?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
+    error?: boolean;
+    maxLength?: number;
+    menuAlign?: 'left' | 'right';
+    drawArrow?: boolean;
+    leftIcon?: InputIconType;
+    rightIcon?: InputIconType;
+    searchOnFocus?: boolean;
+    onValueChange?: (value: T) => void;
+    onInputValueChange?: (value: string) => Nullable<string> | void;
+    onUnexpectedInput?: (value: string) => void | null | T;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseOver?: (e: React.MouseEvent) => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+    placeholder?: string;
+    size?: 'small' | 'medium' | 'large';
+    totalCount?: number;
+    value?: Nullable<T>;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
+    warning?: boolean;
+    width?: string | number;
+    maxMenuHeight?: number | string;
+    renderNotFound?: () => React.ReactNode;
+    renderTotalCount?: (found: number, total: number) => React.ReactNode;
+    renderItem: (item: T, state?: MenuItemState) => React.ReactNode;
+    renderValue: (value: T) => React.ReactNode;
+    renderAddButton?: (query?: string) => React.ReactNode;
+    valueToString: (value: T) => string;
+    itemToValue: (item: T) => string | number;
+    getItems: (query: string) => Promise<T[]>;
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+}
+export interface CustomComboBoxState<T> {
+    editing: boolean;
+    loading: boolean;
+    opened: boolean;
+    textValue: string;
+    items: Nullable<T[]>;
+    inputChanged: boolean;
+    focused: boolean;
+    repeatRequest: () => void;
+    requestStatus: ComboBoxRequestStatus;
+}
+export declare const DELAY_BEFORE_SHOW_LOADER = 300;
+export declare const LOADER_SHOW_TIME = 1000;
+export declare const DefaultState: {
+    inputChanged: boolean;
+    editing: boolean;
+    items: null;
+    loading: boolean;
+    opened: boolean;
+    focused: boolean;
+    textValue: string;
+    repeatRequest: () => undefined;
+    requestStatus: ComboBoxRequestStatus;
+};
+export declare class CustomComboBox<T> extends React.PureComponent<CustomComboBoxProps<T>, CustomComboBoxState<T>> {
+    static __KONTUR_REACT_UI__: string;
+    state: CustomComboBoxState<T>;
+    input: Nullable<Input>;
+    menu: Nullable<Menu>;
+    inputLikeText: Nullable<InputLikeText>;
+    requestId: number;
+    loaderShowDelay: Nullable<Promise<void>>;
+    private focused;
+    private cancelationToken;
+    private isMobileLayout;
+    private reducer;
+    cancelLoaderDelay: () => void;
+    /**
+     * @public
+     */
+    focus: () => void;
+    /**
+     * @public
+     */
+    selectInputText: () => void;
+    /**
+     * @public
+     */
+    blur: () => void;
+    /**
+     * @public
+     */
+    search(query?: string): Promise<void>;
+    /**
+     * @public
+     */
+    cancelSearch(): void;
+    /**
+     * @public
+     */
+    open(): void;
+    /**
+     * @public
+     */
+    close(): void;
+    render(): JSX.Element;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CustomComboBoxProps<T>, prevState: CustomComboBoxState<T>): void;
+    /**
+     * @public
+     */
+    reset(): void;
+    private dispatch;
+    private handleEffect;
+    private getProps;
+    private getState;
+    private handleValueChange;
+    private handleFocus;
+    private handleClickOutside;
+    private handleBlur;
+    private handleInputBlur;
+    private handleInputClick;
+}