@alfalab/core-components-select 17.10.1 → 17.12.0

package/moderncssm/components/base-option/index.module.css

@@ -0,0 +1,81 @@
+/* */
+:root {
+
+    /* options list */
+
+    /* option */
+    --select-option-background: var(--color-light-modal-bg-primary);
+    --select-option-selected-background: var(--color-light-modal-bg-primary);
+    --select-option-hover-background: var(--color-light-transparent-default-hover);
+    --select-option-active-background: var(--color-light-transparent-default-press);
+    --select-option-disabled-background: var(--color-light-modal-bg-primary);
+    --select-option-color: var(--color-light-text-primary);
+    --select-option-selected-color: var(--color-light-text-primary);
+    --select-option-hover-color: var(--color-light-text-primary);
+    --select-option-active-color: var(--color-light-text-primary);
+    --select-option-disabled-color: var(--color-light-text-secondary);
+
+    /* checkmark */
+
+    /* optgroup */
+}
+.option {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+
+    display: flex;
+    align-items: center;
+    transition: background-color 0.2s ease;
+    background: var(--select-option-background);
+    color: var(--select-option-color);
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    min-height: var(--size-s-height)
+}
+.option:not(.disabled):active {
+        background: var(--select-option-active-background);
+        color: var(--select-option-active-color);
+    }
+.option.checkmarkBefore {
+        padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-12)
+    }
+.option.checkmarkBefore.mobile {
+            padding-left: var(--gap-16);
+        }
+.option.checkmarkAfter.checkmarkAfter {
+        padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-0)
+    }
+.option.checkmarkAfter.checkmarkAfter.mobile {
+            padding-right: var(--gap-20);
+        }
+.option.textContent {
+        padding: var(--gap-12)
+    }
+.option.textContent.mobile {
+            padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
+        }
+.selected {
+    background: var(--select-option-selected-background);
+    color: var(--select-option-selected-color);
+    cursor: default;
+}
+.highlighted {
+    background: var(--select-option-hover-background);
+    color: var(--select-option-hover-color);
+}
+.disabled {
+    cursor: var(--disabled-cursor);
+    background: var(--select-option-disabled-background);
+    color: var(--select-option-disabled-color);
+}
+.checkmarkBeforeContent {
+    margin-right: var(--gap-12);
+}
+.checkmarkAfterContent {
+    margin-left: var(--gap-12);
+}
+.content {
+    flex: 1;
+}

package/moderncssm/components/base-select/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+declare const BaseSelect: React.ForwardRefExoticComponent<import("../../typings").BaseSelectProps & import("../../typings").AdditionalMobileProps & import("../../typings").BottomSheetSelectMobileProps & import("../../typings").ModalSelectMobileProps & {
+    isBottomSheet?: boolean | undefined;
+    view: "mobile" | "desktop";
+    Popover?: React.ForwardRefExoticComponent<import("@alfalab/core-components-popover").PopoverProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    BottomSheet?: React.ForwardRefExoticComponent<import("@alfalab/core-components-bottom-sheet").BottomSheetProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    ModalMobile?: (React.ForwardRefExoticComponent<import("./types/component-types").ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+        Header: React.FC<import("@alfalab/core-components-modal/shared").ModalHeaderProps>;
+        Footer: React.FC<import("@alfalab/core-components-modal/shared").ModalFooterProps>;
+        Content: React.FC<import("./types/component-types").ContentProps>;
+    }) | undefined;
+} & React.RefAttributes<unknown>>;
+export { BaseSelect };

package/moderncssm/components/base-select/Component.js

@@ -0,0 +1,408 @@
+import React, { forwardRef, useRef, useMemo, useEffect, useCallback } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import { compute } from 'compute-scroll-into-view';
+import { useMultipleSelection, useCombobox } from 'downshift';
+import { fnUtils, getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from '../../utils.js';
+import { NativeSelect } from '../native-select/Component.js';
+import { getListPopoverDesktopProps } from './components/list-desktop/helpers/get-list-popover-desktop-props.js';
+import { ListPopoverDesktop } from './components/list-desktop/list-popover-desktop.js';
+import { getListModalMobileProps } from './components/list-mobile/helpers/get-list-modal-mobile-props.js';
+import { getListBottomSheetMobileProps } from './components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
+import { ListMobile } from './components/list-mobile/list-mobile.js';
+import styles from './index.module.css';
+import mobileStyles from './mobile.module.css';
+
+/* eslint-disable no-nested-ternary */
+const itemToString = (option) => (option ? option.key : '');
+const isItemDisabled = (option) => Boolean(option?.disabled);
+const BaseSelect = forwardRef(
+// TODO: 😭
+// eslint-disable-next-line complexity
+(props, ref) => {
+    const { dataTestId, className, fieldClassName, optionGroupClassName, optionsListClassName, optionClassName, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, nativeSelect = false, defaultOpen = false, open: openProp, optionsListWidth = 'content', name, id, selected, size = 48, optionsSize = size, error, hint, block, label, labelView, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, groupOptionProps = {}, searchProps = {}, showSearch = false, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, onClear, clear, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, Search = () => null, showEmptyOptionsList = false, visibleOptions, view, isBottomSheet = true, modalProps, bottomSheetProps, limitDynamicOptionGroupSize, } = props;
+    const shouldSearchBlurRef = useRef(true);
+    const rootRef = useRef(null);
+    const fieldRef = useRef(null);
+    const listRef = useRef(null);
+    const initiatorRef = useRef(null);
+    const searchRef = useRef(null);
+    const scrollableContainerRef = useRef(null);
+    const onOpenRef = useRef(onOpen);
+    const [searchState, setSearchState] = React.useState('');
+    const [search, setSearch] = typeof searchProps?.value === 'string'
+        ? [searchProps.value, searchProps.onChange]
+        : [searchState, setSearchState];
+    const accessor = searchProps.accessor || defaultAccessor;
+    const filterFn = searchProps.filterFn || defaultFilterFn;
+    const filterGroup = searchProps.filterGroup ?? false;
+    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;
+    const { filteredOptions, flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected, (option) => {
+        if (isGroup(option)) {
+            const groupAccessorValue = groupAccessor(option);
+            return (typeof groupAccessorValue === 'string' &&
+                filterFn(groupAccessorValue, search));
+        }
+        return filterFn(accessor(option), search);
+    }, filterGroup), [options, selected, filterFn, accessor, search, filterGroup, groupAccessor]);
+    const scrollIntoView = (node) => {
+        if (!node || view === 'mobile')
+            return;
+        requestAnimationFrame(() => {
+            const actions = compute(node, {
+                boundary: listRef.current,
+                block: 'nearest',
+                scrollMode: 'if-needed',
+            });
+            actions.forEach((action) => {
+                const { el, top } = action;
+                el.scrollTop = top;
+            });
+        });
+    };
+    const useMultipleSelectionProps = {
+        itemToString,
+        onSelectedItemsChange: (changes) => {
+            if (onChange) {
+                const { selectedItems = [] } = changes;
+                onChange({
+                    selectedMultiple: selectedItems,
+                    selected: selectedItems.length ? selectedItems[0] : null,
+                    initiator: initiatorRef.current,
+                    name,
+                });
+                initiatorRef.current = null;
+            }
+        },
+        stateReducer: (state, actionAndChanges) => {
+            const { type, changes } = actionAndChanges;
+            if (!allowUnselect &&
+                type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace) {
+                return state;
+            }
+            return changes;
+        },
+    };
+    if (selected !== undefined) {
+        useMultipleSelectionProps.selectedItems = selectedOptions;
+    }
+    onOpenRef.current = onOpen;
+    const { selectedItems, addSelectedItem, setSelectedItems, removeSelectedItem, getDropdownProps, } = useMultipleSelection(useMultipleSelectionProps);
+    const { isOpen: open, getMenuProps, getInputProps, getItemProps, getLabelProps, highlightedIndex, toggleMenu, openMenu, closeMenu, setHighlightedIndex, } = useCombobox({
+        id,
+        isOpen: openProp,
+        items: flatOptions,
+        itemToString,
+        isItemDisabled,
+        defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
+        scrollIntoView,
+        onSelectedItemChange: (changes) => {
+            const selectedItem = changes.selectedItem || initiatorRef.current;
+            if (selectedItem && !selectedItem.disabled) {
+                const alreadySelected = selectedItems.includes(selectedItem);
+                const allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
+                if (alreadySelected && allowRemove) {
+                    removeSelectedItem(selectedItem);
+                }
+                if (!alreadySelected) {
+                    if (multiple) {
+                        addSelectedItem(selectedItem);
+                    }
+                    else {
+                        setSelectedItems([selectedItem]);
+                    }
+                }
+            }
+        },
+        onIsOpenChange: (changes) => {
+            if (onOpenRef.current) {
+                /**
+                 *  Вызываем обработчик асинхронно.
+                 *
+                 * Иначе при клике вне открытого селекта сначала сработает onOpen, который закроет селект,
+                 * А затем сработает onClick кнопки открытия\закрытия с open=false и в итоге селект откроется снова.
+                 */
+                setTimeout(() => {
+                    onOpenRef.current?.({
+                        open: changes.isOpen,
+                        name,
+                    });
+                }, 0);
+            }
+            if (showSearch) {
+                if (changes.isOpen && view === 'desktop') {
+                    setTimeout(() => {
+                        searchRef.current?.focus();
+                    }, 0);
+                }
+                else {
+                    setSearch?.('');
+                }
+            }
+        },
+        stateReducer: (state, actionAndChanges) => {
+            const { type, changes } = actionAndChanges;
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+                    if (!circularNavigation && state.highlightedIndex === options.length - 1) {
+                        return { ...changes, highlightedIndex: state.highlightedIndex };
+                    }
+                    return changes;
+                case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+                    if (!circularNavigation && state.highlightedIndex === 0) {
+                        return { ...changes, highlightedIndex: state.highlightedIndex };
+                    }
+                    return changes;
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick: {
+                    const { selectedItem } = changes;
+                    initiatorRef.current = selectedItem || null;
+                    return {
+                        ...changes,
+                        selectedItem: state.selectedItem === selectedItem ? null : selectedItem,
+                        isOpen: !closeOnSelect || (view === 'mobile' && multiple),
+                        // при closeOnSelect === false - сохраняем подсвеченный индекс
+                        highlightedIndex: state.isOpen && !closeOnSelect
+                            ? state.highlightedIndex
+                            : changes.highlightedIndex,
+                    };
+                }
+                default:
+                    return changes;
+            }
+        },
+    });
+    useEffect(() => {
+        /*
+         * При изменении openProp, состояние внутри downshift в useEnhancedReducer не меняется, поэтому меняем его таким способом
+         * Скорее всего это исправят в будущих версиях downshift
+         */
+        if (openProp !== undefined) {
+            if (openProp) {
+                openMenu();
+            }
+            else {
+                closeMenu();
+            }
+        }
+    }, [openProp, openMenu, closeMenu]);
+    const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
+    const { ref: menuRef, ...menuProps } = getMenuProps({ ref: listRef }, { suppressRefError: true });
+    const handleEntered = (node, isAppearing) => {
+        if (showSearch)
+            searchRef.current?.focus();
+        if (isBottomSheet) {
+            bottomSheetProps?.transitionProps?.onEntered?.(node, isAppearing);
+        }
+        else {
+            modalProps?.transitionProps?.onEntered?.(node, isAppearing);
+        }
+    };
+    const handleFieldFocus = (event) => {
+        if (onFocus)
+            onFocus(event);
+        if (autocomplete && !open) {
+            openMenu();
+        }
+    };
+    const handleFieldBlur = (event) => {
+        if (view === 'desktop') {
+            const isNextFocusInsideField = fieldRef.current?.contains((event.relatedTarget || document.activeElement));
+            const isNextFocusInsideList = listRef.current?.contains((event.relatedTarget || document.activeElement));
+            if (!isNextFocusInsideField && !isNextFocusInsideList) {
+                if (onBlur)
+                    onBlur(event);
+                inputProps.onBlur?.(event);
+            }
+        }
+        if (view === 'mobile' && !open && onBlur)
+            onBlur(event);
+    };
+    const handleFieldKeyDown = (event) => {
+        inputProps.onKeyDown?.(event);
+        // https://caniuse.com/?search=KeyboardEvent.key
+        const isKeyUnsupported = event.key === 'Unidentified';
+        if (autocomplete &&
+            !open &&
+            (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')) {
+            // Для автокомплита - открываем меню при начале ввода
+            openMenu();
+        }
+        if ([' ', 'Enter'].includes(event.key) &&
+            !autocomplete &&
+            !nativeSelect &&
+            event.target.tagName !== 'INPUT' &&
+            event.target.tagName !== 'BUTTON') {
+            // Открываем\закрываем меню по нажатию enter или пробела
+            event.preventDefault();
+            if (!open || highlightedIndex === -1)
+                toggleMenu();
+        }
+    };
+    const handleFieldClick = (event) => {
+        if (!autocomplete || event.target.tagName !== 'INPUT') {
+            toggleMenu();
+        }
+        else {
+            openMenu();
+        }
+    };
+    const handleNativeSelectChange = useCallback((event) => {
+        setSelectedItems(
+        // eslint-disable-next-line
+        [...event.target.options].reduce((acc, option, index) => option.selected ? acc.concat(flatOptions[index]) : acc, []));
+    }, [flatOptions, setSelectedItems]);
+    const getOptionProps = (option, index) => ({
+        ...optionProps,
+        mobile: view === 'mobile',
+        className: cn(optionClassName, {
+            [mobileStyles.option]: view === 'mobile',
+        }),
+        innerProps: getItemProps({
+            index,
+            item: option,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => {
+                if (view === 'mobile' || !showSearch || multiple)
+                    return;
+                shouldSearchBlurRef.current = false;
+                searchRef.current?.blur();
+                shouldSearchBlurRef.current = true;
+                fieldRef.current?.focus();
+            },
+        }),
+        multiple,
+        index,
+        option,
+        size: optionsSize,
+        disabled: option.disabled,
+        highlighted: index === highlightedIndex,
+        selected: selectedItems.some(({ key }) => key === option.key),
+        dataTestId: getDataTestId(dataTestId, 'option'),
+    });
+    useEffect(() => {
+        if (defaultOpen)
+            openMenu();
+    }, [defaultOpen, openMenu]);
+    useEffect(() => {
+        if (openProp) {
+            openMenu();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const calcOptionsListWidth = useCallback(() => {
+        if (view === 'desktop' && listRef.current) {
+            const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
+            const optionsListMinWidth = rootRef.current
+                ? rootRef.current.getBoundingClientRect().width
+                : 0;
+            listRef.current.setAttribute('style', '');
+            listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
+        }
+    }, [view, optionsListWidth]);
+    useEffect(() => {
+        if (view === 'desktop') {
+            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+            const observer = new ResizeObserver$1(calcOptionsListWidth);
+            if (rootRef.current) {
+                observer.observe(rootRef.current);
+            }
+            return () => {
+                observer.disconnect();
+            };
+        }
+        return fnUtils.noop;
+    }, [view, calcOptionsListWidth, open, optionsListWidth]);
+    useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
+        open,
+        optionsListWidth,
+        filteredOptions,
+        selectedItems,
+    ]);
+    const renderValue = () => selectedItems.map((option) => (React.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })));
+    const renderNativeSelect = () => {
+        const value = multiple
+            ? selectedItems.map((option) => option.key)
+            : (selectedItems[0] || {}).key;
+        return (React.createElement(NativeSelect, { ...menuProps, className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: filteredOptions }));
+    };
+    const handleFieldClear = (event) => {
+        setSelectedItems([]);
+        onClear?.(event);
+    };
+    const renderSearch = () => {
+        if (!showSearch)
+            return null;
+        const handleClear = (event) => {
+            setSearch?.('');
+            searchProps?.componentProps?.onClear?.(event);
+        };
+        const handleChange = (event, payload) => {
+            setSearch?.(payload.value);
+            searchProps?.componentProps?.onChange?.(event, payload);
+        };
+        const handleBlur = (event) => {
+            if (!shouldSearchBlurRef.current)
+                return;
+            searchProps.componentProps?.onBlur?.(event);
+            handleFieldBlur(event);
+        };
+        return (React.createElement(Search, { ...searchProps?.componentProps, onBlur: handleBlur, value: search, onChange: handleChange, dataTestId: getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn(searchProps?.componentProps?.className, {
+                [styles.search]: view === 'desktop',
+                [mobileStyles.search]: view === 'mobile',
+            }), ref: mergeRefs([searchRef, searchProps?.componentProps?.ref || null]) }));
+    };
+    const { header, emptyPlaceholder } = optionsListProps;
+    const renderOptionsListHeader = () => {
+        if (header || (view === 'desktop' && showSearch)) {
+            return (React.createElement(React.Fragment, null,
+                header,
+                view === 'desktop' && renderSearch()));
+        }
+        return null;
+    };
+    const renderEmptyPlaceholder = () => {
+        if (emptyPlaceholder) {
+            return emptyPlaceholder;
+        }
+        if (showSearch) {
+            return React.createElement("div", { className: styles.emptySearchPlaceholder }, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C");
+        }
+        return undefined;
+    };
+    const renderOptionsList = () => {
+        if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
+            return null;
+        const listProps = optionsListProps;
+        return (React.createElement("div", { ...menuProps, ref: view === 'desktop' ? menuRef : undefined, className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) },
+            React.createElement(OptionsList, { ...listProps, ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn({ [mobileStyles.optionsList]: view === 'mobile' }), scrollbarClassName: cn({ [mobileStyles.scrollbar]: view === 'mobile' }), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, groupOptionProps: groupOptionProps, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn(optionGroupClassName, {
+                    [mobileStyles.optionGroup]: view === 'mobile',
+                }), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize }),
+            view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
+    };
+    return (React.createElement("div", { ...(disabled && { 'aria-disabled': true }), "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn(styles.component, { [styles.block]: block }, className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) },
+        nativeSelect && renderNativeSelect(),
+        React.createElement(Field, { selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", { ...getLabelProps() }, label), labelView: labelView, Arrow: Arrow && React.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, clear: clear, onClear: handleFieldClear, innerProps: {
+                onBlur: handleFieldBlur,
+                onFocus: disabled ? undefined : handleFieldFocus,
+                onClick: disabled ? undefined : handleFieldClick,
+                tabIndex: disabled ? undefined : nativeSelect ? -1 : 0,
+                ref: inputProps.ref,
+                id: inputProps.id,
+                'aria-labelledby': inputProps['aria-labelledby'],
+                'aria-controls': inputProps['aria-controls'],
+                'aria-autocomplete': autocomplete
+                    ? inputProps['aria-autocomplete']
+                    : undefined,
+            }, dataTestId: getDataTestId(dataTestId, 'field'), ...fieldProps }),
+        name && !nativeSelect && renderValue(),
+        view === 'desktop' && !nativeSelect && (React.createElement(ListPopoverDesktop, { ...getListPopoverDesktopProps(props), open: open, fieldRef: fieldRef, renderOptionsList: renderOptionsList })),
+        view === 'mobile' && (React.createElement(ListMobile, { baseProps: isBottomSheet
+                ? getListBottomSheetMobileProps(props)
+                : getListModalMobileProps(props), open: open, menuRef: menuRef, scrollableContainerRef: scrollableContainerRef, flatOptions: flatOptions, renderOptionsList: renderOptionsList, renderSearch: renderSearch, closeMenu: closeMenu, handleEntered: handleEntered }))));
+});
+
+export { BaseSelect };

package/moderncssm/components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentProps } from "../../../types/component-types";
+declare const getListPopoverDesktopProps: (props: ComponentProps) => {
+    Popover: import("react").ForwardRefExoticComponent<import("@alfalab/core-components-popover").PopoverProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+    popoverProps: Omit<import("@alfalab/core-components-popover").PopoverProps, "className" | "dataTestId" | "anchorElement" | "position" | "preventFlip" | "open" | "update" | "zIndex"> | undefined;
+    popoverPosition: import("@alfalab/core-components-popover").Position;
+    preventFlip: boolean;
+    popperClassName: string | undefined;
+    updatePopover: import("react").MutableRefObject<(() => void) | undefined> | undefined;
+    zIndexPopover: number | undefined;
+};
+export { getListPopoverDesktopProps };

package/moderncssm/components/base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js

@@ -0,0 +1,15 @@
+// отделяем необходимые пропсы для передачи в компонент
+const getListPopoverDesktopProps = (props) => {
+    const { Popover, popoverProps, popoverPosition = 'bottom-start', preventFlip = true, popperClassName, updatePopover, zIndexPopover, } = props;
+    return {
+        Popover,
+        popoverProps,
+        popoverPosition,
+        preventFlip,
+        popperClassName,
+        updatePopover,
+        zIndexPopover,
+    };
+};
+
+export { getListPopoverDesktopProps };

package/moderncssm/components/base-select/components/list-desktop/list-popover-desktop.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode, RefObject } from 'react';
+import { ListPopoverDesktopRestProps } from "./types/types";
+type ListPopoverDesktopProps = {
+    open: boolean;
+    fieldRef: RefObject<HTMLInputElement>;
+    renderOptionsList: () => ReactNode;
+} & ListPopoverDesktopRestProps;
+declare const ListPopoverDesktop: FC<ListPopoverDesktopProps>;
+export { ListPopoverDesktop };

package/moderncssm/components/base-select/components/list-desktop/list-popover-desktop.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from '../../index.module.css';
+
+const ListPopoverDesktop = (props) => {
+    const { Popover, open, popoverProps, fieldRef, popoverPosition = 'bottom-start', preventFlip = true, popperClassName, updatePopover, zIndexPopover, renderOptionsList, } = props;
+    if (Popover) {
+        return (React.createElement(Popover, { ...popoverProps, open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, renderOptionsList()));
+    }
+    return null;
+};
+
+export { ListPopoverDesktop };

package/moderncssm/components/base-select/components/list-desktop/types/types.d.ts

@@ -0,0 +1,3 @@
+import { getListPopoverDesktopProps } from "../helpers/get-list-popover-desktop-props";
+type ListPopoverDesktopRestProps = ReturnType<typeof getListPopoverDesktopProps>;
+export { ListPopoverDesktopRestProps };

package/moderncssm/components/base-select/components/list-desktop/types/types.js

@@ -0,0 +1 @@
+

package/moderncssm/components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ComponentProps } from "../../../types/component-types";
+declare const getListBottomSheetMobileProps: (props: ComponentProps) => {
+    BottomSheet: import("react").ForwardRefExoticComponent<import("@alfalab/core-components-bottom-sheet").BottomSheetProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+    dataTestId: string | undefined;
+    label: import("react").ReactNode;
+    placeholder: string | undefined;
+    footer: import("react").ReactNode;
+    swipeable: boolean | undefined;
+    showSearch: boolean | undefined;
+    bottomSheetProps: Partial<import("@alfalab/core-components-bottom-sheet").BottomSheetProps> | undefined;
+    isBottomSheet: boolean;
+    nativeSelect: boolean;
+    onScroll: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+};
+export { getListBottomSheetMobileProps };

package/moderncssm/components/base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js

@@ -0,0 +1,19 @@
+// отделяем необходимые пропсы для передачи в компонент
+const getListBottomSheetMobileProps = (props) => {
+    const { BottomSheet, dataTestId, label, placeholder, footer, swipeable, showSearch, bottomSheetProps, isBottomSheet = true, nativeSelect = false, onScroll, } = props;
+    return {
+        BottomSheet,
+        dataTestId,
+        label,
+        placeholder,
+        footer,
+        swipeable,
+        showSearch,
+        bottomSheetProps,
+        isBottomSheet,
+        nativeSelect,
+        onScroll,
+    };
+};
+
+export { getListBottomSheetMobileProps };

package/moderncssm/components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { ComponentProps } from "../../../types/component-types";
+declare const getListModalMobileProps: (props: ComponentProps) => {
+    ModalMobile: (import("react").ForwardRefExoticComponent<import("../../../types/component-types").ModalMobileProps & import("react").RefAttributes<HTMLDivElement>> & {
+        Header: import("react").FC<import("@alfalab/core-components-modal/shared").ModalHeaderProps>;
+        Footer: import("react").FC<import("@alfalab/core-components-modal/shared").ModalFooterProps>;
+        Content: import("react").FC<import("../../../types/component-types").ContentProps>;
+    }) | undefined;
+    dataTestId: string | undefined;
+    modalProps: Partial<import("@alfalab/core-components-base-modal").BaseModalProps & {
+        size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
+        fullscreen?: boolean | undefined;
+        fixedPosition?: boolean | undefined;
+        hasCloser?: boolean | undefined;
+        iOSLock?: boolean | undefined;
+    } & {
+        breakpoint?: number | undefined;
+        defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>> | undefined;
+    modalHeaderProps: Partial<import("@alfalab/core-components-modal/shared").ModalHeaderProps> | undefined;
+    modalFooterProps: Partial<import("@alfalab/core-components-modal/shared").ModalFooterProps> | undefined;
+    label: import("react").ReactNode;
+    placeholder: string | undefined;
+    isBottomSheet: boolean;
+    nativeSelect: boolean;
+    onScroll: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+};
+export { getListModalMobileProps };

package/moderncssm/components/base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js

@@ -0,0 +1,18 @@
+// отделяем необходимые пропсы для передачи в компонент
+const getListModalMobileProps = (props) => {
+    const { ModalMobile, dataTestId, modalProps, modalHeaderProps, modalFooterProps, label, placeholder, isBottomSheet = true, nativeSelect = false, onScroll, } = props;
+    return {
+        ModalMobile,
+        dataTestId,
+        modalProps,
+        modalHeaderProps,
+        modalFooterProps,
+        label,
+        placeholder,
+        isBottomSheet,
+        nativeSelect,
+        onScroll,
+    };
+};
+
+export { getListModalMobileProps };

package/moderncssm/components/base-select/components/list-mobile/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export { getListModalMobileProps } from "./get-list-modal-mobile-props";
+export { getListBottomSheetMobileProps } from "./get-list-bottom-sheet-mobile-props";