kamotive_ui 1.2.1 → 1.2.3

package/dist/components/Dropdown/Dropdown.js

@@ -1,83 +1,267 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './Dropdown.module.css';
 import classNames from 'classnames';
 import { ChevronDown10 } from '../../Icons/ChevronDown/ChevronDown10';
 import { ChevronUp10 } from '../../Icons/ChevronUp/ChevronUp10';
+import { IconClose10 } from '../../Icons/IconClose/IconClose10';
 import { IconCheck10 } from '../../Icons/IconCheck/IconCheck10';
-export const DropdownListItem = ({ item, size = 'md', selectedItem, style, onChange }) => {
-    const handleItemClick = (item, disabled) => {
-        if (!disabled) {
-            onChange(item);
+;
+import { Typography } from '../Typography/Typography';
+function checkItem(item, getOptionLabel, disabled, isDivider) {
+    if (typeof item === 'object' && item !== null) {
+        //проверка на вложенные объекты с таким же типом
+        Object.keys(item).forEach((key) => {
+            const value = item[key];
+            if (typeof value === 'object' && value !== null && !React.isValidElement(value)) {
+                const nestedItem = checkItem(value, getOptionLabel, disabled, isDivider);
+                if (nestedItem) {
+                    if (!item.children) {
+                        item.children = [];
+                    }
+                    item.children.push(nestedItem);
+                    delete item[key];
+                }
+            }
+        });
+        // проверка на наличие пользовательского поля для вывода(передаваемой функции getOptionLabel)
+        if (getOptionLabel) {
+            return Object.assign(Object.assign({}, item), { value: getOptionLabel(item), disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
         }
-    };
-    const itemClassess = classNames(styles[`item-block`], styles[`button--${size}`], { [styles['item-block--selected']]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value }, { [styles['item-block--disabled']]: item.disabled });
-    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.value }, { [styles[`item-block--disabled`]]: item.disabled });
-    return (React.createElement("div", { className: styles[`item--container`] },
-        React.createElement("div", { className: itemClassess, onClick: () => handleItemClick(item, item.disabled) },
+        if ('value' in item) {
+            return Object.assign(Object.assign({}, item), { disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+        }
+        else if ('name' in item && !('value' in item)) {
+            return Object.assign(Object.assign({}, item), { value: item.name, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+        }
+        else if ('description' in item && !('value' in item)) {
+            return Object.assign(Object.assign({}, item), { value: item.description, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+        }
+        else {
+            const keys = Object.keys(item);
+            if (keys.length) {
+                const firstValue = item[keys[0]];
+                return Object.assign(Object.assign({}, item), { value: firstValue, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false });
+            }
+        }
+    }
+    else if (typeof item === 'string' || typeof item === 'number') {
+        return { value: item, disabled: disabled !== null && disabled !== void 0 ? disabled : false, isDivider: isDivider !== null && isDivider !== void 0 ? isDivider : false };
+    }
+    else {
+        return null;
+    }
+}
+export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedItem, style, onChange, isActive, activeIndex, index, }) => {
+    var _a;
+    const handleItemClick = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!(item === null || item === void 0 ? void 0 : item.disabled)) {
+            onChange(event, item);
+        }
+    }, [item, onChange]);
+    const itemContainerClasses = classNames(styles[`item--container`], { [styles['item--container--active']]: isActive });
+    const itemClassess = classNames(styles[`item-block`], styles[`button--${size}`], {
+        [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 });
+    return (React.createElement("div", { className: itemContainerClasses, onClick: handleItemClick },
+        React.createElement("div", { className: itemClassess },
             React.createElement("div", { className: itemBlock },
-                style === 'default' && item.icon && React.cloneElement(item.icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' }),
+                style === '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',
+                    }),
                 React.createElement("div", { className: styles.item },
-                    React.createElement("span", null, item.value)),
-                (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === item.value && React.createElement(IconCheck10, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: '#0D99FF' })),
-            item.isDivider && React.createElement("div", { className: styles.divider })),
-        item.children && (React.createElement("div", { className: styles.nestedMenu }, item.children.map(child => (React.createElement(DropdownListItem, { key: child.key, item: child, size: size, selectedItem: selectedItem, onChange: onChange })))))));
+                    React.createElement("span", null, item === null || item === void 0 ? void 0 : item.value)),
+                (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === (item === null || item === void 0 ? void 0 : item.value) && (React.createElement(IconCheck10, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" }))),
+            (item === null || item === void 0 ? void 0 : item.isDivider) && React.createElement("div", { className: styles.divider })),
+        (item === null || item === void 0 ? void 0 : item.children) && (React.createElement("div", { className: styles.nestedMenu }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, childIndex) => {
+            var _a;
+            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, name, label, size = 'md', disabled, className, defaultValue, items, isOpened = false, style = 'default', readOnly = false, isLeftLabel = false }) => {
+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, }) => {
     const [isOpen, setIsOpen] = useState(isOpened);
-    const [selectedItem, setSelectedItem] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const [modifiedOptions, setModifiedOptions] = useState([]);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [errorInput, setErrorInput] = useState(error);
+    const [errorInputHelperText, setErrorInputHelperText] = useState(helperText);
+    const [activeIndex, setActiveIndex] = useState(-1);
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(undefined);
-    const icon = !isOpen ? React.createElement(ChevronDown10, null) : React.createElement(ChevronUp10, null);
-    const handleToggle = () => {
-        setIsOpen(prev => !prev);
+    const handleToggle = (event) => {
+        setIsOpen((prev) => !prev);
+        if (isOpen) {
+            onClose === null || onClose === void 0 ? void 0 : onClose(event);
+        }
     };
-    const onChange = (item) => {
-        if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== item.value) {
+    const onChangeHandler = (event, item) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: item }) });
+        if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== (item === null || item === void 0 ? void 0 : item.value)) {
             setSelectedItem(item);
             setIsOpen(false);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, item);
+            onClose === null || onClose === void 0 ? void 0 : onClose(event);
+        }
+        if (item) {
+            setErrorInput(false);
         }
         else {
-            setSelectedItem(null);
+            setErrorInput(true);
         }
     };
-    const wrapperClassess = classNames(styles[`dropdown--container`], {
-        [styles['wrapper--left']]: isLeftLabel,
+    //для выбора опции из списка с клавиатуры
+    const handleKeyDown = (event) => {
+        if (!isOpen) {
+            if (event.key === 'Enter' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                event.stopPropagation();
+                setIsOpen(true);
+                setActiveIndex(0);
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                modifiedOptions && setActiveIndex((prev) => (prev < modifiedOptions.length - 1 ? prev + 1 : prev));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev));
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (activeIndex >= 0) {
+                    const selectedOption = modifiedOptions && modifiedOptions[activeIndex];
+                    onChangeHandler(event, selectedOption);
+                    setIsOpen(false);
+                    onClose === null || onClose === void 0 ? void 0 : onClose(event);
+                    setActiveIndex(-1);
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                onClose === null || onClose === void 0 ? void 0 : onClose(event);
+                setActiveIndex(-1);
+                break;
+        }
+    };
+    //для сброса выбранного значения
+    const handleReset = (event) => {
+        const startValue = defaultValue
+            ? checkItem(defaultValue)
+            : null;
+        setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, startValue !== null && startValue !== void 0 ? startValue : null);
+        onClose === null || onClose === void 0 ? void 0 : onClose(event);
+        setActiveIndex(-1);
+        if (required) {
+            setErrorInput(true);
+            setErrorInputHelperText(helperText !== null && helperText !== void 0 ? helperText : 'Поле обязательно для заполнения');
+        }
+    };
+    const wrapperClassess = classNames({
+        [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}`], {
+        [styles['button-item--selected']]: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) && !disabled,
+        [styles['button--readOnly']]: readOnly,
+        [styles['button--disabled']]: disabled,
+        [styles['button--error']]: errorInput,
     });
-    const buttonClassess = classNames(styles.button, className, 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 });
     const dropdownClassess = classNames(styles.dropdown, className, {
         [styles['dropdown--disabled']]: disabled,
     });
-    const labelClasses = classNames(styles.label, { [styles['label--default']]: !isLeftLabel,
+    const labelClasses = classNames(styles.label, styles[size], {
+        [styles['label--default']]: !isLeftLabel,
         [styles['label--left']]: isLeftLabel,
+        [styles['label--required']]: required,
+    });
+    const selectedItemClassess = classNames({
+        [styles['item-selected']]: selectedItem,
+        [styles['item-placeholder']]: !selectedItem && (placeholder !== null && placeholder !== void 0 ? placeholder : label),
+        [styles['button--icons--item-selected']]: style === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
     });
     const getDropdownMenu = () => {
-        // const menu = withPortal ? (
-        //   ReactDOM.createPortal(<DropdownMenu withPortal >{children}</DropdownMenu>, portalContainer)
-        // ) : <DropdownMenu>{children}</DropdownMenu>
-        const menu = isOpen && React.createElement("div", { className: dropdownClassess }, items.map(item => (React.createElement(DropdownListItem, { key: item.key, item: item, size: size, selectedItem: selectedItem, style: style, onChange: onChange }))));
+        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 }));
+        })) : (React.createElement("div", { className: styles['no-options'] }, noOptionsText))));
         return isOpen ? menu : null;
     };
     useEffect(() => {
+        var _a, _b, _c;
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                onClose === null || onClose === void 0 ? void 0 : onClose(event);
+            }
+        };
         if (containerRef.current) {
-            const textWidth = Math.max(name.length, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.length) || 0);
+            const text = (_a = label !== null && label !== void 0 ? label : placeholder) !== null && _a !== void 0 ? _a : '';
             let newWidth;
-            if (textWidth === name.length) {
-                const inPixel = size === 'sm' ? 11 : size === 'md' ? 12 : 14;
-                newWidth = selectedItem ? textWidth * inPixel : textWidth * inPixel;
+            if (!isLeftLabel) {
+                const textWidth = Math.max((text || '').length, (((_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === null || _b === void 0 ? void 0 : _b.toString()) || '').length);
+                const inPixel = size === 'lg' ? 11 : 9;
+                newWidth = textWidth * inPixel;
             }
             else {
-                const inPixel = size === 'sm' ? 9 : size === 'md' ? 10 : 12;
-                newWidth = textWidth * inPixel;
+                const inPixel = size === 'lg' ? 11 : 9;
+                const selectedValue = ((_c = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) === null || _c === void 0 ? void 0 : _c.toString()) || '';
+                newWidth = (text.length + selectedValue.length) * inPixel + 40;
             }
             setContainerWidth(newWidth);
         }
-    }, [selectedItem, name, isOpen, size]);
-    return (React.createElement("div", { className: wrapperClassess, ref: containerRef, style: { width: containerWidth ? `${containerWidth}px` : 'auto' } },
-        selectedItem && label && (React.createElement("label", { className: labelClasses, htmlFor: id }, label)),
-        React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled },
-            React.createElement("div", { className: style === 'default' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) ? styles[`button--default--item-selected`] : '' },
-                style === 'default' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) && React.cloneElement(selectedItem.icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' }),
-                selectedItem ? selectedItem.value : name),
-            icon && React.cloneElement(icon, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0' })),
-        getDropdownMenu()));
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [selectedItem, label, isOpen, size, placeholder, onClose, isLeftLabel]);
+    useEffect(() => {
+        if (options) {
+            const modifiedOptions = options.map((option, index) => {
+                const modifiedOption = checkItem === null || checkItem === void 0 ? void 0 : checkItem(option, getOptionLabel, disabled, isDivider);
+                if (modifiedOption && modifiedOption.value === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value)) {
+                    setActiveIndex(index);
+                }
+                return modifiedOption;
+            });
+            setModifiedOptions(modifiedOptions);
+        }
+    }, [options]);
+    useEffect(() => {
+        if (value || defaultValue) {
+            const startValue = value
+                ? checkItem(value)
+                : defaultValue
+                    ? checkItem(defaultValue)
+                    : null;
+            setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
+        }
+    }, [value, defaultValue, checkItem]);
+    return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, 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' &&
+                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
+                    React.cloneElement(selectedItem.icon, {
+                        strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
+                    }),
+                selectedItem ? selectedItem.value : (placeholder !== null && placeholder !== void 0 ? placeholder : label)),
+            clearable && !readOnly && !disabled && selectedItem && (React.createElement("div", { className: styles.resetButton },
+                React.createElement(IconClose10, { strokeWidth: "0.2", htmlColor: "var(--text-light)", onClick: handleReset }))),
+            React.createElement("div", { className: styles.dropdownIcon }, !isOpen ? (React.createElement(ChevronDown10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })) : (React.createElement(ChevronUp10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' }))),
+            getDropdownMenu()),
+        errorInput && errorInputHelperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText !== null && helperText !== void 0 ? helperText : errorInputHelperText))));
 };

package/dist/components/Dropdown/Dropdown.module.css

@@ -1,72 +1,69 @@
-.story--wrapper {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
+.dropdown--container {
+  position: relative;
+  width: 100%;
+  max-width: 260px;
 }
-.option--wrapper{
+.dropdown--container-left {
   display: flex;
+  gap: 20px;
   align-items: center;
-  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: fit-content;
+  max-width: none;
 }
-.option--icon{
-  margin-left: 8px;
+.dropdown--container-label {
+  margin-top: 20px;
 }
-.dropdown--container{
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  display: inline-block;
-  position: relative;
+.dropdown--container-helperText {
+  margin-bottom: 15px;
 }
-.wrapper--left {
+
+.option--wrapper {
   display: flex;
-  flex-direction: row;
-  gap: 20px;
   align-items: center;
-  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.option--icon {
+  margin-left: 8px;
 }
 
 .button {
-  font-family: 'Raleway';
+  font-family: var(--font-family-main);
   font-style: normal;
   font-weight: 400;
   line-height: 16.5px;
- 
   border-radius: 10px;
   cursor: pointer;
-  /* padding: 0.5em 1em; */
   padding: 10px 15px;
   transition: all 0.3s ease;
-  width: 100%;
-  /* background-color: var(--white); */
   background-color: transparent;
-  color: rgba(60, 60, 67, 0.6);
+  color: var(--text-dark);
   border: 1px solid var(--grey-light);
+  /* mix-blend-mode: multiply; */
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 20px;
   justify-content: space-between;
-  min-width: fit-content;
- 
+  /* min-width: fit-content; */
+  position: relative;
+  width: 100%;
 }
-.button:hover{
+.button:hover {
   border: 1px solid #0d9aff00;
   box-shadow: 0px 0px 2px var(--blue-main);
 }
 .button:focus,
-.button:active{
+.button:active {
   border-color: var(--blue-main);
   box-shadow: none;
-  
 }
-.button--disabled{
+.button--disabled {
   background-color: rgba(120, 120, 128, 0.08);
   border: 1px solid #0d9aff00;
   color: rgba(60, 60, 67, 0.3);
 }
-.button--readOnly{
+.button--readOnly {
   background-color: rgba(120, 120, 128, 0.08);
   border: 1px solid #0d9aff00;
   color: var(--text-dark);
@@ -76,48 +73,74 @@
 .button--disabled:active,
 .button--readOnly:hover,
 .button--readOnly:focus,
-.button--readOnly:active{
+.button--readOnly:active {
   box-shadow: none;
   border: 1px solid #0d9aff00;
 }
-.button--default--item-selected{
+.button--error {
+  border-color: var(--error-main);
+  color: var(--error-main);
+}
+.button--icons--item-selected {
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.button-item--selected{
+.button-item--selected {
   color: var(--text-dark);
 }
 
 /* Размеры кнопок */
-.button--sm {
-  /* font-size: 0.8rem; */
-  font-size: 12px; 
-}
 .button--md {
-  /* font-size: 1rem; */
-  font-size: 14px; 
+  font-size: 12px;
 }
 .button--lg {
-  /* font-size: 1.2rem; */
-  font-size: 16px; 
-}
-
-.dropdown{
- position: absolute;
-display: flex;
-margin-top: 5px;
-flex-direction: column;
-align-items: flex-start;
-padding: 10px 0px;
-max-height: 175px;
-width: 100%;
-background: #FFFFFF;
-box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
-border-radius: 12px;
-overflow-y: auto;
-z-index: 1000;
-overflow-x: hidden;
+  font-size: 14px;
+}
+.button:focus-visible {
+  outline: none;
+}
+
+.resetButton,
+.dropdownIcon {
+  position: absolute;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.resetButton{
+  right: 35px;
+}
+.dropdownIcon{
+  right: 5px;
+}
+.resetButton:hover,
+.dropdownIcon:hover {
+  background-color: rgba(120, 120, 128, 0.08);
+  border-radius: 50%;
+}
+
+.dropdown {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  display: flex;
+  margin-top: 5px;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px 0px;
+  max-height: 175px;
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  overflow-y: auto;
+  z-index: 1000;
+  overflow-x: hidden;
 }
 
 .item--container {
@@ -126,13 +149,12 @@ overflow-x: hidden;
   margin: auto;
 }
 
-.item--container:hover{
+.item--container:hover,
+.item--container--active {
   background-color: rgba(120, 120, 128, 0.08);
   border-radius: 5px;
-  width: 87%;
   margin: auto;
-  }
-
+}
 
 .item-block {
   cursor: pointer;
@@ -141,30 +163,19 @@ overflow-x: hidden;
 }
 .item-block--disabled {
   color: var(--text-light);
-  cursor: not-allowed ;
+  cursor: not-allowed;
 }
-.item-block-default,
+.item-block-icons,
 .item-block-text {
   display: grid;
   grid-template-columns: auto 1fr;
   justify-content: flex-start;
   align-items: center;
-  gap:10px;
-}
-.item-block-default--selected {
-  display: grid;
-  grid-template-columns: auto 1fr 20px;
-  justify-content: space-between;
-  align-items: center;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   gap: 10px;
-  color: var(--text-dark);
 }
-.item-block-text--selected{
+.item-block-icons--selected {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto 1fr 20px;
   justify-content: space-between;
   align-items: center;
   overflow-x: hidden;
@@ -174,24 +185,21 @@ overflow-x: hidden;
   color: var(--text-dark);
 }
 
-
-.item {  
+.item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%
+  max-width: 100%;
+  justify-self: self-start;
 }
 
 .label {
-  line-height: 14px;
-  font-weight: 400;
   transition: 0.3ms ease-out;
   /* color: var(--text-grey); */
 }
 .label--default {
-  font-size: 12px;
   position: absolute;
-  top: -20px;
+  top: -18px;
   cursor: text;
   white-space: nowrap;
   overflow: hidden;
@@ -199,9 +207,64 @@ overflow-x: hidden;
   max-width: calc(100% - 32px);
   color: var(--text-grey);
 }
+.label--default.lg {
+  font-size: 12px;
+}
+.label--default.md {
+  font-size: 10px;
+}
+
 .label--left {
-  font-size: 13px;
   color: var(--text-dark);
   min-width: fit-content;
 }
+.label--left.lg {
+  font-size: 14px;
+}
+.label--left.md {
+  font-size: 12px;
+}
+/* Стили для обязательного поля */
+.label--default.label--required {
+  position: relative;
+  top: 0;
+}
+.label--required::after {
+  content: '*';
+  color: var(--error-main);
+  position: absolute;
+  margin-left: 2px;
+  top: 2px;
+  font-size: 22px;
+}
+
+.item-selected {
+  color: var(--text-dark);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-placeholder {
+  color: var(--text-grey);
+  transition: 0.3ms ease-out;
+}
 
+.helperText.md {
+  font-size: 10px;
+}
+
+.helperText.lg {
+  font-size: 12px;
+}
+.helperText {
+  position: absolute;
+  left: 0px;
+  bottom: -17px;
+  cursor: text;
+  transition: 0.3ms ease-out;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--error-main);
+}