npm - @skbkontur/react-ui - Versions diffs - 4.11.0 → 4.12.0 - Mend

@skbkontur/react-ui 4.11.0 → 4.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/components/Hint/Hint/Hint.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","responsiveLayout","rootNode","createPropsGetter","styles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","timer","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","close","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","isMobileLayout","renderMobile","renderMain","children","undefined","renderContent","disableAnimations","useWrapper","setRootNode","hintBgColor","text","maxWidth","centerAlignPositions","className","content","contentCenter","includes","mobileContent","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Переводит отображение подсказки в _\"ручной режим\"_.\n \n В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n /\n manual?: boolean;\n /\n Задаёт максимальную ширину подсказки.\n /\n maxWidth?: React.CSSProperties['maxWidth'];\n /\n HTML-событие `mouseenter`.\n /\n onMouseEnter?: (event: MouseEventType) => void;\n /\n HTML-событие `mouseleave`.\n /\n onMouseLeave?: (event: MouseEventType) => void;\n /\n Если `true` - подсказка будет открыта.\n \n _Примечание_: работает только при `manual=true`.\n /\n opened?: boolean;\n /\n Расположение подсказки относительно текста.\n \n Допустимые значения: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n /\n pos?: 'top' \| 'right' \| 'bottom' \| 'left' \| PopupPositionsType;\n /\n Текст подсказки.\n /\n text: React.ReactNode;\n /\n Отключает анимацию.\n /\n disableAnimations?: boolean;\n /\n Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n \n _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически.\n /\n useWrapper?: boolean;\n}\n\nexport interface HintState {\n opened: boolean;\n position: PopupPositionsType;\n}\n\nconst Positions: PopupPositionsType[] = [\n 'top center',\n 'top left',\n 'top right',\n 'bottom center',\n 'bottom left',\n 'bottom right',\n 'left middle',\n 'left top',\n 'left bottom',\n 'right middle',\n 'right top',\n 'right bottom',\n];\n\ntype DefaultProps = Required<\n Pick<HintProps, 'pos' \| 'manual' \| 'opened' \| 'maxWidth' \| 'disableAnimations' \| 'useWrapper'>\n>;\n\n/\n Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@responsiveLayout\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n\n private isMobileLayout!: boolean;\n\n public static defaultProps: DefaultProps = {\n pos: 'top',\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n position: DUMMY_LOCATION.position,\n };\n\n private timer: Nullable<number> = null;\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n private popupRef = React.createRef<Popup>();\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.hintPinOffset,\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.isMobileLayout ? this.renderMobile() : this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMobile() {\n const manual = this.getProps().manual;\n return (\n <CommonWrapper {...this.props}>\n <Popup\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={[]}\n onClick={!manual ? this.open : undefined}\n mobileOnCloseRequest={!manual ? this.close : undefined}\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public renderMain() {\n const { disableAnimations, useWrapper } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n onPositionChange={(position) => this.setState({ position })}\n disableAnimations={disableAnimations}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth } = this.getProps();\n const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n const className = cx({\n [styles.content(this.theme)]: true,\n [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n [styles.mobileContent(this.theme)]: this.isMobileLayout,\n });\n return (\n <div className={className} style={{ maxWidth: this.isMobileLayout ? '100%' : maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPositionsType[] => {\n return Positions.filter((x) => x.startsWith(this.getProps().pos));\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer) {\n this.timer = window.setTimeout(this.open, 400);\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n if (!this.getProps().manual && this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n this.setState({ opened: false });\n }\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private close = () => {\n this.setState({ opened: false });\n };\n\n private open = () => {\n this.setState({ opened: true });\n };\n}\n"]}
1	+ {"version":3,"sources":["Hint.tsx"],"names":["React","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","rootNode","createPropsGetter","styles","HINT_BORDER_COLOR","Positions","Hint","getProps","defaultProps","state","opened","manual","position","timer","popupRef","createRef","getAnchorElement","current","anchorElement","getPositions","filter","x","startsWith","pos","handleMouseEnter","e","window","setTimeout","open","props","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","componentDidUpdate","prevProps","componentWillUnmount","render","theme","create","popupPinOffset","hintPinOffset","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","disableAnimations","useWrapper","setRootNode","children","hintBgColor","renderContent","text","maxWidth","centerAlignPositions","className","content","contentCenter","includes","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n children?: React.ReactNode;\n /*\n Переводит отображение подсказки в _\"ручной режим\"_.\n \n В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`.\n /\n manual?: boolean;\n /\n Задаёт максимальную ширину подсказки.\n /\n maxWidth?: React.CSSProperties['maxWidth'];\n /\n HTML-событие `mouseenter`.\n /\n onMouseEnter?: (event: MouseEventType) => void;\n /\n HTML-событие `mouseleave`.\n /\n onMouseLeave?: (event: MouseEventType) => void;\n /\n Если `true` - подсказка будет открыта.\n \n _Примечание_: работает только при `manual=true`.\n /\n opened?: boolean;\n /\n Расположение подсказки относительно текста.\n \n Допустимые значения: `\"top\"`, `\"right\"`, `\"bottom\"`, `\"left\"`, `\"top left\"`, `\"top center\"`, `\"top right\"`, `\"right top\"`, `\"right middle\"`, `\"right bottom\"`, `\"bottom left\"`, `\"bottom center\"`, `\"bottom right\"`, `\"left top\"`, `\"left middle\"`, `\"left bottom\"`.\n /\n pos?: 'top' \| 'right' \| 'bottom' \| 'left' \| PopupPositionsType;\n /\n Текст подсказки.\n /\n text: React.ReactNode;\n /\n Отключает анимацию.\n /\n disableAnimations?: boolean;\n /\n Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.\n \n _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически.\n /\n useWrapper?: boolean;\n}\n\nexport interface HintState {\n opened: boolean;\n position: PopupPositionsType;\n}\n\nconst Positions: PopupPositionsType[] = [\n 'top center',\n 'top left',\n 'top right',\n 'bottom center',\n 'bottom left',\n 'bottom right',\n 'left middle',\n 'left top',\n 'left bottom',\n 'right middle',\n 'right top',\n 'right bottom',\n];\n\ntype DefaultProps = Required<\n Pick<HintProps, 'pos' \| 'manual' \| 'opened' \| 'maxWidth' \| 'disableAnimations' \| 'useWrapper'>\n>;\n\n/\n Всплывающая подсказка, которая по умолчанию отображается при наведении на элемент. <br/> Можно задать другие условия отображения.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n\n public static defaultProps: DefaultProps = {\n pos: 'top',\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n position: DUMMY_LOCATION.position,\n };\n\n private timer: Nullable<number> = null;\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n private popupRef = React.createRef<Popup>();\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.hintPinOffset,\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain() {\n const { disableAnimations, useWrapper } = this.getProps();\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n onPositionChange={(position) => this.setState({ position })}\n disableAnimations={disableAnimations}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n withoutMobile\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth } = this.getProps();\n const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n const className = cx({\n [styles.content(this.theme)]: true,\n [styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n });\n return (\n <div className={className} style={{ maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPositionsType[] => {\n return Positions.filter((x) => x.startsWith(this.getProps().pos));\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer) {\n this.timer = window.setTimeout(this.open, 400);\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n if (!this.getProps().manual && this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n this.setState({ opened: false });\n }\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private open = () => {\n this.setState({ opened: true });\n };\n}\n"]}

package/components/Hint/Hint.d.ts CHANGED Viewed

@@ -61,7 +61,6 @@ declare type DefaultProps = Required<Pick<HintProps, 'pos' | 'manual' | 'opened'
  */
 export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
     static __KONTUR_REACT_UI__: string;
-    private isMobileLayout;
     static defaultProps: DefaultProps;
     private getProps;
     state: HintState;
@@ -72,14 +71,12 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     componentDidUpdate(prevProps: HintProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
-    renderMobile(): JSX.Element;
     renderMain(): JSX.Element;
     getAnchorElement: () => Nullable<Element>;
     private renderContent;
     private getPositions;
     private handleMouseEnter;
     private handleMouseLeave;
-    private close;
     private open;
 }
 export {};

package/components/Hint/Hint.md CHANGED Viewed

@@ -54,3 +54,32 @@ const [isOpen, setIsOpen] = React.useState(false);
 ```jsx harmony
 <Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
 ```
+### Использование встроеной и кастомной обёртки
+Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`.
+Нативные элементы, поддерживающие атрибут `disabled`, отключают необходимые события мыши.
+В подобных случаях следуют использовать проп `useWrapper`:
+```jsx harmony
+<Hint useWrapper text="Подсказа всё равно отображается">
+  <button disabled>native button</button>
+</Hint>
+```
+Т.к. встроённая обёртка это `<span>` без стилей, то она может работать некорректно в определённых ситуациях.
+В таких случаях стоит использовать собственную обётку:
+```jsx harmony
+<>
+  <Hint useWrapper text="Подсказа">
+    <button disabled style={{ height: 40 }}>useWrapper prop</button>
+  </Hint>
+  <Hint text="Подсказа">
+    <span style={{ display: 'inline-block' }}>
+      <button disabled style={{ height: 40 }}>custom wrapper</button>
+    </span>
+  </Hint>
+</>
+```

package/components/Hint/Hint.styles/Hint.styles.js CHANGED Viewed

@@ -1,16 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   content: function content(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", ";\n      overflow-wrap: break-word;\n      padding: ", " ", ";\n      word-break: break-word;\n      word-wrap: break-word;\n    "])), t.hintColor, t.hintFontSize, t.hintLineHeight, t.hintMaxWidth, t.hintPaddingY, t.hintPaddingX);
   },
-  mobileContent: function mobileContent(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      max-width: 100%;\n      text-align: left;\n    "])), t.mobileHintColor);
-  },
   contentCenter: function contentCenter(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
   }
 });

package/components/Hint/Hint.styles/Hint.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","~~mobileContent","mobileHintColor","~~contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;~~AACWI~~,IAAAA,CAAC,CAACQ,~~eADb;;;;AAKD,GArBgC;;AAuBjCC,EAAAA,aAvBiC,yBAuBnBT,CAvBmB,EAuBT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACU,~~aADlB;;AAGD,~~GA3BgC~~,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n content(t: Theme) {\n return css`\n box-sizing: border-box;\n color: ${t.hintColor};\n font-size: ${t.hintFontSize};\n line-height: ${t.hintLineHeight};\n max-width: ${t.hintMaxWidth};\n overflow-wrap: break-word;\n padding: ${t.hintPaddingY} ${t.hintPaddingX};\n word-break: break-word;\n word-wrap: break-word;\n `;\n },\n\n ~~mobileContent(t: Theme) {\n return css`\n color: ${t.mobileHintColor};\n max-width: 100%;\n text-align: left;\n `;\n },\n\n~~ contentCenter(t: Theme) {\n return css`\n text-align: ${t.hintTextAlign};\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Hint.styles.ts"],"names":["css","memoizeStyle","styles","content","t","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,mBACzBC,CADyB,EACf;AAChB,WAAOJ,GAAP;;AAEWI,IAAAA,CAAC,CAACC,SAFb;AAGeD,IAAAA,CAAC,CAACE,YAHjB;AAIiBF,IAAAA,CAAC,CAACG,cAJnB;AAKeH,IAAAA,CAAC,CAACI,YALjB;;AAOaJ,IAAAA,CAAC,CAACK,YAPf,EAO+BL,CAAC,CAACM,YAPjC;;;;AAWD,GAbgC;;AAejCC,EAAAA,aAfiC,yBAenBP,CAfmB,EAeT;AACtB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACQ,aADlB;;AAGD,GAnBgC,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n content(t: Theme) {\n return css`\n box-sizing: border-box;\n color: ${t.hintColor};\n font-size: ${t.hintFontSize};\n line-height: ${t.hintLineHeight};\n max-width: ${t.hintMaxWidth};\n overflow-wrap: break-word;\n padding: ${t.hintPaddingY} ${t.hintPaddingX};\n word-break: break-word;\n word-wrap: break-word;\n `;\n },\n\n contentCenter(t: Theme) {\n return css`\n text-align: ${t.hintTextAlign};\n `;\n },\n});\n"]}

package/components/Hint/Hint.styles.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     content(t: Theme): string;
-    mobileContent(t: Theme): string;
     contentCenter(t: Theme): string;
 };

package/components/MenuItem/MenuItem/MenuItem.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "rel"];
+var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel"];
 var _class, _class2, _temp; // TODO: Enable this rule in functional components.
@@ -10,7 +10,7 @@ var _class, _class2, _temp; // TODO: Enable this rule in functional components.
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isExternalLink, isFunction, isReactUIComponent } from "../../../lib/utils";
+import { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
@@ -58,11 +58,12 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           onMouseLeave = props.onMouseLeave,
           isMobile = props.isMobile,
           href = props.href,
+          disabled = props.disabled,
           _props$rel = props.rel,
           rel = _props$rel === void 0 ? _this.props.href && isExternalLink(_this.props.href) ? 'noopener noreferrer' : _this.props.rel : _props$rel,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
-      var hover = state === 'hover' && !_this.props.disabled;
+      var hover = state === 'hover' && !disabled;
       var iconElement = null;
       if (icon) {
@@ -90,6 +91,7 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
         ref: _this.setRootRef,
         "data-tid": MenuItemDataTids.root
       }, rest, {
+        disabled: disabled,
         state: state,
         onMouseOver: _this.handleMouseEnterFix,
         onMouseLeave: _this.handleMouseLeave,
@@ -98,7 +100,7 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
         rel: href ? rel : undefined,
         tabIndex: -1
       }), iconElement, /*#__PURE__*/React.createElement("span", {
-        className: cx((_cx3 = {}, _cx3[styles.contentMobile()] = isMobile, _cx3))
+        className: cx((_cx3 = {}, _cx3[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon), _cx3))
       }, content), _this.props.comment && /*#__PURE__*/React.createElement("div", {
         "data-tid": MenuItemDataTids.comment,
         className: cx((_cx4 = {}, _cx4[styles.comment(_this.theme)] = true, _cx4[styles.commentHover(_this.theme)] = hover, _cx4))
@@ -131,14 +133,14 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           component = _this$props.component,
           href = _this$props.href;
-      if (disabled) {
-        return 'button';
-      }
       if (component) {
         return component;
       }
+      if (disabled) {
+        return 'button';
+      }
       if (href) {
         return 'a';
       }

package/components/MenuItem/MenuItem/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isExternalLink","isFunction","isReactUIComponent","ThemeContext","CommonWrapper","cx","rootNode","styles","MenuItemDataTids","root","comment","MenuItem","state","iconOffsetTop","mouseEntered","rootRef","renderMain","props","link","icon","loose","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","href","rel","rest","hover","disabled","iconElement","top","theme","className","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","setRootRef","handleMouseEnterFix","handleMouseLeave","undefined","contentMobile","commentHover","e","element","render","setRootNode","componentDidMount","setState","window","getComputedStyle","getPropertyValue","__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 from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isExternalLink, isFunction, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null \| 'hover' \| 'selected' \| void;\n\nexport interface MenuItemProps extends 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 @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\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 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 href,\n rel = this.props.href && isExternalLink(this.props.href) ? 'noopener noreferrer' : this.props.rel,\n ...rest\n } = props;\n\n const hover = state === 'hover' && !this.props.disabled;\n\n let iconElement = null;\n if (icon) {\n iconElement = (\n <div style={{ top: this.state.iconOffsetTop }} className={cx({ [styles.icon(this.theme)]: true })}>\n {icon}\n </div>\n );\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 ref={this.setRootRef}\n data-tid={MenuItemDataTids.root}\n {...rest}\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.contentMobile()]: isMobile,\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 (disabled) {\n return 'button';\n }\n\n if (component) {\n return component;\n }\n\n if (href) {\n return 'a';\n }\n\n return 'button';\n };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}
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","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","href","disabled","rel","rest","hover","iconElement","top","theme","className","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","setRootRef","handleMouseEnterFix","handleMouseLeave","undefined","mobileContentWithIcon","commentHover","e","element","render","setRootNode","componentDidMount","setState","window","getComputedStyle","getPropertyValue","__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 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/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null \| 'hover' \| 'selected' \| void;\n\nexport interface MenuItemProps extends 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 @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\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 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 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 style={{ top: this.state.iconOffsetTop }} className={cx({ [styles.icon(this.theme)]: true })}>\n {icon}\n </div>\n );\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 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"]}

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js CHANGED Viewed

@@ -4,16 +4,35 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
+export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
+  var menuItemLegacyPaddingX = _ref.menuItemLegacyPaddingX,
+      menuItemPaddingX = _ref.menuItemPaddingX,
+      menuItemLegacyPaddingY = _ref.menuItemLegacyPaddingY,
+      menuItemPaddingY = _ref.menuItemPaddingY;
+  var legacyPaddingX = parseFloat(menuItemLegacyPaddingX);
+  var legacyPaddingY = parseFloat(menuItemLegacyPaddingY);
+  var paddingX = legacyPaddingX !== 0 ? parseFloat(menuItemPaddingX) + legacyPaddingX + "px" : menuItemPaddingX;
+  var paddingY = legacyPaddingY !== 0 ? parseFloat(menuItemPaddingY) + legacyPaddingY + "px" : menuItemPaddingY;
+  return {
+    paddingX: paddingX,
+    paddingY: paddingY
+  };
+};
 export var styles = memoizeStyle({
   root: function root(t) {
-    var legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);
-    var legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);
-    var paddingX = legacyPaddingX !== 0 ? parseFloat(t.menuItemPaddingX) + legacyPaddingX + "px" : t.menuItemPaddingX;
-    var paddingY = legacyPaddingY !== 0 ? parseFloat(t.menuItemPaddingY) + legacyPaddingY + "px" : t.menuItemPaddingY;
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
+    var _getMenuItemPaddings = getMenuItemPaddings({
+      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,
+      menuItemPaddingX: t.menuItemPaddingX,
+      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,
+      menuItemPaddingY: t.menuItemPaddingY
+    }),
+        paddingX = _getMenuItemPaddings.paddingX,
+        paddingY = _getMenuItemPaddings.paddingY;
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemDisplay, t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
   },
   rootMobile: function rootMobile(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.fontSizeMobile, t.lineHeightMobile, t.menuItemPaddingMobile);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
   },
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
@@ -23,7 +42,7 @@ export var styles = memoizeStyle({
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
   },
   link: function link(t) {
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
@@ -43,7 +62,7 @@ export var styles = memoizeStyle({
   icon: function icon(t) {
     return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemIconLegacyShift);
   },
-  contentMobile: function contentMobile() {
+  mobileContentWithIcon: function mobileContentWithIcon() {
     return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
   }
 });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","~~styles~~","~~root~~","t","legacyPaddingX","parseFloat","~~menuItemLegacyPaddingX~~","~~legacyPaddingY~~","~~menuItemLegacyPaddingY~~","~~paddingX~~","~~menuItemPaddingX~~","~~paddingY~~","~~menuItemPaddingY~~","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","~~fontSizeMobile~~","~~lineHeightMobile~~","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift","~~contentMobile~~"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;AACA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,~~MAAM~~,~~GAAGF~~,~~YAAY~~,~~CAAC;AACjCG~~,~~EAAAA~~,~~IADiC~~,~~gBAC5BC~~,~~CAD4B~~,~~EAClB~~;~~AACb~~,~~QAAMC~~,cAAc,GAAGC,UAAU,~~CAACF~~,~~CAAC~~,~~CAACG,sBAAH,~~CAAjC;AACA,~~QAAMC~~,cAAc,~~GAAGF~~,UAAU,~~CAACF~~,~~CAAC~~,~~CAACK,sBAAH,~~CAAjC;;AAEA,~~QAAMC~~,QAAQ,~~GAAGL~~,cAAc,KAAK,CAAnB,GAA0BC,UAAU,~~CAACF~~,~~CAAC~~,~~CAACO,gBAAH,~~CAAV,~~GAAiCN~~,~~cAA3D~~,~~UAAgFD~~,~~CAAC,CAACO,gBAAnG~~;AACA,~~QAAMC~~,QAAQ,~~GAAGJ~~,cAAc,KAAK,CAAnB,~~GAA0BF~~,UAAU,CAACF,CAAC,~~CAACS~~,~~gBAAH~~,~~CAAV~~,~~GAAiCL~~,~~cAA3D~~,~~UAAgFJ~~,CAAC,~~CAACS~~,~~gBAAnG;;AAEA~~,~~WAAOd~~,GAAP;AACIE,IAAAA,WAAW,EADf~~;;;;AAKiBG~~,IAAAA,CAAC,~~CAACU~~,kBALnB;~~AAMeV~~,IAAAA,CAAC,~~CAACW~~,gBANjB;~~AAOaX~~,IAAAA,CAAC,~~CAACS~~,gBAPf,~~EAOmCH~~,QAPnC,EAO+CE,QAP/C,~~EAO2DR~~,CAAC,~~CAACO~~,gBAP7D;;;~~AAUWP~~,IAAAA,CAAC,~~CAACY~~,iBAVb;~~AAWmBZ~~,IAAAA,CAAC,~~CAACa~~,oBAXrB;;;;;;AAiBD,~~GAzBgC~~;;~~AA2BjCC~~,EAAAA,~~UA3BiC~~,~~sBA2BtBd~~,~~CA3BsB~~,~~EA2BZ~~;AACnB,~~WAAOL~~,GAAP;~~AACeK~~,IAAAA,CAAC,~~CAACe~~,~~cADjB~~;~~AAEiBf~~,IAAAA,CAAC,~~CAACgB~~,~~gBAFnB~~;~~AAGahB~~,IAAAA,CAAC,~~CAACiB~~,qBAHf;;AAKD,~~GAjCgC~~;;~~AAmCjCC~~,EAAAA,~~KAnCiC~~,~~iBAmC3BlB~~,~~CAnC2B~~,~~EAmCjB~~;AACd;AACA,~~WAAOL~~,GAAP;~~AACgBK~~,IAAAA,CAAC,~~CAACmB~~,eADlB;~~AAEWnB~~,IAAAA,CAAC,~~CAACoB~~,kBAFb;;AAID,~~GAzCgC~~;~~AA0CjCC~~,EAAAA,~~QA1CiC~~,~~oBA0CxBrB~~,~~CA1CwB~~,~~EA0Cd~~;AACjB,~~WAAOL~~,GAAP;~~AACgBK~~,IAAAA,CAAC,~~CAACsB~~,kBADlB;;AAGD,~~GA9CgC~~;~~AA+CjCC~~,EAAAA,~~QA/CiC~~,~~oBA+CxBvB~~,~~CA/CwB~~,~~EA+Cd~~;AACjB,~~WAAOL~~,GAAP~~;;AAEWK~~,IAAAA,CAAC,~~CAACwB~~,qBAFb;;;AAKD,~~GArDgC~~;~~AAsDjCC~~,EAAAA,~~IAtDiC~~,~~gBAsD5BzB~~,~~CAtD4B~~,~~EAsDlB~~;AACb,~~WAAOL~~,GAAP;~~AACWK~~,IAAAA,CAAC,~~CAAC0B~~,iBADb;;AAGD,~~GA1DgC~~;~~AA2DjCC~~,EAAAA,~~KA3DiC~~,~~mBA2DzB~~;AACN,~~WAAOhC~~,GAAP;;;AAGD,~~GA/DgC~~;~~AAgEjCiC~~,EAAAA,~~QAhEiC~~,~~oBAgExB5B~~,~~CAhEwB~~,~~EAgEd~~;AACjB,~~WAAOL~~,GAAP;~~AACkBK~~,IAAAA,CAAC,~~CAAC6B~~,sBADpB;;AAGD,~~GApEgC~~;~~AAqEjCC~~,EAAAA,~~OArEiC~~,~~mBAqEzB9B~~,~~CArEyB~~,~~EAqEf~~;AAChB,~~WAAOL~~,GAAP;~~AACWK~~,IAAAA,CAAC,~~CAAC+B~~,oBADb;;;AAID,~~GA1EgC~~;~~AA2EjCC~~,EAAAA,~~YA3EiC~~,~~wBA2EpBhC~~,~~CA3EoB~~,~~EA2EV~~;AACrB,~~WAAOL~~,GAAP;~~AACWK~~,IAAAA,CAAC,~~CAACiC~~,yBADb;;;AAID,~~GAhFgC~~;~~AAiFjCC~~,EAAAA,~~IAjFiC~~,~~gBAiF5BlC~~,~~CAjF4B~~,~~EAiFlB~~;AACb,~~WAAOL~~,GAAP;~~AACWK~~,IAAAA,CAAC,~~CAACmC~~,iBADb;;;AAIUC,IAAAA,QAAQ,~~CAACpC~~,CAAC,~~CAACO~~,gBAAH,CAAR,GAA+~~B6B~~,QAAQ,~~CAACpC~~,CAAC,~~CAACqC~~,wBAAH,CAJjD;~~AAK0BrC~~,IAAAA,CAAC,~~CAACsC~~,uBAL5B;;AAOD,~~GAzFgC~~;~~AA0FjCC~~,EAAAA,~~aA1FiC~~,~~2BA0FjB~~;~~AACd~~,~~WAAO5C~~,GAAP;;;AAGD,~~GA9FgC~~,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const ~~styles~~ = ~~memoizeStyle~~({\n ~~root(t~~: ~~Theme~~) {\n const legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);\n const legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);\n\n const paddingX = legacyPaddingX !== 0 ? `${parseFloat(t.menuItemPaddingX) + legacyPaddingX}px` : t.menuItemPaddingX;\n const paddingY = legacyPaddingY !== 0 ? `${parseFloat(t.menuItemPaddingY) + legacyPaddingY}px` : t.menuItemPaddingY;\n\n return css`\n ${resetButton()};\n\n cursor: pointer;\n display: ~~block~~;\n line-height: ${t.menuItemLineHeight};\n font-size: ${t.menuItemFontSize};\n padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n position: relative;\n text-decoration: none;\n color: ${t.menuItemTextColor};\n border-radius: ${t.menuItemBorderRadius};\n\n button& {\n min-width: 100%;\n }\n `;\n },\n\n rootMobile(t: Theme) {\n return css`\n font-size: ${t.~~fontSizeMobile~~};\n line-height: ${t.~~lineHeightMobile~~};\n padding: ${t.menuItemPaddingMobile};\n `;\n },\n\n hover(t: Theme) {\n // Color with !important in purpose to override `a:hover`\n return css`\n background: ${t.menuItemHoverBg} !important;\n color: ${t.menuItemHoverColor} !important;\n `;\n },\n selected(t: Theme) {\n return css`\n background: ${t.menuItemSelectedBg} !important;\n `;\n },\n disabled(t: Theme) {\n return css`\n background: ~~transparent~~;\n color: ${t.menuItemDisabledColor};\n cursor: default;\n `;\n },\n link(t: Theme) {\n return css`\n color: ${t.menuItemLinkColor};\n `;\n },\n loose() {\n return css`\n padding-left: 15px;\n `;\n },\n withIcon(t: Theme) {\n return css`\n padding-left: ${t.menuItemPaddingForIcon};\n `;\n },\n comment(t: Theme) {\n return css`\n color: ${t.menuItemCommentColor};\n white-space: normal;\n `;\n },\n commentHover(t: Theme) {\n return css`\n color: ${t.menuItemCommentColorHover};\n opacity: 0.6;\n `;\n },\n icon(t: Theme) {\n return css`\n width: ${t.menuItemIconWidth};\n display: inline-block;\n position: absolute;\n left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n transform: translateY(${t.menuItemIconLegacyShift});\n `;\n },\n ~~contentMobile~~() {\n return css`\n margin-left: 8px;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","getMenuItemPaddings","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","styles","root","t","menuItemDisplay","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift","mobileContentWithIcon"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getMenuItemPaddings = ({\n menuItemLegacyPaddingX,\n menuItemPaddingX,\n menuItemLegacyPaddingY,\n menuItemPaddingY,\n}: Record<'menuItemLegacyPaddingX' \| 'menuItemPaddingX' \| 'menuItemLegacyPaddingY' \| 'menuItemPaddingY', string>) => {\n const legacyPaddingX = parseFloat(menuItemLegacyPaddingX);\n const legacyPaddingY = parseFloat(menuItemLegacyPaddingY);\n\n const paddingX = legacyPaddingX !== 0 ? `${parseFloat(menuItemPaddingX) + legacyPaddingX}px` : menuItemPaddingX;\n const paddingY = legacyPaddingY !== 0 ? `${parseFloat(menuItemPaddingY) + legacyPaddingY}px` : menuItemPaddingY;\n\n return { paddingX, paddingY };\n};\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const { paddingX, paddingY } = getMenuItemPaddings({\n menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,\n menuItemPaddingX: t.menuItemPaddingX,\n menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,\n menuItemPaddingY: t.menuItemPaddingY,\n });\n\n return css`\n ${resetButton()};\n\n cursor: pointer;\n display: ${t.menuItemDisplay};\n line-height: ${t.menuItemLineHeight};\n font-size: ${t.menuItemFontSize};\n padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n position: relative;\n text-decoration: none;\n color: ${t.menuItemTextColor};\n border-radius: ${t.menuItemBorderRadius};\n\n button& {\n min-width: 100%;\n }\n `;\n },\n\n rootMobile(t: Theme) {\n return css`\n font-size: ${t.menuItemFontSizeMobile};\n line-height: ${t.menuItemLineHeightMobile};\n padding: ${t.menuItemPaddingMobile};\n `;\n },\n\n hover(t: Theme) {\n // Color with !important in purpose to override `a:hover`\n return css`\n background: ${t.menuItemHoverBg} !important;\n color: ${t.menuItemHoverColor} !important;\n `;\n },\n selected(t: Theme) {\n return css`\n background: ${t.menuItemSelectedBg} !important;\n `;\n },\n disabled(t: Theme) {\n return css`\n background: ${t.menuItemDisabledBg};\n color: ${t.menuItemDisabledColor};\n cursor: default;\n `;\n },\n link(t: Theme) {\n return css`\n color: ${t.menuItemLinkColor};\n `;\n },\n loose() {\n return css`\n padding-left: 15px;\n `;\n },\n withIcon(t: Theme) {\n return css`\n padding-left: ${t.menuItemPaddingForIcon};\n `;\n },\n comment(t: Theme) {\n return css`\n color: ${t.menuItemCommentColor};\n white-space: normal;\n `;\n },\n commentHover(t: Theme) {\n return css`\n color: ${t.menuItemCommentColorHover};\n opacity: 0.6;\n `;\n },\n icon(t: Theme) {\n return css`\n width: ${t.menuItemIconWidth};\n display: inline-block;\n position: absolute;\n left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n transform: translateY(${t.menuItemIconLegacyShift});\n `;\n },\n mobileContentWithIcon() {\n return css`\n margin-left: 8px;\n `;\n },\n});\n"]}

package/components/MenuItem/MenuItem.styles.d.ts CHANGED Viewed

@@ -1,4 +1,8 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
 export declare const styles: {
     root(t: Theme): string;
     rootMobile(t: Theme): string;
@@ -11,5 +15,5 @@ export declare const styles: {
     comment(t: Theme): string;
     commentHover(t: Theme): string;
     icon(t: Theme): string;
-    contentMobile(): string;
+    mobileContentWithIcon(): string;
 };

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { styles } from "../MenuSeparator.styles";
 export var MenuSeparatorDataTids = {
   root: 'MenuSeparator__root'
@@ -13,9 +15,14 @@ export var MenuSeparatorDataTids = {
 function MenuSeparator(props) {
   var theme = useContext(ThemeContext);
-  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
-    "data-tid": MenuSeparatorDataTids.root,
-    className: styles.root(theme)
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _cx;
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx))
+    });
   }));
 }

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,~~GAAGR~~,UAAU,~~CAACC~~,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,~~EAAmBM~~,KAAnB;AACE,~~iCAAK~~,~~YAAUH~~,qBAAqB,CAACC,~~IAArC~~,~~EAA2C~~,SAAS,~~EAAEF~~,MAAM,CAACE,IAAP,CAAYG,KAAZ,~~CAAtD~~,GADF,CADF~~;;;AAKD~~;;~~AAEDF~~,aAAa,~~CAACG~~,mBAAd,GAAoC,eAApC;;AAEA,~~SAASH~~,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n root: 'MenuSeparator__root',\n} as const;\n/*\n Добавляет разделительную линию между элементами меню.\n \n Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n const theme = useContext(ThemeContext);\n\n return (\n <CommonWrapper {...props}>\n <div data-tid={MenuSeparatorDataTids.root} className={styles.root(theme)} />\n </CommonWrapper>\n );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}
1	+ {"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","cx","ThemeContext","CommonWrapper","ResponsiveLayout","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","isMobile","rootMobile","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,qBAAjC;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,KAAnB;AACE,wBAAC,gBAAD;AACG,oBAAkB,aAAfE,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUL,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAEN,EAAE,gBAAII,MAAM,CAACE,IAAP,CAAYG,KAAZ,CAAJ,IAAyB,IAAzB,MAAgCL,MAAM,CAACO,UAAP,CAAkBF,KAAlB,CAAhC,IAA2DC,QAA3D,OAFf,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDH,aAAa,CAACK,mBAAd,GAAoC,eAApC;;AAEA,SAASL,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n root: 'MenuSeparator__root',\n} as const;\n/*\n Добавляет разделительную линию между элементами меню.\n \n Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n const theme = useContext(ThemeContext);\n\n return (\n <CommonWrapper {...props}>\n <ResponsiveLayout>\n {({ isMobile }) => {\n return (\n <div\n data-tid={MenuSeparatorDataTids.root}\n className={cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n />\n );\n }}\n </ResponsiveLayout>\n </CommonWrapper>\n );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js CHANGED Viewed

@@ -1,10 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject;
+var _templateObject, _templateObject2;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: ", " 0;\n      border-top: ", " solid ", ";\n    "])), t.menuSeparatorMarginY, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
   }
 });

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor"],"mappings":"~~oHAAA~~,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC,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 return css`\n margin: ${t.menuSeparatorMarginY} 0;\n border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBJ,CARsB,EAQZ;AACnB,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACK,0BADd,EAC4CL,CAAC,CAACM,0BAD9C;;;AAID,GAbgC,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 return css`\n margin: ${t.menuSeparatorMarginY} 0;\n border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n `;\n },\n\n rootMobile(t: Theme) {\n return css`\n margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n border-radius: 1px;\n `;\n },\n});\n"]}

package/components/MenuSeparator/MenuSeparator.styles.d.ts CHANGED Viewed

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

package/components/Modal/Modal/Modal.js CHANGED Viewed

@@ -16,8 +16,8 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { ModalContext } from "../ModalContext";
 import { ModalFooter } from "../ModalFooter";
 import { ModalHeader } from "../ModalHeader";