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

package/cjs/components/Autocomplete/Autocomplete.md

@@ -1,3 +1,4 @@
+### Базовый пример
 ```jsx harmony
 import { Autocomplete } from '@skbkontur/react-ui';
 
@@ -8,6 +9,7 @@ const [value, setValue] = React.useState('Kappa');
 <Autocomplete source={items} value={value} onValueChange={setValue} />;
 ```
 
+### Очистка Autocomplete
 Очистить значение в `Autocomplete` можно только с помощью пустой строки.
 ```jsx harmony
 import { Autocomplete, Button, Group } from '@skbkontur/react-ui';
@@ -22,7 +24,7 @@ const [value, setValue] = React.useState('Kappa');
 </Group>
 ```
 
-У Autocomplete есть 3 стандартных размера.
+### Размер
 ```jsx harmony
 import { Autocomplete, Gapped } from '@skbkontur/react-ui';
 
@@ -39,7 +41,7 @@ const [valueLarge, setValueLarge] = React.useState('Большой');
 </Gapped>
 ```
 
-Можно выделять введеное значение при фокусе.
+### Выделение введеного значения при фокусе
 ```jsx harmony
 import { Autocomplete } from '@skbkontur/react-ui';
 
@@ -50,7 +52,7 @@ const [value, setValue] = React.useState('');
 <Autocomplete source={items} value={value} onValueChange={setValue} selectAllOnFocus />
 ```
 
-Расположение иконки слева и справа.
+### Иконка
 ```jsx harmony
 import { Autocomplete, Gapped } from '@skbkontur/react-ui';
 import { SearchLoupeIcon16Regular } from '@skbkontur/icons/SearchLoupeIcon16Regular';
@@ -66,7 +68,7 @@ const [valueRight, setValueRight] = React.useState('');
 </Gapped>
 ```
 
-Изменение ширины меню.
+### Ширина меню
 ```jsx harmony
 import { Autocomplete } from '@skbkontur/react-ui';
 
@@ -77,7 +79,7 @@ const [value, setValue] = React.useState('');
 <Autocomplete source={items} value={value} onValueChange={setValue} menuWidth={'80%'} />
 ```
 
-Расположение выпадающего окна Autocomplete.
+### Расположение выпадающего окна Autocomplete
 ```jsx harmony
 import { Autocomplete } from '@skbkontur/react-ui';
 
@@ -88,7 +90,7 @@ const [value, setValue] = React.useState('');
 <Autocomplete source={items} value={value} onValueChange={setValue} menuPos={'top'} />
 ```
 
-Отрисовка тени у выпадающего меню.
+### Тень у выпадающего меню
 ```jsx harmony
 import { Autocomplete } from '@skbkontur/react-ui';
 
@@ -99,7 +101,7 @@ const [value, setValue] = React.useState('');
 <Autocomplete source={items} value={value} onValueChange={setValue} hasShadow />
 ```
 
-Использование режима прозрачной рамки.
+### Режима прозрачной рамки
 ```jsx harmony
 import { Autocomplete } from '@skbkontur/react-ui';
 

package/cjs/components/Autocomplete/Autocomplete.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: {
     root(t: Theme): string;
     noPortal(): string;
 };

package/cjs/components/Autocomplete/Autocomplete.styles.js

@@ -1,20 +1,16 @@
-"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 _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
+var styles = exports.styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      width: ", ";\n    "])),
 
-var getStyles = exports.getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root(t) {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-block;\n        width: ", ";\n      "])),
+    t.inputWidth);
 
-        t.inputWidth);
+  },
+  noPortal: function noPortal() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
 
-      },
 
-      noPortal: function noPortal() {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
-
-
-      }
-    }));};
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","getStyles","exports","emotion","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","inputWidth","noPortal"],"sources":["Autocomplete.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        display: inline-block;\n        width: ${t.inputWidth};\n      `;\n    },\n\n    noPortal() {\n      return emotion.css`\n      position: relative;\n    `;\n    },\n  });\n"],"mappings":";;AAEA,IAAAA,QAAA,GAAAC,OAAA,8BAAyD,IAAAC,eAAA,EAAAC,gBAAA;;;AAGlD,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAIE,OAAgB;IACxC,IAAAC,qBAAY,EAAC;MACXC,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOH,OAAO,CAACI,GAAG,CAAAR,eAAA,KAAAA,eAAA,OAAAS,4BAAA,CAAAC,OAAA;;QAEPH,CAAC,CAACI,UAAU;;MAEzB,CAAC;;MAEDC,QAAQ,WAAAA,SAAA,EAAG;QACT,OAAOR,OAAO,CAACI,GAAG,CAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;;MAGpB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","styles","exports","memoizeStyle","root","t","css","_taggedTemplateLiteralLoose2","default","inputWidth","noPortal"],"sources":["Autocomplete.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      width: ${t.inputWidth};\n    `;\n  },\n  noPortal() {\n    return css`\n      position: relative;\n    `;\n  },\n});\n"],"mappings":"oRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA;;;AAGvD,IAAMC,MAAM,GAAAC,OAAA,CAAAD,MAAA,GAAG,IAAAE,qBAAY,EAAC;EACjCC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAP,eAAA,KAAAA,eAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAECH,CAAC,CAACI,UAAU;;EAEzB,CAAC;EACDC,QAAQ,WAAAA,SAAA,EAAG;IACT,WAAOJ,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,239 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const commonTests = () => {
+  test('focus and type text', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElement = context.webdriver.findElement({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const mobileHintsTests = () => {
+  test('noInputValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'noInputValue');
+  });
+
+  test('nothingWasFound', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('abc')
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'nothingWasFound');
+  });
+
+  test('updateValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('one')
+      .perform();
+    await delay(200);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'updateValue');
+  });
+};
+
+const sizeTests = () => {
+  test('focus and type text small', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text medium', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text large', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[2]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const menuPosTests = () => {
+  test('focus and type text menu top', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+  test('focus and type text menu bottom', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+kind('Autocomplete', () => {
+  story('Simple', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focused', async (context) => {
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).perform();
+      await delay(1000);
+      await context.matchImage(await autocompleteElement.takeScreenshot());
+    });
+
+    commonTests();
+  });
+
+  story('WithRenderItem', () => {
+    commonTests();
+  });
+
+  story('WithBigRenderItemWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedMenuSize', () => {
+    commonTests();
+  });
+
+  story('WithPercentageWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedWidth', () => {
+    commonTests();
+  });
+
+  story('WithZeroWidth', () => {
+    commonTests();
+  });
+
+  story('MobileHints', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileHintsEN', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileWithTitle', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
+        flaky: {
+          in: ['firefox2022'],
+          tests: ['opened top with portal', 'opened bottom with portal'],
+        },
+      },
+    });
+
+    test('opened top with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+
+    test('opened bottom with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .click(autocompleteElement)
+        .sendKeys('o')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+  });
+
+  story('Size', () => {
+    sizeTests();
+  });
+
+  story('WithDisabledPortal', () => {
+    commonTests();
+    menuPosTests();
+  });
+
+  story('MenuPos', () => {
+    menuPosTests();
+  });
+});

package/cjs/components/Autocomplete/__docs__/Autocomplete.mdx

@@ -0,0 +1,26 @@
+import * as AutocompleteStories from './Autocomplete.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Autocomplete } from '../Autocomplete';
+import { Button, Group, Gapped } from '@skbkontur/react-ui';
+
+<Meta of={AutocompleteStories} />
+
+# Autocomplete
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Button/Button.d.ts

@@ -11,96 +11,54 @@ export interface ButtonInnerProps extends CommonProps {
     _noPadding?: boolean;
     /** @ignore */
     _noRightPadding?: boolean;
-    /**
-     * Применяет к кнопке стили псевдокласса `:active`.
-     */
+    /** Применяет к кнопке стили псевдокласса `:active`. */
     active?: boolean;
-    /**
-     * CSS-свойство `text-align`.
-     */
+    /** Задаёт выравнивание тексту в кнопке. */
     align?: React.CSSProperties['textAlign'];
-    /**
-     * Превращает обычную кнопку в кнопку со стрелкой.
-     */
+    /** Превращает обычную кнопку в кнопку со стрелкой. */
     arrow?: boolean | 'left';
-    /**
-     * Даёт кнопке фокус после окончания загрузки страницы.
-     */
+    /** Устанавливает фокус на контроле после окончания загрузки страницы.*/
     autoFocus?: boolean;
-    /**
-     * Убирает обводку у кнопки.
-     */
+    /** Убирает обводку у кнопки. */
     borderless?: boolean;
-    /**
-     * @ignore
-     */
+    /** @ignore */
     checked?: boolean;
+    /** @ignore */
     children?: React.ReactNode;
     /** @ignore */
     corners?: React.CSSProperties;
-    /**
-     * Отключенное состояние кнопки.
-     */
+    /** Делает компонент недоступным. */
     disabled?: boolean;
     /** @ignore */
     disableFocus?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Иконка слева от текста кнопки.
-     */
+    /** Добавляет иконку слева от текста кнопки. */
     icon?: React.ReactElement;
-    /**
-     * Иконка справа от текста кнопки.
-     */
+    /** Добавляет иконку справа от текста кнопки. */
     rightIcon?: React.ReactElement;
-    /**
-     * Переводит кнопку в состояние загрузки.
-     */
+    /** Переводит кнопку в состояние загрузки. */
     loading?: boolean;
-    /**
-     * Сужает кнопку.
-     */
+    /** Сужает кнопку. */
     narrow?: boolean;
-    /**
-     * Задаёт размер кнопки.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
+    /** Задаёт размер кнопки. */
     size?: SizeProp;
-    /**
-     * HTML-атрибут `type`.
-     */
+    /** Задаёт HTML-атрибут `type`. */
     type?: ButtonType;
-    /**
-     * HTML-атрибут `title`.
-     */
+    /** Задаёт HTML-атрибут `title`. */
     title?: string;
-    /**
-     * Стиль кнопки.
-     *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
-     *
+    /** Задаёт стиль кнопки.
      * **Вариант `link` устарел.**
      * Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`.
      */
     use?: ButtonUse;
     /** @ignore */
     visuallyFocused?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
-    /**
-     * CSS-свойство `width`.
-     */
+    /** Задаёт ширину кнопки. */
     width?: number | string;
-    /**
-     * Обычный объект с переменными темы.
-     * Он будет объединён с темой из контекста.
-     */
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
     theme?: ThemeIn;
 }
 export declare const BUTTON_DEFAULT_COMPONENT = "button";
@@ -124,8 +82,6 @@ export declare class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DE
         focusedByTab: boolean;
     };
     private theme;
-    private emotion;
-    private styles;
     private node;
     private setRootNode;
     componentDidMount(): void;
@@ -150,5 +106,4 @@ export declare class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DE
     private handleBlur;
     private _ref;
 }
-export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps<"button">, string | React.JSXElementConstructor<any>>;
 export {};