@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

package/components/Checkbox/Checkbox.styles.d.ts

@@ -1,17 +1,24 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const globalClasses: {
+    box: string;
+};
+export declare const styles: {
     root(t: Theme): string;
+    rootDisableTextSelect(): string;
+    rootChecked(t: Theme): string;
     rootFallback(): string;
     rootWrapperIE11(): string;
+    boxWrapper(t: Theme): string;
     box(t: Theme): string;
     input(): string;
-    warning(t: Theme): string;
-    error(t: Theme): string;
-    checked(t: Theme): string;
-    indeterminate(t: Theme): string;
-    focus(t: Theme): string;
+    boxWarning(t: Theme): string;
+    boxError(t: Theme): string;
+    boxChecked(t: Theme): string;
+    boxFocus(t: Theme): string;
+    boxDisabled(t: Theme): string;
     disabled(t: Theme): string;
-    iconFixBaseline(): string;
+    icon(): string;
+    iconFixPosition(): string;
     iconUnchecked(): string;
     caption(t: Theme): string;
     captionIE11(): string;

package/components/Checkbox/CheckedIcon/CheckedIcon.js

@@ -0,0 +1,18 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { CheckAIcon16Solid } from "../../../internal/icons2022/CheckAIcon/CheckAIcon16Solid";
+import { CheckAIcon20Solid } from "../../../internal/icons2022/CheckAIcon/CheckAIcon20Solid";
+export var CheckedIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(CheckAIcon16Solid, {
+      size: 12
+    });
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(CheckAIcon16Solid, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(CheckAIcon20Solid, null);
+  }
+}, 'CheckedIcon');

package/components/Checkbox/CheckedIcon/CheckedIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CheckedIcon.tsx"],"names":["React","iconSizer","CheckAIcon16Solid","CheckAIcon20Solid","CheckedIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,oCAA1B;AACA,SAASC,iBAAT,QAAkC,uDAAlC;AACA,SAASC,iBAAT,QAAkC,uDAAlC;;AAEA,OAAO,IAAMC,WAAW,GAAGH,SAAS;AAClC;AACEI,EAAAA,KAAK,EAAE,sCAAM,oBAAC,iBAAD,IAAmB,IAAI,EAAE,EAAzB,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,iBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,iBAAD,OAAN,EAHT,EADkC;;AAMlC,aANkC,CAA7B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { CheckAIcon16Solid } from '../../internal/icons2022/CheckAIcon/CheckAIcon16Solid';\nimport { CheckAIcon20Solid } from '../../internal/icons2022/CheckAIcon/CheckAIcon20Solid';\n\nexport const CheckedIcon = iconSizer(\n  {\n    small: () => <CheckAIcon16Solid size={12} />,\n    medium: () => <CheckAIcon16Solid />,\n    large: () => <CheckAIcon20Solid />,\n  },\n  'CheckedIcon',\n);\n"]}

package/components/Checkbox/CheckedIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Checkbox/CheckedIcon.js",
+  "module": "CheckedIcon",
+  "types": "../CheckedIcon.d.ts",
+  "sideEffects": false
+}

package/components/Checkbox/CheckedIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const CheckedIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/Checkbox/IndeterminateIcon/IndeterminateIcon.js

@@ -0,0 +1,21 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+import { ShapeSquareIcon16Solid } from "../../../internal/icons2022/ShapeSquareIcon/ShapeSquareIcon16Solid";
+export var IndeterminateIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ShapeSquareIcon16Solid, {
+      size: 6
+    });
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ShapeSquareIcon16Solid, {
+      size: 8
+    });
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ShapeSquareIcon16Solid, {
+      size: 10
+    });
+  }
+}, 'IndeterminateIcon');

package/components/Checkbox/IndeterminateIcon/IndeterminateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["IndeterminateIcon.tsx"],"names":["React","iconSizer","ShapeSquareIcon16Solid","IndeterminateIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,oCAA1B;AACA,SAASC,sBAAT,QAAuC,iEAAvC;;AAEA,OAAO,IAAMC,iBAAiB,GAAGF,SAAS;AACxC;AACEG,EAAAA,KAAK,EAAE,sCAAM,oBAAC,sBAAD,IAAwB,IAAI,EAAE,CAA9B,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,sBAAD,IAAwB,IAAI,EAAE,CAA9B,GAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,sBAAD,IAAwB,IAAI,EAAE,EAA9B,GAAN,EAHT,EADwC;;AAMxC,mBANwC,CAAnC","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\nimport { ShapeSquareIcon16Solid } from '../../internal/icons2022/ShapeSquareIcon/ShapeSquareIcon16Solid';\n\nexport const IndeterminateIcon = iconSizer(\n  {\n    small: () => <ShapeSquareIcon16Solid size={6} />,\n    medium: () => <ShapeSquareIcon16Solid size={8} />,\n    large: () => <ShapeSquareIcon16Solid size={10} />,\n  },\n  'IndeterminateIcon',\n);\n"]}

package/components/Checkbox/IndeterminateIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Checkbox/IndeterminateIcon.js",
+  "module": "IndeterminateIcon",
+  "types": "../IndeterminateIcon.d.ts",
+  "sideEffects": false
+}

package/components/Checkbox/IndeterminateIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const IndeterminateIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/Checkbox/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './Checkbox';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './Checkbox';\n"]}

package/components/ComboBox/ComboBox/ComboBox.js

@@ -1,8 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import { CustomComboBox } from "../../../internal/CustomComboBox";
-export var ComboBox = /*#__PURE__*/function (_React$Component) {
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+export var ComboBox = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ComboBox, _React$Component);
 
   function ComboBox() {
@@ -13,23 +18,31 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(ComboBox.defaultProps);
     _this.comboboxElement = null;
+
+    _this.customComboBoxRef = function (element) {
+      _this.setRootNode(element);
+
+      _this.comboboxElement = element;
+    };
+
     return _this;
   }
 
   var _proto = ComboBox.prototype;
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
 
   _proto.focus = function focus() {
     if (this.comboboxElement) {
       this.comboboxElement.focus();
     }
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
   _proto.blur = function blur() {
@@ -37,13 +50,13 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
       this.comboboxElement.blur();
     }
   }
-  /**
-   * Открывает выпадающий список и запускает поиск элементов
-   *
-   * @public
-   * @param {string} [query] Текст поиска. По умолчанию берется
-   * текст из инпута или результат `valueToString(value)`
-   */
+  /**
+  * Открывает выпадающий список и запускает поиск элементов
+  *
+  * @public
+  * @param {string} [query] Текст поиска. По умолчанию берется
+  * текст из инпута или результат `valueToString(value)`
+  */
   ;
 
   _proto.search = function search(query) {
@@ -51,9 +64,9 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
       this.comboboxElement.search(query);
     }
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
   _proto.cancelSearch = function cancelSearch() {
@@ -61,9 +74,9 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
       this.comboboxElement.cancelSearch();
     }
   }
-  /**
-   * @public Открывает выпадающий список
-   */
+  /**
+  * @public Открывает выпадающий список
+  */
   ;
 
   _proto.open = function open() {
@@ -71,9 +84,9 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
       this.comboboxElement.open();
     }
   }
-  /**
-   * @public Закрывает выпадающий список
-   */
+  /**
+  * @public Закрывает выпадающий список
+  */
   ;
 
   _proto.close = function close() {
@@ -81,10 +94,10 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
       this.comboboxElement.close();
     }
   }
-  /**
-   * Выделяет текст внутри input
-   * @public
-   */
+  /**
+  * Выделяет текст внутри input
+  * @public
+  */
   ;
 
   _proto.selectInputText = function selectInputText() {
@@ -92,10 +105,10 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
       this.comboboxElement.selectInputText();
     }
   }
-  /**
-   * Сбрасывает введенное пользователем значение
-   * @public
-   */
+  /**
+  * Сбрасывает введенное пользователем значение
+  * @public
+  */
   ;
 
   _proto.reset = function reset() {
@@ -105,19 +118,13 @@ export var ComboBox = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    var _this2 = this;
-
-    return /*#__PURE__*/React.createElement(CustomComboBox, _extends({}, this.props, {
-      ref: function ref(element) {
-        return _this2.comboboxElement = element;
-      }
+    return /*#__PURE__*/React.createElement(CustomComboBox, _extends({}, this.getProps(), {
+      ref: this.customComboBoxRef
     }));
   };
 
   return ComboBox;
-}(React.Component);
-ComboBox.__KONTUR_REACT_UI__ = 'ComboBox';
-ComboBox.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ComboBox', _class2.defaultProps = {
   itemToValue: function itemToValue(item) {
     return item.value;
   },
@@ -133,4 +140,4 @@ ComboBox.defaultProps = {
   menuAlign: 'left',
   searchOnFocus: true,
   drawArrow: true
-};
+}, _temp)) || _class;

package/components/ComboBox/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboBox.tsx"],"names":["React","CustomComboBox","ComboBox","comboboxElement","focus","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","props","element","Component","__KONTUR_REACT_UI__","defaultProps","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,cAAT,QAA+B,+BAA/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8JA,WAAaC,QAAb;;;;;;;;;;;;;AAaUC,IAAAA,eAbV,GAayD,IAbzD;;AAeE;AACF;AACA,KAjBA;AAkBSC,EAAAA,KAlBT,GAkBE,iBAAe;AACb,QAAI,KAAKD,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBC,KAArB;AACD;AACF;;AAED;AACF;AACA,KA1BA;AA2BSC,EAAAA,IA3BT,GA2BE,gBAAc;AACZ,QAAI,KAAKF,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBE,IAArB;AACD;AACF;;AAED;AACF;AACA;AACA;AACA;AACA;AACA,KAvCA;AAwCSC,EAAAA,MAxCT,GAwCE,gBAAcC,KAAd,EAA8B;AAC5B,QAAI,KAAKJ,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBG,MAArB,CAA4BC,KAA5B;AACD;AACF;;AAED;AACF;AACA,KAhDA;AAiDSC,EAAAA,YAjDT,GAiDE,wBAAsB;AACpB,QAAI,KAAKL,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBK,YAArB;AACD;AACF;;AAED;AACF;AACA,KAzDA;AA0DSC,EAAAA,IA1DT,GA0DE,gBAAc;AACZ,QAAI,KAAKN,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBM,IAArB;AACD;AACF;;AAED;AACF;AACA,KAlEA;AAmESC,EAAAA,KAnET,GAmEE,iBAAe;AACb,QAAI,KAAKP,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBO,KAArB;AACD;AACF;;AAED;AACF;AACA;AACA,KA5EA;AA6ESC,EAAAA,eA7ET,GA6EE,2BAAyB;AACvB,QAAI,KAAKR,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBQ,eAArB;AACD;AACF;;AAED;AACF;AACA;AACA,KAtFA;AAuFSC,EAAAA,KAvFT,GAuFE,iBAAe;AACb,QAAI,KAAKT,eAAT,EAA0B;AACxB,WAAKA,eAAL,CAAqBS,KAArB;AACD;AACF,GA3FH;;AA6FSC,EAAAA,MA7FT,GA6FE,kBAAgB;AACd,wBAAO,oBAAC,cAAD,eAAoB,KAAKC,KAAzB,IAAgC,GAAG,EAAE,aAAAC,OAAO,UAAK,MAAI,CAACZ,eAAL,GAAuBY,OAA5B,EAA5C,IAAP;AACD,GA/FH,mBAAgDf,KAAK,CAACgB,SAAtD,EAAad,Q,CACGe,mB,GAAsB,U,CADzBf,Q,CAGGgB,Y,GAAe,EAC3BC,WAAW,EAAE,qBAACC,IAAD,UAAwBA,IAAI,CAACC,KAA7B,EADc,EAE3BC,aAAa,EAAE,uBAACF,IAAD,UAAwBA,IAAI,CAACG,KAA7B,EAFY,EAG3BC,WAAW,EAAE,qBAACJ,IAAD,UAAwBA,IAAI,CAACG,KAA7B,EAHc,EAI3BE,UAAU,EAAE,oBAACL,IAAD,UAAwBA,IAAI,CAACG,KAA7B,EAJe,EAK3BG,SAAS,EAAE,MALgB,EAM3BC,aAAa,EAAE,IANY,EAO3BC,SAAS,EAAE,IAPgB,E","sourcesContent":["import React from 'react';\r\n\r\nimport { CustomComboBox } from '../../internal/CustomComboBox';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { MenuItemState } from '../MenuItem';\r\nimport { InputIconType } from '../Input';\r\nimport { CommonProps } from '../../internal/CommonWrapper';\r\n\r\nexport interface ComboBoxProps<T> extends CommonProps {\r\n  align?: 'left' | 'center' | 'right';\r\n  /**\r\n   * Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода\r\n   * @default true\r\n   */\r\n  searchOnFocus?: boolean;\r\n  /**\r\n   * Рисует справа иконку в виде стрелки\r\n   * @default true\r\n   */\r\n  drawArrow?: boolean;\r\n\r\n  autoFocus?: boolean;\r\n\r\n  borderless?: boolean;\r\n\r\n  /**\r\n   * Не использовать Portal для рендеринга меню.\r\n   * См. https://github.com/skbkontur/retail-ui/issues/15\r\n   * @default false\r\n   */\r\n  disablePortal?: boolean;\r\n\r\n  disabled?: boolean;\r\n\r\n  error?: boolean;\r\n\r\n  leftIcon?: InputIconType;\r\n\r\n  /**\r\n   * Функция поиска элементов, должна возвращать Promise с массивом элементов.\r\n   * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\r\n   *\r\n   * Элементы могут быть любого типа. В этом случае необходимо определить\r\n   * свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`\r\n   */\r\n  getItems: (query: string) => Promise<T[]>;\r\n\r\n  /**\r\n   * Необходим для сравнения полученных результатов с `value`\r\n   * @default item => item.label\r\n   */\r\n  itemToValue: (item: T) => string | number;\r\n\r\n  maxLength?: number;\r\n\r\n  menuAlign?: 'left' | 'right';\r\n\r\n  onBlur?: () => void;\r\n\r\n  /** Вызывается при изменении `value` */\r\n  onValueChange?: (value: T) => void;\r\n\r\n  onFocus?: () => void;\r\n\r\n  /**\r\n   * Вызывается при изменении текста в поле ввода,\r\n   * если результатом функции будет строка,\r\n   * то она станет следующим состояним полем ввода\r\n   */\r\n  onInputValueChange?: (value: string) => Nullable<string> | void;\r\n\r\n  /**\r\n   * Функция для обработки ситуации, когда была введена\r\n   * строка в инпут и был потерян фокус с элемента.\r\n   *\r\n   * Если при потере фокуса в выпадающем списке будет только один\r\n   * элемент и  результат `renderValue` с этим элементом будет\r\n   * совпадать со значение в текстовом поле, то\r\n   * сработает onValueChange со значением данного элемента\r\n   *\r\n   * Сама функция также может вернуть значение,\r\n   * неравное `undefined`,\r\n   * с которым будет вызван onValueChange.\r\n   */\r\n  onUnexpectedInput?: (value: string) => void | null | T;\r\n\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Функция отрисовки элементов результата поиска.\r\n   * Не применяется если элемент является функцией или React-элементом\r\n   * @default item => item.label\r\n   */\r\n  renderItem: (item: T, state?: MenuItemState) => React.ReactNode;\r\n\r\n  /**\r\n   * Функция для отрисовки сообщения о пустом результате поиска\r\n   * Если есть renderAddButton - не работает\r\n   */\r\n  renderNotFound?: () => React.ReactNode;\r\n\r\n  /**\r\n   * Функция отображающаяя сообщение об общем количестве элементов\r\n   */\r\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\r\n\r\n  /**\r\n   * Функция отрисовки выбранного значения\r\n   * @default item => item.label\r\n   */\r\n  renderValue: (item: T) => React.ReactNode;\r\n\r\n  /**\r\n   * Функция отрисовки кнопки добавления в выпадающем списке\r\n   */\r\n  renderAddButton?: (query?: string) => React.ReactNode;\r\n\r\n  /**\r\n   * Общее количество элементов.\r\n   * Необходим для работы `renderTotalCount`\r\n   */\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Выбранное значение\r\n   * Ожидается, что `value` того же типа что и элементы в массиве,\r\n   * возвращаемом в `getItems`\r\n   */\r\n  value?: Nullable<T>;\r\n\r\n  /**\r\n   * Необходим для преобразования `value` в строку при фокусировке\r\n   * @default item => item.label\r\n   */\r\n  valueToString: (item: T) => string;\r\n\r\n  size?: 'small' | 'medium' | 'large';\r\n\r\n  warning?: boolean;\r\n\r\n  width?: string | number;\r\n\r\n  maxMenuHeight?: number | string;\r\n\r\n  onMouseEnter?: (e: React.MouseEvent) => void;\r\n\r\n  onMouseOver?: (e: React.MouseEvent) => void;\r\n\r\n  onMouseLeave?: (e: React.MouseEvent) => void;\r\n\r\n  onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\r\n\r\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\r\n}\r\n\r\nexport interface ComboBoxItem {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\r\n  public static __KONTUR_REACT_UI__ = 'ComboBox';\r\n\r\n  public static defaultProps = {\r\n    itemToValue: (item: ComboBoxItem) => item.value,\r\n    valueToString: (item: ComboBoxItem) => item.label,\r\n    renderValue: (item: ComboBoxItem) => item.label,\r\n    renderItem: (item: ComboBoxItem) => item.label,\r\n    menuAlign: 'left',\r\n    searchOnFocus: true,\r\n    drawArrow: true,\r\n  };\r\n\r\n  private comboboxElement: Nullable<CustomComboBox<T>> = null;\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public focus() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.focus();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public blur() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.blur();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Открывает выпадающий список и запускает поиск элементов\r\n   *\r\n   * @public\r\n   * @param {string} [query] Текст поиска. По умолчанию берется\r\n   * текст из инпута или результат `valueToString(value)`\r\n   */\r\n  public search(query?: string) {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.search(query);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public cancelSearch() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.cancelSearch();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public Открывает выпадающий список\r\n   */\r\n  public open() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.open();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @public Закрывает выпадающий список\r\n   */\r\n  public close() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.close();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Выделяет текст внутри input\r\n   * @public\r\n   */\r\n  public selectInputText() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.selectInputText();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Сбрасывает введенное пользователем значение\r\n   * @public\r\n   */\r\n  public reset() {\r\n    if (this.comboboxElement) {\r\n      this.comboboxElement.reset();\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return <CustomComboBox {...this.props} ref={element => (this.comboboxElement = element)} />;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["ComboBox.tsx"],"names":["React","CustomComboBox","rootNode","createPropsGetter","ComboBox","getProps","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","focus","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","Component","__KONTUR_REACT_UI__","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { DropdownContainerProps } from '../../internal/DropdownContainer';\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport { Nullable } from '../../typings/utility-types';\nimport { MenuItemState } from '../MenuItem';\nimport { InputIconType } from '../Input';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface ComboBoxProps<T> extends Pick<DropdownContainerProps, 'menuPos'>, CommonProps {\n  align?: 'left' | 'center' | 'right';\n  /**\n   * Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода\n   * @default true\n   */\n  searchOnFocus?: boolean;\n  /**\n   * Рисует справа иконку в виде стрелки\n   * @default true\n   */\n  drawArrow?: boolean;\n\n  autoFocus?: boolean;\n\n  borderless?: boolean;\n\n  /**\n   * Не использовать Portal для рендеринга меню.\n   * См. https://github.com/skbkontur/retail-ui/issues/15\n   * @default false\n   */\n  disablePortal?: boolean;\n\n  disabled?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  leftIcon?: InputIconType;\n\n  rightIcon?: InputIconType;\n\n  /**\n   * Функция поиска элементов, должна возвращать Promise с массивом элементов.\n   * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n   *\n   * Элементы могут быть любого типа. В этом случае необходимо определить\n   * свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`\n   */\n  getItems: (query: string) => Promise<T[]>;\n\n  /**\n   * Необходим для сравнения полученных результатов с `value`\n   * @default item => item.label\n   */\n  itemToValue?: (item: T) => string | number;\n\n  maxLength?: number;\n\n  menuAlign?: 'left' | 'right';\n\n  onBlur?: () => void;\n\n  /** Вызывается при изменении `value` */\n  onValueChange?: (value: T) => void;\n\n  onFocus?: () => void;\n\n  /**\n   * Вызывается при изменении текста в поле ввода,\n   * если результатом функции будет строка,\n   * то она станет следующим состоянием полем ввода\n   */\n  onInputValueChange?: (value: string) => Nullable<string> | void;\n\n  /**\n   * Функция для обработки ситуации, когда была введена\n   * строка в инпут и был потерян фокус с элемента.\n   *\n   * Если при потере фокуса в выпадающем списке будет только один\n   * элемент и  результат `renderValue` с этим элементом будет\n   * совпадать со значение в текстовом поле, то\n   * сработает onValueChange со значением данного элемента\n   *\n   * Сама функция также может вернуть значение,\n   * неравное `undefined`,\n   * с которым будет вызван onValueChange.\n   */\n  onUnexpectedInput?: (value: string) => void | null | T;\n\n  placeholder?: string;\n\n  /**\n   * Функция отрисовки элементов результата поиска.\n   * Не применяется если элемент является функцией или React-элементом\n   * @default item => item.label\n   */\n  renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n  /**\n   * Компонент, заменяющий собой обёртку элементов результата поиска.\n   *\n   * По умолчанию все элементы результата поиска оборачиваются в тег `<button />`.\n   *\n   * @example\n   * itemWrapper={(item) => {\n   *    if (item.value === 3) {\n   *      return (props) => {\n   *        return <a {...props} />\n   *      }\n   *    }\n   * }}\n   */\n  itemWrapper?: (item?: T) => React.ComponentType<unknown>;\n\n  /**\n   * Функция для отрисовки сообщения о пустом результате поиска\n   * Если есть renderAddButton - не работает\n   */\n  renderNotFound?: () => React.ReactNode;\n\n  /**\n   * Функция отображающая сообщение об общем количестве элементов.\n   * `found` учитывает только компонент `MenuItem`. Им \"оборачиваются\" элементы, возвращаемые `getItems()`.\n   */\n  renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n  /**\n   * Функция отрисовки выбранного значения\n   * @default item => item.label\n   */\n  renderValue?: (item: T) => React.ReactNode;\n\n  /**\n   * Функция отрисовки кнопки добавления в выпадающем списке\n   */\n  renderAddButton?: (query?: string) => React.ReactNode;\n\n  /**\n   * Общее количество элементов.\n   * Необходим для работы `renderTotalCount`\n   */\n  totalCount?: number;\n\n  /**\n   * Выбранное значение\n   * Ожидается, что `value` того же типа что и элементы в массиве,\n   * возвращаемом в `getItems`\n   */\n  value?: Nullable<T>;\n\n  /**\n   * Необходим для преобразования `value` в строку при фокусировке\n   * @default item => item.label\n   */\n  valueToString?: (item: T) => string;\n\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n\n  width?: string | number;\n\n  maxMenuHeight?: number | string;\n\n  onMouseEnter?: (e: React.MouseEvent) => void;\n\n  onMouseOver?: (e: React.MouseEvent) => void;\n\n  onMouseLeave?: (e: React.MouseEvent) => void;\n\n  onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface ComboBoxItem {\n  value: string;\n  label: string;\n}\n\ntype DefaultProps<T> = Required<\n  Pick<\n    ComboBoxProps<T>,\n    'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow'\n  >\n>;\n\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'ComboBox';\n\n  public static defaultProps: DefaultProps<any> = {\n    itemToValue: (item: ComboBoxItem) => item.value,\n    valueToString: (item: ComboBoxItem) => item.label,\n    renderValue: (item: ComboBoxItem) => item.label,\n    renderItem: (item: ComboBoxItem) => item.label,\n    menuAlign: 'left',\n    searchOnFocus: true,\n    drawArrow: true,\n  };\n\n  private getProps = createPropsGetter(ComboBox.defaultProps);\n\n  private comboboxElement: Nullable<CustomComboBox<T>> = null;\n  private setRootNode!: TSetRootNode;\n\n  /**\n   * @public\n   */\n  public focus() {\n    if (this.comboboxElement) {\n      this.comboboxElement.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    if (this.comboboxElement) {\n      this.comboboxElement.blur();\n    }\n  }\n\n  /**\n   * Открывает выпадающий список и запускает поиск элементов\n   *\n   * @public\n   * @param {string} [query] Текст поиска. По умолчанию берется\n   * текст из инпута или результат `valueToString(value)`\n   */\n  public search(query?: string) {\n    if (this.comboboxElement) {\n      this.comboboxElement.search(query);\n    }\n  }\n\n  /**\n   * @public\n   */\n  public cancelSearch() {\n    if (this.comboboxElement) {\n      this.comboboxElement.cancelSearch();\n    }\n  }\n\n  /**\n   * @public Открывает выпадающий список\n   */\n  public open() {\n    if (this.comboboxElement) {\n      this.comboboxElement.open();\n    }\n  }\n\n  /**\n   * @public Закрывает выпадающий список\n   */\n  public close() {\n    if (this.comboboxElement) {\n      this.comboboxElement.close();\n    }\n  }\n\n  /**\n   * Выделяет текст внутри input\n   * @public\n   */\n  public selectInputText() {\n    if (this.comboboxElement) {\n      this.comboboxElement.selectInputText();\n    }\n  }\n\n  /**\n   * Сбрасывает введенное пользователем значение\n   * @public\n   */\n  public reset() {\n    if (this.comboboxElement) {\n      this.comboboxElement.reset();\n    }\n  }\n\n  public render() {\n    return <CustomComboBox {...this.getProps()} ref={this.customComboBoxRef} />;\n  }\n\n  private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n    this.setRootNode(element);\n    this.comboboxElement = element;\n  };\n}\n"]}

package/components/ComboBox/ComboBox.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { DropdownContainerProps } from '../../internal/DropdownContainer';
 import { Nullable } from '../../typings/utility-types';
 import { MenuItemState } from '../MenuItem';
 import { InputIconType } from '../Input';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface ComboBoxProps<T> extends CommonProps {
+export interface ComboBoxProps<T> extends Pick<DropdownContainerProps, 'menuPos'>, CommonProps {
     align?: 'left' | 'center' | 'right';
     /**
      * Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода
@@ -24,8 +25,12 @@ export interface ComboBoxProps<T> extends CommonProps {
      */
     disablePortal?: boolean;
     disabled?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
     leftIcon?: InputIconType;
+    rightIcon?: InputIconType;
     /**
      * Функция поиска элементов, должна возвращать Promise с массивом элементов.
      * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.
@@ -38,7 +43,7 @@ export interface ComboBoxProps<T> extends CommonProps {
      * Необходим для сравнения полученных результатов с `value`
      * @default item => item.label
      */
-    itemToValue: (item: T) => string | number;
+    itemToValue?: (item: T) => string | number;
     maxLength?: number;
     menuAlign?: 'left' | 'right';
     onBlur?: () => void;
@@ -48,7 +53,7 @@ export interface ComboBoxProps<T> extends CommonProps {
     /**
      * Вызывается при изменении текста в поле ввода,
      * если результатом функции будет строка,
-     * то она станет следующим состояним полем ввода
+     * то она станет следующим состоянием полем ввода
      */
     onInputValueChange?: (value: string) => Nullable<string> | void;
     /**
@@ -71,21 +76,37 @@ export interface ComboBoxProps<T> extends CommonProps {
      * Не применяется если элемент является функцией или React-элементом
      * @default item => item.label
      */
-    renderItem: (item: T, state?: MenuItemState) => React.ReactNode;
+    renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;
+    /**
+     * Компонент, заменяющий собой обёртку элементов результата поиска.
+     *
+     * По умолчанию все элементы результата поиска оборачиваются в тег `<button />`.
+     *
+     * @example
+     * itemWrapper={(item) => {
+     *    if (item.value === 3) {
+     *      return (props) => {
+     *        return <a {...props} />
+     *      }
+     *    }
+     * }}
+     */
+    itemWrapper?: (item?: T) => React.ComponentType<unknown>;
     /**
      * Функция для отрисовки сообщения о пустом результате поиска
      * Если есть renderAddButton - не работает
      */
     renderNotFound?: () => React.ReactNode;
     /**
-     * Функция отображающаяя сообщение об общем количестве элементов
+     * Функция отображающая сообщение об общем количестве элементов.
+     * `found` учитывает только компонент `MenuItem`. Им "оборачиваются" элементы, возвращаемые `getItems()`.
      */
     renderTotalCount?: (found: number, total: number) => React.ReactNode;
     /**
      * Функция отрисовки выбранного значения
      * @default item => item.label
      */
-    renderValue: (item: T) => React.ReactNode;
+    renderValue?: (item: T) => React.ReactNode;
     /**
      * Функция отрисовки кнопки добавления в выпадающем списке
      */
@@ -105,9 +126,16 @@ export interface ComboBoxProps<T> extends CommonProps {
      * Необходим для преобразования `value` в строку при фокусировке
      * @default item => item.label
      */
-    valueToString: (item: T) => string;
+    valueToString?: (item: T) => string;
     size?: 'small' | 'medium' | 'large';
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
     width?: string | number;
     maxMenuHeight?: number | string;
     onMouseEnter?: (e: React.MouseEvent) => void;
@@ -120,18 +148,13 @@ export interface ComboBoxItem {
     value: string;
     label: string;
 }
+declare type DefaultProps<T> = Required<Pick<ComboBoxProps<T>, 'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow'>>;
 export declare class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        itemToValue: (item: ComboBoxItem) => string;
-        valueToString: (item: ComboBoxItem) => string;
-        renderValue: (item: ComboBoxItem) => string;
-        renderItem: (item: ComboBoxItem) => string;
-        menuAlign: string;
-        searchOnFocus: boolean;
-        drawArrow: boolean;
-    };
+    static defaultProps: DefaultProps<any>;
+    private getProps;
     private comboboxElement;
+    private setRootNode;
     /**
      * @public
      */
@@ -171,4 +194,6 @@ export declare class ComboBox<T = ComboBoxItem> extends React.Component<ComboBox
      */
     reset(): void;
     render(): JSX.Element;
+    private customComboBoxRef;
 }
+export {};