@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_ThemeFactory","_Popup","_currentEnvironment","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_ThemeContext","_Hint2","_class","_Hint","HINT_BORDER_COLOR","Hint","exports","rootNode","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","opened","manual","position","DUMMY_LOCATION","popupRef","React","createRef","getAnchorElement","_this$popupRef$curren","current","anchorElement","getPositions","props","allowedPositions","handleMouseEnter","e","timer","globalObject","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","_inheritsLoose2","default","_proto","prototype","getAllowedPositions","componentDidUpdate","prevProps","_this$getProps","componentWillUnmount","render","_this2","createElement","EmotionConsumer","emotion","styles","getStyles","ThemeContext","Consumer","theme","Provider","value","ThemeFactory","create","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","_this3","_this$getProps2","disableAnimations","useWrapper","CommonWrapper","_extends2","rootNodeRef","setRootNode","Popup","hasPin","children","positions","pos","backgroundColor","hintBgColor","borderColor","onPositionChange","ref","withoutMobile","renderContent","_this$emotion$cx","text","_this$getProps3","maxWidth","centerAlignPositions","className","cx","content","contentCenter","includes","style","PureComponent","__KONTUR_REACT_UI__","displayName","isTestEnv"],"sources":["Hint.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';\nimport { Nullable } from '../../typings/utility-types';\nimport { MouseEventType } from '../../typings/event-types';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } 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?: ShortPopupPositionsType | PopupPinnablePositionsType;\n  /**\n   * Текст подсказки.\n   */\n  text: React.ReactNode;\n  /**\n   * Список позиций, которые хинт будет занимать. Если положение хинт в определенной позиции будет выходить\n   * за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`.\n   */\n  allowedPositions?: PopupPinnablePositionsType[];\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: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;\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  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  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\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      </EmotionConsumer>\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 = this.emotion.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 = 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":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_ThemeContext","_ThemeFactory","_Popup","_currentEnvironment","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_Hint2","_class","_Hint","HINT_BORDER_COLOR","Hint","exports","rootNode","_React$PureComponent","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","opened","manual","position","DUMMY_LOCATION","popupRef","React","createRef","getAnchorElement","_this$popupRef$curren","current","anchorElement","getPositions","props","allowedPositions","handleMouseEnter","e","timer","globalObject","setTimeout","open","onMouseEnter","handleMouseLeave","clearTimeout","setState","onMouseLeave","_inheritsLoose2","default","_proto","prototype","getAllowedPositions","componentDidUpdate","prevProps","_this$getProps","componentWillUnmount","render","_this2","createElement","ThemeContext","Consumer","theme","Provider","value","ThemeFactory","create","popupMargin","hintMargin","popupBorder","hintBorder","popupBorderRadius","hintBorderRadius","renderMain","_this3","_this$getProps2","disableAnimations","useWrapper","CommonWrapper","_extends2","rootNodeRef","setRootNode","Popup","hasPin","children","positions","pos","backgroundColor","hintBgColor","borderColor","onPositionChange","ref","withoutMobile","renderContent","_cx","text","_this$getProps3","maxWidth","centerAlignPositions","className","cx","styles","content","contentCenter","includes","style","PureComponent","__KONTUR_REACT_UI__","displayName","isTestEnv"],"sources":["Hint.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DUMMY_LOCATION, Popup, PopupPinnablePositionsType, ShortPopupPositionsType } 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  /** @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  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/cjs/components/Hint/Hint.md

@@ -1,10 +1,10 @@
-Базовый пример всплывающей подсказки.
+### Базовый пример
 
 ```jsx harmony
 <Hint text="Подсказка">Базовая</Hint>
 ```
 
-Пример подсказки с иконкой.
+### Иконка
 
 ```jsx harmony
 <Hint text="Редактирование">
@@ -18,13 +18,13 @@
 </Hint>
 ```
 
-Пример подсказки, всегда всплывающей слева.
+### Сторона всплытия
 
 ```jsx harmony
 <Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
 ```
 
-Пример всплывающей подсказки с ограниченной шириной.
+### Ограниченная ширина
 ```jsx harmony
 <Hint
   maxWidth="150px"
@@ -34,7 +34,7 @@
 </Hint>
 ```
 
-Пример всплывающей подсказки, открытие которой контролируется кнопкой.
+### Открытие подсказки кнопкой
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';
@@ -49,15 +49,15 @@ const [isOpen, setIsOpen] = React.useState(false);
 </Gapped>
 ```
 
-Пример подсказки, всплывающей без анимации.
+### Всплытие без анимации
 
 ```jsx harmony
 <Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
 ```
 
-### Использование встроеной и кастомной обёртки
+### Встроеная обёртка
 
-Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`. 
+Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`.
 
 Нативные элементы, поддерживающие атрибут `disabled`, отключают необходимые события мыши.
 В подобных случаях следуют использовать проп `useWrapper`:
@@ -68,6 +68,7 @@ const [isOpen, setIsOpen] = React.useState(false);
 </Hint>
 ```
 
+### Кастомная обертка
 Т.к. встроённая обёртка это `<span>` без стилей, то она может работать некорректно в определённых ситуациях.
 В таких случаях стоит использовать собственную обётку:
 

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     content(t: Theme): string;
     contentCenter(t: Theme): string;
 };

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

@@ -1,27 +1,24 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
-
-
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      content: function content(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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      "])),
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  content: function content(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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.hintColor,
+    t.hintFontSize,
+    t.hintLineHeight,
+    t.hintMaxWidth,
 
-        t.hintPaddingY, t.hintPaddingX);
+    t.hintPaddingY, t.hintPaddingX);
 
 
 
-      },
+  },
 
-      contentCenter: function contentCenter(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        text-align: ", ";\n      "])),
-        t.hintTextAlign);
+  contentCenter: function contentCenter(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: ", ";\n    "])),
+    t.hintTextAlign);
 
-      }
-    }));};
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","getStyles","exports","emotion","memoizeStyle","content","t","css","_taggedTemplateLiteralLoose2","default","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"sources":["Hint.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    content(t: Theme) {\n      return emotion.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 emotion.css`\n        text-align: ${t.hintTextAlign};\n      `;\n    },\n  });\n"],"mappings":";;;AAGA,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA;;AAElD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,OAAO,WAAAA,QAACC,CAAQ,EAAE;QAChB,OAAOH,OAAO,CAACI,GAAG,CAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;;QAEPH,CAAC,CAACI,SAAS;QACPJ,CAAC,CAACK,YAAY;QACZL,CAAC,CAACM,cAAc;QAClBN,CAAC,CAACO,YAAY;;QAEhBP,CAAC,CAACQ,YAAY,EAAIR,CAAC,CAACS,YAAY;;;;MAI/C,CAAC;;MAEDC,aAAa,WAAAA,cAACV,CAAQ,EAAE;QACtB,OAAOH,OAAO,CAACI,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;QACFH,CAAC,CAACW,aAAa;;MAEjC;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","styles","exports","memoizeStyle","content","t","css","_taggedTemplateLiteralLoose2","default","hintColor","hintFontSize","hintLineHeight","hintMaxWidth","hintPaddingY","hintPaddingX","contentCenter","hintTextAlign"],"sources":["Hint.styles.ts"],"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"],"mappings":";AACA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA;;AAEvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,OAAO,WAAAA,QAACC,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAP,eAAA,KAAAA,eAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAACI,SAAS;IACPJ,CAAC,CAACK,YAAY;IACZL,CAAC,CAACM,cAAc;IAClBN,CAAC,CAACO,YAAY;;IAEhBP,CAAC,CAACQ,YAAY,EAAIR,CAAC,CAACS,YAAY;;;;EAI/C,CAAC;;EAEDC,aAAa,WAAAA,cAACV,CAAQ,EAAE;IACtB,WAAOC,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;IACMH,CAAC,CAACW,aAAa;;EAEjC;AACF,CAAC,CAAC","ignoreList":[]}

package/cjs/components/Hint/__creevey__/Hint.creevey.mts

@@ -0,0 +1,68 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Hint', () => {
+  story('SetManualAndOpenedPropOnClick', () => {
+    test('click on hint', async (context) => {
+      await context.webdriver
+        .actions()
+        .click(context.webdriver.findElement({ css: '#main' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'click on hint');
+    });
+  });
+
+  story('WithSVGIcon', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'internal logic being tested and not something UI related': {
+          in: [
+            'chromeDark',
+            'chrome8px',
+            'firefox8px',
+            'firefox',
+            'firefoxFlat8px',
+            'firefoxDark',
+            'ie118px',
+            'ie11',
+            'ie11Dark',
+          ],
+        },
+      },
+    });
+
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions()
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid="icon"]' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open');
+    });
+  });
+  story('top bottom center', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('HintNearScreenEdge', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: 'body',
+      skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+  });
+
+  story('HintWithoutPortal', () => {
+    test('opened', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open');
+    });
+  });
+});

package/cjs/components/Hint/__docs__/Hint.mdx

@@ -0,0 +1,29 @@
+import * as HintStories from './Hint.docs.stories.tsx';
+
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={HintStories} />
+
+# Hint
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/popup-elements/hint/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A5154)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Input/Input.d.ts

@@ -5,6 +5,7 @@ import { SizeProp } from '../../lib/types/props';
 import { InputElementProps } from './Input.typings';
 export declare const inputTypes: readonly ["password", "text", "number", "tel", "search", "time", "date", "url", "email"];
 export type InputAlign = 'left' | 'center' | 'right';
+export type ShowClearIcon = 'auto' | 'always' | 'never';
 export type InputType = (typeof inputTypes)[number];
 export type InputIconType = React.ReactNode | (() => React.ReactNode);
 export declare const selectionAllowedTypes: InputType[];
@@ -12,126 +13,119 @@ export declare const selectionErrorMessage: (type: InputType, allowedTypes?: Inp
 export declare const maskForbiddenTypes: InputType[];
 export declare const maskAllowedTypes: InputType[];
 export declare const maskErrorMessage: (type: InputType, allowedTypes?: InputType[]) => string;
+export declare const calculateClearCrossShowedState: ({ showClearIcon, notEmptyValue, focused, hovered, }: {
+    showClearIcon: ShowClearIcon;
+    notEmptyValue: boolean;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+}) => boolean;
 export interface InputProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label'>, Override<React.InputHTMLAttributes<HTMLInputElement>, {
-    /**
-     * Иконка слева
-     * Если `ReactNode` применяются дефолтные стили для иконки
-     * Если `() => ReactNode` применяются только стили для позиционирование
-     */
+    /** Показывать иконку очистки значения в непустом поле:
+     * - `always` — всегда показывать иконку
+     * - `auto` — показывать иконку при hover/focus
+     * - `never` — не показывать иконку
+     * При одновременной настройке `showClearIcon` и `rightIcon` показывается иконка очистки.
+     * @default never */
+    showClearIcon?: ShowClearIcon;
+    /** Задает иконку слева.
+     * При использовании `ReactNode` применяются дефолтные стили для иконки.
+     * При использовании `() => ReactNode` применяются только стили для позиционирования. */
     leftIcon?: InputIconType;
-    /**
-     * Иконка справа
-     * Если `ReactNode` применяются дефолтные стили для иконки
-     * Если `() => ReactNode` применяются только стили для позиционирование
-     */
+    /** Добавляет иконку справа.
+     * При использовании `ReactNode` применяются дефолтные стили для иконки.
+     * При использовании `() => ReactNode` применяются только стили для позиционирования. */
     rightIcon?: InputIconType;
-    /**
-     * Состояние валидации при ошибке.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
-    /** Режим прозрачной рамки */
+    /** Убирает обводку. */
     borderless?: boolean;
-    /** Выравнивание текста */
+    /** Задает выравнивание контента. */
     align?: InputAlign;
-    /**
-     * Паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url`
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
-     */
+    /** Задает паттерн маски. Доступен для типов `text`, `password`, `email`, `tel`, `search`, `url`
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
     mask?: Nullable<string>;
-    /**
-     * Символ маски
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
-     */
+    /** Устанавливает символ маски.
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
     maskChar?: Nullable<string>;
-    /**
-     * Словарь символов-регулярок для задания маски
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
-     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
-     */
+    /** Задает словарь символов-регулярок для задания маски
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput.
+     * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }. */
     formatChars?: Record<string, string>;
-    /**
-     * Показывать символы маски
-     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput
-     */
+    /** Включает показ символов маски.
+     * @deprecated Со следующей мажорной версии Input перестанет поддерживать маску. Используйте MaskedInput. */
     alwaysShowMask?: boolean;
-    /** Размер */
+    /** Задает размер. */
     size?: SizeProp;
-    /** onValueChange */
+    /** Задает функцию, которая вызывается при изменении значения в инпуте. */
     onValueChange?: (value: string) => void;
-    /** Вызывается на label */
+    /** @ignore */
     onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается на label */
+    /** @ignore */
     onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;
-    /** Вызывается на label */
+    /** @ignore */
     onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
-    /**
-     * Тип. Возможные значения: 'password' | 'text' | 'number' | 'tel' | 'search' | 'time' | 'date' | 'url' | 'email'
-     * */
+    /** Задает тип инпута. */
     type?: InputType;
-    /** Значение */
+    /** Задает значение. */
     value?: string;
     capture?: boolean;
-    /**
-     * Префикс
-     * `ReactNode` перед значением, но после иконки
-     */
+    /** Устанавливает префикс `ReactNode` перед значением, но после иконки. */
     prefix?: React.ReactNode;
-    /**
-     * Суффикс
-     * `ReactNode` после значения, но перед правой иконкой
-     */
+    /** Устанавливает суффикс `ReactNode` после значения, но перед правой иконкой. */
     suffix?: React.ReactNode;
-    /** Выделять введенное значение при фокусе. Работает с типами `text`, `password`, `tel`, `search`, `url`. [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) */
+    /** Определяет, нужно ли выделять введенное значение при фокусе. Работает с типами `text`, `password`, `tel`, `search`, `url`. [Документация](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange) */
     selectAllOnFocus?: boolean;
-    /**
-     * Обработчик неправильного ввода.
-     * По-умолчанию, инпут вспыхивает акцентным цветом.
-     * Если передан - вызывается переданный обработчик,
-     * в таком случае вспыхивание можно вызвать
-     * публичным методом инстанса `blink()`.
-     *
-     * @param value значение инпута.
-     */
+    /** Задает функцию для обработки ввода.
+     * При неправильном вводе инпут по-умолчанию вспыхивает акцентным цветом.
+     * Если `onUnexpectedInput` передан - вызывается переданный обработчик b вспыхивание можно вызвать публичным методом инстанса `blink()`.
+     * @param {string} value - значение инпута. */
     onUnexpectedInput?: (value: string) => void;
-    /** @ignore */
+    /** Устанавливает радиус скруглений углов.
+     * @ignore */
     corners?: Partial<Pick<React.CSSProperties, 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'>>;
-    /**
-     * Элемент заменяет нативный input.
-     * Должен иметь пропы `InputElementProps` и тип `InputElement`
-     * */
+    /** Устанавливает элемент, заменяющий нативный input. Должен иметь пропы `InputElementProps` и тип `InputElement`. */
     element?: ReactElement<InputElementProps>;
 }> {
 }
 export interface InputState {
     blinking: boolean;
     focused: boolean;
+    hovered: boolean;
     needsPolyfillPlaceholder: boolean;
+    clearCrossShowed: boolean;
 }
 export declare const InputDataTids: {
     readonly root: "Input__root";
+    readonly clearCross: "Input__clearCross";
 };
-type DefaultProps = Required<Pick<InputProps, 'size' | 'type'>>;
+type DefaultProps = Required<Pick<InputProps, 'size' | 'type' | 'showClearIcon'>>;
 /**
+ * Поле ввода `Input` дает возможность указать значение с помощью клавиатуры.
+ *
+ * Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.
+ *
+ *  Если вводимое значение имеет определенный формат, используйте специальную версию поля:
+ * * Поле с паролем PasswordInput.
+ * * Поле с валютой CurrencyInput.
+ * * Поле с маской MaskedInput.
+ * * Автополе FxInput.
+ *
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
- *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
  */
 export declare class Input extends React.Component<InputProps, InputState> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
-    state: InputState;
     private selectAllId;
     private theme;
-    private emotion;
-    private styles;
     private blinkTimeout;
     input: HTMLInputElement | null;
     private setRootNode;
+    private getClearCrossShowed;
+    state: InputState;
     private outputMaskError;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<InputProps>): void;
@@ -176,7 +170,10 @@ export declare class Input extends React.Component<InputProps, InputState> {
     private renderMaskedInput;
     private getSizeClassName;
     private refInput;
+    private handleClearInput;
     private handleChange;
+    private handleMouseEnter;
+    private handleMouseLeave;
     private handleFocus;
     private handleKeyDown;
     private handleKeyPress;