@skbkontur/react-ui 5.1.0-next.1 → 5.1.0

package/components/Group/Group/Group.js

@@ -4,11 +4,10 @@ var _class, _Group;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isIE11, isEdge } from "../../../lib/client";
-import { isButton } from "../../Button";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
-import { isInputLike } from "../../../lib/utils";
+import { isButton, isAutocomplete, isCurrencyInput, isDropdown, isDropdownMenu, isFxInput, isInput, isPasswordInput, isSelect } from "../../../lib/utils";
 import { styles } from "../Group.styles";
 var getFirstChild = function getFirstChild(children) {
   if (!Array.isArray(children)) {
@@ -43,14 +42,9 @@ export var getButtonCorners = function getButtonCorners(isFirstChild, isLastChil
     borderRadius: 0
   };
 };
-var passCornersIfButton = function passCornersIfButton(child, firstChild, lastChild) {
+var tryPassCorners = function tryPassCorners(child, firstChild, lastChild) {
   var corners = getButtonCorners(child === firstChild, child === lastChild);
-  if (isButton(child)) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      corners: _extends({}, corners, child.props.corners)
-    });
-  }
-  if (isInputLike(child)) {
+  if (isButton(child) || isInput(child) || isFxInput(child) || isAutocomplete(child) || isPasswordInput(child) || isCurrencyInput(child) || isSelect(child) || isDropdown(child) || isDropdownMenu(child)) {
     return /*#__PURE__*/React.cloneElement(child, {
       corners: _extends({}, corners, child.props.corners)
     });
@@ -94,7 +88,7 @@ export var Group = rootNode(_class = (_Group = /*#__PURE__*/function (_React$Com
           return null;
         }
         var isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));
-        var modifiedChild = passCornersIfButton(child, firstChild, lastChild);
+        var modifiedChild = tryPassCorners(child, firstChild, lastChild);
         var isFirstChild = child === firstChild;
         return /*#__PURE__*/(
           React.createElement("div", {

package/components/Group/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PropTypes","isIE11","isEdge","isButton","CommonWrapper","cx","rootNode","isInputLike","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","passCornersIfButton","child","firstChild","lastChild","corners","cloneElement","_extends","props","GroupDataTids","root","Group","_class","_Group","_React$Component","apply","arguments","_inheritsLoose","_proto","prototype","render","_this","style","width","childrenArray","toArray","createElement","rootNodeRef","setRootNode","className","map","_cx","_cx2","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","number","string"],"sources":["Group.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isButton } from '../Button';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isInputLike } from '../../lib/utils';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  /** Задает длину компонента Group. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst passCornersIfButton = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n  if (isButton(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n  if (isInputLike(child)) {\n    return React.cloneElement(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n *\n *  Длина контейнера настраивается с помощью пропа `width`.\n */\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = passCornersIfButton(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","PropTypes","isIE11","isEdge","CommonWrapper","cx","rootNode","isButton","isAutocomplete","isCurrencyInput","isDropdown","isDropdownMenu","isFxInput","isInput","isPasswordInput","isSelect","styles","getFirstChild","children","Array","isArray","getLastChild","numberOfChildren","Children","count","getButtonCorners","isFirstChild","isLastChild","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","borderRadius","tryPassCorners","child","firstChild","lastChild","corners","cloneElement","_extends","props","GroupDataTids","root","Group","_class","_Group","_React$Component","apply","arguments","_inheritsLoose","_proto","prototype","render","_this","style","width","childrenArray","toArray","createElement","rootNodeRef","setRootNode","className","map","_cx","_cx2","isValidElement","isWidthInPercent","Boolean","toString","includes","modifiedChild","fixed","stretch","stretchFallback","item","itemFirst","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","number","string"],"sources":["Group.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport {\n  isButton,\n  isAutocomplete,\n  isCurrencyInput,\n  isDropdown,\n  isDropdownMenu,\n  isFxInput,\n  isInput,\n  isPasswordInput,\n  isSelect,\n} from '../../lib/utils';\n\nimport { styles } from './Group.styles';\n\nexport interface GroupProps extends CommonProps {\n  /** Задает длину компонента Group. */\n  width?: React.CSSProperties['width'];\n}\n\ninterface GroupChildProps {\n  width?: React.CSSProperties['width'];\n  corners?: number;\n}\n\nconst getFirstChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  return children?.[0] as React.ReactNode;\n};\n\nconst getLastChild = (children: React.ReactNode) => {\n  if (!Array.isArray(children)) {\n    return children;\n  }\n\n  const numberOfChildren = React.Children.count(children);\n\n  return children?.[numberOfChildren - 1] as React.ReactNode;\n};\n\nexport const getButtonCorners = (isFirstChild: boolean, isLastChild: boolean): React.CSSProperties => {\n  if (isFirstChild && isLastChild) {\n    return {};\n  }\n\n  if (isFirstChild) {\n    return {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n    };\n  }\n\n  if (isLastChild) {\n    return {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n    };\n  }\n\n  return {\n    borderRadius: 0,\n  };\n};\n\nconst tryPassCorners = (child: React.ReactNode, firstChild: React.ReactNode, lastChild: React.ReactNode) => {\n  const corners = getButtonCorners(child === firstChild, child === lastChild);\n\n  if (\n    isButton(child) ||\n    isInput(child) ||\n    isFxInput(child) ||\n    isAutocomplete(child) ||\n    isPasswordInput(child) ||\n    isCurrencyInput(child) ||\n    isSelect(child) ||\n    isDropdown(child) ||\n    isDropdownMenu(child)\n  ) {\n    return React.cloneElement<(typeof child)['props']>(child, { corners: { ...corners, ...child.props.corners } });\n  }\n\n  return child;\n};\n\nexport const GroupDataTids = {\n  root: 'Group__root',\n} as const;\n\n/**\n *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.\n *\n *  Длина контейнера настраивается с помощью пропа `width`.\n */\n@rootNode\nexport class Group extends React.Component<GroupProps> {\n  public static __KONTUR_REACT_UI__ = 'Group';\n  public static displayName = 'Group';\n\n  private setRootNode!: TSetRootNode;\n\n  public static propTypes = {\n    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  };\n\n  public render() {\n    const style: React.CSSProperties = {\n      width: this.props.width,\n    };\n\n    const childrenArray = React.Children.toArray(this.props.children);\n    const firstChild = getFirstChild(childrenArray);\n    const lastChild = getLastChild(childrenArray);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span data-tid={GroupDataTids.root} className={styles.root()} style={style}>\n          {React.Children.map(childrenArray, (child) => {\n            if (!child || !React.isValidElement<GroupChildProps>(child)) {\n              return null;\n            }\n\n            const isWidthInPercent = Boolean(child.props.width && child.props.width.toString().includes('%'));\n\n            const modifiedChild = tryPassCorners(child, firstChild, lastChild);\n\n            const isFirstChild = child === firstChild;\n\n            return (\n              <div\n                className={cx({\n                  [styles.fixed()]: !isWidthInPercent,\n                  [styles.stretch()]: isWidthInPercent,\n                  [styles.stretchFallback()]: Boolean(isWidthInPercent && this.props.width && (isIE11 || isEdge)),\n                })}\n              >\n                <div\n                  className={cx({\n                    [styles.item()]: true,\n                    [styles.itemFirst()]: isFirstChild,\n                  })}\n                >\n                  {modifiedChild}\n                </div>\n              </div>\n            );\n          })}\n        </span>\n      </CommonWrapper>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Group/Group.d.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface GroupProps extends CommonProps {
-    /** Задает длину компонента Group. */
-    width?: React.CSSProperties['width'];
-}
-export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
-export declare const GroupDataTids: {
-    readonly root: "Group__root";
-};
-/**
- *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.
- *
- *  Длина контейнера настраивается с помощью пропа `width`.
- */
-export declare class Group extends React.Component<GroupProps> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    private setRootNode;
-    static propTypes: {
-        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-    };
-    render(): React.JSX.Element;
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface GroupProps extends CommonProps {
+    /** Задает длину компонента Group. */
+    width?: React.CSSProperties['width'];
+}
+export declare const getButtonCorners: (isFirstChild: boolean, isLastChild: boolean) => React.CSSProperties;
+export declare const GroupDataTids: {
+    readonly root: "Group__root";
+};
+/**
+ *  Компонент `Group` используется для создания логически сгруппированных элементов, выровненных по горизонтали.
+ *
+ *  Длина контейнера настраивается с помощью пропа `width`.
+ */
+export declare class Group extends React.Component<GroupProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    private setRootNode;
+    static propTypes: {
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    };
+    render(): React.JSX.Element;
+}

package/components/Group/Group.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const styles: {
-    root(): string;
-    fixed(): string;
-    stretch(): string;
-    stretchFallback(): string;
-    item(): string;
-    itemFirst(): string;
-};
+export declare const styles: {
+    root(): string;
+    fixed(): string;
+    stretch(): string;
+    stretchFallback(): string;
+    item(): string;
+    itemFirst(): string;
+};

package/components/Group/__creevey__/Group.creevey.d.mts

@@ -1 +1 @@
-export {};
+export {};

package/components/Group/index.d.ts

@@ -1 +1 @@
-export * from './Group';
+export * from './Group';

package/components/Hint/Hint.d.ts

@@ -1,67 +1,67 @@
-import React from 'react';
-import { PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';
-import { Nullable } from '../../typings/utility-types';
-import { MouseEventType } from '../../typings/event-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
-export interface HintProps extends CommonProps {
-    /** @ignore */
-    children?: React.ReactNode;
-    /** Переводит отображение подсказки в _"ручной режим"_.
-     В _"ручном режиме"_ подсказку можно активировать только задав значение пропу `opened`. */
-    manual?: boolean;
-    /** Задает максимальную ширину подсказки. */
-    maxWidth?: React.CSSProperties['maxWidth'];
-    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
-    onMouseEnter?: (event: MouseEventType) => void;
-    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
-    onMouseLeave?: (event: MouseEventType) => void;
-    /** Открывает подсказку. Работает только при `manual=true`. */
-    opened?: boolean;
-    /** Задает приоритетное расположение подсказки относительно текста. */
-    pos?: ShortPopupPositionsType | PopupPinnablePositionsType;
-    /** Задает текст подсказки. */
-    text: React.ReactNode;
-    /** Задает список позиций, которые будет занимать хинт. Если положение хинта в определенной позиции будет выходить за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`. */
-    allowedPositions?: PopupPinnablePositionsType[];
-    /** Отключает анимацию. */
-    disableAnimations?: boolean;
-    /** Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`.
-     * Используется для корректного позиционирования хинта при двух и более вложенных элементах.
-     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически. */
-    useWrapper?: boolean;
-}
-export interface HintState {
-    opened: boolean;
-    position: PopupPinnablePositionsType;
-}
-type DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
-/**
- * Всплывающая подсказка `Hint`.
- * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.
- *
- * Для подсказки, всплывающей по клику используйте Tooltip.
- */
-export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    static defaultProps: DefaultProps;
-    private getProps;
-    state: HintState;
-    private timer;
-    private theme;
-    private setRootNode;
-    private popupRef;
-    getAllowedPositions(): string[] | undefined;
-    componentDidUpdate(prevProps: HintProps): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    renderMain(): React.JSX.Element;
-    getAnchorElement: () => Nullable<Element>;
-    private renderContent;
-    private getPositions;
-    private handleMouseEnter;
-    private handleMouseLeave;
-    private open;
-}
-export {};
+import React from 'react';
+import { PopupPinnablePositionsType, ShortPopupPositionsType } from '../../internal/Popup';
+import { Nullable } from '../../typings/utility-types';
+import { MouseEventType } from '../../typings/event-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement';
+export interface HintProps extends CommonProps {
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Переводит отображение подсказки в _"ручной режим"_.
+     В _"ручном режиме"_ подсказку можно активировать только задав значение пропу `opened`. */
+    manual?: boolean;
+    /** Задает максимальную ширину подсказки. */
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
+    onMouseEnter?: (event: MouseEventType) => void;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
+    onMouseLeave?: (event: MouseEventType) => void;
+    /** Открывает подсказку. Работает только при `manual=true`. */
+    opened?: boolean;
+    /** Задает приоритетное расположение подсказки относительно текста. */
+    pos?: ShortPopupPositionsType | PopupPinnablePositionsType;
+    /** Задает текст подсказки. */
+    text: React.ReactNode;
+    /** Задает список позиций, которые будет занимать хинт. Если положение хинта в определенной позиции будет выходить за край экрана, то будет выбрана следующая позиция. Обязательно должен включать позицию указанную в `pos`. */
+    allowedPositions?: PopupPinnablePositionsType[];
+    /** Отключает анимацию. */
+    disableAnimations?: boolean;
+    /** Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`.
+     * Используется для корректного позиционирования хинта при двух и более вложенных элементах.
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически. */
+    useWrapper?: boolean;
+}
+export interface HintState {
+    opened: boolean;
+    position: PopupPinnablePositionsType;
+}
+type DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
+/**
+ * Всплывающая подсказка `Hint`.
+ * По умолчанию отображается при наведении на элемент, но можно задать другие условия отображения.
+ *
+ * Для подсказки, всплывающей по клику используйте Tooltip.
+ */
+export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    state: HintState;
+    private timer;
+    private theme;
+    private setRootNode;
+    private popupRef;
+    getAllowedPositions(): string[] | undefined;
+    componentDidUpdate(prevProps: HintProps): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    renderMain(): React.JSX.Element;
+    getAnchorElement: () => Nullable<Element>;
+    private renderContent;
+    private getPositions;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private open;
+}
+export {};

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

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

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

@@ -1 +1 @@
-export {};
+export {};

package/components/Hint/index.d.ts

@@ -1 +1 @@
-export * from './Hint';
+export * from './Hint';

package/components/Input/Input/Input.js

@@ -2,7 +2,7 @@ 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", "mask", "maskChar", "alwaysShowMask", "size", "placeholder", "selectAllOnFocus", "disabled", "onUnexpectedInput", "prefix", "suffix", "formatChars", "corners", "aria-describedby", "aria-controls", "aria-label", "element"];
+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 from 'react';
@@ -15,9 +15,11 @@ import { InternalMaskedInput } from "../../../internal/InternalMaskedInput";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { rootNode } from "../../../lib/rootNode";
+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 { styles } from "../Input.styles";
 import { InputLayout } from "../InputLayout/InputLayout";
 import { PolyfillPlaceholder } from "../InputLayout/PolyfillPlaceholder";
@@ -43,8 +45,25 @@ export var maskErrorMessage = function maskErrorMessage(type, allowedTypes) {
     return "\"" + i + "\"";
   }).join(', ') + ".";
 };
+export var calculateClearCrossShowedState = function calculateClearCrossShowedState(_ref) {
+  var showClearIcon = _ref.showClearIcon,
+    notEmptyValue = _ref.notEmptyValue,
+    focused = _ref.focused,
+    hovered = _ref.hovered;
+  switch (showClearIcon) {
+    case 'always':
+      return notEmptyValue;
+    case 'auto':
+      return Boolean((focused || hovered) && notEmptyValue);
+    case 'never':
+      return false;
+    default:
+      return catchUnreachableWarning(showClearIcon, false);
+  }
+};
 export var InputDataTids = {
-  root: 'Input__root'
+  root: 'Input__root',
+  clearCross: 'Input__clearCross'
 };
 
 /**
@@ -68,13 +87,33 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.getProps = createPropsGetter(Input.defaultProps);
+    _this.selectAllId = null;
+    _this.input = null;
+    _this.getClearCrossShowed = function (_ref2) {
+      var _this$input;
+      var focused = _ref2.focused,
+        hovered = _ref2.hovered,
+        hasInitialValue = _ref2.hasInitialValue;
+      if (_this.props.disabled) {
+        return false;
+      }
+      return calculateClearCrossShowedState({
+        showClearIcon: _this.getProps().showClearIcon,
+        notEmptyValue: Boolean(((_this$input = _this.input) == null ? void 0 : _this$input.value) || hasInitialValue),
+        focused: focused,
+        hovered: hovered
+      });
+    };
     _this.state = {
       needsPolyfillPlaceholder: needsPolyfillPlaceholder,
       blinking: false,
-      focused: false
+      focused: false,
+      hovered: false,
+      clearCrossShowed: _this.getClearCrossShowed({
+        focused: false,
+        hasInitialValue: Boolean(_this.props.value || _this.props.defaultValue)
+      })
     };
-    _this.selectAllId = null;
-    _this.input = null;
 
     /**
      * Работает с типами `text`, `password`, `tel`, `search`, `url`
@@ -155,6 +194,7 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
         ariaControls = props['aria-controls'],
         ariaLabel = props['aria-label'],
         element = props.element,
+        showClearIcon = props.showClearIcon,
         rest = _objectWithoutPropertiesLoose(props, _excluded);
       var _this$state = _this.state,
         blinking = _this$state.blinking,
@@ -165,8 +205,8 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
         style: _extends({
           width: width
         }, corners),
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
+        onMouseEnter: _this.handleMouseEnter,
+        onMouseLeave: _this.handleMouseLeave,
         onMouseOver: onMouseOver
       };
       var inputProps = _extends({}, rest, {
@@ -192,10 +232,18 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
       React.createElement(FocusControlWrapper, {
         onBlurWhenDisabled: _this.resetFocus
       }, _this.getInput(inputProps));
+      var getRightIcon = function getRightIcon() {
+        return _this.state.clearCrossShowed ? /*#__PURE__*/
+        React.createElement(ClearCrossIcon, {
+          "data-tid": InputDataTids.clearCross,
+          size: size,
+          onClick: _this.handleClearInput
+        }) : rightIcon;
+      };
       return /*#__PURE__*/(
         React.createElement(InputLayout, {
           leftIcon: leftIcon,
-          rightIcon: rightIcon,
+          rightIcon: getRightIcon(),
           prefix: prefix,
           suffix: suffix,
           labelProps: labelProps,
@@ -220,6 +268,17 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
         _this.input = element;
       }
     };
+    _this.handleClearInput = function () {
+      if (_this.input) {
+        _this.input.value = '';
+      }
+      _this.setState({
+        clearCrossShowed: false
+      });
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange('');
+      }
+    };
     _this.handleChange = function (event) {
       if (needsPolyfillPlaceholder) {
         var fieldIsEmpty = event.target.value === '';
@@ -235,10 +294,44 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
       if (_this.props.onChange) {
         _this.props.onChange(event);
       }
+      _this.setState({
+        clearCrossShowed: _this.getClearCrossShowed({
+          focused: _this.state.focused,
+          hovered: _this.state.hovered
+        })
+      });
+    };
+    _this.handleMouseEnter = function (e) {
+      _this.setState({
+        hovered: true,
+        clearCrossShowed: _this.getClearCrossShowed({
+          focused: _this.state.focused,
+          hovered: true
+        })
+      });
+      if (_this.props.onMouseEnter) {
+        _this.props.onMouseEnter(e);
+      }
+    };
+    _this.handleMouseLeave = function (e) {
+      _this.setState({
+        hovered: false,
+        clearCrossShowed: _this.getClearCrossShowed({
+          focused: _this.state.focused,
+          hovered: false
+        })
+      });
+      if (_this.props.onMouseLeave) {
+        _this.props.onMouseLeave(e);
+      }
     };
     _this.handleFocus = function (event) {
       _this.setState({
-        focused: true
+        focused: true,
+        clearCrossShowed: _this.getClearCrossShowed({
+          focused: true,
+          hovered: _this.state.hovered
+        })
       });
       if (_this.props.selectAllOnFocus) {
         _this.input && !isIE11 ? _this.selectAll() : _this.delaySelectAll();
@@ -285,8 +378,23 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
       });
     };
     _this.handleBlur = function (event) {
-      _this.resetFocus();
-      _this.props.onBlur == null || _this.props.onBlur(event);
+      var _getRootNode;
+      var showClearIcon = _this.props.showClearIcon;
+      if (showClearIcon && (_getRootNode = getRootNode(_this)) != null && _getRootNode.contains(event.relatedTarget)) {
+        _this.setState({
+          focused: false
+        });
+      } else {
+        var clearCrossShowed = _this.getClearCrossShowed({
+          focused: false,
+          hovered: _this.state.hovered
+        });
+        _this.setState({
+          focused: false,
+          clearCrossShowed: clearCrossShowed
+        });
+        _this.props.onBlur == null || _this.props.onBlur(event);
+      }
     };
     return _this;
   }
@@ -370,8 +478,8 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
         (_this3$input = _this3.input) == null || _this3$input.setSelectionRange(start, end);
       }, 150);
     } else {
-      var _this$input;
-      (_this$input = this.input) == null || _this$input.setSelectionRange(start, end);
+      var _this$input2;
+      (_this$input2 = this.input) == null || _this$input2.setSelectionRange(start, end);
     }
   };
   _proto.render = function render() {
@@ -423,5 +531,6 @@ export var Input = rootNode(_class = (_Input = /*#__PURE__*/function (_React$Com
   }]);
 }(React.Component), _Input.__KONTUR_REACT_UI__ = 'Input', _Input.displayName = 'Input', _Input.defaultProps = {
   size: 'small',
-  type: 'text'
+  type: 'text',
+  showClearIcon: 'never'
 }, _Input)) || _class;