kamotive_ui 17.3.26 → 19.5.26

package/dist/components/AttachedFilesPreview/AttachedFilesPreview.d.ts

@@ -17,6 +17,7 @@ interface AttachedFilesProps {
     className?: string;
     maxFileCount?: number;
     lng: string;
+    testId?: string;
 }
 export declare const AttachedFilesPreview: React.FC<AttachedFilesProps>;
 export {};

package/dist/components/AttachedFilesPreview/AttachedFilesPreview.js

@@ -16,15 +16,15 @@ export const formatFileSize = (bytes, lng) => {
     const sizes = lng === 'ru' || (lng === null || lng === void 0 ? void 0 : lng.includes('ru')) ? sizesRu : sizesEn;
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
-export const AttachedFilesPreview = ({ files, onDownload, allowDelete = false, onDelete, style, className, maxFileCount = 5, lng, }) => {
-    return (React.createElement("div", { className: className, style: style, title: "" },
+export const AttachedFilesPreview = ({ files, onDownload, allowDelete = false, onDelete, style, className, maxFileCount = 5, lng, testId = 'default' }) => {
+    return (React.createElement("div", { className: className, style: style, title: "", "data-test-id": `${testId}-files-preview-list` },
         files.map((file, index) => {
             var _a;
             return (React.createElement(FileItem, { key: `${index + ((_a = file.filename) !== null && _a !== void 0 ? _a : '')}`, file: file, error: file.error, canDelete: allowDelete, canDownload: Boolean(onDownload), onDelete: (id) => allowDelete && (onDelete === null || onDelete === void 0 ? void 0 : onDelete(id)), onDownload: (file) => onDownload === null || onDownload === void 0 ? void 0 : onDownload(file), style: {
                     border: !file.error ? 'none' : undefined,
                     padding: !file.error ? '5px 5px' : '5px 5px',
                     borderRadius: '5px'
-                }, isRejectedFile: file.error, isComment: true, lng: lng }));
+                }, isRejectedFile: file.error, isComment: true, lng: lng, testId: `${testId}-files-preview-${index}` }));
         }),
-        files.length > maxFileCount && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, (lng === 'ru' || lng.includes('ru')) ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`))));
+        files.length > maxFileCount && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)", testId: `${testId}-files-preview-error` }, (lng === 'ru' || lng.includes('ru')) ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`))));
 };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,7 +3,7 @@ import styles from './Breadcrumb.module.css';
 import classNames from 'classnames';
 ;
 import { Typography } from '../Typography/Typography';
-export const Breadcrumb = ({ onClick, active, label, icon, children }) => {
+export const Breadcrumb = ({ onClick, active, label, icon, children, testId = 'default' }) => {
     const handleClick = (e) => {
         if (!active && onClick) {
             onClick();
@@ -11,7 +11,7 @@ export const Breadcrumb = ({ onClick, active, label, icon, children }) => {
     };
     const childrenClassNames = classNames(active ? styles['children--active'] : styles['children--inactive'], styles.children);
     const iconClassNames = classNames(childrenClassNames, styles.icon);
-    return (React.createElement("button", { className: classNames(styles.breadcrumb), onClick: handleClick },
-        icon && React.createElement("span", { className: iconClassNames }, icon),
-        React.createElement(Typography, { variant: "Body1-Medium", className: childrenClassNames }, label || children)));
+    return (React.createElement("button", { "data-test-id": `${testId}-breadcrumb-button`, className: classNames(styles.breadcrumb), onClick: handleClick },
+        icon && React.createElement("span", { "data-test-id": `${testId}-breadcrumb-icon`, className: iconClassNames }, icon),
+        React.createElement(Typography, { testId: `${testId}-breadcrumb`, variant: "Body1-Medium", className: childrenClassNames }, label || children)));
 };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import classNames from 'classnames';
 import styles from './Breadcrumbs.module.css';
-export const Breadcrumbs = ({ className, separator = '/', children }) => {
-    return (React.createElement("nav", { className: classNames(styles.breadcrumbs, className) }, React.Children.map(children, (child, index) => {
+export const Breadcrumbs = ({ className, separator = '/', children, testId = 'default' }) => {
+    return (React.createElement("nav", { "data-test-id": `${testId}-breadcrumbs-block`, className: classNames(styles.breadcrumbs, className) }, React.Children.map(children, (child, index) => {
+        const isReactElement = React.isValidElement(child);
         return (React.createElement(React.Fragment, { key: index },
-            child,
-            index < children.length - 1 && (React.createElement("span", { className: styles.separator }, separator))));
+            isReactElement
+                ? React.cloneElement(child, {
+                    // Передаем testId родителя внутрь ребенка, если у ребенка нет своего
+                    testId: child.props.testId || testId
+                })
+                : child,
+            index < children.length - 1 && (React.createElement("span", { "data-test-id": `${testId}-breadcrumbs-separator`, className: styles.separator }, separator))));
     })));
 };

package/dist/components/Button/Button.d.ts

@@ -3,4 +3,4 @@ import { ButtonProps } from '../../types';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.js

@@ -5,7 +5,7 @@ import { Typography } from '../Typography/Typography';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export const Button = ({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
+export const Button = React.forwardRef(({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form, className, active, testId = 'default' }, ref) => {
     const btnIcon = icon || typeof children === 'object' && children;
     let modeStyle = 'text';
     if (mode) {
@@ -15,9 +15,10 @@ export const Button = ({ label, variant = 'fill', size = 'md', mode, style, cond
         modeStyle = (!label && !children) ? 'icon' : 'default';
     }
     const buttonCondition = error ? 'error' : (condition || 'default');
-    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${modeStyle}`], {
+    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${modeStyle}`], className, {
         [styles[`button--${variant}-${buttonCondition}`]]: buttonCondition && !color,
-        [styles[`button--${variant}-custom`]]: color && !error
+        [styles[`button--${variant}-custom`]]: color && !error,
+        [styles[`button--${variant}-${buttonCondition}--active`]]: active && buttonCondition && !color,
     });
     const iconColorFn = () => {
         if (buttonCondition && !color) {
@@ -57,10 +58,10 @@ export const Button = ({ label, variant = 'fill', size = 'md', mode, style, cond
     };
     const iconColorStyle = iconColorFn();
     if (!modeStyle) {
-        return (React.createElement("button", { className: buttonClasses },
-            React.createElement(Typography, { variant: "Body1" }, "\u041A\u043D\u043E\u043F\u043A\u0430")));
+        return (React.createElement("button", { "data-test-id": `${testId}-button`, className: buttonClasses },
+            React.createElement(Typography, { variant: "Body1", testId: `${testId}-button` }, "\u041A\u043D\u043E\u043F\u043A\u0430")));
     }
-    return (React.createElement("button", { className: buttonClasses, style: Object.assign(Object.assign({}, style), (color && !error ? {
+    return (React.createElement("button", { "data-test-id": `${testId}-button`, className: buttonClasses, ref: ref, style: Object.assign(Object.assign({}, style), (color && !error ? {
             '--button-color': color,
             '--button-hover-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 90%, black)` : `color-mix(in srgb, ${color} 10%, transparent)`,
             '--button-active-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 20%, transparent)`,
@@ -71,10 +72,10 @@ export const Button = ({ label, variant = 'fill', size = 'md', mode, style, cond
             var _a;
             const iconElement = btnIcon;
             const defaultStrokeWidth = size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0';
-            return React.cloneElement(iconElement, {
+            return (React.createElement("span", { "data-test-id": `${testId}-button-icon`, className: "button-icon-wrapper", style: { display: 'inline-flex' } }, React.cloneElement(iconElement, {
                 htmlColor: iconColorStyle,
                 strokeWidth: (_a = iconElement.props.strokeWidth) !== null && _a !== void 0 ? _a : defaultStrokeWidth,
-            });
+            })));
         })(),
-        (modeStyle === 'text' || modeStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
-};
+        (modeStyle === 'text' || modeStyle === 'default') && (React.createElement(Typography, { testId: `${testId}-button`, variant: "Body1" }, label ? label : typeof children === 'string' && children))));
+});

package/dist/components/Button/Button.module.css

@@ -200,7 +200,8 @@
   color: var(--blue-main);
   border: 1px solid var(--blue-main);
 }
-.button--outline-default:hover {
+.button--outline-default:hover,
+.button--outline-default--active {
   background-color: rgba(13, 153, 255, 0.07);
   color: var(--blue-main);
   border: 1px solid var(--blue-main);

package/dist/components/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import styles from './Checkbox.module.css';
 import classNames from 'classnames';
 ;
 import { Typography } from '../Typography/Typography';
-export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label, color, filled }) => {
+export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label, color, filled, testId = 'default' }) => {
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
@@ -21,7 +21,7 @@ export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', lab
         '--arrow-color-hover': filled ? 'var(--white)' : 'var(--border-color-hover)',
         '--arrow-color-disabled': filled ? 'var(--white)' : 'var(--border-color-disabled)',
     };
-    return (React.createElement("label", { className: styles.checkbox, style: checkboxStyles },
-        React.createElement("input", { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
-        React.createElement(Typography, { variant: 'Body2' }, label)));
+    return (React.createElement("label", { "data-test-id": `${testId}-checkbox`, className: styles.checkbox, style: checkboxStyles },
+        React.createElement("input", { type: "checkbox", name: 'checkbox', checked: checked, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]), "data-test-id": `${testId}-checkbox-input` }),
+        React.createElement(Typography, { testId: `${testId}-checkbox`, variant: 'Body2' }, label)));
 };

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -11,6 +11,7 @@ export interface CheckboxProps {
     size?: 'sm' | 'md';
     /** Текст лейбла */
     label?: string;
+    testId?: string;
 }
 declare const meta: Meta<CheckboxProps>;
 export default meta;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -18,6 +18,7 @@ const meta = {
     args: {
         size: 'sm',
         disabled: false,
+        testId: 'storybook'
     },
     argTypes: {
         size: {

package/dist/components/ColorPicker/ColorPicker.js

@@ -59,7 +59,7 @@ const mouseLeaveTimer = (callback, delay) => {
 /**
  * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
  */
-export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, onColorChange, }) => {
+export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsHovered, width = 10, height = 10, autoOpen = false, onChange, onColorChange, testId = 'default' }) => {
     const [colorValue, setColorValue] = useState(mainColor);
     const [selectedColor, setSelectedColor] = useState(color);
     const [isColorChanged, setIsColorChanged] = useState(false);
@@ -131,30 +131,31 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
         setSelectedColor(newColor);
         onColorChange === null || onColorChange === void 0 ? void 0 : onColorChange(newColor);
     };
-    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, ref: divRef },
+    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, ref: divRef, "data-test-id": `${testId}-color-block` },
         mainColor && (React.createElement("div", { className: mainColorClasses, style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 backgroundColor: (colorValue === null || colorValue === void 0 ? void 0 : colorValue.startsWith('#')) ? colorValue : `var(--${colorValue})`,
-            } })),
+            }, "data-test-id": `${testId}-color-current` })),
         recentColors &&
             recentColors.map((color, index) => (React.createElement("div", { key: index, className: styles.circle, style: {
                     width: `${width}px`,
                     height: `${height}px`,
                     backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
-                }, onClick: () => colorChangeHandler(color) }))),
+                }, onClick: () => colorChangeHandler(color), "data-test-id": `${testId}-color-${index}-circle` }))),
         React.createElement("div", { className: styles.colorPicker },
             React.createElement("div", { ref: circleRef, className: colorCircleDefaultClasses, onClick: () => setIsOpen(!isOpen), style: {
                     width: `${width}px`,
                     height: `${height}px`,
-                } }),
-            isOpen && (React.createElement("div", { ref: popoverRef, className: popoverClassess },
+                }, "data-test-id": `${testId}-color-button` }),
+            isOpen && (React.createElement("div", { "data-test-id": `${testId}-color-popover`, ref: popoverRef, className: popoverClassess },
                 isOpen && React.createElement(IconColorPicker, { className: styles.colorPickerIcon, htmlColor: 'var(--white)' }),
-                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: styles.customChrome, showEyeDropper: false }),
+                React.createElement("div", { "data-test-id": `${testId}-color-chrome` },
+                    React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: styles.customChrome, showEyeDropper: false })),
                 React.createElement("div", { className: styles.hex, style: { padding: '0 10px 0 20px' } },
                     React.createElement(EditableInput, { value: hexaToHex(selectedColor), style: { width: 68, alignItems: 'flex-start' }, onChange: (e, color) => {
                             const formattedColor = hexaToHex(color.toString());
                             colorChangeHandler(formattedColor);
-                        } })))))));
+                        }, "data-test-id": `${testId}-color-input` })))))));
 };
 export default ColorPicker;

package/dist/components/Comment/Comment.js

@@ -6,7 +6,7 @@ import { TextEditor } from '../TextEditor/TextEditor';
 import { AttachedFilesPreview } from '../AttachedFilesPreview/AttachedFilesPreview';
 import { IconAccount, IconDelete, IconPencil, IconPencilCancel } from '../../Icons';
 import { IconButton } from '../IconButton/IconButton';
-export const Comment = ({ comment, avatar, creationDate, canAttachFiles = true, canEdit = false, isEdit = false, error = false, setError, helperText, onSubmit, onDelete, onEdit, onDownload, canDeleteFile, onFileDelete, maxFileCount, maxFileSize, lng = 'ru', style, className, }) => {
+export const Comment = ({ comment, avatar, creationDate, canAttachFiles = true, canEdit = false, isEdit = false, error = false, setError, helperText, onSubmit, onDelete, onEdit, onDownload, canDeleteFile, onFileDelete, maxFileCount, maxFileSize, lng = 'ru', style, className, testId = 'default' }) => {
     var _a, _b, _c, _d;
     const [isEditMode, setIsEditMode] = useState(isEdit);
     const [imageError, setImageError] = useState(false);
@@ -34,19 +34,19 @@ export const Comment = ({ comment, avatar, creationDate, canAttachFiles = true,
     useEffect(() => {
         onEdit === null || onEdit === void 0 ? void 0 : onEdit(isEditMode);
     }, [isEditMode]);
-    return (React.createElement("div", { className: wrapperClassess, style: style },
-        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } },
+    return (React.createElement("div", { "data-test-id": `${testId}-comment-section`, className: wrapperClassess, style: style },
+        React.createElement("div", { "data-test-id": `${testId}-comment-section-header`, style: { display: 'flex', justifyContent: 'space-between' } },
             React.createElement("div", { className: styles.labelWrapper },
-                React.createElement("div", { className: styles.flexBox }, avatar && !imageError ? (React.createElement("img", { src: avatar, alt: "Avatar", className: styles.avatar, onError: () => setImageError(true) })) : (React.createElement("div", { className: `${styles.avatar} ${styles.avatarIcon} ${styles.flexBox}` },
+                React.createElement("div", { className: styles.flexBox }, avatar && !imageError ? (React.createElement("img", { "data-test-id": `${testId}-comment-avatar`, src: avatar, alt: "Avatar", className: styles.avatar, onError: () => setImageError(true) })) : (React.createElement("div", { "data-test-id": `${testId}-comment-avatar-placeholder`, className: `${styles.avatar} ${styles.avatarIcon} ${styles.flexBox}` },
                     React.createElement(IconAccount, null)))),
-                React.createElement("div", { className: styles.infoWrapper },
-                    React.createElement(Typography, { variant: "Body2-Medium", className: labelClasses }, (_b = (_a = comment === null || comment === void 0 ? void 0 : comment.authorUser) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : ''),
-                    React.createElement(Typography, { variant: "Caption", className: styles.label, style: { color: '#8E8E93' } }, creationDate))),
+                React.createElement("div", { "data-test-id": `${testId}-comment-info-block`, className: styles.infoWrapper },
+                    React.createElement(Typography, { testId: `${testId}-comment-author`, variant: "Body2-Medium", className: labelClasses }, (_b = (_a = comment === null || comment === void 0 ? void 0 : comment.authorUser) === null || _a === void 0 ? void 0 : _a.fullName) !== null && _b !== void 0 ? _b : ''),
+                    React.createElement(Typography, { testId: `${testId}-comment-date`, variant: "Caption", className: styles.label, style: { color: '#8E8E93' } }, creationDate))),
             canEdit && (React.createElement("div", { className: styles.iconsWrapper },
-                React.createElement(IconButton, { icon: isEditMode ? React.createElement(IconPencilCancel, { width: '14', height: '14' }) : React.createElement(IconPencil, { width: '14', height: '14' }), title: isEditMode ? lng === 'ru' ? 'Закрыть редактирование' : 'Close edit' : lng === 'ru' ? 'Редактировать' : 'Edit', onClick: handleEditClick, style: { width: '30px', height: '30px', padding: '5px' }, color: "var(--icons-grey)" }),
-                React.createElement(IconButton, { icon: React.createElement(IconDelete, { width: '14', height: '14', strokeWidth: '0.5' }), title: lng === 'ru' ? 'Удалить' : 'Delete', onClick: handleDeleteClick, size: "sm", style: { width: '30px', height: '30px', padding: '5px' }, color: "var(--icons-grey)" })))),
-        isEditMode ? (React.createElement(TextEditor, { defaultValue: (_c = comment === null || comment === void 0 ? void 0 : comment.text) !== null && _c !== void 0 ? _c : '', attachedFiles: comment.attachFiles, onSubmit: handleSubmit, onCancel: handleCancel, onDelete: onFileDelete, error: error, setError: setError, helperText: helperText, isEditMode: isEditMode, canAttachFiles: canAttachFiles, maxFileCount: maxFileCount, maxFileSize: maxFileSize, lng: lng })) : (React.createElement("div", { className: styles.commentWrapper },
-            comment.attachFiles && ((_d = comment.attachFiles) === null || _d === void 0 ? void 0 : _d.length) > 0 && (React.createElement(AttachedFilesPreview, { files: comment.attachFiles, onDownload: onDownload, allowDelete: canDeleteFile, onDelete: onFileDelete, className: styles.attachedFilesContainer, maxFileCount: maxFileCount, lng: lng })),
-            React.createElement("div", { id: `comment-${comment.id}`, className: inputClassess, dangerouslySetInnerHTML: { __html: comment.text || '' } }))),
-        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText) }, helperText))));
+                React.createElement(IconButton, { icon: isEditMode ? React.createElement(IconPencilCancel, { width: '14', height: '14' }) : React.createElement(IconPencil, { width: '14', height: '14' }), title: isEditMode ? lng === 'ru' ? 'Закрыть редактирование' : 'Close edit' : lng === 'ru' ? 'Редактировать' : 'Edit', onClick: handleEditClick, style: { width: '30px', height: '30px', padding: '5px' }, color: "var(--icons-grey)", "data-test-id": `${testId}-comment-edit-button` }),
+                React.createElement(IconButton, { icon: React.createElement(IconDelete, { width: '14', height: '14', strokeWidth: '0.5' }), title: lng === 'ru' ? 'Удалить' : 'Delete', onClick: handleDeleteClick, size: "sm", style: { width: '30px', height: '30px', padding: '5px' }, color: "var(--icons-grey)", "data-test-id": `${testId}-comment-delete-button` })))),
+        isEditMode ? (React.createElement(TextEditor, { defaultValue: (_c = comment === null || comment === void 0 ? void 0 : comment.text) !== null && _c !== void 0 ? _c : '', attachedFiles: comment.attachFiles, onSubmit: handleSubmit, onCancel: handleCancel, onDelete: onFileDelete, error: error, setError: setError, helperText: helperText, isEditMode: isEditMode, canAttachFiles: canAttachFiles, maxFileCount: maxFileCount, maxFileSize: maxFileSize, lng: lng, testId: `${testId}-comment-editor` })) : (React.createElement("div", { className: styles.commentWrapper },
+            comment.attachFiles && ((_d = comment.attachFiles) === null || _d === void 0 ? void 0 : _d.length) > 0 && (React.createElement(AttachedFilesPreview, { files: comment.attachFiles, onDownload: onDownload, allowDelete: canDeleteFile, onDelete: onFileDelete, className: styles.attachedFilesContainer, maxFileCount: maxFileCount, lng: lng, testId: `${testId}-comment-attached` })),
+            React.createElement("div", { "data-test-id": `${testId}-comment-text`, id: `comment-${comment.id}`, className: inputClassess, dangerouslySetInnerHTML: { __html: comment.text || '' } }))),
+        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText), testId: `${testId}-comment-error` }, helperText))));
 };

package/dist/components/DateInput/DateInput.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 import DatePicker from 'react-datepicker';
 import { IconCalendar } from '../../Icons/IconCalendar/IconCalendar';
+// @ts-ignore
 import 'react-datepicker/dist/react-datepicker.css';
 import { registerLocale } from 'react-datepicker';
 import { ru } from 'date-fns/locale/ru';
@@ -13,7 +14,7 @@ import { ChevronLeft } from '../../Icons/ChevronLeft/ChevronLeft';
 import { Button } from '../Button/Button';
 registerLocale('ru', ru);
 registerLocale('en', enUS);
-const CustomInput = forwardRef(({ value = '', lng, onClick, onDateChange, onClose, className, disabled = false, readOnly = false, dateFormat = 'dd.MM.yyyy' }, ref) => {
+const CustomInput = forwardRef(({ value = '', lng, onClick, onDateChange, onClose, className, disabled = false, readOnly = false, dateFormat = 'dd.MM.yyyy', testId = 'default' }, ref) => {
     const inputRef = useRef(null);
     const [selectedPart, setSelectedPart] = useState(null);
     const [tempInput, setTempInput] = useState('');
@@ -199,9 +200,9 @@ const CustomInput = forwardRef(({ value = '', lng, onClick, onDateChange, onClos
     useImperativeHandle(ref, () => ({
         removeSelection,
     }), [removeSelection]);
-    return (React.createElement("input", { ref: inputRef, value: input || displayValue, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onChange: () => { }, readOnly: !value || readOnly, disabled: disabled, className: className }));
+    return (React.createElement("input", { ref: inputRef, name: 'date', value: input || displayValue, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onChange: () => { }, readOnly: !value || readOnly, disabled: disabled, className: className, "data-test-id": `${testId}-input` }));
 });
-export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, lng = 'ru', minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', }) => {
+export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, lng = 'ru', minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', testId = 'dafault' }) => {
     const wrapperClassess = classNames(styles['wrapper--input'], className, {
         [styles['wrapper--left']]: isLeftLabel,
         [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
@@ -306,52 +307,52 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
                 });
             }
         }, [currentMonth]);
-        return (React.createElement("div", { className: `${styles.monthPicker} ${styles.calendar}` },
+        return (React.createElement("div", { "data-test-id": `${testId}-monthpicker-popover`, className: `${styles.monthPicker} ${styles.calendar}` },
             React.createElement("div", { className: styles.monthPickerWrapper },
-                React.createElement("div", { className: styles.monthContainer }, months.map((month, index) => {
+                React.createElement("div", { "data-test-id": `${testId}-months-list`, className: styles.monthContainer }, months.map((month, index) => {
                     const monthClasses = itemClasses('month', months.indexOf(month) === currentMonth);
                     return (React.createElement("div", { key: month, ref: getRef(monthRefs, index), className: monthClasses, onClick: () => {
                             setCurrentMonth(months.indexOf(month));
-                        } }, month));
+                        }, "data-test-id": `${testId}-month-${month}-cell` }, month));
                 })),
                 React.createElement("div", { className: styles.monthContainer }, years.map((year, index) => {
                     const yearClasses = itemClasses('year', year === currentYear);
                     return (React.createElement("div", { key: year, ref: getRef(yearRefs, index), className: yearClasses, onClick: () => {
                             setCurrentYear(year);
-                        } }, year));
+                        }, "data-test-id": `${testId}-year-${year}-cell` }, year));
                 }))),
             React.createElement("div", { className: styles.buttonContainer },
                 React.createElement(Button, { condition: "info", onClick: () => {
                         setIsMonthPickerOpen(false);
-                    } }, lng === 'ru' ? "Отмена" : "Cancel"),
+                    }, testId: `${testId}-monthpicker-cancel` }, lng === 'ru' ? "Отмена" : "Cancel"),
                 React.createElement(Button, { onClick: () => {
                         date.setMonth(currentMonth);
                         date.setFullYear(currentYear);
                         setIsMonthPickerOpen(false);
-                    } }, lng === 'ru' ? "Применить" : "Apply"))));
+                    }, testId: `${testId}-monthpicker-apply` }, lng === 'ru' ? "Применить" : "Apply"))));
     };
     const getMonthPickerWithDate = (date) => {
         return () => React.createElement(MonthPicker, { date: date });
     };
     const renderCustomHeader = ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => {
-        return (React.createElement("div", { className: styles.calendarHeader },
-            React.createElement("button", { type: "button", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, className: styles.calendarNavButton },
+        return (React.createElement("div", { "data-test-id": `${testId}-calendar-header`, className: styles.calendarHeader },
+            React.createElement("button", { type: "button", onClick: decreaseMonth, disabled: prevMonthButtonDisabled, className: styles.calendarNavButton, "data-test-id": `${testId}-prev-month-button` },
                 React.createElement(ChevronLeft, null)),
             React.createElement("div", { className: styles.monthDisplay, onClick: () => {
                     setIsMonthPickerOpen(true);
-                } },
+                }, "data-test-id": `${testId}-current-month-button` },
                 months[date.getMonth()],
                 ", ",
                 date.getFullYear()),
-            React.createElement("button", { type: "button", onClick: increaseMonth, disabled: nextMonthButtonDisabled, className: styles.calendarNavButton },
+            React.createElement("button", { type: "button", onClick: increaseMonth, disabled: nextMonthButtonDisabled, className: styles.calendarNavButton, "data-test-id": `${testId}-next-month-button` },
                 React.createElement(ChevronRight, null))));
     };
     const renderDayContents = (day, date) => {
-        return React.createElement("div", { className: styles.calendarDay }, day);
+        return React.createElement("div", { "data-test-id": `${testId}-day-${day}-cell`, className: styles.calendarDay }, day);
     };
-    return (React.createElement("div", { className: wrapperClassess, style: style },
-        label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
-        React.createElement("div", { className: styles.icon, onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(true); } }, icon || React.createElement(IconCalendar, null)),
+    return (React.createElement("div", { "data-test-id": `${testId}-dateInput-block`, className: wrapperClassess, style: style },
+        label && (React.createElement(Typography, { testId: `${testId}-dateInput`, variant: "Caption", className: labelClasses }, label)),
+        React.createElement("div", { "data-test-id": `${testId}-dateInput-icon-trigger`, className: styles.icon, onClick: () => { var _a; return (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(true); } }, icon || React.createElement(IconCalendar, null)),
         React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: lng === 'ru' ? 'ru' : 'en', readOnly: readOnly, disabled: disabled, showPopperArrow: false, calendarClassName: classNames(styles.calendar, calendarClassName), popperClassName: styles.calendarPopper, onCalendarClose: () => setIsMonthPickerOpen(false), minDate: minDate, maxDate: maxDate, inline: false, calendarStartDay: 1, formatWeekDay: (dayName) => {
                 const dayIndex = ['понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота', 'воскресенье']
                     .findIndex(day => day === dayName);
@@ -365,6 +366,6 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
             : {
                 renderCustomHeader: renderCustomHeader,
                 renderDayContents: renderDayContents,
-            }), { customInput: React.createElement(CustomInput, { ref: inputRef, lng: lng, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker, disabled: disabled, readOnly: readOnly, dateFormat: dateFormat }) })),
-        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
+            }), { customInput: React.createElement(CustomInput, { ref: inputRef, lng: lng, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker, disabled: disabled, readOnly: readOnly, dateFormat: dateFormat, testId: `${testId}-dateInput` }) })),
+        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]), testId: `${testId}-dateInput-error` }, helperText))));
 };

package/dist/components/Dialog/Dialog.js

@@ -4,14 +4,14 @@ import classNames from 'classnames';
 import { Spinner } from '../Spinner/Spinner';
 import { IconButton } from '../IconButton/IconButton';
 import { IconClose } from '../../Icons/IconClose/IconClose';
-export const Dialog = ({ open, onClose, maxWidth = 'md', children, style, className, overlay = true, fullWidth = false, isLoading = false }) => {
+export const Dialog = ({ open, onClose, maxWidth = 'md', children, style, className, overlay = true, fullWidth = false, isLoading = false, testId = 'default' }) => {
     const isMaxWidthInPx = typeof maxWidth === 'string' && !isNaN(Number(maxWidth.replace('px', '')));
     return (React.createElement(React.Fragment, null,
         open && overlay && React.createElement("div", { className: styles.dialogOverlay }),
-        React.createElement("dialog", { open: open, className: classNames(styles['dialog'], !isMaxWidthInPx && styles[`maxWidth--${maxWidth}`], isLoading && styles['dialogLoading'], className), style: Object.assign(Object.assign({}, style), { maxWidth: isMaxWidthInPx ? maxWidth : '', width: fullWidth ? '100%' : '' }) },
+        React.createElement("dialog", { open: open, className: classNames(styles['dialog'], !isMaxWidthInPx && styles[`maxWidth--${maxWidth}`], isLoading && styles['dialogLoading'], className), style: Object.assign(Object.assign({}, style), { maxWidth: isMaxWidthInPx ? maxWidth : '', width: fullWidth ? '100%' : '' }), "data-test-id": `${testId}-modal` },
             onClose && (React.createElement("div", { className: styles.closeButtonWrapper },
-                React.createElement(IconButton, { onClick: onClose, icon: React.createElement(IconClose, null), color: "var(--icons-grey)", size: "lg" }))),
-            isLoading && React.createElement("div", { className: styles['loader'] },
+                React.createElement(IconButton, { onClick: onClose, icon: React.createElement(IconClose, null), color: "var(--icons-grey)", size: "lg", "data-test-id": `${testId}-modal-close-button` }))),
+            isLoading && React.createElement("div", { className: styles['loader'], "data-test-id": `${testId}-modal-spinner` },
                 React.createElement(Spinner, null)),
-            React.createElement("div", { className: styles['content'] }, children))));
+            React.createElement("div", { className: styles['content'], "data-test-id": `${testId}-modal-content` }, children))));
 };

package/dist/components/Dropdown/Dropdown.d.ts

@@ -14,6 +14,7 @@ export interface DropdownListItemProps<T extends BaseOptions> {
     activeIndex?: number;
     index?: number;
     isChild?: boolean;
+    testId?: string;
 }
-export declare const DropdownListItem: <T extends BaseOptions>({ item, getOptionLabel, size, selectedItem, variant, onChange, isActive, activeIndex, index, isChild, }: DropdownListItemProps<T>) => React.JSX.Element;
-export declare const Dropdown: <T extends BaseOptions>({ options, id, label, placeholder, required, value, defaultValue, onChange, showLoadMore, loadMore, getOptionLabel, variant, size, style, className, isLeftLabel, isDivider, disabled, readOnly, isOpened, error, helperText, onOpen, onClick, onBlur, onFocus, onClose, clearable, enableAutocomplete, onSearch, isLoadMoreLoading, isSearchLoading, noOptionsText, lng, multiple, limitTags, }: DropdownProps<T>) => React.JSX.Element;
+export declare const DropdownListItem: <T extends BaseOptions>({ item, getOptionLabel, size, selectedItem, variant, onChange, isActive, activeIndex, index, isChild, testId }: DropdownListItemProps<T>) => React.JSX.Element;
+export declare const Dropdown: <T extends BaseOptions>({ options, id, label, placeholder, required, value, defaultValue, onChange, showLoadMore, loadMore, getOptionLabel, variant, size, style, className, isLeftLabel, isDivider, disabled, readOnly, isOpened, error, helperText, onOpen, onClick, onBlur, onFocus, onClose, clearable, enableAutocomplete, onSearch, isOptionsLoading, isSearchLoading, noOptionsText, lng, multiple, limitTags, testId }: DropdownProps<T>) => React.JSX.Element;