@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

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

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","ThemeContext","ThemeFactory","DUMMY_LOCATION","Popup","isTestEnv","CommonWrapper","rootNode","createPropsGetter","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","createElement","Consumer","_ref","emotion","cx","styles","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","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 { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\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';\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@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 cx!: Emotion['cx'];\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      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      <RenderEnvironmentContext.Consumer>\n        {({ emotion }) => {\n          this.cx = emotion.cx;\n          this.styles = getStyles(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      </RenderEnvironmentContext.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 = 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,8 +53,6 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
     private theme;
     getRootNode: TGetRootNode;
     private setRootNode;
-    private styles;
-    private cx;
     private popupRef;
     getAllowedPositions(): string[] | undefined;
     componentDidUpdate(prevProps: HintProps): void;

package/components/Hint/Hint.md

@@ -0,0 +1,86 @@
+### Базовый пример
+
+```jsx harmony
+<Hint text="Подсказка">Базовая</Hint>
+```
+
+### Иконка
+
+```jsx harmony
+<Hint text="Редактирование">
+  <svg width="16" height="16" viewBox="0 0 16 16">
+    <path
+      fillRule="evenodd"
+      d="M13 12V12.998H8V12H13ZM3 13V11L9 4.99999L11 6.99999L5 13H3ZM13 5L11.5 6.5L9.5 4.5L11 3L13 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+</Hint>
+```
+
+### Сторона всплытия
+
+```jsx harmony
+<Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
+```
+
+### Ограниченная ширина
+```jsx harmony
+<Hint
+  maxWidth="150px"
+  text="Очень много текста, рассказывающего про этот очень непонятный элемент"
+  >
+  Очень непонятный элемент
+</Hint>
+```
+
+### Открытие подсказки кнопкой
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const [isOpen, setIsOpen] = React.useState(false);
+
+<Gapped>
+  <Hint opened={isOpen} manual text="Подсказка">Управляемая удалённо</Hint>
+  <Button onClick={() => setIsOpen(!isOpen)}>
+    {isOpen ? "Закрыть подсказку" : "Открыть подсказку"}
+  </Button>
+</Gapped>
+```
+
+### Всплытие без анимации
+
+```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

@@ -1,13 +1,11 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    content: function content(t) {
-      return emotion.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 emotion.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":["memoizeStyle","getStyles","emotion","content","t","css","_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 { 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,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,OAAO,WAAAA,QAACC,CAAQ,EAAE;QAChB,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;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,OAAOF,OAAO,CAACG,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;QACFH,CAAC,CAACY,aAAa;;MAEjC;IACF,CAAC,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,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     content(t: Theme): string;
     contentCenter(t: Theme): string;
 };

package/components/Input/Input/Input.js

@@ -7,19 +7,20 @@ var _class, _Input; // TODO: Enable this rule in functional components.
 import invariant from 'invariant';
 import React from 'react';
 import warning from 'warning';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
+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";
 import { ClearCrossIcon } from "../../../internal/ClearCrossIcon/ClearCrossIcon";
 import { catchUnreachableWarning } from "../../../lib/typeGuards";
-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'];
@@ -123,8 +124,8 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
       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) {
@@ -133,13 +134,13 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
     };
     _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;
       }
     };
     _this.cancelBlink = function (callback) {
       if (_this.blinkTimeout) {
-        clearTimeout(_this.blinkTimeout);
+        globalObject.clearTimeout(_this.blinkTimeout);
         _this.blinkTimeout = 0;
         if (_this.state.blinking) {
           _this.setState({
@@ -160,7 +161,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
       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,
@@ -199,7 +200,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
         blinking = _this$state.blinking,
         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.blink(_this.theme)] = blinking, _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[_this.styles.focusFallback(_this.theme)] = focused && (isIE11 || isEdge), _this$cx[_this.styles.warningFallback(_this.theme)] = warning && (isIE11 || isEdge), _this$cx[_this.styles.errorFallback(_this.theme)] = error && (isIE11 || isEdge), _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.blink(_this.theme)] = blinking, _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
@@ -209,7 +210,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
         onMouseOver: onMouseOver
       };
       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,
@@ -412,7 +413,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (this.blinkTimeout) {
-      clearTimeout(this.blinkTimeout);
+      globalObject.clearTimeout(this.blinkTimeout);
     }
     this.cancelDelayedSelectAll();
   } /**
@@ -449,7 +450,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
     this.setState({
       blinking: true
     }, function () {
-      _this2.blinkTimeout = setTimeout(_this2.cancelBlink, 150);
+      _this2.blinkTimeout = globalObject.setTimeout(_this2.cancelBlink, 150);
     });
   } /**
     * @public
@@ -457,7 +458,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
     * @param {number} end
     */;
   _proto.setSelectionRange = function setSelectionRange(start, end) {
-    var _this$globalObject$do,
+    var _globalObject$documen,
       _this$props$value,
       _this3 = this; // https://github.com/facebook/react/issues/7769
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
@@ -468,11 +469,11 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
     if (!this.input) {
       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();
     }
     if (this.props.mask && this.props.value && ((_this$props$value = this.props.value) == null ? void 0 : _this$props$value.length) < this.props.mask.length) {
-      setTimeout(function () {
+      globalObject.setTimeout(function () {
         var _this3$input;
         (_this3$input = _this3.input) == null || _this3$input.setSelectionRange(start, end);
       }, 150);
@@ -483,18 +484,11 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
   };
   _proto.render = function render() {
     var _this4 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref3) {
-      var globalObject = _ref3.globalObject,
-        emotion = _ref3.emotion;
-      _this4.globalObject = globalObject;
-      _this4.cx = emotion.cx;
-      _this4.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this4.theme = theme;
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this4.setRootNode
-        }, _this4.getProps()), _this4.renderMain);
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this4.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this4.setRootNode
+      }, _this4.getProps()), _this4.renderMain);
     });
   };
   _proto.renderMaskedInput = function renderMaskedInput(inputProps, mask) {
@@ -509,15 +503,15 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
     }));
   };
   _proto.getSizeClassName = function getSizeClassName() {
-    var _this$cx3, _this$cx4, _this$cx5;
+    var _cx3, _cx4, _cx5;
     switch (this.getProps().size) {
       case 'large':
-        return this.cx((_this$cx3 = {}, _this$cx3[this.styles.sizeLarge(this.theme)] = true, _this$cx3[this.styles.sizeLargeFallback(this.theme)] = isIE11 || isEdge, _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[this.styles.sizeMediumFallback(this.theme)] = isIE11 || isEdge, _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[this.styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _this$cx5));
+        return cx((_cx5 = {}, _cx5[styles.sizeSmall(this.theme)] = true, _cx5[styles.sizeSmallFallback(this.theme)] = isIE11 || isEdge, _cx5));
     }
   };
   return _createClass(Input, [{