@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

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/__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,124 +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 blinkTimeout;
-    private input;
+    input: HTMLInputElement | null;
     private setRootNode;
+    private getClearCrossShowed;
+    state: InputState;
     private outputMaskError;
     componentDidMount(): void;
     componentDidUpdate(prevProps: Readonly<InputProps>): void;
@@ -165,7 +161,8 @@ export declare class Input extends React.Component<InputProps, InputState> {
      * @public
      */
     selectAll: () => void;
-    private delaySelectAll;
+    delaySelectAll: () => number | null;
+    private _selectAll;
     private cancelDelayedSelectAll;
     private cancelBlink;
     private getInput;
@@ -173,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;