@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js

@@ -1,6 +1,12 @@
+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 { findDOMNode } from 'react-dom';
+import { isNonNullable } from "../../../lib/utils";
 import { DropdownContainer } from "../../DropdownContainer";
 import { Input } from "../../../components/Input";
 import { InputLikeText } from "../../InputLikeText";
@@ -8,10 +14,13 @@ import { RenderLayer } from "../../RenderLayer";
 import { Spinner } from "../../../components/Spinner";
 import { ArrowChevronDownIcon } from "../../icons/16px";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { MobilePopup } from "../../MobilePopup";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { responsiveLayout } from "../../../components/ResponsiveLayout";
 import { ComboBoxMenu } from "../ComboBoxMenu";
 import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
-import { jsStyles } from "../CustomComboBox.styles";
-export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
+import { styles } from "../CustomComboBox.styles";
+export var ComboBoxView = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ComboBoxView, _React$Component);
 
   function ComboBoxView() {
@@ -23,15 +32,119 @@ export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
 
     _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.createElement(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.createElement(DropdownContainer, {
+        align: menuAlign,
+        getParent: function getParent() {
+          return findDOMNode(_assertThisInitialized(_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.createElement(MobilePopup, {
+        headerChildComponent: /*#__PURE__*/React.createElement(Input, _extends({
+          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) {
@@ -44,7 +157,7 @@ export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
 
     _this.renderSpinner = function () {
       return /*#__PURE__*/React.createElement("span", {
-        className: jsStyles.spinnerWrapper()
+        className: styles.spinnerWrapper()
       }, /*#__PURE__*/React.createElement(Spinner, {
         type: "mini",
         caption: "",
@@ -53,24 +166,29 @@ export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.getRightIcon = function () {
-      var _this$props = _this.props,
-          loading = _this$props.loading,
-          items = _this$props.items,
-          drawArrow = _this$props.drawArrow;
+      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 (drawArrow) {
+      if (rightIcon || drawArrow) {
         return /*#__PURE__*/React.createElement("span", {
-          className: jsStyles.arrowWrapper()
-        }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null));
+          className: styles.rightIconWrapper()
+        }, rightIcon != null ? rightIcon : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null));
       }
 
       return null;
     };
 
+    _this.refMobileInput = function (input) {
+      _this.mobileInput = input;
+    };
+
     return _this;
   }
 
@@ -94,100 +212,57 @@ export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    var _this$props2 = this.props,
-        items = _this$props2.items,
-        loading = _this$props2.loading,
-        menuAlign = _this$props2.menuAlign,
-        onClickOutside = _this$props2.onClickOutside,
-        onFocusOutside = _this$props2.onFocusOutside,
-        onMouseEnter = _this$props2.onMouseEnter,
-        onMouseLeave = _this$props2.onMouseLeave,
-        onMouseOver = _this$props2.onMouseOver,
-        opened = _this$props2.opened,
-        refMenu = _this$props2.refMenu,
-        maxMenuHeight = _this$props2.maxMenuHeight,
-        renderTotalCount = _this$props2.renderTotalCount,
-        renderItem = _this$props2.renderItem,
-        renderNotFound = _this$props2.renderNotFound,
-        repeatRequest = _this$props2.repeatRequest,
-        requestStatus = _this$props2.requestStatus,
-        totalCount = _this$props2.totalCount,
-        size = _this$props2.size,
-        width = _this$props2.width;
+    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();
-    var topOffsets = {
-      spinner: 6,
-      arrow: 15
-    };
-
-    if (size === 'medium') {
-      topOffsets.spinner += 4;
-      topOffsets.arrow += 4;
-    }
-
-    if (size === 'large') {
-      topOffsets.spinner += 6;
-      topOffsets.arrow += 6;
-    }
-
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
-      onClickOutside: onClickOutside,
-      onFocusOutside: onFocusOutside,
-      active: opened
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        width: width
-      },
-      className: jsStyles.root(),
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onMouseOver: onMouseOver
-    }, input, opened && /*#__PURE__*/React.createElement(DropdownContainer, {
-      align: menuAlign,
-      getParent: function getParent() {
-        return findDOMNode(_this2);
-      },
-      offsetY: 1,
-      disablePortal: this.props.disablePortal
-    }, /*#__PURE__*/React.createElement(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
-    })))));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this2.props, /*#__PURE__*/React.createElement(RenderLayer, {
+        onClickOutside: onClickOutside,
+        onFocusOutside: onFocusOutside,
+        active: opened
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          width: width
+        },
+        className: styles.root(),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onMouseOver: onMouseOver
+      }, input, isMobile ? _this2.renderMobileMenu() : _this2.renderMenu())));
+    });
   };
 
   _proto.renderInput = function renderInput() {
-    var _this$props3 = this.props,
-        align = _this$props3.align,
-        borderless = _this$props3.borderless,
-        disabled = _this$props3.disabled,
-        editing = _this$props3.editing,
-        error = _this$props3.error,
-        onFocus = _this$props3.onFocus,
-        onInputBlur = _this$props3.onInputBlur,
-        onInputValueChange = _this$props3.onInputValueChange,
-        onInputFocus = _this$props3.onInputFocus,
-        onInputClick = _this$props3.onInputClick,
-        onInputKeyDown = _this$props3.onInputKeyDown,
-        placeholder = _this$props3.placeholder,
-        renderValue = _this$props3.renderValue,
-        size = _this$props3.size,
-        textValue = _this$props3.textValue,
-        value = _this$props3.value,
-        warning = _this$props3.warning,
-        refInputLikeText = _this$props3.refInputLikeText,
-        leftIcon = _this$props3.leftIcon,
-        inputMode = _this$props3.inputMode;
+    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) {
@@ -197,10 +272,10 @@ export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
         disabled: disabled,
         error: error,
         maxLength: this.props.maxLength,
-        onBlur: onInputBlur,
+        onBlur: isMobile ? undefined : onInputBlur,
         onValueChange: onInputValueChange,
-        onFocus: onInputFocus,
-        onClick: onInputClick,
+        onFocus: isMobile ? this.handleFocusMobile : onInputFocus,
+        onClick: isMobile ? this.handleFocusMobile : onInputClick,
         leftIcon: leftIcon,
         rightIcon: rightIcon,
         value: textValue || '',
@@ -227,13 +302,11 @@ export var ComboBoxView = /*#__PURE__*/function (_React$Component) {
       size: size,
       width: "100%",
       ref: refInputLikeText
-    }, value ? renderValue(value) : null);
+    }, isNonNullable(value) && renderValue ? renderValue(value) : null);
   };
 
   return ComboBoxView;
-}(React.Component);
-ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView';
-ComboBoxView.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBoxView', _class2.defaultProps = {
   renderItem: function renderItem(item) {
     return item;
   },
@@ -255,4 +328,4 @@ ComboBoxView.defaultProps = {
   },
   size: 'small',
   width: 250
-};
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["ComboBoxView.tsx"],"names":["React","findDOMNode","DropdownContainer","Input","InputLikeText","RenderLayer","Spinner","ArrowChevronDownIcon","CommonWrapper","ComboBoxMenu","ComboBoxRequestStatus","jsStyles","ComboBoxView","input","renderAddButton","props","textValue","handleItemSelect","item","onValueChange","refInput","renderSpinner","spinnerWrapper","getRightIcon","loading","items","drawArrow","length","arrowWrapper","componentDidMount","autoFocus","onFocus","componentDidUpdate","prevProps","editing","focus","render","menuAlign","onClickOutside","onFocusOutside","onMouseEnter","onMouseLeave","onMouseOver","opened","refMenu","maxMenuHeight","renderTotalCount","renderItem","renderNotFound","repeatRequest","requestStatus","totalCount","size","width","renderInput","topOffsets","spinner","arrow","root","disablePortal","align","borderless","disabled","error","onInputBlur","onInputValueChange","onInputFocus","onInputClick","onInputKeyDown","placeholder","renderValue","value","warning","refInputLikeText","leftIcon","inputMode","rightIcon","maxLength","Component","__KONTUR_REACT_UI__","defaultProps","undefined","Unknown"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { findDOMNode } from 'react-dom';\r\n\r\nimport { DropdownContainer } from '../DropdownContainer';\r\nimport { Input, InputIconType } from '../../components/Input';\r\nimport { InputLikeText } from '../InputLikeText';\r\nimport { Menu } from '../Menu';\r\nimport { MenuItemState } from '../../components/MenuItem';\r\nimport { RenderLayer } from '../RenderLayer';\r\nimport { Spinner } from '../../components/Spinner';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ArrowChevronDownIcon } from '../icons/16px';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { ComboBoxMenu } from './ComboBoxMenu';\r\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\r\nimport { jsStyles } from './CustomComboBox.styles';\r\n\r\ninterface ComboBoxViewProps<T> extends CommonProps {\r\n  align?: 'left' | 'center' | 'right';\r\n  autoFocus?: boolean;\r\n  borderless?: boolean;\r\n  disablePortal?: boolean;\r\n  disabled?: boolean;\r\n  editing?: boolean;\r\n  error?: boolean;\r\n  items?: Nullable<T[]>;\r\n  loading?: boolean;\r\n  menuAlign?: 'left' | 'right';\r\n  opened?: boolean;\r\n  drawArrow?: boolean;\r\n  placeholder?: string;\r\n  size?: 'small' | 'medium' | 'large';\r\n  textValue?: string;\r\n  totalCount?: number;\r\n  value?: Nullable<T>;\r\n  warning?: boolean;\r\n  width?: string | number;\r\n  maxLength?: number;\r\n  maxMenuHeight?: number | string;\r\n  leftIcon?: InputIconType;\r\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\r\n\r\n  onValueChange?: (value: T) => void;\r\n  onClickOutside?: (e: Event) => void;\r\n  onFocus?: () => void;\r\n  onFocusOutside?: () => void;\r\n  onInputBlur?: () => void;\r\n  onInputValueChange?: (value: string) => void;\r\n  onInputFocus?: () => void;\r\n  onInputClick?: () => void;\r\n  onInputKeyDown?: (e: React.KeyboardEvent) => void;\r\n  onMouseEnter?: (e: React.MouseEvent) => void;\r\n  onMouseOver?: (e: React.MouseEvent) => void;\r\n  onMouseLeave?: (e: React.MouseEvent) => void;\r\n  renderItem?: (item: T, state: MenuItemState) => React.ReactNode;\r\n  renderNotFound?: () => React.ReactNode;\r\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\r\n  renderValue?: (item: T) => React.ReactNode;\r\n  renderAddButton: (query?: string) => React.ReactNode;\r\n  repeatRequest?: () => void;\r\n  requestStatus?: ComboBoxRequestStatus;\r\n  refInput?: (input: Nullable<Input>) => void;\r\n  refMenu?: (menu: Nullable<Menu>) => void;\r\n  refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;\r\n}\r\n\r\nexport class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {\r\n  public static __KONTUR_REACT_UI__ = 'ComboBoxView';\r\n\r\n  public static defaultProps = {\r\n    renderItem: (item: any) => item,\r\n    renderValue: (item: any) => item,\r\n    renderAddButton: () => null,\r\n    repeatRequest: () => undefined,\r\n    requestStatus: ComboBoxRequestStatus.Unknown,\r\n    onClickOutside: () => {\r\n      /**/\r\n    },\r\n    onFocusOutside: () => {\r\n      /**/\r\n    },\r\n    size: 'small',\r\n    width: 250,\r\n  };\r\n\r\n  private input: Nullable<Input>;\r\n\r\n  public componentDidMount() {\r\n    if (this.props.autoFocus && this.props.onFocus) {\r\n      this.props.onFocus();\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(prevProps: ComboBoxViewProps<T>) {\r\n    const { input, props } = this;\r\n    if (props.editing && !prevProps.editing && input) {\r\n      input.focus();\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    const {\r\n      items,\r\n      loading,\r\n      menuAlign,\r\n      onClickOutside,\r\n      onFocusOutside,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      onMouseOver,\r\n      opened,\r\n      refMenu,\r\n      maxMenuHeight,\r\n      renderTotalCount,\r\n      renderItem,\r\n      renderNotFound,\r\n      repeatRequest,\r\n      requestStatus,\r\n      totalCount,\r\n      size,\r\n      width,\r\n    } = this.props;\r\n\r\n    const input = this.renderInput();\r\n\r\n    const topOffsets = {\r\n      spinner: 6,\r\n      arrow: 15,\r\n    };\r\n    if (size === 'medium') {\r\n      topOffsets.spinner += 4;\r\n      topOffsets.arrow += 4;\r\n    }\r\n    if (size === 'large') {\r\n      topOffsets.spinner += 6;\r\n      topOffsets.arrow += 6;\r\n    }\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>\r\n          <span\r\n            style={{ width }}\r\n            className={jsStyles.root()}\r\n            onMouseEnter={onMouseEnter}\r\n            onMouseLeave={onMouseLeave}\r\n            onMouseOver={onMouseOver}\r\n          >\r\n            {input}\r\n            {opened && (\r\n              <DropdownContainer\r\n                align={menuAlign}\r\n                getParent={() => findDOMNode(this)}\r\n                offsetY={1}\r\n                disablePortal={this.props.disablePortal}\r\n              >\r\n                <ComboBoxMenu\r\n                  items={items}\r\n                  loading={loading}\r\n                  maxMenuHeight={maxMenuHeight}\r\n                  onValueChange={this.handleItemSelect}\r\n                  opened={opened}\r\n                  refMenu={refMenu}\r\n                  renderTotalCount={renderTotalCount}\r\n                  renderItem={renderItem!}\r\n                  renderNotFound={renderNotFound}\r\n                  renderAddButton={this.renderAddButton}\r\n                  repeatRequest={repeatRequest}\r\n                  requestStatus={requestStatus}\r\n                  totalCount={totalCount}\r\n                />\r\n              </DropdownContainer>\r\n            )}\r\n          </span>\r\n        </RenderLayer>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private renderAddButton = (): React.ReactNode => {\r\n    return this.props.renderAddButton(this.props.textValue);\r\n  };\r\n\r\n  private renderInput(): React.ReactNode {\r\n    const {\r\n      align,\r\n      borderless,\r\n      disabled,\r\n      editing,\r\n      error,\r\n      onFocus,\r\n      onInputBlur,\r\n      onInputValueChange,\r\n      onInputFocus,\r\n      onInputClick,\r\n      onInputKeyDown,\r\n      placeholder,\r\n      renderValue,\r\n      size,\r\n      textValue,\r\n      value,\r\n      warning,\r\n      refInputLikeText,\r\n      leftIcon,\r\n      inputMode,\r\n    } = this.props;\r\n\r\n    const rightIcon = this.getRightIcon();\r\n\r\n    if (editing) {\r\n      return (\r\n        <Input\r\n          align={align}\r\n          borderless={borderless}\r\n          disabled={disabled}\r\n          error={error}\r\n          maxLength={this.props.maxLength}\r\n          onBlur={onInputBlur}\r\n          onValueChange={onInputValueChange}\r\n          onFocus={onInputFocus}\r\n          onClick={onInputClick}\r\n          leftIcon={leftIcon}\r\n          rightIcon={rightIcon}\r\n          value={textValue || ''}\r\n          onKeyDown={onInputKeyDown}\r\n          placeholder={placeholder}\r\n          width=\"100%\"\r\n          size={size}\r\n          ref={this.refInput}\r\n          warning={warning}\r\n          inputMode={inputMode}\r\n        />\r\n      );\r\n    }\r\n\r\n    return (\r\n      <InputLikeText\r\n        align={align}\r\n        borderless={borderless}\r\n        error={error}\r\n        onFocus={onFocus}\r\n        leftIcon={leftIcon}\r\n        rightIcon={rightIcon}\r\n        disabled={disabled}\r\n        warning={warning}\r\n        placeholder={placeholder}\r\n        size={size}\r\n        width=\"100%\"\r\n        ref={refInputLikeText}\r\n      >\r\n        {value ? renderValue!(value) : null}\r\n      </InputLikeText>\r\n    );\r\n  }\r\n\r\n  private handleItemSelect = (item: T) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(item);\r\n    }\r\n  };\r\n\r\n  private refInput = (input: Nullable<Input>) => {\r\n    if (this.props.refInput) {\r\n      this.props.refInput(input);\r\n    }\r\n    this.input = input;\r\n  };\r\n\r\n  private renderSpinner = () => (\r\n    <span className={jsStyles.spinnerWrapper()}>\r\n      <Spinner type=\"mini\" caption=\"\" dimmed />\r\n    </span>\r\n  );\r\n\r\n  private getRightIcon = () => {\r\n    const { loading, items, drawArrow } = this.props;\r\n\r\n    if (loading && items && !!items.length) {\r\n      return this.renderSpinner();\r\n    }\r\n\r\n    if (drawArrow) {\r\n      return (\r\n        <span className={jsStyles.arrowWrapper()}>\r\n          <ArrowChevronDownIcon />\r\n        </span>\r\n      );\r\n    }\r\n\r\n    return null;\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["ComboBoxView.tsx"],"names":["React","findDOMNode","isNonNullable","DropdownContainer","Input","InputLikeText","RenderLayer","Spinner","ArrowChevronDownIcon","CommonWrapper","MobilePopup","ThemeContext","responsiveLayout","ComboBoxMenu","ComboBoxRequestStatus","styles","ComboBoxView","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","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","Component","__KONTUR_REACT_UI__","defaultProps","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/internal/CustomComboBox/ComboBoxView.d.ts

@@ -13,6 +13,9 @@ interface ComboBoxViewProps<T> extends CommonProps {
     disablePortal?: boolean;
     disabled?: boolean;
     editing?: boolean;
+    /**
+     * Cостояние валидации при ошибке.
+     */
     error?: boolean;
     items?: Nullable<T[]>;
     loading?: boolean;
@@ -24,11 +27,15 @@ interface ComboBoxViewProps<T> extends CommonProps {
     textValue?: string;
     totalCount?: number;
     value?: Nullable<T>;
+    /**
+     * Cостояние валидации при предупреждении.
+     */
     warning?: boolean;
     width?: string | number;
     maxLength?: number;
     maxMenuHeight?: number | string;
     leftIcon?: InputIconType;
+    rightIcon?: InputIconType;
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
     onValueChange?: (value: T) => void;
     onClickOutside?: (e: Event) => void;
@@ -53,7 +60,10 @@ interface ComboBoxViewProps<T> extends CommonProps {
     refMenu?: (menu: Nullable<Menu>) => void;
     refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;
 }
-export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {
+interface ComboBoxViewState {
+    isMobileOpened: boolean;
+}
+export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, ComboBoxViewState> {
     static __KONTUR_REACT_UI__: string;
     static defaultProps: {
         renderItem: (item: any) => any;
@@ -67,14 +77,24 @@ export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T
         width: number;
     };
     private input;
+    private mobileInput;
+    private theme;
+    private isMobileLayout;
     componentDidMount(): void;
+    state: ComboBoxViewState;
     componentDidUpdate(prevProps: ComboBoxViewProps<T>): void;
     render(): JSX.Element;
+    private getComboBoxMenu;
+    private renderMenu;
+    private renderMobileMenu;
+    private handleCloseMobile;
     private renderAddButton;
     private renderInput;
+    private handleFocusMobile;
     private handleItemSelect;
     private refInput;
     private renderSpinner;
     private getRightIcon;
+    private refMobileInput;
 }
 export {};

package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js

@@ -1,11 +1,15 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { CancelationError, taskWithDelay } from "../../../lib/utils";
 import { fixClickFocusIE } from "../../../lib/events/fixClickFocusIE";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { responsiveLayout } from "../../../components/ResponsiveLayout";
 import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
 import { reducer } from "../CustomComboBoxReducer";
 import { ComboBoxView } from "../ComboBoxView";
@@ -24,7 +28,7 @@ export var DefaultState = {
   },
   requestStatus: ComboBoxRequestStatus.Unknown
 };
-export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
+export var CustomComboBox = responsiveLayout(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(CustomComboBox, _React$PureComponent);
 
   function CustomComboBox() {
@@ -43,6 +47,7 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
     _this.loaderShowDelay = void 0;
     _this.focused = false;
     _this.cancelationToken = null;
+    _this.isMobileLayout = void 0;
     _this.reducer = reducer;
 
     _this.cancelLoaderDelay = function () {
@@ -114,7 +119,7 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
       _this.dispatch({
         type: 'ValueChange',
         value: value,
-        keepFocus: true
+        keepFocus: _this.isMobileLayout ? false : true
       });
     };
 
@@ -145,10 +150,14 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      _this.focused = false;
+      _this.focused = false; // workaround for the similar bug with focusout
+      // in Firefox, Chrome and IE
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=1363964
 
-      _this.dispatch({
-        type: 'Blur'
+      setTimeout(function () {
+        _this.dispatch({
+          type: 'Blur'
+        });
       });
     };
 
@@ -156,6 +165,7 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
       // If menu opened, RenderLayer is active and
       // it would call handleFocusOutside
       // In that way handleBlur would be called
+      // TODO: add check for mobile layout, to call `handleBlur`
       if (_this.state.opened) {
         return;
       }
@@ -175,8 +185,8 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
   }
 
   var _proto = CustomComboBox.prototype;
-  /**
-  * @public
+  /**
+  * @public
   */
 
   _proto.search = /*#__PURE__*/function () {
@@ -293,8 +303,8 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
 
     return search;
   }()
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -303,8 +313,8 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
       this.cancelationToken(new CancelationError());
     }
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -313,8 +323,8 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
       type: 'Open'
     });
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -349,6 +359,7 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
       maxLength: this.props.maxLength,
       maxMenuHeight: this.props.maxMenuHeight,
       leftIcon: this.props.leftIcon,
+      rightIcon: this.props.rightIcon,
       inputMode: this.props.inputMode,
       onValueChange: this.handleValueChange,
       onClickOutside: this.handleClickOutside,
@@ -415,8 +426,8 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
       prevState: prevState
     });
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -427,5 +438,4 @@ export var CustomComboBox = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   return CustomComboBox;
-}(React.PureComponent);
-CustomComboBox.__KONTUR_REACT_UI__ = 'CustomComboBox';
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'CustomComboBox', _temp)) || _class;