kamotive_ui 1.2.4 → 1.2.5

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

@@ -8,7 +8,7 @@ export interface DropdownListItemProps {
     getOptionLabel?: ((option: TOptions) => string);
     size: 'md' | 'lg';
     selectedItem: TOptions | null;
-    style?: 'icons' | 'text';
+    variant?: 'icons' | 'text';
     onChange: (event: React.MouseEvent<HTMLElement>, item: TOptions | null) => void;
     isActive?: boolean;
     activeIndex?: number;

package/dist/components/Dropdown/Dropdown.js

@@ -51,7 +51,7 @@ function checkItem(item, getOptionLabel, disabled, isDivider) {
         return null;
     }
 }
-export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, style, onChange, isActive, activeIndex, index, }) => {
+export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, variant, onChange, isActive, activeIndex, index, }) => {
     var _a;
     const handleItemClick = useCallback((event) => {
         event.preventDefault();
@@ -65,11 +65,11 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled,
         [styles['item-block--active']]: isActive,
     });
-    const itemBlock = classNames(styles[`item-block`], styles[`item-block-${style}`], { [styles[`item-block-${style}--selected`]]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) }, { [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled });
+    const itemBlock = classNames(styles[`item-block`], styles[`item-block-${variant}`], { [styles[`item-block-${variant}--selected`]]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) }, { [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled });
     return (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick },
         React.createElement("div", { className: itemClassess },
             React.createElement("div", { className: itemBlock },
-                style === 'icons' &&
+                variant === 'icons' &&
                     (item === null || item === void 0 ? void 0 : item.icon) &&
                     React.cloneElement(item.icon, {
                         strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
@@ -83,7 +83,7 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
             return (React.createElement(DropdownListItem, { key: (_a = child === null || child === void 0 ? void 0 : child.key) !== null && _a !== void 0 ? _a : childIndex, item: child, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, onChange: onChange, isActive: activeIndex === index, activeIndex: activeIndex, index: childIndex }));
         })))));
 };
-export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOptionLabel, value, defaultValue, style = 'text', className, disabled = false, readOnly = false, isOpened = false, noOptionsText = 'Нет вариатов для выбора', isLeftLabel = false, error = false, helperText, onChange, onClose, clearable = true, required = false, isDivider = false, }) => {
+export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOptionLabel, value, defaultValue, variant = 'text', style, className, disabled = false, readOnly = false, isOpened = false, noOptionsText = 'Нет вариатов для выбора', isLeftLabel = false, error = false, helperText, onChange, onClose, clearable = true, required = false, isDivider = false, }) => {
     var _a;
     const [isOpen, setIsOpen] = useState(isOpened);
     const [modifiedOptions, setModifiedOptions] = useState([]);
@@ -170,13 +170,13 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
             setErrorInputHelperText(helperText !== null && helperText !== void 0 ? helperText : 'Поле обязательно для заполнения');
         }
     };
-    const wrapperClassess = classNames({
+    const wrapperClassess = classNames(className, {
         [styles['dropdown--container']]: !isLeftLabel,
         [styles['dropdown--container-left']]: isLeftLabel,
         [styles['dropdown--container-label']]: label && !isLeftLabel && !required,
         [styles['dropdown--container-helperText']]: errorInput,
     });
-    const buttonClassess = classNames(styles.button, className, styles[`button--${size}`], {
+    const buttonClassess = classNames(styles.button, styles[`button--${size}`], {
         [styles['button-item--selected']]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !disabled,
         [styles['button--readOnly']]: readOnly,
         [styles['button--disabled']]: disabled,
@@ -193,12 +193,12 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
     const selectedItemClassess = classNames({
         [styles['item-selected']]: selectedItem,
         [styles['item-placeholder']]: !selectedItem && ((placeholder !== null && placeholder !== void 0 ? placeholder : label) || (!placeholder && !label)),
-        [styles['button--icons--item-selected']]: style === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
+        [styles['button--icons--item-selected']]: variant === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
     });
     const getDropdownMenu = () => {
         const menu = isOpen && (React.createElement("div", { className: dropdownClassess }, modifiedOptions && modifiedOptions.length > 0 ? (modifiedOptions.map((modifiedOption, index) => {
             var _a;
-            return (React.createElement(DropdownListItem, { key: (_a = modifiedOption === null || modifiedOption === void 0 ? void 0 : modifiedOption.key) !== null && _a !== void 0 ? _a : index, item: modifiedOption, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, style: style, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
+            return (React.createElement(DropdownListItem, { key: (_a = modifiedOption === null || modifiedOption === void 0 ? void 0 : modifiedOption.key) !== null && _a !== void 0 ? _a : index, item: modifiedOption, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
         })) : (React.createElement("div", { className: styles['no-options'] }, noOptionsText))));
         return isOpen ? menu : null;
     };
@@ -258,11 +258,11 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
     useEffect(() => {
         setErrorInput(error);
     }, [error]);
-    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, style: { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' } },
+    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, style: style ? style : { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' } },
         label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled, tabIndex: 0, onKeyDown: handleKeyDown },
             React.createElement("div", { className: selectedItemClassess },
-                style === 'icons' &&
+                variant === 'icons' &&
                     (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
                     React.cloneElement(selectedItem.icon, {
                         strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',

package/dist/components/FileAttach/FileAttach.js

@@ -4,11 +4,12 @@ import styles from './FileAttach.module.css';
 import { Typography } from '../Typography/Typography';
 import { IconUpload } from '../../Icons';
 import { Loader } from '../Loader/Loader';
+import classNames from 'classnames';
 export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, disabled = false, }) => {
+}, addedFiles, setAddedFiles, disabled = false, className, style, }) => {
     const [errorFiles, setErrorFiles] = useState([]);
     const fileValidator = (file) => {
         if (file.size > maxFileSize * 1024 * 1024 * 1024) {
@@ -59,7 +60,7 @@ export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats
         }
         return formats.join(', ');
     };
-    return (React.createElement("section", { className: styles['fileAttach'] },
+    return (React.createElement("section", { className: classNames(styles['fileAttach'], className), style: style },
         React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${disabled ? styles['disabled'] : ''}` })),
             React.createElement("input", Object.assign({}, getInputProps())),
             React.createElement(IconUpload, { htmlColor: disabled ? 'var(--grey-medium)' : 'var(--icons-grey)' }),

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ import { Typography } from '../Typography/Typography';
 /**
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */
-export const Input = ({ id, label, placeholder, size = 'lg', value, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, required = false, }) => {
+export const Input = ({ id, label, placeholder, size = 'lg', value, style, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, required = false, }) => {
     const [inputLabel, setInputLabel] = useState(label);
     const handleChange = (event) => {
         event.stopPropagation();
@@ -21,12 +21,12 @@ export const Input = ({ id, label, placeholder, size = 'lg', value, className, m
             setInputLabel('');
         }
     };
-    const wrapperClassess = classNames(styles['wrapper--input'], {
+    const wrapperClassess = classNames(styles['wrapper--input'], className, {
         [styles['wrapper--left']]: isLeftLabel,
         [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
         [styles['wrapper--input-helperText']]: error,
     });
-    const inputClassess = classNames(styles.input, styles[size], className, {
+    const inputClassess = classNames(styles.input, styles[size], {
         [styles['input--error']]: error,
         [styles['readOnly']]: readOnly,
         [styles['input--withIcon']]: icon,
@@ -40,7 +40,7 @@ export const Input = ({ id, label, placeholder, size = 'lg', value, className, m
         [styles['label--left']]: isLeftLabel,
         [styles['label--required']]: required,
     });
-    return (React.createElement("div", { className: wrapperClassess },
+    return (React.createElement("div", { className: wrapperClassess, style: style },
         inputLabel && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, inputLabel)),
         icon && React.createElement("div", { className: styles.icon }, icon),
         multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, style: { height: `${rows * 20}px` } })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly })),

package/dist/types/index.d.ts

@@ -45,6 +45,8 @@ export interface InputProps {
     size?: 'sm' | 'md' | 'lg';
     /** Знчение */
     value?: string;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
     /** Дополнительный класс */
     className?: string;
     /** Многострочное поле */
@@ -134,8 +136,10 @@ export interface DropdownProps {
     value?: string | number | TOptions | null;
     /** Значение по умолчанию */
     defaultValue?: string | number | TOptions | null;
-    /** Стиль выпадающего списка(текст+иконка, текст) */
-    style?: 'icons' | 'text';
+    /** Вариaнты выпадающего списка(текст + иконка, текст)' */
+    variant?: 'icons' | 'text';
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
     /**Дополнительный класс */
     className?: string;
     /** Заблокированный */
@@ -307,4 +311,8 @@ export interface FileAttachProps {
     setAddedFiles: (addedFiles: File[]) => void;
     /**Заблокировано добавление файлов*/
     disabled?: boolean;
+    /** Дополнительный класс */
+    className?: string;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
 }

package/package.json

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