kamotive_ui 15.1.26 → 21.1.26

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

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

package/dist/components/Dropdown/Dropdown.js

@@ -134,6 +134,9 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         }
     }, [item, onChange]);
     const hasChildren = (item === null || item === void 0 ? void 0 : item.children) && item.children.length > 0;
+    const isSelectedItem = Array.isArray(selectedItem)
+        ? selectedItem.some((i) => getComparisonValue(i, getOptionLabel) === getComparisonValue(item, getOptionLabel))
+        : getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel);
     const itemContainerClasses = classNames(styles[`item--container`], {
         [styles['item--container--active']]: isActive,
         [styles['item--container--parent']]: hasChildren && !isChild,
@@ -148,7 +151,7 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
     const itemBlock = classNames(styles[`item-block`], styles[`item-block-${variant}`], 
     // { [styles[`item-block-${variant}--selected`]]: selectedItem?.value === item?.value },
     {
-        [styles[`item-block-${variant}--selected`]]: getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel),
+        [styles[`item-block-${variant}--selected`]]: isSelectedItem,
         [styles['item-block--disabled']]: item === null || item === void 0 ? void 0 : item.disabled,
         [styles['item-block--parent']]: hasChildren && !isChild,
         [styles['item-block--child']]: isChild,
@@ -163,8 +166,7 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
                     }),
                 React.createElement("div", { className: styles.item, ref: itemRef },
                     React.createElement("span", null, getComparisonValue(item, getOptionLabel))),
-                !hasChildren &&
-                    getComparisonValue(selectedItem, getOptionLabel) === getComparisonValue(item, getOptionLabel) && (React.createElement(IconCheck, { strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0', htmlColor: "#0D99FF" }))),
+                !hasChildren && isSelectedItem && (React.createElement(IconCheck, { 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 })),
         hasChildren && (React.createElement("div", { className: styles.nestedMenu }, (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, childIndex) => {
             var _a;
@@ -172,10 +174,11 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         })))));
     return showTooltip ? (React.createElement(Tooltip, { label: ((_b = getComparisonValue(item, getOptionLabel)) === null || _b === void 0 ? void 0 : _b.toString()) || '', position: "bottom-left" }, itemContent)) : (itemContent);
 };
-export const Dropdown = ({ options, id, label, placeholder, required = false, value, defaultValue, onChange, showLoadMore = false, loadMore, getOptionLabel, variant = 'text', size = 'lg', style, className, isLeftLabel = false, isDivider = false, disabled = false, readOnly = false, isOpened = false, error = false, helperText, onClick, onBlur, onFocus, onClose, clearable = true, enableAutocomplete = false, noOptionsText = 'Нет вариантов для выбора', lng = 'ru', }) => {
+export const Dropdown = ({ options, id, label, placeholder, required = false, value, defaultValue, onChange, showLoadMore = false, loadMore, getOptionLabel, variant = 'text', size = 'lg', style, className, isLeftLabel = false, isDivider = false, disabled = false, readOnly = false, isOpened = false, error = false, helperText, onClick, onBlur, onFocus, onClose, clearable = true, enableAutocomplete = false, noOptionsText = 'Нет вариантов для выбора', lng = 'ru', multiple = false, limitTags = 1, }) => {
     const [isOpen, setIsOpen] = useState(isOpened);
     const [modifiedOptions, setModifiedOptions] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
+    const [selectedItems, setSelectedItems] = useState([]); //при множественном выборе
     const [errorInput, setErrorInput] = useState(false);
     const [errorInputHelperText, setErrorInputHelperText] = useState(helperText);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -205,9 +208,9 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         [styles['label--required']]: required,
     });
     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']]: variant === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
+        [styles['item-selected']]: selectedItem || selectedItems.length,
+        [styles['item-placeholder']]: !(selectedItem || selectedItems.length) && ((placeholder !== null && placeholder !== void 0 ? placeholder : label) || (!placeholder && !label)),
+        [styles['button--icons--item-selected']]: variant === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) && !multiple,
     });
     // обновляет значения searchValue и filteredOptions
     const setAutocompleteValues = (value) => {
@@ -248,6 +251,19 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
     const onChangeHandler = (event, item) => {
         event.preventDefault();
         event.stopPropagation();
+        if (multiple && item) {
+            setErrorInput(false);
+            setSelectedItems((selectedItems) => {
+                const isSelected = selectedItems.some((i) => getComparisonValue(i, getOptionLabel) === getComparisonValue(item, getOptionLabel));
+                const newSelectedItems = isSelected ?
+                    selectedItems.filter((i) => getComparisonValue(i, getOptionLabel) !== getComparisonValue(item, getOptionLabel)) :
+                    [...selectedItems, item];
+                const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: newSelectedItems }) });
+                onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, newSelectedItems);
+                return newSelectedItems;
+            });
+            return;
+        }
         const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: item }) });
         if (getComparisonValue(selectedItem, getOptionLabel) !== getComparisonValue(item, getOptionLabel)) {
             setSelectedItem(item);
@@ -313,18 +329,23 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                 break;
         }
     };
-    //для сброса выбранного значения
+    //для сброса выбранного значения или всех (если multiple)
     const handleReset = (event) => {
         event.preventDefault();
         event.stopPropagation();
         const startValue = defaultValue ? checkItem(defaultValue) : null;
-        setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
+        if (multiple) {
+            setSelectedItems([]);
+        }
+        else {
+            setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
+        }
         if (!enableAutocomplete) {
             setIsOpen(false);
         }
         setSearchValue('');
         setFilteredOptions(modifiedOptions);
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, startValue !== null && startValue !== void 0 ? startValue : null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, multiple ? [] : startValue !== null && startValue !== void 0 ? startValue : null);
         onClose === null || onClose === void 0 ? void 0 : onClose(event);
         setActiveIndex(-1);
         if (required) {
@@ -332,8 +353,24 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             setErrorInputHelperText((helperText !== null && helperText !== void 0 ? helperText : lng === 'ru') ? 'Поле обязательно для заполнения' : 'Field is required');
         }
     };
+    const handleResetMultipleItem = (event, item) => {
+        event.preventDefault();
+        event.stopPropagation();
+        item && setSelectedItems((selectedItems) => {
+            const newSelectedItems = selectedItems.filter((i) => getComparisonValue(i, getOptionLabel) !== getComparisonValue(item, getOptionLabel));
+            const newEvent = Object.assign(Object.assign({}, event), { currentTarget: Object.assign(Object.assign({}, event.currentTarget), { value: newSelectedItems }) });
+            onChange === null || onChange === void 0 ? void 0 : onChange(newEvent, newSelectedItems);
+            if (required && newSelectedItems.length === 0) {
+                setErrorInput(true);
+                setErrorInputHelperText((helperText !== null && helperText !== void 0 ? helperText : lng === 'ru') ? 'Поле обязательно для заполнения' : 'Field is required');
+            }
+            return newSelectedItems;
+        });
+    };
     const [showSelectedTooltip, setShowSelectedTooltip] = useState(false);
     const selectedItemRef = useRef(null);
+    const [showChipTooltip, setShowChipTooltip] = useState({});
+    const labelChipRef = useRef(new Map());
     useEffect(() => {
         const checkOverflow = () => {
             setShowSelectedTooltip(isTextOverflowing(selectedItemRef.current));
@@ -344,16 +381,71 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
             window.removeEventListener('resize', checkOverflow);
         };
     }, [getComparisonValue(selectedItem, getOptionLabel)]);
+    const recalcChipTooltips = useCallback(() => {
+        const next = {};
+        labelChipRef.current.forEach((el, key) => {
+            next[key] = !!el && isTextOverflowing(el);
+        });
+        setShowChipTooltip(next);
+    }, []);
+    useEffect(() => {
+        if (!multiple)
+            return;
+        requestAnimationFrame(() => recalcChipTooltips());
+        window.addEventListener('resize', recalcChipTooltips);
+        return () => window.removeEventListener('resize', recalcChipTooltips);
+    }, [multiple, selectedItems, limitTags, recalcChipTooltips]);
+    const getSelectedItemsText = () => {
+        if (multiple) {
+            if (selectedItems.length === 0) {
+                return '';
+            }
+            return selectedItems.map((item) => {
+                getComparisonValue(item, getOptionLabel);
+            });
+        }
+        return getComparisonValue(selectedItem, getOptionLabel);
+    };
+    const getChips = () => {
+        const visible = selectedItems.slice(0, limitTags);
+        const hidden = selectedItems.length - visible.length;
+        return (React.createElement("div", { className: styles.chipsWrap },
+            visible.map((opt) => {
+                var _a, _b;
+                const key = String((_a = getComparisonValue(opt, getOptionLabel)) !== null && _a !== void 0 ? _a : getSelectedItemsText());
+                const label = String((_b = getComparisonValue(opt, getOptionLabel)) !== null && _b !== void 0 ? _b : '');
+                const chip = (React.createElement("span", { className: styles.chip, onMouseEnter: () => requestAnimationFrame(() => recalcChipTooltips()), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    } },
+                    React.createElement("span", { className: styles.chipLabel, ref: (el) => {
+                            labelChipRef.current.set(key, el);
+                        } }, label),
+                    React.createElement("span", { className: styles.chipRemove, role: "button", tabIndex: 0, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => handleResetMultipleItem(e, opt), onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ')
+                                handleResetMultipleItem(e, opt);
+                        }, "aria-label": lng === 'ru' ? 'Удалить' : 'Remove' }, "\u00D7")));
+                return showChipTooltip[key] ? (React.createElement(Tooltip, { label: label, position: "bottom-left", style: { width: '100% !important' }, key: key }, chip)) : (chip);
+            }),
+            hidden > 0 && (React.createElement("span", { className: styles.chipMore, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                } },
+                "+",
+                hidden))));
+    };
     const getTextField = () => {
-        var _a, _b;
+        var _a, _b, _c;
+        const selectedText = getSelectedItemsText();
         const textFieldContent = (React.createElement("div", { className: selectedItemClassess, ref: selectedItemRef },
             variant === 'icons' &&
+                !multiple &&
                 (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
                 React.cloneElement(selectedItem.icon, {
                     strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
                 }),
-            isOpen && enableAutocomplete ? (React.createElement("input", { ref: inputRef, type: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: getComparisonValue(selectedItem, getOptionLabel)
-                    ? getComparisonValue(selectedItem, getOptionLabel).toString()
+            isOpen && enableAutocomplete ? (React.createElement("input", { ref: inputRef, type: "text", value: searchValue, className: styles.inlineSearchInput, onChange: handleSearchChange, placeholder: selectedText
+                    ? selectedText
                     : lng === 'ru' ? 'Поиск...' : 'Search...', onClick: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -367,16 +459,16 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
                 }, onBlur: (e) => {
                     e.stopPropagation();
                     onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                }, onKeyDown: handleKeyDown, autoFocus: true })) : selectedItem ? (getComparisonValue(selectedItem, getOptionLabel)) : (searchValue || ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : (lng === 'ru' ? 'Выберите значение' : 'Select value')))));
+                }, onKeyDown: handleKeyDown, autoFocus: true })) : multiple ? (selectedItems.length > 0 ? (getChips()) : (searchValue || ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : (lng === 'ru' ? 'Выберите значения' : 'Select values')))) : selectedItem ? (getComparisonValue(selectedItem, getOptionLabel)) : (searchValue || ((_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : (lng === 'ru' ? 'Выберите значение' : 'Select value')))));
         return showSelectedTooltip ? (React.createElement("div", { className: styles.textField },
-            React.createElement(Tooltip, { label: ((_b = getComparisonValue(selectedItem, getOptionLabel)) === null || _b === void 0 ? void 0 : _b.toString()) || '', position: "bottom-left", style: { width: '100% !important' } }, textFieldContent))) : (textFieldContent);
+            React.createElement(Tooltip, { label: ((_c = getComparisonValue(selectedItem, getOptionLabel)) === null || _c === void 0 ? void 0 : _c.toString()) || '', position: "bottom-left", style: { width: '100% !important' } }, textFieldContent))) : (textFieldContent);
     };
     const getDropdownMenu = () => {
         const optionsToRender = enableAutocomplete && searchValue ? filteredOptions : modifiedOptions;
         const menu = isOpen && (React.createElement("div", { className: dropdownClassess },
             optionsToRender && optionsToRender.length > 0 ? (optionsToRender.map((optionsToRender, index) => {
                 var _a;
-                return (React.createElement(DropdownListItem, { key: (_a = optionsToRender === null || optionsToRender === void 0 ? void 0 : optionsToRender.id) !== null && _a !== void 0 ? _a : index, item: optionsToRender, getOptionLabel: getOptionLabel, size: size, selectedItem: selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
+                return (React.createElement(DropdownListItem, { key: (_a = optionsToRender === null || optionsToRender === void 0 ? void 0 : optionsToRender.id) !== null && _a !== void 0 ? _a : index, item: optionsToRender, getOptionLabel: getOptionLabel, size: size, selectedItem: multiple ? selectedItems : selectedItem, variant: variant, onChange: onChangeHandler, isActive: activeIndex === index, activeIndex: activeIndex, index: index }));
             })) : (React.createElement("div", { className: `${styles['item-container']} ${styles['item-block']}`, style: { paddingLeft: '15px' } }, lng === 'ru' || lng.includes('ru')
                 ? noOptionsText || 'Нет вариантов для выбора'
                 : noOptionsText || 'No options to select')),
@@ -429,6 +521,14 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         }
     }, [options]);
     useEffect(() => {
+        if (multiple) {
+            if (Array.isArray(value)) {
+                setSelectedItems(value => value.map(item => checkItem(item)));
+            }
+            else {
+                setSelectedItems([]);
+            }
+        }
         if (value || defaultValue) {
             const startValue = value
                 ? checkItem(value)
@@ -440,7 +540,7 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         else {
             setSelectedItem(null);
         }
-    }, [value, defaultValue]);
+    }, [value, defaultValue, multiple]);
     useEffect(() => {
         setErrorInput(error);
     }, [error]);
@@ -452,7 +552,10 @@ export const Dropdown = ({ options, id, label, placeholder, required = false, va
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled, tabIndex: 0, onKeyDown: handleKeyDown },
             getTextField(),
             React.createElement("div", { className: styles.actionButtons },
-                clearable && !readOnly && !disabled && (selectedItem || (enableAutocomplete && searchValue)) && (React.createElement("div", { className: styles.resetButton },
+                clearable &&
+                    !readOnly &&
+                    !disabled &&
+                    (selectedItem || (multiple && selectedItems.length !== 0) || (enableAutocomplete && searchValue)) && (React.createElement("div", { className: styles.resetButton },
                     React.createElement(IconClose, { strokeWidth: "0.2", htmlColor: "var(--text-light)", onClick: handleReset }))),
                 React.createElement("div", { className: styles.dropdownIcon }, !isOpen ? (React.createElement(ChevronDown, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })) : (React.createElement(ChevronUp, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })))),
             getDropdownMenu()),

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

@@ -350,3 +350,64 @@
 .loadMore:hover {
   color: var(--blue-dark);
 }
+
+.chipsWrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--fills-active); 
+  border: 1px solid var(--icons-active);
+  color: var(--text-primary);
+  user-select: none;
+  min-width: 0;
+}
+
+.chipLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  color: var(--text-light);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.chipRemove:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.chipMore {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--text-primary);
+  font-size: 12px;
+  line-height: 16px;
+  user-select: none;
+  white-space: nowrap;
+}

package/dist/components/Tooltip/Tooltip.module.css

@@ -18,5 +18,6 @@
 }
 
 .wrapper {
-	width: 100%;
+	/* width: 100%; */
+	display: contents;
 }

package/dist/types/index.d.ts

@@ -180,7 +180,7 @@ export interface DropdownProps {
     /** Обязательное поле */
     required?: boolean;
     /** Значение */
-    value?: string | number | TOptions | null;
+    value?: string | number | TOptions | null | TOptions[];
     /** Значение по умолчанию */
     defaultValue?: string | number | TOptions | null;
     /** Callback, который будет вызван при изменении значения */
@@ -229,6 +229,10 @@ export interface DropdownProps {
     noOptionsText?: string;
     /** Язык */
     lng?: string;
+    /** Множественный выбор */
+    multiple?: boolean;
+    /** Количество видимых значений при множественном выборе */
+    limitTags?: number;
 }
 /** @internal */
 export interface TypographyProps {

package/package.json

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