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

package/components/Loader/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","cn","debounce","LayoutEvents","Spinner","ThemeContext","ZIndex","CommonWrapper","jsStyles","Loader","props","theme","containerNode","spinnerNode","layoutEvents","wrapperRef","element","checkSpinnerPosition","getBoundingClientRect","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","state","componentDidMount","addListener","componentDidUpdate","prevProps","component","active","componentWillUnmount","remove","render","renderMain","type","caption","loader","children","renderSpinner","spinnerContainerSticky","spinnerContainerCenter","spinnerComponentWrapper","undefined","Component","__KONTUR_REACT_UI__","defaultProps","Types","normal","propTypes","bool","node","className","string","oneOf","Object","keys"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\nimport debounce from 'lodash.debounce';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Spinner, SpinnerProps } from '../Spinner';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Loader.styles';\r\n\r\nexport interface LoaderProps extends CommonProps {\r\n  children?: React.ReactNode;\r\n  /**\r\n   * Флаг переключения состояния лоадера\r\n   * @default false\r\n   */\r\n  active: boolean;\r\n  caption?: SpinnerProps['caption'];\r\n  /**\r\n   * Компонент заменяющий спиннер.\r\n   */\r\n  component?: React.ReactNode;\r\n  className?: string;\r\n  type?: 'mini' | 'normal' | 'big';\r\n}\r\n\r\nexport interface LoaderState {\r\n  isStickySpinner: boolean;\r\n  spinnerStyle?: object;\r\n}\r\n\r\n/**\r\n * DRAFT - лоадер-контейнер\r\n */\r\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\r\n  public static __KONTUR_REACT_UI__ = 'Loader';\r\n\r\n  public static defaultProps: Partial<LoaderProps> = {\r\n    type: Spinner.Types.normal,\r\n    active: false,\r\n  };\r\n\r\n  public static propTypes = {\r\n    /**\r\n     * показываем лоадер или нет\r\n     */\r\n    active: PropTypes.bool,\r\n\r\n    /**\r\n     * Текст рядом с лоадером.\r\n     *\r\n     * @default  \"Загрузка\"\r\n     */\r\n    caption: Spinner.propTypes.caption,\r\n\r\n    component: PropTypes.node,\r\n\r\n    /**\r\n     * Класс для обертки\r\n     */\r\n    className: PropTypes.string,\r\n\r\n    /**\r\n     * Тип спиннера: mini, normal, big\r\n     *\r\n     * @default  normal\r\n     *\r\n     * Spinner.types - все доступные типы\r\n     */\r\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private containerNode: Nullable<HTMLDivElement>;\r\n  private spinnerNode: Nullable<HTMLDivElement>;\r\n  private layoutEvents: Nullable<{ remove: () => void }>;\r\n\r\n  constructor(props: LoaderProps) {\r\n    super(props);\r\n\r\n    this.containerNode = null;\r\n    this.spinnerNode = null;\r\n\r\n    this.state = {\r\n      isStickySpinner: false,\r\n    };\r\n  }\r\n\r\n  public componentDidMount() {\r\n    this.checkSpinnerPosition();\r\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\r\n  }\r\n\r\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>) {\r\n    const { component, active } = this.props;\r\n\r\n    if ((active && !prevProps.active) || prevProps.component !== component) {\r\n      this.checkSpinnerPosition();\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (this.layoutEvents) {\r\n      this.layoutEvents.remove();\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { active, type, caption, component } = this.props;\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <div className={jsStyles.loader()}>\r\n          <ZIndex\r\n            priority={'Loader'}\r\n            applyZIndex={this.props.active}\r\n            coverChildren={this.props.active}\r\n            style={{ height: '100%' }}\r\n          >\r\n            {this.props.children}\r\n          </ZIndex>\r\n          {active && (\r\n            <ZIndex\r\n              wrapperRef={this.wrapperRef}\r\n              priority={'Loader'}\r\n              className={cn({\r\n                [jsStyles.active(this.theme)]: active,\r\n              })}\r\n            >\r\n              {this.renderSpinner(type, caption, component)}\r\n            </ZIndex>\r\n          )}\r\n        </div>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private wrapperRef = (element: HTMLDivElement | null) => {\r\n    this.containerNode = element;\r\n  };\r\n\r\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {\r\n    return (\r\n      <span\r\n        className={this.state.isStickySpinner ? jsStyles.spinnerContainerSticky() : jsStyles.spinnerContainerCenter()}\r\n        style={this.state.spinnerStyle}\r\n      >\r\n        <div\r\n          className={jsStyles.spinnerComponentWrapper()}\r\n          ref={element => {\r\n            this.spinnerNode = element;\r\n          }}\r\n        >\r\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\r\n        </div>\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private checkSpinnerPosition = () => {\r\n    if (!this.containerNode) {\r\n      return;\r\n    }\r\n\r\n    const {\r\n      top: containerTop,\r\n      right: containerRight,\r\n      bottom: containerBottom,\r\n      left: containerLeft,\r\n      height: containerHeight,\r\n      width: containerWidth,\r\n    } = this.containerNode.getBoundingClientRect();\r\n\r\n    const windowHeight = window.innerHeight;\r\n    const windowWidth = window.innerWidth;\r\n\r\n    // Если контейнер не больше высоты и не шире окна,\r\n    // то просто выравниваем по центру\r\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\r\n      this.setState({\r\n        isStickySpinner: false,\r\n        spinnerStyle: {},\r\n      });\r\n      return;\r\n    }\r\n\r\n    const spinnerStyle: {\r\n      top?: number;\r\n      right: number;\r\n      bottom: number;\r\n      left: number;\r\n    } = {\r\n      top: 30,\r\n      right: 0,\r\n      bottom: 30,\r\n      left: 0,\r\n    };\r\n\r\n    // ПО ВЕРТИКАЛИ\r\n    // Если верхний край контейнера ниже верхнего края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerTop > 0) {\r\n      spinnerStyle.top = containerTop + 30;\r\n    }\r\n\r\n    // Если нижний край контейнера выше нижнего края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerBottom < windowHeight) {\r\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\r\n    }\r\n\r\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\r\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\r\n    if (this.spinnerNode) {\r\n      const spinnerHeight = this.spinnerNode.getBoundingClientRect().height;\r\n\r\n      if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\r\n        delete spinnerStyle.top;\r\n      }\r\n    }\r\n\r\n    // ПО ГОРИЗОНТАЛИ\r\n    // Если левый край контейнера правее левого края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerLeft > 0) {\r\n      spinnerStyle.left = containerLeft;\r\n    }\r\n\r\n    // Если правый край контейнера левее правого края окна,\r\n    // то сдвигаем и лоадер\r\n    if (containerRight < windowWidth) {\r\n      spinnerStyle.right = windowWidth - containerRight;\r\n    }\r\n\r\n    this.setState({\r\n      isStickySpinner: true,\r\n      spinnerStyle,\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","debounce","LayoutEvents","Spinner","ThemeContext","ZIndex","CommonWrapper","cx","isTestEnv","TaskWithDelayAndMinimalDuration","getTabbableElements","styles","Loader","props","theme","spinnerContainerNode","childrenContainerNode","spinnerNode","layoutEvents","spinnerTask","childrenObserver","childrenRef","element","spinnerRef","checkSpinnerPosition","getBoundingClientRect","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","disableChildrenFocus","makeObservable","tabbableElements","forEach","el","hasAttribute","setAttribute","tabIndex","toString","enableChildrenFocus","makeUnobservable","document","querySelectorAll","getAttribute","removeAttribute","target","config","childList","subtree","observer","MutationObserver","observe","disconnect","state","isSpinnerVisible","isLoaderActive","delayBeforeTaskStart","delayBeforeSpinnerShow","durationOfTask","minimalDelayBeforeSpinnerHide","taskStartCallback","taskStopCallback","componentDidMount","active","start","addListener","componentDidUpdate","prevProps","prevState","component","update","stop","componentWillUnmount","remove","clearTask","getDerivedStateFromProps","render","renderMain","type","caption","loader","children","renderSpinner","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper","undefined","Component","__KONTUR_REACT_UI__","defaultProps","Types","normal","propTypes","bool","node","className","string","oneOf","Object","keys","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Spinner, SpinnerProps } from '../Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers';\n\nimport { styles } from './Loader.styles';\n\nexport interface LoaderProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Флаг переключения состояния лоадера\n   * @default false\n   */\n  active: boolean;\n  caption?: SpinnerProps['caption'];\n  /**\n   * Компонент заменяющий спиннер.\n   */\n  component?: React.ReactNode;\n  className?: string;\n  type?: 'mini' | 'normal' | 'big';\n  /**\n   * Время в миллисекундах для показа вуали без спиннера.\n   * @default 300\n   */\n  delayBeforeSpinnerShow: number;\n  /**\n   * Минимальное время в миллисекундах для показа спиннера\n   * @default 1000\n   */\n  minimalDelayBeforeSpinnerHide: number;\n}\n\nexport interface LoaderState {\n  isStickySpinner: boolean;\n  isSpinnerVisible: boolean;\n  isLoaderActive: boolean;\n  spinnerStyle?: object;\n}\n\n/**\n * DRAFT - лоадер-контейнер\n */\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n  public static __KONTUR_REACT_UI__ = 'Loader';\n\n  public static defaultProps: Partial<LoaderProps> = {\n    type: Spinner.Types.normal,\n    active: false,\n    delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n    minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n  };\n\n  public static propTypes = {\n    /**\n     * показываем лоадер или нет\n     */\n    active: PropTypes.bool,\n\n    /**\n     * Текст рядом с лоадером.\n     *\n     * @default  \"Загрузка\"\n     */\n    caption: Spinner.propTypes.caption,\n\n    component: PropTypes.node,\n\n    /**\n     * Класс для обертки\n     */\n    className: PropTypes.string,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * @default  normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\n    /**\n     * Время в миллисекундах для показа вуали без спиннера.\n     * @default 300\n     */\n    delayBeforeSpinnerShow: PropTypes.number,\n    /**\n     * Минимальное время в миллисекундах для показа спиннера\n     * @default 1000\n     */\n    minimalDelayBeforeSpinnerHide: PropTypes.number,\n  };\n\n  private theme!: Theme;\n  private spinnerContainerNode: Nullable<HTMLDivElement>;\n  private childrenContainerNode: Nullable<HTMLDivElement>;\n  private spinnerNode: Nullable<HTMLDivElement>;\n  private layoutEvents: Nullable<{ remove: () => void }>;\n  private spinnerTask: TaskWithDelayAndMinimalDuration;\n  private childrenObserver: Nullable<MutationObserver>;\n\n  constructor(props: LoaderProps) {\n    super(props);\n\n    this.spinnerContainerNode = null;\n    this.childrenContainerNode = null;\n    this.childrenObserver = null;\n    this.spinnerNode = null;\n\n    this.state = {\n      isStickySpinner: false,\n      isSpinnerVisible: false,\n      isLoaderActive: false,\n    };\n\n    this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n      delayBeforeTaskStart: this.props.delayBeforeSpinnerShow,\n      durationOfTask: this.props.minimalDelayBeforeSpinnerHide,\n      taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n      taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n    });\n  }\n\n  public componentDidMount() {\n    this.checkSpinnerPosition();\n    this.props.active && this.spinnerTask.start();\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\n\n    if (this.props.active) {\n      this.disableChildrenFocus();\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n    const { component, active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.props;\n    const { isLoaderActive } = this.state;\n\n    if ((active && !prevProps.active) || prevProps.component !== component) {\n      this.checkSpinnerPosition();\n    }\n\n    if (\n      delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow ||\n      minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n    ) {\n      this.spinnerTask.update({\n        delayBeforeTaskStart: delayBeforeSpinnerShow,\n        durationOfTask: minimalDelayBeforeSpinnerHide,\n      });\n    }\n\n    if (active !== prevProps.active) {\n      active ? this.spinnerTask.start() : this.spinnerTask.stop();\n    }\n\n    if (isLoaderActive !== prevState.isLoaderActive) {\n      if (isLoaderActive) {\n        this.disableChildrenFocus();\n      } else {\n        this.enableChildrenFocus();\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    this.makeUnobservable();\n    if (this.layoutEvents) {\n      this.layoutEvents.remove();\n    }\n    this.spinnerTask.clearTask();\n  }\n\n  public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n    if (props.active && !state.isLoaderActive) {\n      return {\n        isLoaderActive: true,\n      };\n    }\n    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {\n      return {\n        isLoaderActive: false,\n      };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { type, caption, component } = this.props;\n    const { isLoaderActive } = this.state;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div className={styles.loader()} data-tid={isLoaderActive ? 'Loader__Veil' : ''}>\n          <ZIndex\n            priority={'Loader'}\n            applyZIndex={isLoaderActive}\n            coverChildren={isLoaderActive}\n            style={{ height: '100%' }}\n            wrapperRef={this.childrenRef}\n          >\n            {this.props.children}\n          </ZIndex>\n          {isLoaderActive && (\n            <ZIndex\n              wrapperRef={this.spinnerRef}\n              priority={'Loader'}\n              className={cx({\n                [styles.active(this.theme)]: isLoaderActive,\n              })}\n            >\n              {this.state.isSpinnerVisible && this.renderSpinner(type, caption, component)}\n            </ZIndex>\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private childrenRef = (element: HTMLDivElement | null) => {\n    this.childrenContainerNode = element;\n  };\n\n  private spinnerRef = (element: HTMLDivElement | null) => {\n    this.spinnerContainerNode = element;\n  };\n\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {\n    return (\n      <span\n        data-tid={'Loader__Spinner'}\n        className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}\n        style={this.state.spinnerStyle}\n      >\n        <div\n          className={styles.spinnerComponentWrapper()}\n          ref={(element) => {\n            this.spinnerNode = element;\n          }}\n        >\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\n        </div>\n      </span>\n    );\n  }\n\n  private checkSpinnerPosition = () => {\n    if (!this.spinnerContainerNode) {\n      return;\n    }\n\n    const {\n      top: containerTop,\n      right: containerRight,\n      bottom: containerBottom,\n      left: containerLeft,\n      height: containerHeight,\n      width: containerWidth,\n    } = this.spinnerContainerNode.getBoundingClientRect();\n\n    const windowHeight = window.innerHeight;\n    const windowWidth = window.innerWidth;\n\n    // Если контейнер не больше высоты и не шире окна,\n    // то просто выравниваем по центру\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n      this.setState({\n        isStickySpinner: false,\n        spinnerStyle: {},\n      });\n      return;\n    }\n\n    const spinnerStyle: {\n      top?: number;\n      right: number;\n      bottom: number;\n      left: number;\n    } = {\n      top: 30,\n      right: 0,\n      bottom: 30,\n      left: 0,\n    };\n\n    // ПО ВЕРТИКАЛИ\n    // Если верхний край контейнера ниже верхнего края окна,\n    // то сдвигаем и лоадер\n    if (containerTop > 0) {\n      spinnerStyle.top = containerTop + 30;\n    }\n\n    // Если нижний край контейнера выше нижнего края окна,\n    // то сдвигаем и лоадер\n    if (containerBottom < windowHeight) {\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n    }\n\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n    if (this.spinnerNode) {\n      const spinnerHeight = this.spinnerNode.getBoundingClientRect().height;\n\n      if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n        delete spinnerStyle.top;\n      }\n    }\n\n    // ПО ГОРИЗОНТАЛИ\n    // Если левый край контейнера правее левого края окна,\n    // то сдвигаем и лоадер\n    if (containerLeft > 0) {\n      spinnerStyle.left = containerLeft;\n    }\n\n    // Если правый край контейнера левее правого края окна,\n    // то сдвигаем и лоадер\n    if (containerRight < windowWidth) {\n      spinnerStyle.right = windowWidth - containerRight;\n    }\n\n    this.setState({\n      isStickySpinner: true,\n      spinnerStyle,\n    });\n  };\n\n  private disableChildrenFocus = () => {\n    if (!this.childrenObserver) {\n      this.makeObservable();\n    }\n    const tabbableElements = getTabbableElements(this.childrenContainerNode);\n    tabbableElements.forEach((el) => {\n      if (!el.hasAttribute('origin-tabindex')) {\n        el.setAttribute('origin-tabindex', el.tabIndex.toString());\n      }\n      el.tabIndex = -1;\n    });\n  };\n\n  private enableChildrenFocus = () => {\n    this.makeUnobservable();\n    document.querySelectorAll('[origin-tabindex]').forEach((el) => {\n      el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n      el.removeAttribute('origin-tabindex');\n    });\n  };\n\n  private makeObservable = () => {\n    const target = this.childrenContainerNode;\n    if (!target) {\n      return;\n    }\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n    const observer = new MutationObserver(this.disableChildrenFocus);\n    observer.observe(target, config);\n    this.childrenObserver = observer;\n  };\n\n  private makeUnobservable = () => {\n    this.childrenObserver?.disconnect();\n    this.childrenObserver = null;\n  };\n}\n"]}

package/components/Loader/Loader.d.ts

@@ -16,9 +16,21 @@ export interface LoaderProps extends CommonProps {
     component?: React.ReactNode;
     className?: string;
     type?: 'mini' | 'normal' | 'big';
+    /**
+     * Время в миллисекундах для показа вуали без спиннера.
+     * @default 300
+     */
+    delayBeforeSpinnerShow: number;
+    /**
+     * Минимальное время в миллисекундах для показа спиннера
+     * @default 1000
+     */
+    minimalDelayBeforeSpinnerHide: number;
 }
 export interface LoaderState {
     isStickySpinner: boolean;
+    isSpinnerVisible: boolean;
+    isLoaderActive: boolean;
     spinnerStyle?: object;
 }
 /**
@@ -51,18 +63,37 @@ export declare class Loader extends React.Component<LoaderProps, LoaderState> {
          * Spinner.types - все доступные типы
          */
         type: PropTypes.Requireable<string>;
+        /**
+         * Время в миллисекундах для показа вуали без спиннера.
+         * @default 300
+         */
+        delayBeforeSpinnerShow: PropTypes.Requireable<number>;
+        /**
+         * Минимальное время в миллисекундах для показа спиннера
+         * @default 1000
+         */
+        minimalDelayBeforeSpinnerHide: PropTypes.Requireable<number>;
     };
     private theme;
-    private containerNode;
+    private spinnerContainerNode;
+    private childrenContainerNode;
     private spinnerNode;
     private layoutEvents;
+    private spinnerTask;
+    private childrenObserver;
     constructor(props: LoaderProps);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<LoaderProps>): void;
+    componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>): void;
     componentWillUnmount(): void;
+    static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState>;
     render(): JSX.Element;
     private renderMain;
-    private wrapperRef;
+    private childrenRef;
+    private spinnerRef;
     private renderSpinner;
     private checkSpinnerPosition;
+    private disableChildrenFocus;
+    private enableChildrenFocus;
+    private makeObservable;
+    private makeUnobservable;
 }

package/components/Loader/Loader.md

@@ -1,25 +1,25 @@
-```jsx harmony
-<Loader type="big" active>
-  <h1>Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments."</h1>
-  <p>
-    No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela,
-    Bender, we're going grave robbing.
-  </p>
-  <p>
-    Are you crazy? I can't swallow that. Large bet on myself in round one. Hey, whatcha watching?
-    <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>
-    <em>It's okay, Bender.</em> I like cooking too.
-  </p>
-  <h2>Oh, I think we should just stay friends.</h2>
-  <p>
-    No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go… look for
-    more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife
-    holding up? …To shreds, you say.
-  </p>
-  <ol>
-    <li>No! The kind with looting and maybe starting a few fires!</li>
-    <li>You are the last hope of the universe.</li>
-    <li>Hey, guess what you're accessories to.</li>
-  </ol>
-</Loader>
-```
+```jsx harmony
+<Loader type="big" active>
+  <h1>Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments."</h1>
+  <p>
+    No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela,
+    Bender, we're going grave robbing.
+  </p>
+  <p>
+    Are you crazy? I can't swallow that. Large bet on myself in round one. Hey, whatcha watching?
+    <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>
+    <em>It's okay, Bender.</em> I like cooking too.
+  </p>
+  <h2>Oh, I think we should just stay friends.</h2>
+  <p>
+    No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go… look for
+    more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife
+    holding up? …To shreds, you say.
+  </p>
+  <ol>
+    <li>No! The kind with looting and maybe starting a few fires!</li>
+    <li>You are the last hope of the universe.</li>
+    <li>Hey, guess what you're accessories to.</li>
+  </ol>
+</Loader>
+```

package/components/Loader/Loader.styles/Loader.styles.js

@@ -1,29 +1,22 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   active: function active(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      background: ", ";\n    "])), styles.fillContainerPosition(), t.loaderBg);
-  },
-  fillContainerPosition: function fillContainerPosition() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n    "])));
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ", ";\n    "])), t.loaderBg);
   },
   loader: function loader() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    "])));
   },
   spinnerContainer: function spinnerContainer() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: block;\n      margin: auto;\n      text-align: center;\n    "])));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])));
   },
   spinnerContainerSticky: function spinnerContainerSticky() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      position: fixed;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])), styles.spinnerContainer());
-  },
-  spinnerContainerCenter: function spinnerContainerCenter() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", ";\n      ", ";\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    "])), styles.spinnerContainer(), styles.fillContainerPosition());
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n    "])));
   },
   spinnerComponentWrapper: function spinnerComponentWrapper() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Loader/Loader.styles/Loader.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Loader.styles.ts"],"names":["css","memoizeStyle","styles","active","t","fillContainerPosition","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerContainerCenter","spinnerComponentWrapper","jsStyles"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,MADa,kBACNC,CADM,EACI;AACf,WAAOJ,GAAP;AACIE,IAAAA,MAAM,CAACG,qBAAP,EADJ;;AAGgBD,IAAAA,CAAC,CAACE,QAHlB;;AAKD,GAPY;;AASbD,EAAAA,qBATa,mCASW;AACtB,WAAOL,GAAP;;;;;;;AAOD,GAjBY;;AAmBbO,EAAAA,MAnBa,oBAmBJ;AACP,WAAOP,GAAP;;;;;;;AAOD,GA3BY;;AA6BbQ,EAAAA,gBA7Ba,8BA6BM;AACjB,WAAOR,GAAP;;;;;AAKD,GAnCY;;AAqCbS,EAAAA,sBArCa,oCAqCY;AACvB,WAAOT,GAAP;AACIE,IAAAA,MAAM,CAACM,gBAAP,EADJ;;;;;;;;;;;;AAaD,GAnDY;;AAqDbE,EAAAA,sBArDa,oCAqDY;AACvB,WAAOV,GAAP;AACIE,IAAAA,MAAM,CAACM,gBAAP,EADJ;AAEIN,IAAAA,MAAM,CAACG,qBAAP,EAFJ;;;;;;;;;;AAYD,GAlEY;;AAoEbM,EAAAA,uBApEa,qCAoEa;AACxB,WAAOX,GAAP;;;AAGD,GAxEY,EAAf;;;AA2EA,OAAO,IAAMY,QAAQ,GAAGX,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  active(t: Theme) {\r\n    return css`\r\n      ${styles.fillContainerPosition()};\r\n\r\n      background: ${t.loaderBg};\r\n    `;\r\n  },\r\n\r\n  fillContainerPosition() {\r\n    return css`\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  loader() {\r\n    return css`\r\n      box-sizing: border-box;\r\n      display: inline-block;\r\n      position: relative;\r\n      width: 100%;\r\n      z-index: inherit;\r\n    `;\r\n  },\r\n\r\n  spinnerContainer() {\r\n    return css`\r\n      display: block;\r\n      margin: auto;\r\n      text-align: center;\r\n    `;\r\n  },\r\n\r\n  spinnerContainerSticky() {\r\n    return css`\r\n      ${styles.spinnerContainer()};\r\n\r\n      position: fixed;\r\n\r\n      &::before {\r\n        content: ' ';\r\n        display: inline-block;\r\n        height: 100%;\r\n        min-height: 100%;\r\n        vertical-align: middle;\r\n      }\r\n    `;\r\n  },\r\n\r\n  spinnerContainerCenter() {\r\n    return css`\r\n      ${styles.spinnerContainer()};\r\n      ${styles.fillContainerPosition()};\r\n\r\n      &::before {\r\n        content: ' ';\r\n        display: inline-block;\r\n        height: 100%;\r\n        min-height: 100%;\r\n        vertical-align: middle;\r\n      }\r\n    `;\r\n  },\r\n\r\n  spinnerComponentWrapper() {\r\n    return css`\r\n      display: inline-block;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Loader.styles.ts"],"names":["css","memoizeStyle","styles","active","t","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,WAAOJ,GAAP;;;;;;;AAOgBI,IAAAA,CAAC,CAACC,QAPlB;;AASD,GAXgC;;AAajCC,EAAAA,MAbiC,oBAaxB;AACP,WAAON,GAAP;;;;;;;AAOD,GArBgC;;AAuBjCO,EAAAA,gBAvBiC,8BAuBd;AACjB,WAAOP,GAAP;;;;;;;;;;;;;;;;;;;AAmBD,GA3CgC;;AA6CjCQ,EAAAA,sBA7CiC,oCA6CR;AACvB,WAAOR,GAAP;;;AAGD,GAjDgC;;AAmDjCS,EAAAA,uBAnDiC,qCAmDP;AACxB,WAAOT,GAAP;;;AAGD,GAvDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ${t.loaderBg};\n    `;\n  },\n\n  loader() {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    `;\n  },\n\n  spinnerContainer() {\n    return css`\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    `;\n  },\n\n  spinnerContainerSticky() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  spinnerComponentWrapper() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}

package/components/Loader/Loader.styles.d.ts

@@ -1,10 +1,8 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     active(t: Theme): string;
-    fillContainerPosition(): string;
     loader(): string;
     spinnerContainer(): string;
     spinnerContainerSticky(): string;
-    spinnerContainerCenter(): string;
     spinnerComponentWrapper(): string;
 };

package/components/Loader/__stories__/LoaderAndButton/LoaderAndButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LoaderAndButton.tsx"],"names":["React","Tooltip","Button","Loader","LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;;AAEA,WAAaC,eAAb;AACSC,IAAAA,KADT,GACiB;AACbC,MAAAA,eAAe,EAAE,KADJ,EADjB;;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,MAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,wJADF;;;;AAKE,0BAAC,OAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,0BAAC,MAAD;AACE,QAAA,OAAO,EAAE,mBAAM;AACb,UAAA,MAAI,CAACI,QAAL,CAAc,EAAEC,QAAQ,EAAE,IAAZ,EAAkBL,eAAe,EAAE,IAAnC,EAAd;AACD,SAHH,wBADF,CALF;;;;;AAcE,+LAdF;;;;AAkBE;AACqG,SADrG;AAEE,iIAFF;AAGE,2DAHF,yBAlBF;;AAuBE,iFAvBF;AAwBE,uTAxBF;;;;;AA6BE;AACE,kGADF;AAEE,+EAFF;AAGE,+EAHF,CA7BF,CADF;;;;AAqCD,GA3CH,0BAAqCN,KAAK,CAACY,SAA3C","sourcesContent":["import React from 'react';\r\n\r\nimport { Tooltip } from '../../Tooltip';\r\nimport { Button } from '../../Button';\r\nimport { Loader } from '../Loader';\r\n\r\nexport class LoaderAndButton extends React.Component<{ active: boolean }> {\r\n  public state = {\r\n    isTooltipOpened: false,\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <Loader active={this.props.active} type={'big'}>\r\n        <h1>\r\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\r\n          good vestments.&quot;\r\n        </h1>\r\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\r\n          <Button\r\n            onClick={() => {\r\n              this.setState({ isActive: true, isTooltipOpened: true });\r\n            }}\r\n          >\r\n            Can you click me?\r\n          </Button>\r\n        </Tooltip>\r\n        <p>\r\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\r\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\r\n        </p>\r\n        <p>\r\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\r\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\r\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\r\n        </p>\r\n        <h2>Oh, I think we should just stay friends.</h2>\r\n        <p>\r\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\r\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\r\n          his wife holding up? …To shreds, you say.\r\n        </p>\r\n        <ol>\r\n          <li>No! The kind with looting and maybe starting a few fires!</li>\r\n          <li>You are the last hope of the universe.</li>\r\n          <li>Hey, guess what you&apos;re accessories to.</li>\r\n        </ol>\r\n      </Loader>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["LoaderAndButton.tsx"],"names":["React","Tooltip","Button","Loader","LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;;AAEA,WAAaC,eAAb;AACSC,IAAAA,KADT,GACiB;AACbC,MAAAA,eAAe,EAAE,KADJ,EADjB;;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,MAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,wJADF;;;;AAKE,0BAAC,OAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,0BAAC,MAAD;AACE,QAAA,OAAO,EAAE,mBAAM;AACb,UAAA,MAAI,CAACI,QAAL,CAAc,EAAEC,QAAQ,EAAE,IAAZ,EAAkBL,eAAe,EAAE,IAAnC,EAAd;AACD,SAHH,wBADF,CALF;;;;;AAcE,+LAdF;;;;AAkBE;AACqG,SADrG;AAEE,iIAFF;AAGE,2DAHF,yBAlBF;;AAuBE,iFAvBF;AAwBE,uTAxBF;;;;;AA6BE;AACE,kGADF;AAEE,+EAFF;AAGE,+EAHF,CA7BF,CADF;;;;AAqCD,GA3CH,0BAAqCN,KAAK,CAACY,SAA3C","sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Loader } from '../Loader';\n\nexport class LoaderAndButton extends React.Component<{ active: boolean }> {\n  public state = {\n    isTooltipOpened: false,\n  };\n\n  public render() {\n    return (\n      <Loader active={this.props.active} type={'big'}>\n        <h1>\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\n          good vestments.&quot;\n        </h1>\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\n          <Button\n            onClick={() => {\n              this.setState({ isActive: true, isTooltipOpened: true });\n            }}\n          >\n            Can you click me?\n          </Button>\n        </Tooltip>\n        <p>\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\n        </p>\n        <p>\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\n        </p>\n        <h2>Oh, I think we should just stay friends.</h2>\n        <p>\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\n          his wife holding up? …To shreds, you say.\n        </p>\n        <ol>\n          <li>No! The kind with looting and maybe starting a few fires!</li>\n          <li>You are the last hope of the universe.</li>\n          <li>Hey, guess what you&apos;re accessories to.</li>\n        </ol>\n      </Loader>\n    );\n  }\n}\n"]}

package/components/Loader/index/index.js.map

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

package/components/MenuHeader/MenuHeader/MenuHeader.js

@@ -1,15 +1,19 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useContext } from 'react';
-import cn from 'classnames';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../MenuHeader.styles";
-/**
- * Заголовок в меню.
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../MenuHeader.styles";
+/**
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 
 function MenuHeader(_ref) {
-  var _cn;
+  var _cx;
 
   var _ref$_enableIconPaddi = _ref._enableIconPadding,
       _enableIconPadding = _ref$_enableIconPaddi === void 0 ? false : _ref$_enableIconPaddi,
@@ -18,7 +22,7 @@ function MenuHeader(_ref) {
 
   var theme = useContext(ThemeContext);
   return /*#__PURE__*/React.createElement(CommonWrapper, rest, /*#__PURE__*/React.createElement("div", {
-    className: cn((_cn = {}, _cn[jsStyles.root(theme)] = true, _cn[jsStyles.withLeftPadding(theme)] = _enableIconPadding, _cn))
+    className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.withLeftPadding(theme)] = _enableIconPadding, _cx))
   }, children));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","cn","ThemeContext","CommonWrapper","jsStyles","MenuHeader","_enableIconPadding","children","rest","theme","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"oGAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,QAAT,QAAyB,qBAAzB;;;;;;;AAOA;AACA;AACA;AACA,SAASC,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAGT,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBM,IAAnB;AACE;AACE,MAAA,SAAS,EAAEP,EAAE;AACVG,MAAAA,QAAQ,CAACM,IAAT,CAAcD,KAAd,CADU,IACa,IADb;AAEVL,MAAAA,QAAQ,CAACO,eAAT,CAAyBF,KAAzB,CAFU,IAEwBH,kBAFxB,OADf;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACO,mBAAX,GAAiC,YAAjC;AACAP,UAAU,CAACQ,eAAX,GAA6B,IAA7B;;AAEA,SAASR,UAAT;;AAEA,OAAO,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAhB,KAAK,CAACiB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './MenuHeader.styles';\r\n\r\nexport interface MenuHeaderProps extends CommonProps {\r\n  _enableIconPadding?: boolean;\r\n  children: ReactNode;\r\n}\r\n\r\n/**\r\n * Заголовок в меню.\r\n */\r\nfunction MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <CommonWrapper {...rest}>\r\n      <div\r\n        className={cn({\r\n          [jsStyles.root(theme)]: true,\r\n          [jsStyles.withLeftPadding(theme)]: _enableIconPadding,\r\n        })}\r\n      >\r\n        {children}\r\n      </div>\r\n    </CommonWrapper>\r\n  );\r\n}\r\n\r\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\r\nMenuHeader.__MENU_HEADER__ = true;\r\n\r\nexport { MenuHeader };\r\n\r\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\r\n  return React.isValidElement<MenuHeaderProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuHeader","_enableIconPadding","children","rest","theme","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"oGAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAGT,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,IAAnB;AACE;AACE,MAAA,SAAS,EAAEL,EAAE;AACVC,MAAAA,MAAM,CAACM,IAAP,CAAYD,KAAZ,CADU,IACW,IADX;AAEVL,MAAAA,MAAM,CAACO,eAAP,CAAuBF,KAAvB,CAFU,IAEsBH,kBAFtB,OADf;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACO,mBAAX,GAAiC,YAAjC;AACAP,UAAU,CAACQ,eAAX,GAA6B,IAA7B;;AAEA,SAASR,UAAT;;AAEA,OAAO,IAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAhB,KAAK,CAACiB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuHeader.styles';\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n}\n\n/**\n * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.\n *\n * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        className={cx({\n          [styles.root(theme)]: true,\n          [styles.withLeftPadding(theme)]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\nMenuHeader.__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n  return React.isValidElement<MenuHeaderProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n    : false;\n};\n"]}

package/components/MenuHeader/MenuHeader.d.ts

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

package/components/MenuHeader/MenuHeader.md

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

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

@@ -3,7 +3,7 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   root: function root(t) {
     var legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);
     var paddingRight = legacyPaddingRight !== 0 ? parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight + "px" : t.menuHeaderPaddingX;
@@ -12,5 +12,4 @@ var styles = {
   withLeftPadding: function withLeftPadding(t) {
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.menuItemPaddingForIcon);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.styles.ts"],"names":["css","memoizeStyle","styles","root","t","legacyPaddingRight","parseFloat","menuHeaderLegacyPaddingRight","paddingRight","menuHeaderPaddingX","menuHeaderColor","menuHeaderFontSize","menuHeaderLineHeight","menuHeaderPaddingTop","menuHeaderPaddingBottom","withLeftPadding","menuItemPaddingForIcon","jsStyles"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,QAAMC,kBAAkB,GAAGC,UAAU,CAACF,CAAC,CAACG,4BAAH,CAArC;AACA,QAAMC,YAAY;AAChBH,IAAAA,kBAAkB,KAAK,CAAvB,GAA8BC,UAAU,CAACF,CAAC,CAACK,kBAAH,CAAV,GAAmCJ,kBAAjE,UAA0FD,CAAC,CAACK,kBAD9F;;AAGA,WAAOT,GAAP;AACWI,IAAAA,CAAC,CAACM,eADb;;AAGeN,IAAAA,CAAC,CAACO,kBAHjB;AAIiBP,IAAAA,CAAC,CAACQ,oBAJnB;AAKaR,IAAAA,CAAC,CAACS,oBALf,EAKuCL,YALvC,EAKuDJ,CAAC,CAACU,uBALzD,EAKoFV,CAAC,CAACK,kBALtF;;AAOD,GAbY;;AAebM,EAAAA,eAfa,2BAeGX,CAfH,EAea;AACxB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,CAACY,sBADpB;;AAGD,GAnBY,EAAf;;;AAsBA,OAAO,IAAMC,QAAQ,GAAGhB,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    const legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);\r\n    const paddingRight =\r\n      legacyPaddingRight !== 0 ? `${parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight}px` : t.menuHeaderPaddingX;\r\n\r\n    return css`\r\n      color: ${t.menuHeaderColor};\r\n      cursor: default;\r\n      font-size: ${t.menuHeaderFontSize};\r\n      line-height: ${t.menuHeaderLineHeight};\r\n      padding: ${t.menuHeaderPaddingTop} ${paddingRight} ${t.menuHeaderPaddingBottom} ${t.menuHeaderPaddingX};\r\n    `;\r\n  },\r\n\r\n  withLeftPadding(t: Theme) {\r\n    return css`\r\n      padding-left: ${t.menuItemPaddingForIcon};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuHeader.styles.ts"],"names":["css","memoizeStyle","styles","root","t","legacyPaddingRight","parseFloat","menuHeaderLegacyPaddingRight","paddingRight","menuHeaderPaddingX","menuHeaderColor","menuHeaderFontSize","menuHeaderLineHeight","menuHeaderPaddingTop","menuHeaderPaddingBottom","withLeftPadding","menuItemPaddingForIcon"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,kBAAkB,GAAGC,UAAU,CAACF,CAAC,CAACG,4BAAH,CAArC;AACA,QAAMC,YAAY;AAChBH,IAAAA,kBAAkB,KAAK,CAAvB,GAA8BC,UAAU,CAACF,CAAC,CAACK,kBAAH,CAAV,GAAmCJ,kBAAjE,UAA0FD,CAAC,CAACK,kBAD9F;;AAGA,WAAOT,GAAP;AACWI,IAAAA,CAAC,CAACM,eADb;;AAGeN,IAAAA,CAAC,CAACO,kBAHjB;AAIiBP,IAAAA,CAAC,CAACQ,oBAJnB;AAKaR,IAAAA,CAAC,CAACS,oBALf,EAKuCL,YALvC,EAKuDJ,CAAC,CAACU,uBALzD,EAKoFV,CAAC,CAACK,kBALtF;;AAOD,GAbgC;;AAejCM,EAAAA,eAfiC,2BAejBX,CAfiB,EAeP;AACxB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,CAACY,sBADpB;;AAGD,GAnBgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);\n    const paddingRight =\n      legacyPaddingRight !== 0 ? `${parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight}px` : t.menuHeaderPaddingX;\n\n    return css`\n      color: ${t.menuHeaderColor};\n      cursor: default;\n      font-size: ${t.menuHeaderFontSize};\n      line-height: ${t.menuHeaderLineHeight};\n      padding: ${t.menuHeaderPaddingTop} ${paddingRight} ${t.menuHeaderPaddingBottom} ${t.menuHeaderPaddingX};\n    `;\n  },\n\n  withLeftPadding(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n});\n"]}

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

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

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

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

package/components/MenuItem/MenuItem/MenuItem.js

@@ -3,13 +3,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import { isFunction } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../MenuItem.styles";
-/**
- * Элемент меню.
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../MenuItem.styles";
+/**
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 
 export var MenuItem = /*#__PURE__*/function (_React$Component) {
@@ -27,7 +30,7 @@ export var MenuItem = /*#__PURE__*/function (_React$Component) {
     _this.mouseEntered = false;
 
     _this.renderMain = function (props) {
-      var _cn, _cn2;
+      var _cx, _cx2;
 
       var link = props.link,
           comment = props.comment,
@@ -38,18 +41,19 @@ export var MenuItem = /*#__PURE__*/function (_React$Component) {
           component = props.component,
           onMouseEnter = props.onMouseEnter,
           onMouseLeave = props.onMouseLeave,
-          rest = _objectWithoutPropertiesLoose(props, ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave"]);
+          isMobile = props.isMobile,
+          rest = _objectWithoutPropertiesLoose(props, ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile"]);
 
       var hover = state === 'hover' && !_this.props.disabled;
       var iconElement = null;
 
       if (icon) {
         iconElement = /*#__PURE__*/React.createElement("div", {
-          className: jsStyles.icon(_this.theme)
+          className: styles.icon(_this.theme)
         }, icon);
       }
 
-      var className = cn((_cn = {}, _cn[jsStyles.root(_this.theme)] = true, _cn[jsStyles.loose()] = !!loose, _cn[jsStyles.hover(_this.theme)] = hover, _cn[jsStyles.selected(_this.theme)] = state === 'selected', _cn[jsStyles.link(_this.theme)] = !!link, _cn[jsStyles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cn[jsStyles.disabled(_this.theme)] = !!_this.props.disabled, _cn));
+      var className = cx((_cx = {}, _cx[styles.root(_this.theme)] = true, _cx[styles.rootMobile(_this.theme)] = isMobile, _cx[styles.loose()] = !!loose, _cx[styles.hover(_this.theme)] = hover, _cx[styles.selected(_this.theme)] = state === 'selected', _cx[styles.link(_this.theme)] = !!link, _cx[styles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cx[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx));
       var children = _this.props.children;
       var content = children;
 
@@ -67,7 +71,7 @@ export var MenuItem = /*#__PURE__*/function (_React$Component) {
         tabIndex: -1
       }), iconElement, content, _this.props.comment && /*#__PURE__*/React.createElement("div", {
         "data-tid": "MenuItem__comment",
-        className: cn((_cn2 = {}, _cn2[jsStyles.comment(_this.theme)] = true, _cn2[jsStyles.commentHover(_this.theme)] = hover, _cn2))
+        className: cx((_cx2 = {}, _cx2[styles.comment(_this.theme)] = true, _cx2[styles.commentHover(_this.theme)] = hover, _cx2))
       }, comment));
     };
 

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

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