@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-9a162.0

package/components/Hint/Hint/Hint.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","rootNode","createPropsGetter","withRenderEnvironment","getStyles","HINT_BORDER_COLOR","Hint","_class","_Hint","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","opened","manual","position","popupRef","createRef","getAnchorElement","_this$popupRef$curren","current","anchorElement","getPositions","props","allowedPositions","handleMouseEnter","e","timer","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","_inheritsLoose","_proto","prototype","getAllowedPositions","componentDidUpdate","prevProps","_this$getProps","componentWillUnmount","render","_this2","styles","emotion","createElement","Consumer","theme","Provider","value","create","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","_this3","_this$getProps2","disableAnimations","useWrapper","_extends","rootNodeRef","setRootNode","hasPin","children","positions","pos","backgroundColor","hintBgColor","borderColor","onPositionChange","ref","withoutMobile","renderContent","_this$cx","text","_this$getProps3","maxWidth","centerAlignPositions","className","cx","content","contentCenter","includes","style","PureComponent","__KONTUR_REACT_UI__","displayName"],"sources":["Hint.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { SafeTimer } from '../../lib/globalObject';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';\nimport { DUMMY_LOCATION, Popup } from '../../internal/Popup';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { getStyles } from './Hint.styles';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nexport interface HintProps extends CommonProps {\n  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Переводит отображение подсказки в _\"ручной режим\"_.\n   В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`. */\n  manual?: boolean;\n\n  /** Задает максимальную ширину подсказки. */\n  maxWidth?: React.CSSProperties['maxWidth'];\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */\n  onMouseEnter?: (event: MouseEventType) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (event: MouseEventType) => void;\n\n  /** Открывает подсказку. Работает только при `manual=true`. */\n  opened?: boolean;\n\n  /** Задает приоритетное расположение подсказки относительно текста. */\n  pos?: ShortPopupPositionsType | PopupPinnablePositionsType;\n\n  /** Задает текст подсказки. */\n  text: React.ReactNode;\n\n  /** Задает список позиций, которые будет занимать хинт. Если положение хинта в определенной позиции будет выходить за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`. */\n  allowedPositions?: PopupPinnablePositionsType[];\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n\n  /** Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`.\n   * Используется для корректного позиционирования хинта при двух и более вложенных элементах.\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически. */\n  useWrapper?: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n  position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;\n\n/**\n * Всплывающая подсказка `Hint`.\n * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.\n *\n * Для подсказки, всплывающей по клику используйте Tooltip.\n */\n@withRenderEnvironment\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n  public static displayName = 'Hint';\n\n  public static defaultProps: DefaultProps = {\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: SafeTimer;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n\n  private popupRef = React.createRef<Popup>();\n\n  public getAllowedPositions(): string[] | undefined {\n    return this.props.allowedPositions;\n  }\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(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\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(): React.JSX.Element {\n    const { disableAnimations, useWrapper } = this.getProps();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin={false}\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          pos={this.props.pos}\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 = this.cx({\n      [this.styles.content(this.theme)]: true,\n      [this.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 = (): PopupPinnablePositionsType[] | undefined => {\n    return this.props.allowedPositions;\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      this.timer = 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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","globalObject","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","cx","rootNode","createPropsGetter","styles","HINT_BORDER_COLOR","Hint","_class","_Hint","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","opened","manual","position","popupRef","createRef","getAnchorElement","_this$popupRef$curren","current","anchorElement","getPositions","props","allowedPositions","handleMouseEnter","e","timer","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","_inheritsLoose","_proto","prototype","getAllowedPositions","componentDidUpdate","prevProps","_this$getProps","componentWillUnmount","render","_this2","createElement","Consumer","theme","Provider","value","create","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","_this3","_this$getProps2","disableAnimations","useWrapper","_extends","rootNodeRef","setRootNode","hasPin","children","positions","pos","backgroundColor","hintBgColor","borderColor","onPositionChange","ref","withoutMobile","renderContent","_cx","text","_this$getProps3","maxWidth","centerAlignPositions","className","content","contentCenter","includes","style","PureComponent","__KONTUR_REACT_UI__","displayName"],"sources":["Hint.tsx"],"sourcesContent":["import React from 'react';\nimport type { SafeTimer } from '@skbkontur/global-object';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { Theme } from '../../lib/theming/Theme';\nimport type { PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';\nimport { DUMMY_LOCATION, Popup } from '../../internal/Popup';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\nimport type { 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  /** @ignore */\n  children?: React.ReactNode;\n\n  /** Переводит отображение подсказки в _\"ручной режим\"_.\n   В _\"ручном режиме\"_ подсказку можно активировать только задав значение пропу `opened`. */\n  manual?: boolean;\n\n  /** Задает максимальную ширину подсказки. */\n  maxWidth?: React.CSSProperties['maxWidth'];\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */\n  onMouseEnter?: (event: MouseEventType) => void;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: (event: MouseEventType) => void;\n\n  /** Открывает подсказку. Работает только при `manual=true`. */\n  opened?: boolean;\n\n  /** Задает приоритетное расположение подсказки относительно текста. */\n  pos?: ShortPopupPositionsType | PopupPinnablePositionsType;\n\n  /** Задает текст подсказки. */\n  text: React.ReactNode;\n\n  /** Задает список позиций, которые будет занимать хинт. Если положение хинта в определенной позиции будет выходить за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`. */\n  allowedPositions?: PopupPinnablePositionsType[];\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n\n  /** Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`.\n   * Используется для корректного позиционирования хинта при двух и более вложенных элементах.\n   * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически. */\n  useWrapper?: boolean;\n}\n\nexport interface HintState {\n  opened: boolean;\n  position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;\n\n/**\n * Всплывающая подсказка `Hint`.\n * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.\n *\n * Для подсказки, всплывающей по клику используйте Tooltip.\n */\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n  public static __KONTUR_REACT_UI__ = 'Hint';\n  public static displayName = 'Hint';\n\n  public static defaultProps: DefaultProps = {\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: SafeTimer;\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  private popupRef = React.createRef<Popup>();\n\n  public getAllowedPositions() {\n    return this.props.allowedPositions;\n  }\n\n  public componentDidUpdate(prevProps: HintProps) {\n    const { opened, manual } = this.getProps();\n    if (!manual) {\n      return;\n    }\n    if (this.timer) {\n      globalObject.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      globalObject.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                  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\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <Popup\n          hasPin={false}\n          opened={this.state.opened}\n          anchorElement={this.props.children}\n          positions={this.getPositions()}\n          pos={this.props.pos}\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 = (): PopupPinnablePositionsType[] | undefined => {\n    return this.props.allowedPositions;\n  };\n\n  private handleMouseEnter = (e: MouseEventType) => {\n    if (!this.getProps().manual && !this.timer) {\n      this.timer = globalObject.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      globalObject.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"],"mappings":"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","ignoreList":[]}

package/components/Hint/Hint.d.ts

@@ -53,9 +53,6 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     private theme;
     getRootNode: TGetRootNode;
     private setRootNode;
-    private styles;
-    private emotion;
-    private cx;
     private popupRef;
     getAllowedPositions(): string[] | undefined;
     componentDidUpdate(prevProps: HintProps): void;

package/components/Hint/Hint.styles/Hint.styles.js

@@ -1,14 +1,11 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2;
-import { memoizeGetStyles } from "../../../lib/theming/Emotion";
-export var getStyles = memoizeGetStyles(function (_ref) {
-  var css = _ref.css;
-  return {
-    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);
-    },
-    contentCenter: function contentCenter(t) {
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
-    }
-  };
+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);
+  },
+  contentCenter: function contentCenter(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: ", ";\n    "])), t.hintTextAlign);
+  }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeGetStyles","getStyles","_ref","css","content","t","_templateObject","_taggedTemplateLiteralLoose","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","_templateObject2","hintTextAlign"],"sources":["Hint.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\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"],"mappings":";;;AAGA,SAASA,gBAAgB,QAAQ,2BAA2B;;AAE5D,OAAO,IAAMC,SAAS,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,OAAO,WAAAA,QAACC,CAAQ,EAAE;MAChB,OAAOF,GAAG,CAAAG,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;MAECF,CAAC,CAACG,SAAS;MACPH,CAAC,CAACI,YAAY;MACZJ,CAAC,CAACK,cAAc;MAClBL,CAAC,CAACM,YAAY;;MAEhBN,CAAC,CAACO,YAAY,EAAIP,CAAC,CAACQ,YAAY;;;;IAI/C,CAAC;;IAEDC,aAAa,WAAAA,cAACT,CAAQ,EAAE;MACtB,OAAOF,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;MACMF,CAAC,CAACW,aAAa;;IAEjC;EACF,CAAC,EAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","content","t","_templateObject","_taggedTemplateLiteralLoose","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","_templateObject2","hintTextAlign"],"sources":["Hint.styles.ts"],"sourcesContent":["import type { 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"],"mappings":";AACA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,OAAO,WAAAA,QAACC,CAAQ,EAAE;IAChB,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;IAECF,CAAC,CAACG,SAAS;IACPH,CAAC,CAACI,YAAY;IACZJ,CAAC,CAACK,cAAc;IAClBL,CAAC,CAACM,YAAY;;IAEhBN,CAAC,CAACO,YAAY,EAAIP,CAAC,CAACQ,YAAY;;;;EAI/C,CAAC;;EAEDC,aAAa,WAAAA,cAACT,CAAQ,EAAE;IACtB,OAAOJ,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;IACMF,CAAC,CAACW,aAAa;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
+export declare const styles: {
     content(t: Theme): string;
     contentCenter(t: Theme): string;
-}>;
+};

package/components/Input/Input/Input.js

@@ -1,14 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "corners", "aria-describedby", "aria-controls", "aria-label", "element", "showClearIcon"];
+var _excluded = ["onMouseEnter", "onMouseLeave", "onMouseOver", "onKeyDown", "onKeyPress", "onValueChange", "width", "error", "role", "warning", "leftIcon", "rightIcon", "borderless", "value", "align", "type", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls", "aria-label", "element", "showClearIcon"];
 var _class, _Input; // TODO: Enable this rule in functional components.
 import invariant from 'invariant';
 import React, { createRef } from 'react';
 import warning from 'warning';
+import { globalObject } from '@skbkontur/global-object';
+import { isEdge, isIE11 } from "../../../lib/client";
 import { isKeyBackspace, isKeyDelete, someKeys } from "../../../lib/events/keyboard/identifiers";
+import { needsPolyfillPlaceholder } from "../../../lib/needsPolyfillPlaceholder";
+import { InternalMaskedInput } from "../../../internal/InternalMaskedInput";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
@@ -16,9 +22,9 @@ import { ClearCrossIcon } from "../../../internal/ClearCrossIcon/ClearCrossIcon"
 import { catchUnreachableWarning } from "../../../lib/typeGuards";
 import { blink as _blink } from "../../../lib/blink";
 import { withSize } from "../../../lib/size/SizeDecorator";
-import { withRenderEnvironment } from "../../../lib/renderEnvironment";
-import { getStyles } from "../Input.styles";
+import { styles } from "../Input.styles";
 import { InputLayout } from "../InputLayout/InputLayout";
+import { PolyfillPlaceholder } from "../InputLayout/PolyfillPlaceholder";
 export var inputTypes = ['password', 'text', 'number', 'tel', 'search', 'time', 'date', 'url', 'email'];
 export var selectionAllowedTypes = ['text', 'password', 'tel', 'search', 'url'];
 export var selectionErrorMessage = function selectionErrorMessage(type, allowedTypes) {
@@ -29,6 +35,18 @@ export var selectionErrorMessage = function selectionErrorMessage(type, allowedT
     return "\"" + i + "\"";
   }).join(', ') + ". Reason: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange.";
 };
+export var maskForbiddenTypes = ['number', 'date', 'time'];
+export var maskAllowedTypes = inputTypes.filter(function (type) {
+  return !maskForbiddenTypes.includes(type);
+});
+export var maskErrorMessage = function maskErrorMessage(type, allowedTypes) {
+  if (allowedTypes === void 0) {
+    allowedTypes = maskAllowedTypes;
+  }
+  return "<Input />. Prop \"mask\" does not support type \"" + type + "\". Supported types: " + allowedTypes.map(function (i) {
+    return "\"" + i + "\"";
+  }).join(', ') + ".";
+};
 export var calculateClearCrossShowedState = function calculateClearCrossShowedState(_ref) {
   var showClearIcon = _ref.showClearIcon,
     notEmptyValue = _ref.notEmptyValue,
@@ -53,7 +71,7 @@ export var InputDataTids = {
 /**
  * Поле ввода позволяет ввести или отредактировать значение.
  */
-export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/function (_React$Component) {
+export var Input = rootNode(_class = withSize(_class = (_Input = /*#__PURE__*/function (_React$Component) {
   function Input() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -80,6 +98,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
       });
     };
     _this.state = {
+      needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       focused: false,
       hovered: false,
       clearCrossShowed: _this.getClearCrossShowed({
@@ -97,8 +116,8 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
       return _this._selectAll();
     };
     _this.delaySelectAll = function () {
-      var _this$globalObject$re;
-      return _this.selectAllId = (_this$globalObject$re = _this.globalObject.requestAnimationFrame == null ? void 0 : _this.globalObject.requestAnimationFrame(_this._selectAll)) != null ? _this$globalObject$re : null;
+      var _globalObject$request;
+      return _this.selectAllId = (_globalObject$request = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(_this._selectAll)) != null ? _globalObject$request : null;
     };
     _this._selectAll = function () {
       if (_this.input) {
@@ -107,7 +126,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
     };
     _this.cancelDelayedSelectAll = function () {
       if (_this.selectAllId) {
-        _this.globalObject.cancelAnimationFrame == null || _this.globalObject.cancelAnimationFrame(_this.selectAllId);
+        globalObject.cancelAnimationFrame == null || globalObject.cancelAnimationFrame(_this.selectAllId);
         _this.selectAllId = null;
       }
     };
@@ -115,10 +134,11 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
       if (_this.props.element) {
         return /*#__PURE__*/React.cloneElement(_this.props.element, inputProps);
       }
-      return /*#__PURE__*/React.createElement('input', inputProps);
+      return _this.props.mask && !_this.canBeUsedWithMask ? _this.renderMaskedInput(inputProps, _this.props.mask) : /*#__PURE__*/
+      React.createElement('input', inputProps);
     };
     _this.renderMain = function (props) {
-      var _this$cx, _this$cx2;
+      var _cx, _cx2;
       var onMouseEnter = props.onMouseEnter,
         onMouseLeave = props.onMouseLeave,
         onMouseOver = props.onMouseOver,
@@ -135,6 +155,9 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         value = props.value,
         align = props.align,
         type = props.type,
+        mask = props.mask,
+        maskChar = props.maskChar,
+        alwaysShowMask = props.alwaysShowMask,
         size = props.size,
         placeholder = props.placeholder,
         selectAllOnFocus = props.selectAllOnFocus,
@@ -142,6 +165,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         onUnexpectedInput = props.onUnexpectedInput,
         prefix = props.prefix,
         suffix = props.suffix,
+        formatChars = props.formatChars,
         corners = props.corners,
         ariaDescribedby = props['aria-describedby'],
         ariaControls = props['aria-controls'],
@@ -151,7 +175,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         rest = _objectWithoutPropertiesLoose(props, _excluded);
       var focused = _this.state.focused;
       var labelProps = {
-        className: _this.cx(_this.styles.root(_this.theme), _this.getSizeClassName(), (_this$cx = {}, _this$cx[_this.styles.focus(_this.theme)] = focused && !warning && !error, _this$cx[_this.styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _this$cx[_this.styles.borderless()] = borderless && !focused, _this$cx[_this.styles.disabled(_this.theme)] = disabled, _this$cx[_this.styles.warning(_this.theme)] = warning, _this$cx[_this.styles.error(_this.theme)] = error, _this$cx)),
+        className: cx(styles.root(_this.theme), _this.getSizeClassName(), (_cx = {}, _cx[styles.focus(_this.theme)] = focused && !warning && !error, _cx[styles.hovering(_this.theme)] = !focused && !disabled && !warning && !error && !borderless, _cx[styles.borderless()] = borderless && !focused, _cx[styles.disabled(_this.theme)] = disabled, _cx[styles.warning(_this.theme)] = warning, _cx[styles.error(_this.theme)] = error, _cx[styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _cx[styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _cx[styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _cx)),
         'aria-controls': ariaControls,
         style: _extends({
           width: width
@@ -162,7 +186,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         ref: _this.labelRef
       };
       var inputProps = _extends({}, rest, {
-        className: _this.cx(_this.styles.input(_this.theme), (_this$cx2 = {}, _this$cx2[_this.styles.inputFocus(_this.theme)] = focused, _this$cx2[_this.styles.inputDisabled(_this.theme)] = disabled, _this$cx2)),
+        className: cx(styles.input(_this.theme), (_cx2 = {}, _cx2[styles.inputFocus(_this.theme)] = focused, _cx2[styles.inputDisabled(_this.theme)] = disabled, _cx2)),
         value: value,
         role: role,
         onChange: _this.handleChange,
@@ -175,7 +199,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         },
         ref: _this.refInput,
         type: type,
-        placeholder: placeholder,
+        placeholder: !_this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,
         disabled: disabled,
         'aria-describedby': ariaDescribedby,
         'aria-label': ariaLabel
@@ -204,11 +228,17 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
             focused: focused,
             size: _this.size
           }
-        }, input)
+        }, input, _this.state.needsPolyfillPlaceholder && /*#__PURE__*/
+        React.createElement(PolyfillPlaceholder, {
+          isMaskVisible: _this.isMaskVisible,
+          value: value,
+          defaultValue: _this.props.defaultValue,
+          align: align
+        }, placeholder))
       );
     };
     _this.refInput = function (element) {
-      if (element && 'input' in element) {
+      if (element instanceof InternalMaskedInput || element && 'input' in element) {
         _this.input = element.input;
       } else {
         _this.input = element;
@@ -226,6 +256,14 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
       }
     };
     _this.handleChange = function (event) {
+      if (needsPolyfillPlaceholder) {
+        var fieldIsEmpty = event.target.value === '';
+        if (_this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {
+          _this.setState({
+            needsPolyfillPlaceholder: fieldIsEmpty
+          });
+        }
+      }
       if (_this.props.onValueChange) {
         _this.props.onValueChange(event.target.value);
       }
@@ -272,7 +310,7 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         })
       });
       if (_this.props.selectAllOnFocus) {
-        _this.input && _this.selectAll();
+        _this.input && !isIE11 ? _this.selectAll() : _this.delaySelectAll();
       }
       if (_this.props.onFocus) {
         _this.props.onFocus(event);
@@ -295,6 +333,11 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
         _this.handleUnexpectedInput(event.currentTarget.value);
       }
     };
+    _this.handleMaskedValueChange = function (value) {
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange(value);
+      }
+    };
     _this.handleUnexpectedInput = function (value) {
       if (value === void 0) {
         value = _this.props.value || '';
@@ -333,6 +376,17 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
   }
   _inheritsLoose(Input, _React$Component);
   var _proto = Input.prototype;
+  _proto.outputMaskError = function outputMaskError() {
+    warning(!(this.props.mask && this.canBeUsedWithMask), maskErrorMessage(this.getProps().type));
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    this.outputMaskError();
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.type !== prevProps.type || this.props.mask !== prevProps.mask) {
+      this.outputMaskError();
+    }
+  };
   _proto.componentWillUnmount = function componentWillUnmount() {
     this.cancelDelayedSelectAll();
   } /** Программно устанавливает фокус на поле.
@@ -368,45 +422,78 @@ export var Input = withRenderEnvironment(_class = rootNode(_class = withSize(_cl
     * @param {number} end
     */;
   _proto.setSelectionRange = function setSelectionRange(start, end) {
-    var _this$globalObject$do, _this$input2; // https://github.com/facebook/react/issues/7769
+    var _globalObject$documen,
+      _this$props$value,
+      _this2 = this; // https://github.com/facebook/react/issues/7769
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
     if (!selectionAllowedTypes.includes(this.getProps().type)) {
       warning(false, selectionErrorMessage(this.getProps().type));
       return;
     }
     if (!this.input) {
-      warning(false, 'Cannot call "setSelectionRange" on unmounted Input');
-      return;
+      throw new Error('Cannot call "setSelectionRange" on unmounted Input');
     }
-    if (((_this$globalObject$do = this.globalObject.document) == null ? void 0 : _this$globalObject$do.activeElement) !== this.input) {
+    if (((_globalObject$documen = globalObject.document) == null ? void 0 : _globalObject$documen.activeElement) !== this.input) {
       this.focus();
     }
-    (_this$input2 = this.input) == null || _this$input2.setSelectionRange(start, end);
+    if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {
+      globalObject.setTimeout(function () {
+        var _this2$input;
+        (_this2$input = _this2.input) == null || _this2$input.setSelectionRange(start, end);
+      }, 150);
+    } else {
+      var _this$input2;
+      (_this$input2 = this.input) == null || _this$input2.setSelectionRange(start, end);
+    }
   };
   _proto.render = function render() {
-    var _this2 = this;
-    this.styles = getStyles(this.emotion);
+    var _this3 = this;
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
+      _this3.theme = theme;
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this2.setRootNode
-      }, _this2.getProps()), _this2.renderMain);
+        rootNodeRef: _this3.setRootNode
+      }, _this3.getProps()), _this3.renderMain);
     });
   };
+  _proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {
+    return /*#__PURE__*/React.createElement(InternalMaskedInput, _extends({}, inputProps, {
+      mask: mask,
+      maskChar: this.props.maskChar,
+      alwaysShowMask: this.props.alwaysShowMask,
+      formatChars: this.props.formatChars,
+      onChange: this.props.onChange,
+      onValueChange: this.handleMaskedValueChange,
+      onUnexpectedInput: this.handleUnexpectedInput
+    }));
+  };
   _proto.getSizeClassName = function getSizeClassName() {
-    var _this$cx3, _this$cx4, _this$cx5;
+    var _cx3, _cx4, _cx5;
     switch (this.size) {
       case 'large':
-        return this.cx((_this$cx3 = {}, _this$cx3[this.styles.sizeLarge(this.theme)] = true, _this$cx3));
+        return cx((_cx3 = {}, _cx3[styles.sizeLarge(this.theme)] = true, _cx3[styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _cx3));
       case 'medium':
-        return this.cx((_this$cx4 = {}, _this$cx4[this.styles.sizeMedium(this.theme)] = true, _this$cx4));
+        return cx((_cx4 = {}, _cx4[styles.sizeMedium(this.theme)] = true, _cx4[styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _cx4));
       case 'small':
       default:
-        return this.cx((_this$cx5 = {}, _this$cx5[this.styles.sizeSmall(this.theme)] = true, _this$cx5));
+        return cx((_cx5 = {}, _cx5[styles.sizeSmall(this.theme)] = true, _cx5[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx5));
     }
   };
-  return Input;
+  return _createClass(Input, [{
+    key: "isMaskVisible",
+    get: function get() {
+      var _this$props = this.props,
+        mask = _this$props.mask,
+        alwaysShowMask = _this$props.alwaysShowMask;
+      var focused = this.state.focused;
+      return Boolean(mask && (focused || alwaysShowMask));
+    }
+  }, {
+    key: "canBeUsedWithMask",
+    get: function get() {
+      return maskForbiddenTypes.includes(this.getProps().type);
+    }
+  }]);
 }(React.Component), _Input.__KONTUR_REACT_UI__ = 'Input', _Input.displayName = 'Input', _Input.defaultProps = {
   type: 'text',
   showClearIcon: 'never'
-}, _Input)) || _class) || _class) || _class;
+}, _Input)) || _class) || _class;