@ozen-ui/kit 0.57.0 → 0.58.0

package/__inner__/esm/components/AutocompleteNext/Autocomplete.js

@@ -0,0 +1,213 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import './Autocomplete.css';
+import React, { useEffect, forwardRef, useRef, useState } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useElementSize } from '../../hooks/useElementSize';
+import { useMultiRef } from '../../hooks/useMultiRef';
+import { useMutableRef } from '../../hooks/useMutableRef';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { isKeys } from '../../utils/isKeys';
+import { AutocompleteDropdown, AutocompleteInput } from './components';
+import { AUTOCOMPLETE_DEFAULT_SIZE, AUTOCOMPLETE_DEFAULT_DISABLED, AUTOCOMPLETE_DEFAULT_REQUIRED, AUTOCOMPLETE_DEFAULT_AUTOFOCUS, AUTOCOMPLETE_DEFAULT_FULLWIDTH, AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE, AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON, AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT, AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST, } from './constants';
+import { withDefaultGetters, isMultipleParams, isNotMultipleParams, } from './helpers';
+export var cnAutocomplete = cn('AutocompleteNext');
+function AutocompleteRender(inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'AutocompleteNext',
+    });
+    var _a = withDefaultGetters(props), _b = _a.disabled, disabled = _b === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLED : _b, _c = _a.required, required = _c === void 0 ? AUTOCOMPLETE_DEFAULT_REQUIRED : _c, _d = _a.autoFocus, autoFocus = _d === void 0 ? AUTOCOMPLETE_DEFAULT_AUTOFOCUS : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? AUTOCOMPLETE_DEFAULT_FULLWIDTH : _e, _f = _a.size, size = _f === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _f, _g = _a.allowCustomValue, allowCustomValue = _g === void 0 ? AUTOCOMPLETE_DEFAULT_ALLOW_CUSTOM_VALUE : _g, _h = _a.disableShowChevron, disableShowChevron = _h === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_CHEVRON : _h, _j = _a.disableClearButton, disableClearButton = _j === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLEAR_BUTTON : _j, _k = _a.disableCloseOnSelect, disableCloseOnSelect = _k === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_CLOSE_ON_SELECT : _k, _l = _a.disableShowEmptyOptionsList, disableShowEmptyOptionsList = _l === void 0 ? AUTOCOMPLETE_DEFAULT_DISABLE_SHOW_EMPTY_OPTIONS_LIST : _l, limitTags = _a.limitTags, renderInput = _a.renderInput, multiple = _a.multiple, searchFunctionProp = _a.searchFunction, inputValueProp = _a.inputValue, valueProp = _a.value, options = _a.options, defaultValue = _a.defaultValue, onInputChange = _a.onInputChange, getOptionKey = _a.getOptionKey, getOptionLabel = _a.getOptionLabel, getOptionDisabled = _a.getOptionDisabled, onCloseProp = _a.onClose, onOpenProp = _a.onOpen, openProp = _a.open, defaultOpen = _a.defaultOpen, loading = _a.loading, inputProps = _a.inputProps, bodyProps = _a.bodyProps, onKeyDown = _a.onKeyDown, noOptionsText = _a.noOptionsText, clearText = _a.clearText, openText = _a.openText, renderOption = _a.renderOption, loadingText = _a.loadingText, closeText = _a.closeText, listProps = _a.listProps, popoverProps = _a.popoverProps, onChangeProp = _a.onChange, other = __rest(_a, ["disabled", "required", "autoFocus", "fullWidth", "size", "allowCustomValue", "disableShowChevron", "disableClearButton", "disableCloseOnSelect", "disableShowEmptyOptionsList", "limitTags", "renderInput", "multiple", "searchFunction", "inputValue", "value", "options", "defaultValue", "onInputChange", "getOptionKey", "getOptionLabel", "getOptionDisabled", "onClose", "onOpen", "open", "defaultOpen", "loading", "inputProps", "bodyProps", "onKeyDown", "noOptionsText", "clearText", "openText", "renderOption", "loadingText", "closeText", "listProps", "popoverProps", "onChange"]);
+    var _m = useElementSize(), inputRef = _m.ref, height = _m.height;
+    var lastInputValue = useRef('');
+    var anchorRef = useRef(null);
+    var inputBodyRef = useMultiRef([anchorRef, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref]);
+    var rootRef = useMultiRef([ref, inputRef]);
+    var _o = __read(useControlled({
+        value: inputValueProp,
+        defaultValue: '',
+        name: 'AutocompleteNext',
+        state: 'inputValue',
+    }), 2), inputValue = _o[0], setInputValue = _o[1];
+    var _p = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'AutocompleteNext',
+        state: 'value',
+    }), 2), valueState = _p[0], setValueState = _p[1];
+    var _q = __read(useControlled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'AutocompleteNext',
+        state: 'open',
+    }), 2), open = _q[0], setOpen = _q[1];
+    var searchFunctionDefault = function (options, searchValue) {
+        return options === null || options === void 0 ? void 0 : options.filter(function (option) {
+            return getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase());
+        });
+    };
+    var savedOnInputChange = useMutableRef(onInputChange);
+    var savedGetOptionLabel = useMutableRef(getOptionLabel);
+    var _r = __read(useState(__spreadArray([], __read(options), false)), 2), filteredOptions = _r[0], setFilteredOptions = _r[1];
+    var searchFunction = searchFunctionProp || searchFunctionDefault;
+    var hasOptions = !!(filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length);
+    var _s = __read(useState(undefined), 2), search = _s[0], setSearch = _s[1];
+    var changeInputValue = function (e, value) {
+        var _a;
+        setInputValue(value);
+        (_a = savedOnInputChange.current) === null || _a === void 0 ? void 0 : _a.call(savedOnInputChange, e, value);
+    };
+    var callOnChange = function (e, option) {
+        var _a, _b, _c;
+        var inputValue = '';
+        var onChange = function (e, option) {
+            setValueState(option);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e, option);
+        };
+        var params = __assign(__assign({}, inProps), { onChange: onChange, value: valueState });
+        if (isNotMultipleParams(params)) {
+            inputValue = option ? getOptionLabel(option) : '';
+            (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, e, option);
+        }
+        if (isMultipleParams(params)) {
+            if (option === null) {
+                (_b = params.onChange) === null || _b === void 0 ? void 0 : _b.call(params, e, null);
+            }
+            else {
+                var value = params.value || [];
+                var optionKey_1 = option && getOptionKey(option);
+                var optionIsSelected = value.find(function (item) { return getOptionKey(item) === optionKey_1; });
+                // eslint-disable-next-line no-nested-ternary
+                var res = optionIsSelected
+                    ? value.filter(function (option) { return getOptionKey(option) !== optionKey_1; })
+                    : option
+                        ? __spreadArray(__spreadArray([], __read(value), false), [option], false) : value;
+                (_c = params.onChange) === null || _c === void 0 ? void 0 : _c.call(params, e, res);
+            }
+            setSearch(undefined);
+        }
+        changeInputValue(null, inputValue);
+    };
+    /** Эффект — фильтрация списка при изменении опций */
+    useEffect(function () {
+        if (!open)
+            return;
+        setFilteredOptions(search ? search(options) : __spreadArray([], __read(options), false));
+    }, [search, options, open, searchFunctionProp]);
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    useEffect(function () {
+        var _a;
+        if (allowCustomValue || multiple)
+            return;
+        var value = valueState || '';
+        var params = __assign(__assign({}, inProps), { value: value });
+        if (isNotMultipleParams(params)) {
+            lastInputValue.current = (_a = savedGetOptionLabel.current) === null || _a === void 0 ? void 0 : _a.call(savedGetOptionLabel, params.value);
+            if (lastInputValue.current !== inputValue)
+                changeInputValue(null, lastInputValue.current);
+        }
+    }, [valueState, allowCustomValue]);
+    /** Эффект — автофокусировка в текстовом поле */
+    useEffect(function () {
+        var _a;
+        if (autoFocus)
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [autoFocus]);
+    /** Ждём выполнения анимации на закрытие и делаем сброс функции фильтрации */
+    var handleExited = function () {
+        var _a;
+        setSearch(undefined);
+        (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
+    };
+    /** Закрытие */
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    /** Открытие */
+    var handleOpen = function () {
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    /** Переключатель открытия и закрытия */
+    var handleToggle = function () {
+        if (disabled)
+            return;
+        if (open)
+            handleClose();
+        else
+            handleOpen();
+    };
+    /** Очистка поля */
+    var handleClear = function (e) {
+        callOnChange(e, null);
+        setSearch(undefined);
+    };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (allowCustomValue)
+            return;
+        if (inputValue !== lastInputValue.current) {
+            changeInputValue(null, lastInputValue.current);
+        }
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInput = function (e) {
+        var _a;
+        handleToggle();
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (e) {
+        if (isKeys(e, ['ArrowDown', 'ArrowUp']) && !open) {
+            e.preventDefault();
+            handleToggle();
+        }
+        var params = __assign(__assign({}, inProps), { value: valueState });
+        if (isMultipleParams(params) && isKeys(e, ['Backspace']) && !inputValue) {
+            var value = params.value;
+            if (value)
+                callOnChange(e, value[value.length - 1] || null);
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        var value = e.target.value;
+        // Открываем список при вводе первого символа (при условии, что список еще не открыт)
+        if (value.length && !open)
+            handleOpen();
+        if (multiple)
+            changeInputValue(e, value);
+        if (value && !multiple)
+            changeInputValue(e, value);
+        if (!value && !multiple)
+            callOnChange(e, null);
+        // Задаем функцию фильтрации
+        setSearch(function () { return function (options) { return searchFunction(__spreadArray([], __read(options), false), value); }; });
+    };
+    /** Событие выбора значения из раскрывающегося списка */
+    var handleChangeDropdown = function (e, option) {
+        callOnChange(e, option);
+        // Закрываем список после выбора
+        if (!disableCloseOnSelect)
+            handleClose();
+    };
+    var autocompleteInputProps = __assign({ open: open, size: size, limitTags: limitTags, disabled: disabled, multiple: multiple, required: required, fullWidth: fullWidth, clearText: clearText, closeText: closeText, openText: openText, inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: __assign(__assign({}, bodyProps), { ref: inputBodyRef }), renderInput: renderInput, getOptionKey: getOptionKey, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, value: inputValue, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton, onClear: handleClear, onOpen: handleToggle, onRemoveTag: callOnChange, onKeyDown: handleKeyDown, onChange: handleChangeInput, selectedOptions: valueState }, other);
+    var update = useRef();
+    var setUpdate = function (func) {
+        if (func) {
+            update.current = func;
+        }
+    };
+    useEffect(function () {
+        var _a;
+        (_a = update.current) === null || _a === void 0 ? void 0 : _a.call(update);
+    }, [height]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AutocompleteInput, __assign({}, autocompleteInputProps, { ref: rootRef })),
+        React.createElement(AutocompleteDropdown, { open: open, size: size, loading: loading, setUpdate: setUpdate, value: valueState, multiple: multiple, onClose: handleClose, listProps: listProps, anchorRef: anchorRef, hasOptions: hasOptions, options: filteredOptions, loadingText: loadingText, renderOption: renderOption, getOptionKey: getOptionKey, noOptionsText: noOptionsText, onChange: handleChangeDropdown, getOptionLabel: getOptionLabel, getOptionDisabled: getOptionDisabled, disableShowEmptyOptionsList: disableShowEmptyOptionsList, popoverProps: __assign(__assign({}, popoverProps), { onExited: handleExited }) })));
+}
+export var Autocomplete = forwardRef(AutocompleteRender);

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/AutocompleteDropdown.d.ts

@@ -0,0 +1,2 @@
+import type { AutocompleteDropdownComponent } from './index';
+export declare const AutocompleteDropdown: AutocompleteDropdownComponent;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/AutocompleteDropdown.js

@@ -0,0 +1,153 @@
+import { __assign } from "tslib";
+import React, { useEffect, useRef, useMemo, forwardRef } from 'react';
+import { useEventListener } from '../../../../hooks/useEventListener';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { usePrevious } from '../../../../hooks/usePrevious';
+import { getPaperSizeToFormElement } from '../../../../utils/getPaperSizeToFormElement';
+import { isKey } from '../../../../utils/isKey';
+import { isNotNil } from '../../../../utils/isNotNil';
+import { scrollContainerToElement } from '../../../../utils/scrollContainerToElement';
+import { List, ListItem, ListItemText } from '../../../List';
+import { Paper } from '../../../Paper';
+import { Popover } from '../../../Popover';
+import { cnAutocomplete } from '../../index';
+import { AutocompleteDropdownCheckIcon, AutocompleteDropdownLoading, AutocompleteDropdownNoOptions, } from './components';
+import { AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE } from './constants';
+import { isMultipleParams, isNotMultipleParams, normalizeOptions, } from './helpers';
+import { useDataListNavigation } from './utils';
+var AutocompleteDropdownRender = function (inProps, ref) {
+    var _a = inProps.size, size = _a === void 0 ? AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE : _a, open = inProps.open, loading = inProps.loading, onClose = inProps.onClose, options = inProps.options, onChange = inProps.onChange, anchorRef = inProps.anchorRef, className = inProps.className, listProps = inProps.listProps, hasOptions = inProps.hasOptions, loadingText = inProps.loadingText, popoverProps = inProps.popoverProps, getOptionKey = inProps.getOptionKey, noOptionsText = inProps.noOptionsText, getOptionLabel = inProps.getOptionLabel, getOptionDisabled = inProps.getOptionDisabled, disableShowEmptyOptionsList = inProps.disableShowEmptyOptionsList, setUpdate = inProps.setUpdate, renderOptionProp = inProps.renderOption;
+    var radius = getPaperSizeToFormElement(size);
+    var showNoOptions = !hasOptions && !loading && !disableShowEmptyOptionsList;
+    var showLoading = !hasOptions && !!loading;
+    var rootRef = useRef(null);
+    var listRef = useRef(null);
+    var _b = useMemo(function () { return normalizeOptions(options, getOptionKey, getOptionDisabled); }, [options, getOptionKey, getOptionDisabled]), entities = _b.entities, items = _b.idxs;
+    // Определяет последнюю выбранную опцию
+    var lastSelected = useMemo(function () {
+        var _a, _b;
+        if (isNotMultipleParams(inProps)) {
+            var value = inProps.value;
+            var key = value && getOptionKey(value);
+            return key && ((_a = entities.byKey[key]) === null || _a === void 0 ? void 0 : _a.idx);
+        }
+        if (isMultipleParams(inProps)) {
+            var value = inProps.value;
+            var lastValue = value === null || value === void 0 ? void 0 : value[value.length - 1];
+            var lastKey = lastValue && getOptionKey(lastValue);
+            return lastKey && ((_b = entities.byKey[lastKey]) === null || _b === void 0 ? void 0 : _b.idx);
+        }
+        return undefined;
+    }, [inProps, entities]);
+    // Навигация по списку
+    var _c = useDataListNavigation({
+        items: items,
+        active: open,
+        selected: lastSelected,
+        onSelect: function (event, idx) {
+            var _a;
+            var option = isNotNil(idx) ? (_a = entities.byIdx[idx]) === null || _a === void 0 ? void 0 : _a.option : undefined;
+            if (option)
+                onChange === null || onChange === void 0 ? void 0 : onChange(event, option);
+        },
+    }), current = _c.current, focused = _c.focused, onKeyDown = _c.onKeyDown, onClick = _c.onClick;
+    var previousCurrent = usePrevious(current);
+    useEffect(function () {
+        var _a, _b;
+        var firstCurrent = !isNotNil(previousCurrent) && isNotNil(current) ? current : undefined;
+        var selected = focused !== null && focused !== void 0 ? focused : firstCurrent;
+        if (selected !== undefined) {
+            // Прокрутка списка
+            scrollContainerToElement({
+                container: rootRef.current,
+                element: (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[+selected],
+                behavior: isNotNil(focused) ? 'smooth' : 'instant',
+            });
+        }
+    }, [focused, current]);
+    // Назначает элементу контроля событие управления списком с клавиатуры
+    useEventListener({
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) { return onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event); },
+    });
+    // Закрывает список по нажатию на клавишу {Tab}
+    useEventListener({
+        active: open,
+        eventName: 'keydown',
+        element: anchorRef,
+        handler: function (event) {
+            if (isKey(event, 'Tab'))
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
+    });
+    var handleOnMouseDownList = function (e) {
+        var _a;
+        e.preventDefault();
+        (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+    };
+    /** Отображение опций */
+    var renderOptionDefault = function (_a) {
+        var props = _a.props, option = _a.option, selected = _a.state.selected;
+        return (React.createElement(ListItem, __assign({}, props),
+            React.createElement(ListItemText, { primary: getOptionLabel(option) }),
+            React.createElement(AutocompleteDropdownCheckIcon, { selected: selected })));
+    };
+    var renderOption = renderOptionProp || renderOptionDefault;
+    // Представление раскрывающегося списка
+    var renderChildren = useMemo(function () {
+        return options.map(function (option, idx) {
+            var isSelected;
+            var key = getOptionKey === null || getOptionKey === void 0 ? void 0 : getOptionKey(option);
+            var isFocused = idx === focused;
+            var isDisabled = getOptionDisabled(option);
+            if (isNotMultipleParams(inProps)) {
+                var value = inProps.value;
+                if (value)
+                    isSelected = getOptionKey(value) === key;
+            }
+            if (isMultipleParams(inProps) && Array.isArray(inProps.value)) {
+                var value = inProps.value;
+                isSelected = !!value.find(function (option) { return getOptionKey(option) === key; });
+            }
+            return renderOption({
+                option: option,
+                state: {
+                    key: key,
+                    focused: isFocused,
+                    selected: isSelected,
+                    disabled: isDisabled,
+                },
+                props: {
+                    key: "".concat(idx, "_").concat(key),
+                    role: 'option',
+                    'aria-selected': isSelected,
+                    'aria-disabled': isDisabled,
+                    className: cnAutocomplete('Option', {
+                        disabled: isDisabled,
+                        selected: isSelected,
+                        focused: isFocused,
+                    }),
+                    onClick: function (e) {
+                        if (isDisabled)
+                            return;
+                        onClick === null || onClick === void 0 ? void 0 : onClick(e, idx);
+                    },
+                },
+            });
+        });
+    }, [
+        options,
+        focused,
+        renderOption,
+        getOptionKey,
+        lastSelected,
+        getOptionDisabled,
+    ]);
+    return (React.createElement(Popover, __assign({ offset: [0, 4], strategy: "absolute", placement: "bottom-start", setUpdate: setUpdate, as: Paper, transitionProps: { classNames: 'AutocompleteNext-Dropdown-animation' }, className: cnAutocomplete('Dropdown', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true }, popoverProps, { open: open, radius: radius, onClose: onClose, anchorRef: anchorRef, ref: useMultiRef([ref, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.ref, rootRef]) }),
+        React.createElement(List, __assign({ size: size, role: "listbox" }, listProps, { onMouseDown: handleOnMouseDownList, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]) }),
+            renderChildren,
+            React.createElement(AutocompleteDropdownNoOptions, { showNoOptions: showNoOptions, noOptionsText: noOptionsText }),
+            React.createElement(AutocompleteDropdownLoading, { showLoading: showLoading, loadingText: loadingText, size: size }))));
+};
+export var AutocompleteDropdown = forwardRef(AutocompleteDropdownRender);

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.css

@@ -0,0 +1,7 @@
+.AutocompleteDropdownCheckIcon {
+  visibility: hidden;
+}
+
+  .AutocompleteDropdownCheckIcon_selected {
+    visibility: visible;
+  }

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.d.ts

@@ -0,0 +1,6 @@
+import './AutocompleteDropdownCheckIcon.css';
+import type { FC } from 'react';
+export type AutocompleteDropdownCheckIconProps = {
+    selected?: boolean;
+};
+export declare const AutocompleteDropdownCheckIcon: FC<AutocompleteDropdownCheckIconProps>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/AutocompleteDropdownCheckIcon.js

@@ -0,0 +1,13 @@
+import './AutocompleteDropdownCheckIcon.css';
+import React from 'react';
+import { CheckIcon } from '@ozen-ui/icons';
+import { cn } from '../../../../../../utils/classname';
+import { getIconSizeToFormElement } from '../../../../../../utils/getIconSizeToFormElement';
+import { ListItemIcon, useListContext } from '../../../../../List';
+var cnAutocompleteDropdownCheckIcon = cn('AutocompleteDropdownCheckIcon');
+export var AutocompleteDropdownCheckIcon = function (_a) {
+    var selected = _a.selected;
+    var size = useListContext().size;
+    return (React.createElement(ListItemIcon, { className: cnAutocompleteDropdownCheckIcon({ selected: selected }) },
+        React.createElement(CheckIcon, { size: getIconSizeToFormElement(size) })));
+};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownCheckIcon';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownCheckIcon/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownCheckIcon';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/AutocompleteDropdownLoading.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { AutocompleteProps } from '../../../../index';
+export type AutocompleteDropdownLoadingProps = Pick<AutocompleteProps, 'loadingText' | 'size'> & {
+    showLoading: boolean;
+};
+export declare const AutocompleteDropdownLoading: FC<AutocompleteDropdownLoadingProps>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/AutocompleteDropdownLoading.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { getIconSizeToFormElement } from '../../../../../../utils/getIconSizeToFormElement';
+import { isNumber } from '../../../../../../utils/isNumber';
+import { isString } from '../../../../../../utils/isString';
+import { ListItem, ListItemIcon, ListItemText } from '../../../../../List';
+import { Loader } from '../../../../../Loader';
+import { AUTOCOMPLETE_DEFAULT_SIZE } from '../../../../constants';
+export var AutocompleteDropdownLoading = function (_a) {
+    var _b = _a.size, sizeProp = _b === void 0 ? AUTOCOMPLETE_DEFAULT_SIZE : _b, showLoading = _a.showLoading, loadingText = _a.loadingText;
+    if (!showLoading) {
+        return null;
+    }
+    var size = getIconSizeToFormElement(sizeProp);
+    return isString(loadingText) || isNumber(loadingText) ? (React.createElement(ListItem, null,
+        React.createElement(ListItemIcon, null,
+            React.createElement(Loader, { size: size })),
+        React.createElement(ListItemText, { primary: loadingText }))) : (loadingText);
+};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownLoading';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownLoading/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownLoading';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/AutocompleteDropdownNoOptions.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { AutocompleteProps } from '../../../../index';
+export type AutocompleteDropdownNoOptionsProps = Pick<AutocompleteProps, 'noOptionsText'> & {
+    showNoOptions: boolean;
+};
+export declare const AutocompleteDropdownNoOptions: FC<AutocompleteDropdownNoOptionsProps>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/AutocompleteDropdownNoOptions.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { isNumber } from '../../../../../../utils/isNumber';
+import { isString } from '../../../../../../utils/isString';
+import { ListItem, ListItemText } from '../../../../../List';
+export var AutocompleteDropdownNoOptions = function (_a) {
+    var showNoOptions = _a.showNoOptions, noOptionsText = _a.noOptionsText;
+    if (!showNoOptions) {
+        return null;
+    }
+    return isString(noOptionsText) || isNumber(noOptionsText) ? (React.createElement(ListItem, null,
+        React.createElement(ListItemText, { primary: noOptionsText }))) : (noOptionsText);
+};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/index.d.ts

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownNoOptions';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/AutocompleteDropdownNoOptions/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteDropdownNoOptions';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AutocompleteDropdownLoading';
+export * from './AutocompleteDropdownNoOptions';
+export * from './AutocompleteDropdownCheckIcon';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/components/index.js

@@ -0,0 +1,3 @@
+export * from './AutocompleteDropdownLoading';
+export * from './AutocompleteDropdownNoOptions';
+export * from './AutocompleteDropdownCheckIcon';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE = "m";
+export declare const AUTOCOMPLETE_DROPDOWN_DEFAULT_OPEN = false;
+export declare const AUTOCOMPLETE_DROPDOWN_OPTION_DEFAULT_DISABLED = false;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/constants.js

@@ -0,0 +1,3 @@
+export var AUTOCOMPLETE_DROPDOWN_DEFAULT_SIZE = 'm';
+export var AUTOCOMPLETE_DROPDOWN_DEFAULT_OPEN = false;
+export var AUTOCOMPLETE_DROPDOWN_OPTION_DEFAULT_DISABLED = false;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/helpers.d.ts

@@ -0,0 +1,17 @@
+import type { AutocompleteDropdownProps } from './types';
+export declare const isMultipleParams: <OPTION>(params: AutocompleteDropdownProps<OPTION, boolean>) => params is AutocompleteDropdownProps<OPTION, true>;
+export declare const isNotMultipleParams: <OPTION>(params: AutocompleteDropdownProps<OPTION, boolean>) => params is AutocompleteDropdownProps<OPTION, false>;
+export type NormalizedOptions<OPTION> = {
+    entities: {
+        byIdx: Record<string | number, {
+            option: OPTION;
+            key: string | number;
+        }>;
+        byKey: Record<string | number, {
+            option: OPTION;
+            idx: string | number;
+        }>;
+    };
+    idxs: (string | number)[];
+};
+export declare function normalizeOptions<OPTION>(options: OPTION[], getOptionKey: (option: OPTION) => string | number, getOptionDisabled: (option: OPTION) => boolean | undefined): NormalizedOptions<OPTION>;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/helpers.js

@@ -0,0 +1,30 @@
+import { __values } from "tslib";
+export var isMultipleParams = function (params) { return !!params.multiple; };
+export var isNotMultipleParams = function (params) { return !params.multiple; };
+export function normalizeOptions(options, getOptionKey, getOptionDisabled) {
+    var e_1, _a;
+    var idx = 0;
+    var res = {
+        idxs: [],
+        entities: { byIdx: {}, byKey: {} },
+    };
+    try {
+        for (var options_1 = __values(options), options_1_1 = options_1.next(); !options_1_1.done; options_1_1 = options_1.next()) {
+            var option = options_1_1.value;
+            var key = getOptionKey(option);
+            res.entities.byIdx[idx] = { option: option, key: key };
+            res.entities.byKey[key] = { option: option, idx: idx };
+            if (!getOptionDisabled(option))
+                res.idxs.push(idx);
+            idx += 1;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (options_1_1 && !options_1_1.done && (_a = options_1.return)) _a.call(options_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return res;
+}

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AutocompleteDropdown';
+export * from './components';
+export * from './types';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/index.js

@@ -0,0 +1,3 @@
+export * from './AutocompleteDropdown';
+export * from './components';
+export * from './types';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/types.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode, ReactElement, SyntheticEvent } from 'react';
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { ListProps } from '../../../List';
+import type { PopoverProps, PopoverRef } from '../../../Popover';
+import type { AutocompletePropValue, AutocompletePropRenderOption, AutocompletePropGetOptionKey, AutocompleteDefaultOption, AutocompletePropGetOptionDisabled, AutocompletePropGetOptionLabel } from '../../index';
+export type AutocompleteDropdownRef = PopoverRef;
+export type AutocompleteDropdownOnChange<OPTION> = (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
+export type AutocompleteDropdownProps<OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false> = {
+    /** Имя списка */
+    name?: string;
+    /** Содержимое компонента */
+    children?: never;
+    /** Если {true} из списка можно выбрать несколько вариантов */
+    multiple?: MULTIPLE;
+    /** Список вариантов выбора (опции) */
+    options: OPTION[];
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Выбранное значение опции */
+    value?: AutocompletePropValue<OPTION, MULTIPLE>;
+    /** Функция обратного вызова, которая будет вызвана при выборе значения */
+    onChange?: AutocompleteDropdownOnChange<OPTION>;
+    /** Функция для кастомизации отображения опции */
+    renderOption?: AutocompletePropRenderOption<OPTION>;
+    /** Функция для определения уникального ключа элемента */
+    getOptionKey: AutocompletePropGetOptionKey<OPTION>;
+    /** Функция для определения названия элемента */
+    getOptionLabel: AutocompletePropGetOptionLabel<OPTION>;
+    /** Функция для определения заблокированного элемента */
+    getOptionDisabled: AutocompletePropGetOptionDisabled<OPTION>;
+    /** Если {true} не показывает список с отсутствующими опциями */
+    disableShowEmptyOptionsList?: boolean;
+    /** Текст компонента в состоянии загрузки */
+    loadingText?: ReactNode;
+    /** Текст компонента при отсутствующих опций */
+    noOptionsText?: ReactNode;
+    /** Свойства компонента Popover */
+    popoverProps?: Partial<Omit<PopoverProps, 'children' | 'open' | 'anchorRef' | 'onClose' | 'className'>>;
+    /** Свойства компонента List */
+    listProps?: Partial<Omit<ListProps, 'children'>>;
+    loading?: boolean;
+    hasOptions?: boolean;
+    'data-testid'?: string;
+} & Pick<PopoverProps, 'open' | 'anchorRef' | 'onClose' | 'className' | 'setUpdate'>;
+export type AutocompleteDropdownComponent = <OPTION = AutocompleteDefaultOption, MULTIPLE extends boolean = false>(props: AutocompleteDropdownProps<OPTION, MULTIPLE>) => ReactElement | null;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDataListNavigation';
+export * from './useScrollContainerToElement';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/index.js

@@ -0,0 +1,2 @@
+export * from './useDataListNavigation';
+export * from './useScrollContainerToElement';

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteDropdown/utils/useDataListNavigation.d.ts

@@ -0,0 +1,20 @@
+import type { MouseEvent } from 'react';
+export type UseListNavigationItem = string | number | null;
+export type UseListNavigationItems = UseListNavigationItem[];
+export type UseListNavigationProps = {
+    active?: boolean;
+    items?: UseListNavigationItems;
+    selected?: UseListNavigationItem;
+    onSelect?(event: KeyboardEvent | MouseEvent<HTMLElement>, item?: UseListNavigationItem): void;
+};
+export type UseListNavigationState = {
+    focused?: UseListNavigationItem;
+    current?: UseListNavigationItem;
+};
+export type UseListNavigationEvents = {
+    onKeyDown?(event: KeyboardEvent): void;
+    onClick?(event: MouseEvent<HTMLElement>, item: UseListNavigationItem): void;
+};
+export type UseListNavigationReturn = UseListNavigationState & UseListNavigationEvents;
+/** Навигация по элементам списка без перехвата фокуса с элемента контроля */
+export declare function useDataListNavigation({ selected, onSelect, active, items: itemsProps, }: UseListNavigationProps): UseListNavigationReturn;