@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js

@@ -5,20 +5,30 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import { isNonNullable } from "../../../lib/utils";
+import { getRandomID, 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 { CommonWrapper } from "../../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 ComboBoxViewIds = {
+  menu: 'ComboBoxView__menu'
+};
 export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ComboBoxView, _React$Component);
 
@@ -30,11 +40,10 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
     }
 
     _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.menuId = ComboBoxViewIds.menu + getRandomID();
 
     _this.getComboBoxMenu = function () {
       var _this$props = _this.props,
@@ -44,12 +53,18 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
           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;
+          totalCount = _this$props.totalCount,
+          size = _this$props.size;
+
+      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, {
+        menuId: _this.menuId,
         items: items,
         loading: loading,
         maxMenuHeight: maxMenuHeight,
@@ -59,22 +74,25 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         renderTotalCount: renderTotalCount,
         renderItem: renderItem,
         renderNotFound: renderNotFound,
+        itemWrapper: itemWrapper,
         renderAddButton: _this.renderAddButton,
         repeatRequest: repeatRequest,
         requestStatus: requestStatus,
         totalCount: totalCount,
-        isMobile: _this.isMobileLayout
+        isMobile: _this.isMobileLayout,
+        size: size
       });
     };
 
     _this.renderMenu = function () {
       var _this$props2 = _this.props,
           menuAlign = _this$props2.menuAlign,
-          opened = _this$props2.opened;
+          opened = _this$props2.opened,
+          menuPos = _this$props2.menuPos;
       return opened && /*#__PURE__*/React.createElement(DropdownContainer, {
+        menuPos: menuPos,
         align: menuAlign,
         getParent: _this.getParent,
-        offsetY: 1,
         disablePortal: _this.props.disablePortal,
         ref: _this.dropdownContainerRef
       }, _this.getComboBoxMenu());
@@ -84,7 +102,12 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
       var rightIcon = null;
       var _this$props3 = _this.props,
           loading = _this$props3.loading,
-          items = _this$props3.items;
+          items = _this$props3.items,
+          opened = _this$props3.opened,
+          onFocus = _this$props3.onFocus,
+          onInputValueChange = _this$props3.onInputValueChange,
+          placeholder = _this$props3.placeholder,
+          textValue = _this$props3.textValue;
 
       if (loading && items && !!items.length) {
         rightIcon = _this.renderSpinner();
@@ -93,48 +116,34 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
       var inputProps = {
         autoFocus: true,
         width: '100%',
-        onFocus: _this.props.onFocus,
-        onValueChange: _this.props.onInputValueChange,
-        value: _this.props.textValue,
-        placeholder: _this.props.placeholder,
+        onFocus: onFocus,
+        onValueChange: onInputValueChange,
+        value: textValue,
+        placeholder: placeholder,
         rightIcon: rightIcon
       };
-      return /*#__PURE__*/React.createElement(MobilePopup, {
+      return opened && /*#__PURE__*/React.createElement(MobilePopup, {
         headerChildComponent: /*#__PURE__*/React.createElement(Input, _extends({
           ref: _this.refMobileInput
         }, inputProps)),
-        useFullHeight: true,
-        onCloseRequest: _this.handleCloseMobile,
-        opened: _this.state.isMobileOpened
+        onCloseRequest: _this.props.onMobileClose,
+        opened: true
       }, _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.props.renderAddButton(_this.props.textValue);
+      return _this.getProps().renderAddButton(_this.props.textValue);
     };
 
-    _this.handleFocusMobile = function () {
-      _this.setState({
-        isMobileOpened: true
-      });
+    _this.handleMobileFocus = function () {
+      var _this$mobileInput;
 
-      if (_this.mobileInput) {
-        _this.mobileInput.focus();
-      }
+      _this.props.onInputClick == null ? void 0 : _this.props.onInputClick();
+      (_this$mobileInput = _this.mobileInput) == null ? void 0 : _this$mobileInput.focus();
     };
 
     _this.handleItemSelect = function (item) {
@@ -143,7 +152,7 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
       }
 
       if (_this.isMobileLayout) {
-        _this.handleCloseMobile();
+        _this.props.onMobileClose == null ? void 0 : _this.props.onMobileClose();
       }
     };
 
@@ -170,13 +179,26 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
           loading = _this$props4.loading,
           items = _this$props4.items,
           drawArrow = _this$props4.drawArrow,
-          rightIcon = _this$props4.rightIcon;
+          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));
@@ -214,14 +236,28 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
   };
 
   _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,
-        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;
+        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, {
@@ -229,6 +265,7 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
       onFocusOutside: onFocusOutside,
       active: opened
     }, /*#__PURE__*/React.createElement("span", {
+      "data-tid": CustomComboBoxDataTids.comboBoxView,
       style: {
         width: width
       },
@@ -255,14 +292,19 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         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;
+        inputMode = _this$props6.inputMode,
+        size = _this$props6.size,
+        ariaDescribedby = _this$props6['aria-describedby'],
+        ariaLabel = _this$props6['aria-label'];
+
+    var _this$getProps3 = this.getProps(),
+        renderValue = _this$getProps3.renderValue;
+
     var rightIcon = this.getRightIcon();
 
     if (editing) {
@@ -274,8 +316,8 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         maxLength: this.props.maxLength,
         onBlur: isMobile ? undefined : onInputBlur,
         onValueChange: onInputValueChange,
-        onFocus: isMobile ? this.handleFocusMobile : onInputFocus,
-        onClick: isMobile ? this.handleFocusMobile : onInputClick,
+        onFocus: onInputFocus,
+        onClick: isMobile ? this.handleMobileFocus : onInputClick,
         leftIcon: leftIcon,
         rightIcon: rightIcon,
         value: textValue || '',
@@ -285,7 +327,10 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         size: size,
         ref: this.refInput,
         warning: warning,
-        inputMode: inputMode
+        inputMode: inputMode,
+        "aria-describedby": ariaDescribedby,
+        "aria-controls": this.menuId,
+        "aria-label": ariaLabel
       });
     }
 
@@ -301,7 +346,9 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
       placeholder: placeholder,
       size: size,
       width: "100%",
-      ref: refInputLikeText
+      ref: refInputLikeText,
+      "aria-describedby": ariaDescribedby,
+      "aria-controls": this.menuId
     }, isNonNullable(value) && renderValue ? renderValue(value) : null);
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ComboBoxView.tsx"],"names":["React","isNonNullable","DropdownContainer","Input","InputLikeText","RenderLayer","Spinner","ArrowChevronDownIcon","CommonWrapper","MobilePopup","responsiveLayout","rootNode","getRootNode","ComboBoxMenu","ComboBoxRequestStatus","styles","ComboBoxView","mobileInput","dropdownContainerRef","createRef","state","isMobileOpened","getComboBoxMenu","props","items","loading","opened","refMenu","maxMenuHeight","renderTotalCount","renderItem","renderNotFound","repeatRequest","requestStatus","totalCount","handleItemSelect","renderAddButton","isMobileLayout","renderMenu","menuAlign","getParent","disablePortal","renderMobileMenu","rightIcon","length","renderSpinner","inputProps","autoFocus","width","onFocus","onValueChange","onInputValueChange","value","textValue","placeholder","refMobileInput","handleCloseMobile","setState","onInputBlur","handleFocusMobile","focus","item","refInput","input","spinnerWrapper","getRightIcon","drawArrow","rightIconWrapper","componentDidMount","current","position","componentDidUpdate","prevProps","editing","render","onClickOutside","onFocusOutside","onMouseEnter","onMouseLeave","onMouseOver","isMobile","renderInput","root","setRootNode","align","borderless","disabled","error","onInputFocus","onInputClick","onInputKeyDown","renderValue","size","warning","refInputLikeText","leftIcon","inputMode","maxLength","undefined","Component","__KONTUR_REACT_UI__","defaultProps","Unknown"],"mappings":"iPAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,iBAAT,QAAkC,sBAAlC;AACA,SAASC,KAAT,QAAiD,wBAAjD;AACA,SAASC,aAAT,QAA8B,kBAA9B;;;AAGA,SAASC,WAAT,QAA4B,gBAA5B;AACA,SAASC,OAAT,QAAwB,0BAAxB;;AAEA,SAASC,oBAAT,QAAqC,eAArC;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,WAAT,QAA4B,gBAA5B;AACA,SAASC,gBAAT,QAAiC,6CAAjC;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAoD,oBAApD;;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,qBAAT,QAAsC,uBAAtC;AACA,SAASC,MAAT,QAAuB,yBAAvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,WAAaC,YAAb,GAFCN,gBAED,UADCC,QACD;;;;;;;;;;;;;;;;;;;;;AAqBUM,IAAAA,WArBV,GAqByC,IArBzC;;AAuBUC,IAAAA,oBAvBV,gBAuBiClB,KAAK,CAACmB,SAAN,EAvBjC;;;;;;;;;AAgCSC,IAAAA,KAhCT,GAgCoC;AAChCC,MAAAA,cAAc,EAAE,KADgB,EAhCpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEUC,IAAAA,eAtEV,GAsE4B,YAAM;AAC9B;;;;;;;;;;;;AAYI,YAAKC,KAZT,CACEC,KADF,eACEA,KADF,CAEEC,OAFF,eAEEA,OAFF,CAGEC,MAHF,eAGEA,MAHF,CAIEC,OAJF,eAIEA,OAJF,CAKEC,aALF,eAKEA,aALF,CAMEC,gBANF,eAMEA,gBANF,CAOEC,UAPF,eAOEA,UAPF,CAQEC,cARF,eAQEA,cARF,CASEC,aATF,eASEA,aATF,CAUEC,aAVF,eAUEA,aAVF,CAWEC,UAXF,eAWEA,UAXF;;AAcA;AACE,4BAAC,YAAD;AACE,UAAA,KAAK,EAAEV,KADT;AAEE,UAAA,OAAO,EAAEC,OAFX;AAGE,UAAA,aAAa,EAAEG,aAHjB;AAIE,UAAA,aAAa,EAAE,MAAKO,gBAJtB;AAKE,UAAA,MAAM,EAAET,MALV;AAME,UAAA,OAAO,EAAEC,OANX;AAOE,UAAA,gBAAgB,EAAEE,gBAPpB;AAQE,UAAA,UAAU,EAAEC,UARd;AASE,UAAA,cAAc,EAAEC,cATlB;AAUE,UAAA,eAAe,EAAE,MAAKK,eAVxB;AAWE,UAAA,aAAa,EAAEJ,aAXjB;AAYE,UAAA,aAAa,EAAEC,aAZjB;AAaE,UAAA,UAAU,EAAEC,UAbd;AAcE,UAAA,QAAQ,EAAE,MAAKG,cAdjB,GADF;;;AAkBD,KAvGH;;AAyGUC,IAAAA,UAzGV,GAyGuB,YAAM;AACzB,yBAA8B,MAAKf,KAAnC,CAAQgB,SAAR,gBAAQA,SAAR,CAAmBb,MAAnB,gBAAmBA,MAAnB;;AAEA;AACEA,QAAAA,MAAM;AACJ,4BAAC,iBAAD;AACE,UAAA,KAAK,EAAEa,SADT;AAEE,UAAA,SAAS,EAAE,MAAKC,SAFlB;AAGE,UAAA,OAAO,EAAE,CAHX;AAIE,UAAA,aAAa,EAAE,MAAKjB,KAAL,CAAWkB,aAJ5B;AAKE,UAAA,GAAG,EAAE,MAAKvB,oBALZ;;AAOG,cAAKI,eAAL,EAPH,CAFJ;;;;AAaD,KAzHH;;AA2HUoB,IAAAA,gBA3HV,GA2H6B,YAAM;AAC/B,UAAIC,SAAS,GAAG,IAAhB;;AAEA,yBAA2B,MAAKpB,KAAhC,CAAQE,OAAR,gBAAQA,OAAR,CAAiBD,KAAjB,gBAAiBA,KAAjB;AACA,UAAIC,OAAO,IAAID,KAAX,IAAoB,CAAC,CAACA,KAAK,CAACoB,MAAhC,EAAwC;AACtCD,QAAAA,SAAS,GAAG,MAAKE,aAAL,EAAZ;AACD;;AAED,UAAMC,UAAsB,GAAG;AAC7BC,QAAAA,SAAS,EAAE,IADkB;AAE7BC,QAAAA,KAAK,EAAE,MAFsB;AAG7BC,QAAAA,OAAO,EAAE,MAAK1B,KAAL,CAAW0B,OAHS;AAI7BC,QAAAA,aAAa,EAAE,MAAK3B,KAAL,CAAW4B,kBAJG;AAK7BC,QAAAA,KAAK,EAAE,MAAK7B,KAAL,CAAW8B,SALW;AAM7BC,QAAAA,WAAW,EAAE,MAAK/B,KAAL,CAAW+B,WANK;AAO7BX,QAAAA,SAAS,EAATA,SAP6B,EAA/B;;;AAUA;AACE,4BAAC,WAAD;AACE,UAAA,oBAAoB,eAAE,oBAAC,KAAD,aAAO,GAAG,EAAE,MAAKY,cAAjB,IAAqCT,UAArC,EADxB;AAEE,UAAA,aAAa,MAFf;AAGE,UAAA,cAAc,EAAE,MAAKU,iBAHvB;AAIE,UAAA,MAAM,EAAE,MAAKpC,KAAL,CAAWC,cAJrB;;AAMG,cAAKC,eAAL,EANH,CADF;;;AAUD,KAvJH;;AAyJUkC,IAAAA,iBAzJV,GAyJ8B,YAAM;AAChC,YAAKC,QAAL,CAAc;AACZpC,QAAAA,cAAc,EAAE,KADJ,EAAd;;;AAIA,UAAI,MAAKE,KAAL,CAAWmC,WAAf,EAA4B;AAC1B,cAAKnC,KAAL,CAAWmC,WAAX;AACD;AACF,KAjKH;;AAmKUlB,IAAAA,SAnKV,GAmKsB,YAAM;AACxB,aAAO5B,WAAW,+BAAlB;AACD,KArKH;;AAuKUwB,IAAAA,eAvKV,GAuK4B,YAAuB;AAC/C,aAAO,MAAKb,KAAL,CAAWa,eAAX,CAA2B,MAAKb,KAAL,CAAW8B,SAAtC,CAAP;AACD,KAzKH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqPUM,IAAAA,iBArPV,GAqP8B,YAAM;AAChC,YAAKF,QAAL,CAAc;AACZpC,QAAAA,cAAc,EAAE,IADJ,EAAd;;;AAIA,UAAI,MAAKJ,WAAT,EAAsB;AACpB,cAAKA,WAAL,CAAiB2C,KAAjB;AACD;AACF,KA7PH;;AA+PUzB,IAAAA,gBA/PV,GA+P6B,UAAC0B,IAAD,EAAa;AACtC,UAAI,MAAKtC,KAAL,CAAW2B,aAAf,EAA8B;AAC5B,cAAK3B,KAAL,CAAW2B,aAAX,CAAyBW,IAAzB;AACD;;AAED,UAAI,MAAKxB,cAAT,EAAyB;AACvB,cAAKmB,iBAAL;AACD;AACF,KAvQH;;AAyQUM,IAAAA,QAzQV,GAyQqB,UAACC,KAAD,EAA4B;AAC7C,UAAI,MAAKxC,KAAL,CAAWuC,QAAf,EAAyB;AACvB,cAAKvC,KAAL,CAAWuC,QAAX,CAAoBC,KAApB;AACD;AACD,YAAKA,KAAL,GAAaA,KAAb;AACD,KA9QH;;AAgRUlB,IAAAA,aAhRV,GAgR0B;AACtB,sCAAM,SAAS,EAAE9B,MAAM,CAACiD,cAAP,EAAjB;AACE,4BAAC,OAAD,IAAS,IAAI,EAAC,MAAd,EAAqB,OAAO,EAAC,EAA7B,EAAgC,MAAM,MAAtC,GADF,CADsB,GAhR1B;;;;AAsRUC,IAAAA,YAtRV,GAsRyB,YAAM;AAC3B,yBAAiD,MAAK1C,KAAtD,CAAQE,OAAR,gBAAQA,OAAR,CAAiBD,KAAjB,gBAAiBA,KAAjB,CAAwB0C,SAAxB,gBAAwBA,SAAxB,CAAmCvB,SAAnC,gBAAmCA,SAAnC;;AAEA,UAAIlB,OAAO,IAAID,KAAX,IAAoB,CAAC,CAACA,KAAK,CAACoB,MAAhC,EAAwC;AACtC,eAAO,MAAKC,aAAL,EAAP;AACD;;AAED,UAAIF,SAAS,IAAIuB,SAAjB,EAA4B;AAC1B,4BAAO,8BAAM,SAAS,EAAEnD,MAAM,CAACoD,gBAAP,EAAjB,IAA6CxB,SAA7C,WAA6CA,SAA7C,gBAA0D,oBAAC,oBAAD,OAA1D,CAAP;AACD;;AAED,aAAO,IAAP;AACD,KAlSH;;AAoSUY,IAAAA,cApSV,GAoS2B,UAACQ,KAAD,EAA4B;AACnD,YAAK9C,WAAL,GAAmB8C,KAAnB;AACD,KAtSH,0DAyBSK,iBAzBT,GAyBE,6BAA2B,2BACzB,IAAI,KAAK7C,KAAL,CAAWwB,SAAX,IAAwB,KAAKxB,KAAL,CAAW0B,OAAvC,EAAgD,CAC9C,KAAK1B,KAAL,CAAW0B,OAAX,GACD,CACD,KAAK1B,KAAL,CAAWG,MAAX,8BAAqB,KAAKR,oBAAL,CAA0BmD,OAA/C,qBAAqB,sBAAmCC,QAAnC,EAArB,EACD,CA9BH,QAoCSC,kBApCT,GAoCE,4BAA0BC,SAA1B,EAA2D,CACzD,IAAQT,KAAR,GAAyB,IAAzB,CAAQA,KAAR,CAAexC,KAAf,GAAyB,IAAzB,CAAeA,KAAf,CAEA,IAAIA,KAAK,CAACkD,OAAN,IAAiB,CAACD,SAAS,CAACC,OAA5B,IAAuCV,KAA3C,EAAkD,CAChDA,KAAK,CAACH,KAAN,GACD,CACF,CA1CH,QA4CSc,MA5CT,GA4CE,kBAAgB,CACd,mBAAmG,KAAKnD,KAAxG,CAAQoD,cAAR,gBAAQA,cAAR,CAAwBC,cAAxB,gBAAwBA,cAAxB,CAAwCC,YAAxC,gBAAwCA,YAAxC,CAAsDC,YAAtD,gBAAsDA,YAAtD,CAAoEC,WAApE,gBAAoEA,WAApE,CAAiFrD,MAAjF,gBAAiFA,MAAjF,CAAyFsB,KAAzF,gBAAyFA,KAAzF,CAEA,IAAMgC,QAAQ,GAAG,KAAK3C,cAAtB,CAEA,IAAM0B,KAAK,GAAG,KAAKkB,WAAL,EAAd,CAEA,oBACE,oBAAC,aAAD,EAAmB,KAAK1D,KAAxB,eACE,oBAAC,WAAD,IAAa,cAAc,EAAEoD,cAA7B,EAA6C,cAAc,EAAEC,cAA7D,EAA6E,MAAM,EAAElD,MAArF,iBACE,8BACE,KAAK,EAAE,EAAEsB,KAAK,EAALA,KAAF,EADT,EAEE,SAAS,EAAEjC,MAAM,CAACmE,IAAP,EAFb,EAGE,YAAY,EAAEL,YAHhB,EAIE,YAAY,EAAEC,YAJhB,EAKE,WAAW,EAAEC,WALf,EAME,GAAG,EAAE,KAAKI,WANZ,IAQGpB,KARH,EASGiB,QAAQ,GAAG,KAAKtC,gBAAL,EAAH,GAA6B,KAAKJ,UAAL,EATxC,CADF,CADF,CADF,CAiBD,CApEH,QA2KU2C,WA3KV,GA2KE,uBAAuC,CACrC,IAAMD,QAAQ,GAAG,KAAK3C,cAAtB,CAEA,mBAqBI,KAAKd,KArBT,CACE6D,KADF,gBACEA,KADF,CAEEC,UAFF,gBAEEA,UAFF,CAGEC,QAHF,gBAGEA,QAHF,CAIEb,OAJF,gBAIEA,OAJF,CAKEc,KALF,gBAKEA,KALF,CAMEtC,OANF,gBAMEA,OANF,CAOES,WAPF,gBAOEA,WAPF,CAQEP,kBARF,gBAQEA,kBARF,CASEqC,YATF,gBASEA,YATF,CAUEC,YAVF,gBAUEA,YAVF,CAWEC,cAXF,gBAWEA,cAXF,CAYEpC,WAZF,gBAYEA,WAZF,CAaEqC,WAbF,gBAaEA,WAbF,CAcEC,IAdF,gBAcEA,IAdF,CAeEvC,SAfF,gBAeEA,SAfF,CAgBED,KAhBF,gBAgBEA,KAhBF,CAiBEyC,OAjBF,gBAiBEA,OAjBF,CAkBEC,gBAlBF,gBAkBEA,gBAlBF,CAmBEC,QAnBF,gBAmBEA,QAnBF,CAoBEC,SApBF,gBAoBEA,SApBF,CAuBA,IAAMrD,SAAS,GAAG,KAAKsB,YAAL,EAAlB,CAEA,IAAIQ,OAAJ,EAAa,CACX,oBACE,oBAAC,KAAD,IACE,KAAK,EAAEW,KADT,EAEE,UAAU,EAAEC,UAFd,EAGE,QAAQ,EAAEC,QAHZ,EAIE,KAAK,EAAEC,KAJT,EAKE,SAAS,EAAE,KAAKhE,KAAL,CAAW0E,SALxB,EAME,MAAM,EAAEjB,QAAQ,GAAGkB,SAAH,GAAexC,WANjC,EAOE,aAAa,EAAEP,kBAPjB,EAQE,OAAO,EAAE6B,QAAQ,GAAG,KAAKrB,iBAAR,GAA4B6B,YAR/C,EASE,OAAO,EAAER,QAAQ,GAAG,KAAKrB,iBAAR,GAA4B8B,YAT/C,EAUE,QAAQ,EAAEM,QAVZ,EAWE,SAAS,EAAEpD,SAXb,EAYE,KAAK,EAAEU,SAAS,IAAI,EAZtB,EAaE,SAAS,EAAEqC,cAbb,EAcE,WAAW,EAAEpC,WAdf,EAeE,KAAK,EAAC,MAfR,EAgBE,IAAI,EAAEsC,IAhBR,EAiBE,GAAG,EAAE,KAAK9B,QAjBZ,EAkBE,OAAO,EAAE+B,OAlBX,EAmBE,SAAS,EAAEG,SAnBb,GADF,CAuBD,CAED,oBACE,oBAAC,aAAD,IACE,KAAK,EAAEZ,KADT,EAEE,UAAU,EAAEC,UAFd,EAGE,KAAK,EAAEE,KAHT,EAIE,OAAO,EAAEtC,OAJX,EAKE,QAAQ,EAAE8C,QALZ,EAME,SAAS,EAAEpD,SANb,EAOE,QAAQ,EAAE2C,QAPZ,EAQE,OAAO,EAAEO,OARX,EASE,WAAW,EAAEvC,WATf,EAUE,IAAI,EAAEsC,IAVR,EAWE,KAAK,EAAC,MAXR,EAYE,GAAG,EAAEE,gBAZP,IAcG7F,aAAa,CAACmD,KAAD,CAAb,IAAwBuC,WAAxB,GAAsCA,WAAW,CAACvC,KAAD,CAAjD,GAA2D,IAd9D,CADF,CAkBD,CAnPH,uBAAqCpD,KAAK,CAACmG,SAA3C,WACgBC,mBADhB,GACsC,cADtC,UAGgBC,YAHhB,GAG+B,EAC3BvE,UAAU,EAAE,oBAAC+B,IAAD,UAAeA,IAAf,EADe,EAE3B8B,WAAW,EAAE,qBAAC9B,IAAD,UAAeA,IAAf,EAFc,EAG3BzB,eAAe,EAAE,mCAAM,IAAN,EAHU,EAI3BJ,aAAa,EAAE,iCAAMkE,SAAN,EAJY,EAK3BjE,aAAa,EAAEnB,qBAAqB,CAACwF,OALV,EAM3B3B,cAAc,EAAE,0BAAM,CACpB,IACD,CAR0B,EAS3BC,cAAc,EAAE,0BAAM,CACpB,IACD,CAX0B,EAY3BgB,IAAI,EAAE,OAZqB,EAa3B5C,KAAK,EAAE,GAboB,EAH/B","sourcesContent":["import React from 'react';\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 { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, getRootNode, TSetRootNode } from '../../lib/rootNode';\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\n@rootNode\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 setRootNode!: TSetRootNode;\n  private mobileInput: Nullable<Input> = null;\n  private isMobileLayout!: boolean;\n  private dropdownContainerRef = React.createRef<DropdownContainer>();\n\n  public componentDidMount() {\n    if (this.props.autoFocus && this.props.onFocus) {\n      this.props.onFocus();\n    }\n    this.props.opened && this.dropdownContainerRef.current?.position();\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      <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            ref={this.setRootNode}\n          >\n            {input}\n            {isMobile ? this.renderMobileMenu() : this.renderMenu()}\n          </span>\n        </RenderLayer>\n      </CommonWrapper>\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={this.getParent}\n          offsetY={1}\n          disablePortal={this.props.disablePortal}\n          ref={this.dropdownContainerRef}\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 getParent = () => {\n    return getRootNode(this);\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"]}
+{"version":3,"sources":["ComboBoxView.tsx"],"names":["React","getRandomID","isNonNullable","DropdownContainer","Input","InputLikeText","RenderLayer","Spinner","ArrowChevronDownIcon","CommonWrapper","MobilePopup","responsiveLayout","rootNode","getRootNode","createPropsGetter","isTheme2022","ThemeContext","LoadingIcon","ArrowDownIcon","ComboBoxMenu","ComboBoxRequestStatus","styles","CustomComboBoxDataTids","getComboBoxTheme","ComboBoxViewIds","menu","ComboBoxView","getProps","defaultProps","mobileInput","dropdownContainerRef","createRef","menuId","getComboBoxMenu","props","items","loading","opened","refMenu","maxMenuHeight","renderTotalCount","renderNotFound","totalCount","size","repeatRequest","requestStatus","renderItem","itemWrapper","handleItemSelect","renderAddButton","isMobileLayout","renderMenu","menuAlign","menuPos","getParent","disablePortal","renderMobileMenu","rightIcon","onFocus","onInputValueChange","placeholder","textValue","length","renderSpinner","inputProps","autoFocus","width","onValueChange","value","refMobileInput","onMobileClose","handleMobileFocus","onInputClick","focus","item","refInput","input","spinnerWrapper","getRightIcon","drawArrow","theme","rightIconWrapper","componentDidMount","current","position","componentDidUpdate","prevProps","editing","render","renderMain","onMouseEnter","onMouseLeave","onMouseOver","onClickOutside","onFocusOutside","isMobile","renderInput","comboBoxView","root","setRootNode","align","borderless","disabled","error","onInputBlur","onInputFocus","onInputKeyDown","warning","refInputLikeText","leftIcon","inputMode","ariaDescribedby","ariaLabel","renderValue","maxLength","undefined","Component","__KONTUR_REACT_UI__","Unknown"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { getRandomID, isNonNullable } from '../../lib/utils';\nimport { DropdownContainer, DropdownContainerProps } 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 '../CommonWrapper';\nimport { MobilePopup } from '../MobilePopup';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, getRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { LoadingIcon } from '../icons2022/LoadingIcon';\nimport { ComboBoxExtendedItem } from '../../components/ComboBox';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { ArrowDownIcon } from './ArrowDownIcon';\nimport { ComboBoxMenu } from './ComboBoxMenu';\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { styles } from './CustomComboBox.styles';\nimport { CustomComboBoxDataTids } from './CustomComboBox';\nimport { getComboBoxTheme } from './getComboBoxTheme';\n\ninterface ComboBoxViewProps<T>\n  extends Pick<DropdownContainerProps, 'menuPos'>,\n    Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    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<Array<ComboBoxExtendedItem<T>>>;\n  loading?: boolean;\n  menuAlign?: 'left' | 'right';\n  opened?: boolean;\n  drawArrow?: boolean;\n  placeholder?: string;\n  size?: SizeProp;\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  onMobileClose?: () => 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  itemWrapper?: (item: T) => React.ComponentType<unknown>;\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\ntype DefaultProps<T> = Required<\n  Pick<\n    ComboBoxViewProps<T>,\n    | 'renderItem'\n    | 'renderValue'\n    | 'renderAddButton'\n    | 'repeatRequest'\n    | 'requestStatus'\n    | 'onClickOutside'\n    | 'onFocusOutside'\n    | 'size'\n    | 'width'\n  >\n>;\n\nexport const ComboBoxViewIds = {\n  menu: 'ComboBoxView__menu',\n};\n\n@responsiveLayout\n@rootNode\nexport class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBoxView';\n\n  public static defaultProps: DefaultProps<unknown> = {\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 getProps = createPropsGetter(ComboBoxView.defaultProps);\n\n  private input: Nullable<Input>;\n  private setRootNode!: TSetRootNode;\n  private mobileInput: Nullable<Input> = null;\n  private isMobileLayout!: boolean;\n  private dropdownContainerRef = React.createRef<DropdownContainer>();\n  private theme!: Theme;\n  private menuId = ComboBoxViewIds.menu + getRandomID();\n\n  public componentDidMount() {\n    if (this.props.autoFocus && this.props.onFocus) {\n      this.props.onFocus();\n    }\n    this.props.opened && this.dropdownContainerRef.current?.position();\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    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getComboBoxTheme(theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const { onMouseEnter, onMouseLeave, onMouseOver, opened } = this.props;\n    const { onClickOutside, onFocusOutside, width } = this.getProps();\n\n    const isMobile = this.isMobileLayout;\n\n    const input = this.renderInput();\n\n    return (\n      <CommonWrapper {...this.props}>\n        <RenderLayer onClickOutside={onClickOutside} onFocusOutside={onFocusOutside} active={opened}>\n          <span\n            data-tid={CustomComboBoxDataTids.comboBoxView}\n            style={{ width }}\n            className={styles.root()}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            onMouseOver={onMouseOver}\n            ref={this.setRootNode}\n          >\n            {input}\n            {isMobile ? this.renderMobileMenu() : this.renderMenu()}\n          </span>\n        </RenderLayer>\n      </CommonWrapper>\n    );\n  }\n\n  private getComboBoxMenu = () => {\n    const { items, loading, opened, refMenu, maxMenuHeight, renderTotalCount, renderNotFound, totalCount, size } =\n      this.props;\n\n    const { repeatRequest, requestStatus, renderItem, itemWrapper } = this.getProps();\n    return (\n      <ComboBoxMenu\n        menuId={this.menuId}\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        itemWrapper={itemWrapper}\n        renderAddButton={this.renderAddButton}\n        repeatRequest={repeatRequest}\n        requestStatus={requestStatus}\n        totalCount={totalCount}\n        isMobile={this.isMobileLayout}\n        size={size}\n      />\n    );\n  };\n\n  private renderMenu = () => {\n    const { menuAlign, opened, menuPos } = this.props;\n\n    return (\n      opened && (\n        <DropdownContainer\n          menuPos={menuPos}\n          align={menuAlign}\n          getParent={this.getParent}\n          disablePortal={this.props.disablePortal}\n          ref={this.dropdownContainerRef}\n        >\n          {this.getComboBoxMenu()}\n        </DropdownContainer>\n      )\n    );\n  };\n\n  private renderMobileMenu = () => {\n    let rightIcon = null;\n\n    const { loading, items, opened, onFocus, onInputValueChange, placeholder, textValue } = 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,\n      onValueChange: onInputValueChange,\n      value: textValue,\n      placeholder,\n      rightIcon,\n    };\n\n    return (\n      opened && (\n        <MobilePopup\n          headerChildComponent={<Input ref={this.refMobileInput} {...inputProps} />}\n          onCloseRequest={this.props.onMobileClose}\n          opened\n        >\n          {this.getComboBoxMenu()}\n        </MobilePopup>\n      )\n    );\n  };\n\n  private getParent = () => {\n    return getRootNode(this);\n  };\n\n  private renderAddButton = (): React.ReactNode => {\n    return this.getProps().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      textValue,\n      value,\n      warning,\n      refInputLikeText,\n      leftIcon,\n      inputMode,\n      size,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n    } = this.props;\n\n    const { renderValue } = this.getProps();\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={onInputFocus}\n          onClick={isMobile ? this.handleMobileFocus : 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          aria-describedby={ariaDescribedby}\n          aria-controls={this.menuId}\n          aria-label={ariaLabel}\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        aria-describedby={ariaDescribedby}\n        aria-controls={this.menuId}\n      >\n        {isNonNullable(value) && renderValue ? renderValue(value) : null}\n      </InputLikeText>\n    );\n  }\n\n  private handleMobileFocus = () => {\n    this.props.onInputClick?.();\n\n    this.mobileInput?.focus();\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.props.onMobileClose?.();\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, size } = this.props;\n\n    if (loading && items && !!items.length) {\n      if (isTheme2022(this.theme)) {\n        return <LoadingIcon size={size} />;\n      }\n      return this.renderSpinner();\n    }\n\n    if (rightIcon || drawArrow) {\n      if (isTheme2022(this.theme)) {\n        return rightIcon || <ArrowDownIcon size={size} />;\n      }\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

@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { DropdownContainerProps } from '../DropdownContainer';
 import { Input, InputIconType } from '../../components/Input';
 import { InputLikeText } from '../InputLikeText';
 import { Menu } from '../Menu';
 import { MenuItemState } from '../../components/MenuItem';
 import { Nullable } from '../../typings/utility-types';
-import { CommonProps } from '../../internal/CommonWrapper';
+import { CommonProps } from '../CommonWrapper';
+import { ComboBoxExtendedItem } from '../../components/ComboBox';
+import { SizeProp } from '../../lib/types/props';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
-interface ComboBoxViewProps<T> extends CommonProps {
+interface ComboBoxViewProps<T> extends Pick<DropdownContainerProps, 'menuPos'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, CommonProps {
     align?: 'left' | 'center' | 'right';
     autoFocus?: boolean;
     borderless?: boolean;
@@ -17,13 +20,13 @@ interface ComboBoxViewProps<T> extends CommonProps {
      * Cостояние валидации при ошибке.
      */
     error?: boolean;
-    items?: Nullable<T[]>;
+    items?: Nullable<Array<ComboBoxExtendedItem<T>>>;
     loading?: boolean;
     menuAlign?: 'left' | 'right';
     opened?: boolean;
     drawArrow?: boolean;
     placeholder?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: SizeProp;
     textValue?: string;
     totalCount?: number;
     value?: Nullable<T>;
@@ -40,6 +43,7 @@ interface ComboBoxViewProps<T> extends CommonProps {
     onValueChange?: (value: T) => void;
     onClickOutside?: (e: Event) => void;
     onFocus?: () => void;
+    onMobileClose?: () => void;
     onFocusOutside?: () => void;
     onInputBlur?: () => void;
     onInputValueChange?: (value: string) => void;
@@ -50,49 +54,43 @@ interface ComboBoxViewProps<T> extends CommonProps {
     onMouseOver?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
     renderItem?: (item: T, state: MenuItemState) => React.ReactNode;
+    itemWrapper?: (item: T) => React.ComponentType<unknown>;
     renderNotFound?: () => React.ReactNode;
     renderTotalCount?: (found: number, total: number) => React.ReactNode;
     renderValue?: (item: T) => React.ReactNode;
-    renderAddButton: (query?: string) => React.ReactNode;
+    renderAddButton?: (query?: string) => React.ReactNode;
     repeatRequest?: () => void;
     requestStatus?: ComboBoxRequestStatus;
     refInput?: (input: Nullable<Input>) => void;
     refMenu?: (menu: Nullable<Menu>) => void;
     refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;
 }
-interface ComboBoxViewState {
-    isMobileOpened: boolean;
-}
-export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>, ComboBoxViewState> {
+declare type DefaultProps<T> = Required<Pick<ComboBoxViewProps<T>, 'renderItem' | 'renderValue' | 'renderAddButton' | 'repeatRequest' | 'requestStatus' | 'onClickOutside' | 'onFocusOutside' | 'size' | 'width'>>;
+export declare const ComboBoxViewIds: {
+    menu: string;
+};
+export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T>> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        renderItem: (item: any) => any;
-        renderValue: (item: any) => any;
-        renderAddButton: () => null;
-        repeatRequest: () => undefined;
-        requestStatus: ComboBoxRequestStatus;
-        onClickOutside: () => void;
-        onFocusOutside: () => void;
-        size: string;
-        width: number;
-    };
+    static defaultProps: DefaultProps<unknown>;
+    private getProps;
     private input;
     private setRootNode;
     private mobileInput;
     private isMobileLayout;
     private dropdownContainerRef;
+    private theme;
+    private menuId;
     componentDidMount(): void;
-    state: ComboBoxViewState;
     componentDidUpdate(prevProps: ComboBoxViewProps<T>): void;
     render(): JSX.Element;
+    renderMain(): JSX.Element;
     private getComboBoxMenu;
     private renderMenu;
     private renderMobileMenu;
-    private handleCloseMobile;
     private getParent;
     private renderAddButton;
     private renderInput;
-    private handleFocusMobile;
+    private handleMobileFocus;
     private handleItemSelect;
     private refInput;
     private renderSpinner;