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

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

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

package/components/MenuItem/MenuItem.d.ts

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

package/components/MenuItem/MenuItem.md

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

package/components/MiniModal/MiniModal/MiniModal.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "theme"];
+import React, { useContext } from 'react';
+import { Modal } from "../../Modal";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { getMiniModalTheme } from "../getMiniModalTheme";
+import { MiniModalFooter } from "../MiniModalFooter";
+import { MiniModalHeader } from "../MiniModalHeader";
+import { MiniModalBody } from "../MiniModalBody";
+import { MiniModalIndent } from "../MiniModalIndent";
+export var MiniModalDataTids = {
+  icon: 'MiniModal__icon',
+  title: 'MiniModal__title',
+  description: 'MiniModal__description',
+  actions: 'MiniModal__actions',
+  indent: 'MiniModal__indent'
+};
+export var MiniModal = forwardRefAndName('MiniModal', function (_ref, ref) {
+  var children = _ref.children,
+      propsTheme = _ref.theme,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var contextTheme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: getMiniModalTheme(contextTheme, propsTheme)
+  }, /*#__PURE__*/React.createElement(Modal, _extends({
+    width: 400,
+    noClose: true,
+    ref: ref
+  }, rest), children));
+});
+MiniModal.__KONTUR_REACT_UI__ = 'MiniModal';
+MiniModal.Header = MiniModalHeader;
+MiniModal.Footer = MiniModalFooter;
+MiniModal.Indent = MiniModalIndent;
+MiniModal.Body = MiniModalBody;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.tsx"],"names":["React","useContext","Modal","ThemeContext","forwardRefAndName","getMiniModalTheme","MiniModalFooter","MiniModalHeader","MiniModalBody","MiniModalIndent","MiniModalDataTids","icon","title","description","actions","indent","MiniModal","ref","children","propsTheme","theme","rest","contextTheme","__KONTUR_REACT_UI__","Header","Footer","Indent","Body"],"mappings":"oMAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,KAAT,QAAkC,UAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;AAEA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,eAAT,QAAgC,mBAAhC;;AAEA,OAAO,IAAMC,iBAAiB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,iBADyB;AAE/BC,EAAAA,KAAK,EAAE,kBAFwB;AAG/BC,EAAAA,WAAW,EAAE,wBAHkB;AAI/BC,EAAAA,OAAO,EAAE,oBAJsB;AAK/BC,EAAAA,MAAM,EAAE,mBALuB,EAA1B;;;AAQP,OAAO,IAAMC,SAAS,GAAGZ,iBAAiB;;;;;;;;;AASxC,WATwC,EAS3B,gBAA2Ca,GAA3C,EAAmD,KAAhDC,QAAgD,QAAhDA,QAAgD,CAA/BC,UAA+B,QAAtCC,KAAsC,CAAhBC,IAAgB;AAChE,MAAMC,YAAY,GAAGrB,UAAU,CAACE,YAAD,CAA/B;;AAEA;AACE,wBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAEE,iBAAiB,CAACiB,YAAD,EAAeH,UAAf,CAA/C;AACE,wBAAC,KAAD,aAAO,KAAK,EAAE,GAAd,EAAmB,OAAO,MAA1B,EAA2B,GAAG,EAAEF,GAAhC,IAAyCI,IAAzC;AACGH,IAAAA,QADH,CADF,CADF;;;;AAOD,CAnByC,CAAnC;;AAqBPF,SAAS,CAACO,mBAAV,GAAgC,WAAhC;;AAEAP,SAAS,CAACQ,MAAV,GAAmBjB,eAAnB;AACAS,SAAS,CAACS,MAAV,GAAmBnB,eAAnB;AACAU,SAAS,CAACU,MAAV,GAAmBjB,eAAnB;AACAO,SAAS,CAACW,IAAV,GAAiBnB,aAAjB","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Modal, ModalProps } from '../Modal';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { getMiniModalTheme } from './getMiniModalTheme';\nimport { MiniModalFooter } from './MiniModalFooter';\nimport { MiniModalHeader } from './MiniModalHeader';\nimport { MiniModalBody } from './MiniModalBody';\nimport { MiniModalIndent } from './MiniModalIndent';\n\nexport const MiniModalDataTids = {\n  icon: 'MiniModal__icon',\n  title: 'MiniModal__title',\n  description: 'MiniModal__description',\n  actions: 'MiniModal__actions',\n  indent: 'MiniModal__indent',\n} as const;\n\nexport const MiniModal = forwardRefAndName<\n  Modal,\n  ModalProps,\n  {\n    Header: typeof MiniModalHeader;\n    Indent: typeof MiniModalIndent;\n    Footer: typeof MiniModalFooter;\n    Body: typeof MiniModalBody;\n  }\n>('MiniModal', ({ children, theme: propsTheme, ...rest }, ref) => {\n  const contextTheme = useContext(ThemeContext);\n\n  return (\n    <ThemeContext.Provider value={getMiniModalTheme(contextTheme, propsTheme)}>\n      <Modal width={400} noClose ref={ref} {...rest}>\n        {children}\n      </Modal>\n    </ThemeContext.Provider>\n  );\n});\n\nMiniModal.__KONTUR_REACT_UI__ = 'MiniModal';\n\nMiniModal.Header = MiniModalHeader;\nMiniModal.Footer = MiniModalFooter;\nMiniModal.Indent = MiniModalIndent;\nMiniModal.Body = MiniModalBody;\n"]}

package/components/MiniModal/MiniModal/package.json

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

package/components/MiniModal/MiniModal.d.ts

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

package/components/MiniModal/MiniModal.md

@@ -0,0 +1,233 @@
+Этот компонент обёртка над [Modal](#/Components/Modal/Modal).
+
+`MiniModal` — модальное диалоговое окно, которое предполагает обязательный отклик пользователя по одному из доступных действий.
+Закрытие окна по клику на фон или "крестик" не рекомендуется, т.к. у этих действий нет однозначного описания в 
+отличие от кнопок с названиями, наподобие "Сохранить", "Подтвердить" и т.п.
+
+👉 По макету предполагается, что все кнопки должны быть среднего размера `size = medium`.
+
+Примеры использования:
+
+### Уведомление
+
+Самый простой вариант использования:
+
+```jsx harmony
+import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
+import { MoneyTypeCoinsIcon } from '@skbkontur/icons/MoneyTypeCoinsIcon';
+
+const PayNotifice = () => {
+
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header>
+            Простое уведомление
+          </MiniModal.Header>
+          <MiniModal.Body>
+            Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
+          </MiniModal.Body>
+          <MiniModal.Footer>
+            <Button size="medium" use="primary" onClick={close}>Понятно</Button>
+          </MiniModal.Footer>
+        </MiniModal>
+      )}
+      <Button use="pay" onClick={open} icon={<MoneyTypeCoinsIcon/>}>Оплата</Button>
+    </>
+  );
+}
+
+<PayNotifice />
+```
+
+### Подтверждение
+
+Иногда от пользователя требуется выбрать одно из доступных действий.
+
+Например, подтвердить важное действие или отклонить его:
+
+```jsx harmony
+import { MiniModal, Button, Gapped, ThemeContext } from '@skbkontur/react-ui';
+import { TrashCanIcon } from '@skbkontur/icons/TrashCanIcon';
+
+const ConfirmDelete = ({ name, handleDelete }) => {
+  const theme = React.useContext(ThemeContext);
+
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const mainAction = () => {
+    handleDelete();
+    close();
+  };
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header icon={<TrashCanIcon size={64} color={theme.btnDangerBg}/>}>
+            Удалить "{name}"?
+          </MiniModal.Header>
+          <MiniModal.Footer direction="column">
+            <Button use="danger" size="medium" onClick={mainAction}>Удалить</Button>
+            <Button size="medium" onClick={close}>Отменить</Button>
+          </MiniModal.Footer>
+        </MiniModal>
+      )}
+      <Button onClick={open} icon={<TrashCanIcon weight="light"/>}/>
+    </>
+  );
+}
+
+const list = ['Отчёт № 111', 'Отчёт № 222', 'Отчёт № 333'];
+
+<Gapped vertical>
+  {list.map((name) => (
+    <Gapped key={name}>
+      <div style={{ width: 200, borderBottom: 'dashed 1px' }}>
+        {name}
+      </div>
+      <span>
+        <ConfirmDelete name={name} handleDelete={() => alert(`${name} удалён`)}/>
+      </span>
+    </Gapped>
+  ))}
+</Gapped>
+```
+
+### Синглтон
+
+Одно и то же диалоговое окно может вызываться в разных частях приложения.
+
+В таком случае стоит реализовать паттерн синглтона:
+
+```jsx harmony
+import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
+import { NotificationBellAlarmIcon16Solid } from '@skbkontur/icons/NotificationBellAlarmIcon16Solid';
+import { NotificationBellAlarmIcon64Regular } from '@skbkontur/icons/NotificationBellAlarmIcon64Regular';
+
+const EnableNotification = React.forwardRef(({ setStatus }, ref) => {
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const handleAllowAll = () => {
+    setStatus('Разрешить все');
+    close();
+  };
+  const handleAllowBasic = () => {
+    setStatus('Разрешить только основные');
+    close();
+  };
+  const handleDenyAll = () => {
+    setStatus('Запретить');
+    close();
+  };
+
+  React.useImperativeHandle(ref, () => ({ open, close }), []);
+
+  return isOpened && (
+    <MiniModal>
+      <MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
+        Разрешить уведомления?
+      </MiniModal.Header>
+      <MiniModal.Footer direction="column">
+        <Button use="primary" size="medium" onClick={handleAllowAll}>Разрешить все</Button>
+        <Button size="medium" onClick={handleAllowBasic}>Разрешить только основные</Button>
+        <MiniModal.Indent/>
+        <Button size="medium" onClick={handleDenyAll}>Запретить</Button>
+      </MiniModal.Footer>
+    </MiniModal>
+  );
+});
+
+const [status, setStatus] = React.useState('-не выбрано-');
+
+const NotificationEnableRef = React.useRef(null);
+
+const NotificationEnableOpen = () => NotificationEnableRef.current && NotificationEnableRef.current.open();
+
+<>
+  <EnableNotification ref={NotificationEnableRef} setStatus={setStatus}/>
+  <Gapped vertical>
+    <span>
+      <NotificationBellAlarmIcon16Solid/> Статус уведомлений: {status}
+    </span>
+    <Button use="text" theme={{ btnTextBg: '#D6D6D6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+    <Button use="text" theme={{ btnTextBg: '#E6E6E6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+    <Button use="text" theme={{ btnTextBg: '#F0F0F0' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+  </Gapped>
+</>
+```
+
+### Ожидание
+
+Некоторые действия для корректного исполнения требуют блокировки других действий пользователя.
+
+В таких случаях можно, например, использовать проп `loading` для `Button`, и не позволять закрыть окно до конца исполнения:
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const WaitingUpdate = ({ handleUpdate, setLastUpdated }) => {
+
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const handleMainClick = () => {
+    setIsLoading(true);
+    handleUpdate()
+      .then(() => {
+        setIsLoading(false);
+        setIsOpened(false);
+        setLastUpdated(new Date());
+      });
+  };
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header>
+            Обновить?
+          </MiniModal.Header>
+          <MiniModal.Body>
+            После вашего подтверждения другие действия на странице будут заблокированы на несколько секунд.
+          </MiniModal.Body>
+          <MiniModal.Footer>
+            <Button use="success" size="medium" onClick={handleMainClick} loading={isLoading}>Обновить</Button>
+            <Button size="medium" onClick={close} disabled={isLoading}>Отменить</Button>
+          </MiniModal.Footer>
+
+        </MiniModal>
+      )}
+      <Button onClick={open} use="success">Обновить</Button>
+    </>
+  );
+}
+
+const dateTimeFormat = new Intl.DateTimeFormat('nu', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+const [lastUpdated, setLastUpdated] = React.useState(new Date());
+
+const handleUpdate = () => new Promise((resolve) => setTimeout(resolve, 1500));
+
+<Gapped>
+  <WaitingUpdate handleUpdate={handleUpdate} setLastUpdated={setLastUpdated} />
+  <span>
+    Последнее обновление: {dateTimeFormat.format(lastUpdated)}
+  </span>
+</Gapped>
+```

package/components/MiniModal/MiniModal.styles/MiniModal.styles.js

@@ -0,0 +1,41 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { globalClasses as buttonGlobalClasses } from "../../Button/Button.styles";
+export var styles = memoizeStyle({
+  icon: function icon() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "])));
+  },
+  description: function description() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "])));
+  },
+  title: function title() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "])));
+  },
+  titleWithIcon: function titleWithIcon(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      margin-top: ", ";\n    "])), t.miniModalTitleMarginTop);
+  },
+  actions: function actions(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n      gap: ", ";\n\n      .", " {\n        width: 100%;\n      }\n    "])), t.miniModalActionGap, buttonGlobalClasses.root);
+  },
+  actionsIndent: function actionsIndent(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.miniModalCancelIndent);
+  },
+  actionsIndentIE11Fallback: function actionsIndentIE11Fallback(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.miniModalCancelIndent);
+  },
+  actionsRow: function actionsRow() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      flex-direction: row;\n    "])));
+  },
+  actionsColumn: function actionsColumn() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      flex-direction: column;\n    "])));
+  },
+  actionsRowIE11Fallback: function actionsRowIE11Fallback(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      > *:nth-of-type(1) {\n        margin-right: calc(", " / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(", " / 2);\n      }\n    "])), t.miniModalActionGap, t.miniModalActionGap);
+  },
+  actionsColumnIE11Fallback: function actionsColumnIE11Fallback(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      > *:nth-of-type(2) {\n        margin-top: ", ";\n      }\n      > *:nth-of-type(3) {\n        margin-top: ", ";\n      }\n    "])), t.miniModalActionGap, t.miniModalActionGap);
+  }
+});

package/components/MiniModal/MiniModal.styles/MiniModal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.styles.ts"],"names":["css","memoizeStyle","globalClasses","buttonGlobalClasses","styles","icon","description","title","titleWithIcon","t","miniModalTitleMarginTop","actions","miniModalActionGap","root","actionsIndent","miniModalCancelIndent","actionsIndentIE11Fallback","actionsRow","actionsColumn","actionsRowIE11Fallback","actionsColumnIE11Fallback"],"mappings":"0SAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,aAAa,IAAIC,mBAA1B,QAAqD,yBAArD;;AAEA,OAAO,IAAMC,MAAM,GAAGH,YAAY,CAAC;AACjCI,EAAAA,IADiC,kBAC1B;AACL,WAAOL,GAAP;;;AAGD,GALgC;;AAOjCM,EAAAA,WAPiC,yBAOnB;AACZ,WAAON,GAAP;;;AAGD,GAXgC;;AAajCO,EAAAA,KAbiC,mBAazB;AACN,WAAOP,GAAP;;;AAGD,GAjBgC;;AAmBjCQ,EAAAA,aAnBiC,yBAmBnBC,CAnBmB,EAmBT;AACtB,WAAOT,GAAP;AACgBS,IAAAA,CAAC,CAACC,uBADlB;;AAGD,GAvBgC;;AAyBjCC,EAAAA,OAzBiC,mBAyBzBF,CAzByB,EAyBf;AAChB,WAAOT,GAAP;;;;AAISS,IAAAA,CAAC,CAACG,kBAJX;;AAMKT,IAAAA,mBAAmB,CAACU,IANzB;;;;AAUD,GApCgC;;AAsCjCC,EAAAA,aAtCiC,yBAsCnBL,CAtCmB,EAsCT;AACtB,WAAOT,GAAP;AACYS,IAAAA,CAAC,CAACM,qBADd;;AAGD,GA1CgC;;AA4CjCC,EAAAA,yBA5CiC,qCA4CPP,CA5CO,EA4CG;AAClC,WAAOT,GAAP;AACaS,IAAAA,CAAC,CAACM,qBADf;;AAGD,GAhDgC;;AAkDjCE,EAAAA,UAlDiC,wBAkDpB;AACX,WAAOjB,GAAP;;;AAGD,GAtDgC;;AAwDjCkB,EAAAA,aAxDiC,2BAwDjB;AACd,WAAOlB,GAAP;;;AAGD,GA5DgC;;AA8DjCmB,EAAAA,sBA9DiC,kCA8DVV,CA9DU,EA8DA;AAC/B,WAAOT,GAAP;;AAEyBS,IAAAA,CAAC,CAACG,kBAF3B;;;AAKwBH,IAAAA,CAAC,CAACG,kBAL1B;;;AAQD,GAvEgC;;AAyEjCQ,EAAAA,yBAzEiC,qCAyEPX,CAzEO,EAyEG;AAClC,WAAOT,GAAP;;AAEkBS,IAAAA,CAAC,CAACG,kBAFpB;;;AAKkBH,IAAAA,CAAC,CAACG,kBALpB;;;AAQD,GAlFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles';\n\nexport const styles = memoizeStyle({\n  icon() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  description() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  title() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  titleWithIcon(t: Theme) {\n    return css`\n      margin-top: ${t.miniModalTitleMarginTop};\n    `;\n  },\n\n  actions(t: Theme) {\n    return css`\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n      gap: ${t.miniModalActionGap};\n\n      .${buttonGlobalClasses.root} {\n        width: 100%;\n      }\n    `;\n  },\n\n  actionsIndent(t: Theme) {\n    return css`\n      height: ${t.miniModalCancelIndent};\n    `;\n  },\n\n  actionsIndentIE11Fallback(t: Theme) {\n    return css`\n      padding: ${t.miniModalCancelIndent} 0;\n    `;\n  },\n\n  actionsRow() {\n    return css`\n      flex-direction: row;\n    `;\n  },\n\n  actionsColumn() {\n    return css`\n      flex-direction: column;\n    `;\n  },\n\n  actionsRowIE11Fallback(t: Theme) {\n    return css`\n      > *:nth-of-type(1) {\n        margin-right: calc(${t.miniModalActionGap} / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(${t.miniModalActionGap} / 2);\n      }\n    `;\n  },\n\n  actionsColumnIE11Fallback(t: Theme) {\n    return css`\n      > *:nth-of-type(2) {\n        margin-top: ${t.miniModalActionGap};\n      }\n      > *:nth-of-type(3) {\n        margin-top: ${t.miniModalActionGap};\n      }\n    `;\n  },\n});\n"]}

package/components/MiniModal/MiniModal.styles/package.json

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

package/components/MiniModal/MiniModal.styles.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    icon(): string;
+    description(): string;
+    title(): string;
+    titleWithIcon(t: Theme): string;
+    actions(t: Theme): string;
+    actionsIndent(t: Theme): string;
+    actionsIndentIE11Fallback(t: Theme): string;
+    actionsRow(): string;
+    actionsColumn(): string;
+    actionsRowIE11Fallback(t: Theme): string;
+    actionsColumnIE11Fallback(t: Theme): string;
+};

package/components/MiniModal/MiniModalBody/MiniModalBody.js

@@ -0,0 +1,23 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children"];
+import React from 'react';
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { Modal } from "../../Modal";
+import { MiniModalDataTids } from "../MiniModal";
+import { styles } from "../MiniModal.styles";
+/**
+ * Обёртка над Modal.Body
+ *
+ * @visibleName MiniModal.Body
+ */
+
+export var MiniModalBody = forwardRefAndName('MiniModalBody', function (_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Modal.Body, rest, /*#__PURE__*/React.createElement("div", {
+    "data-tid": MiniModalDataTids.description,
+    ref: ref,
+    className: styles.description()
+  }, children));
+});

package/components/MiniModal/MiniModalBody/MiniModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModalBody.tsx"],"names":["React","forwardRefAndName","Modal","MiniModalDataTids","styles","MiniModalBody","ref","children","rest","description"],"mappings":"iIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,KAAT,QAAsC,UAAtC;;AAEA,SAASC,iBAAT,QAAkC,aAAlC;AACA,SAASC,MAAT,QAAuB,oBAAvB;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGJ,iBAAiB;AAC5C,eAD4C;AAE5C,gBAAwBK,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B;AACE,wBAAC,KAAD,CAAO,IAAP,EAAgBA,IAAhB;AACE,iCAAK,YAAUL,iBAAiB,CAACM,WAAjC,EAA8C,GAAG,EAAEH,GAAnD,EAAwD,SAAS,EAAEF,MAAM,CAACK,WAAP,EAAnE;AACGF,IAAAA,QADH,CADF,CADF;;;;AAOD,CAV2C,CAAvC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { Modal, ModalBodyProps } from '../Modal';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { styles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    return (\n      <Modal.Body {...rest}>\n        <div data-tid={MiniModalDataTids.description} ref={ref} className={styles.description()}>\n          {children}\n        </div>\n      </Modal.Body>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalBody/package.json

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

package/components/MiniModal/MiniModalBody.d.ts

@@ -0,0 +1,7 @@
+import { ModalBodyProps } from '../Modal';
+/**
+ * Обёртка над Modal.Body
+ *
+ * @visibleName MiniModal.Body
+ */
+export declare const MiniModalBody: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, ModalBodyProps> & Record<never, never>;