@skbkontur/react-ui 0.0.0-a5ba2462c5 → 0.0.0-a6f09fbded

package/cjs/components/TooltipMenu/TooltipMenu.md

@@ -0,0 +1,241 @@
+### Базовый пример
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Управление состоянием тултип-меню
+В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием тултип-меню.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
+    return (
+      <>
+        <p>Сейчас тултип-меню { opened ? 'окрыто' : 'закрыто' }</p>
+        <Button onClick={toggleMenu}>Переключить меню</Button>
+        <Button onClick={openMenu}>Открыть меню</Button>
+        <Button onClick={closeMenu}>Закрыть меню</Button>
+      </>
+    )
+  }}>
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Ширина
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной шириной</Button>}
+  menuWidth={350}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Максимальная высота
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  caption={<Button use="primary">Открыть меню с заданной высотой</Button>}
+  menuMaxHeight={150}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Отключенная анимация
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  disableAnimations
+  caption={<Button use="primary">Открыть меню без анимации</Button>}
+  >
+  <MenuHeader>Заголовок меню</MenuHeader>
+  <MenuSeparator />
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Подпись
+В `caption` можно передать любой элемент.
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <UiMenuBars3HIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню всегда всплывающее справа от `caption`
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+  positions={['right top', 'right middle', 'right bottom']}
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню всегда всплывающее сверху от `caption` и выравненное по правому краю `caption`
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+import { LightbulbIcon16Regular } from '@skbkontur/icons/icons/LightbulbIcon/LightbulbIcon16Regular';
+
+<TooltipMenu
+  caption={
+    <span style={{ display: 'inline-block' }} tabIndex="0">
+      <LightbulbIcon16Regular size={32} />
+    </span>
+  }
+  menuWidth="300px"
+  positions={['top right']}
+>
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Тултип-меню c шапкой и подвалом
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
+
+<TooltipMenu
+  header={<p>Это шапка в виде обычного текста</p>}
+  footer={<Button>А это подвал в виде кнопки</Button>}
+  caption={<Button use="primary">Открыть меню</Button>}
+  >
+  <MenuItem>Раз</MenuItem>
+  <MenuItem>Два</MenuItem>
+  <MenuItem>Три</MenuItem>
+</TooltipMenu>;
+```
+
+### Иконки и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
+
+<TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>;
+```
+
+### Иконки и автовыравнивание
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, MenuSeparator, TooltipMenu } from '@skbkontur/react-ui';
+import { PlusIcon16Regular } from '@skbkontur/icons/icons/PlusIcon/PlusIcon16Regular';
+
+<TooltipMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
+  <MenuHeader>MenuHeader</MenuHeader>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem1</MenuItem>
+  <MenuItem icon={<PlusIcon16Regular />}>MenuItem2</MenuItem>
+  <MenuItem>MenuItem3</MenuItem>
+</TooltipMenu>
+```
+
+### Условный рендер элементов тултип-меню
+(с сохранением поведения [MenuItem](#/Components/MenuItem)).
+
+```jsx harmony
+import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
+
+const [showItems, setShowItems] = React.useState(false);
+
+const hiddenItems = [
+  <MenuSeparator />,
+  <MenuItem>А я скрываюсь</MenuItem>,
+  <MenuItem>И я</MenuItem>,
+  <MenuItem>Я с вами</MenuItem>,
+];
+
+
+<Gapped>
+  <Button onClick={() => setShowItems(!showItems)}>
+    {showItems ? 'Спрятать' : 'Показать'} элементы
+  </Button>
+
+  <TooltipMenu caption={<Button use="primary">Открыть меню</Button>}>
+    <MenuItem>Меня видно всегда</MenuItem>
+    <MenuItem>Меня тоже</MenuItem>
+    <MenuItem>Ага, и меня!</MenuItem>
+    {showItems && hiddenItems}
+  </TooltipMenu>
+</Gapped>
+```

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.d.ts

@@ -6,5 +6,6 @@ export interface ClearCrossIconProps extends Pick<AriaAttributes, 'aria-label'>,
     /** Ширина и высота иконки крестика
      * @default small */
     size?: SizeProp;
+    'data-tid'?: string;
 }
 export declare const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps>;

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.js

@@ -11,7 +11,7 @@ var _CommonWrapper = require("../CommonWrapper");
 
 
 var _ClearCrossIcon = require("./ClearCrossIcon.styles");
-var _CrossIcon = require("./CrossIcon");var _excluded = ["size", "style"];
+var _CrossIcon = require("./CrossIcon");var _excluded = ["size", "style", "data-tid"];
 
 
 
@@ -22,17 +22,23 @@ var _CrossIcon = require("./CrossIcon");var _excluded = ["size", "style"];
 
 
 
-var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref) {var _ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,style = _ref.style,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+
+var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref)
+
+
+
+
+{var _ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,style = _ref.style,dataTid = _ref['data-tid'],rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   var theme = _react.default.useContext(_ThemeContext.ThemeContext);
-  var getSizeClassName = function getSizeClassName(size) {
+  var getSizeClassNames = function getSizeClassNames(size) {
     switch (size) {
       case 'large':
-        return _ClearCrossIcon.styles.clearCrossLarge(theme);
+        return { button: _ClearCrossIcon.styles.clearCrossLarge(theme), span: _ClearCrossIcon.styles.relativeWidthLarge(theme) };
       case 'medium':
-        return _ClearCrossIcon.styles.clearCrossMedium(theme);
+        return { button: _ClearCrossIcon.styles.clearCrossMedium(theme), span: _ClearCrossIcon.styles.relativeWidthMedium(theme) };
       case 'small':
       default:
-        return _ClearCrossIcon.styles.clearCrossSmall(theme);
+        return { button: _ClearCrossIcon.styles.clearCrossSmall(theme), span: _ClearCrossIcon.styles.relativeWidthSmall(theme) };
     }
   };
 
@@ -50,14 +56,16 @@ var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref) {var
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
+    _react.default.createElement("span", { className: getSizeClassNames(size).span }, /*#__PURE__*/
     _react.default.createElement("button", (0, _extends2.default)({
+      "data-tid": dataTid,
       type: "button",
       tabIndex: -1,
       className: (0, _Emotion.cx)(
         _ClearCrossIcon.styles.root(theme),
         // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4
         focusedByTab && _ClearCrossIcon.styles.focus(theme),
-        getSizeClassName(size)
+        getSizeClassNames(size).button
       ),
       style: style,
       onFocus: handleFocus,
@@ -66,6 +74,7 @@ var ClearCrossIcon = exports.ClearCrossIcon = function ClearCrossIcon(_ref) {var
 
     _react.default.createElement(_CrossIcon.CrossIcon, { size: size, focusable: true })
     )
+    )
     ));
 
 };

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Emotion","_keyListener","_ThemeContext","_CommonWrapper","_ClearCrossIcon","_CrossIcon","_excluded","ClearCrossIcon","exports","_ref","_ref$size","size","style","rest","_objectWithoutPropertiesLoose2","default","theme","React","useContext","ThemeContext","getSizeClassName","styles","clearCrossLarge","clearCrossMedium","clearCrossSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","createElement","CommonWrapper","_extends2","type","tabIndex","className","cx","root","focus","onFocus","onBlur","CrossIcon","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { styles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({ size = 'small', style, ...rest }) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassName = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return styles.clearCrossLarge(theme);\n      case 'medium':\n        return styles.clearCrossMedium(theme);\n      case 'small':\n      default:\n        return styles.clearCrossSmall(theme);\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        className={cx(\n          styles.root(theme),\n          // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n          focusedByTab && styles.focus(theme),\n          getSizeClassName(size),\n        )}\n        style={style}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <CrossIcon size={size} focusable />\n      </button>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;;AAEA,IAAAK,cAAA,GAAAL,OAAA;;;;AAIA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA,gBAAwC,IAAAQ,SAAA;;;;;;;;;;;AAWjC,IAAMC,cAA4D,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAA/DA,cAA4DA,CAAAE,IAAA,EAA2C,KAAAC,SAAA,GAAAD,IAAA,CAArCE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA,CAAEE,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAKC,IAAI,OAAAC,8BAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAH,SAAA;EAC3G,IAAMU,KAAK,GAAGC,cAAK,CAACC,UAAU,CAACC,0BAAY,CAAC;EAC5C,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIT,IAAe,EAAK;IAC5C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAOU,sBAAM,CAACC,eAAe,CAACN,KAAK,CAAC;MACtC,KAAK,QAAQ;QACX,OAAOK,sBAAM,CAACE,gBAAgB,CAACP,KAAK,CAAC;MACvC,KAAK,OAAO;MACZ;QACE,OAAOK,sBAAM,CAACG,eAAe,CAACR,KAAK,CAAC;IACxC;EACF,CAAC;;EAED,IAAAS,eAAA,GAAwCR,cAAK,CAACS,QAAQ,CAAU,KAAK,CAAC,CAA/DC,YAAY,GAAAF,eAAA,IAAEG,eAAe,GAAAH,eAAA;;EAEpC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB;IACAC,0BAAY,CAACC,qBAAqB,YAAlCD,0BAAY,CAACC,qBAAqB,CAAG,YAAM;MACzC,IAAIC,wBAAW,CAACC,YAAY,EAAE;QAC5BL,eAAe,CAAC,IAAI,CAAC;MACvB;IACF,CAAC,CAAC;EACJ,CAAC;EACD,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAA,UAASN,eAAe,CAAC,KAAK,CAAC;;EAE/C;IACEhC,MAAA,CAAAmB,OAAA,CAAAoB,aAAA,CAAChC,cAAA,CAAAiC,aAAa,EAAKvB,IAAI;IACrBjB,MAAA,CAAAmB,OAAA,CAAAoB,aAAA,eAAAE,SAAA,CAAAtB,OAAA;MACEuB,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAC,CAAE;MACbC,SAAS,EAAE,IAAAC,WAAE;QACXpB,sBAAM,CAACqB,IAAI,CAAC1B,KAAK,CAAC;QAClB;QACAW,YAAY,IAAIN,sBAAM,CAACsB,KAAK,CAAC3B,KAAK,CAAC;QACnCI,gBAAgB,CAACT,IAAI;MACvB,CAAE;MACFC,KAAK,EAAEA,KAAM;MACbgC,OAAO,EAAEf,WAAY;MACrBgB,MAAM,EAAEX,UAAW;IACfrB,IAAI;;IAERjB,MAAA,CAAAmB,OAAA,CAAAoB,aAAA,CAAC9B,UAAA,CAAAyC,SAAS,IAACnC,IAAI,EAAEA,IAAK,EAACoC,SAAS,QAAE;IAC5B;IACK,CAAC;;AAEpB,CAAC;;AAEDxC,cAAc,CAACyC,mBAAmB,GAAG,gBAAgB;AACrDzC,cAAc,CAAC0C,WAAW,GAAG,gBAAgB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Emotion","_keyListener","_ThemeContext","_CommonWrapper","_ClearCrossIcon","_CrossIcon","_excluded","ClearCrossIcon","exports","_ref","_ref$size","size","style","dataTid","rest","_objectWithoutPropertiesLoose2","default","theme","React","useContext","ThemeContext","getSizeClassNames","button","styles","clearCrossLarge","span","relativeWidthLarge","clearCrossMedium","relativeWidthMedium","clearCrossSmall","relativeWidthSmall","_React$useState","useState","focusedByTab","setFocusedByTab","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","createElement","CommonWrapper","className","_extends2","type","tabIndex","cx","root","focus","onFocus","onBlur","CrossIcon","focusable","__KONTUR_REACT_UI__","displayName"],"sources":["ClearCrossIcon.tsx"],"sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../CommonWrapper';\nimport { CommonWrapper } from '../CommonWrapper';\nimport type { SizeProp } from '../../lib/types/props';\nimport type { TokenSize } from '../../components/Token';\n\nimport { styles } from './ClearCrossIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface ClearCrossIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /** Ширина и высота иконки крестика\n   * @default small */\n  size?: SizeProp;\n  'data-tid'?: string;\n}\n\nexport const ClearCrossIcon: React.FunctionComponent<ClearCrossIconProps> = ({\n  size = 'small',\n  style,\n  'data-tid': dataTid,\n  ...rest\n}) => {\n  const theme = React.useContext(ThemeContext);\n  const getSizeClassNames = (size: TokenSize) => {\n    switch (size) {\n      case 'large':\n        return { button: styles.clearCrossLarge(theme), span: styles.relativeWidthLarge(theme) };\n      case 'medium':\n        return { button: styles.clearCrossMedium(theme), span: styles.relativeWidthMedium(theme) };\n      case 'small':\n      default:\n        return { button: styles.clearCrossSmall(theme), span: styles.relativeWidthSmall(theme) };\n    }\n  };\n\n  const [focusedByTab, setFocusedByTab] = React.useState<boolean>(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener so we should check tabPressed in async way\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  return (\n    <CommonWrapper {...rest}>\n      <span className={getSizeClassNames(size).span}>\n        <button\n          data-tid={dataTid}\n          type=\"button\"\n          tabIndex={-1}\n          className={cx(\n            styles.root(theme),\n            // Todo: use &:focus-visible on root instead styles.focus. It supported on Chrome >= 86, Firefox >= 4, Safari >= 15.4\n            focusedByTab && styles.focus(theme),\n            getSizeClassNames(size).button,\n          )}\n          style={style}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          {...rest}\n        >\n          <CrossIcon size={size} focusable />\n        </button>\n      </span>\n    </CommonWrapper>\n  );\n};\n\nClearCrossIcon.__KONTUR_REACT_UI__ = 'ClearCrossIcon';\nClearCrossIcon.displayName = 'ClearCrossIcon';\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;;AAEA,IAAAK,cAAA,GAAAL,OAAA;;;;AAIA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA,gBAAwC,IAAAQ,SAAA;;;;;;;;;;;;AAYjC,IAAMC,cAA4D,GAAAC,OAAA,CAAAD,cAAA,GAAG,SAA/DA,cAA4DA,CAAAE,IAAA;;;;;AAKnE,KAAAC,SAAA,GAAAD,IAAA,CAJJE,IAAI,CAAJA,IAAI,GAAAD,SAAA,cAAG,OAAO,GAAAA,SAAA,CACdE,KAAK,GAAAH,IAAA,CAALG,KAAK,CACOC,OAAO,GAAAJ,IAAA,CAAnB,UAAU,EACPK,IAAI,OAAAC,8BAAA,CAAAC,OAAA,EAAAP,IAAA,EAAAH,SAAA;EAEP,IAAMW,KAAK,GAAGC,cAAK,CAACC,UAAU,CAACC,0BAAY,CAAC;EAC5C,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIV,IAAe,EAAK;IAC7C,QAAQA,IAAI;MACV,KAAK,OAAO;QACV,OAAO,EAAEW,MAAM,EAAEC,sBAAM,CAACC,eAAe,CAACP,KAAK,CAAC,EAAEQ,IAAI,EAAEF,sBAAM,CAACG,kBAAkB,CAACT,KAAK,CAAC,CAAC,CAAC;MAC1F,KAAK,QAAQ;QACX,OAAO,EAAEK,MAAM,EAAEC,sBAAM,CAACI,gBAAgB,CAACV,KAAK,CAAC,EAAEQ,IAAI,EAAEF,sBAAM,CAACK,mBAAmB,CAACX,KAAK,CAAC,CAAC,CAAC;MAC5F,KAAK,OAAO;MACZ;QACE,OAAO,EAAEK,MAAM,EAAEC,sBAAM,CAACM,eAAe,CAACZ,KAAK,CAAC,EAAEQ,IAAI,EAAEF,sBAAM,CAACO,kBAAkB,CAACb,KAAK,CAAC,CAAC,CAAC;IAC5F;EACF,CAAC;;EAED,IAAAc,eAAA,GAAwCb,cAAK,CAACc,QAAQ,CAAU,KAAK,CAAC,CAA/DC,YAAY,GAAAF,eAAA,IAAEG,eAAe,GAAAH,eAAA;;EAEpC,IAAMI,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB;IACAC,0BAAY,CAACC,qBAAqB,YAAlCD,0BAAY,CAACC,qBAAqB,CAAG,YAAM;MACzC,IAAIC,wBAAW,CAACC,YAAY,EAAE;QAC5BL,eAAe,CAAC,IAAI,CAAC;MACvB;IACF,CAAC,CAAC;EACJ,CAAC;EACD,IAAMM,UAAU,GAAG,SAAbA,UAAUA,CAAA,UAASN,eAAe,CAAC,KAAK,CAAC;;EAE/C;IACEtC,MAAA,CAAAoB,OAAA,CAAAyB,aAAA,CAACtC,cAAA,CAAAuC,aAAa,EAAK5B,IAAI;IACrBlB,MAAA,CAAAoB,OAAA,CAAAyB,aAAA,WAAME,SAAS,EAAEtB,iBAAiB,CAACV,IAAI,CAAC,CAACc,IAAK;IAC5C7B,MAAA,CAAAoB,OAAA,CAAAyB,aAAA,eAAAG,SAAA,CAAA5B,OAAA;MACE,YAAUH,OAAQ;MAClBgC,IAAI,EAAC,QAAQ;MACbC,QAAQ,EAAE,CAAC,CAAE;MACbH,SAAS,EAAE,IAAAI,WAAE;QACXxB,sBAAM,CAACyB,IAAI,CAAC/B,KAAK,CAAC;QAClB;QACAgB,YAAY,IAAIV,sBAAM,CAAC0B,KAAK,CAAChC,KAAK,CAAC;QACnCI,iBAAiB,CAACV,IAAI,CAAC,CAACW;MAC1B,CAAE;MACFV,KAAK,EAAEA,KAAM;MACbsC,OAAO,EAAEf,WAAY;MACrBgB,MAAM,EAAEX,UAAW;IACf1B,IAAI;;IAERlB,MAAA,CAAAoB,OAAA,CAAAyB,aAAA,CAACpC,UAAA,CAAA+C,SAAS,IAACzC,IAAI,EAAEA,IAAK,EAAC0C,SAAS,QAAE;IAC5B;IACJ;IACO,CAAC;;AAEpB,CAAC;;AAED9C,cAAc,CAAC+C,mBAAmB,GAAG,gBAAgB;AACrD/C,cAAc,CAACgD,WAAW,GAAG,gBAAgB","ignoreList":[]}

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.d.ts

@@ -5,4 +5,7 @@ export declare const styles: {
     clearCrossSmall(t: Theme): string;
     clearCrossMedium(t: Theme): string;
     clearCrossLarge(t: Theme): string;
+    relativeWidthSmall(t: Theme): string;
+    relativeWidthMedium(t: Theme): string;
+    relativeWidthLarge(t: Theme): string;
 };

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js

@@ -1,20 +1,23 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
-var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "\n      color: ", ";\n      cursor: pointer;\n      transition: color ", " ", ";\n      &:hover {\n        color: ", ";\n      }\n      display: flex;\n      justify-content: ", ";\n      align-items: center;\n      position: absolute;\n      right: -", ";\n      top: -", ";\n    "])),
     (0, _Mixins.resetButton)(),
     t.clearCrossIconColor,
 
     t.transitionDuration, t.transitionTimingFunction,
 
-    t.clearCrossIconHoverColor);
+    t.clearCrossIconHoverColor,
 
 
+    t.clearCrossIconAlign,
 
 
+    t.inputBorderWidth,
+    t.inputBorderWidth);
 
   },
 
@@ -25,27 +28,42 @@ var styles = exports.styles = (0, _Emotion.memoizeStyle)({
   },
 
   clearCrossSmall: function clearCrossSmall(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])),
     t.clearCrossIconWidthSmall,
     t.clearCrossIconHeightSmall,
-    t.clearCrossIconRightMarginSmall,
     t.clearCrossIconBorderRadiusSmall);
 
   },
   clearCrossMedium: function clearCrossMedium(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])),
     t.clearCrossIconWidthMedium,
     t.clearCrossIconHeightMedium,
-    t.clearCrossIconRightMarginMedium,
     t.clearCrossIconBorderRadiusMedium);
 
   },
   clearCrossLarge: function clearCrossLarge(t) {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      margin-right: ", ";\n      border-radius: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    "])),
     t.clearCrossIconWidthLarge,
     t.clearCrossIconHeightLarge,
-    t.clearCrossIconRightMarginLarge,
     t.clearCrossIconBorderRadiusLarge);
 
+  },
+  relativeWidthSmall: function relativeWidthSmall(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      width: ", ";\n    "])),
+
+    t.inputIconSizeSmall);
+
+  },
+  relativeWidthMedium: function relativeWidthMedium(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      width: ", ";\n    "])),
+
+    t.inputIconSizeMedium);
+
+  },
+  relativeWidthLarge: function relativeWidthLarge(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      width: ", ";\n    "])),
+
+    t.inputIconSizeLarge);
+
   }
 });

package/cjs/internal/ClearCrossIcon/ClearCrossIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_Mixins","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","resetButton","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","focus","clearCrossSmall","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconRightMarginSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconRightMarginMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconRightMarginLarge","clearCrossIconBorderRadiusLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { 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      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.clearCrossIconHoverColor};\n    `;\n  },\n\n  clearCrossSmall(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      margin-right: ${t.clearCrossIconRightMarginSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      margin-right: ${t.clearCrossIconRightMarginMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      margin-right: ${t.clearCrossIconRightMarginLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAsD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE/C,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;IACN,IAAAC,mBAAW,EAAC,CAAC;IACNJ,CAAC,CAACK,mBAAmB;;IAEVL,CAAC,CAACM,kBAAkB,EAAIN,CAAC,CAACO,wBAAwB;;IAE3DP,CAAC,CAACQ,wBAAwB;;;;;;EAMzC,CAAC;;EAEDC,KAAK,WAAAA,MAACT,CAAQ,EAAE;IACd,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACQ,wBAAwB;;EAEvC,CAAC;;EAEDE,eAAe,WAAAA,gBAACV,CAAQ,EAAE;IACxB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACW,wBAAwB;IACzBX,CAAC,CAACY,yBAAyB;IACrBZ,CAAC,CAACa,8BAA8B;IAC/Bb,CAAC,CAACc,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAACf,CAAQ,EAAE;IACzB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACgB,yBAAyB;IAC1BhB,CAAC,CAACiB,0BAA0B;IACtBjB,CAAC,CAACkB,+BAA+B;IAChClB,CAAC,CAACmB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACpB,CAAQ,EAAE;IACxB,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACqB,wBAAwB;IACzBrB,CAAC,CAACsB,yBAAyB;IACrBtB,CAAC,CAACuB,8BAA8B;IAC/BvB,CAAC,CAACwB,+BAA+B;;EAEtD;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_Mixins","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","resetButton","clearCrossIconColor","transitionDuration","transitionTimingFunction","clearCrossIconHoverColor","clearCrossIconAlign","inputBorderWidth","focus","clearCrossSmall","clearCrossIconWidthSmall","clearCrossIconHeightSmall","clearCrossIconBorderRadiusSmall","clearCrossMedium","clearCrossIconWidthMedium","clearCrossIconHeightMedium","clearCrossIconBorderRadiusMedium","clearCrossLarge","clearCrossIconWidthLarge","clearCrossIconHeightLarge","clearCrossIconBorderRadiusLarge","relativeWidthSmall","inputIconSizeSmall","relativeWidthMedium","inputIconSizeMedium","relativeWidthLarge","inputIconSizeLarge"],"sources":["ClearCrossIcon.styles.tsx"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { 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      color: ${t.clearCrossIconColor};\n      cursor: pointer;\n      transition: color ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        color: ${t.clearCrossIconHoverColor};\n      }\n      display: flex;\n      justify-content: ${t.clearCrossIconAlign};\n      align-items: center;\n      position: absolute;\n      right: -${t.inputBorderWidth};\n      top: -${t.inputBorderWidth};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.clearCrossIconHoverColor};\n    `;\n  },\n\n  clearCrossSmall(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthSmall};\n      height: ${t.clearCrossIconHeightSmall};\n      border-radius: ${t.clearCrossIconBorderRadiusSmall};\n    `;\n  },\n  clearCrossMedium(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthMedium};\n      height: ${t.clearCrossIconHeightMedium};\n      border-radius: ${t.clearCrossIconBorderRadiusMedium};\n    `;\n  },\n  clearCrossLarge(t: Theme) {\n    return css`\n      width: ${t.clearCrossIconWidthLarge};\n      height: ${t.clearCrossIconHeightLarge};\n      border-radius: ${t.clearCrossIconBorderRadiusLarge};\n    `;\n  },\n  relativeWidthSmall(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeSmall};\n    `;\n  },\n  relativeWidthMedium(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeMedium};\n    `;\n  },\n  relativeWidthLarge(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputIconSizeLarge};\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA;;AAEA,IAAAC,OAAA,GAAAD,OAAA,4BAAsD,IAAAE,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;AAE/C,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAb,eAAA,KAAAA,eAAA,OAAAc,4BAAA,CAAAC,OAAA;IACN,IAAAC,mBAAW,EAAC,CAAC;IACNJ,CAAC,CAACK,mBAAmB;;IAEVL,CAAC,CAACM,kBAAkB,EAAIN,CAAC,CAACO,wBAAwB;;IAE3DP,CAAC,CAACQ,wBAAwB;;;IAGlBR,CAAC,CAACS,mBAAmB;;;IAG9BT,CAAC,CAACU,gBAAgB;IACpBV,CAAC,CAACU,gBAAgB;;EAE9B,CAAC;;EAEDC,KAAK,WAAAA,MAACX,CAAQ,EAAE;IACd,WAAOC,YAAG,EAAAZ,gBAAA,KAAAA,gBAAA,OAAAa,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACQ,wBAAwB;;EAEvC,CAAC;;EAEDI,eAAe,WAAAA,gBAACZ,CAAQ,EAAE;IACxB,WAAOC,YAAG,EAAAX,gBAAA,KAAAA,gBAAA,OAAAY,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACa,wBAAwB;IACzBb,CAAC,CAACc,yBAAyB;IACpBd,CAAC,CAACe,+BAA+B;;EAEtD,CAAC;EACDC,gBAAgB,WAAAA,iBAAChB,CAAQ,EAAE;IACzB,WAAOC,YAAG,EAAAV,gBAAA,KAAAA,gBAAA,OAAAW,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACiB,yBAAyB;IAC1BjB,CAAC,CAACkB,0BAA0B;IACrBlB,CAAC,CAACmB,gCAAgC;;EAEvD,CAAC;EACDC,eAAe,WAAAA,gBAACpB,CAAQ,EAAE;IACxB,WAAOC,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;IACCH,CAAC,CAACqB,wBAAwB;IACzBrB,CAAC,CAACsB,yBAAyB;IACpBtB,CAAC,CAACuB,+BAA+B;;EAEtD,CAAC;EACDC,kBAAkB,WAAAA,mBAACxB,CAAQ,EAAE;IAC3B,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAACyB,kBAAkB;;EAEjC,CAAC;EACDC,mBAAmB,WAAAA,oBAAC1B,CAAQ,EAAE;IAC5B,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAAC2B,mBAAmB;;EAElC,CAAC;EACDC,kBAAkB,WAAAA,mBAAC5B,CAAQ,EAAE;IAC3B,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAAC6B,kBAAkB;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -8,11 +8,11 @@ import type { MenuItemState } from '../../components/MenuItem';
 import type { Nullable } from '../../typings/utility-types';
 import type { CommonProps } from '../CommonWrapper';
 import type { TGetRootNode } from '../../lib/rootNode';
-import type { ComboBoxExtendedItem } from '../../components/ComboBox';
+import type { ComboBoxExtendedItem, ComboBoxViewMode } from '../../components/ComboBox';
 import type { SizeProp } from '../../lib/types/props';
-import type { MaskedInputOnBeforePasteValue, MaskedInputProps } from '../../components/MaskedInput';
+import { InternalTextareaWithLayout } from '../InternalTextareaWithLayout/InternalTextareaWithLayout';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
-interface ComboBoxViewProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps, Partial<Pick<MaskedInputProps, 'mask' | 'maskChar' | 'formatChars'>> {
+interface ComboBoxViewProps<T> extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, CommonProps {
     align?: 'left' | 'center' | 'right';
     autoFocus?: boolean;
     borderless?: boolean;
@@ -48,7 +48,6 @@ interface ComboBoxViewProps<T> extends Pick<AriaAttributes, 'aria-describedby' |
     leftIcon?: InputIconType;
     rightIcon?: InputIconType;
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
-    maskOnBeforePaste?: MaskedInputOnBeforePasteValue;
     onValueChange?: (value: T) => void;
     onClickOutside?: (e: Event) => void;
     onFocus?: () => void;
@@ -71,9 +70,11 @@ interface ComboBoxViewProps<T> extends Pick<AriaAttributes, 'aria-describedby' |
     renderAddButton?: (query?: string) => React.ReactNode;
     repeatRequest?: () => void;
     requestStatus?: ComboBoxRequestStatus;
-    refInput?: (input: Nullable<Input>) => void;
+    refInput?: (input: Nullable<Input | InternalTextareaWithLayout>) => void;
     refMenu?: (menu: Nullable<Menu>) => void;
     refInputLikeText?: (inputLikeText: Nullable<InputLikeText>) => void;
+    viewMode?: ComboBoxViewMode;
+    maxRows?: number;
 }
 type DefaultProps<T> = Required<Pick<ComboBoxViewProps<T>, 'renderItem' | 'renderValue' | 'renderAddButton' | 'repeatRequest' | 'requestStatus' | 'onClickOutside' | 'onFocusOutside' | 'size' | 'width' | 'showClearIcon'>>;
 export declare const ComboBoxViewIds: {
@@ -88,8 +89,8 @@ export declare class ComboBoxView<T> extends React.Component<ComboBoxViewProps<T
     static displayName: string;
     static defaultProps: DefaultProps<unknown>;
     private getProps;
-    private input;
     getRootNode: TGetRootNode;
+    private input;
     private setRootNode;
     private mobileInput;
     private isMobileLayout;

package/cjs/internal/CustomComboBox/ComboBoxView.js

@@ -25,10 +25,7 @@ var _LoadingIcon = require("../icons2022/LoadingIcon");
 var _Popup = require("../Popup");
 var _getMenuPositions = require("../../lib/getMenuPositions");
 var _ZIndex = require("../ZIndex");
-
-var _MaskedInput = require("../../components/MaskedInput");
-var _MaskedInput2 = require("../../components/MaskedInput/MaskedInput.styles");
-var _Emotion = require("../../lib/theming/Emotion");
+var _InternalTextareaWithLayout = require("../InternalTextareaWithLayout/InternalTextareaWithLayout");
 
 var _ArrowDownIcon = require("./ArrowDownIcon");
 var _ComboBoxMenu = require("./ComboBoxMenu");
@@ -433,8 +430,6 @@ ComboBoxView = exports.ComboBoxView = (0, _decorator.responsiveLayout)(_class =
 
 
 
-
-
 
 
 
@@ -483,4 +478,4 @@ ComboBoxView = exports.ComboBoxView = (0, _decorator.responsiveLayout)(_class =
 
     refMobileInput = function (input) {
       _this.mobileInput = input;
-    };return _this;}(0, _inheritsLoose2.default)(ComboBoxView, _React$Component);var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {this.updateAnchorElement();if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.updateAnchorElement = function updateAnchorElement() {var parent = this.getParent();var anchorElement = this.state.anchorElement;if (anchorElement !== parent) {this.setState({ anchorElement: parent });}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;this.updateAnchorElement();if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getComboBoxTheme.getComboBoxTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props4 = this.props,onMouseEnter = _this$props4.onMouseEnter,onMouseLeave = _this$props4.onMouseLeave,onMouseOver = _this$props4.onMouseOver,opened = _this$props4.opened;var _this$getProps3 = this.getProps(),onClickOutside = _this$getProps3.onClickOutside,onFocusOutside = _this$getProps3.onFocusOutside,width = _this$getProps3.width;var isMobile = this.isMobileLayout;var input = this.renderInput();return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { "data-tid": _CustomComboBox2.CustomComboBoxDataTids.comboBoxView, style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, ref: this.setRootNode }, input, isMobile ? this.renderMobileMenu() : this.renderMenu())));};_proto.renderInput = function renderInput() {var isMobile = this.isMobileLayout;var _this$props5 = this.props,id = _this$props5.id,align = _this$props5.align,borderless = _this$props5.borderless,disabled = _this$props5.disabled,editing = _this$props5.editing,error = _this$props5.error,onFocus = _this$props5.onFocus,onInputBlur = _this$props5.onInputBlur,onInputValueChange = _this$props5.onInputValueChange,onInputFocus = _this$props5.onInputFocus,onInputClick = _this$props5.onInputClick,onInputKeyDown = _this$props5.onInputKeyDown,placeholder = _this$props5.placeholder,textValue = _this$props5.textValue,value = _this$props5.value,warning = _this$props5.warning,refInputLikeText = _this$props5.refInputLikeText,leftIcon = _this$props5.leftIcon,inputMode = _this$props5.inputMode,size = _this$props5.size,ariaDescribedby = _this$props5['aria-describedby'],ariaLabel = _this$props5['aria-label'],showClearIcon = _this$props5.showClearIcon,mask = _this$props5.mask,maskChar = _this$props5.maskChar,formatChars = _this$props5.formatChars,maskOnBeforePaste = _this$props5.maskOnBeforePaste;var rightIcon = this.getRightIcon();if (editing) {var inputProps = { id: id, align: align, borderless: borderless, disabled: disabled, error: error, onBlur: isMobile ? undefined : onInputBlur, onValueChange: onInputValueChange, onFocus: onInputFocus, onClick: isMobile ? this.handleMobileFocus : onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: '100%', size: size, warning: warning, inputMode: inputMode, autoComplete: 'off', 'aria-describedby': ariaDescribedby, 'aria-controls': this.menuId, 'aria-label': ariaLabel, showClearIcon: showClearIcon };if (mask) {return /*#__PURE__*/_react.default.createElement(_MaskedInput.MaskedInput, (0, _extends2.default)({ ref: this.refInput }, inputProps, { type: "text", mask: mask, maskChar: maskChar, formatChars: formatChars, onBeforePasteValue: maskOnBeforePaste }));}return /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({ ref: this.refInput, maxLength: this.props.maxLength }, inputProps));}var _this$getProps4 = this.getProps(),renderValue = _this$getProps4.renderValue;return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { id: id, align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: size, width: "100%", ref: refInputLikeText, "aria-describedby": ariaDescribedby, "aria-controls": this.menuId, showClearIcon: showClearIcon, className: (0, _Emotion.cx)(mask && _MaskedInput2.styles.root(this.theme)), onClearCrossClick: this.props.onClearCrossClick }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component), _ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView', _ComboBoxView.displayName = 'ComboBoxView', _ComboBoxView.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250, showClearIcon: 'never' }, _ComboBoxView)) || _class) || _class;
+    };return _this;}(0, _inheritsLoose2.default)(ComboBoxView, _React$Component);var _proto = ComboBoxView.prototype;_proto.componentDidMount = function componentDidMount() {this.updateAnchorElement();if (this.props.autoFocus && this.props.onFocus) {this.props.onFocus();}};_proto.updateAnchorElement = function updateAnchorElement() {var parent = this.getParent();var anchorElement = this.state.anchorElement;if (anchorElement !== parent) {this.setState({ anchorElement: parent });}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var input = this.input,props = this.props;this.updateAnchorElement();if (props.editing && !prevProps.editing && input) {input.focus();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getComboBoxTheme.getComboBoxTheme)(theme, _this2.props.viewMode);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props4 = this.props,onMouseEnter = _this$props4.onMouseEnter,onMouseLeave = _this$props4.onMouseLeave,onMouseOver = _this$props4.onMouseOver,opened = _this$props4.opened;var _this$getProps3 = this.getProps(),onClickOutside = _this$getProps3.onClickOutside,onFocusOutside = _this$getProps3.onFocusOutside,width = _this$getProps3.width;var isMobile = this.isMobileLayout;var input = this.renderInput();return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: onClickOutside, onFocusOutside: onFocusOutside, active: opened }, /*#__PURE__*/_react.default.createElement("span", { "data-tid": _CustomComboBox2.CustomComboBoxDataTids.comboBoxView, style: { width: width }, className: _CustomComboBox.styles.root(), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, ref: this.setRootNode }, input, isMobile ? this.renderMobileMenu() : this.renderMenu())));};_proto.renderInput = function renderInput() {var isMobile = this.isMobileLayout;var _this$props5 = this.props,id = _this$props5.id,align = _this$props5.align,borderless = _this$props5.borderless,disabled = _this$props5.disabled,editing = _this$props5.editing,error = _this$props5.error,onFocus = _this$props5.onFocus,onInputBlur = _this$props5.onInputBlur,onInputValueChange = _this$props5.onInputValueChange,onInputFocus = _this$props5.onInputFocus,onInputClick = _this$props5.onInputClick,onInputKeyDown = _this$props5.onInputKeyDown,placeholder = _this$props5.placeholder,textValue = _this$props5.textValue,value = _this$props5.value,warning = _this$props5.warning,refInputLikeText = _this$props5.refInputLikeText,leftIcon = _this$props5.leftIcon,inputMode = _this$props5.inputMode,size = _this$props5.size,ariaDescribedby = _this$props5['aria-describedby'],ariaLabel = _this$props5['aria-label'],showClearIcon = _this$props5.showClearIcon;var _this$getProps4 = this.getProps(),renderValue = _this$getProps4.renderValue;var rightIcon = this.getRightIcon();var editingStateProps = { id: id, align: align, borderless: borderless, disabled: disabled, error: error, maxLength: this.props.maxLength, onBlur: isMobile ? undefined : onInputBlur, onValueChange: onInputValueChange, onFocus: onInputFocus, onClick: isMobile ? this.handleMobileFocus : onInputClick, leftIcon: leftIcon, rightIcon: rightIcon, value: textValue || '', onKeyDown: onInputKeyDown, placeholder: placeholder, width: '100%', size: size, ref: this.refInput, warning: warning, inputMode: inputMode, autoComplete: 'off', 'aria-describedby': ariaDescribedby, 'aria-controls': this.menuId, 'aria-label': ariaLabel, showClearIcon: showClearIcon };var multilineTextareaProps = { autoResize: true, rows: 1, extraRow: false, maxRows: this.props.maxRows };if (this.props.viewMode === 'multiline') {return /*#__PURE__*/_react.default.createElement(_InternalTextareaWithLayout.InternalTextareaWithLayout, (0, _extends2.default)({}, editingStateProps, multilineTextareaProps));}if (editing) {if (this.props.viewMode === 'multiline-editing') {return /*#__PURE__*/_react.default.createElement(_InternalTextareaWithLayout.InternalTextareaWithLayout, (0, _extends2.default)({}, editingStateProps, multilineTextareaProps));}return /*#__PURE__*/_react.default.createElement(_Input.Input, editingStateProps);}return /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { id: id, align: align, borderless: borderless, error: error, onFocus: onFocus, leftIcon: leftIcon, rightIcon: rightIcon, disabled: disabled, warning: warning, placeholder: placeholder, size: size, width: "100%", ref: refInputLikeText, "aria-describedby": ariaDescribedby, "aria-controls": this.menuId, showClearIcon: showClearIcon, onClearCrossClick: this.props.onClearCrossClick }, (0, _utils.isNonNullable)(value) && renderValue ? renderValue(value) : null);};return ComboBoxView;}(_react.default.Component), _ComboBoxView.__KONTUR_REACT_UI__ = 'ComboBoxView', _ComboBoxView.displayName = 'ComboBoxView', _ComboBoxView.defaultProps = { renderItem: function renderItem(item) {return item;}, renderValue: function renderValue(item) {return item;}, renderAddButton: function renderAddButton() {return null;}, repeatRequest: function repeatRequest() {return undefined;}, requestStatus: _CustomComboBoxTypes.ComboBoxRequestStatus.Unknown, onClickOutside: function onClickOutside() {/**/}, onFocusOutside: function onFocusOutside() {/**/}, size: 'small', width: 250, showClearIcon: 'never' }, _ComboBoxView)) || _class) || _class;