@alfalab/core-components-select 10.6.3 → 10.6.6

package/dist/esm/presets/index.js

@@ -1,4 +1,4 @@
-import '../tslib.es6-16f12dd5.js';
+import '../tslib.es6-1fd989ad.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,12 +17,16 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../components/native-select/Component.js';
-import '../components/base-select/Component.js';
+import '../Component-9afbfef2.js';
 import '../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../components/select-mobile/options-list/Component.js';
+import '../components/select-mobile/checkmark/Component.js';
+export { a as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-e16d77bb.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
-import '../intersection-observer-d3bb47ca.js';
+import '../intersection-observer-004c512b.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-import '@alfalab/core-components-button/dist/esm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-25ca47e0.js';

package/dist/esm/presets/useLazyLoading/hook.js

@@ -1,13 +1,13 @@
-import { a as __assign, b as __spreadArrays } from '../../tslib.es6-16f12dd5.js';
+import { a as __assign, b as __spreadArrays } from '../../tslib.es6-1fd989ad.js';
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import 'classnames';
 import '@alfalab/core-components-checkbox/dist/esm';
 import '../../components/checkmark/Component.js';
 import { Option } from '../../components/option/Component.js';
 import { Skeleton } from '@alfalab/core-components-skeleton/dist/esm';
-import '../../intersection-observer-d3bb47ca.js';
+import '../../intersection-observer-004c512b.js';
 
-var styles = {"skeleton":"select__skeleton_osqox"};
+var styles = {"skeleton":"select__skeleton_ydsmy"};
 require('./index.css')
 
 var DEBOUNCE_TIMEOUT = 300;

package/dist/esm/presets/useLazyLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: f959m */
-.select__skeleton_osqox {
+/* hash: 1oj9u */
+.select__skeleton_ydsmy {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/dist/esm/presets/useSelectWithApply/hook.js

@@ -1,4 +1,4 @@
-import '../../tslib.es6-16f12dd5.js';
+import '../../tslib.es6-1fd989ad.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,10 +17,14 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../../components/native-select/Component.js';
-import '../../components/base-select/Component.js';
+import '../../Component-9afbfef2.js';
 import '../../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../components/select-mobile/options-list/Component.js';
+import '../../components/select-mobile/checkmark/Component.js';
+export { a as SELECT_ALL_KEY, u as useSelectWithApply } from '../../Component-e16d77bb.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
-import '../../intersection-observer-d3bb47ca.js';
-import '@alfalab/core-components-button/dist/esm';
-export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-25ca47e0.js';
+import '../../intersection-observer-004c512b.js';

package/dist/esm/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -1,4 +1,4 @@
-import '../../../tslib.es6-16f12dd5.js';
+import '../../../tslib.es6-1fd989ad.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,10 +17,14 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../../../components/native-select/Component.js';
-import '../../../components/base-select/Component.js';
+import '../../../Component-9afbfef2.js';
 import '../../../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../../components/select-mobile/options-list/Component.js';
+import '../../../components/select-mobile/checkmark/Component.js';
+export { O as OptionsListWithApply } from '../../../Component-e16d77bb.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
-import '../../../intersection-observer-d3bb47ca.js';
-import '@alfalab/core-components-button/dist/esm';
-export { O as OptionsListWithApply } from '../../../hook-25ca47e0.js';
+import '../../../intersection-observer-004c512b.js';

package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.css

@@ -1,4 +1,4 @@
-/* hash: 111o7 */
+/* hash: baopl */
 :root {
     --color-light-bg-primary: #fff;
     --color-light-border-secondary: #e7e9eb;
@@ -26,14 +26,14 @@
 
     /* optgroup */
 }
-.select__footer_1l8wa {
+.select__footer_3ofg3 {
     background: var(--color-light-bg-primary);
     padding: var(--gap-s) var(--gap-s) var(--gap-m);
     outline: none
 }
-.select__footer_1l8wa > * + * {
+.select__footer_3ofg3 > * + * {
         margin-left: var(--gap-xs);
     }
-.select__withBorder_1l8wa {
+.select__withBorder_3ofg3 {
     box-shadow: inset 0 1px 0 var(--color-light-border-secondary);
 }

package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../hook-25ca47e0";
+export * from "../../../Component-e16d77bb";

package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-import '../../../tslib.es6-16f12dd5.js';
+import '../../../tslib.es6-1fd989ad.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
@@ -17,10 +17,14 @@ import 'resize-observer';
 import '@alfalab/core-components-popover/dist/esm';
 import 'downshift';
 import '../../../components/native-select/Component.js';
-import '../../../components/base-select/Component.js';
+import '../../../Component-9afbfef2.js';
 import '../../../Component.js';
+import '@alfalab/core-components-bottom-sheet/dist/esm';
+import '@alfalab/core-components-button/dist/esm';
+import '@alfalab/core-components-base-modal/dist/esm';
+import '../../../components/select-mobile/options-list/Component.js';
+import '../../../components/select-mobile/checkmark/Component.js';
+export { O as OptionsListWithApply } from '../../../Component-e16d77bb.js';
 import 'react-virtual';
 import '@alfalab/core-components-skeleton/dist/esm';
-import '../../../intersection-observer-d3bb47ca.js';
-import '@alfalab/core-components-button/dist/esm';
-export { O as OptionsListWithApply } from '../../../hook-25ca47e0.js';
+import '../../../intersection-observer-004c512b.js';

package/dist/esm/presets/useSelectWithLoading/hook.js

@@ -1,4 +1,4 @@
-import { a as __assign } from '../../tslib.es6-16f12dd5.js';
+import { a as __assign } from '../../tslib.es6-1fd989ad.js';
 import React, { useCallback } from 'react';
 import 'classnames';
 import '@alfalab/core-components-checkbox/dist/esm';
@@ -6,7 +6,7 @@ import '../../components/checkmark/Component.js';
 import { Option } from '../../components/option/Component.js';
 import { Skeleton } from '@alfalab/core-components-skeleton/dist/esm';
 
-var styles = {"skeleton":"select__skeleton_1q63n"};
+var styles = {"skeleton":"select__skeleton_q1jeb"};
 require('./index.css')
 
 function useSelectWithLoading(_a) {

package/dist/esm/presets/useSelectWithLoading/index.css

@@ -1,5 +1,5 @@
-/* hash: e1bep */
-.select__skeleton_1q63n {
+/* hash: 13saw */
+.select__skeleton_q1jeb {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/dist/esm/typings.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ReactNode, FC, RefAttributes, AriaAttributes, FocusEvent, MouseEvent, ReactElement } from 'react';
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { InputProps } from "@alfalab/core-components-input";
@@ -50,6 +51,10 @@ type BaseSelectProps = {
      * Дополнительный класс для пункта меню
      */
     optionClassName?: string;
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    optionGroupClassName?: string;
     /**
      * Дополнительный класс для поповера
      */
@@ -327,6 +332,10 @@ type OptionsListProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    optionGroupClassName?: string;
     /**
      * Размер компонента
      */
@@ -399,8 +408,24 @@ type OptionsListProps = {
      * Дополнительные пропсы для Input'a, находящегося внутри кастомного OptionsList
      */
     inputProps?: InputProps;
+    /**
+     * Нужно ли показывать футер
+     */
+    showFooter?: boolean;
+    /**
+     * Обработчик подтверждения изменений
+     */
+    onApply?: () => void;
+    /**
+     * Обработчик отмены изменений
+     */
+    onClear?: () => void;
 };
 type OptgroupProps = {
+    /**
+     * Дополнительный класс для компонента группы пунктов
+     */
+    className?: string;
     /**
      * Размер компонента
      */
@@ -487,5 +512,9 @@ type CheckmarkProps = {
      * Расположение отметки
      */
     position?: 'before' | 'after';
+    /**
+     * Иконка выбранного пункта
+     */
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
 export { OptionShape, GroupShape, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/dist/getDataTestId-3fe0d3e6.d.ts

@@ -0,0 +1,2 @@
+declare const getDataTestId: (dataTestId?: string | undefined, element?: string | undefined) => string | undefined;
+export { getDataTestId };

package/dist/hook-f5b8fe4f.d.ts

@@ -30,11 +30,11 @@ declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, showClear, showSelectAll, }: useSelectWithApplyProps): {
     OptionsList: import("react").ForwardRefExoticComponent<import("./index").OptionsListProps & {
         showClear?: boolean | undefined;
-        onApply?: (() => void) | undefined;
-        onClear?: (() => void) | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<unknown>> | undefined;
+        OptionsList?: import("react").FC<import("./index").OptionsListProps & import("react").RefAttributes<unknown>> | undefined; /**
+         * Показывать кнопку очистки
+         */
     } & import("react").RefAttributes<unknown>>;
     optionsListProps: {
         OptionsList: import("react").FC<import("./index").OptionsListProps> | undefined;

package/dist/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-e3c7094c.js');
+require('./tslib.es6-efd670d0.js');
 require('react');
 require('classnames');
 require('@alfalab/hooks');
@@ -21,16 +21,20 @@ require('resize-observer');
 require('@alfalab/core-components-popover');
 require('downshift');
 require('./components/native-select/Component.js');
-var components_baseSelect_Component = require('./components/base-select/Component.js');
+var components_baseSelect_Component = require('./Component-f9672486.js');
 var Component = require('./Component.js');
+require('@alfalab/core-components-bottom-sheet');
+require('@alfalab/core-components-button');
+require('@alfalab/core-components-base-modal');
+require('./components/select-mobile/options-list/Component.js');
+require('./components/select-mobile/checkmark/Component.js');
+var presets_useSelectWithApply_hook = require('./Component-ed0d36ed.js');
 require('react-virtual');
 var components_virtualOptionsList_Component = require('./components/virtual-options-list/Component.js');
 require('@alfalab/core-components-skeleton');
 var presets_useSelectWithLoading_hook = require('./presets/useSelectWithLoading/hook.js');
-require('./intersection-observer-a7fa2c77.js');
+require('./intersection-observer-e6739adc.js');
 var presets_useLazyLoading_hook = require('./presets/useLazyLoading/hook.js');
-require('@alfalab/core-components-button');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-86df020f.js');
 
 
 
@@ -48,8 +52,9 @@ exports.OptionsList = components_optionsList_Component.OptionsList;
 exports.Option = components_option_Component.Option;
 exports.BaseSelect = components_baseSelect_Component.BaseSelect;
 exports.Select = Component.Select;
+exports.SELECT_ALL_KEY = presets_useSelectWithApply_hook.SELECT_ALL_KEY;
+exports.SelectMobile = presets_useSelectWithApply_hook.SelectMobile;
+exports.useSelectWithApply = presets_useSelectWithApply_hook.useSelectWithApply;
 exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
 exports.useSelectWithLoading = presets_useSelectWithLoading_hook.useSelectWithLoading;
 exports.useLazyLoading = presets_useLazyLoading_hook.useLazyLoading;
-exports.SELECT_ALL_KEY = presets_useSelectWithApply_optionsListWithApply_Component.SELECT_ALL_KEY;
-exports.useSelectWithApply = presets_useSelectWithApply_optionsListWithApply_Component.useSelectWithApply;

package/dist/modern/Component-25d26613.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseSelectProps } from "./typings";
+declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<unknown>>;
+export { BaseSelect };

package/dist/modern/Component-25d26613.js

@@ -0,0 +1,247 @@
+import React, { forwardRef, useRef, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';
+import cn from 'classnames';
+import { processOptions } from './utils.js';
+import mergeRefs from 'react-merge-refs';
+import { ResizeObserver } from 'resize-observer';
+import { Popover } from '@alfalab/core-components-popover/dist/modern';
+import { useMultipleSelection, useCombobox } from 'downshift';
+import { NativeSelect } from './components/native-select/Component.js';
+
+const getDataTestId = (dataTestId, element) => {
+    const elementPart = element ? `-${element.toLowerCase()}` : '';
+    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
+};
+
+var styles = {"component":"select__component_blc28","popoverInner":"select__popoverInner_blc28","optionsList":"select__optionsList_blc28","nativeSelect":"select__nativeSelect_blc28","block":"select__block_blc28"};
+require('./components/base-select/index.css')
+
+const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsListClassName, optionClassName, popperClassName, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, nativeSelect = false, defaultOpen = false, open: openProp, popoverPosition = 'bottom-start', preventFlip = true, optionsListWidth = 'content', name, id, selected, size = 's', optionsSize = size, error, hint, block, label, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, updatePopover, zIndexPopover, showEmptyOptionsList = false, visibleOptions, }, ref) => {
+    const rootRef = useRef(null);
+    const fieldRef = useRef(null);
+    const listRef = useRef(null);
+    const initiatorRef = useRef(null);
+    const itemToString = (option) => (option ? option.key : '');
+    const { flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected), [
+        options,
+        selected,
+    ]);
+    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;
+    }
+    const { selectedItems, addSelectedItem, setSelectedItems, removeSelectedItem, getDropdownProps, } = useMultipleSelection(useMultipleSelectionProps);
+    const { isOpen: open, getMenuProps, getInputProps, getItemProps, getComboboxProps, getLabelProps, highlightedIndex, toggleMenu, openMenu, } = useCombobox({
+        id,
+        isOpen: openProp,
+        circularNavigation,
+        items: flatOptions,
+        itemToString,
+        defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
+        onIsOpenChange: changes => {
+            if (onOpen) {
+                /**
+                 *  Вызываем обработчик асинхронно.
+                 *
+                 * Иначе при клике вне открытого селекта сначала сработает onOpen, который закроет селект,
+                 * А затем сработает onClick кнопки открытия\закрытия с open=false и в итоге селект откроется снова.
+                 */
+                setTimeout(() => {
+                    onOpen({
+                        open: changes.isOpen,
+                        name,
+                    });
+                }, 0);
+            }
+        },
+        stateReducer: (state, actionAndChanges) => {
+            const { type, changes } = actionAndChanges;
+            const { selectedItem } = changes;
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case useCombobox.stateChangeTypes.ItemClick:
+                    initiatorRef.current = selectedItem;
+                    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]);
+                            }
+                        }
+                    }
+                    return {
+                        ...changes,
+                        isOpen: !closeOnSelect,
+                        // при closeOnSelect === false - сохраняем подсвеченный индекс
+                        highlightedIndex: state.isOpen && !closeOnSelect
+                            ? state.highlightedIndex
+                            : changes.highlightedIndex,
+                    };
+                default:
+                    return changes;
+            }
+        },
+    });
+    const menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
+    const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
+    const handleFieldFocus = (event) => {
+        if (onFocus)
+            onFocus(event);
+        if (autocomplete && !open) {
+            openMenu();
+        }
+    };
+    const handleFieldBlur = (event) => {
+        const isNextFocusInsideList = listRef.current?.contains((event.relatedTarget || document.activeElement));
+        if (!isNextFocusInsideList) {
+            if (onBlur)
+                onBlur(event);
+            inputProps.onBlur(event);
+        }
+    };
+    const handleFieldKeyDown = (event) => {
+        inputProps.onKeyDown(event);
+        if (autocomplete && !open && (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([...event.target.options].reduce((acc, option, index) => option.selected ? acc.concat(flatOptions[index]) : acc, []));
+    }, [flatOptions, setSelectedItems]);
+    const getOptionProps = useCallback((option, index) => ({
+        ...optionProps,
+        className: optionClassName,
+        innerProps: getItemProps({
+            index,
+            item: option,
+            disabled: option.disabled,
+            onMouseDown: (event) => event.preventDefault(),
+        }),
+        multiple,
+        index,
+        option,
+        size: optionsSize,
+        disabled: option.disabled,
+        highlighted: index === highlightedIndex,
+        selected: selectedItems.includes(option),
+        dataTestId: getDataTestId(dataTestId, 'option'),
+    }), [
+        dataTestId,
+        getItemProps,
+        highlightedIndex,
+        multiple,
+        optionClassName,
+        optionProps,
+        optionsSize,
+        selectedItems,
+    ]);
+    useEffect(() => {
+        if (defaultOpen)
+            openMenu();
+    }, [defaultOpen, openMenu]);
+    useEffect(() => {
+        if (openProp) {
+            openMenu();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const calcOptionsListWidth = useCallback(() => {
+        if (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`;
+        }
+    }, [optionsListWidth]);
+    useEffect(() => {
+        const observer = new ResizeObserver(calcOptionsListWidth);
+        if (rootRef.current) {
+            observer.observe(rootRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [calcOptionsListWidth, open, optionsListWidth]);
+    useLayoutEffect(calcOptionsListWidth, [open, optionsListWidth, options, selectedItems]);
+    const renderValue = useCallback(() => selectedItems.map(option => (React.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key }))), [selectedItems, name]);
+    const renderNativeSelect = useCallback(() => {
+        const value = multiple
+            ? selectedItems.map(option => option.key)
+            : (selectedItems[0] || {}).key;
+        return (React.createElement(NativeSelect, Object.assign({}, menuProps, { className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options })));
+    }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
+    const needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
+    return (React.createElement("div", Object.assign({}, getComboboxProps({
+        ref: rootRef,
+        ...(disabled && { 'aria-disabled': true }),
+        className: cn(styles.component, { [styles.block]: block }, className),
+    }), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
+        nativeSelect && renderNativeSelect(),
+        React.createElement(Field, Object.assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", Object.assign({}, getLabelProps()), label), Arrow: Arrow && React.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
+                onBlur: handleFieldBlur,
+                onFocus: disabled ? undefined : handleFieldFocus,
+                onClick: disabled ? undefined : handleFieldClick,
+                tabIndex: nativeSelect || disabled ? -1 : 0,
+                ref: mergeRefs([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(),
+        !nativeSelect && (React.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React.createElement("div", Object.assign({}, menuProps, { className: cn(optionsListClassName, styles.optionsList) }),
+            React.createElement(OptionsList, Object.assign({}, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: options, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list') }))))))));
+});
+
+export { BaseSelect as B, getDataTestId as g };

package/dist/modern/Component-54c400c0.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { OptionShape, OptionsListProps, BaseSelectProps } from "./typings";
+declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+    showClear?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    selectedDraft?: OptionShape[] | undefined;
+    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<unknown>> | undefined;
+} & React.RefAttributes<unknown>>;
+type SelectMobileProps = Omit<BaseSelectProps, 'OptionsList' | 'Checkmark' | 'onScroll'> & {
+    /**
+     * Футер
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     *
+     */
+    swipeable?: boolean;
+};
+declare const SelectMobile: React.ForwardRefExoticComponent<Pick<BaseSelectProps, "block" | "size" | "className" | "fieldClassName" | "disabled" | "error" | "hint" | "label" | "dataTestId" | "id" | "placeholder" | "onFocus" | "onBlur" | "onChange" | "preventFlip" | "popperClassName" | "open" | "name" | "options" | "multiple" | "selected" | "valueRenderer" | "Optgroup" | "visibleOptions" | "Arrow" | "optionGroupClassName" | "Option" | "optionsListClassName" | "optionClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "nativeSelect" | "defaultOpen" | "popoverPosition" | "optionsListWidth" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "Field" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList"> & {
+    /**
+     * Футер
+     */
+    footer?: React.ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     *
+     */
+    swipeable?: boolean | undefined;
+} & React.RefAttributes<unknown>>;
+export { OptionsListWithApply, SelectMobileProps, SelectMobile };