kamotive_ui 1.2.29 → 2.3.26

package/dist/components/Button/Button.js

@@ -1,14 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styles from './Button.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export const Button = ({ label, variant = 'fill', size = 'md', style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
-    const [buttonStyle, setButtonStyle] = useState('');
-    const [buttonCondition, setButtonCondition] = useState(condition);
-    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${buttonStyle}`], {
+export const Button = ({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
+    const btnIcon = icon || typeof children === 'object' && children;
+    let modeStyle = 'text';
+    if (mode) {
+        modeStyle = mode;
+    }
+    else if (btnIcon && variant !== 'link') {
+        modeStyle = (!label && !children) ? 'icon' : 'default';
+    }
+    const buttonCondition = error ? 'error' : (condition || 'default');
+    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${modeStyle}`], {
         [styles[`button--${variant}-${buttonCondition}`]]: buttonCondition && !color,
         [styles[`button--${variant}-custom`]]: color && !error
     });
@@ -48,51 +55,19 @@ export const Button = ({ label, variant = 'fill', size = 'md', style, condition,
             return '#FFFFFF';
         }
     };
-    const btnIcon = icon || typeof children === 'object' && children;
-    useEffect(() => {
-        if (!buttonStyle && style) {
-            setButtonStyle(style);
-        }
-        else {
-            if (btnIcon && variant !== 'link') {
-                if (!label && !(typeof children === 'string' && children)) {
-                    setButtonStyle('icon');
-                }
-                else {
-                    setButtonStyle('default');
-                }
-            }
-            else {
-                setButtonStyle('text');
-            }
-        }
-    }, [style, btnIcon, label, children]);
-    useEffect(() => {
-        if (!condition) {
-            if (error) {
-                setButtonCondition('error');
-            }
-            else {
-                setButtonCondition('default');
-            }
-        }
-        else {
-            error ? setButtonCondition('error') : setButtonCondition(condition);
-        }
-    }, [condition, error]);
     const iconColorStyle = iconColorFn();
-    if (!buttonStyle) {
+    if (!modeStyle) {
         return (React.createElement("button", { className: buttonClasses },
             React.createElement(Typography, { variant: "Body1" }, "\u041A\u043D\u043E\u043F\u043A\u0430")));
     }
-    return (React.createElement("button", { className: buttonClasses, style: color && !error ? {
+    return (React.createElement("button", { className: buttonClasses, 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)`,
             '--button-disabled-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 10%, transparent)`,
             '--button-disabled-textColor': variant === 'fill' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 50%, transparent)`,
-        } : {}, onClick: onClick, disabled: disabled, "aria-disabled": disabled, type: type, name: name ? name : label ? `button-${label}` : 'button', form: form },
-        btnIcon && (buttonStyle === 'icon' || buttonStyle === 'default') && (() => {
+        } : {})), onClick: (e) => onClick === null || onClick === void 0 ? void 0 : onClick(e), disabled: disabled, "aria-disabled": disabled, type: type, name: name ? name : label ? `button-${label}` : 'button', form: form },
+        btnIcon && (modeStyle === 'icon' || modeStyle === 'default') && (() => {
             var _a;
             const iconElement = btnIcon;
             const defaultStrokeWidth = size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0';
@@ -101,5 +76,5 @@ export const Button = ({ label, variant = 'fill', size = 'md', style, condition,
                 strokeWidth: (_a = iconElement.props.strokeWidth) !== null && _a !== void 0 ? _a : defaultStrokeWidth,
             });
         })(),
-        (buttonStyle === 'text' || buttonStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
+        (modeStyle === 'text' || modeStyle === 'default') && (React.createElement(Typography, { variant: "Body1" }, label ? label : typeof children === 'string' && children))));
 };

package/dist/components/ColorPicker/ColorPicker.js

@@ -129,7 +129,7 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
         setIsColorChanged(true);
         setColorValue(newColor);
         setSelectedColor(newColor);
-        onColorChange(newColor);
+        onColorChange === null || onColorChange === void 0 ? void 0 : onColorChange(newColor);
     };
     return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, ref: divRef },
         mainColor && (React.createElement("div", { className: mainColorClasses, style: {

package/dist/components/Comment/Comment.js

@@ -1,18 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './Comment.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
 import { TextEditor } from '../TextEditor/TextEditor';
 import { AttachedFilesPreview } from '../AttachedFilesPreview/AttachedFilesPreview';
-import { IconAccount, IconDeleteFilled, IconPencilFilled } from '../../Icons';
+import { IconAccount, IconDelete, IconPencil, IconPencilCancel } from '../../Icons';
 import { IconButton } from '../IconButton/IconButton';
-export const Comment = ({ id, value, style, className, username, avatar, creationDate, canAttachFiles = false, files = [], canEdit = false, isEdit = false, label, error = false, helperText, onChange, onSubmit, onDelete, }) => {
-    const [commentText, setCommentText] = useState(value || '');
+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, }) => {
+    var _a, _b, _c, _d;
     const [isEditMode, setIsEditMode] = useState(isEdit);
-    const [attachedFiles, setAttachedFiles] = useState(files);
     const [imageError, setImageError] = useState(false);
     const wrapperClassess = classNames(styles['wrapper--input'], className, {
-        [styles['wrapper--input-label']]: label,
         [styles['wrapper--input-helperText']]: error,
     });
     const inputClassess = classNames(styles.input, styles['readOnly']);
@@ -21,34 +19,34 @@ export const Comment = ({ id, value, style, className, username, avatar, creatio
         setIsEditMode((prev) => !prev);
     };
     const handleDeleteClick = () => {
-        onDelete === null || onDelete === void 0 ? void 0 : onDelete(id);
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(comment);
     };
     const handleSubmit = (value, files) => {
+        var _a;
         if (onSubmit) {
-            onSubmit(value, files);
+            onSubmit(value, files, (_a = comment === null || comment === void 0 ? void 0 : comment.id) !== null && _a !== void 0 ? _a : '');
         }
-        setCommentText(value);
-        setAttachedFiles(files);
         setIsEditMode((prev) => !prev);
     };
-    const handleChange = (value, files) => {
-        if (onChange) {
-            onChange(value, files);
-        }
+    const handleCancel = () => {
+        setIsEditMode((prev) => !prev);
     };
+    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' } },
             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(IconAccount, null)))),
                 React.createElement("div", { className: styles.infoWrapper },
-                    React.createElement(Typography, { variant: "Body2-Medium", className: labelClasses }, username),
+                    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))),
             canEdit && (React.createElement("div", { className: styles.iconsWrapper },
-                React.createElement(IconButton, { icon: React.createElement(IconPencilFilled, null), onClick: handleEditClick, size: "sm", style: { aspectRatio: 0 } }),
-                React.createElement(IconButton, { icon: React.createElement(IconDeleteFilled, null), onClick: handleDeleteClick, size: "sm", style: { aspectRatio: 0 } })))),
-        isEditMode ? (React.createElement(TextEditor, { defaultValue: commentText, onSubmit: handleSubmit, onChange: handleChange, error: error, helperText: helperText, files: attachedFiles, canAttachFiles: canAttachFiles })) : (React.createElement("div", { className: styles.commentWrapper },
-            attachedFiles.length > 0 && (React.createElement(AttachedFilesPreview, { files: attachedFiles, className: styles.attachedFilesContainer })),
-            React.createElement("div", { id: id, className: inputClassess, dangerouslySetInnerHTML: { __html: commentText || '' } }))),
+                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))));
 };

package/dist/components/Comment/Comment.module.css

@@ -5,6 +5,9 @@
 
 .wrapper--input-label {
 	margin-top: 20px;
+	display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .wrapper--input-helperText {
@@ -25,11 +28,13 @@
 .iconsWrapper {
 	display: flex;
 	flex-direction: row;
-	gap: 15px;
+	padding-right: 12px;
 }
 
 .commentWrapper {
 	padding-left: 33px;
+	width: 100%;
+    box-sizing: border-box;
 }
 
 .avatar {
@@ -144,7 +149,8 @@
 .attachedFilesContainer {
 	margin-top: 5px;
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
 	overflow-x: auto;
-	gap: 12px;
+	max-height: 25vh;
+    overflow: scroll;
 }

package/dist/components/Dialog/Dialog.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import styles from './Dialog.module.css';
 import classNames from 'classnames';
-export const Dialog = ({ open, maxWidth = 'md', children, style, className, overlay = true, fullWidth = false }) => {
+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 }) => {
     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}`], 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%' : '' }) },
+            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(Spinner, null)),
             React.createElement("div", { className: styles['content'] }, children))));
 };

package/dist/components/Dialog/Dialog.module.css

@@ -24,6 +24,7 @@
     display: flex;
     flex-direction: column; 
     gap: 1rem;
+    min-height: 0;
 }
 
 .maxWidth--xs {
@@ -44,4 +45,26 @@
 
 .maxWidth--xl {
     max-width: 800px; 
+}
+
+.loader {
+    position: absolute; 
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.5);
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15px;
+
+}
+
+.closeButtonWrapper{
+    position: absolute;
+    top: 15px; 
+    right: 15px; 
+    z-index: 20; 
 }

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

@@ -1,19 +1,19 @@
-import React, { FC } from 'react';
-import { DropdownProps, TOptions } from '../../types';
+import React from 'react';
+import { DropdownProps, BaseOptions } from '../../types';
 /**
  * Компонент Dropdown позволяет пользователям выбирать однин вариант из выпадающего меню
  */
-export interface DropdownListItemProps {
-    item: TOptions | null;
-    getOptionLabel?: (option: TOptions) => string;
+export interface DropdownListItemProps<T extends BaseOptions> {
+    item: T | null;
+    getOptionLabel?: (option: T) => string;
     size: 'md' | 'lg';
-    selectedItem: TOptions | null;
-    variant?: 'icons' | 'text';
-    onChange: (event: React.MouseEvent<HTMLElement>, item: TOptions | null) => void;
+    selectedItem: T | null | T[];
+    variant?: 'icons' | 'text' | 'filter';
+    onChange: (event: React.MouseEvent<HTMLElement>, item: T | null) => void;
     isActive?: boolean;
     activeIndex?: number;
     index?: number;
     isChild?: boolean;
 }
-export declare const DropdownListItem: FC<DropdownListItemProps>;
-export declare const Dropdown: FC<DropdownProps>;
+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;