kamotive_ui 14.1.26 → 14.5.26

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

@@ -1,16 +1,24 @@
-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 = React.forwardRef(({ label, variant = 'fill', size = 'md', mode, style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form, className, active, }, ref) => {
+    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}`], 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) {
@@ -48,51 +56,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, 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)`,
             '--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 +77,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/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/Dialog/Dialog.module.css

@@ -24,6 +24,7 @@
     display: flex;
     flex-direction: column; 
     gap: 1rem;
+    min-height: 0;
 }
 
 .maxWidth--xs {

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, isOptionsLoading, isSearchLoading, noOptionsText, lng, multiple, limitTags, }: DropdownProps<T>) => React.JSX.Element;