@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/cjs/components/MenuHeader/MenuHeader.d.ts

@@ -5,7 +5,11 @@ export interface MenuHeaderProps extends CommonProps {
     children: ReactNode;
 }
 /**
- * Заголовок в меню.
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 declare function MenuHeader({ _enableIconPadding, children, ...rest }: MenuHeaderProps): JSX.Element;
 declare namespace MenuHeader {

package/cjs/components/MenuHeader/MenuHeader.js

@@ -1,8 +1,8 @@
 "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.MenuHeader = MenuHeader;exports.isMenuHeader = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _MenuHeader = require("./MenuHeader.styles");
 
@@ -11,18 +11,22 @@ var _MenuHeader = require("./MenuHeader.styles");
 
 
 
-/**
- * Заголовок в меню.
+/**
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
-function MenuHeader(_ref) {var _cn;var _ref$_enableIconPaddi = _ref._enableIconPadding,_enableIconPadding = _ref$_enableIconPaddi === void 0 ? false : _ref$_enableIconPaddi,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["_enableIconPadding", "children"]);
+function MenuHeader(_ref) {var _cx;var _ref$_enableIconPaddi = _ref._enableIconPadding,_enableIconPadding = _ref$_enableIconPaddi === void 0 ? false : _ref$_enableIconPaddi,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["_enableIconPadding", "children"]);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
     _react.default.createElement("div", {
-      className: (0, _classnames.default)((_cn = {}, _cn[
-      _MenuHeader.jsStyles.root(theme)] = true, _cn[
-      _MenuHeader.jsStyles.withLeftPadding(theme)] = _enableIconPadding, _cn)) },
+      className: (0, _Emotion.cx)((_cx = {}, _cx[
+      _MenuHeader.styles.root(theme)] = true, _cx[
+      _MenuHeader.styles.withLeftPadding(theme)] = _enableIconPadding, _cx)) },
 
 
     children)));

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["MenuHeader","_enableIconPadding","children","rest","theme","ThemeContext","jsStyles","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"6YAAA;AACA;;AAEA;AACA;;AAEA;;;;;;;AAOA;AACA;AACA;AACA,SAASA,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,IAAnB;AACE;AACE,MAAA,SAAS,EAAE;AACRG,2BAASC,IAAT,CAAcH,KAAd,CADQ,IACe,IADf;AAERE,2BAASE,eAAT,CAAyBJ,KAAzB,CAFQ,IAE0BH,kBAF1B,OADb;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACS,mBAAX,GAAiC,YAAjC;AACAT,UAAU,CAACU,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';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './MenuHeader.styles';\r\n\r\nexport interface MenuHeaderProps extends CommonProps {\r\n  _enableIconPadding?: boolean;\r\n  children: ReactNode;\r\n}\r\n\r\n/**\r\n * Заголовок в меню.\r\n */\r\nfunction MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <CommonWrapper {...rest}>\r\n      <div\r\n        className={cn({\r\n          [jsStyles.root(theme)]: true,\r\n          [jsStyles.withLeftPadding(theme)]: _enableIconPadding,\r\n        })}\r\n      >\r\n        {children}\r\n      </div>\r\n    </CommonWrapper>\r\n  );\r\n}\r\n\r\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\r\nMenuHeader.__MENU_HEADER__ = true;\r\n\r\nexport { MenuHeader };\r\n\r\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\r\n  return React.isValidElement<MenuHeaderProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["MenuHeader.tsx"],"names":["MenuHeader","_enableIconPadding","children","rest","theme","ThemeContext","styles","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"6YAAA;;AAEA;AACA;AACA;;AAEA;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,IAAnB;AACE;AACE,MAAA,SAAS,EAAE;AACRG,yBAAOC,IAAP,CAAYH,KAAZ,CADQ,IACa,IADb;AAERE,yBAAOE,eAAP,CAAuBJ,KAAvB,CAFQ,IAEwBH,kBAFxB,OADb;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACS,mBAAX,GAAiC,YAAjC;AACAT,UAAU,CAACU,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';\n\nimport { styles } from './MenuHeader.styles';\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n}\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, ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        className={cx({\n          [styles.root(theme)]: true,\n          [styles.withLeftPadding(theme)]: _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/MenuHeader/MenuHeader.md

@@ -0,0 +1,23 @@
+Базовый пример меню с заголовками.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  menuMaxHeight="10rem"
+  caption={<Button use="primary">Сотрудники компании</Button>}
+  >
+  <MenuHeader>Разработчики</MenuHeader>
+  <MenuItem>Вася</MenuItem>
+  <MenuItem>Петя</MenuItem>
+  <MenuItem>Маша</MenuItem>
+  <MenuHeader>Дизайнеры</MenuHeader>
+  <MenuItem>Галя</MenuItem>
+  <MenuItem>Гриша</MenuItem>
+  <MenuItem>Гена</MenuItem>
+  <MenuHeader>Продакты</MenuHeader>
+  <MenuItem>Валя</MenuItem>
+  <MenuItem>Аля</MenuItem>
+  <MenuItem>Артём</MenuItem>
+</DropdownMenu>
+```

package/cjs/components/MenuHeader/MenuHeader.styles.d.ts

@@ -1,5 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(t: Theme): string;
     withLeftPadding(t: Theme): string;
 };

package/cjs/components/MenuHeader/MenuHeader.styles.js

@@ -1,7 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
     var legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);
     var paddingRight =
@@ -20,7 +20,4 @@ var styles = {
     return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: ", ";\n    "])),
     t.menuItemPaddingForIcon);
 
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.styles.ts"],"names":["styles","root","t","legacyPaddingRight","parseFloat","menuHeaderLegacyPaddingRight","paddingRight","menuHeaderPaddingX","css","menuHeaderColor","menuHeaderFontSize","menuHeaderLineHeight","menuHeaderPaddingTop","menuHeaderPaddingBottom","withLeftPadding","menuItemPaddingForIcon","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,QAAMC,kBAAkB,GAAGC,UAAU,CAACF,CAAC,CAACG,4BAAH,CAArC;AACA,QAAMC,YAAY;AAChBH,IAAAA,kBAAkB,KAAK,CAAvB,GAA8BC,UAAU,CAACF,CAAC,CAACK,kBAAH,CAAV,GAAmCJ,kBAAjE,UAA0FD,CAAC,CAACK,kBAD9F;;AAGA,eAAOC,YAAP;AACWN,IAAAA,CAAC,CAACO,eADb;;AAGeP,IAAAA,CAAC,CAACQ,kBAHjB;AAIiBR,IAAAA,CAAC,CAACS,oBAJnB;AAKaT,IAAAA,CAAC,CAACU,oBALf,EAKuCN,YALvC,EAKuDJ,CAAC,CAACW,uBALzD,EAKoFX,CAAC,CAACK,kBALtF;;AAOD,GAbY;;AAebO,EAAAA,eAfa,2BAeGZ,CAfH,EAea;AACxB,eAAOM,YAAP;AACkBN,IAAAA,CAAC,CAACa,sBADpB;;AAGD,GAnBY,EAAf;;;AAsBO,IAAMC,QAAQ,GAAG,2BAAahB,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);\r\n    const paddingRight =\r\n      legacyPaddingRight !== 0 ? `${parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight}px` : t.menuHeaderPaddingX;\r\n\r\n    return css`\r\n      color: ${t.menuHeaderColor};\r\n      cursor: default;\r\n      font-size: ${t.menuHeaderFontSize};\r\n      line-height: ${t.menuHeaderLineHeight};\r\n      padding: ${t.menuHeaderPaddingTop} ${paddingRight} ${t.menuHeaderPaddingBottom} ${t.menuHeaderPaddingX};\r\n    `;\r\n  },\r\n\r\n  withLeftPadding(t: Theme) {\r\n    return css`\r\n      padding-left: ${t.menuItemPaddingForIcon};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuHeader.styles.ts"],"names":["styles","root","t","legacyPaddingRight","parseFloat","menuHeaderLegacyPaddingRight","paddingRight","menuHeaderPaddingX","css","menuHeaderColor","menuHeaderFontSize","menuHeaderLineHeight","menuHeaderPaddingTop","menuHeaderPaddingBottom","withLeftPadding","menuItemPaddingForIcon"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,kBAAkB,GAAGC,UAAU,CAACF,CAAC,CAACG,4BAAH,CAArC;AACA,QAAMC,YAAY;AAChBH,IAAAA,kBAAkB,KAAK,CAAvB,GAA8BC,UAAU,CAACF,CAAC,CAACK,kBAAH,CAAV,GAAmCJ,kBAAjE,UAA0FD,CAAC,CAACK,kBAD9F;;AAGA,eAAOC,YAAP;AACWN,IAAAA,CAAC,CAACO,eADb;;AAGeP,IAAAA,CAAC,CAACQ,kBAHjB;AAIiBR,IAAAA,CAAC,CAACS,oBAJnB;AAKaT,IAAAA,CAAC,CAACU,oBALf,EAKuCN,YALvC,EAKuDJ,CAAC,CAACW,uBALzD,EAKoFX,CAAC,CAACK,kBALtF;;AAOD,GAbgC;;AAejCO,EAAAA,eAfiC,2BAejBZ,CAfiB,EAeP;AACxB,eAAOM,YAAP;AACkBN,IAAAA,CAAC,CAACa,sBADpB;;AAGD,GAnBgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);\n    const paddingRight =\n      legacyPaddingRight !== 0 ? `${parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight}px` : t.menuHeaderPaddingX;\n\n    return css`\n      color: ${t.menuHeaderColor};\n      cursor: default;\n      font-size: ${t.menuHeaderFontSize};\n      line-height: ${t.menuHeaderLineHeight};\n      padding: ${t.menuHeaderPaddingTop} ${paddingRight} ${t.menuHeaderPaddingBottom} ${t.menuHeaderPaddingX};\n    `;\n  },\n\n  withLeftPadding(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n});\n"]}

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

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

package/cjs/components/MenuItem/MenuItem.d.ts

@@ -3,27 +3,72 @@ import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuItemState = null | 'hover' | 'selected' | void;
 export interface MenuItemProps extends CommonProps {
-    /** @ignore */
+    /**
+     * @ignore
+     */
     _enableIconPadding?: boolean;
+    /**
+     * Добавляет описание для элемента меню.
+     */
     comment?: React.ReactNode;
+    /**
+     * Отключенное состояние.
+     */
     disabled?: boolean;
+    /**
+     * Добавляет элементу меню иконку.
+     */
     icon?: React.ReactElement<any>;
+    /**
+     * Меняет цвет текста на синий.
+     */
     link?: boolean;
-    /** @ignore */
+    /**
+     * @ignore
+     */
     loose?: boolean;
-    /** @ignore */
+    /**
+     * @ignore
+     */
     state?: MenuItemState;
+    /**
+     * HTML-событие `onclick`.
+     */
     onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    /**
+     * HTML-событие `mouseenter`.
+     */
+    onMouseEnter?: React.MouseEventHandler;
+    /**
+     * HTML-событие `mouseleave`.
+     */
+    onMouseLeave?: React.MouseEventHandler;
     children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);
+    /**
+     * HTML-атрибут `target`.
+     */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * HTML-атрибут `title`.
+     */
     title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];
+    /**
+     * HTML-атрибут `href`.
+     */
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
-    onMouseEnter?: React.MouseEventHandler;
-    onMouseLeave?: React.MouseEventHandler;
+    /**
+     * Заменяет корневой элемент, на компонент переданный в проп.
+     *
+     * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
+     */
     component?: React.ComponentType<any>;
+    isMobile?: boolean;
 }
 /**
- * Элемент меню.
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 export declare class MenuItem extends React.Component<MenuItemProps> {
     static __KONTUR_REACT_UI__: string;

package/cjs/components/MenuItem/MenuItem.js

@@ -1,11 +1,11 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isMenuItem = 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"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _MenuItem = require("./MenuItem.styles");
 
@@ -36,8 +36,50 @@ var _MenuItem = require("./MenuItem.styles");
 
 
 
-/**
- * Элемент меню.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */var
 MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(MenuItem, _React$Component);function MenuItem() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
@@ -75,7 +117,7 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-    renderMain = function (props) {var _cn, _cn2;var
+    renderMain = function (props) {var _cx, _cx2;var
 
       link =
 
@@ -87,23 +129,25 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-      props.link,comment = props.comment,icon = props.icon,loose = props.loose,state = props.state,_enableIconPadding = props._enableIconPadding,component = props.component,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave"]);
+
+      props.link,comment = props.comment,icon = props.icon,loose = props.loose,state = props.state,_enableIconPadding = props._enableIconPadding,component = props.component,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,isMobile = props.isMobile,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile"]);
 
       var hover = state === 'hover' && !_this.props.disabled;
 
       var iconElement = null;
       if (icon) {
-        iconElement = /*#__PURE__*/_react.default.createElement("div", { className: _MenuItem.jsStyles.icon(_this.theme) }, icon);
+        iconElement = /*#__PURE__*/_react.default.createElement("div", { className: _MenuItem.styles.icon(_this.theme) }, icon);
       }
 
-      var className = (0, _classnames.default)((_cn = {}, _cn[
-      _MenuItem.jsStyles.root(_this.theme)] = true, _cn[
-      _MenuItem.jsStyles.loose()] = !!loose, _cn[
-      _MenuItem.jsStyles.hover(_this.theme)] = hover, _cn[
-      _MenuItem.jsStyles.selected(_this.theme)] = state === 'selected', _cn[
-      _MenuItem.jsStyles.link(_this.theme)] = !!link, _cn[
-      _MenuItem.jsStyles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cn[
-      _MenuItem.jsStyles.disabled(_this.theme)] = !!_this.props.disabled, _cn));var
+      var className = (0, _Emotion.cx)((_cx = {}, _cx[
+      _MenuItem.styles.root(_this.theme)] = true, _cx[
+      _MenuItem.styles.rootMobile(_this.theme)] = isMobile, _cx[
+      _MenuItem.styles.loose()] = !!loose, _cx[
+      _MenuItem.styles.hover(_this.theme)] = hover, _cx[
+      _MenuItem.styles.selected(_this.theme)] = state === 'selected', _cx[
+      _MenuItem.styles.link(_this.theme)] = !!link, _cx[
+      _MenuItem.styles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cx[
+      _MenuItem.styles.disabled(_this.theme)] = !!_this.props.disabled, _cx));var
 
 
       children = _this.props.children;
@@ -129,9 +173,9 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
         _this.props.comment && /*#__PURE__*/
         _react.default.createElement("div", {
           "data-tid": "MenuItem__comment",
-          className: (0, _classnames.default)((_cn2 = {}, _cn2[
-          _MenuItem.jsStyles.comment(_this.theme)] = true, _cn2[
-          _MenuItem.jsStyles.commentHover(_this.theme)] = hover, _cn2)) },
+          className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
+          _MenuItem.styles.comment(_this.theme)] = true, _cx2[
+          _MenuItem.styles.commentHover(_this.theme)] = hover, _cx2)) },
 
 
         comment)));

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","jsStyles","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './MenuItem.styles';\r\n\r\nexport type MenuItemState = null | 'hover' | 'selected' | void;\r\n\r\nexport interface MenuItemProps extends CommonProps {\r\n  /** @ignore */\r\n  _enableIconPadding?: boolean;\r\n\r\n  comment?: React.ReactNode;\r\n  disabled?: boolean;\r\n  icon?: React.ReactElement<any>;\r\n  link?: boolean;\r\n\r\n  /** @ignore */\r\n  loose?: boolean;\r\n\r\n  /** @ignore */\r\n  state?: MenuItemState;\r\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\r\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\r\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\r\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\r\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\r\n  onMouseEnter?: React.MouseEventHandler;\r\n  onMouseLeave?: React.MouseEventHandler;\r\n\r\n  component?: React.ComponentType<any>;\r\n}\r\n\r\n/**\r\n * Элемент меню.\r\n */\r\nexport class MenuItem extends React.Component<MenuItemProps> {\r\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\r\n  public static __MENU_ITEM__ = true;\r\n\r\n  public static propTypes = {\r\n    comment: PropTypes.node,\r\n\r\n    disabled: PropTypes.bool,\r\n\r\n    href: PropTypes.string,\r\n\r\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n\r\n    loose: PropTypes.bool,\r\n\r\n    state: PropTypes.string,\r\n\r\n    target: PropTypes.string,\r\n\r\n    onClick: PropTypes.func,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private mouseEntered = false;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\r\n    const {\r\n      link,\r\n      comment,\r\n      icon,\r\n      loose,\r\n      state,\r\n      _enableIconPadding,\r\n      component,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      ...rest\r\n    } = props;\r\n\r\n    const hover = state === 'hover' && !this.props.disabled;\r\n\r\n    let iconElement = null;\r\n    if (icon) {\r\n      iconElement = <div className={jsStyles.icon(this.theme)}>{icon}</div>;\r\n    }\r\n\r\n    const className = cn({\r\n      [jsStyles.root(this.theme)]: true,\r\n      [jsStyles.loose()]: !!loose,\r\n      [jsStyles.hover(this.theme)]: hover,\r\n      [jsStyles.selected(this.theme)]: state === 'selected',\r\n      [jsStyles.link(this.theme)]: !!link,\r\n      [jsStyles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\r\n      [jsStyles.disabled(this.theme)]: !!this.props.disabled,\r\n    });\r\n\r\n    const { children } = this.props;\r\n\r\n    let content = children;\r\n    if (isFunction(children)) {\r\n      content = children(this.props.state);\r\n    }\r\n\r\n    const Component = this.getComponent();\r\n\r\n    return (\r\n      <Component\r\n        {...rest}\r\n        state={state}\r\n        onMouseOver={this.handleMouseEnterFix}\r\n        onMouseLeave={this.handleMouseLeave}\r\n        className={className}\r\n        tabIndex={-1}\r\n      >\r\n        {iconElement}\r\n        {content}\r\n        {this.props.comment && (\r\n          <div\r\n            data-tid=\"MenuItem__comment\"\r\n            className={cn({\r\n              [jsStyles.comment(this.theme)]: true,\r\n              [jsStyles.commentHover(this.theme)]: hover,\r\n            })}\r\n          >\r\n            {comment}\r\n          </div>\r\n        )}\r\n      </Component>\r\n    );\r\n  };\r\n\r\n  // https://github.com/facebook/react/issues/10109\r\n  // Mouseenter event not triggered when cursor moves from disabled button\r\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\r\n    if (!this.mouseEntered && this.props.onMouseEnter) {\r\n      this.mouseEntered = true;\r\n      this.props.onMouseEnter(e);\r\n    }\r\n  };\r\n\r\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\r\n    this.mouseEntered = false;\r\n    if (this.props.onMouseLeave) {\r\n      this.props.onMouseLeave(e);\r\n    }\r\n  };\r\n\r\n  private getComponent = () => {\r\n    const { disabled, component, href } = this.props;\r\n\r\n    if (disabled) {\r\n      return 'button';\r\n    }\r\n\r\n    if (component) {\r\n      return component;\r\n    }\r\n\r\n    if (href) {\r\n      return 'a';\r\n    }\r\n\r\n    return 'button';\r\n  };\r\n}\r\n\r\nexport const isMenuItem = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {\r\n  return React.isValidElement<MenuItemProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rest","hover","disabled","iconElement","styles","className","root","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction } 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';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\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   * @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   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n\n  isMobile?: boolean;\n}\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\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.oneOfType([PropTypes.string, PropTypes.node]),\n\n    loose: PropTypes.bool,\n\n    state: PropTypes.string,\n\n    target: PropTypes.string,\n\n    onClick: PropTypes.func,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      ...rest\n    } = props;\n\n    const hover = state === 'hover' && !this.props.disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: 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      [styles.withIcon(this.theme)]: 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        {...rest}\n        state={state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        tabIndex={-1}\n      >\n        {iconElement}\n        {content}\n        {this.props.comment && (\n          <div\n            data-tid=\"MenuItem__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 getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (component) {\n      return component;\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n}\n\nexport const isMenuItem = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {\n  return React.isValidElement<MenuItemProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__')\n    : false;\n};\n"]}

package/cjs/components/MenuItem/MenuItem.md

@@ -1,7 +1,109 @@
-```jsx harmony
-import { Link } from '@skbkontur/react-ui';
-
-<MenuItem href="http://tech.skbkontur.ru/react-ui/" component={({ href, ...rest }) => <Link to={href} {...rest} />}>
-  Awesome link
-</MenuItem>;
-```
+Меню с базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
+  >
+  <MenuItem>Базовый элемент меню</MenuItem>
+  <MenuItem>Ещё один базовый элемент меню</MenuItem>
+  <MenuItem>И ещё один</MenuItem>
+</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>
+```
+
+Меню с элементами меню содержащими описание.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
+  >
+  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
+  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
+  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
+  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
+  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими иконки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+import DeviceSmartphoneIcon from '@skbkontur/react-icons/DeviceSmartphone';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import ThumbDownIcon from '@skbkontur/react-icons/ThumbDown';
+
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с иконками</Button>}
+  >
+  <MenuItem icon={<OkIcon />}>Базовый элемент меню c иконкой</MenuItem>
+  <MenuItem
+    disabled
+    icon={<ThumbDownIcon />}
+    >
+    Отключённый элемент меню с иконкой
+  </MenuItem>
+  <MenuItem
+    icon={<DeviceSmartphoneIcon />}
+    comment="А слева вы можете видеть икону 21-го века"
+    >
+     Элемент меню с описанием и иконкой
+  </MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню обёрнутыми в контрол ссылки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu, Link } from '@skbkontur/react-ui';
+
+const LinkMenuItem = ({link, title}) => {
+  return <MenuItem
+    href={link}
+    component={({ href, ...rest }) => {
+      return <Link target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+    }}
+    >
+    {title}
+  </MenuItem>
+}
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с ссылками</Button>}
+  >
+  <LinkMenuItem
+    link="http://tech.skbkontur.ru/react-ui/"
+    title="Начало документации"
+    />
+  <LinkMenuItem
+    link="https://guides.kontur.ru/"
+    title="Контур Гайды"
+    />
+  <LinkMenuItem
+    link="https://github.com/skbkontur/retail-ui/graphs/contributors"
+    title="Список прекрасных людей"
+    />
+</DropdownMenu>
+```

package/cjs/components/MenuItem/MenuItem.styles.d.ts

@@ -1,6 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
     hover(t: Theme): string;
     selected(t: Theme): string;
     disabled(t: Theme): string;