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

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

@@ -0,0 +1,263 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const outOfViewTests = (side: 'left' | 'right') => {
+  test('out of viewport', async (context) => {
+    if (side === 'left') {
+      await context.webdriver.executeScript(function () {
+        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
+        container.scrollLeft = container.scrollWidth;
+      });
+    }
+
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid="firstMenu"]' }))
+      .perform();
+    await delay(1000);
+
+    await context.matchImage(await context.takeScreenshot(), 'out of viewport');
+  });
+
+  test('out of edge with min menu width', async (context) => {
+    if (side === 'left') {
+      await context.webdriver.executeScript(function () {
+        const container = window.document.querySelector('[data-tid="container"]') as HTMLElement;
+        container.scrollLeft = container.scrollWidth;
+      });
+    }
+
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid="secondMenu"]' }))
+      .perform();
+    await delay(1000);
+
+    await context.matchImage(await context.takeScreenshot(), 'out of viewport with min menu width');
+  });
+};
+
+const textAlignmentTests = () => {
+  test('opened', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'opened');
+  });
+};
+
+const navigateInNestedMenuItems = () => {
+  test('navigate', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+      .sendKeys(Key.DOWN)
+      .sendKeys(Key.DOWN)
+      .perform();
+    const arrowDown = await context.webdriver.takeScreenshot();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ENTER)
+      .perform();
+    await delay(1000);
+    const enter = await context.webdriver.takeScreenshot();
+    await context.matchImages({ arrowDown, enter });
+  });
+};
+
+kind('DropdownMenu', () => {
+  story('SimpleExample', () => {
+    test('plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('clickAfterClickedOnCaption', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clickAfterClickedOnCaption');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('enterPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'enterPress');
+    });
+
+    test('escapePress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.ESCAPE)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'escapePress');
+    });
+  });
+
+  story('CaptionWidth', () => {
+    test('plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+  });
+
+  story('WithHeaderAndFooter', () => {
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'clicked');
+    });
+
+    test('scrolled by 100', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
+        scrollContainer.scrollTop += 100;
+      });
+      await delay(2000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled by 100');
+    });
+
+    test('scrolled down to bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="PopupMenu__caption"]' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]') as HTMLElement;
+        scrollContainer.scrollTop += scrollContainer.scrollHeight;
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'scrolled down to bottom');
+    });
+  });
+
+  story('MobileExampleWithHorizontalPadding', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: null });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DropdownMenu"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver
+        .actions({ bridge: true })
+        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+  story('MenuOutOfViewPortRight', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { flacky: { in: ['firefox2022', 'firefox2022Dark'] } },
+    });
+    outOfViewTests('right');
+  });
+  story('MenuOutOfViewPortLeft', () => {
+    outOfViewTests('left');
+  });
+
+  story('WithItemsAndIcons', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithNestedMenuItems', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    navigateInNestedMenuItems();
+  });
+});

package/cjs/components/DropdownMenu/__docs__/DropdownMenu.mdx

@@ -0,0 +1,28 @@
+import * as DropdownMenuStories from './DropdownMenu.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={DropdownMenuStories} />
+
+# DropdownMenu
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/actions/menu-button/)
+
+[Компонент в Figma](https://www.figma.com/design/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI?node-id=200-2498&t=I8Bp7OCi6jgkyIbR-0)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/FileUploader/FileUploader.d.ts

@@ -7,38 +7,29 @@ import { Nullable } from '../../typings/utility-types';
 import { SizeProp } from '../../lib/types/props';
 type FileUploaderOverriddenProps = 'size';
 interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {
+    /** Переводит контрол в состояние валидации "ошибка". */
     /** Начальное состояние загруженных файлов */
     initialFiles?: File[];
     /** Состояние ошибки всего контрола */
     error?: boolean;
-    /** Состояние предупреждения всего контрола */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
-    /** Свойство ширины. */
+    /** Задает длину компонента. */
     width?: React.CSSProperties['width'];
-    /**
-     * Задаёт размер контрола.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
+    /** Задаёт размер контрола. */
     size?: SizeProp;
-    /** Свойство, скрывающее отображение файлов.  */
+    /** Скрывает отображение файлов. */
     hideFiles?: boolean;
-    /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
+    /** Задает функцию, через которую отправляются файлы. Используется для отслеживания статуса загрузки файла.
+     * @param {FileUploaderAttachedFile} file - файл, статус загрузки которого необходимо отследить. */
     request?: (file: FileUploaderAttachedFile) => Promise<void>;
-    /** Срабатывает при удачной попытке отправки через request */
+    /** Задает функцию, которая вызывается при удачной попытке отправки через request. */
     onRequestSuccess?: (fileId: string) => void;
-    /** Срабатывает при неудачной попытке отправки через request */
+    /** Задает функцию, которая вызывается при неудачной попытке отправки через request. */
     onRequestError?: (fileId: string) => void;
-    /**
-     * Функция валидации каждого файла.
-     * Срабатывает после выбора файлов и перед попыткой отправить в request.
-     * Чтобы вывести валидацию ошибки, промис должен вернуть строку.
-     * */
+    /** Определяет функцию валидации каждого файла. Срабатывает после выбора файлов и перед попыткой отправить в request. Чтобы вывести валидацию ошибки, промис должен вернуть строку. * */
     validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;
-    /**
-     * Функция, позволяющая кастомизировать файлы.
-     * Через нее можно вешать кастомные валидации на каждый файл.
-     * */
+    /** Задает функцию, которая позволяет кастомизировать файлы. Через нее можно вешать кастомные валидации на каждый файл. */
     renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
 }
 export interface FileUploaderRef extends InstanceWithRootNode {
@@ -46,6 +37,7 @@ export interface FileUploaderRef extends InstanceWithRootNode {
     blur: () => void;
     /** Сбрасывает выбранные файлы */
     reset: () => void;
+    removeFile: (fileId: string) => void;
 }
 export declare const FileUploaderDataTids: {
     readonly root: "FileUploader__root";
@@ -55,5 +47,10 @@ export declare const FileUploaderDataTids: {
 };
 export interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {
 }
+/**
+ * `FileUploader` — контрол для выбора пользователем файла на компьютере и отображения статуса его отправки на сервер.
+ *
+ * Можно использовать для синхронной отправки данных, например, в форме. Или же можно использовать в асинхронном режиме.
+ */
 export declare const FileUploader: React.MemoExoticComponent<React.ForwardRefExoticComponent<FileUploaderProps & FileUploaderControlProviderProps & React.RefAttributes<FileUploaderRef>>>;
 export {};

package/cjs/components/FileUploader/FileUploader.js

@@ -9,6 +9,7 @@ var _FileUploaderControlContext = require("../../internal/FileUploaderControl/Fi
 var _useControlLocale = require("../../internal/FileUploaderControl/hooks/useControlLocale");
 var _useUpload = require("../../internal/FileUploaderControl/hooks/useUpload");
 var _useDrop3 = require("../../hooks/useDrop");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _withFileUploaderControlProvider = require("../../internal/FileUploaderControl/withFileUploaderControlProvider");
 var _keyListener = require("../../lib/events/keyListener");
@@ -21,7 +22,6 @@ var _useFileUploaderSize = require("../../internal/FileUploaderControl/hooks/use
 
 var _forwardRefAndName = require("../../lib/forwardRefAndName");
 var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _UploadIcon = require("./UploadIcon");
 var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["initialFiles", "disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];
@@ -73,8 +73,6 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
 
 
 
-
-
 
 
 
@@ -87,9 +85,8 @@ var FileUploaderDataTids = exports.FileUploaderDataTids = {
 
 var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
 
-var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', function (props, ref) {var _emotion$cx;
+var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', function (props, ref) {var _cx;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
-  var emotion = (0, _react.useContext)(_Emotion.EmotionContext);
 
   var
     initialFiles =
@@ -139,23 +136,23 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     },
     [validateBeforeUpload, isAsync, upload, setFileValidationResult]
   );
-  var styles = (0, _FileUploader2.getStyles)(emotion);
+
   var sizeClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: styles.sizeSmall(theme),
-    medium: styles.sizeMedium(theme),
-    large: styles.sizeLarge(theme)
+    small: _FileUploader2.jsStyles.sizeSmall(theme),
+    medium: _FileUploader2.jsStyles.sizeMedium(theme),
+    large: _FileUploader2.jsStyles.sizeLarge(theme)
   });
 
   var sizeIconClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: styles.iconSmall(theme),
-    medium: styles.iconMedium(theme),
-    large: styles.iconLarge(theme)
+    small: _FileUploader2.jsStyles.iconSmall(theme),
+    medium: _FileUploader2.jsStyles.iconMedium(theme),
+    large: _FileUploader2.jsStyles.iconLarge(theme)
   });
 
   var contentInnerClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
-    small: styles.contentInnerSmall(theme),
-    medium: styles.contentInnerMedium(theme),
-    large: styles.contentInnerLarge(theme)
+    small: _FileUploader2.jsStyles.contentInnerSmall(theme),
+    medium: _FileUploader2.jsStyles.contentInnerMedium(theme),
+    large: _FileUploader2.jsStyles.contentInnerLarge(theme)
   });
 
   /** common part **/
@@ -218,11 +215,12 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.blur();
   }, []);
 
-  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset, getRootNode: function getRootNode() {return rootNodeRef.current;} };}, [
+  (0, _react.useImperativeHandle)(ref, function () {return { focus: focus, blur: blur, reset: reset, removeFile: removeFile, getRootNode: function getRootNode() {return rootNodeRef.current;} };}, [
   ref,
   blur,
   focus,
-  reset]
+  reset,
+  removeFile]
   );
 
   var _useState2 = (0, _react.useState)(false),focusedByTab = _useState2[0],setFocusedByTab = _useState2[1];
@@ -263,35 +261,31 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
   var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
 
-  var uploadButtonClassNames = emotion.cx(
-    styles.uploadButton(theme),
+  var uploadButtonClassNames = (0, _Emotion.cx)(
+    _FileUploader2.jsStyles.uploadButton(theme),
     sizeClassName,
-    focusedByTab && styles.uploadButtonFocus(theme),
-    disabled && styles.disabled(theme),
-    !disabled && hovered && styles.hovered(theme),
-    !!warning && styles.warning(theme),
-    !!error && styles.error(theme),
-    isDraggable && !disabled && styles.dragOver(theme)
+    focusedByTab && _FileUploader2.jsStyles.uploadButtonFocus(theme),
+    disabled && _FileUploader2.jsStyles.disabled(theme),
+    !disabled && hovered && _FileUploader2.jsStyles.hovered(theme),
+    !!warning && _FileUploader2.jsStyles.warning(theme),
+    !!error && _FileUploader2.jsStyles.error(theme),
+    isDraggable && !disabled && _FileUploader2.jsStyles.dragOver(theme)
   );
 
   var canDrop = isWindowDraggable && !disabled;
-  var uploadButtonWrapperClassNames = emotion.cx(canDrop && styles.windowDragOver(theme));
+  var uploadButtonWrapperClassNames = (0, _Emotion.cx)(canDrop && _FileUploader2.jsStyles.windowDragOver(theme));
 
-  var uploadButtonIconClassNames = emotion.cx(
-    styles.icon(theme),
-    sizeIconClass,
-    disabled && styles.iconDisabled(theme)
-  );
+  var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), sizeIconClass, disabled && _FileUploader2.jsStyles.iconDisabled(theme));
 
   var hasOneFile = files.length === 1;
   var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
 
-  var contentClassNames = emotion.cx(styles.content(), hasOneFileForSingle && styles.contentWithFiles());
+  var contentClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.content(), hasOneFileForSingle && _FileUploader2.jsStyles.contentWithFiles());
 
-  var linkClassNames = emotion.cx(
-    styles.link(theme),
-    !disabled && hovered && styles.linkHovered(theme),
-    disabled && styles.linkDisabled(theme)
+  var linkClassNames = (0, _Emotion.cx)(
+    _FileUploader2.jsStyles.link(theme),
+    !disabled && hovered && _FileUploader2.jsStyles.linkHovered(theme),
+    disabled && _FileUploader2.jsStyles.linkDisabled(theme)
   );
 
   (0, _react.useEffect)(function () {
@@ -321,7 +315,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
     _react.default.createElement("div", {
       "data-tid": FileUploaderDataTids.root,
-      className: styles.root(theme),
+      className: _FileUploader2.jsStyles.root(theme),
       style: (0, _useMemoObject.useMemoObject)({ width: width }),
       ref: rootNodeRef },
 
@@ -337,7 +331,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
     _react.default.createElement("div", {
       "data-tid": FileUploaderDataTids.content,
-      className: emotion.cx(contentClassNames, (_emotion$cx = {}, _emotion$cx[contentInnerClass] = !files.length || !isSingleMode, _emotion$cx)) },
+      className: (0, _Emotion.cx)(contentClassNames, (_cx = {}, _cx[contentInnerClass] = !files.length || !isSingleMode, _cx)) },
 
     isLinkVisible && /*#__PURE__*/
     _react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
@@ -346,13 +340,13 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
     isLinkVisible && String.fromCharCode(0xa0) /*   */, /*#__PURE__*/
     _react.default.createElement("div", {
-      className: emotion.cx(
+      className: (0, _Emotion.cx)(
         _FileUploader2.globalClasses.afterLinkText,
-        hasOneFileForSingle ? styles.afterLinkText_HasFiles(theme) : styles.afterLinkText(theme)
+        hasOneFileForSingle ? _FileUploader2.jsStyles.afterLinkText_HasFiles(theme) : _FileUploader2.jsStyles.afterLinkText(theme)
       ) },
 
     hasOneFileForSingle ? /*#__PURE__*/
-    _react.default.createElement("div", { ref: fileDivRef, className: styles.singleFile() },
+    _react.default.createElement("div", { ref: fileDivRef, className: _FileUploader2.jsStyles.singleFile() },
     renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size, onRemove: handleRemoveFile }))
     ) : /*#__PURE__*/
 
@@ -372,7 +366,7 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
       type: "file",
       disabled: disabled,
       multiple: multiple,
-      className: styles.visuallyHidden(),
+      className: _FileUploader2.jsStyles.visuallyHidden(),
       onClick: stopPropagation,
       onChange: handleInputChange,
       onFocus: handleFocus,
@@ -388,6 +382,11 @@ var _FileUploader = (0, _forwardRefAndName.forwardRefAndName)('FileUploader', fu
 
 
 
+/**
+ * `FileUploader` — контрол для выбора пользователем файла на компьютере и отображения статуса его отправки на сервер.
+ *
+ * Можно использовать для синхронной отправки данных, например, в форме. Или же можно использовать в асинхронном режиме.
+ */
 var FileUploader = exports.FileUploader = (0, _withFileUploaderControlProvider.withFileUploaderControlProvider)( /*#__PURE__*/
   _react.default.memo(_FileUploader)
 );