@skbkontur/react-ui 0.0.0-7feb61cdde → 0.0.0-80c5917afc

package/components/TokenInput/TokenInputMenu.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HTMLProps } from '../../typings/html';
 import { PopupProps } from '../../internal/Popup';
 import { ComboBoxMenuProps } from '../../internal/CustomComboBox';
 import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
@@ -6,6 +7,12 @@ export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
     anchorElement: PopupProps['anchorElement'];
     menuWidth: TokenInputProps<string>['menuWidth'];
     menuAlign: TokenInputMenuAlign;
+    /**
+     * Позволяет задать `id` выпадающему меню.
+     *
+     * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.
+     */
+    popupMenuId?: HTMLProps['id'];
 }
 export declare class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
     static __KONTUR_REACT_UI__: string;

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js

@@ -52,7 +52,8 @@ var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
         value: ThemeFactory.create({
           popupPinOffset: theme.tooltipMenuPinOffset,
           popupMargin: theme.tooltipMenuMargin,
-          popupPinSize: theme.tooltipMenuPinSize
+          popupPinSize: theme.tooltipMenuPinSize,
+          menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY
         }, theme)
       }, _this2.renderMain());
     });
@@ -63,6 +64,9 @@ var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       return null;
     }
 
+    var _this$getProps = this.getProps(),
+        disableAnimations = _this$getProps.disableAnimations;
+
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
     }, this.props), /*#__PURE__*/React.createElement(PopupMenu, {
@@ -72,11 +76,12 @@ var TooltipMenu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       caption: this.props.caption,
       header: this.props.header,
       footer: this.props.footer,
+      preventIconsOffset: this.props.preventIconsOffset,
       positions: this.props.positions,
       onOpen: this.props.onOpen,
       onClose: this.props.onClose,
       popupHasPin: true,
-      disableAnimations: this.getProps().disableAnimations
+      disableAnimations: disableAnimations
     }, this.props.children));
   };
 

package/components/TooltipMenu/TooltipMenu/TooltipMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","props","getProps","defaultProps","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","renderMain","setRootNode","menuMaxHeight","menuWidth","header","footer","positions","onOpen","onClose","disableAnimations","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;;;;;;;;;;;;;;;AAkBP,OAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAEA,IAAaC,WAAb,GADCJ,QACD,qHAUE,qBAAYK,KAAZ,EAAqC;AACnC,wCAAMA,KAAN,UADmC,MAF7BC,QAE6B,GAFlBL,iBAAiB,CAACG,WAAW,CAACG,YAAb,CAEC;;AAGnC,QAAI,CAACF,KAAK,CAACG,OAAP,IAAkB,CAACX,eAAvB,EAAwC;AACtC,YAAM,IAAIY,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAhBH;;AAkBSC,EAAAA,MAlBT,GAkBE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEjB,YAAY,CAACkB,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEF,KAAK,CAACG,oBADxB;AAEEC,cAAAA,WAAW,EAAEJ,KAAK,CAACK,iBAFrB;AAGEC,cAAAA,YAAY,EAAEN,KAAK,CAACO,kBAHtB,EADK;;AAMLP,YAAAA,KANK,CADT;;;AAUG,UAAA,MAAI,CAACQ,UAAL,EAVH,CADF;;;AAcD,OAhBH,CADF;;;AAoBD,GAvCH;;AAyCSA,EAAAA,UAzCT,GAyCE,sBAAoB;AAClB,QAAI,CAAC,KAAKd,KAAL,CAAWG,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED;AACE,0BAAC,aAAD,aAAe,WAAW,EAAE,KAAKY,WAAjC,IAAkD,KAAKf,KAAvD;AACE,0BAAC,SAAD;AACE,oBAAUH,mBAAmB,CAACC,IADhC;AAEE,QAAA,aAAa,EAAE,KAAKE,KAAL,CAAWgB,aAF5B;AAGE,QAAA,SAAS,EAAE,KAAKhB,KAAL,CAAWiB,SAHxB;AAIE,QAAA,OAAO,EAAE,KAAKjB,KAAL,CAAWG,OAJtB;AAKE,QAAA,MAAM,EAAE,KAAKH,KAAL,CAAWkB,MALrB;AAME,QAAA,MAAM,EAAE,KAAKlB,KAAL,CAAWmB,MANrB;AAOE,QAAA,SAAS,EAAE,KAAKnB,KAAL,CAAWoB,SAPxB;AAQE,QAAA,MAAM,EAAE,KAAKpB,KAAL,CAAWqB,MARrB;AASE,QAAA,OAAO,EAAE,KAAKrB,KAAL,CAAWsB,OATtB;AAUE,QAAA,WAAW,MAVb;AAWE,QAAA,iBAAiB,EAAE,KAAKrB,QAAL,GAAgBsB,iBAXrC;;AAaG,WAAKvB,KAAL,CAAWwB,QAbd,CADF,CADF;;;;AAmBD,GAjEH,sBAAiCpC,KAAK,CAACqC,SAAvC,WACgBC,mBADhB,GACsC,aADtC,UAIgBxB,YAJhB,GAI6C,EACzCqB,iBAAiB,EAAE9B,SADsB,EAJ7C","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   */\n  positions?: PopupPositionsType[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.tooltipMenuPinOffset,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={this.getProps().disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["TooltipMenu.tsx"],"names":["React","ThemeFactory","ThemeContext","PopupMenu","isProductionEnv","isTestEnv","CommonWrapper","rootNode","createPropsGetter","TooltipMenuDataTids","root","TooltipMenu","props","getProps","defaultProps","caption","Error","render","theme","create","popupPinOffset","tooltipMenuPinOffset","popupMargin","tooltipMenuMargin","popupPinSize","tooltipMenuPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","disableAnimations","setRootNode","menuMaxHeight","menuWidth","header","footer","preventIconsOffset","positions","onOpen","onClose","children","Component","__KONTUR_REACT_UI__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0C,0BAA1C;;AAEA,SAASC,eAAT,EAA0BC,SAA1B,QAA2C,8BAA3C;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;;;;;;;;;;;;;;;AAkBP,OAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAEA,IAAaC,WAAb,GADCJ,QACD,qHAUE,qBAAYK,KAAZ,EAAqC;AACnC,wCAAMA,KAAN,UADmC,MAF7BC,QAE6B,GAFlBL,iBAAiB,CAACG,WAAW,CAACG,YAAb,CAEC;;AAGnC,QAAI,CAACF,KAAK,CAACG,OAAP,IAAkB,CAACX,eAAvB,EAAwC;AACtC,YAAM,IAAIY,KAAJ,CAAU,+BAAV,CAAN;AACD,KALkC;AAMpC,GAhBH;;AAkBSC,EAAAA,MAlBT,GAkBE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,8BAAC,YAAD,CAAc,QAAd;AACE,YAAA,KAAK,EAAEjB,YAAY,CAACkB,MAAb;AACL;AACEC,cAAAA,cAAc,EAAEF,KAAK,CAACG,oBADxB;AAEEC,cAAAA,WAAW,EAAEJ,KAAK,CAACK,iBAFrB;AAGEC,cAAAA,YAAY,EAAEN,KAAK,CAACO,kBAHtB;AAIEC,cAAAA,yCAAyC,EAAER,KAAK,CAACS,kBAJnD,EADK;;AAOLT,YAAAA,KAPK,CADT;;;AAWG,UAAA,MAAI,CAACU,UAAL,EAXH,CADF;;;AAeD,OAjBH,CADF;;;AAqBD,GAxCH;;AA0CSA,EAAAA,UA1CT,GA0CE,sBAAoB;AAClB,QAAI,CAAC,KAAKhB,KAAL,CAAWG,OAAhB,EAAyB;AACvB,aAAO,IAAP;AACD;;AAED,yBAA8B,KAAKF,QAAL,EAA9B,CAAQgB,iBAAR,kBAAQA,iBAAR;;AAEA;AACE,0BAAC,aAAD,aAAe,WAAW,EAAE,KAAKC,WAAjC,IAAkD,KAAKlB,KAAvD;AACE,0BAAC,SAAD;AACE,oBAAUH,mBAAmB,CAACC,IADhC;AAEE,QAAA,aAAa,EAAE,KAAKE,KAAL,CAAWmB,aAF5B;AAGE,QAAA,SAAS,EAAE,KAAKnB,KAAL,CAAWoB,SAHxB;AAIE,QAAA,OAAO,EAAE,KAAKpB,KAAL,CAAWG,OAJtB;AAKE,QAAA,MAAM,EAAE,KAAKH,KAAL,CAAWqB,MALrB;AAME,QAAA,MAAM,EAAE,KAAKrB,KAAL,CAAWsB,MANrB;AAOE,QAAA,kBAAkB,EAAE,KAAKtB,KAAL,CAAWuB,kBAPjC;AAQE,QAAA,SAAS,EAAE,KAAKvB,KAAL,CAAWwB,SARxB;AASE,QAAA,MAAM,EAAE,KAAKxB,KAAL,CAAWyB,MATrB;AAUE,QAAA,OAAO,EAAE,KAAKzB,KAAL,CAAW0B,OAVtB;AAWE,QAAA,WAAW,MAXb;AAYE,QAAA,iBAAiB,EAAET,iBAZrB;;AAcG,WAAKjB,KAAL,CAAW2B,QAdd,CADF,CADF;;;;AAoBD,GArEH,sBAAiCvC,KAAK,CAACwC,SAAvC,WACgBC,mBADhB,GACsC,aADtC,UAIgB3B,YAJhB,GAI6C,EACzCe,iBAAiB,EAAExB,SADsB,EAJ7C","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { PopupMenu, PopupMenuProps } from '../../internal/PopupMenu';\nimport { MenuItemProps } from '../MenuItem';\nimport { isProductionEnv, isTestEnv } from '../../lib/currentEnvironment';\nimport { MenuHeaderProps } from '../MenuHeader';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;\n\nexport interface TooltipMenuProps\n  extends CommonProps,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {\n  children?: TooltipMenuChildType | TooltipMenuChildType[];\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо `caption`,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: PopupMenuProps['caption'];\n  /**\n   * Произвольный элемент, который будет отрендерен в шапке меню.\n   *\n   * _Примечание_: контрол [MenuHeader](#/Components/MenuHeader) передаётся только в `children` меню-контролов. Не стоит передавать `MenuHeader` в `header`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Произвольный элемент, который будет отрендерен в подвале меню.\n   *\n   * Перед элементом переданным в `footer` будет отрендерен [MenuSeparator](#/Components/MenuSeparator).\n   */\n  footer?: React.ReactNode;\n  /**  Список позиций доступных для расположения выпадашки относительно `caption`.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   */\n  positions?: PopupPositionsType[];\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n}\n\nexport const TooltipMenuDataTids = {\n  root: 'TooltipMenu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TooltipMenuProps, 'disableAnimations'>>;\n\n/**\n * Меню, раскрывающееся по клику на переданный в `caption` элемент.\n *\n * Положение меню задаётся с помощью массива `positions` и работает так:\n * первое значение в массиве - дефолтная позиция, меню раскроется на этой позиции, если оно не будет выходить за пределы `viewport`,\n * если раскрыться в дефолтной позиции не получится - будет использована следующая позиция, и так далее, пока не будет достигнут конец массива. Если все положения из списка будут выходить за пределы `viewport`, в качестве положения будет использовано первое значение в массиве.\n *\n * Если меню должно раскрываться только в одну сторону - массив `positions` должен содержать только один элемент: сторону, в которую должно открываться меню.\n *\n * Если массив `positions` не передан (или передан пустой массив), будут использованы всевозможные значения.\n */\n@rootNode\nexport class TooltipMenu extends React.Component<TooltipMenuProps> {\n  public static __KONTUR_REACT_UI__ = 'TooltipMenu';\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(TooltipMenu.defaultProps);\n\n  constructor(props: TooltipMenuProps) {\n    super(props);\n\n    if (!props.caption && !isProductionEnv) {\n      throw new Error('Prop \"caption\" is required!!!');\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.tooltipMenuPinOffset,\n                  popupMargin: theme.tooltipMenuMargin,\n                  popupPinSize: theme.tooltipMenuPinSize,\n                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    if (!this.props.caption) {\n      return null;\n    }\n\n    const { disableAnimations } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          data-tid={TooltipMenuDataTids.root}\n          menuMaxHeight={this.props.menuMaxHeight}\n          menuWidth={this.props.menuWidth}\n          caption={this.props.caption}\n          header={this.props.header}\n          footer={this.props.footer}\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={this.props.positions}\n          onOpen={this.props.onOpen}\n          onClose={this.props.onClose}\n          popupHasPin\n          disableAnimations={disableAnimations}\n        >\n          {this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n}\n"]}

package/components/TooltipMenu/TooltipMenu.d.ts

@@ -5,7 +5,7 @@ import { MenuHeaderProps } from '../MenuHeader';
 import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type TooltipMenuChildType = React.ReactElement<MenuItemProps | unknown | MenuHeaderProps>;
-export interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose'> {
+export interface TooltipMenuProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'preventIconsOffset'> {
     children?: TooltipMenuChildType | TooltipMenuChildType[];
     /** Максимальная высота меню */
     menuMaxHeight?: number | string;

package/components/TooltipMenu/TooltipMenu.md

@@ -180,6 +180,34 @@ import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui
 </TooltipMenu>;
 ```
 
+С иконками и включенным по-умолчанию автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>;
+```
+
+С иконками и отключенным автоматическим выравниванием текста.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
+  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>
+```
+
 Условный рендер элементов тултип-меню (с сохранением поведения [MenuItem](#/Components/MenuItem)).
 
 ```jsx harmony

package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js

@@ -6,7 +6,7 @@ import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
 export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      display: inline-block;\n      position: relative;\n      border-radius: ", ";\n      color: ", ";\n      cursor: pointer;\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ", ";\n      }\n    "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.closeBtnIconHoverColor);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", "\n      display: inline-block;\n      position: relative;\n      border-radius: ", ";\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ", ";\n      }\n    "])), resetButton(), t.closeBtnIconBorderRadius, t.closeBtnIconColor, t.transitionDuration, t.transitionTimingFunction, t.closeBtnIconHoverColor);
   },
   rootDisabled: function rootDisabled(t) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.closeBtnIconDisabledColor);

package/internal/CloseButtonIcon/CloseButtonIcon.styles/CloseButtonIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["CloseButtonIcon.styles.tsx"],"names":["css","memoizeStyle","resetButton","styles","root","t","closeBtnIconBorderRadius","closeBtnIconColor","closeBtnIconHoverColor","rootDisabled","closeBtnIconDisabledColor","focus","closeBtnIconFocusShadow","wrapper"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOL,GAAP;AACIE,IAAAA,WAAW,EADf;;;AAImBG,IAAAA,CAAC,CAACC,wBAJrB;AAKWD,IAAAA,CAAC,CAACE,iBALb;;;;;AAUaF,IAAAA,CAAC,CAACG,sBAVf;;;AAaD,GAfgC;AAgBjCC,EAAAA,YAhBiC,wBAgBpBJ,CAhBoB,EAgBV;AACrB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACK,yBADb;;AAGD,GApBgC;AAqBjCC,EAAAA,KArBiC,iBAqB3BN,CArB2B,EAqBjB;AACd,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACO,uBADlB;;AAGD,GAzBgC;AA0BjCC,EAAAA,OA1BiC,qBA0BvB;AACR,WAAOb,GAAP;;;;;;;;;AASD,GApCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      display: inline-block;\n      position: relative;\n      border-radius: ${t.closeBtnIconBorderRadius};\n      color: ${t.closeBtnIconColor};\n      cursor: pointer;\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ${t.closeBtnIconHoverColor};\n      }\n    `;\n  },\n  rootDisabled(t: Theme) {\n    return css`\n      color: ${t.closeBtnIconDisabledColor};\n    `;\n  },\n  focus(t: Theme) {\n    return css`\n      box-shadow: ${t.closeBtnIconFocusShadow};\n    `;\n  },\n  wrapper() {\n    return css`\n      box-sizing: content-box;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["CloseButtonIcon.styles.tsx"],"names":["css","memoizeStyle","resetButton","styles","root","t","closeBtnIconBorderRadius","closeBtnIconColor","transitionDuration","transitionTimingFunction","closeBtnIconHoverColor","rootDisabled","closeBtnIconDisabledColor","focus","closeBtnIconFocusShadow","wrapper"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOL,GAAP;AACIE,IAAAA,WAAW,EADf;;;AAImBG,IAAAA,CAAC,CAACC,wBAJrB;AAKWD,IAAAA,CAAC,CAACE,iBALb;;AAOsBF,IAAAA,CAAC,CAACG,kBAPxB,EAO8CH,CAAC,CAACI,wBAPhD;;;;AAWaJ,IAAAA,CAAC,CAACK,sBAXf;;;AAcD,GAhBgC;AAiBjCC,EAAAA,YAjBiC,wBAiBpBN,CAjBoB,EAiBV;AACrB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACO,yBADb;;AAGD,GArBgC;AAsBjCC,EAAAA,KAtBiC,iBAsB3BR,CAtB2B,EAsBjB;AACd,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACS,uBADlB;;AAGD,GA1BgC;AA2BjCC,EAAAA,OA3BiC,qBA2BvB;AACR,WAAOf,GAAP;;;;;;;;;AASD,GArCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()}\n      display: inline-block;\n      position: relative;\n      border-radius: ${t.closeBtnIconBorderRadius};\n      color: ${t.closeBtnIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n\n      &:enabled:focus,\n      &:enabled:hover {\n        color: ${t.closeBtnIconHoverColor};\n      }\n    `;\n  },\n  rootDisabled(t: Theme) {\n    return css`\n      color: ${t.closeBtnIconDisabledColor};\n    `;\n  },\n  focus(t: Theme) {\n    return css`\n      box-shadow: ${t.closeBtnIconFocusShadow};\n    `;\n  },\n  wrapper() {\n    return css`\n      box-sizing: content-box;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      align-items: center;\n      justify-content: center;\n      pointer-events: none;\n    `;\n  },\n});\n"]}

package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js

@@ -107,6 +107,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
         maxHeight: maxHeight,
         ref: refMenu,
         disableScrollContainer: isMobile,
+        id: this.props.menuId,
         "data-tid": ComboBoxMenuDataTids.loading
       }, /*#__PURE__*/React.createElement(MenuMessage, {
         as: "div"
@@ -121,6 +122,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
         ref: refMenu,
         maxHeight: maxHeight,
         disableScrollContainer: isMobile,
+        id: this.props.menuId,
         "data-tid": ComboBoxMenuDataTids.failed
       }, /*#__PURE__*/React.createElement(MenuMessage, {
         key: "message"
@@ -142,6 +144,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
 
       if (renderAddButton) {
         return /*#__PURE__*/React.createElement(Menu, {
+          id: this.props.menuId,
           maxHeight: maxHeight,
           ref: refMenu,
           disableScrollContainer: isMobile
@@ -150,6 +153,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
 
       if (notFoundValue) {
         return /*#__PURE__*/React.createElement(Menu, {
+          id: this.props.menuId,
           maxHeight: maxHeight,
           ref: refMenu,
           disableScrollContainer: isMobile
@@ -180,6 +184,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
     }
 
     return /*#__PURE__*/React.createElement(Menu, {
+      id: this.props.menuId,
       "data-tid": ComboBoxMenuDataTids.items,
       ref: refMenu,
       maxHeight: maxHeight,

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

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

package/internal/CustomComboBox/ComboBoxMenu.d.ts

@@ -20,6 +20,7 @@ export interface ComboBoxMenuProps<T> {
     repeatRequest?: () => void;
     requestStatus?: ComboBoxRequestStatus;
     isMobile?: boolean;
+    menuId?: string;
 }
 export declare const ComboBoxMenuDataTids: {
     readonly loading: "ComboBoxMenu__loading";

package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js

@@ -5,7 +5,7 @@ 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";
@@ -26,6 +26,9 @@ 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);
 
@@ -40,6 +43,7 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
     _this.getProps = createPropsGetter(ComboBoxView.defaultProps);
     _this.mobileInput = null;
     _this.dropdownContainerRef = /*#__PURE__*/React.createRef();
+    _this.menuId = ComboBoxViewIds.menu + getRandomID();
     _this.state = {
       isMobileOpened: false
     };
@@ -62,6 +66,7 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
           itemWrapper = _this$getProps.itemWrapper;
 
       return /*#__PURE__*/React.createElement(ComboBoxMenu, {
+        menuId: _this.menuId,
         items: items,
         loading: loading,
         maxMenuHeight: maxMenuHeight,
@@ -331,7 +336,8 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         ref: this.refInput,
         warning: warning,
         inputMode: inputMode,
-        "aria-describedby": ariaDescribedby
+        "aria-describedby": ariaDescribedby,
+        "aria-controls": this.menuId
       });
     }
 
@@ -348,7 +354,8 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
       size: size,
       width: "100%",
       ref: refInputLikeText,
-      "aria-describedby": ariaDescribedby
+      "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","createPropsGetter","isTheme2022","ThemeContext","LoadingIcon","ArrowDownIcon","ComboBoxMenu","ComboBoxRequestStatus","styles","CustomComboBoxDataTids","getComboBoxTheme","ComboBoxView","getProps","defaultProps","mobileInput","dropdownContainerRef","createRef","state","isMobileOpened","getComboBoxMenu","props","items","loading","opened","refMenu","maxMenuHeight","renderTotalCount","renderNotFound","totalCount","repeatRequest","requestStatus","renderItem","itemWrapper","handleItemSelect","renderAddButton","isMobileLayout","renderMenu","menuAlign","menuPos","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","size","theme","rightIconWrapper","componentDidMount","current","position","componentDidUpdate","prevProps","editing","render","renderMain","onMouseEnter","onMouseLeave","onMouseOver","onClickOutside","onFocusOutside","isMobile","renderInput","comboBoxView","root","setRootNode","align","borderless","disabled","error","onInputFocus","onInputClick","onInputKeyDown","warning","refInputLikeText","leftIcon","inputMode","ariaDescribedby","renderValue","maxLength","undefined","Component","__KONTUR_REACT_UI__","Unknown"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\n\nimport { 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 '../../internal/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';\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> extends Pick<DropdownContainerProps, 'menuPos'>, 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  'aria-describedby'?: AriaAttributes['aria-describedby'];\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  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\ninterface ComboBoxViewState {\n  isMobileOpened: boolean;\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\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: 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\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    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 } = this.props;\n\n    const { repeatRequest, requestStatus, renderItem, itemWrapper } = this.getProps();\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        itemWrapper={itemWrapper}\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, 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 } = 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        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.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      'aria-describedby': ariaDescribedby,\n    } = this.props;\n\n    const { renderValue, size } = 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={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          aria-describedby={ariaDescribedby}\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      >\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, 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"]}
+{"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","state","isMobileOpened","getComboBoxMenu","props","items","loading","opened","refMenu","maxMenuHeight","renderTotalCount","renderNotFound","totalCount","repeatRequest","requestStatus","renderItem","itemWrapper","handleItemSelect","renderAddButton","isMobileLayout","renderMenu","menuAlign","menuPos","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","size","theme","rightIconWrapper","componentDidMount","current","position","componentDidUpdate","prevProps","editing","render","renderMain","onMouseEnter","onMouseLeave","onMouseOver","onClickOutside","onFocusOutside","isMobile","renderInput","comboBoxView","root","setRootNode","align","borderless","disabled","error","onInputFocus","onInputClick","onInputKeyDown","warning","refInputLikeText","leftIcon","inputMode","ariaDescribedby","renderValue","maxLength","undefined","Component","__KONTUR_REACT_UI__","Unknown"],"mappings":"iPAAA,OAAOA,KAAP,MAAsC,OAAtC;;AAEA,SAASC,WAAT,EAAsBC,aAAtB,QAA2C,iBAA3C;AACA,SAASC,iBAAT,QAA0D,sBAA1D;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;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,WAAT,QAA4B,0BAA5B;;AAEA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,qBAAT,QAAsC,uBAAtC;AACA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,sBAAT,QAAuC,kBAAvC;AACA,SAASC,gBAAT,QAAiC,oBAAjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,OAAO,IAAMC,eAAe,GAAG;AAC7BC,EAAAA,IAAI,EAAE,oBADuB,EAAxB;;;;;AAMP,WAAaC,YAAb,GAFCf,gBAED,UADCC,QACD;;;;;;;;;;;;;;;;;;;AAmBUe,IAAAA,QAnBV,GAmBqBb,iBAAiB,CAACY,YAAY,CAACE,YAAd,CAnBtC;;;;AAuBUC,IAAAA,WAvBV,GAuByC,IAvBzC;;AAyBUC,IAAAA,oBAzBV,gBAyBiC9B,KAAK,CAAC+B,SAAN,EAzBjC;;AA2BUC,IAAAA,MA3BV,GA2BmBR,eAAe,CAACC,IAAhB,GAAuBxB,WAAW,EA3BrD;;;;;;;;;AAoCSgC,IAAAA,KApCT,GAoCoC;AAChCC,MAAAA,cAAc,EAAE,KADgB,EApCpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFUC,IAAAA,eAvFV,GAuF4B,YAAM;AAC9B,wBAAyG,MAAKC,KAA9G,CAAQC,KAAR,eAAQA,KAAR,CAAeC,OAAf,eAAeA,OAAf,CAAwBC,MAAxB,eAAwBA,MAAxB,CAAgCC,OAAhC,eAAgCA,OAAhC,CAAyCC,aAAzC,eAAyCA,aAAzC,CAAwDC,gBAAxD,eAAwDA,gBAAxD,CAA0EC,cAA1E,eAA0EA,cAA1E,CAA0FC,UAA1F,eAA0FA,UAA1F;;AAEA,2BAAkE,MAAKjB,QAAL,EAAlE,CAAQkB,aAAR,kBAAQA,aAAR,CAAuBC,aAAvB,kBAAuBA,aAAvB,CAAsCC,UAAtC,kBAAsCA,UAAtC,CAAkDC,WAAlD,kBAAkDA,WAAlD;AACA;AACE,4BAAC,YAAD;AACE,UAAA,MAAM,EAAE,MAAKhB,MADf;AAEE,UAAA,KAAK,EAAEK,KAFT;AAGE,UAAA,OAAO,EAAEC,OAHX;AAIE,UAAA,aAAa,EAAEG,aAJjB;AAKE,UAAA,aAAa,EAAE,MAAKQ,gBALtB;AAME,UAAA,MAAM,EAAEV,MANV;AAOE,UAAA,OAAO,EAAEC,OAPX;AAQE,UAAA,gBAAgB,EAAEE,gBARpB;AASE,UAAA,UAAU,EAAEK,UATd;AAUE,UAAA,cAAc,EAAEJ,cAVlB;AAWE,UAAA,WAAW,EAAEK,WAXf;AAYE,UAAA,eAAe,EAAE,MAAKE,eAZxB;AAaE,UAAA,aAAa,EAAEL,aAbjB;AAcE,UAAA,aAAa,EAAEC,aAdjB;AAeE,UAAA,UAAU,EAAEF,UAfd;AAgBE,UAAA,QAAQ,EAAE,MAAKO,cAhBjB,GADF;;;AAoBD,KA/GH;;AAiHUC,IAAAA,UAjHV,GAiHuB,YAAM;AACzB,yBAAuC,MAAKhB,KAA5C,CAAQiB,SAAR,gBAAQA,SAAR,CAAmBd,MAAnB,gBAAmBA,MAAnB,CAA2Be,OAA3B,gBAA2BA,OAA3B;;AAEA;AACEf,QAAAA,MAAM;AACJ,4BAAC,iBAAD;AACE,UAAA,OAAO,EAAEe,OADX;AAEE,UAAA,KAAK,EAAED,SAFT;AAGE,UAAA,SAAS,EAAE,MAAKE,SAHlB;AAIE,UAAA,aAAa,EAAE,MAAKnB,KAAL,CAAWoB,aAJ5B;AAKE,UAAA,GAAG,EAAE,MAAK1B,oBALZ;;AAOG,cAAKK,eAAL,EAPH,CAFJ;;;;AAaD,KAjIH;;AAmIUsB,IAAAA,gBAnIV,GAmI6B,YAAM;AAC/B,UAAIC,SAAS,GAAG,IAAhB;;AAEA,yBAA2B,MAAKtB,KAAhC,CAAQE,OAAR,gBAAQA,OAAR,CAAiBD,KAAjB,gBAAiBA,KAAjB;AACA,UAAIC,OAAO,IAAID,KAAX,IAAoB,CAAC,CAACA,KAAK,CAACsB,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,MAAK5B,KAAL,CAAW4B,OAHS;AAI7BC,QAAAA,aAAa,EAAE,MAAK7B,KAAL,CAAW8B,kBAJG;AAK7BC,QAAAA,KAAK,EAAE,MAAK/B,KAAL,CAAWgC,SALW;AAM7BC,QAAAA,WAAW,EAAE,MAAKjC,KAAL,CAAWiC,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,cAAc,EAAE,MAAKU,iBAFvB;AAGE,UAAA,MAAM,EAAE,MAAKtC,KAAL,CAAWC,cAHrB;;AAKG,cAAKC,eAAL,EALH,CADF;;;AASD,KA9JH;;AAgKUoC,IAAAA,iBAhKV,GAgK8B,YAAM;AAChC,YAAKC,QAAL,CAAc;AACZtC,QAAAA,cAAc,EAAE,KADJ,EAAd;;;AAIA,UAAI,MAAKE,KAAL,CAAWqC,WAAf,EAA4B;AAC1B,cAAKrC,KAAL,CAAWqC,WAAX;AACD;AACF,KAxKH;;AA0KUlB,IAAAA,SA1KV,GA0KsB,YAAM;AACxB,aAAO1C,WAAW,+BAAlB;AACD,KA5KH;;AA8KUqC,IAAAA,eA9KV,GA8K4B,YAAuB;AAC/C,aAAO,MAAKvB,QAAL,GAAgBuB,eAAhB,CAAgC,MAAKd,KAAL,CAAWgC,SAA3C,CAAP;AACD,KAhLH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiQUM,IAAAA,iBAjQV,GAiQ8B,YAAM;AAChC,YAAKF,QAAL,CAAc;AACZtC,QAAAA,cAAc,EAAE,IADJ,EAAd;;;AAIA,UAAI,MAAKL,WAAT,EAAsB;AACpB,cAAKA,WAAL,CAAiB8C,KAAjB;AACD;AACF,KAzQH;;AA2QU1B,IAAAA,gBA3QV,GA2Q6B,UAAC2B,IAAD,EAAa;AACtC,UAAI,MAAKxC,KAAL,CAAW6B,aAAf,EAA8B;AAC5B,cAAK7B,KAAL,CAAW6B,aAAX,CAAyBW,IAAzB;AACD;;AAED,UAAI,MAAKzB,cAAT,EAAyB;AACvB,cAAKoB,iBAAL;AACD;AACF,KAnRH;;AAqRUM,IAAAA,QArRV,GAqRqB,UAACC,KAAD,EAA4B;AAC7C,UAAI,MAAK1C,KAAL,CAAWyC,QAAf,EAAyB;AACvB,cAAKzC,KAAL,CAAWyC,QAAX,CAAoBC,KAApB;AACD;AACD,YAAKA,KAAL,GAAaA,KAAb;AACD,KA1RH;;AA4RUlB,IAAAA,aA5RV,GA4R0B;AACtB,sCAAM,SAAS,EAAEvC,MAAM,CAAC0D,cAAP,EAAjB;AACE,4BAAC,OAAD,IAAS,IAAI,EAAC,MAAd,EAAqB,OAAO,EAAC,EAA7B,EAAgC,MAAM,MAAtC,GADF,CADsB,GA5R1B;;;;AAkSUC,IAAAA,YAlSV,GAkSyB,YAAM;AAC3B,yBAAuD,MAAK5C,KAA5D,CAAQE,OAAR,gBAAQA,OAAR,CAAiBD,KAAjB,gBAAiBA,KAAjB,CAAwB4C,SAAxB,gBAAwBA,SAAxB,CAAmCvB,SAAnC,gBAAmCA,SAAnC,CAA8CwB,IAA9C,gBAA8CA,IAA9C;;AAEA,UAAI5C,OAAO,IAAID,KAAX,IAAoB,CAAC,CAACA,KAAK,CAACsB,MAAhC,EAAwC;AACtC,YAAI5C,WAAW,CAAC,MAAKoE,KAAN,CAAf,EAA6B;AAC3B,8BAAO,oBAAC,WAAD,IAAa,IAAI,EAAED,IAAnB,GAAP;AACD;AACD,eAAO,MAAKtB,aAAL,EAAP;AACD;;AAED,UAAIF,SAAS,IAAIuB,SAAjB,EAA4B;AAC1B,YAAIlE,WAAW,CAAC,MAAKoE,KAAN,CAAf,EAA6B;AAC3B,iBAAOzB,SAAS,iBAAI,oBAAC,aAAD,IAAe,IAAI,EAAEwB,IAArB,GAApB;AACD;AACD,4BAAO,8BAAM,SAAS,EAAE7D,MAAM,CAAC+D,gBAAP,EAAjB,IAA6C1B,SAA7C,WAA6CA,SAA7C,gBAA0D,oBAAC,oBAAD,OAA1D,CAAP;AACD;;AAED,aAAO,IAAP;AACD,KApTH;;AAsTUY,IAAAA,cAtTV,GAsT2B,UAACQ,KAAD,EAA4B;AACnD,YAAKjD,WAAL,GAAmBiD,KAAnB;AACD,KAxTH,0DA6BSO,iBA7BT,GA6BE,6BAA2B,2BACzB,IAAI,KAAKjD,KAAL,CAAW0B,SAAX,IAAwB,KAAK1B,KAAL,CAAW4B,OAAvC,EAAgD,CAC9C,KAAK5B,KAAL,CAAW4B,OAAX,GACD,CACD,KAAK5B,KAAL,CAAWG,MAAX,8BAAqB,KAAKT,oBAAL,CAA0BwD,OAA/C,qBAAqB,sBAAmCC,QAAnC,EAArB,EACD,CAlCH,QAwCSC,kBAxCT,GAwCE,4BAA0BC,SAA1B,EAA2D,CACzD,IAAQX,KAAR,GAAyB,IAAzB,CAAQA,KAAR,CAAe1C,KAAf,GAAyB,IAAzB,CAAeA,KAAf,CAEA,IAAIA,KAAK,CAACsD,OAAN,IAAiB,CAACD,SAAS,CAACC,OAA5B,IAAuCZ,KAA3C,EAAkD,CAChDA,KAAK,CAACH,KAAN,GACD,CACF,CA9CH,QAgDSgB,MAhDT,GAgDE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACR,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAa5D,gBAAgB,CAAC4D,KAAD,CAA7B,CACA,oBAAO,oBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACS,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,CAzDH,QA2DSA,UA3DT,GA2DE,sBAAoB,CAClB,mBAA4D,KAAKxD,KAAjE,CAAQyD,YAAR,gBAAQA,YAAR,CAAsBC,YAAtB,gBAAsBA,YAAtB,CAAoCC,WAApC,gBAAoCA,WAApC,CAAiDxD,MAAjD,gBAAiDA,MAAjD,CACA,sBAAkD,KAAKZ,QAAL,EAAlD,CAAQqE,cAAR,mBAAQA,cAAR,CAAwBC,cAAxB,mBAAwBA,cAAxB,CAAwClC,KAAxC,mBAAwCA,KAAxC,CAEA,IAAMmC,QAAQ,GAAG,KAAK/C,cAAtB,CAEA,IAAM2B,KAAK,GAAG,KAAKqB,WAAL,EAAd,CAEA,oBACE,oBAAC,aAAD,EAAmB,KAAK/D,KAAxB,eACE,oBAAC,WAAD,IAAa,cAAc,EAAE4D,cAA7B,EAA6C,cAAc,EAAEC,cAA7D,EAA6E,MAAM,EAAE1D,MAArF,iBACE,8BACE,YAAUjB,sBAAsB,CAAC8E,YADnC,EAEE,KAAK,EAAE,EAAErC,KAAK,EAALA,KAAF,EAFT,EAGE,SAAS,EAAE1C,MAAM,CAACgF,IAAP,EAHb,EAIE,YAAY,EAAER,YAJhB,EAKE,YAAY,EAAEC,YALhB,EAME,WAAW,EAAEC,WANf,EAOE,GAAG,EAAE,KAAKO,WAPZ,IASGxB,KATH,EAUGoB,QAAQ,GAAG,KAAKzC,gBAAL,EAAH,GAA6B,KAAKL,UAAL,EAVxC,CADF,CADF,CADF,CAkBD,CArFH,QAkLU+C,WAlLV,GAkLE,uBAAuC,CACrC,IAAMD,QAAQ,GAAG,KAAK/C,cAAtB,CAEA,mBAoBI,KAAKf,KApBT,CACEmE,KADF,gBACEA,KADF,CAEEC,UAFF,gBAEEA,UAFF,CAGEC,QAHF,gBAGEA,QAHF,CAIEf,OAJF,gBAIEA,OAJF,CAKEgB,KALF,gBAKEA,KALF,CAME1C,OANF,gBAMEA,OANF,CAOES,WAPF,gBAOEA,WAPF,CAQEP,kBARF,gBAQEA,kBARF,CASEyC,YATF,gBASEA,YATF,CAUEC,YAVF,gBAUEA,YAVF,CAWEC,cAXF,gBAWEA,cAXF,CAYExC,WAZF,gBAYEA,WAZF,CAaED,SAbF,gBAaEA,SAbF,CAcED,KAdF,gBAcEA,KAdF,CAeE2C,OAfF,gBAeEA,OAfF,CAgBEC,gBAhBF,gBAgBEA,gBAhBF,CAiBEC,QAjBF,gBAiBEA,QAjBF,CAkBEC,SAlBF,gBAkBEA,SAlBF,CAmBsBC,eAnBtB,gBAmBE,kBAnBF,EAsBA,sBAA8B,KAAKvF,QAAL,EAA9B,CAAQwF,WAAR,mBAAQA,WAAR,CAAqBjC,IAArB,mBAAqBA,IAArB,CAEA,IAAMxB,SAAS,GAAG,KAAKsB,YAAL,EAAlB,CAEA,IAAIU,OAAJ,EAAa,CACX,oBACE,oBAAC,KAAD,IACE,KAAK,EAAEa,KADT,EAEE,UAAU,EAAEC,UAFd,EAGE,QAAQ,EAAEC,QAHZ,EAIE,KAAK,EAAEC,KAJT,EAKE,SAAS,EAAE,KAAKtE,KAAL,CAAWgF,SALxB,EAME,MAAM,EAAElB,QAAQ,GAAGmB,SAAH,GAAe5C,WANjC,EAOE,aAAa,EAAEP,kBAPjB,EAQE,OAAO,EAAEgC,QAAQ,GAAG,KAAKxB,iBAAR,GAA4BiC,YAR/C,EASE,OAAO,EAAET,QAAQ,GAAG,KAAKxB,iBAAR,GAA4BkC,YAT/C,EAUE,QAAQ,EAAEI,QAVZ,EAWE,SAAS,EAAEtD,SAXb,EAYE,KAAK,EAAEU,SAAS,IAAI,EAZtB,EAaE,SAAS,EAAEyC,cAbb,EAcE,WAAW,EAAExC,WAdf,EAeE,KAAK,EAAC,MAfR,EAgBE,IAAI,EAAEa,IAhBR,EAiBE,GAAG,EAAE,KAAKL,QAjBZ,EAkBE,OAAO,EAAEiC,OAlBX,EAmBE,SAAS,EAAEG,SAnBb,EAoBE,oBAAkBC,eApBpB,EAqBE,iBAAe,KAAKlF,MArBtB,GADF,CAyBD,CAED,oBACE,oBAAC,aAAD,IACE,KAAK,EAAEuE,KADT,EAEE,UAAU,EAAEC,UAFd,EAGE,KAAK,EAAEE,KAHT,EAIE,OAAO,EAAE1C,OAJX,EAKE,QAAQ,EAAEgD,QALZ,EAME,SAAS,EAAEtD,SANb,EAOE,QAAQ,EAAE+C,QAPZ,EAQE,OAAO,EAAEK,OARX,EASE,WAAW,EAAEzC,WATf,EAUE,IAAI,EAAEa,IAVR,EAWE,KAAK,EAAC,MAXR,EAYE,GAAG,EAAE6B,gBAZP,EAaE,oBAAkBG,eAbpB,EAcE,iBAAe,KAAKlF,MAdtB,IAgBG9B,aAAa,CAACiE,KAAD,CAAb,IAAwBgD,WAAxB,GAAsCA,WAAW,CAAChD,KAAD,CAAjD,GAA2D,IAhB9D,CADF,CAoBD,CA/PH,uBAAqCnE,KAAK,CAACsH,SAA3C,WACgBC,mBADhB,GACsC,cADtC,UAGgB3F,YAHhB,GAGsD,EAClDmB,UAAU,EAAE,oBAAC6B,IAAD,UAAeA,IAAf,EADsC,EAElDuC,WAAW,EAAE,qBAACvC,IAAD,UAAeA,IAAf,EAFqC,EAGlD1B,eAAe,EAAE,mCAAM,IAAN,EAHiC,EAIlDL,aAAa,EAAE,iCAAMwE,SAAN,EAJmC,EAKlDvE,aAAa,EAAE1B,qBAAqB,CAACoG,OALa,EAMlDxB,cAAc,EAAE,0BAAM,CACpB,IACD,CARiD,EASlDC,cAAc,EAAE,0BAAM,CACpB,IACD,CAXiD,EAYlDf,IAAI,EAAE,OAZ4C,EAalDnB,KAAK,EAAE,GAb2C,EAHtD","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 '../../internal/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';\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> extends Pick<DropdownContainerProps, 'menuPos'>, 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  'aria-describedby'?: AriaAttributes['aria-describedby'];\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  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\ninterface ComboBoxViewState {\n  isMobileOpened: boolean;\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>, ComboBoxViewState> {\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 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    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 } = 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      />\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 } = 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        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.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      'aria-describedby': ariaDescribedby,\n    } = this.props;\n\n    const { renderValue, size } = 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={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          aria-describedby={ariaDescribedby}\n          aria-controls={this.menuId}\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 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, 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

@@ -67,6 +67,9 @@ interface ComboBoxViewState {
     isMobileOpened: boolean;
 }
 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>, ComboBoxViewState> {
     static __KONTUR_REACT_UI__: string;
     static defaultProps: DefaultProps<unknown>;
@@ -77,6 +80,7 @@ export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T
     private isMobileLayout;
     private dropdownContainerRef;
     private theme;
+    private menuId;
     componentDidMount(): void;
     state: ComboBoxViewState;
     componentDidUpdate(prevProps: ComboBoxViewProps<T>): void;

package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js

@@ -86,9 +86,10 @@ export var CustomComboBox = responsiveLayout(_class = rootNode(_class = (_temp =
     };
 
     _this.dispatch = function (action) {
-      var effects;
-      var nextState;
-      ReactDOM.flushSync(function () {
+      var updateState = function updateState(action) {
+        var effects;
+        var nextState;
+
         _this.setState(function (state) {
           var stateAndEffect = _this.reducer(state, _this.props, action);
 
@@ -100,7 +101,17 @@ export var CustomComboBox = responsiveLayout(_class = rootNode(_class = (_temp =
         }, function () {
           effects.forEach(_this.handleEffect);
         });
-      });
+      }; // Auto-batching React@18 creates problems that are fixed with flushSync
+      // https://github.com/skbkontur/retail-ui/pull/3144#issuecomment-1535235366
+
+
+      if (React.version.search('18') === 0) {
+        ReactDOM.flushSync(function () {
+          return updateState(action);
+        });
+      } else {
+        updateState(action);
+      }
     };
 
     _this.handleEffect = function (effect) {
@@ -414,13 +425,9 @@ export var CustomComboBox = responsiveLayout(_class = rootNode(_class = (_temp =
   };
 
   _proto.componentDidMount = function componentDidMount() {
-    var _this4 = this;
-
-    setTimeout(function () {
-      _this4.dispatch({
-        type: 'Mount'
-      });
-    }, 0);
+    this.dispatch({
+      type: 'Mount'
+    });
 
     if (this.props.autoFocus) {
       this.focus();
@@ -428,19 +435,15 @@ export var CustomComboBox = responsiveLayout(_class = rootNode(_class = (_temp =
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var _this5 = this;
-
     if (prevState.editing && !this.state.editing) {
       this.handleBlur();
     }
 
-    setTimeout(function () {
-      _this5.dispatch({
-        type: 'DidUpdate',
-        prevProps: prevProps,
-        prevState: prevState
-      });
-    }, 0);
+    this.dispatch({
+      type: 'DidUpdate',
+      prevProps: prevProps,
+      prevState: prevState
+    });
   }
   /**
   * @public