@skbkontur/react-ui 0.0.0-5188be76c1 → 0.0.0-53ccdcbfcc

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MaskedInput.tsx"],"names":["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":"uWAAA;;AAEA;;AAEA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;AACA;AACA;AACO,IAAMA,WAAW,GAAG;AACzB,aADyB;AAEzB,SAASA,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,+CAAoFP,KAApF;AACA,kBAA8B,qBAAS,KAAT,CAA9B,CAAOQ,OAAP,gBAAgBC,UAAhB;AACA,MAAMC,eAAe,GAAG,EAAEL,cAAc,IAAIG,OAApB,CAAxB;AACA,MAAMG,QAAQ,GAAG,mBAAc,IAAd,CAAjB;;AAEA,kCAAoBV,GAApB,EAAyB,oBAAMU,QAAQ,CAACC,OAAf,EAAzB;;AAEA;AACE,iCAAC,YAAD;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,mCAAC,sCAAD;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,CA9CwB,CAApB,C","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/cjs/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/cjs/components/MaskedInput/index.js.map

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

package/cjs/components/MenuHeader/MenuHeader.js

@@ -4,6 +4,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 
+var _MenuContext = require("../../internal/Menu/MenuContext");
 
 var _MenuHeader = require("./MenuHeader.styles");var _excluded = ["_enableIconPadding", "children", "size"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
@@ -32,6 +33,7 @@ var MenuHeaderDataTids = {
  */exports.MenuHeaderDataTids = MenuHeaderDataTids;
 function MenuHeader(_ref) {var _cx;var _ref$_enableIconPaddi = _ref._enableIconPadding,_enableIconPadding = _ref$_enableIconPaddi === void 0 ? false : _ref$_enableIconPaddi,children = _ref.children,_ref$size = _ref.size,size = _ref$size === void 0 ? 'small' : _ref$size,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var menuContext = (0, _react.useContext)(_MenuContext.MenuContext);
 
   function getRootSizeClassName() {
     switch (size) {
@@ -62,7 +64,7 @@ function MenuHeader(_ref) {var _cx;var _ref$_enableIconPaddi = _ref._enableIconP
       "data-tid": MenuHeaderDataTids.root,
       className: (0, _Emotion.cx)(getRootSizeClassName(), (_cx = {}, _cx[
       _MenuHeader.styles.root(theme)] = true, _cx[
-      getWithLeftPaddingSizeClassName()] = _enableIconPadding, _cx)) },
+      getWithLeftPaddingSizeClassName()] = menuContext.enableIconPadding || _enableIconPadding, _cx)) },
 
 
     children)));

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["MenuHeaderDataTids","root","MenuHeader","_enableIconPadding","children","size","rest","theme","ThemeContext","getRootSizeClassName","styles","rootLarge","rootMedium","rootSmall","getWithLeftPaddingSizeClassName","withLeftPaddingSmall","withLeftPaddingMedium","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"mVAAA;;AAEA;AACA;AACA;;;AAGA,iD;;;;;;;;;;;;;;AAcO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA,G;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,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,WAASC,oBAAT,GAAgC;AAC9B,YAAQJ,IAAR;AACE,WAAK,OAAL;AACE,eAAOK,mBAAOC,SAAP,CAAiBJ,KAAjB,CAAP;AACF,WAAK,QAAL;AACE,eAAOG,mBAAOE,UAAP,CAAkBL,KAAlB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOG,mBAAOG,SAAP,CAAiBN,KAAjB,CAAP,CAPJ;;AASD;AACD,WAASO,+BAAT,GAA2C;AACzC,YAAQT,IAAR;AACE,WAAK,OAAL;AACE,eAAOK,mBAAOK,oBAAP,CAA4BR,KAA5B,CAAP;AACF,WAAK,QAAL;AACE,eAAOG,mBAAOM,qBAAP,CAA6BT,KAA7B,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOG,mBAAOK,oBAAP,CAA4BR,KAA5B,CAAP,CAPJ;;AASD;;AAED;AACE,iCAAC,4BAAD,EAAmBD,IAAnB;AACE;AACE,kBAAUN,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAE,iBAAGQ,oBAAoB,EAAvB;AACRC,yBAAOT,IAAP,CAAYM,KAAZ,CADQ,IACa,IADb;AAERO,MAAAA,+BAA+B,EAFvB,IAE4BX,kBAF5B,OAFb;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACe,mBAAX,GAAiC,YAAjC;AACAf,UAAU,CAACgB,eAAX,GAA6B,IAA7B;;;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,4BAAMC,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM,C","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 './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\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":["MenuHeaderDataTids","root","MenuHeader","_enableIconPadding","children","size","rest","theme","ThemeContext","menuContext","MenuContext","getRootSizeClassName","styles","rootLarge","rootMedium","rootSmall","getWithLeftPaddingSizeClassName","withLeftPaddingSmall","withLeftPaddingMedium","enableIconPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"mVAAA;;AAEA;AACA;AACA;;AAEA;;AAEA,iD;;;;;;;;;;;;;;AAcO,IAAMA,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA,G;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,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,WAAW,GAAG,uBAAWC,wBAAX,CAApB;;AAEA,WAASC,oBAAT,GAAgC;AAC9B,YAAQN,IAAR;AACE,WAAK,OAAL;AACE,eAAOO,mBAAOC,SAAP,CAAiBN,KAAjB,CAAP;AACF,WAAK,QAAL;AACE,eAAOK,mBAAOE,UAAP,CAAkBP,KAAlB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOK,mBAAOG,SAAP,CAAiBR,KAAjB,CAAP,CAPJ;;AASD;AACD,WAASS,+BAAT,GAA2C;AACzC,YAAQX,IAAR;AACE,WAAK,OAAL;AACE,eAAOO,mBAAOK,oBAAP,CAA4BV,KAA5B,CAAP;AACF,WAAK,QAAL;AACE,eAAOK,mBAAOM,qBAAP,CAA6BX,KAA7B,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOK,mBAAOK,oBAAP,CAA4BV,KAA5B,CAAP,CAPJ;;AASD;;AAED;AACE,iCAAC,4BAAD,EAAmBD,IAAnB;AACE;AACE,kBAAUN,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAE,iBAAGU,oBAAoB,EAAvB;AACRC,yBAAOX,IAAP,CAAYM,KAAZ,CADQ,IACa,IADb;AAERS,MAAAA,+BAA+B,EAFvB,IAE4BP,WAAW,CAACU,iBAAZ,IAAiChB,kBAF7D,OAFb;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACkB,mBAAX,GAAiC,YAAjC;AACAlB,UAAU,CAACmB,eAAX,GAA6B,IAA7B;;;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,4BAAMC,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM,C","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.__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/cjs/components/MenuItem/MenuItem.d.ts

@@ -2,6 +2,7 @@ import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { SizeProp } from '../../lib/types/props';
+import { MenuContextType } from '../../internal/Menu/MenuContext';
 /**
  * @deprecated use SizeProp
  */
@@ -77,10 +78,16 @@ export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' |
      * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
      */
     component?: React.ComponentType<any>;
+    /**
+     * Запрещает выделение и выбор данного пункта меню
+     *
+     */
+    isNotSelectable?: boolean;
     isMobile?: boolean;
 }
 export declare const MenuItemDataTids: {
     readonly root: "MenuItem__root";
+    readonly content: "MenuItem__content";
     readonly comment: "MenuItem__comment";
 };
 /**
@@ -105,20 +112,34 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
     };
     state: {
         iconOffsetTop: number;
+        highlighted: boolean;
     };
     private theme;
     private mouseEntered;
     private setRootNode;
     private rootRef;
+    private contentRef;
+    private menuItemsAtAnyLevel?;
+    static contextType: React.Context<MenuContextType>;
+    context: MenuContextType;
     render(): JSX.Element;
     componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Readonly<MenuItemProps>): void;
+    highlight: () => void;
+    unhighlight: () => void;
+    select: (event: React.SyntheticEvent<HTMLElement>) => void;
+    isEnabled: () => boolean;
+    navigate: () => void;
     private getRootSizeClassName;
     private getIconSizeClassName;
     private getWithIconSizeClassName;
     private renderMain;
     private handleMouseEnterFix;
     private handleMouseLeave;
+    private handleClick;
     private setRootRef;
     private getComponent;
+    private hasIconAmongItems;
 }
 export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/cjs/components/MenuItem/MenuItem.js

@@ -1,7 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isMenuItem = exports.MenuItemDataTids = exports.MenuItem = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isMenuItem = exports.MenuItemDataTids = exports.MenuItem = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _globalObject = require("@skbkontur/global-object");
 
 
 var _utils = require("../../lib/utils");
@@ -11,8 +12,15 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 
+var _MenuContext = require("../../internal/Menu/MenuContext");
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+
+var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel", "isNotSelectable"];var _class, _class2, _temp;
+
+
+
+
 
-var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel"];var _class, _class2, _temp;
 
 
 
@@ -99,6 +107,7 @@ var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment",
 
 var MenuItemDataTids = {
   root: 'MenuItem__root',
+  content: 'MenuItem__content',
   comment: 'MenuItem__comment' };
 
 
@@ -134,13 +143,27 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
     state = {
-      iconOffsetTop: 0 };_this.
+      iconOffsetTop: 0,
+      highlighted: false };_this.
 
 
 
     mouseEntered = false;_this.
 
     rootRef = null;_this.
+    contentRef = /*#__PURE__*/_react.default.createRef();_this.
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -172,6 +195,63 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    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.
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -216,9 +296,10 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
-      props.link,comment = props.comment,icon = props.icon,loose = props.loose,state = props.state,size = props.size,_enableIconPadding = props._enableIconPadding,component = props.component,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,isMobile = props.isMobile,href = props.href,disabled = props.disabled,_props$rel = props.rel,rel = _props$rel === void 0 ? _this.props.href && (0, _utils.isExternalLink)(_this.props.href) ? 'noopener noreferrer' : _this.props.rel : _props$rel,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-      var hover = state === 'hover' && !disabled;
+      props.link,comment = props.comment,icon = props.icon,loose = props.loose,state = props.state,size = props.size,_enableIconPadding = props._enableIconPadding,component = props.component,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,isMobile = props.isMobile,href = props.href,disabled = props.disabled,_props$rel = props.rel,rel = _props$rel === void 0 ? _this.props.href && (0, _utils.isExternalLink)(_this.props.href) ? 'noopener noreferrer' : _this.props.rel : _props$rel,isNotSelectable = props.isNotSelectable,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+
+      var hover = (_this.state.highlighted || state === 'hover') && !disabled;
 
       var iconElement = null;
       if (icon) {var _cx;
@@ -241,9 +322,9 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       _MenuItem.styles.rootMobile(_this.theme)] = isMobile, _cx2[
       _MenuItem.styles.loose()] = !!loose, _cx2[
       _MenuItem.styles.hover(_this.theme)] = hover, _cx2[
-      _MenuItem.styles.selected(_this.theme)] = state === 'selected', _cx2[
+      _MenuItem.styles.selected(_this.theme)] = state === 'selected' && !_this.state.highlighted, _cx2[
       _MenuItem.styles.link(_this.theme)] = !!link, _cx2[
-      _this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding, _cx2[
+      _this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding, _cx2[
       _MenuItem.styles.disabled(_this.theme)] = !!_this.props.disabled, _cx2));
 
 
@@ -262,9 +343,10 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
           "data-tid": MenuItemDataTids.root },
         rest, {
           disabled: disabled,
-          state: state,
+          state: _this.state.highlighted ? 'hover' : state,
           onMouseOver: _this.handleMouseEnterFix,
           onMouseLeave: _this.handleMouseLeave,
+          onClick: _this.handleClick,
           className: className,
           href: href,
           rel: href ? rel : undefined,
@@ -273,8 +355,10 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
         iconElement, /*#__PURE__*/
         _react.default.createElement("span", {
           className: (0, _Emotion.cx)((_cx3 = {}, _cx3[
-          _MenuItem.styles.mobileContentWithIcon()] = isMobile && (0, _utils.isNonNullable)(icon), _cx3)) },
+          _MenuItem.styles.mobileContentWithIcon()] = isMobile && (0, _utils.isNonNullable)(icon), _cx3)),
 
+          ref: _this.contentRef,
+          "data-tid": MenuItemDataTids.content },
 
         content),
 
@@ -296,16 +380,26 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
     handleMouseEnterFix = function (e) {
-      if (!_this.mouseEntered && _this.props.onMouseEnter) {
+      if (!_this.mouseEntered) {var _this$context$navigat;
         _this.mouseEntered = true;
-        _this.props.onMouseEnter(e);
+        _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((0, _assertThisInitialized2.default)(_this)));
       }
     };_this.
 
-    handleMouseLeave = function (e) {
+    handleMouseLeave = function (e) {var _this$context$navigat2;
       _this.mouseEntered = false;
-      if (_this.props.onMouseLeave) {
-        _this.props.onMouseLeave(e);
+      _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.menuItemsAtAnyLevel) {
+        _this.context.onItemClick == null ? void 0 : _this.context.onItemClick(e);
       }
     };_this.
 
@@ -329,7 +423,11 @@ MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       }
 
       return 'button';
-    };return _this;}var _proto = MenuItem.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});};_proto.componentDidMount = function componentDidMount() {if (this.rootRef) {this.setState({ iconOffsetTop: window.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });}};_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.rootLarge(this.theme);case 'medium':return _MenuItem.styles.rootMedium(this.theme);case 'small':default:return _MenuItem.styles.rootSmall(this.theme);}};_proto.getIconSizeClassName = function getIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.iconLarge(this.theme);case 'medium':return _MenuItem.styles.iconMedium(this.theme);case 'small':default:return _MenuItem.styles.iconSmall(this.theme);}};_proto.getWithIconSizeClassName = function getWithIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.withIconLarge(this.theme);case 'medium':return _MenuItem.styles.withIconMedium(this.theme);case 'small':default:return _MenuItem.styles.withIconSmall(this.theme);}};return MenuItem;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = { comment: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.node, loose: _propTypes.default.bool, state: _propTypes.default.string, target: _propTypes.default.string, onClick: _propTypes.default.func, size: _propTypes.default.string }, _temp)) || _class;exports.MenuItem = MenuItem;
+    };_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;}var _proto = MenuItem.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.menuItemsAtAnyLevel = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).menuItemsAtAnyLevel;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});});};_proto.componentDidMount = function componentDidMount() {if (this.rootRef && (0, _globalObject.isBrowser)(_globalObject.globalObject)) {this.setState({ iconOffsetTop: _globalObject.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() {switch (this.props.size) {case 'large':return _MenuItem.styles.rootLarge(this.theme);case 'medium':return _MenuItem.styles.rootMedium(this.theme);case 'small':default:return _MenuItem.styles.rootSmall(this.theme);}};_proto.getIconSizeClassName = function getIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.iconLarge(this.theme);case 'medium':return _MenuItem.styles.iconMedium(this.theme);case 'small':default:return _MenuItem.styles.iconSmall(this.theme);}};_proto.getWithIconSizeClassName = function getWithIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.withIconLarge(this.theme);case 'medium':return _MenuItem.styles.withIconMedium(this.theme);case 'small':default:return _MenuItem.styles.withIconSmall(this.theme);}};return MenuItem;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = { comment: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.node, loose: _propTypes.default.bool, state: _propTypes.default.string, target: _propTypes.default.string, onClick: _propTypes.default.func, size: _propTypes.default.string }, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class;exports.MenuItem = MenuItem;
 
 
 var isMenuItem = (0, _utils.isReactUIComponent)('MenuItem');exports.isMenuItem = isMenuItem;

package/cjs/components/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItemDataTids","root","comment","MenuItem","rootNode","state","iconOffsetTop","mouseEntered","rootRef","renderMain","props","link","icon","loose","size","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","href","disabled","rel","rest","hover","iconElement","top","styles","theme","getIconSizeClassName","className","getRootSizeClassName","rootMobile","selected","getWithIconSizeClassName","Boolean","children","content","Component","getComponent","setRootRef","handleMouseEnterFix","handleMouseLeave","undefined","mobileContentWithIcon","commentHover","e","element","render","setRootNode","componentDidMount","setState","window","getComputedStyle","getPropertyValue","rootLarge","rootMedium","rootSmall","iconLarge","iconMedium","iconSmall","withIconLarge","withIconMedium","withIconSmall","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","target","onClick","func","isMenuItem"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './MenuItem.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type MenuItemSize = SizeProp;\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Omit<CommonProps, 'children'> {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * Размер\n   */\n  size?: SizeProp;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * HTML-атрибут `rel`.\n   *\n   * Для внешних ссылок аттрибут rel по умолчанию равен \"noopener noreferrer\"\n   */\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n\n  isMobile?: boolean;\n}\n\nexport const MenuItemDataTids = {\n  root: 'MenuItem__root',\n  comment: 'MenuItem__comment',\n} as const;\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\n  public static __MENU_ITEM__ = true;\n\n  public static propTypes = {\n    comment: PropTypes.node,\n\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.node,\n\n    loose: PropTypes.bool,\n\n    state: PropTypes.string,\n\n    target: PropTypes.string,\n\n    onClick: PropTypes.func,\n\n    size: PropTypes.string,\n  };\n\n  public state = {\n    iconOffsetTop: 0,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n  private rootRef: Nullable<HTMLElement> = null;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.rootRef) {\n      this.setState({ iconOffsetTop: window.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });\n    }\n  }\n\n  private getRootSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\n    }\n  }\n\n  private getWithIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.withIconLarge(this.theme);\n      case 'medium':\n        return styles.withIconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.withIconSmall(this.theme);\n    }\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      size,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      href,\n      disabled,\n      rel = this.props.href && isExternalLink(this.props.href) ? 'noopener noreferrer' : this.props.rel,\n      ...rest\n    } = props;\n\n    const hover = state === 'hover' && !disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <div\n          style={{ top: this.state.iconOffsetTop }}\n          className={cx({\n            [styles.icon(this.theme)]: true,\n            [this.getIconSizeClassName()]: true,\n          })}\n        >\n          {icon}\n        </div>\n      );\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [this.getRootSizeClassName()]: true,\n      [styles.rootMobile(this.theme)]: isMobile,\n      [styles.loose()]: !!loose,\n      [styles.hover(this.theme)]: hover,\n      [styles.selected(this.theme)]: state === 'selected',\n      [styles.link(this.theme)]: !!link,\n      [this.getWithIconSizeClassName()]: Boolean(iconElement) || !!_enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        ref={this.setRootRef}\n        data-tid={MenuItemDataTids.root}\n        {...rest}\n        disabled={disabled}\n        state={state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        href={href}\n        rel={href ? rel : undefined}\n        tabIndex={-1}\n      >\n        {iconElement}\n        <span\n          className={cx({\n            [styles.mobileContentWithIcon()]: isMobile && isNonNullable(icon),\n          })}\n        >\n          {content}\n        </span>\n        {this.props.comment && (\n          <div\n            data-tid={MenuItemDataTids.comment}\n            className={cx({\n              [styles.comment(this.theme)]: true,\n              [styles.commentHover(this.theme)]: hover,\n            })}\n          >\n            {comment}\n          </div>\n        )}\n      </Component>\n    );\n  };\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered && this.props.onMouseEnter) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private setRootRef = (element: HTMLElement) => {\n    this.rootRef = element;\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (component) {\n      return component;\n    }\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItemDataTids","root","content","comment","MenuItem","rootNode","state","iconOffsetTop","highlighted","mouseEntered","rootRef","contentRef","React","createRef","highlight","setState","unhighlight","select","event","handleClick","isEnabled","props","disabled","navigate","href","target","window","open","location","renderMain","link","icon","loose","size","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rel","isNotSelectable","rest","hover","iconElement","top","styles","theme","getIconSizeClassName","className","getRootSizeClassName","rootMobile","selected","getWithIconSizeClassName","Boolean","context","enableIconPadding","children","Component","getComponent","setRootRef","handleMouseEnterFix","handleMouseLeave","undefined","mobileContentWithIcon","commentHover","e","menuItemsAtAnyLevel","navigation","onClick","onItemClick","element","hasIconAmongItems","items","some","item","render","flags","setRootNode","componentDidMount","globalObject","getComputedStyle","getPropertyValue","current","add","setEnableIconPadding","componentWillUnmount","remove","componentDidUpdate","prevProps","rootLarge","rootMedium","rootSmall","iconLarge","iconMedium","iconSmall","withIconLarge","withIconMedium","withIconSmall","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","func","contextType","MenuContext","isMenuItem"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\nimport { MenuContext, MenuContextType } from '../../internal/Menu/MenuContext';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\n\nimport { styles } from './MenuItem.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type MenuItemSize = SizeProp;\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Omit<CommonProps, 'children'> {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * Размер\n   */\n  size?: SizeProp;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * HTML-атрибут `rel`.\n   *\n   * Для внешних ссылок аттрибут rel по умолчанию равен \"noopener noreferrer\"\n   */\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n  /**\n   * Запрещает выделение и выбор данного пункта меню\n   *\n   */\n  isNotSelectable?: boolean;\n\n  isMobile?: boolean;\n}\n\nexport const MenuItemDataTids = {\n  root: 'MenuItem__root',\n  content: 'MenuItem__content',\n  comment: 'MenuItem__comment',\n} as const;\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\n  public static __MENU_ITEM__ = true;\n\n  public static propTypes = {\n    comment: PropTypes.node,\n\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.node,\n\n    loose: PropTypes.bool,\n\n    state: PropTypes.string,\n\n    target: PropTypes.string,\n\n    onClick: PropTypes.func,\n\n    size: PropTypes.string,\n  };\n\n  public state = {\n    iconOffsetTop: 0,\n    highlighted: false,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n  private rootRef: Nullable<HTMLElement> = null;\n  private contentRef = React.createRef<HTMLElement>();\n  private menuItemsAtAnyLevel?: boolean;\n  static contextType = MenuContext;\n\n  public context!: MenuContextType;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.menuItemsAtAnyLevel = getFullReactUIFlagsContext(flags).menuItemsAtAnyLevel;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    {this.renderMain}\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.rootRef && isBrowser(globalObject)) {\n      this.setState({ iconOffsetTop: globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });\n    }\n    if (this.contentRef.current && this.menuItemsAtAnyLevel && !this.props.isNotSelectable) {\n      this.context.navigation?.add(this.contentRef.current, this);\n    }\n    if (this.props.icon && this.menuItemsAtAnyLevel) {\n      this.context.setEnableIconPadding?.(true);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.contentRef.current && this.menuItemsAtAnyLevel) {\n      !this.props.isNotSelectable && this.context.navigation?.remove(this.contentRef.current);\n      this.context.setEnableIconPadding?.(this.hasIconAmongItems());\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<MenuItemProps>) {\n    if (prevProps.icon !== this.props.icon) {\n      this.context.setEnableIconPadding?.(!!this.props.icon || this.hasIconAmongItems());\n    }\n    if (\n      this.contentRef.current &&\n      this.menuItemsAtAnyLevel &&\n      prevProps.isNotSelectable !== this.props.isNotSelectable\n    ) {\n      if (this.props.isNotSelectable) {\n        this.unhighlight();\n        this.context.navigation?.remove(this.contentRef.current);\n      } else {\n        this.context.navigation?.add(this.contentRef.current, this);\n      }\n    }\n  }\n\n  public highlight = () => {\n    this.setState({ highlighted: true });\n  };\n\n  public unhighlight = () => {\n    this.setState({ highlighted: false });\n  };\n\n  public select = (event: React.SyntheticEvent<HTMLElement>) => {\n    this.handleClick(event as React.MouseEvent<HTMLElement>);\n  };\n\n  public isEnabled = () => {\n    return !this.props.disabled;\n  };\n\n  public navigate = () => {\n    if (!this.props.href) {\n      return;\n    }\n    if (this.props.target) {\n      window.open(this.props.href, this.props.target);\n    } else {\n      location.href = this.props.href;\n    }\n  };\n\n  private getRootSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\n    }\n  }\n\n  private getWithIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.withIconLarge(this.theme);\n      case 'medium':\n        return styles.withIconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.withIconSmall(this.theme);\n    }\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      size,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      href,\n      disabled,\n      rel = this.props.href && isExternalLink(this.props.href) ? 'noopener noreferrer' : this.props.rel,\n      isNotSelectable,\n      ...rest\n    } = props;\n\n    const hover = (this.state.highlighted || state === 'hover') && !disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <div\n          style={{ top: this.state.iconOffsetTop }}\n          className={cx({\n            [styles.icon(this.theme)]: true,\n            [this.getIconSizeClassName()]: true,\n          })}\n        >\n          {icon}\n        </div>\n      );\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [this.getRootSizeClassName()]: true,\n      [styles.rootMobile(this.theme)]: isMobile,\n      [styles.loose()]: !!loose,\n      [styles.hover(this.theme)]: hover,\n      [styles.selected(this.theme)]: state === 'selected' && !this.state.highlighted,\n      [styles.link(this.theme)]: !!link,\n      [this.getWithIconSizeClassName()]: Boolean(iconElement) || !!_enableIconPadding || this.context.enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        ref={this.setRootRef}\n        data-tid={MenuItemDataTids.root}\n        {...rest}\n        disabled={disabled}\n        state={this.state.highlighted ? 'hover' : state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleClick}\n        className={className}\n        href={href}\n        rel={href ? rel : undefined}\n        tabIndex={-1}\n      >\n        {iconElement}\n        <span\n          className={cx({\n            [styles.mobileContentWithIcon()]: isMobile && isNonNullable(icon),\n          })}\n          ref={this.contentRef}\n          data-tid={MenuItemDataTids.content}\n        >\n          {content}\n        </span>\n        {this.props.comment && (\n          <div\n            data-tid={MenuItemDataTids.comment}\n            className={cx({\n              [styles.comment(this.theme)]: true,\n              [styles.commentHover(this.theme)]: hover,\n            })}\n          >\n            {comment}\n          </div>\n        )}\n      </Component>\n    );\n  };\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter?.(e);\n      this.menuItemsAtAnyLevel && !this.props.isNotSelectable && this.context.navigation?.highlight(this);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    this.props.onMouseLeave?.(e);\n    this.menuItemsAtAnyLevel && !this.props.isNotSelectable && this.context.navigation?.unhighlight();\n  };\n\n  private handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (this.props.isNotSelectable) {\n      return;\n    }\n    this.props.onClick?.(e);\n    if (this.menuItemsAtAnyLevel) {\n      this.context.onItemClick?.(e);\n    }\n  };\n\n  private setRootRef = (element: HTMLElement) => {\n    this.rootRef = element;\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (component) {\n      return component;\n    }\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n\n  private hasIconAmongItems = () => {\n    return Boolean(this.context.navigation?.items.some((item) => item.props.icon));\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}

package/cjs/components/MenuItem/MenuItem.md

@@ -12,9 +12,23 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 </DropdownMenu>
 ```
 
-Меню с отключёнными и базовыми элементами меню.
-<br/>
-К отключённым элементам меню не применяются стили при наведении и их нельзя затаргетить с клавиатуры.
+Меню с заблокированными и базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и заблокированными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem disabled>А это заблокированный</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem disabled>И снова заблокированный</MenuItem>
+  <MenuItem disabled>И вот ещё один заблокированный</MenuItem>
+</DropdownMenu>
+```
+
+В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
@@ -23,10 +37,10 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
   caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
   >
   <MenuItem>Это базовый элемент меню</MenuItem>
-  <MenuItem disabled>А это отключённый</MenuItem>
+  <MenuItem isNotSelectable>А это отключённый</MenuItem>
   <MenuItem>А это снова базовый</MenuItem>
-  <MenuItem disabled>И снова отключённый</MenuItem>
-  <MenuItem disabled>И вот ещё один отключённый</MenuItem>
+  <MenuItem isNotSelectable>И снова отключённый</MenuItem>
+  <MenuItem isNotSelectable>И вот ещё один отключённый</MenuItem>
 </DropdownMenu>
 ```
 

package/cjs/components/MiniModal/MiniModal.d.ts

@@ -0,0 +1,18 @@
+import { Modal, ModalProps } from '../Modal';
+import { MiniModalFooter } from './MiniModalFooter';
+import { MiniModalHeader } from './MiniModalHeader';
+import { MiniModalBody } from './MiniModalBody';
+import { MiniModalIndent } from './MiniModalIndent';
+export declare const MiniModalDataTids: {
+    readonly icon: "MiniModal__icon";
+    readonly title: "MiniModal__title";
+    readonly description: "MiniModal__description";
+    readonly actions: "MiniModal__actions";
+    readonly indent: "MiniModal__indent";
+};
+export declare const MiniModal: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<Modal, ModalProps> & {
+    Header: typeof MiniModalHeader;
+    Indent: typeof MiniModalIndent;
+    Footer: typeof MiniModalFooter;
+    Body: typeof MiniModalBody;
+};

package/cjs/components/MiniModal/MiniModal.js

@@ -0,0 +1,47 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.MiniModalDataTids = exports.MiniModal = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("../Modal");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+
+var _getMiniModalTheme = require("./getMiniModalTheme");
+var _MiniModalFooter = require("./MiniModalFooter");
+var _MiniModalHeader = require("./MiniModalHeader");
+var _MiniModalBody = require("./MiniModalBody");
+var _MiniModalIndent = require("./MiniModalIndent");var _excluded = ["children", "theme"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
+
+var MiniModalDataTids = {
+  icon: 'MiniModal__icon',
+  title: 'MiniModal__title',
+  description: 'MiniModal__description',
+  actions: 'MiniModal__actions',
+  indent: 'MiniModal__indent' };exports.MiniModalDataTids = MiniModalDataTids;
+
+
+var MiniModal = (0, _forwardRefAndName.forwardRefAndName)(
+
+
+
+
+
+
+
+
+'MiniModal', function (_ref, ref) {var children = _ref.children,propsTheme = _ref.theme,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var contextTheme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _getMiniModalTheme.getMiniModalTheme)(contextTheme, propsTheme) }, /*#__PURE__*/
+    _react.default.createElement(_Modal.Modal, (0, _extends2.default)({ width: 400, noClose: true, ref: ref }, rest),
+    children)));
+
+
+
+});exports.MiniModal = MiniModal;
+
+MiniModal.__KONTUR_REACT_UI__ = 'MiniModal';
+
+MiniModal.Header = _MiniModalHeader.MiniModalHeader;
+MiniModal.Footer = _MiniModalFooter.MiniModalFooter;
+MiniModal.Indent = _MiniModalIndent.MiniModalIndent;
+MiniModal.Body = _MiniModalBody.MiniModalBody;

package/cjs/components/MiniModal/MiniModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.tsx"],"names":["MiniModalDataTids","icon","title","description","actions","indent","MiniModal","ref","children","propsTheme","theme","rest","contextTheme","ThemeContext","__KONTUR_REACT_UI__","Header","MiniModalHeader","Footer","MiniModalFooter","Indent","MiniModalIndent","Body","MiniModalBody"],"mappings":"iYAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,oD;;AAEO,IAAMA,iBAAiB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,iBADyB;AAE/BC,EAAAA,KAAK,EAAE,kBAFwB;AAG/BC,EAAAA,WAAW,EAAE,wBAHkB;AAI/BC,EAAAA,OAAO,EAAE,oBAJsB;AAK/BC,EAAAA,MAAM,EAAE,mBALuB,EAA1B,C;;;AAQA,IAAMC,SAAS,GAAG;;;;;;;;;AASvB,WATuB,EASV,gBAA2CC,GAA3C,EAAmD,KAAhDC,QAAgD,QAAhDA,QAAgD,CAA/BC,UAA+B,QAAtCC,KAAsC,CAAhBC,IAAgB;AAChE,MAAMC,YAAY,GAAG,uBAAWC,0BAAX,CAArB;;AAEA;AACE,iCAAC,0BAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,0CAAkBD,YAAlB,EAAgCH,UAAhC,CAA9B;AACE,iCAAC,YAAD,2BAAO,KAAK,EAAE,GAAd,EAAmB,OAAO,MAA1B,EAA2B,GAAG,EAAEF,GAAhC,IAAyCI,IAAzC;AACGH,IAAAA,QADH,CADF,CADF;;;;AAOD,CAnBwB,CAAlB,C;;AAqBPF,SAAS,CAACQ,mBAAV,GAAgC,WAAhC;;AAEAR,SAAS,CAACS,MAAV,GAAmBC,gCAAnB;AACAV,SAAS,CAACW,MAAV,GAAmBC,gCAAnB;AACAZ,SAAS,CAACa,MAAV,GAAmBC,gCAAnB;AACAd,SAAS,CAACe,IAAV,GAAiBC,4BAAjB","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Modal, ModalProps } from '../Modal';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { getMiniModalTheme } from './getMiniModalTheme';\nimport { MiniModalFooter } from './MiniModalFooter';\nimport { MiniModalHeader } from './MiniModalHeader';\nimport { MiniModalBody } from './MiniModalBody';\nimport { MiniModalIndent } from './MiniModalIndent';\n\nexport const MiniModalDataTids = {\n  icon: 'MiniModal__icon',\n  title: 'MiniModal__title',\n  description: 'MiniModal__description',\n  actions: 'MiniModal__actions',\n  indent: 'MiniModal__indent',\n} as const;\n\nexport const MiniModal = forwardRefAndName<\n  Modal,\n  ModalProps,\n  {\n    Header: typeof MiniModalHeader;\n    Indent: typeof MiniModalIndent;\n    Footer: typeof MiniModalFooter;\n    Body: typeof MiniModalBody;\n  }\n>('MiniModal', ({ children, theme: propsTheme, ...rest }, ref) => {\n  const contextTheme = useContext(ThemeContext);\n\n  return (\n    <ThemeContext.Provider value={getMiniModalTheme(contextTheme, propsTheme)}>\n      <Modal width={400} noClose ref={ref} {...rest}>\n        {children}\n      </Modal>\n    </ThemeContext.Provider>\n  );\n});\n\nMiniModal.__KONTUR_REACT_UI__ = 'MiniModal';\n\nMiniModal.Header = MiniModalHeader;\nMiniModal.Footer = MiniModalFooter;\nMiniModal.Indent = MiniModalIndent;\nMiniModal.Body = MiniModalBody;\n"]}