@skbkontur/react-ui 0.0.0-73eeccf6c9 → 0.0.0-757d1fac56

package/components/MenuItem/MenuItem/MenuItem.js

@@ -1,18 +1,30 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile"];
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import warning from 'warning';
-import cn from 'classnames';
-import { isFunction } from "../../../lib/utils";
+import { isFunction, isReactUIComponent } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../MenuItem.styles";
-/**
- * Элемент меню.
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode/rootNodeDecorator";
+import { styles } from "../MenuItem.styles";
+export var MenuItemDataTids = {
+  root: 'MenuItem__root',
+  comment: 'MenuItem__comment'
+};
+/**
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 
-export var MenuItem = /*#__PURE__*/function (_React$Component) {
+export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(MenuItem, _React$Component);
 
   function MenuItem() {
@@ -23,9 +35,56 @@ export var MenuItem = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
     _this.mouseEntered = false;
 
+    _this.renderMain = function (props) {
+      var _cx, _cx2;
+
+      var link = 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 = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var hover = state === 'hover' && !_this.props.disabled;
+      var iconElement = null;
+
+      if (icon) {
+        iconElement = /*#__PURE__*/React.createElement("div", {
+          className: styles.icon(_this.theme)
+        }, icon);
+      }
+
+      var className = cx((_cx = {}, _cx[styles.root(_this.theme)] = true, _cx[styles.rootMobile(_this.theme)] = isMobile, _cx[styles.loose()] = !!loose, _cx[styles.hover(_this.theme)] = hover, _cx[styles.selected(_this.theme)] = state === 'selected', _cx[styles.link(_this.theme)] = !!link, _cx[styles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cx[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx));
+      var children = _this.props.children;
+      var content = children;
+
+      if (isFunction(children)) {
+        content = children(_this.props.state);
+      }
+
+      var Component = _this.getComponent();
+
+      return /*#__PURE__*/React.createElement(Component, _extends({
+        "data-tid": MenuItemDataTids.root
+      }, rest, {
+        state: state,
+        onMouseOver: _this.handleMouseEnterFix,
+        onMouseLeave: _this.handleMouseLeave,
+        className: className,
+        tabIndex: -1
+      }), iconElement, content, _this.props.comment && /*#__PURE__*/React.createElement("div", {
+        "data-tid": MenuItemDataTids.comment,
+        className: cx((_cx2 = {}, _cx2[styles.comment(_this.theme)] = true, _cx2[styles.commentHover(_this.theme)] = hover, _cx2))
+      }, comment));
+    };
+
     _this.handleMouseEnterFix = function (e) {
       if (!_this.mouseEntered && _this.props.onMouseEnter) {
         _this.mouseEntered = true;
@@ -73,74 +132,21 @@ export var MenuItem = /*#__PURE__*/function (_React$Component) {
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
-      return _this2.renderMain();
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), _this2.renderMain);
     });
   };
 
-  _proto.renderMain = function renderMain() {
-    var _cn, _cn2;
-
-    var _this$props2 = this.props,
-        alkoLink = _this$props2.alkoLink,
-        link = _this$props2.link,
-        comment = _this$props2.comment,
-        icon = _this$props2.icon,
-        loose = _this$props2.loose,
-        state = _this$props2.state,
-        children = _this$props2.children,
-        _enableIconPadding = _this$props2._enableIconPadding,
-        component = _this$props2.component,
-        onMouseEnter = _this$props2.onMouseEnter,
-        onMouseLeave = _this$props2.onMouseLeave,
-        rest = _objectWithoutPropertiesLoose(_this$props2, ["alkoLink", "link", "comment", "icon", "loose", "state", "children", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave"]);
-
-    warning(alkoLink === undefined, "[MenuItem]: Prop 'alkoLink' was deprecated please use 'link' instead");
-    var hover = state === 'hover' && !this.props.disabled;
-    var iconElement = null;
-
-    if (icon) {
-      iconElement = /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.icon()
-      }, icon);
-    }
-
-    var className = cn((_cn = {}, _cn[jsStyles.root()] = true, _cn[jsStyles.loose()] = !!loose, _cn[jsStyles.hover(this.theme)] = hover, _cn[jsStyles.selected(this.theme)] = state === 'selected', _cn[jsStyles.link(this.theme)] = !!link || !!alkoLink, _cn[jsStyles.withIcon(this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cn[jsStyles.disabled(this.theme)] = !!this.props.disabled, _cn));
-    var content = children;
-
-    if (isFunction(children)) {
-      content = children(this.props.state);
-    }
-
-    var Component = this.getComponent();
-    return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-      state: state,
-      onMouseOver: this.handleMouseEnterFix,
-      onMouseLeave: this.handleMouseLeave,
-      className: className,
-      tabIndex: -1
-    }), iconElement, content, this.props.comment && /*#__PURE__*/React.createElement("div", {
-      "data-tid": "MenuItem__comment",
-      className: cn((_cn2 = {}, _cn2[jsStyles.comment()] = true, _cn2[jsStyles.commentHover()] = hover, _cn2))
-    }, comment));
-  } // https://github.com/facebook/react/issues/10109
-  // Mouseenter event not triggered when cursor moves from disabled button
-  ;
-
   return MenuItem;
-}(React.Component);
-MenuItem.__KONTUR_REACT_UI__ = 'MenuItem';
-MenuItem.__MENU_ITEM__ = true;
-MenuItem.propTypes = {
-  alkoLink: PropTypes.bool,
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = {
   comment: PropTypes.node,
   disabled: PropTypes.bool,
   href: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node,
   loose: PropTypes.bool,
   state: PropTypes.string,
   target: PropTypes.string,
   onClick: PropTypes.func
-};
-export var isMenuItem = function isMenuItem(child) {
-  return /*#__PURE__*/React.isValidElement(child) ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__') : false;
-};
+}, _temp)) || _class;
+export var isMenuItem = isReactUIComponent('MenuItem');

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","warning","cn","isFunction","ThemeContext","jsStyles","MenuItem","theme","mouseEntered","handleMouseEnterFix","e","props","onMouseEnter","handleMouseLeave","onMouseLeave","getComponent","disabled","component","href","render","renderMain","alkoLink","link","comment","icon","loose","state","children","_enableIconPadding","rest","undefined","hover","iconElement","className","root","selected","withIcon","Boolean","content","Component","commentHover","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","bool","node","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 warning from 'warning';\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\n\r\nimport { jsStyles } from './MenuItem.styles';\r\n\r\nexport type MenuItemState = null | 'hover' | 'selected' | void;\r\n\r\nexport interface MenuItemProps {\r\n  /** @ignore */\r\n  _enableIconPadding?: boolean;\r\n\r\n  /** @deprecated @ignore */\r\n  alkoLink?: boolean;\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    alkoLink: PropTypes.bool,\r\n\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 this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      alkoLink,\r\n      link,\r\n      comment,\r\n      icon,\r\n      loose,\r\n      state,\r\n      children,\r\n      _enableIconPadding,\r\n      component,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      ...rest\r\n    } = this.props;\r\n\r\n    warning(alkoLink === undefined, \"[MenuItem]: Prop 'alkoLink' was deprecated please use 'link' instead\");\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()}>{icon}</div>;\r\n    }\r\n\r\n    const className = cn({\r\n      [jsStyles.root()]: 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 || !!alkoLink,\r\n      [jsStyles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\r\n      [jsStyles.disabled(this.theme)]: !!this.props.disabled,\r\n    });\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()]: true,\r\n              [jsStyles.commentHover()]: 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":["React","PropTypes","isFunction","isReactUIComponent","ThemeContext","CommonWrapper","cx","rootNode","styles","MenuItemDataTids","root","comment","MenuItem","mouseEntered","renderMain","props","link","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rest","hover","disabled","iconElement","theme","className","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","setRootNode","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","node","bool","string","target","onClick","func","isMenuItem"],"mappings":"4YAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,UAAT,EAAqBC,kBAArB,QAA+C,iBAA/C;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,sCAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,OAAO,IAAMC,gBAAgB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,gBADwB;AAE9BC,EAAAA,OAAO,EAAE,mBAFqB,EAAzB;;;AAKP;AACA;AACA;AACA;AACA;AACA;;AAEA,WAAaC,QAAb,GADCL,QACD;;;;;;;;;;;;;;;;;;;;;;;AAuBUM,IAAAA,YAvBV,GAuByB,KAvBzB;;;;;;;;;;;;;;;;;;AAyCUC,IAAAA,UAzCV,GAyCuB,UAACC,KAAD,EAAkD;AACrE;AACEC,MAAAA,IADF;;;;;;;;;;;AAYID,MAAAA,KAZJ,CACEC,IADF,CAEEL,OAFF,GAYII,KAZJ,CAEEJ,OAFF,CAGEM,IAHF,GAYIF,KAZJ,CAGEE,IAHF,CAIEC,KAJF,GAYIH,KAZJ,CAIEG,KAJF,CAKEC,KALF,GAYIJ,KAZJ,CAKEI,KALF,CAMEC,kBANF,GAYIL,KAZJ,CAMEK,kBANF,CAOEC,SAPF,GAYIN,KAZJ,CAOEM,SAPF,CAQEC,YARF,GAYIP,KAZJ,CAQEO,YARF,CASEC,YATF,GAYIR,KAZJ,CASEQ,YATF,CAUEC,QAVF,GAYIT,KAZJ,CAUES,QAVF,CAWKC,IAXL,iCAYIV,KAZJ;;AAcA,UAAMW,KAAK,GAAGP,KAAK,KAAK,OAAV,IAAqB,CAAC,MAAKJ,KAAL,CAAWY,QAA/C;;AAEA,UAAIC,WAAW,GAAG,IAAlB;AACA,UAAIX,IAAJ,EAAU;AACRW,QAAAA,WAAW,gBAAG,6BAAK,SAAS,EAAEpB,MAAM,CAACS,IAAP,CAAY,MAAKY,KAAjB,CAAhB,IAA0CZ,IAA1C,CAAd;AACD;;AAED,UAAMa,SAAS,GAAGxB,EAAE;AACjBE,MAAAA,MAAM,CAACE,IAAP,CAAY,MAAKmB,KAAjB,CADiB,IACS,IADT;AAEjBrB,MAAAA,MAAM,CAACuB,UAAP,CAAkB,MAAKF,KAAvB,CAFiB,IAEeL,QAFf;AAGjBhB,MAAAA,MAAM,CAACU,KAAP,EAHiB,IAGA,CAAC,CAACA,KAHF;AAIjBV,MAAAA,MAAM,CAACkB,KAAP,CAAa,MAAKG,KAAlB,CAJiB,IAIUH,KAJV;AAKjBlB,MAAAA,MAAM,CAACwB,QAAP,CAAgB,MAAKH,KAArB,CALiB,IAKaV,KAAK,KAAK,UALvB;AAMjBX,MAAAA,MAAM,CAACQ,IAAP,CAAY,MAAKa,KAAjB,CANiB,IAMS,CAAC,CAACb,IANX;AAOjBR,MAAAA,MAAM,CAACyB,QAAP,CAAgB,MAAKJ,KAArB,CAPiB,IAOaK,OAAO,CAACN,WAAD,CAAP,IAAwB,CAAC,CAACR,kBAPvC;AAQjBZ,MAAAA,MAAM,CAACmB,QAAP,CAAgB,MAAKE,KAArB,CARiB,IAQa,CAAC,CAAC,MAAKd,KAAL,CAAWY,QAR1B,OAApB;;;AAWA,UAAQQ,QAAR,GAAqB,MAAKpB,KAA1B,CAAQoB,QAAR;;AAEA,UAAIC,OAAO,GAAGD,QAAd;AACA,UAAIjC,UAAU,CAACiC,QAAD,CAAd,EAA0B;AACxBC,QAAAA,OAAO,GAAGD,QAAQ,CAAC,MAAKpB,KAAL,CAAWI,KAAZ,CAAlB;AACD;;AAED,UAAMkB,SAAS,GAAG,MAAKC,YAAL,EAAlB;;AAEA;AACE,4BAAC,SAAD;AACE,sBAAU7B,gBAAgB,CAACC,IAD7B;AAEMe,QAAAA,IAFN;AAGE,UAAA,KAAK,EAAEN,KAHT;AAIE,UAAA,WAAW,EAAE,MAAKoB,mBAJpB;AAKE,UAAA,YAAY,EAAE,MAAKC,gBALrB;AAME,UAAA,SAAS,EAAEV,SANb;AAOE,UAAA,QAAQ,EAAE,CAAC,CAPb;;AASGF,QAAAA,WATH;AAUGQ,QAAAA,OAVH;AAWG,cAAKrB,KAAL,CAAWJ,OAAX;AACC;AACE,sBAAUF,gBAAgB,CAACE,OAD7B;AAEE,UAAA,SAAS,EAAEL,EAAE;AACVE,UAAAA,MAAM,CAACG,OAAP,CAAe,MAAKkB,KAApB,CADU,IACmB,IADnB;AAEVrB,UAAAA,MAAM,CAACiC,YAAP,CAAoB,MAAKZ,KAAzB,CAFU,IAEwBH,KAFxB,QAFf;;;AAOGf,QAAAA,OAPH,CAZJ,CADF;;;;;AAyBD,KA5GH;;;;AAgHU4B,IAAAA,mBAhHV,GAgHgC,UAACG,CAAD,EAAsC;AAClE,UAAI,CAAC,MAAK7B,YAAN,IAAsB,MAAKE,KAAL,CAAWO,YAArC,EAAmD;AACjD,cAAKT,YAAL,GAAoB,IAApB;AACA,cAAKE,KAAL,CAAWO,YAAX,CAAwBoB,CAAxB;AACD;AACF,KArHH;;AAuHUF,IAAAA,gBAvHV,GAuH6B,UAACE,CAAD,EAAsC;AAC/D,YAAK7B,YAAL,GAAoB,KAApB;AACA,UAAI,MAAKE,KAAL,CAAWQ,YAAf,EAA6B;AAC3B,cAAKR,KAAL,CAAWQ,YAAX,CAAwBmB,CAAxB;AACD;AACF,KA5HH;;AA8HUJ,IAAAA,YA9HV,GA8HyB,YAAM;AAC3B,wBAAsC,MAAKvB,KAA3C,CAAQY,QAAR,eAAQA,QAAR,CAAkBN,SAAlB,eAAkBA,SAAlB,CAA6BsB,IAA7B,eAA6BA,IAA7B;;AAEA,UAAIhB,QAAJ,EAAc;AACZ,eAAO,QAAP;AACD;;AAED,UAAIN,SAAJ,EAAe;AACb,eAAOA,SAAP;AACD;;AAED,UAAIsB,IAAJ,EAAU;AACR,eAAO,GAAP;AACD;;AAED,aAAO,QAAP;AACD,KA9IH,sDA0BSC,MA1BT,GA0BE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACf,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACgB,WAAjC,IAAkD,MAAI,CAAC9B,KAAvD,GACG,MAAI,CAACD,UADR,CADF,CAKD,CARH,CADF,CAYD,CAvCH,mBAA8Bd,KAAK,CAACqC,SAApC,WACgBS,mBADhB,GACsC,UADtC,UAEgBC,aAFhB,GAEgC,IAFhC,UAIgBC,SAJhB,GAI4B,EACxBrC,OAAO,EAAEV,SAAS,CAACgD,IADK,EAGxBtB,QAAQ,EAAE1B,SAAS,CAACiD,IAHI,EAKxBP,IAAI,EAAE1C,SAAS,CAACkD,MALQ,EAOxBlC,IAAI,EAAEhB,SAAS,CAACgD,IAPQ,EASxB/B,KAAK,EAAEjB,SAAS,CAACiD,IATO,EAWxB/B,KAAK,EAAElB,SAAS,CAACkD,MAXO,EAaxBC,MAAM,EAAEnD,SAAS,CAACkD,MAbM,EAexBE,OAAO,EAAEpD,SAAS,CAACqD,IAfK,EAJ5B;;;AAiJA,OAAO,IAAMC,UAAU,GAAGpD,kBAAkB,CAAC,UAAD,CAArC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction, 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/rootNodeDecorator';\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\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\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\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  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        data-tid={MenuItemDataTids.root}\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={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 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 = isReactUIComponent('MenuItem');\n"]}

package/components/MenuItem/MenuItem.d.ts

@@ -1,40 +1,87 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuItemState = null | 'hover' | 'selected' | void;
-export interface MenuItemProps {
-    /** @ignore */
+export interface MenuItemProps extends CommonProps {
+    /**
+     * @ignore
+     */
     _enableIconPadding?: boolean;
-    /** @deprecated @ignore */
-    alkoLink?: 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;
 }
+export declare const MenuItemDataTids: {
+    readonly root: "MenuItem__root";
+    readonly comment: "MenuItem__comment";
+};
 /**
- * Элемент меню.
+ *
+ * `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;
     static __MENU_ITEM__: boolean;
     static propTypes: {
-        alkoLink: PropTypes.Requireable<boolean>;
         comment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         loose: PropTypes.Requireable<boolean>;
         state: PropTypes.Requireable<string>;
         target: PropTypes.Requireable<string>;
@@ -42,10 +89,11 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
     };
     private theme;
     private mouseEntered;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private handleMouseEnterFix;
     private handleMouseLeave;
     private getComponent;
 }
-export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<MenuItemProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/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/components/MenuItem/MenuItem.styles/MenuItem.styles.js

@@ -1,138 +1,46 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      left: 15px;\n      top: 5px;\n    "]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: #fff;\n      opacity: 0.6;\n    "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: #a0a0a0;\n      white-space: normal;\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      & {\n        padding-left: ", ";\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", " !important;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: 18px;\n      padding: 6px 18px 7px 8px;\n      position: relative;\n      text-decoration: none;\n\n      button& {\n        min-width: 100%;\n      }\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-var styles = {
-  root: function root() {
-    return css(_templateObject(), resetButton());
+export var styles = memoizeStyle({
+  root: function root(t) {
+    var legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);
+    var legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);
+    var paddingX = legacyPaddingX !== 0 ? parseFloat(t.menuItemPaddingX) + legacyPaddingX + "px" : t.menuItemPaddingX;
+    var paddingY = legacyPaddingY !== 0 ? parseFloat(t.menuItemPaddingY) + legacyPaddingY + "px" : t.menuItemPaddingY;
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.fontSizeMobile, t.lineHeightMobile, t.menuItemPaddingMobile);
   },
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
-    return css(_templateObject2(), t.dropdownMenuHoverBg, t.textColorInvert);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
   },
   selected: function selected(t) {
-    return css(_templateObject3(), t.dropdownMenuSelectedBg);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject4(), t.textColorDisabled);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledColor);
   },
   link: function link(t) {
-    return css(_templateObject5(), t.linkColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
   },
   loose: function loose() {
-    return css(_templateObject6());
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
   },
   withIcon: function withIcon(t) {
-    return css(_templateObject7(), t.menuItemPaddingForIcon);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.menuItemPaddingForIcon);
   },
-  comment: function comment() {
-    return css(_templateObject8());
+  comment: function comment(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor);
   },
-  commentHover: function commentHover() {
-    return css(_templateObject9());
+  commentHover: function commentHover(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
-  icon: function icon() {
-    return css(_templateObject10());
+  icon: function icon(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      top: ", ";\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemPaddingY, t.menuItemIconLegacyShift);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","hover","t","dropdownMenuHoverBg","textColorInvert","selected","dropdownMenuSelectedBg","disabled","textColorDisabled","link","linkColor","loose","withIcon","menuItemPaddingForIcon","comment","commentHover","icon","jsStyles"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;AACA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOJ,GAAP;AACIE,IAAAA,WAAW,EADf;;;;;;;;;;;;;AAcD,GAhBY;AAiBbG,EAAAA,KAjBa,iBAiBPC,CAjBO,EAiBG;AACd;AACA,WAAON,GAAP;AACgBM,IAAAA,CAAC,CAACC,mBADlB;AAEWD,IAAAA,CAAC,CAACE,eAFb;;AAID,GAvBY;AAwBbC,EAAAA,QAxBa,oBAwBJH,CAxBI,EAwBM;AACjB,WAAON,GAAP;AACgBM,IAAAA,CAAC,CAACI,sBADlB;;AAGD,GA5BY;AA6BbC,EAAAA,QA7Ba,oBA6BJL,CA7BI,EA6BM;AACjB,WAAON,GAAP;;AAEWM,IAAAA,CAAC,CAACM,iBAFb;;;AAKD,GAnCY;AAoCbC,EAAAA,IApCa,gBAoCRP,CApCQ,EAoCE;AACb,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACQ,SADb;;AAGD,GAxCY;AAyCbC,EAAAA,KAzCa,mBAyCL;AACN,WAAOf,GAAP;;;AAGD,GA7CY;AA8CbgB,EAAAA,QA9Ca,oBA8CJV,CA9CI,EA8CM;AACjB,WAAON,GAAP;;AAEoBM,IAAAA,CAAC,CAACW,sBAFtB;;;AAKD,GApDY;AAqDbC,EAAAA,OArDa,qBAqDH;AACR,WAAOlB,GAAP;;;;AAID,GA1DY;AA2DbmB,EAAAA,YA3Da,0BA2DE;AACb,WAAOnB,GAAP;;;;AAID,GAhEY;AAiEboB,EAAAA,IAjEa,kBAiEN;AACL,WAAOpB,GAAP;;;;;;AAMD,GAxEY,EAAf;;;AA2EA,OAAO,IAAMqB,QAAQ,GAAGpB,YAAY,CAACE,MAAD,CAA7B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { resetButton } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      ${resetButton()};\r\n\r\n      cursor: pointer;\r\n      display: block;\r\n      line-height: 18px;\r\n      padding: 6px 18px 7px 8px;\r\n      position: relative;\r\n      text-decoration: none;\r\n\r\n      button& {\r\n        min-width: 100%;\r\n      }\r\n    `;\r\n  },\r\n  hover(t: Theme) {\r\n    // Color with !important in purpose to override `a:hover`\r\n    return css`\r\n      background: ${t.dropdownMenuHoverBg};\r\n      color: ${t.textColorInvert} !important;\r\n    `;\r\n  },\r\n  selected(t: Theme) {\r\n    return css`\r\n      background: ${t.dropdownMenuSelectedBg};\r\n    `;\r\n  },\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: transparent;\r\n      color: ${t.textColorDisabled};\r\n      cursor: default;\r\n    `;\r\n  },\r\n  link(t: Theme) {\r\n    return css`\r\n      color: ${t.linkColor};\r\n    `;\r\n  },\r\n  loose() {\r\n    return css`\r\n      padding-left: 15px;\r\n    `;\r\n  },\r\n  withIcon(t: Theme) {\r\n    return css`\r\n      & {\r\n        padding-left: ${t.menuItemPaddingForIcon};\r\n      }\r\n    `;\r\n  },\r\n  comment() {\r\n    return css`\r\n      color: #a0a0a0;\r\n      white-space: normal;\r\n    `;\r\n  },\r\n  commentHover() {\r\n    return css`\r\n      color: #fff;\r\n      opacity: 0.6;\r\n    `;\r\n  },\r\n  icon() {\r\n    return css`\r\n      display: inline-block;\r\n      position: absolute;\r\n      left: 15px;\r\n      top: 5px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","fontSizeMobile","lineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);\n    const legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);\n\n    const paddingX = legacyPaddingX !== 0 ? `${parseFloat(t.menuItemPaddingX) + legacyPaddingX}px` : t.menuItemPaddingX;\n    const paddingY = legacyPaddingY !== 0 ? `${parseFloat(t.menuItemPaddingY) + legacyPaddingY}px` : t.menuItemPaddingY;\n\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: block;\n      line-height: ${t.menuItemLineHeight};\n      font-size: ${t.menuItemFontSize};\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.fontSizeMobile};\n      line-height: ${t.lineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: transparent;\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      top: ${t.menuItemPaddingY};\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n});\n"]}