@skbkontur/react-ui 0.0.0-a25347e958 → 0.0.0-a2ba201dd3

package/components/MaskedInput/MaskedInput/MaskedInput.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "placeholder"];
+import React, { useImperativeHandle, useRef, useState } from 'react';
+import { Input } from "../../Input";
+import { MaskedInputElement } from "../../../internal/MaskedInputElement";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+/**
+ * Интерфейс пропсов наследуется от `Input`.
+ * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.
+ */
+
+export var MaskedInput = forwardRefAndName('MaskedInput', function MaskedInput(props, ref) {
+  var mask = props.mask,
+      maskChar = props.maskChar,
+      formatChars = props.formatChars,
+      alwaysShowMask = props.alwaysShowMask,
+      placeholder = props.placeholder,
+      inputProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useState = useState(false),
+      focused = _useState[0],
+      setFocused = _useState[1];
+
+  var showPlaceholder = !(alwaysShowMask || focused);
+  var innerRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return innerRef.current;
+  });
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: innerRef
+  }, inputProps, {
+    placeholder: showPlaceholder ? placeholder : undefined,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    element: /*#__PURE__*/React.createElement(MaskedInputElement, {
+      mask: mask,
+      maskChar: maskChar,
+      formatChars: formatChars,
+      alwaysShowMask: alwaysShowMask,
+      onUnexpectedInput: handleUnexpectedInput
+    })
+  }));
+
+  function handleUnexpectedInput(value) {
+    if (props.onUnexpectedInput) {
+      props.onUnexpectedInput(value);
+    } else if (innerRef.current) {
+      innerRef.current.blink();
+    }
+  }
+
+  function handleFocus(e) {
+    setFocused(true);
+    props.onFocus && props.onFocus(e);
+  }
+
+  function handleBlur(e) {
+    setFocused(false);
+    props.onBlur && props.onBlur(e);
+  }
+});

package/components/MaskedInput/MaskedInput/MaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MaskedInput.tsx"],"names":["React","useImperativeHandle","useRef","useState","Input","MaskedInputElement","forwardRefAndName","MaskedInput","props","ref","mask","maskChar","formatChars","alwaysShowMask","placeholder","inputProps","focused","setFocused","showPlaceholder","innerRef","current","undefined","handleFocus","handleBlur","handleUnexpectedInput","value","onUnexpectedInput","blink","e","onFocus","onBlur"],"mappings":"mPAAA,OAAOA,KAAP,IAAqBC,mBAArB,EAA0CC,MAA1C,EAAkDC,QAAlD,QAAkE,OAAlE;;AAEA,SAASC,KAAT,QAA6C,UAA7C;;AAEA,SAASC,kBAAT,QAAmC,mCAAnC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAGD,iBAAiB;AAC1C,aAD0C;AAE1C,SAASC,WAAT,CAAqBC,KAArB,EAA8CC,GAA9C,EAAsE;AACpE,MAAQC,IAAR,GAAoFF,KAApF,CAAQE,IAAR,CAAcC,QAAd,GAAoFH,KAApF,CAAcG,QAAd,CAAwBC,WAAxB,GAAoFJ,KAApF,CAAwBI,WAAxB,CAAqCC,cAArC,GAAoFL,KAApF,CAAqCK,cAArC,CAAqDC,WAArD,GAAoFN,KAApF,CAAqDM,WAArD,CAAqEC,UAArE,iCAAoFP,KAApF;AACA,kBAA8BL,QAAQ,CAAC,KAAD,CAAtC,CAAOa,OAAP,gBAAgBC,UAAhB;AACA,MAAMC,eAAe,GAAG,EAAEL,cAAc,IAAIG,OAApB,CAAxB;AACA,MAAMG,QAAQ,GAAGjB,MAAM,CAAQ,IAAR,CAAvB;;AAEAD,EAAAA,mBAAmB,CAACQ,GAAD,EAAM,oBAAMU,QAAQ,CAACC,OAAf,EAAN,CAAnB;;AAEA;AACE,wBAAC,KAAD;AACE,MAAA,GAAG,EAAED,QADP;AAEMJ,IAAAA,UAFN;AAGE,MAAA,WAAW,EAAEG,eAAe,GAAGJ,WAAH,GAAiBO,SAH/C;AAIE,MAAA,OAAO,EAAEC,WAJX;AAKE,MAAA,MAAM,EAAEC,UALV;AAME,MAAA,OAAO;AACL,0BAAC,kBAAD;AACE,QAAA,IAAI,EAAEb,IADR;AAEE,QAAA,QAAQ,EAAEC,QAFZ;AAGE,QAAA,WAAW,EAAEC,WAHf;AAIE,QAAA,cAAc,EAAEC,cAJlB;AAKE,QAAA,iBAAiB,EAAEW,qBALrB,GAPJ,IADF;;;;;;AAmBA,WAASA,qBAAT,CAA+BC,KAA/B,EAA8C;AAC5C,QAAIjB,KAAK,CAACkB,iBAAV,EAA6B;AAC3BlB,MAAAA,KAAK,CAACkB,iBAAN,CAAwBD,KAAxB;AACD,KAFD,MAEO,IAAIN,QAAQ,CAACC,OAAb,EAAsB;AAC3BD,MAAAA,QAAQ,CAACC,OAAT,CAAiBO,KAAjB;AACD;AACF;;AAED,WAASL,WAAT,CAAqBM,CAArB,EAA4D;AAC1DX,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAT,IAAAA,KAAK,CAACqB,OAAN,IAAiBrB,KAAK,CAACqB,OAAN,CAAcD,CAAd,CAAjB;AACD;;AAED,WAASL,UAAT,CAAoBK,CAApB,EAA2D;AACzDX,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAT,IAAAA,KAAK,CAACsB,MAAN,IAAgBtB,KAAK,CAACsB,MAAN,CAAaF,CAAb,CAAhB;AACD;AACF,CA9CyC,CAArC","sourcesContent":["import React, { Ref, useImperativeHandle, useRef, useState } from 'react';\n\nimport { Input, InputProps, InputType } from '../Input';\nimport { Nullable } from '../../typings/utility-types';\nimport { MaskedInputElement } from '../../internal/MaskedInputElement';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nexport interface MaskedProps {\n  /** Паттерн маски */\n  mask: string;\n  /** Символ маски */\n  maskChar?: Nullable<string>;\n  /**\n   * Словарь символов-регулярок для маски\n   * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n   */\n  formatChars?: Record<string, string>;\n  /** Показывать символы маски */\n  alwaysShowMask?: boolean;\n}\n\nexport type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;\n\nexport interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'element'> {\n  type?: MaskInputType;\n}\n\n/**\n * Интерфейс пропсов наследуется от `Input`.\n * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.\n */\nexport const MaskedInput = forwardRefAndName(\n  'MaskedInput',\n  function MaskedInput(props: MaskedInputProps, ref: Ref<Input | null>) {\n    const { mask, maskChar, formatChars, alwaysShowMask, placeholder, ...inputProps } = props;\n    const [focused, setFocused] = useState(false);\n    const showPlaceholder = !(alwaysShowMask || focused);\n    const innerRef = useRef<Input>(null);\n\n    useImperativeHandle(ref, () => innerRef.current);\n\n    return (\n      <Input\n        ref={innerRef}\n        {...inputProps}\n        placeholder={showPlaceholder ? placeholder : undefined}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        element={\n          <MaskedInputElement\n            mask={mask}\n            maskChar={maskChar}\n            formatChars={formatChars}\n            alwaysShowMask={alwaysShowMask}\n            onUnexpectedInput={handleUnexpectedInput}\n          />\n        }\n      />\n    );\n\n    function handleUnexpectedInput(value: string) {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      } else if (innerRef.current) {\n        innerRef.current.blink();\n      }\n    }\n\n    function handleFocus(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n      props.onFocus && props.onFocus(e);\n    }\n\n    function handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n      setFocused(false);\n      props.onBlur && props.onBlur(e);\n    }\n  },\n);\n"]}

package/{internal → components}/MaskedInput/MaskedInput/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "../../../cjs/internal/MaskedInput/MaskedInput.js",
+  "main": "../../../cjs/components/MaskedInput/MaskedInput.js",
   "module": "MaskedInput",
   "types": "../MaskedInput.d.ts",
   "sideEffects": false

package/components/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,24 @@
+import { Input, InputProps, InputType } from '../Input';
+import { Nullable } from '../../typings/utility-types';
+export interface MaskedProps {
+    /** Паттерн маски */
+    mask: string;
+    /** Символ маски */
+    maskChar?: Nullable<string>;
+    /**
+     * Словарь символов-регулярок для маски
+     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
+     */
+    formatChars?: Record<string, string>;
+    /** Показывать символы маски */
+    alwaysShowMask?: boolean;
+}
+export declare type MaskInputType = Exclude<InputType, 'number' | 'date' | 'time' | 'password'>;
+export interface MaskedInputProps extends MaskedProps, Omit<InputProps, 'mask' | 'maxLength' | 'type' | 'element'> {
+    type?: MaskInputType;
+}
+/**
+ * Интерфейс пропсов наследуется от `Input`.
+ * Из пропсов `Input` исключены некоторые не применимые к полю с маской пропсы и сокращен список возможных значений в type.
+ */
+export declare const MaskedInput: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<Input, MaskedInputProps> & Record<never, never>;

package/components/MaskedInput/MaskedInput.md

@@ -0,0 +1,21 @@
+```jsx harmony
+<MaskedInput mask={'+7 999 999-99-99'} placeholder={"Номер телефона"} />
+```
+
+Можно изменить символ значения с маской
+```jsx harmony
+<MaskedInput mask={'9999 9999 9999 9999'} maskChar={'X'} placeholder={"Номер карты"}  />
+```
+
+**alwaysShowMask** позволяет показывать маску всегда. Placeholder в этом случае игнорируется.
+```jsx harmony
+<MaskedInput mask={'9999 9999 9999 9999'} alwaysShowMask maskChar={'X'} placeholder={"Номер карты"} />
+```
+
+Для форматирования по маске используется пакет [iMask](https://imask.js.org/). Используйте особенности пакета принимая всю ответственность на себя.
+
+`MaskedInput` гарантирует поддержку работы 3 пропов:  **mask**, **maskChar**, **alwaysShowMask** с заданными по-умолчанию **formatChars**.
+
+Остальное поведение может меняться в мажорных релизах.
+
+Например, iMask [позволяет добавлять](https://imask.js.org/guide.html#masked-pattern) в значения без форматирования константы с помощью фигурных скобок. Использовать этот вариант **НЕ РЕКОМЕНДУЕТСЯ**.

package/components/MaskedInput/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './MaskedInput';\n"]}

package/components/MaskedInput/index/package.json

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

package/components/MaskedInput/package.json

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

package/components/MenuFooter/MenuFooter/MenuFooter.js

@@ -5,6 +5,10 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { styles } from "../MenuFooter.styles";
+/**
+ * @deprecated use SizeProp
+ */
+
 export var MenuFooterDataTids = {
   root: 'MenuFooter__root'
 };
@@ -63,6 +67,7 @@ function MenuFooter(_ref) {
 }
 
 MenuFooter.__KONTUR_REACT_UI__ = 'MenuFooter';
+MenuFooter.displayName = 'MenuFooter';
 MenuFooter.__MENU_FOOTER__ = true;
 export { MenuFooter };
 export var isMenuFooter = function isMenuFooter(child) {

package/components/MenuFooter/MenuFooter/MenuFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuFooter.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuFooterDataTids","root","MenuFooter","_enableIconPadding","children","size","rest","theme","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getWithLeftPaddingSizeClassName","withLeftPaddingSmall","withLeftPaddingMedium","__KONTUR_REACT_UI__","__MENU_FOOTER__","isMenuFooter","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"+JAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;;;;;AAWA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwG,0CAAlFC,kBAAkF,CAAlFA,kBAAkF,sCAA7D,KAA6D,yBAAtDC,QAAsD,QAAtDA,QAAsD,kBAA5CC,IAA4C,CAA5CA,IAA4C,0BAArC,OAAqC,aAAzBC,IAAyB;AACtG,MAAMC,KAAK,GAAGZ,UAAU,CAACC,YAAD,CAAxB;;AAEA,WAASY,oBAAT,GAAgC;AAC9B,YAAQH,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACU,SAAP,CAAiBF,KAAjB,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACW,UAAP,CAAkBH,KAAlB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACY,SAAP,CAAiBJ,KAAjB,CAAP,CAPJ;;AASD;AACD,WAASK,+BAAT,GAA2C;AACzC,YAAQP,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACc,oBAAP,CAA4BN,KAA5B,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACe,qBAAP,CAA6BP,KAA7B,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACc,oBAAP,CAA4BN,KAA5B,CAAP,CAPJ;;AASD;;AAED;AACE,wBAAC,aAAD,EAAmBD,IAAnB;AACE;AACE,kBAAUN,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAEH,EAAE,CAACU,oBAAoB,EAArB;AACVT,MAAAA,MAAM,CAACE,IAAP,CAAYM,KAAZ,CADU,IACW,IADX;AAEVK,MAAAA,+BAA+B,EAFrB,IAE0BT,kBAF1B,OAFf;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACa,mBAAX,GAAiC,YAAjC;AACAb,UAAU,CAACc,eAAX,GAA6B,IAA7B;;AAEA,SAASd,UAAT;;AAEA,OAAO,IAAMe,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAxB,KAAK,CAACyB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuFooter.styles';\n\nexport type MenuFooterSize = 'small' | 'medium' | 'large';\n\nexport interface MenuFooterProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n  /** Размер */\n  size?: MenuFooterSize;\n}\n\nexport const MenuFooterDataTids = {\n  root: 'MenuFooter__root',\n} as const;\n\n/**\n * Футер меню.\n *\n * _Примечание_: `футер меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuFooter`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuFooter({ _enableIconPadding = false, children, size = 'small', ...rest }: MenuFooterProps) {\n  const theme = useContext(ThemeContext);\n\n  function getRootSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.rootLarge(theme);\n      case 'medium':\n        return styles.rootMedium(theme);\n      case 'small':\n      default:\n        return styles.rootSmall(theme);\n    }\n  }\n  function getWithLeftPaddingSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.withLeftPaddingSmall(theme);\n      case 'medium':\n        return styles.withLeftPaddingMedium(theme);\n      case 'small':\n      default:\n        return styles.withLeftPaddingSmall(theme);\n    }\n  }\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        data-tid={MenuFooterDataTids.root}\n        className={cx(getRootSizeClassName(), {\n          [styles.root(theme)]: true,\n          [getWithLeftPaddingSizeClassName()]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuFooter.__KONTUR_REACT_UI__ = 'MenuFooter';\nMenuFooter.__MENU_FOOTER__ = true;\n\nexport { MenuFooter };\n\nexport const isMenuFooter = (child: React.ReactNode): child is React.ReactElement<MenuFooterProps> => {\n  return React.isValidElement<MenuFooterProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_FOOTER__')\n    : false;\n};\n"]}
+{"version":3,"sources":["MenuFooter.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuFooterDataTids","root","MenuFooter","_enableIconPadding","children","size","rest","theme","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getWithLeftPaddingSizeClassName","withLeftPaddingSmall","withLeftPaddingMedium","__KONTUR_REACT_UI__","displayName","__MENU_FOOTER__","isMenuFooter","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"+JAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA;;;;;;;;;;AAUA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwG,0CAAlFC,kBAAkF,CAAlFA,kBAAkF,sCAA7D,KAA6D,yBAAtDC,QAAsD,QAAtDA,QAAsD,kBAA5CC,IAA4C,CAA5CA,IAA4C,0BAArC,OAAqC,aAAzBC,IAAyB;AACtG,MAAMC,KAAK,GAAGZ,UAAU,CAACC,YAAD,CAAxB;;AAEA,WAASY,oBAAT,GAAgC;AAC9B,YAAQH,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACU,SAAP,CAAiBF,KAAjB,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACW,UAAP,CAAkBH,KAAlB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACY,SAAP,CAAiBJ,KAAjB,CAAP,CAPJ;;AASD;AACD,WAASK,+BAAT,GAA2C;AACzC,YAAQP,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACc,oBAAP,CAA4BN,KAA5B,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACe,qBAAP,CAA6BP,KAA7B,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACc,oBAAP,CAA4BN,KAA5B,CAAP,CAPJ;;AASD;;AAED;AACE,wBAAC,aAAD,EAAmBD,IAAnB;AACE;AACE,kBAAUN,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAEH,EAAE,CAACU,oBAAoB,EAArB;AACVT,MAAAA,MAAM,CAACE,IAAP,CAAYM,KAAZ,CADU,IACW,IADX;AAEVK,MAAAA,+BAA+B,EAFrB,IAE0BT,kBAF1B,OAFf;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACa,mBAAX,GAAiC,YAAjC;AACAb,UAAU,CAACc,WAAX,GAAyB,YAAzB;AACAd,UAAU,CAACe,eAAX,GAA6B,IAA7B;;AAEA,SAASf,UAAT;;AAEA,OAAO,IAAMgB,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAzB,KAAK,CAAC0B,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './MenuFooter.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type MenuFooterSize = SizeProp;\n\nexport interface MenuFooterProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n  /** Размер */\n  size?: SizeProp;\n}\n\nexport const MenuFooterDataTids = {\n  root: 'MenuFooter__root',\n} as const;\n\n/**\n * Футер меню.\n *\n * _Примечание_: `футер меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuFooter`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuFooter({ _enableIconPadding = false, children, size = 'small', ...rest }: MenuFooterProps) {\n  const theme = useContext(ThemeContext);\n\n  function getRootSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.rootLarge(theme);\n      case 'medium':\n        return styles.rootMedium(theme);\n      case 'small':\n      default:\n        return styles.rootSmall(theme);\n    }\n  }\n  function getWithLeftPaddingSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.withLeftPaddingSmall(theme);\n      case 'medium':\n        return styles.withLeftPaddingMedium(theme);\n      case 'small':\n      default:\n        return styles.withLeftPaddingSmall(theme);\n    }\n  }\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        data-tid={MenuFooterDataTids.root}\n        className={cx(getRootSizeClassName(), {\n          [styles.root(theme)]: true,\n          [getWithLeftPaddingSizeClassName()]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuFooter.__KONTUR_REACT_UI__ = 'MenuFooter';\nMenuFooter.displayName = 'MenuFooter';\nMenuFooter.__MENU_FOOTER__ = true;\n\nexport { MenuFooter };\n\nexport const isMenuFooter = (child: React.ReactNode): child is React.ReactElement<MenuFooterProps> => {\n  return React.isValidElement<MenuFooterProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_FOOTER__')\n    : false;\n};\n"]}

package/components/MenuFooter/MenuFooter.d.ts

@@ -1,11 +1,15 @@
 import React, { ReactNode } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type MenuFooterSize = 'small' | 'medium' | 'large';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type MenuFooterSize = SizeProp;
 export interface MenuFooterProps extends CommonProps {
     _enableIconPadding?: boolean;
     children: ReactNode;
     /** Размер */
-    size?: MenuFooterSize;
+    size?: SizeProp;
 }
 export declare const MenuFooterDataTids: {
     readonly root: "MenuFooter__root";
@@ -20,6 +24,7 @@ export declare const MenuFooterDataTids: {
 declare function MenuFooter({ _enableIconPadding, children, size, ...rest }: MenuFooterProps): JSX.Element;
 declare namespace MenuFooter {
     var __KONTUR_REACT_UI__: string;
+    var displayName: string;
     var __MENU_FOOTER__: boolean;
 }
 export { MenuFooter };

package/components/MenuHeader/MenuHeader/MenuHeader.js

@@ -4,7 +4,12 @@ import React, { useContext } from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { MenuContext } from "../../../internal/Menu/MenuContext";
 import { styles } from "../MenuHeader.styles";
+/**
+ * @deprecated use SizeProp
+ */
+
 export var MenuHeaderDataTids = {
   root: 'MenuHeader__root'
 };
@@ -27,6 +32,7 @@ function MenuHeader(_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var theme = useContext(ThemeContext);
+  var menuContext = useContext(MenuContext);
 
   function getRootSizeClassName() {
     switch (size) {
@@ -58,11 +64,12 @@ function MenuHeader(_ref) {
 
   return /*#__PURE__*/React.createElement(CommonWrapper, rest, /*#__PURE__*/React.createElement("div", {
     "data-tid": MenuHeaderDataTids.root,
-    className: cx(getRootSizeClassName(), (_cx = {}, _cx[styles.root(theme)] = true, _cx[getWithLeftPaddingSizeClassName()] = _enableIconPadding, _cx))
+    className: cx(getRootSizeClassName(), (_cx = {}, _cx[styles.root(theme)] = true, _cx[getWithLeftPaddingSizeClassName()] = menuContext.enableIconPadding || _enableIconPadding, _cx))
   }, children));
 }
 
 MenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';
+MenuHeader.displayName = 'MenuHeader';
 MenuHeader.__MENU_HEADER__ = true;
 export { MenuHeader };
 export var isMenuHeader = function isMenuHeader(child) {

package/components/MenuHeader/MenuHeader/MenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuHeaderDataTids","root","MenuHeader","_enableIconPadding","children","size","rest","theme","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getWithLeftPaddingSizeClassName","withLeftPaddingSmall","withLeftPaddingMedium","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"+JAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;;;;;AAWA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwG,0CAAlFC,kBAAkF,CAAlFA,kBAAkF,sCAA7D,KAA6D,yBAAtDC,QAAsD,QAAtDA,QAAsD,kBAA5CC,IAA4C,CAA5CA,IAA4C,0BAArC,OAAqC,aAAzBC,IAAyB;AACtG,MAAMC,KAAK,GAAGZ,UAAU,CAACC,YAAD,CAAxB;;AAEA,WAASY,oBAAT,GAAgC;AAC9B,YAAQH,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACU,SAAP,CAAiBF,KAAjB,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACW,UAAP,CAAkBH,KAAlB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACY,SAAP,CAAiBJ,KAAjB,CAAP,CAPJ;;AASD;AACD,WAASK,+BAAT,GAA2C;AACzC,YAAQP,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACc,oBAAP,CAA4BN,KAA5B,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACe,qBAAP,CAA6BP,KAA7B,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACc,oBAAP,CAA4BN,KAA5B,CAAP,CAPJ;;AASD;;AAED;AACE,wBAAC,aAAD,EAAmBD,IAAnB;AACE;AACE,kBAAUN,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAEH,EAAE,CAACU,oBAAoB,EAArB;AACVT,MAAAA,MAAM,CAACE,IAAP,CAAYM,KAAZ,CADU,IACW,IADX;AAEVK,MAAAA,+BAA+B,EAFrB,IAE0BT,kBAF1B,OAFf;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACa,mBAAX,GAAiC,YAAjC;AACAb,UAAU,CAACc,eAAX,GAA6B,IAA7B;;AAEA,SAASd,UAAT;;AAEA,OAAO,IAAMe,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAxB,KAAK,CAACyB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuHeader.styles';\n\nexport type MenuHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n  /** Размер */\n  size?: MenuHeaderSize;\n}\n\nexport const MenuHeaderDataTids = {\n  root: 'MenuHeader__root',\n} as const;\n\n/**\n * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.\n *\n * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuHeader`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuHeader({ _enableIconPadding = false, children, size = 'small', ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n\n  function getRootSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.rootLarge(theme);\n      case 'medium':\n        return styles.rootMedium(theme);\n      case 'small':\n      default:\n        return styles.rootSmall(theme);\n    }\n  }\n  function getWithLeftPaddingSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.withLeftPaddingSmall(theme);\n      case 'medium':\n        return styles.withLeftPaddingMedium(theme);\n      case 'small':\n      default:\n        return styles.withLeftPaddingSmall(theme);\n    }\n  }\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        data-tid={MenuHeaderDataTids.root}\n        className={cx(getRootSizeClassName(), {\n          [styles.root(theme)]: true,\n          [getWithLeftPaddingSizeClassName()]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\nMenuHeader.__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n  return React.isValidElement<MenuHeaderProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n    : false;\n};\n"]}
+{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","MenuContext","styles","MenuHeaderDataTids","root","MenuHeader","_enableIconPadding","children","size","rest","theme","menuContext","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getWithLeftPaddingSizeClassName","withLeftPaddingSmall","withLeftPaddingMedium","enableIconPadding","__KONTUR_REACT_UI__","displayName","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"+JAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,WAAT,QAA4B,iCAA5B;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;AAEA;AACA;AACA;;;;;;;;;;AAUA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwG,0CAAlFC,kBAAkF,CAAlFA,kBAAkF,sCAA7D,KAA6D,yBAAtDC,QAAsD,QAAtDA,QAAsD,kBAA5CC,IAA4C,CAA5CA,IAA4C,0BAArC,OAAqC,aAAzBC,IAAyB;AACtG,MAAMC,KAAK,GAAGb,UAAU,CAACC,YAAD,CAAxB;AACA,MAAMa,WAAW,GAAGd,UAAU,CAACI,WAAD,CAA9B;;AAEA,WAASW,oBAAT,GAAgC;AAC9B,YAAQJ,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACW,SAAP,CAAiBH,KAAjB,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACY,UAAP,CAAkBJ,KAAlB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACa,SAAP,CAAiBL,KAAjB,CAAP,CAPJ;;AASD;AACD,WAASM,+BAAT,GAA2C;AACzC,YAAQR,IAAR;AACE,WAAK,OAAL;AACE,eAAON,MAAM,CAACe,oBAAP,CAA4BP,KAA5B,CAAP;AACF,WAAK,QAAL;AACE,eAAOR,MAAM,CAACgB,qBAAP,CAA6BR,KAA7B,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOR,MAAM,CAACe,oBAAP,CAA4BP,KAA5B,CAAP,CAPJ;;AASD;;AAED;AACE,wBAAC,aAAD,EAAmBD,IAAnB;AACE;AACE,kBAAUN,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAEJ,EAAE,CAACY,oBAAoB,EAArB;AACVV,MAAAA,MAAM,CAACE,IAAP,CAAYM,KAAZ,CADU,IACW,IADX;AAEVM,MAAAA,+BAA+B,EAFrB,IAE0BL,WAAW,CAACQ,iBAAZ,IAAiCb,kBAF3D,OAFf;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACe,mBAAX,GAAiC,YAAjC;AACAf,UAAU,CAACgB,WAAX,GAAyB,YAAzB;AACAhB,UAAU,CAACiB,eAAX,GAA6B,IAA7B;;AAEA,SAASjB,UAAT;;AAEA,OAAO,IAAMkB,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAA5B,KAAK,CAAC6B,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { SizeProp } from '../../lib/types/props';\nimport { MenuContext } from '../../internal/Menu/MenuContext';\n\nimport { styles } from './MenuHeader.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type MenuHeaderSize = SizeProp;\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n  /** Размер */\n  size?: SizeProp;\n}\n\nexport const MenuHeaderDataTids = {\n  root: 'MenuHeader__root',\n} as const;\n\n/**\n * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.\n *\n * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuHeader`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuHeader({ _enableIconPadding = false, children, size = 'small', ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n  const menuContext = useContext(MenuContext);\n\n  function getRootSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.rootLarge(theme);\n      case 'medium':\n        return styles.rootMedium(theme);\n      case 'small':\n      default:\n        return styles.rootSmall(theme);\n    }\n  }\n  function getWithLeftPaddingSizeClassName() {\n    switch (size) {\n      case 'large':\n        return styles.withLeftPaddingSmall(theme);\n      case 'medium':\n        return styles.withLeftPaddingMedium(theme);\n      case 'small':\n      default:\n        return styles.withLeftPaddingSmall(theme);\n    }\n  }\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        data-tid={MenuHeaderDataTids.root}\n        className={cx(getRootSizeClassName(), {\n          [styles.root(theme)]: true,\n          [getWithLeftPaddingSizeClassName()]: menuContext.enableIconPadding || _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\nMenuHeader.displayName = 'MenuHeader';\nMenuHeader.__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n  return React.isValidElement<MenuHeaderProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n    : false;\n};\n"]}

package/components/MenuHeader/MenuHeader.d.ts

@@ -1,11 +1,15 @@
 import React, { ReactNode } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type MenuHeaderSize = 'small' | 'medium' | 'large';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type MenuHeaderSize = SizeProp;
 export interface MenuHeaderProps extends CommonProps {
     _enableIconPadding?: boolean;
     children: ReactNode;
     /** Размер */
-    size?: MenuHeaderSize;
+    size?: SizeProp;
 }
 export declare const MenuHeaderDataTids: {
     readonly root: "MenuHeader__root";
@@ -20,6 +24,7 @@ export declare const MenuHeaderDataTids: {
 declare function MenuHeader({ _enableIconPadding, children, size, ...rest }: MenuHeaderProps): JSX.Element;
 declare namespace MenuHeader {
     var __KONTUR_REACT_UI__: string;
+    var displayName: string;
     var __MENU_HEADER__: boolean;
 }
 export { MenuHeader };

package/components/MenuItem/MenuItem/MenuItem.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel"];
+var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel", "isNotSelectable"];
 
 var _class, _class2, _temp; // TODO: Enable this rule in functional components.
 
@@ -10,14 +12,23 @@ var _class, _class2, _temp; // TODO: Enable this rule in functional components.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
 import { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { MenuContext } from "../../../internal/Menu/MenuContext";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/getVisualStateDataAttributes";
 import { styles } from "../MenuItem.styles";
+/**
+ * @deprecated use SizeProp
+ */
+
 export var MenuItemDataTids = {
   root: 'MenuItem__root',
+  content: 'MenuItem__content',
   comment: 'MenuItem__comment'
 };
 /**
@@ -39,10 +50,44 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      iconOffsetTop: 0
+      iconOffsetTop: 0,
+      highlighted: false
     };
     _this.mouseEntered = false;
     _this.rootRef = null;
+    _this.contentRef = /*#__PURE__*/React.createRef();
+
+    _this.highlight = function () {
+      _this.setState({
+        highlighted: true
+      });
+    };
+
+    _this.unhighlight = function () {
+      _this.setState({
+        highlighted: false
+      });
+    };
+
+    _this.select = function (event) {
+      _this.handleClick(event);
+    };
+
+    _this.isEnabled = function () {
+      return !_this.props.disabled;
+    };
+
+    _this.navigate = function () {
+      if (!_this.props.href) {
+        return;
+      }
+
+      if (_this.props.target) {
+        window.open(_this.props.href, _this.props.target);
+      } else {
+        location.href = _this.props.href;
+      }
+    };
 
     _this.renderMain = function (props) {
       var _cx2, _cx3, _cx4;
@@ -62,9 +107,9 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           disabled = props.disabled,
           _props$rel = props.rel,
           rel = _props$rel === void 0 ? _this.props.href && isExternalLink(_this.props.href) ? 'noopener noreferrer' : _this.props.rel : _props$rel,
+          isNotSelectable = props.isNotSelectable,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-      var hover = state === 'hover' && !disabled;
       var iconElement = null;
 
       if (icon) {
@@ -78,7 +123,7 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
         }, icon);
       }
 
-      var className = cx((_cx2 = {}, _cx2[styles.root(_this.theme)] = true, _cx2[_this.getRootSizeClassName()] = true, _cx2[styles.rootMobile(_this.theme)] = isMobile, _cx2[styles.loose()] = !!loose, _cx2[styles.hover(_this.theme)] = hover, _cx2[styles.selected(_this.theme)] = state === 'selected', _cx2[styles.link(_this.theme)] = !!link, _cx2[_this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding, _cx2[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx2));
+      var className = cx((_cx2 = {}, _cx2[styles.root(_this.theme)] = true, _cx2[_this.getRootSizeClassName()] = true, _cx2[styles.rootMobile(_this.theme)] = isMobile, _cx2[styles.loose()] = !!loose, _cx2[styles.hover(_this.theme)] = _this.isHover, _cx2[styles.selected(_this.theme)] = _this.isSelected, _cx2[styles.link(_this.theme)] = !!link, _cx2[_this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding, _cx2[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx2));
       var children = _this.props.children;
       var content = children;
 
@@ -93,34 +138,51 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
         "data-tid": MenuItemDataTids.root
       }, rest, {
         disabled: disabled,
-        state: state,
+        state: _this.activeState,
         onMouseOver: _this.handleMouseEnterFix,
         onMouseLeave: _this.handleMouseLeave,
+        onClick: _this.handleClick,
         className: className,
         href: href,
         rel: href ? rel : undefined,
         tabIndex: -1
       }), iconElement, /*#__PURE__*/React.createElement("span", {
-        className: cx((_cx3 = {}, _cx3[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon), _cx3))
+        className: cx((_cx3 = {}, _cx3[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon), _cx3)),
+        ref: _this.contentRef,
+        "data-tid": MenuItemDataTids.content
       }, content), _this.props.comment && /*#__PURE__*/React.createElement("div", {
         "data-tid": MenuItemDataTids.comment,
-        className: cx((_cx4 = {}, _cx4[styles.comment(_this.theme)] = true, _cx4[styles.commentHover(_this.theme)] = hover, _cx4))
+        className: cx((_cx4 = {}, _cx4[styles.comment(_this.theme)] = true, _cx4[styles.commentHover(_this.theme)] = _this.isHover, _cx4))
       }, comment));
     };
 
     _this.handleMouseEnterFix = function (e) {
-      if (!_this.mouseEntered && _this.props.onMouseEnter) {
-        _this.mouseEntered = true;
+      if (!_this.mouseEntered) {
+        var _this$context$navigat;
 
-        _this.props.onMouseEnter(e);
+        _this.mouseEntered = true;
+        _this.props.onMouseEnter == null ? void 0 : _this.props.onMouseEnter(e);
+        _this.menuItemsAtAnyLevel && !_this.props.isNotSelectable && ((_this$context$navigat = _this.context.navigation) == null ? void 0 : _this$context$navigat.highlight(_assertThisInitialized(_this)));
       }
     };
 
     _this.handleMouseLeave = function (e) {
+      var _this$context$navigat2;
+
       _this.mouseEntered = false;
+      _this.props.onMouseLeave == null ? void 0 : _this.props.onMouseLeave(e);
+      _this.menuItemsAtAnyLevel && !_this.props.isNotSelectable && ((_this$context$navigat2 = _this.context.navigation) == null ? void 0 : _this$context$navigat2.unhighlight());
+    };
+
+    _this.handleClick = function (e) {
+      if (_this.props.isNotSelectable) {
+        return;
+      }
+
+      _this.props.onClick == null ? void 0 : _this.props.onClick(e);
 
-      if (_this.props.onMouseLeave) {
-        _this.props.onMouseLeave(e);
+      if (_this.menuItemsAtAnyLevel) {
+        _this.context.onItemClick == null ? void 0 : _this.context.onItemClick(e);
       }
     };
 
@@ -149,6 +211,14 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       return 'button';
     };
 
+    _this.hasIconAmongItems = function () {
+      var _this$context$navigat3;
+
+      return Boolean((_this$context$navigat3 = _this.context.navigation) == null ? void 0 : _this$context$navigat3.items.some(function (item) {
+        return item.props.icon;
+      }));
+    };
+
     return _this;
   }
 
@@ -157,20 +227,68 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this2.setRootNode
-      }, _this2.props), _this2.renderMain);
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.menuItemsAtAnyLevel = getFullReactUIFlagsContext(flags).menuItemsAtAnyLevel;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, getVisualStateDataAttributes({
+          hover: _this2.isHover,
+          selected: _this2.isSelected
+        }), _this2.props), _this2.renderMain);
+      });
     });
   };
 
   _proto.componentDidMount = function componentDidMount() {
-    if (this.rootRef) {
+    if (this.rootRef && isBrowser(globalObject)) {
       this.setState({
-        iconOffsetTop: window.getComputedStyle(this.rootRef).getPropertyValue('padding-top')
+        iconOffsetTop: globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top')
       });
     }
+
+    if (this.contentRef.current && this.menuItemsAtAnyLevel && !this.props.isNotSelectable) {
+      var _this$context$navigat4;
+
+      (_this$context$navigat4 = this.context.navigation) == null ? void 0 : _this$context$navigat4.add(this.contentRef.current, this);
+    }
+
+    if (this.props.icon && this.menuItemsAtAnyLevel) {
+      var _this$context$setEnab, _this$context;
+
+      (_this$context$setEnab = (_this$context = this.context).setEnableIconPadding) == null ? void 0 : _this$context$setEnab.call(_this$context, true);
+    }
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.contentRef.current && this.menuItemsAtAnyLevel) {
+      var _this$context$navigat5, _this$context$setEnab2, _this$context2;
+
+      !this.props.isNotSelectable && ((_this$context$navigat5 = this.context.navigation) == null ? void 0 : _this$context$navigat5.remove(this.contentRef.current));
+      (_this$context$setEnab2 = (_this$context2 = this.context).setEnableIconPadding) == null ? void 0 : _this$context$setEnab2.call(_this$context2, this.hasIconAmongItems());
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (prevProps.icon !== this.props.icon) {
+      var _this$context$setEnab3, _this$context3;
+
+      (_this$context$setEnab3 = (_this$context3 = this.context).setEnableIconPadding) == null ? void 0 : _this$context$setEnab3.call(_this$context3, !!this.props.icon || this.hasIconAmongItems());
+    }
+
+    if (this.contentRef.current && this.menuItemsAtAnyLevel && prevProps.isNotSelectable !== this.props.isNotSelectable) {
+      if (this.props.isNotSelectable) {
+        var _this$context$navigat6;
+
+        this.unhighlight();
+        (_this$context$navigat6 = this.context.navigation) == null ? void 0 : _this$context$navigat6.remove(this.contentRef.current);
+      } else {
+        var _this$context$navigat7;
+
+        (_this$context$navigat7 = this.context.navigation) == null ? void 0 : _this$context$navigat7.add(this.contentRef.current, this);
+      }
+    }
   };
 
   _proto.getRootSizeClassName = function getRootSizeClassName() {
@@ -215,8 +333,27 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
     }
   };
 
+  _createClass(MenuItem, [{
+    key: "activeState",
+    get: function get() {
+      return this.state.highlighted ? 'hover' : this.props.state;
+    }
+  }, {
+    key: "isHover",
+    get: function get() {
+      return (this.state.highlighted || this.props.state === 'hover') && !this.props.disabled;
+    }
+  }, {
+    key: "isSelected",
+    get: function get() {
+      return this.props.state === 'selected' && !this.state.highlighted;
+    } // https://github.com/facebook/react/issues/10109
+    // Mouseenter event not triggered when cursor moves from disabled button
+
+  }]);
+
   return MenuItem;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.displayName = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = {
   comment: PropTypes.node,
   disabled: PropTypes.bool,
   href: PropTypes.string,
@@ -226,5 +363,5 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   target: PropTypes.string,
   onClick: PropTypes.func,
   size: PropTypes.string
-}, _temp)) || _class;
+}, _class2.contextType = MenuContext, _temp)) || _class;
 export var isMenuItem = isReactUIComponent('MenuItem');