kamotive_ui 1.2.19 → 1.2.21

package/dist/Icons/IconEmail/IconEmail.d.ts

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

package/dist/Icons/IconEmail/IconEmail.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconEmail = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5,5H18C19.66,5 21,6.34 21,8V17C21,18.66 19.66,20 18,20H5C3.34,20 2,18.66 2,17V8C2,6.34 3.34,5 5,5M5,6C4.5,6 4.06,6.17 3.72,6.47L11.5,11.5L19.28,6.47C18.94,6.17 18.5,6 18,6H5M11.5,12.71L3.13,7.28C3.05,7.5 3,7.75 3,8V17C3,18.1 3.9,19 5,19H18C19.1,19 20,18.1 20,17V8C20,7.75 19.95,7.5 19.87,7.28L11.5,12.71Z" })));
+};

package/dist/Icons/IconEye/IconEye10.d.ts

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

package/dist/Icons/IconEye/IconEye10.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconEye10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11.5,18C15.5,18 18.96,15.78 20.74,12.5C18.96,9.22 15.5,7 11.5,7C7.5,7 4.04,9.22 2.26,12.5C4.04,15.78 7.5,18 11.5,18M11.5,6C16.06,6 20,8.65 21.86,12.5C20,16.35 16.06,19 11.5,19C6.94,19 3,16.35 1.14,12.5C3,8.65 6.94,6 11.5,6M11.5,8C14,8 16,10 16,12.5C16,15 14,17 11.5,17C9,17 7,15 7,12.5C7,10 9,8 11.5,8M11.5,9C9.57,9 8,10.57 8,12.5C8,14.43 9.57,16 11.5,16C13.43,16 15,14.43 15,12.5C15,10.57 13.43,9 11.5,9Z" })));
+};

package/dist/Icons/IconLocation/IconLocation.d.ts

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

package/dist/Icons/IconLocation/IconLocation.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconLocation = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M11.5,7C12.88,7 14,8.12 14,9.5C14,10.88 12.88,12 11.5,12C10.12,12 9,10.88 9,9.5C9,8.12 10.12,7 11.5,7M11.5,8C10.67,8 10,8.67 10,9.5C10,10.33 10.67,11 11.5,11C12.33,11 13,10.33 13,9.5C13,8.67 12.33,8 11.5,8M6.8,12.36L11.5,20.09L16.2,12.36V12.36C16.71,11.5 17,10.55 17,9.5C17,6.46 14.54,4 11.5,4C8.46,4 6,6.46 6,9.5C6,10.55 6.29,11.5 6.8,12.36V12.36M17.05,12.88L11.5,22L5.95,12.88V12.88C5.35,11.89 5,10.74 5,9.5C5,5.91 7.91,3 11.5,3C15.09,3 18,5.91 18,9.5C18,10.74 17.65,11.89 17.05,12.88V12.88Z" })));
+};

package/dist/Icons/IconPencil/IconPencil.d.ts

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

package/dist/Icons/IconPencil/IconPencil.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconPencil = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M19.71,8.04L17.37,10.37L13.62,6.62L15.96,4.29C16.35,3.9 17,3.9 17.37,4.29L19.71,6.63C20.1,7 20.1,7.65 19.71,8.04M3,17.25L13.06,7.18L16.81,10.93L6.75,21H3V17.25M16.62,5.04L15.08,6.58L17.42,8.92L18.96,7.38L16.62,5.04M15.36,11L13,8.64L4,17.66V20H6.34L15.36,11Z" })));
+};

package/dist/Icons/IconPhone/IconPhone.d.ts

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

package/dist/Icons/IconPhone/IconPhone.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconPhone = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M19.5,22C20.33,22 21,21.33 21,20.5V17C21,16.17 20.33,15.5 19.5,15.5C18.33,15.5 17.18,15.32 16.08,14.95C15.55,14.78 14.97,14.92 14.56,15.32L13.12,16.76C10.64,15.41 8.57,13.34 7.23,10.87L8.66,9.44C9.07,9.05 9.22,8.47 9.04,7.91C8.68,6.82 8.5,5.67 8.5,4.5C8.5,3.67 7.83,3 7,3H3.5C2.67,3 2,3.67 2,4.5C2,14.15 9.85,22 19.5,22M3.5,4H7C7.28,4 7.5,4.22 7.5,4.5C7.5,5.78 7.7,7.03 8.09,8.22C8.14,8.36 8.13,8.56 7.97,8.72L6,10.68C7.65,13.91 10.07,16.33 13.31,18L15.26,16.03C15.4,15.89 15.59,15.85 15.77,15.9C16.97,16.3 18.22,16.5 19.5,16.5C19.78,16.5 20,16.72 20,17V20.5C20,20.78 19.78,21 19.5,21C10.4,21 3,13.6 3,4.5C3,4.22 3.22,4 3.5,4Z" })));
+};

package/dist/Icons/index.d.ts

@@ -20,3 +20,8 @@ export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
 export { IconAdd } from './IconAdd/IconAdd';
+export { IconPhone } from './IconPhone/IconPhone';
+export { IconLocation } from './IconLocation/IconLocation';
+export { IconEmail } from './IconEmail/IconEmail';
+export { IconEye10 } from './IconEye/IconEye10';
+export { IconPencil } from './IconPencil/IconPencil';

package/dist/Icons/index.js

@@ -20,3 +20,8 @@ export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
 export { IconAdd } from './IconAdd/IconAdd';
+export { IconPhone } from './IconPhone/IconPhone';
+export { IconLocation } from './IconLocation/IconLocation';
+export { IconEmail } from './IconEmail/IconEmail';
+export { IconEye10 } from './IconEye/IconEye10';
+export { IconPencil } from './IconPencil/IconPencil';

package/dist/components/DateInput/DateInput.js

@@ -11,7 +11,7 @@ import { ChevronRight } from '../../Icons/ChevronRight/ChevronRight';
 import { ChevronLeft } from '../../Icons/ChevronLeft/ChevronLeft';
 import { Button } from '../Button/Button';
 registerLocale('ru', ru);
-const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className }, ref) => {
+const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, className, disabled = false, readOnly = false }, ref) => {
     const inputRef = useRef(null);
     const [selectedPart, setSelectedPart] = useState(null);
     const [tempInput, setTempInput] = useState('');
@@ -38,7 +38,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
     };
     const updateInputValue = (char, position) => {
         setShouldReselect(true);
-        setInput(input.substring(0, position) + char + input.substring(position + char.length));
+        if (!readOnly) {
+            setInput(input.substring(0, position) + char + input.substring(position + char.length));
+        }
     };
     const handleClick = (e) => {
         e.preventDefault();
@@ -174,7 +176,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
         }
     }, []);
     useEffect(() => {
-        setInput(value);
+        if (!readOnly) {
+            setInput(value);
+        }
     }, [value]);
     useEffect(() => {
         setTempInput('');
@@ -185,9 +189,9 @@ const CustomInput = forwardRef(({ value = '', onClick, onDateChange, onClose, cl
     useImperativeHandle(ref, () => ({
         removeSelection,
     }), [removeSelection]);
-    return (React.createElement("input", { ref: inputRef, value: input, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, readOnly: true, className: className }));
+    return (React.createElement("input", { ref: inputRef, value: input, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, readOnly: readOnly, disabled: disabled, className: className }));
 });
-export const DateInput = ({ id, label = 'Выберите дату', size = 'lg', value, style, className, disabled = false, readOnly = disabled, isLeftLabel = false, icon, error = false, helperText, onChange, onBlur, required = false, 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, minDate = new Date('1975-12-31'), maxDate = new Date('2074-12-31'), inputClassName, calendarClassName, dateFormat = 'dd.MM.yyyy', }) => {
     const wrapperClassess = classNames(styles['wrapper--input'], className, {
         [styles['wrapper--left']]: isLeftLabel,
         [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
@@ -322,7 +326,7 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
     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(IconCalendar10, null)),
-        React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: "ru", readOnly: readOnly, showPopperArrow: false, calendarClassName: classNames(styles.calendar, calendarClassName), popperClassName: styles.calendarPopper, onCalendarClose: () => setIsMonthPickerOpen(false), minDate: minDate, maxDate: maxDate, inline: false, calendarStartDay: 1, dayClassName: (date) => {
+        React.createElement(DatePicker, Object.assign({ id: id, ref: datePickerRef, selected: selectedDate, onChange: handleDateChange, onBlur: onBlur, dateFormat: dateFormat, locale: "ru", 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, dayClassName: (date) => {
                 return date.getMonth() === (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) && date.getFullYear() === (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear())
                     ? 'current-month-day'
                     : '';
@@ -331,6 +335,6 @@ export const DateInput = ({ id, label = 'Выберите дату', size = 'lg'
             : {
                 renderCustomHeader: renderCustomHeader,
                 renderDayContents: renderDayContents,
-            }), { customInput: React.createElement(CustomInput, { ref: inputRef, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker }) })),
+            }), { customInput: React.createElement(CustomInput, { ref: inputRef, className: classNames(inputClassess, inputClassName), onDateChange: handleCustomInputChange, onClose: handleCloseDatePicker, disabled: disabled, readOnly: readOnly }) })),
         error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
 };

package/dist/components/FileAttach/FileAttach.js

@@ -7,11 +7,11 @@ export const FileAttach = ({ filesList = [], maxFileSize = 2, maxFileCount = 10,
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, onDownload, onDelete, canAdd = true, canDelete = true, canDownload = true, position = 'bottom', lng = 'ru', className, style, }) => {
+}, addedFiles, setAddedFiles, onDownload, onDelete, canAdd = true, canDelete = true, canDownload = true, position = 'bottom', lng = 'ru', className, style, fileValidator, }) => {
     const fileAttachClasses = classNames(styles['fileAttach'], className, {
         [styles[`fileAttach_position_${position}`]]: position,
     });
     return (React.createElement("div", { className: fileAttachClasses, style: style },
-        React.createElement(FileLoader, { maxFileSize: maxFileSize, maxFileCount: maxFileCount, acceptedFormats: acceptedFormats, addedFiles: addedFiles, setAddedFiles: setAddedFiles, canAdd: canAdd, lng: lng }),
+        React.createElement(FileLoader, { maxFileSize: maxFileSize, maxFileCount: maxFileCount, acceptedFormats: acceptedFormats, addedFiles: addedFiles, setAddedFiles: setAddedFiles, filesList: filesList, canAdd: canAdd, lng: lng, fileValidator: fileValidator }),
         React.createElement(FileListAttaсhed, { filesList: filesList, onDelete: onDelete, onDownload: onDownload, canDelete: canDelete, canDownload: canDownload, lng: lng })));
 };

package/dist/components/FileLoader/FileLoader.js

@@ -9,12 +9,12 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, canAdd = true, lng = 'ru', className, style, }) => {
+}, addedFiles, setAddedFiles, filesList = [], canAdd = true, lng = 'ru', className, style, fileValidator }) => {
     const [isLoadingFiles, setIsLoadingFiles] = useState(false);
     const [loadingFilesNames, setLoadingFilesNames] = useState([]);
     const [errorFiles, setErrorFiles] = useState([]);
     const [addedFilesFormated, setAddedFilesFormatted] = useState([]);
-    const fileValidator = (file) => {
+    const fileValidatorInner = (file) => {
         if (file.size > maxFileSize * 1024 * 1024 * 1024) {
             return {
                 code: 'name-too-large',
@@ -23,6 +23,14 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
                     : `Maximum file size ${maxFileSize.toFixed(0)} GB`,
             };
         }
+        // Проверка на дубликаты в filesList
+        if (filesList.find((existingFile) => existingFile.filename === file.name)) {
+            return {
+                code: 'repeating-file-name',
+                message: lng === 'ru' || lng.includes('ru') ? `Файл уже существует в списке прикрепленных файлов` : `File already exists in the list of attached files`,
+            };
+        }
+        // Проверка на дубликаты в addedFiles
         if (addedFiles.find((addedFile) => addedFile.name === file.name)) {
             return {
                 code: 'repeating-file-name',
@@ -35,6 +43,12 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
                 message: lng === 'ru' || lng.includes('ru') ? `Максимальное количество файлов ${maxFileCount}` : `Maximum number of files ${maxFileCount}`,
             };
         }
+        if (fileValidator) {
+            const customValidationResult = fileValidator(file);
+            if (customValidationResult) {
+                return customValidationResult;
+            }
+        }
         return null;
     };
     const { getRootProps, getInputProps } = useDropzone({
@@ -98,7 +112,7 @@ export const FileLoader = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
                 setErrorFiles([...errorFiles, ...formattedRejections]);
             }
         },
-        validator: fileValidator,
+        validator: fileValidatorInner,
         accept: acceptedFormats,
         maxFiles: maxFileCount,
         disabled: !canAdd,

package/dist/components/FileLoader/FileLoader.module.css

@@ -39,7 +39,7 @@
   flex: 1;
   max-height: 100%;
   overflow-y: auto;
-  padding-right: 10px;
+  /* padding-right: 10px; */
   margin-top: 10px;
 }
 /* Стилизация скроллбара для WebKit (Chrome, Safari, новые версии Edge) */

package/dist/components/Tab/Tab.js

@@ -2,15 +2,16 @@ import React from 'react';
 import styles from './Tab.module.css';
 import classNames from 'classnames';
 import { Typography } from '../Typography/Typography';
-export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false }) => {
+export const Tab = ({ value, onClick, onMouseEnter, label, selected, disabled = false, style, className }) => {
     const handleClick = (e) => {
         if (onClick && value && !disabled) {
             onClick(value);
         }
     };
     return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles.tab, {
-            [styles['selected']]: selected,
-            [styles['disabled']]: disabled,
-        }), onClick: handleClick, onMouseEnter: onMouseEnter },
+            [styles.selected]: selected,
+            [styles.disabled]: disabled,
+            [className || '']: className,
+        }), onClick: handleClick, onMouseEnter: onMouseEnter, style: style },
         React.createElement(Typography, { variant: selected ? 'Body1-SemiBold' : 'Body1' }, label)));
 };

package/dist/components/Tab/Tab.module.css

@@ -1,5 +1,7 @@
 .tab {
-  width: 126px;
+  /* width: 126px; */
+  width: 100%;
+  white-space: nowrap;
   height: 24px;
   padding: 3px 10px;
   display: flex;

package/dist/components/Tabs/Tabs.js

@@ -1,7 +1,7 @@
 ;
 import React from 'react';
 import styles from './Tabs.module.css';
-export const Tabs = ({ value, onChange, children }) => {
+export const Tabs = ({ value, onChange, children, style, className }) => {
     var _a;
     const selectedTabContent = (_a = children === null || children === void 0 ? void 0 : children.find((child) => child.props.value === value)) === null || _a === void 0 ? void 0 : _a.props.children;
     const handleTabChange = (newValue) => {
@@ -10,7 +10,7 @@ export const Tabs = ({ value, onChange, children }) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist", className: styles.tabs }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
+        React.createElement("div", { role: "tablist", className: styles.tabs + ' ' + (className || ''), style: style }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
             key: index,
             selected: child.props.value === value,
             disabled: child.props.disabled,

package/dist/components/Tabs/Tabs.module.css

@@ -9,7 +9,9 @@
 }
 
 .tab {
-  width: 126px;
+  /* width: 126px; */
+  width: 100%;
+  white-space: nowrap;
   height: 24px;
   padding: 3px 10px;
   display: flex;

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChangeEventHandler, CSSProperties, ReactNode } from 'react';
 import { ETypographyVariants } from '../components/Typography/enums';
-import { Accept } from 'react-dropzone/.';
+import { Accept, FileError } from 'react-dropzone/.';
 /** @internal */
 export interface BreadcrumbProps {
     /** Обработчик клика */
@@ -315,6 +315,10 @@ export interface TabProps {
     disabled?: boolean;
     /** Табы */
     children?: React.ReactNode;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
 }
 export interface TabsProps {
     /** Табы */
@@ -323,6 +327,10 @@ export interface TabsProps {
     value?: string;
     /** Обработчик изменения значения */
     onChange?: (value: string) => void;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
 }
 export interface ColorPickerProps {
     /** Цвет выбранный пользователем */
@@ -396,6 +404,8 @@ export interface FileAttachProps {
     className?: string;
     /** Стили передаваемые напрямую */
     style?: React.CSSProperties;
+    /** Функция валидации файла */
+    fileValidator?: (file: File) => FileError | FileError[] | null;
 }
 export interface FileListAttaсhedProps {
     /** Список прикрепленных файлов */
@@ -452,12 +462,16 @@ export interface FileLoaderProps {
     setAddedFiles: (addedFiles: File[]) => void;
     /**Разрешени на добавление файлов*/
     canAdd?: boolean;
+    /** Список прикрепленных файлов */
+    filesList?: TAttachments[] | [] | undefined;
     /** Язык */
     lng?: string;
     /** Дополнительный класс */
     className?: string;
     /** Стили передаваемые напрямую */
     style?: React.CSSProperties;
+    /** Функция валидации файла */
+    fileValidator?: (file: File) => FileError | FileError[] | null;
 }
 export interface DialogProps {
     /** Флаг открытия окна */

package/package.json

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