kamotive_ui 1.2.29 → 22.10.5

package/dist/Icons/IconAttach/IconAttach.js

@@ -1,7 +1,7 @@
 import React from 'react';
 export const IconAttach = ({ color = 'inherit', htmlColor, strokeWidth, onClick, style }) => {
     return (React.createElement("svg", { width: "11", height: "13", viewBox: "0 0 11 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick, style: style },
-        React.createElement("path", { d: "M6.37877 4.15256L2.88551 7.64632C2.63416 7.9059 2.49642 8.25544 2.50202 8.61952C2.50761 8.9836 2.65609 9.33302 2.91541 9.59238C3.17473 9.85173 3.5241 10.0002 3.88813 10.0058C4.25215 10.0114 4.60165 9.87367 4.86118 9.62229L9.44315 5.04607C9.66417 4.83039 9.83953 4.57234 9.95906 4.28687C10.0786 4.0014 10.1399 3.6942 10.1395 3.38306C10.139 3.07192 10.0768 2.76304 9.95651 2.47432C9.83618 2.1856 9.66009 1.92279 9.43845 1.70113C9.21682 1.47946 8.95405 1.30335 8.66537 1.18299C8.3767 1.06264 8.06786 1.00044 7.75676 1C7.44567 0.999565 7.13851 1.0609 6.85308 1.18044C6.56765 1.29999 6.30964 1.47537 6.094 1.69642L1.48439 6.30669C1.1725 6.6096 0.924855 6.9724 0.755862 7.374C0.58687 7.7756 0.499896 8.208 0.5 8.64604C0.500104 9.08408 0.587283 9.51903 0.756467 9.92561C0.925651 10.3322 1.17347 10.7023 1.4855 11.0144C1.79754 11.3264 2.16757 11.5743 2.57409 11.7435C2.98061 11.9127 3.4155 11.9999 3.85348 12C4.29146 12.0001 4.72379 11.9131 5.12533 11.7441C5.52688 11.5751 5.88963 11.3274 6.19249 11.0155L10.5 6.70734", stroke: htmlColor || "#55534E", strokeMiterlimit: "10", strokeLinecap: "round", strokeWidth: strokeWidth || '1' })));
+        React.createElement("path", { d: "M6.37877 4.15256L2.88551 7.64632C2.63416 7.9059 2.49642 8.25544 2.50202 8.61952C2.50761 8.9836 2.65609 9.33302 2.91541 9.59238C3.17473 9.85173 3.5241 10.0002 3.88813 10.0058C4.25215 10.0114 4.60165 9.87367 4.86118 9.62229L9.44315 5.04607C9.66417 4.83039 9.83953 4.57234 9.95906 4.28687C10.0786 4.0014 10.1399 3.6942 10.1395 3.38306C10.139 3.07192 10.0768 2.76304 9.95651 2.47432C9.83618 2.1856 9.66009 1.92279 9.43845 1.70113C9.21682 1.47946 8.95405 1.30335 8.66537 1.18299C8.3767 1.06264 8.06786 1.00044 7.75676 1C7.44567 0.999565 7.13851 1.0609 6.85308 1.18044C6.56765 1.29999 6.30964 1.47537 6.094 1.69642L1.48439 6.30669C1.1725 6.6096 0.924855 6.9724 0.755862 7.374C0.58687 7.7756 0.499896 8.208 0.5 8.64604C0.500104 9.08408 0.587283 9.51903 0.756467 9.92561C0.925651 10.3322 1.17347 10.7023 1.4855 11.0144C1.79754 11.3264 2.16757 11.5743 2.57409 11.7435C2.98061 11.9127 3.4155 11.9999 3.85348 12C4.29146 12.0001 4.72379 11.9131 5.12533 11.7441C5.52688 11.5751 5.88963 11.3274 6.19249 11.0155L10.5 6.70734", stroke: htmlColor || "#828286", strokeMiterlimit: "10", strokeLinecap: "round", strokeWidth: strokeWidth || '2' })));
 };
 export const IconAttachToString = (color = 'inherit', htmlColor, strokeWidth, onClick, style) => {
     return `<svg

package/dist/Icons/IconExpand/IconExpand.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC } from 'react';
+export declare const IconExpand: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconExpand/IconExpand.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconExpand = ({ color = 'inherit', htmlColor, strokeWidth = '0.4', style }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, style: style },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', style: { strokeWidth: strokeWidth }, d: "M1.88575 15.6C2.20403 15.6 2.50925 15.7263 2.73429 15.9514C2.95932 16.1764 3.08575 16.4816 3.08575 16.8V20.4H6.68575C7.00403 20.4 7.30925 20.5263 7.53429 20.7514C7.75932 20.9764 7.88575 21.2816 7.88575 21.6C7.88575 21.9183 7.75932 22.2236 7.53429 22.4486C7.30925 22.6736 7.00403 22.8 6.68575 22.8H3.08575C2.44489 22.8 1.83025 22.5471 1.37015 22.0969C0.91004 21.6468 0.65718 21.0322 0.65718 20.4V16.8C0.65718 16.4816 0.78361 16.1764 1.00865 15.9514C1.23368 15.7263 1.5389 15.6 1.88575 15.6ZM21.0858 15.6C21.3797 15.6001 21.6634 15.7079 21.883 15.9032C22.1026 16.0984 22.2431 16.3677 22.2773 16.6596L22.2858 16.8V20.4C22.2859 21.0053 22.0572 21.5885 21.6456 22.0325C21.2339 22.4765 20.6695 22.7486 20.0658 22.7939L19.8858 22.8H16.2858C15.9799 22.7997 15.6857 22.681 15.4633 22.4726C15.2408 22.2641 15.1071 21.9756 15.0886 21.6702C15.0701 21.3649 15.1677 21.0643 15.3669 20.8298C15.566 20.5953 15.8416 20.4444 16.1453 20.4084L16.2858 20.4H19.8858V16.8C19.8858 16.4816 20.0122 16.1764 20.2373 15.9514C20.4623 15.7263 20.7675 15.6 21.0858 15.6ZM19.8858 1.2C20.4911 1.19972 21.0743 1.42841 21.5183 1.84011C21.9623 2.25181 22.2344 2.81613 22.2797 3.41991L22.2858 3.6V7.2C22.2854 7.50591 22.1667 7.80008 21.9583 8.02253C21.7498 8.24498 21.4613 8.37861 21.156 8.39708C20.8506 8.41555 20.55 8.31795 20.3155 8.11881C20.081 7.91966 19.9301 7.64404 19.8941 7.34031L19.8858 7.2V3.6H16.2858C15.9799 3.59957 15.6857 3.48084 15.4633 3.27241C15.2408 3.06397 15.1071 2.77542 15.0886 2.47006C15.0701 2.16471 15.1677 1.86409 15.3669 1.62959C15.566 1.39509 15.8416 1.24421 16.1453 1.20831L16.2858 1.2H19.8858ZM6.68575 1.2C6.98166 1.20043 7.27583 1.31916 7.49828 1.52759C7.72073 1.73603 7.85436 2.02458 7.87283 2.32994C7.89129 2.63529 7.7937 2.93591 7.59455 3.17041C7.39541 3.40491 7.11979 3.55579 6.81606 3.59169L6.68575 3.6H3.08575V7.2C3.08532 7.50591 2.96659 7.80008 2.75816 8.02253C2.54972 8.24498 2.26117 8.37861 1.95581 8.39708C1.65046 8.41555 1.34984 8.31795 1.11534 8.11881C0.880839 7.91966 0.729957 7.64404 0.694057 7.34031L0.68575 7.2V3.6C0.685473 2.99468 0.914162 2.41152 1.32586 1.96753C1.73756 1.52354 2.30188 1.25147 2.90566 1.20617L3.08575 1.2H6.68575Z" })));
+};

package/dist/Icons/IconFilter/IconFilter.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC } from 'react';
+export declare const IconFilter: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: number;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconFilter/IconFilter.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconFilter = ({ color = 'inherit', htmlColor, strokeWidth = 0.75, style, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, style: style },
+        React.createElement("path", { fill: htmlColor || '#828286', stroke: htmlColor || '#828286', strokeWidth: strokeWidth, d: "M14.2759 22C14.0461 21.9998 13.8208 21.9326 13.6244 21.8054L9.43096 19.2462C8.95914 18.9574 8.5686 18.5617 8.29696 18.0946C8.02532 17.6275 7.88178 17.0896 7.88014 16.5425V12.1076C7.88094 11.7401 7.75604 11.3816 7.52292 11.0824L1.66799 3.55524C1.53128 3.37006 1.4497 3.14797 1.43225 2.91732C1.4148 2.68668 1.46216 2.45583 1.56911 2.2538C1.67606 2.05178 1.83843 1.88663 2.03832 1.77527C2.23822 1.66393 2.46784 1.61387 2.70188 1.61429H20.7258C20.96 1.61326 21.19 1.66297 21.39 1.77423C21.5902 1.88549 21.7528 2.05084 21.8598 2.25321C21.967 2.45558 22.0142 2.68671 21.9966 2.91745C21.9788 3.14819 21.8968 3.37015 21.7596 3.55524L15.9047 11.0824C15.6712 11.3815 15.5458 11.7401 15.5463 12.1076V21.1214C15.5459 21.4439 15.4121 21.7534 15.174 21.9865C14.9359 22.2196 14.613 22.3419 14.2759 22ZM2.70188 2.87051L8.54676 10.4076C8.93412 10.9079 9.14104 11.5005 9.1379 12.1076V16.5414C9.13836 16.8611 9.22512 17.1761 9.38974 17.4555C9.55436 17.7349 9.79126 17.9694 10.0775 18.1292L14.2709 20.6879L14.2885 12.1064C14.2857 11.4992 14.4931 10.9066 14.8809 10.4067L20.7346 2.89818L2.70188 2.87051Z" })));
+};

package/dist/Icons/IconSearch/IconSearch.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC } from 'react';
+export declare const IconSearch: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: number;
+    style?: CSSProperties;
+}>;

package/dist/Icons/IconSearch/IconSearch.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const IconSearch = ({ color = 'inherit', htmlColor, strokeWidth = 0.5, style, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, style: style },
+        React.createElement("g", { fill: "none", fillRule: "evenodd" },
+            React.createElement("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }),
+            React.createElement("path", { fill: htmlColor || '#828286', strokeWidth: strokeWidth, stroke: htmlColor || '#828286', d: "M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" }))));
+};

package/dist/Icons/index.d.ts

@@ -47,3 +47,5 @@ export { IconPencilFilled } from './IconPencilFilled/IconPencilFilled';
 export { IconDeleteFilled } from './IconDeleteFilled/IconDeleteFilled';
 export { IconShare } from './IconShare/IconShare';
 export { IconMultiselect } from './IconMultiselect/IconMultiselect';
+export { IconSearch } from './IconSearch/IconSearch';
+export { IconFilter } from './IconFilter/IconFilter';

package/dist/Icons/index.js

@@ -47,3 +47,5 @@ export { IconPencilFilled } from './IconPencilFilled/IconPencilFilled';
 export { IconDeleteFilled } from './IconDeleteFilled/IconDeleteFilled';
 export { IconShare } from './IconShare/IconShare';
 export { IconMultiselect } from './IconMultiselect/IconMultiselect';
+export { IconSearch } from './IconSearch/IconSearch';
+export { IconFilter } from './IconFilter/IconFilter';

package/dist/components/Comment/Comment.js

@@ -45,8 +45,8 @@ export const Comment = ({ id, value, style, className, username, avatar, creatio
                     React.createElement(Typography, { variant: "Body2-Medium", className: labelClasses }, username),
                     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 } })))),
+                React.createElement(IconButton, { icon: React.createElement(IconPencilFilled, null), onClick: handleEditClick, size: "sm", style: { aspectRatio: 0, width: '30px', height: '30px' } }),
+                React.createElement(IconButton, { icon: React.createElement(IconDeleteFilled, null), onClick: handleDeleteClick, size: "sm", style: { aspectRatio: 0, width: '30px', height: '30px' } })))),
         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 || '' } }))),

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

@@ -25,7 +25,7 @@
 .iconsWrapper {
 	display: flex;
 	flex-direction: row;
-	gap: 15px;
+	gap: 5px;
 }
 
 .commentWrapper {

package/dist/components/FileLoader/FileLoader.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
-import { FileLoaderProps } from '../../types';
-export declare const FileLoader: FC<FileLoaderProps>;
+import React from 'react';
+import { FileLoaderHandle, FileLoaderProps } from '../../types';
+export declare const FileLoader: React.ForwardRefExoticComponent<FileLoaderProps & React.RefAttributes<FileLoaderHandle>>;

package/dist/components/FileLoader/FileLoader.js

@@ -1,19 +1,30 @@
-import React, { useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import styles from './FileLoader.module.css';
 import { Typography } from '../Typography/Typography';
 import { IconUpload } from '../../Icons';
 import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
-export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
+export const FileLoader = forwardRef(({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, filesList = [], canAdd = true, lng = 'ru', className, style, fileValidator, progressBarWidth }) => {
+}, rejectedFormats, addedFiles, setAddedFiles, filesList = [], canAdd = true, lng = 'ru', className, style, fileValidator, progressBarWidth }, ref) => {
     const [isLoadingFiles, setIsLoadingFiles] = useState(false);
     const [loadingFilesNames, setLoadingFilesNames] = useState([]);
     const [errorFiles, setErrorFiles] = useState([]);
     const [addedFilesFormated, setAddedFilesFormatted] = useState([]);
+    useImperativeHandle(ref, () => ({
+        clearErrorFiles: () => {
+            setErrorFiles([]);
+        },
+        clearAllFiles: () => {
+            setErrorFiles([]);
+            setAddedFiles([]);
+            setAddedFilesFormatted([]);
+            setLoadingFilesNames([]);
+        }
+    }));
     const fileValidatorInner = (file) => {
         if (file.size > maxFileSize * 1024 * 1024 * 1024) {
             return {
@@ -43,7 +54,7 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
                 message: lng === 'ru' || lng.includes('ru') ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`,
             };
         }
-        if (acceptedFormats) {
+        if (acceptedFormats && !rejectedFormats) {
             const acceptedExtensions = Object.values(acceptedFormats)
                 .reduce((acc, val) => acc.concat(val), []);
             const fileParts = file.name.split('.');
@@ -59,6 +70,22 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
                 };
             }
         }
+        if (rejectedFormats) {
+            const rejectedExtensions = Object.values(rejectedFormats)
+                .reduce((acc, val) => acc.concat(val), []);
+            const fileParts = file.name.split('.');
+            const fileExtension = fileParts.length > 1
+                ? `.${fileParts.pop().toLowerCase()}`
+                : '';
+            if (rejectedExtensions.includes(fileExtension)) {
+                return {
+                    code: 'file-invalid-type',
+                    message: lng === 'ru' || lng.includes('ru')
+                        ? `Файл не должен быть одного из следующих типов: ${getAcceptedFormatsString(rejectedFormats)}`
+                        : `File must not be one of: ${getAcceptedFormatsString(rejectedFormats)}`,
+                };
+            }
+        }
         if (fileValidator) {
             const customValidationResult = fileValidator(file);
             if (customValidationResult) {
@@ -149,13 +176,15 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
     const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(FileItem, { key: file.id, file: file, error: errors[0].message, onDelete: handleDeleteRejectedFile, isRejectedFile: true })));
     // Функция для получения всех доступных форматов в виде строки
     const getAcceptedFormatsString = (acceptedFormats) => {
-        const formats = [];
+        const uniqueFormats = new Set();
         for (const key in acceptedFormats) {
             if (acceptedFormats.hasOwnProperty(key)) {
-                formats.push(...acceptedFormats[key].map((format) => format.replace('.', '')));
+                acceptedFormats[key].forEach((format) => {
+                    uniqueFormats.add(format.replace('.', ''));
+                });
             }
         }
-        return formats.join(', ');
+        return Array.from(uniqueFormats).join(', ');
     };
     useEffect(() => {
         if (addedFiles.length === 0) {
@@ -189,9 +218,9 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
                         React.createElement("br", null)))),
                 maxFileCount &&
                     (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `You can upload ${maxFileCount} ${maxFileCount > 1 ? `files` : `file`}`))))),
-        acceptedFormats &&
-            (lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `Поддерживаемые форматы: ${getAcceptedFormatsString(acceptedFormats)}`)) : (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `Supported formats: ${getAcceptedFormatsString(acceptedFormats)}`))),
+        acceptedFormats && !rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `${lng === 'ru' || lng.includes('ru') ? 'Поддерживаемые форматы:' : 'Supported formats:'} ${getAcceptedFormatsString(acceptedFormats)}`)),
+        rejectedFormats && (React.createElement(Typography, { variant: "Body2", color: "var(--grey-medium)" }, `${lng === 'ru' || lng.includes('ru') ? 'Неподдерживаемые форматы:' : 'Unsupported formats:'} ${getAcceptedFormatsString(rejectedFormats)}`)),
         (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
             acceptedFileItems,
             fileRejectionItems)) : lng === 'ru' || lng.includes('ru') ? (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B")) : (React.createElement(Typography, { variant: "Body2-SemiBold", color: "var(--grey-medium)", style: { marginTop: '5px' } }, "Files not added"))));
-};
+});

package/dist/components/IconButton/IconButton.module.css

@@ -7,6 +7,7 @@
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
+  border-radius: var(--default-border-radius, 50%);
 }
 
 .iconButton--sm svg {

package/dist/types/index.d.ts

@@ -461,6 +461,8 @@ export interface FileLoaderProps {
     maxFileCount?: number;
     /**Поддерживаемые форматы файлов */
     acceptedFormats?: Accept;
+    /** Неподдерживаемые форматы файлов */
+    rejectedFormats?: Accept;
     /**Добавленные файлы */
     addedFiles: File[];
     /**Сосотояние для добавления файлов */
@@ -480,6 +482,10 @@ export interface FileLoaderProps {
     /** Ширина прогресс бара */
     progressBarWidth?: string;
 }
+export interface FileLoaderHandle {
+    clearErrorFiles: () => void;
+    clearAllFiles: () => void;
+}
 export interface DialogProps {
     /** Флаг открытия окна */
     open: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.29",
+  "version": "22.10.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [