@skbkontur/react-ui 0.0.0-2dd5039746 → 0.0.0-308773c7f8

package/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}
+{"version":3,"sources":["index.ts"],"names":["ColorFunctions","DimensionFunctions"],"mappings":"AAAA,cAAc,2BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,wBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,2BAAd;AACA,cAAc,2BAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,2BAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,oBAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,qBAAd;AACA,cAAc,yBAAd;AACA,cAAc,uBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,4BAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,8BAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,sBAAd;AACA,cAAc,qBAAd;AACA,cAAc,uBAAd;AACA,cAAc,mBAAd;AACA,cAAc,uBAAd;AACA,cAAc,oBAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd;AACA,cAAc,yBAAd;AACA,cAAc,sBAAd;AACA,cAAc,0BAAd;AACA,cAAc,+BAAd;AACA,cAAc,cAAd;AACA,cAAc,4BAAd;AACA,cAAc,4BAAd;AACA,cAAc,mCAAd;AACA,cAAc,gCAAd;AACA,cAAc,yCAAd;AACA,cAAc,sCAAd;AACA,cAAc,gCAAd;AACA,cAAc,oCAAd;AACA,cAAc,wBAAd,C;AACgC,6B,6BAApBA,c;AACwB,iC,iCAAxBC,kB","sourcesContent":["export * from './components/Autocomplete';\nexport * from './components/Button';\nexport * from './components/Calendar';\nexport * from './components/Center';\nexport * from './components/Checkbox';\nexport * from './components/ComboBox';\nexport * from './components/CurrencyInput';\nexport * from './components/CurrencyLabel';\nexport * from './components/DateInput';\nexport * from './components/DatePicker';\nexport * from './components/Dropdown';\nexport * from './components/DropdownMenu';\nexport * from './components/FileUploader';\nexport * from './components/FxInput';\nexport * from './components/Gapped';\nexport * from './components/GlobalLoader';\nexport * from './components/Group';\nexport * from './components/Hint';\nexport * from './components/Input';\nexport * from './components/Kebab';\nexport * from './components/Link';\nexport * from './components/Loader';\nexport * from './components/MenuHeader';\nexport * from './components/MenuItem';\nexport * from './components/MenuSeparator';\nexport * from './components/Modal';\nexport * from './components/Paging';\nexport * from './components/PasswordInput';\nexport * from './components/Radio';\nexport * from './components/RadioGroup';\nexport * from './components/ScrollContainer';\nexport * from './components/Select';\nexport * from './components/SidePage';\nexport * from './components/Spinner';\nexport * from './components/Sticky';\nexport * from './components/Switcher';\nexport * from './components/Tabs';\nexport * from './components/Textarea';\nexport * from './components/Toast';\nexport * from './components/Toggle';\nexport * from './components/Token';\nexport * from './components/TokenInput';\nexport * from './components/Tooltip';\nexport * from './components/TooltipMenu';\nexport * from './components/ResponsiveLayout';\nexport * from './lib/locale';\nexport * from './lib/theming/ThemeContext';\nexport * from './lib/theming/ThemeFactory';\nexport * from './lib/theming/themes/DefaultTheme';\nexport * from './lib/theming/themes/DarkTheme';\nexport * from './lib/theming/themes/DefaultTheme8pxOld';\nexport * from './lib/theming/themes/FlatTheme8pxOld';\nexport * from './lib/theming/themes/Theme2022';\nexport * from './lib/theming/themes/Theme2022Dark';\nexport * from './internal/Popup/types';\nexport * as ColorFunctions from './lib/styles/ColorFunctions';\nexport * as DimensionFunctions from './lib/styles/DimensionFunctions';\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon/CloseButtonIcon.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["side", "size", "color", "colorHover", "tabbable", "style"];
+import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { DEFAULT_ICON_SIZE } from "../../icons2022/iconConstants";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { CommonWrapper } from "../../CommonWrapper";
+import { styles } from "../CloseButtonIcon.styles";
+import { CrossIcon } from "../CrossIcon";
+export var CloseButtonIcon = function CloseButtonIcon(_ref) {
+  var _ref$side = _ref.side,
+      side = _ref$side === void 0 ? DEFAULT_ICON_SIZE : _ref$side,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? DEFAULT_ICON_SIZE : _ref$size,
+      color = _ref.color,
+      colorHover = _ref.colorHover,
+      _ref$tabbable = _ref.tabbable,
+      tabbable = _ref$tabbable === void 0 ? true : _ref$tabbable,
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _theme = React.useContext(ThemeContext);
+
+  var theme = ThemeFactory.create({
+    closeBtnIconColor: color != null ? color : _theme.closeBtnIconColor,
+    closeBtnIconHoverColor: colorHover != null ? colorHover : _theme.closeBtnIconHoverColor
+  }, _theme);
+
+  var _React$useState = React.useState(false),
+      focusedByTab = _React$useState[0],
+      setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    return setFocusedByTab(false);
+  };
+
+  var tabIndex = !tabbable || rest.disabled ? -1 : 0;
+  return /*#__PURE__*/React.createElement(CommonWrapper, rest, /*#__PURE__*/React.createElement("button", _extends({
+    tabIndex: tabIndex,
+    className: cx(styles.root(theme), !rest.disabled && focusedByTab && styles.focus(theme), rest.disabled && styles.rootDisabled(theme)),
+    style: _extends({}, style, {
+      width: side,
+      height: side
+    }),
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }, rest), /*#__PURE__*/React.createElement("span", {
+    className: styles.wrapper()
+  }, /*#__PURE__*/React.createElement(CrossIcon, {
+    size: side < size ? side : size,
+    focusable: tabIndex >= 0
+  }))));
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["CloseButtonIcon.tsx"],"names":["React","cx","keyListener","ThemeContext","DEFAULT_ICON_SIZE","ThemeFactory","CommonWrapper","styles","CrossIcon","CloseButtonIcon","side","size","color","colorHover","tabbable","style","rest","_theme","useContext","theme","create","closeBtnIconColor","closeBtnIconHoverColor","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","tabIndex","disabled","root","focus","rootDisabled","width","height","wrapper"],"mappings":"2OAAA,OAAOA,KAAP,MAAqD,OAArD;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,iBAAT,QAAkC,4BAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,aAAT,QAA2C,kBAA3C;;AAEA,SAASC,MAAT,QAAuB,0BAAvB;AACA,SAASC,SAAT,QAA0B,aAA1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,OAAO,IAAMC,eAA8D,GAAG,SAAjEA,eAAiE;;;;;;;;AAQxE,sBAPJC,IAOI,CAPJA,IAOI,0BAPGN,iBAOH,8BANJO,IAMI,CANJA,IAMI,0BANGP,iBAMH,aALJQ,KAKI,QALJA,KAKI,CAJJC,UAII,QAJJA,UAII,sBAHJC,QAGI,CAHJA,QAGI,8BAHO,IAGP,iBAFJC,KAEI,QAFJA,KAEI,CADDC,IACC;AACJ,MAAMC,MAAM,GAAGjB,KAAK,CAACkB,UAAN,CAAiBf,YAAjB,CAAf;AACA,MAAMgB,KAAK,GAAGd,YAAY,CAACe,MAAb;AACZ;AACEC,IAAAA,iBAAiB,EAAET,KAAF,WAAEA,KAAF,GAAWK,MAAM,CAACI,iBADrC;AAEEC,IAAAA,sBAAsB,EAAET,UAAF,WAAEA,UAAF,GAAgBI,MAAM,CAACK,sBAF/C,EADY;;AAKZL,EAAAA,MALY,CAAd;;AAOA,wBAAwCjB,KAAK,CAACuB,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIzB,WAAW,CAAC0B,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;AASA,MAAMI,UAAU,GAAG,SAAbA,UAAa,WAAMJ,eAAe,CAAC,KAAD,CAArB,EAAnB;;AAEA,MAAMK,QAAQ,GAAG,CAAChB,QAAD,IAAaE,IAAI,CAACe,QAAlB,GAA6B,CAAC,CAA9B,GAAkC,CAAnD;;AAEA;AACE,wBAAC,aAAD,EAAmBf,IAAnB;AACE;AACE,MAAA,QAAQ,EAAEc,QADZ;AAEE,MAAA,SAAS,EAAE7B,EAAE;AACXM,MAAAA,MAAM,CAACyB,IAAP,CAAYb,KAAZ,CADW;AAEX,OAACH,IAAI,CAACe,QAAN,IAAkBP,YAAlB,IAAkCjB,MAAM,CAAC0B,KAAP,CAAad,KAAb,CAFvB;AAGXH,MAAAA,IAAI,CAACe,QAAL,IAAiBxB,MAAM,CAAC2B,YAAP,CAAoBf,KAApB,CAHN,CAFf;;AAOE,MAAA,KAAK,eAAOJ,KAAP,IAAcoB,KAAK,EAAEzB,IAArB,EAA2B0B,MAAM,EAAE1B,IAAnC,GAPP;AAQE,MAAA,OAAO,EAAEgB,WARX;AASE,MAAA,MAAM,EAAEG,UATV;AAUMb,IAAAA,IAVN;;AAYE,kCAAM,SAAS,EAAET,MAAM,CAAC8B,OAAP,EAAjB;AACE,wBAAC,SAAD,IAAW,IAAI,EAAE3B,IAAI,GAAGC,IAAP,GAAcD,IAAd,GAAqBC,IAAtC,EAA4C,SAAS,EAAEmB,QAAQ,IAAI,CAAnE,GADF,CAZF,CADF,CADF;;;;;AAoBD,CApDM","sourcesContent":["import React, { AriaAttributes, CSSProperties } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { DEFAULT_ICON_SIZE } from '../icons2022/iconConstants';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../CommonWrapper';\n\nimport { styles } from './CloseButtonIcon.styles';\nimport { CrossIcon } from './CrossIcon';\n\nexport interface CloseButtonIconProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    CommonProps {\n  /**\n   * Ширина и высота иконки крестика\n   *\n   * @default 16\n   */\n  size?: number;\n  /**\n   * Ширина и высота всей кнопки\n   *\n   * @default 16\n   */\n  side?: number;\n  /**\n   * Цвет иконки\n   *\n   * Переменная темы: `closeBtnIconColor`\n   */\n  color?: CSSProperties['color'];\n  /**\n   * Цвет иконки при наведении мышью и при фокусе\n   *\n   * Переменная темы: `closeBtnIconHoverColor`\n   */\n  colorHover?: CSSProperties['color'];\n  /**\n   * Возможность сфокусироваться на кнопке клавишей TAB\n   *\n   * @default true\n   * */\n  tabbable?: boolean;\n}\n\nexport const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps> = ({\n  side = DEFAULT_ICON_SIZE,\n  size = DEFAULT_ICON_SIZE,\n  color,\n  colorHover,\n  tabbable = true,\n  style,\n  ...rest\n}) => {\n  const _theme = React.useContext(ThemeContext);\n  const theme = ThemeFactory.create(\n    {\n      closeBtnIconColor: color ?? _theme.closeBtnIconColor,\n      closeBtnIconHoverColor: colorHover ?? _theme.closeBtnIconHoverColor,\n    },\n    _theme,\n  );\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n  const handleBlur = () => setFocusedByTab(false);\n\n  const tabIndex = !tabbable || rest.disabled ? -1 : 0;\n\n  return (\n    <CommonWrapper {...rest}>\n      <button\n        tabIndex={tabIndex}\n        className={cx(\n          styles.root(theme),\n          !rest.disabled && focusedByTab && styles.focus(theme),\n          rest.disabled && styles.rootDisabled(theme),\n        )}\n        style={{ ...style, width: side, height: side }}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...rest}\n      >\n        <span className={styles.wrapper()}>\n          <CrossIcon size={side < size ? side : size} focusable={tabIndex >= 0} />\n        </span>\n      </button>\n    </CommonWrapper>\n  );\n};\n"]}

package/internal/CloseButtonIcon/CloseButtonIcon/package.json

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

package/internal/CloseButtonIcon/CloseButtonIcon.d.ts

@@ -0,0 +1,35 @@
+import React, { AriaAttributes, CSSProperties } from 'react';
+import { CommonProps } from '../CommonWrapper';
+export interface CloseButtonIconProps extends Pick<AriaAttributes, 'aria-label'>, React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /**
+     * Ширина и высота иконки крестика
+     *
+     * @default 16
+     */
+    size?: number;
+    /**
+     * Ширина и высота всей кнопки
+     *
+     * @default 16
+     */
+    side?: number;
+    /**
+     * Цвет иконки
+     *
+     * Переменная темы: `closeBtnIconColor`
+     */
+    color?: CSSProperties['color'];
+    /**
+     * Цвет иконки при наведении мышью и при фокусе
+     *
+     * Переменная темы: `closeBtnIconHoverColor`
+     */
+    colorHover?: CSSProperties['color'];
+    /**
+     * Возможность сфокусироваться на кнопке клавишей TAB
+     *
+     * @default true
+     * */
+    tabbable?: boolean;
+}
+export declare const CloseButtonIcon: React.FunctionComponent<CloseButtonIconProps>;

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

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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      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);
+  },
+  focus: function focus(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.closeBtnIconFocusShadow);
+  },
+  wrapper: function wrapper() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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    "])));
+  }
+});

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

@@ -0,0 +1 @@
+{"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/CloseButtonIcon/CloseButtonIcon.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/CloseButtonIcon/CloseButtonIcon.styles.js",
+  "module": "CloseButtonIcon.styles",
+  "types": "../CloseButtonIcon.styles.d.ts",
+  "sideEffects": false
+}

package/{components/DatePicker/Picker.styles.d.ts → internal/CloseButtonIcon/CloseButtonIcon.styles.d.ts}

@@ -1,5 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
-    todayWrapper(t: Theme): string;
+    rootDisabled(t: Theme): string;
+    focus(t: Theme): string;
+    wrapper(): string;
 };

package/internal/CloseButtonIcon/CrossIcon/CrossIcon.js

@@ -0,0 +1,23 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { iconSizer } from "../../icons2022/iconSizer";
+import { XIcon20Light } from "../../icons2022/XIcon/XIcon20Light";
+import { XIcon24Regular } from "../../icons2022/XIcon/XIcon24Regular";
+export var CrossIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(XIcon20Light, {
+      size: 16,
+      align: "none"
+    });
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(XIcon20Light, {
+      align: "none"
+    });
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(XIcon24Regular, {
+      align: "none"
+    });
+  }
+}, 'CrossIcon');

package/internal/CloseButtonIcon/CrossIcon/CrossIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CrossIcon.tsx"],"names":["React","iconSizer","XIcon20Light","XIcon24Regular","CrossIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,SAAT,QAA0B,wBAA1B;AACA,SAASC,YAAT,QAA6B,iCAA7B;AACA,SAASC,cAAT,QAA+B,mCAA/B;;AAEA,OAAO,IAAMC,SAAS,GAAGH,SAAS;AAChC;AACEI,EAAAA,KAAK,EAAE,sCAAM,oBAAC,YAAD,IAAc,IAAI,EAAE,EAApB,EAAwB,KAAK,EAAC,MAA9B,GAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,YAAD,IAAc,KAAK,EAAC,MAApB,GAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,cAAD,IAAgB,KAAK,EAAC,MAAtB,GAAN,EAHT,EADgC;;AAMhC,WANgC,CAA3B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { iconSizer } from '../icons2022/iconSizer';\nimport { XIcon20Light } from '../icons2022/XIcon/XIcon20Light';\nimport { XIcon24Regular } from '../icons2022/XIcon/XIcon24Regular';\n\nexport const CrossIcon = iconSizer(\n  {\n    small: () => <XIcon20Light size={16} align=\"none\" />,\n    medium: () => <XIcon20Light align=\"none\" />,\n    large: () => <XIcon24Regular align=\"none\" />,\n  },\n  'CrossIcon',\n);\n"]}

package/internal/CloseButtonIcon/CrossIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/CloseButtonIcon/CrossIcon.js",
+  "module": "CrossIcon",
+  "types": "../CrossIcon.d.ts",
+  "sideEffects": false
+}

package/internal/CloseButtonIcon/CrossIcon.d.ts

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

package/internal/CustomComboBox/ArrowDownIcon/ArrowDownIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ArrowCDownIcon16Regular } from "../../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular";
+import { ArrowCDownIcon20Regular } from "../../icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular";
+import { ArrowCDownIcon24Regular } from "../../icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular";
+import { iconSizer } from "../../icons2022/iconSizer";
+export var ArrowDownIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon16Regular, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon20Regular, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowCDownIcon24Regular, null);
+  }
+}, 'ArrowDownIcon');

package/internal/CustomComboBox/ArrowDownIcon/ArrowDownIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowDownIcon.tsx"],"names":["React","ArrowCDownIcon16Regular","ArrowCDownIcon20Regular","ArrowCDownIcon24Regular","iconSizer","ArrowDownIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,uBAAT,QAAwC,qDAAxC;AACA,SAASC,uBAAT,QAAwC,qDAAxC;AACA,SAASC,uBAAT,QAAwC,qDAAxC;AACA,SAASC,SAAT,QAA0B,wBAA1B;;AAEA,OAAO,IAAMC,aAAa,GAAGD,SAAS;AACpC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,uBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,OAAN,EAHT,EADoC;;AAMpC,eANoC,CAA/B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowCDownIcon16Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular';\nimport { ArrowCDownIcon20Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon20Regular';\nimport { ArrowCDownIcon24Regular } from '../icons2022/ArrowCDownIcon/ArrowCDownIcon24Regular';\nimport { iconSizer } from '../icons2022/iconSizer';\n\nexport const ArrowDownIcon = iconSizer(\n  {\n    small: () => <ArrowCDownIcon16Regular />,\n    medium: () => <ArrowCDownIcon20Regular />,\n    large: () => <ArrowCDownIcon24Regular />,\n  },\n  'ArrowDownIcon',\n);\n"]}

package/internal/CustomComboBox/ArrowDownIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/CustomComboBox/ArrowDownIcon.js",
+  "module": "ArrowDownIcon",
+  "types": "../ArrowDownIcon.d.ts",
+  "sideEffects": false
+}

package/internal/CustomComboBox/ArrowDownIcon.d.ts

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

package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js

@@ -41,7 +41,7 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
           onValueChange = _this$props.onValueChange,
           itemWrapper = _this$props.itemWrapper;
 
-      if (isFunction(item) || /*#__PURE__*/React.isValidElement(item)) {
+      if (!isSimpleItem(item)) {
         var element = isFunction(item) ? item() : item;
         var props = Object.assign({
           key: index,
@@ -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
@@ -170,7 +174,8 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
 
     if (countItems && renderTotalCount && totalCount && countItems < totalCount) {
       total = /*#__PURE__*/React.createElement(MenuMessage, {
-        key: "total"
+        key: "total",
+        as: "div"
       }, /*#__PURE__*/React.createElement("div", {
         style: {
           fontSize: 12
@@ -179,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,
@@ -194,4 +200,8 @@ export var ComboBoxMenu = (_dec = locale('ComboBox', CustomComboBoxLocaleHelper)
     return undefined;
   },
   requestStatus: ComboBoxRequestStatus.Unknown
-}, _temp)) || _class);
+}, _temp)) || _class);
+
+function isSimpleItem(item) {
+  return !isFunction(item) && ! /*#__PURE__*/React.isValidElement(item);
+}

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\">\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","isSimpleItem","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","isValidElement"],"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';\nimport { ComboBoxExtendedItem } from '../../components/ComboBox';\n\nimport { ComboBoxRequestStatus } from './CustomComboBoxTypes';\nimport { ComboBoxLocale, CustomComboBoxLocaleHelper } from './locale';\n\nexport interface ComboBoxMenuProps<T> {\n  opened?: boolean;\n  items?: Nullable<Array<ComboBoxExtendedItem<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: ComboBoxExtendedItem<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\n    if (!isSimpleItem<T>(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\nfunction isSimpleItem<T>(item: ComboBoxExtendedItem<T>): item is T {\n  return !isFunction(item) && !React.isValidElement(item);\n}\n"]}

package/internal/CustomComboBox/ComboBoxMenu.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import { Menu } from '../Menu';
 import { MenuItemState } from '../../components/MenuItem';
 import { Nullable } from '../../typings/utility-types';
+import { ComboBoxExtendedItem } from '../../components/ComboBox';
 import { ComboBoxRequestStatus } from './CustomComboBoxTypes';
 export interface ComboBoxMenuProps<T> {
     opened?: boolean;
-    items?: Nullable<T[]>;
+    items?: Nullable<Array<ComboBoxExtendedItem<T>>>;
     totalCount?: number;
     loading?: boolean;
     maxMenuHeight?: number | string;
@@ -13,13 +14,14 @@ export interface ComboBoxMenuProps<T> {
     renderNotFound?: () => React.ReactNode;
     renderTotalCount?: (found: number, total: number) => React.ReactNode;
     renderItem: (item: T, state: MenuItemState) => React.ReactNode;
-    itemWrapper?: (item?: T) => React.ComponentType<unknown>;
+    itemWrapper?: (item: T) => React.ComponentType<unknown>;
     onValueChange: (value: T) => any;
     renderAddButton?: () => React.ReactNode;
     caption?: React.ReactNode;
     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";
@@ -17,10 +17,18 @@ import { MobilePopup } from "../../MobilePopup";
 import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
 import { rootNode, getRootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { LoadingIcon } from "../../icons2022/LoadingIcon";
+import { ArrowDownIcon } from "../ArrowDownIcon";
 import { ComboBoxMenu } from "../ComboBoxMenu";
 import { ComboBoxRequestStatus } from "../CustomComboBoxTypes";
 import { styles } from "../CustomComboBox.styles";
 import { CustomComboBoxDataTids } from "../CustomComboBox";
+import { getComboBoxTheme } from "../getComboBoxTheme";
+export var ComboBoxViewIds = {
+  menu: 'ComboBoxView__menu'
+};
 export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ComboBoxView, _React$Component);
 
@@ -35,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
     };
@@ -57,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,
@@ -84,7 +94,6 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         menuPos: menuPos,
         align: menuAlign,
         getParent: _this.getParent,
-        offsetY: 1,
         disablePortal: _this.props.disablePortal,
         ref: _this.dropdownContainerRef
       }, _this.getComboBoxMenu());
@@ -179,13 +188,26 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
           loading = _this$props4.loading,
           items = _this$props4.items,
           drawArrow = _this$props4.drawArrow,
-          rightIcon = _this$props4.rightIcon;
+          rightIcon = _this$props4.rightIcon,
+          size = _this$props4.size;
 
       if (loading && items && !!items.length) {
+        if (isTheme2022(_this.theme)) {
+          return /*#__PURE__*/React.createElement(LoadingIcon, {
+            size: size
+          });
+        }
+
         return _this.renderSpinner();
       }
 
       if (rightIcon || drawArrow) {
+        if (isTheme2022(_this.theme)) {
+          return rightIcon || /*#__PURE__*/React.createElement(ArrowDownIcon, {
+            size: size
+          });
+        }
+
         return /*#__PURE__*/React.createElement("span", {
           className: styles.rightIconWrapper()
         }, rightIcon != null ? rightIcon : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null));
@@ -223,6 +245,17 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
   };
 
   _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = getComboBoxTheme(theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain());
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
     var _this$props5 = this.props,
         onMouseEnter = _this$props5.onMouseEnter,
         onMouseLeave = _this$props5.onMouseLeave,
@@ -274,7 +307,8 @@ export var ComboBoxView = responsiveLayout(_class = rootNode(_class = (_temp = _
         refInputLikeText = _this$props6.refInputLikeText,
         leftIcon = _this$props6.leftIcon,
         inputMode = _this$props6.inputMode,
-        ariaDescribedby = _this$props6['aria-describedby'];
+        ariaDescribedby = _this$props6['aria-describedby'],
+        ariaLabel = _this$props6['aria-label'];
 
     var _this$getProps3 = this.getProps(),
         renderValue = _this$getProps3.renderValue,
@@ -303,7 +337,9 @@ 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,
+        "aria-label": ariaLabel
       });
     }
 
@@ -320,7 +356,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);
   };