@skbkontur/react-ui 3.7.2 → 3.8.3

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isFunction","ThemeContext","CommonWrapper","cx","styles","MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","__KONTUR_REACT_UI__","__MENU_ITEM__","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  /** @ignore */\n  _enableIconPadding?: boolean;\n\n  comment?: React.ReactNode;\n  disabled?: boolean;\n  icon?: React.ReactElement<any>;\n  link?: boolean;\n\n  /** @ignore */\n  loose?: boolean;\n\n  /** @ignore */\n  state?: MenuItemState;\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  onMouseEnter?: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n\n  component?: React.ComponentType<any>;\n}\n\n/**\n * Элемент меню.\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 { link, comment, icon, loose, state, _enableIconPadding, component, onMouseEnter, onMouseLeave, ...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.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"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isFunction","ThemeContext","CommonWrapper","cx","styles","MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"oOAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;;AAEA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,QAAb;;;;;;;;;;;;;;;;;;;;;;AAsBUC,IAAAA,KAtBV;AAuBUC,IAAAA,YAvBV,GAuByB,KAvBzB;;;;;;;;;;;;;AAoCUC,IAAAA,UApCV,GAoCuB,UAACC,KAAD,EAAkD;AAC7DC,MAAAA,IAD6D;AAEnED,MAAAA,KAFmE,CAC7DC,IAD6D,CACvDC,OADuD,GAEnEF,KAFmE,CACvDE,OADuD,CAC9CC,IAD8C,GAEnEH,KAFmE,CAC9CG,IAD8C,CACxCC,KADwC,GAEnEJ,KAFmE,CACxCI,KADwC,CACjCC,KADiC,GAEnEL,KAFmE,CACjCK,KADiC,CAC1BC,kBAD0B,GAEnEN,KAFmE,CAC1BM,kBAD0B,CACNC,SADM,GAEnEP,KAFmE,CACNO,SADM,CACKC,YADL,GAEnER,KAFmE,CACKQ,YADL,CACmBC,YADnB,GAEnET,KAFmE,CACmBS,YADnB,CACoCC,IADpC,iCAEnEV,KAFmE;;AAIrE,UAAMW,KAAK,GAAGN,KAAK,KAAK,OAAV,IAAqB,CAAC,MAAKL,KAAL,CAAWY,QAA/C;;AAEA,UAAIC,WAAW,GAAG,IAAlB;AACA,UAAIV,IAAJ,EAAU;AACRU,QAAAA,WAAW,gBAAG,6BAAK,SAAS,EAAElB,MAAM,CAACQ,IAAP,CAAY,MAAKN,KAAjB,CAAhB,IAA0CM,IAA1C,CAAd;AACD;;AAED,UAAMW,SAAS,GAAGpB,EAAE;AACjBC,MAAAA,MAAM,CAACoB,IAAP,CAAY,MAAKlB,KAAjB,CADiB,IACS,IADT;AAEjBF,MAAAA,MAAM,CAACS,KAAP,EAFiB,IAEA,CAAC,CAACA,KAFF;AAGjBT,MAAAA,MAAM,CAACgB,KAAP,CAAa,MAAKd,KAAlB,CAHiB,IAGUc,KAHV;AAIjBhB,MAAAA,MAAM,CAACqB,QAAP,CAAgB,MAAKnB,KAArB,CAJiB,IAIaQ,KAAK,KAAK,UAJvB;AAKjBV,MAAAA,MAAM,CAACM,IAAP,CAAY,MAAKJ,KAAjB,CALiB,IAKS,CAAC,CAACI,IALX;AAMjBN,MAAAA,MAAM,CAACsB,QAAP,CAAgB,MAAKpB,KAArB,CANiB,IAMaqB,OAAO,CAACL,WAAD,CAAP,IAAwB,CAAC,CAACP,kBANvC;AAOjBX,MAAAA,MAAM,CAACiB,QAAP,CAAgB,MAAKf,KAArB,CAPiB,IAOa,CAAC,CAAC,MAAKG,KAAL,CAAWY,QAP1B,OAApB,CAXqE;;;AAqB7DO,MAAAA,QArB6D,GAqBhD,MAAKnB,KArB2C,CAqB7DmB,QArB6D;;AAuBrE,UAAIC,OAAO,GAAGD,QAAd;AACA,UAAI5B,UAAU,CAAC4B,QAAD,CAAd,EAA0B;AACxBC,QAAAA,OAAO,GAAGD,QAAQ,CAAC,MAAKnB,KAAL,CAAWK,KAAZ,CAAlB;AACD;;AAED,UAAMgB,SAAS,GAAG,MAAKC,YAAL,EAAlB;;AAEA;AACE,4BAAC,SAAD;AACMZ,QAAAA,IADN;AAEE,UAAA,KAAK,EAAEL,KAFT;AAGE,UAAA,WAAW,EAAE,MAAKkB,mBAHpB;AAIE,UAAA,YAAY,EAAE,MAAKC,gBAJrB;AAKE,UAAA,SAAS,EAAEV,SALb;AAME,UAAA,QAAQ,EAAE,CAAC,CANb;;AAQGD,QAAAA,WARH;AASGO,QAAAA,OATH;AAUG,cAAKpB,KAAL,CAAWE,OAAX;AACC;AACE,sBAAS,mBADX;AAEE,UAAA,SAAS,EAAER,EAAE;AACVC,UAAAA,MAAM,CAACO,OAAP,CAAe,MAAKL,KAApB,CADU,IACmB,IADnB;AAEVF,UAAAA,MAAM,CAAC8B,YAAP,CAAoB,MAAK5B,KAAzB,CAFU,IAEwBc,KAFxB,QAFf;;;AAOGT,QAAAA,OAPH,CAXJ,CADF;;;;;AAwBD,KA1FH;;;;AA8FUqB,IAAAA,mBA9FV,GA8FgC,UAACG,CAAD,EAAsC;AAClE,UAAI,CAAC,MAAK5B,YAAN,IAAsB,MAAKE,KAAL,CAAWQ,YAArC,EAAmD;AACjD,cAAKV,YAAL,GAAoB,IAApB;AACA,cAAKE,KAAL,CAAWQ,YAAX,CAAwBkB,CAAxB;AACD;AACF,KAnGH;;AAqGUF,IAAAA,gBArGV,GAqG6B,UAACE,CAAD,EAAsC;AAC/D,YAAK5B,YAAL,GAAoB,KAApB;AACA,UAAI,MAAKE,KAAL,CAAWS,YAAf,EAA6B;AAC3B,cAAKT,KAAL,CAAWS,YAAX,CAAwBiB,CAAxB;AACD;AACF,KA1GH;;AA4GUJ,IAAAA,YA5GV,GA4GyB,YAAM;AACW,YAAKtB,KADhB,CACnBY,QADmB,eACnBA,QADmB,CACTL,SADS,eACTA,SADS,CACEoB,IADF,eACEA,IADF;;AAG3B,UAAIf,QAAJ,EAAc;AACZ,eAAO,QAAP;AACD;;AAED,UAAIL,SAAJ,EAAe;AACb,eAAOA,SAAP;AACD;;AAED,UAAIoB,IAAJ,EAAU;AACR,eAAO,GAAP;AACD;;AAED,aAAO,QAAP;AACD,KA5HH,sDAyBSC,MAzBT,GAyBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAC/B,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACG,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CAlCH,mBAA8BV,KAAK,CAACgC,SAApC,EAAazB,Q,CACGiC,mB,GAAsB,U,CADzBjC,Q,CAEGkC,a,GAAgB,I,CAFnBlC,Q,CAIGmC,S,GAAY,EACxB7B,OAAO,EAAEZ,SAAS,CAAC0C,IADK,EAGxBpB,QAAQ,EAAEtB,SAAS,CAAC2C,IAHI,EAKxBN,IAAI,EAAErC,SAAS,CAAC4C,MALQ,EAOxB/B,IAAI,EAAEb,SAAS,CAAC6C,SAAV,CAAoB,CAAC7C,SAAS,CAAC4C,MAAX,EAAmB5C,SAAS,CAAC0C,IAA7B,CAApB,CAPkB,EASxB5B,KAAK,EAAEd,SAAS,CAAC2C,IATO,EAWxB5B,KAAK,EAAEf,SAAS,CAAC4C,MAXO,EAaxBE,MAAM,EAAE9C,SAAS,CAAC4C,MAbM,EAexBG,OAAO,EAAE/C,SAAS,CAACgD,IAfK,E;;;AA2H5B,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAAwE;AAChG,SAAO,aAAAnD,KAAK,CAACoD,cAAN,CAAoCD,KAApC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,eAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","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  /** @ignore */\n  _enableIconPadding?: boolean;\n\n  comment?: React.ReactNode;\n  disabled?: boolean;\n  icon?: React.ReactElement<any>;\n\n  /**\n   * Меняет цвет текста на синий\n   */\n  link?: boolean;\n\n  /** @ignore */\n  loose?: boolean;\n\n  /** @ignore */\n  state?: MenuItemState;\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут title\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  onMouseEnter?: React.MouseEventHandler;\n  onMouseLeave?: React.MouseEventHandler;\n\n  component?: React.ComponentType<any>;\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 { link, comment, icon, loose, state, _enableIconPadding, component, onMouseEnter, onMouseLeave, ...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.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/components/MenuItem/MenuItem.d.ts

@@ -8,6 +8,9 @@ export interface MenuItemProps extends CommonProps {
     comment?: React.ReactNode;
     disabled?: boolean;
     icon?: React.ReactElement<any>;
+    /**
+     * Меняет цвет текста на синий
+     */
     link?: boolean;
     /** @ignore */
     loose?: boolean;
@@ -16,6 +19,9 @@ export interface MenuItemProps extends CommonProps {
     onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
     children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * HTML-атрибут title
+     */
     title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
     onMouseEnter?: React.MouseEventHandler;
@@ -23,7 +29,10 @@ export interface MenuItemProps extends CommonProps {
     component?: React.ComponentType<any>;
 }
 /**
- * Элемент меню.
+ *
+ * `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/components/MenuItem/MenuItem.md

@@ -1,7 +1,109 @@
+Меню с базовыми элементами меню.
+
+```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 { Link } from '@skbkontur/react-ui';
+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>
+}
 
-<MenuItem href="//tech.skbkontur.ru/react-ui/" component={({ href, ...rest }) => <Link to={href} {...rest} />}>
-  Awesome link
-</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/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -3,7 +3,9 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { styles } from "../MenuSeparator.styles";
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 
 function MenuSeparator(props) {

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","styles","MenuSeparator","props","theme","root","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;AAGA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGN,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBI,KAAnB;AACE,iCAAK,SAAS,EAAEF,MAAM,CAACI,IAAP,CAAYD,KAAZ,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACI,mBAAd,GAAoC,eAApC;;AAEA,SAASJ,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n/**\n * Разделитель в меню.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <div className={styles.root(theme)} />\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","styles","MenuSeparator","props","theme","root","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGN,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBI,KAAnB;AACE,iCAAK,SAAS,EAAEF,MAAM,CAACI,IAAP,CAAYD,KAAZ,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACI,mBAAd,GAAoC,eAApC;;AAEA,SAASJ,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <div className={styles.root(theme)} />\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,7 +1,9 @@
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuSeparatorProps = CommonProps;
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {

package/components/MenuSeparator/MenuSeparator.md

@@ -0,0 +1,14 @@
+Пример меню с разделителями.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
+  <MenuItem>У меня есть разделитель</MenuItem>
+  <MenuSeparator />
+  <MenuItem>У меня тоже!</MenuItem>
+  <MenuSeparator />
+  <MenuItem>А у меня нет :(</MenuItem>
+  <MenuItem>Как и у меня :(</MenuItem>
+</DropdownMenu>;
+```

package/components/Modal/Modal.styles/Modal.styles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
@@ -25,7 +25,7 @@ export var styles = memoizeStyle({
   },
   close: function close(t) {
     var padding = parseInt(t.modalCloseButtonPadding);
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        outline: 2px solid ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), padding, padding, t.modalCloseButtonColor, t.modalCloseButtonClickArea, t.modalCloseButtonClickArea, t.modalCloseButtonHoverColor, t.borderColorFocus, t.modalCloseIconSize, t.modalCloseIconSize);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), padding, padding, t.modalCloseButtonColor, t.modalCloseButtonClickArea, t.modalCloseButtonClickArea, t.modalCloseButtonHoverColor, t.modalCloseIconSize, t.modalCloseIconSize);
   },
   closeWrapper: function closeWrapper(t) {
     var padding = parseInt(t.modalCloseButtonPadding);
@@ -39,44 +39,47 @@ export var styles = memoizeStyle({
   disabled: function disabled(t) {
     return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
   },
+  focus: function focus(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
+  },
   headerWrapper: function headerWrapper() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
   },
   header: function header(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor);
   },
   body: function body(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " ", " ", ";\n    "])), t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " ", " ", ";\n    "])), t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft);
   },
   headerWithClose: function headerWithClose(t) {
     var rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
   },
   footer: function footer(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft);
   },
   footerWrapper: function footerWrapper() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
   },
   panel: function panel(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
   },
   fixedHeader: function fixedHeader(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderPaddingBottom, t.modalFixedHeaderBg, t.modalFixedHeaderShadow);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderPaddingBottom, t.modalFixedHeaderBg, t.modalFixedHeaderShadow);
   },
   fixedFooter: function fixedFooter(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderBg, t.modalFixedFooterShadow);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderBg, t.modalFixedFooterShadow);
   },
   headerAddPadding: function headerAddPadding() {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 22px;\n    "])));
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 22px;\n    "])));
   },
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
   },
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
   },
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
   }
 });

package/components/Modal/Modal.styles/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","borderColorFocus","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ${t.bgDefault};\n    `;\n  },\n\n  centerContainer(t: Theme) {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\n\n      &:focus,\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      &:focus {\n        outline: 2px solid ${t.borderColorFocus};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ${t.bgDefault};\n    `;\n  },\n\n  centerContainer(t: Theme) {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\n\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n});\n"]}

package/components/Modal/Modal.styles.d.ts

@@ -9,6 +9,7 @@ export declare const styles: {
     close(t: Theme): string;
     closeWrapper(t: Theme): string;
     disabled(t: Theme): string;
+    focus(t: Theme): string;
     headerWrapper(): string;
     header(t: Theme): string;
     body(t: Theme): string;

package/components/Modal/ModalClose/ModalClose.js

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
 import { styles } from "../Modal.styles";
 export function ModalClose(_ref) {
   var _cx;
@@ -9,9 +10,31 @@ export function ModalClose(_ref) {
   var disableClose = _ref.disableClose,
       requestClose = _ref.requestClose;
   var theme = useContext(ThemeContext);
+
+  var _React$useState = React.useState(false),
+      focusedByTab = _React$useState[0],
+      setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setFocusedByTab(false);
+  };
+
   return /*#__PURE__*/React.createElement("button", {
-    className: cx((_cx = {}, _cx[styles.close(theme)] = true, _cx[styles.disabled(theme)] = disableClose, _cx)),
+    className: cx((_cx = {}, _cx[styles.close(theme)] = true, _cx[styles.disabled(theme)] = disableClose, _cx[styles.focus(theme)] = focusedByTab, _cx)),
     onClick: requestClose,
-    "data-tid": "modal-close"
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    "data-tid": "modal-close",
+    tabIndex: disableClose ? -1 : 0
   }, /*#__PURE__*/React.createElement(CrossIcon, null));
 }

package/components/Modal/ModalClose/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","ThemeContext","CrossIcon","cx","styles","ModalClose","disableClose","requestClose","theme","close","disabled"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,MAAT,QAAuB,gBAAvB;;AAEA,OAAO,SAASC,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAGR,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAEE,EAAE;AACVC,MAAAA,MAAM,CAACK,KAAP,CAAaD,KAAb,CADU,IACY,IADZ;AAEVJ,MAAAA,MAAM,CAACM,QAAP,CAAgBF,KAAhB,CAFU,IAEeF,YAFf,OADf;;AAKE,MAAA,OAAO,EAAEC,YALX;AAME,kBAAS,aANX;;AAQE,wBAAC,SAAD,OARF,CADF;;;AAYD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <button\n      className={cx({\n        [styles.close(theme)]: true,\n        [styles.disabled(theme)]: disableClose,\n      })}\n      onClick={requestClose}\n      data-tid=\"modal-close\"\n    >\n      <CrossIcon />\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","ThemeContext","CrossIcon","cx","keyListener","styles","ModalClose","disableClose","requestClose","theme","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","close","disabled","focus"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;;;AAGA,SAASC,MAAT,QAAuB,gBAAvB;;AAEA,OAAO,SAASC,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAGT,UAAU,CAACC,YAAD,CAAxB,CADqE;AAE7BF,EAAAA,KAAK,CAACW,QAAN,CAAe,KAAf,CAF6B,CAE9DC,YAF8D,sBAEhDC,eAFgD;;AAIrE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIV,WAAW,CAACW,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMI,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBJ,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA;AACE;AACE,MAAA,SAAS,EAAET,EAAE;AACVE,MAAAA,MAAM,CAACY,KAAP,CAAaR,KAAb,CADU,IACY,IADZ;AAEVJ,MAAAA,MAAM,CAACa,QAAP,CAAgBT,KAAhB,CAFU,IAEeF,YAFf;AAGVF,MAAAA,MAAM,CAACc,KAAP,CAAaV,KAAb,CAHU,IAGYE,YAHZ,OADf;;AAME,MAAA,OAAO,EAAEH,YANX;AAOE,MAAA,OAAO,EAAEK,WAPX;AAQE,MAAA,MAAM,EAAEG,UARV;AASE,kBAAS,aATX;AAUE,MAAA,QAAQ,EAAET,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAVhC;;AAYE,wBAAC,SAAD,OAZF,CADF;;;AAgBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\n  const theme = useContext(ThemeContext);\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  return (\n    <button\n      className={cx({\n        [styles.close(theme)]: true,\n        [styles.disabled(theme)]: disableClose,\n        [styles.focus(theme)]: focusedByTab,\n      })}\n      onClick={requestClose}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-tid=\"modal-close\"\n      tabIndex={disableClose ? -1 : 0}\n    >\n      <CrossIcon />\n    </button>\n  );\n}\n"]}

package/components/Textarea/Textarea/Textarea.js

@@ -41,7 +41,6 @@ export var Textarea = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
       polyfillPlaceholder: polyfillPlaceholder,
-      rows: 1,
       isCounterVisible: false
     };
 
@@ -367,7 +366,7 @@ export var Textarea = /*#__PURE__*/function (_React$Component) {
       this.autoResize = throttle(this.autoResizeHandler, this.getAutoResizeThrottleWait());
     }
 
-    if (this.props.autoResize && this.props.rows > this.state.rows || this.props.value !== prevProps.value) {
+    if (this.props.autoResize && (this.props.rows !== prevProps.rows || this.props.maxRows !== prevProps.maxRows || this.props.value !== prevProps.value)) {
       this.autoResize();
     }
   };