@alfalab/core-components 47.4.0-beta.1 → 47.5.0

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

@@ -8,12 +8,14 @@ import { fnUtils, getDataTestId } from '../../../../shared/modern';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
-
-const styles = {"component":"select__component_16lus","popoverInner":"select__popoverInner_16lus","optionsListWrapper":"select__optionsListWrapper_16lus","optionsListBorder":"select__optionsListBorder_16lus","nativeSelect":"select__nativeSelect_16lus","block":"select__block_16lus","emptySearchPlaceholder":"select__emptySearchPlaceholder_16lus","search":"select__search_16lus"};
-require('./index.css');
-
-const mobileStyles = {"sheet":"select__sheet_27lgi","sheetContent":"select__sheetContent_27lgi","modalContent":"select__modalContent_27lgi","sheetContainer":"select__sheetContainer_27lgi","optionsListWrapper":"select__optionsListWrapper_27lgi","optionsList":"select__optionsList_27lgi","scrollbar":"select__scrollbar_27lgi","search":"select__search_27lgi","option":"select__option_27lgi","optionGroup":"select__optionGroup_27lgi"};
-require('./mobile.css');
+import { getListPopoverDesktopProps } from './components/list-desktop/helpers/get-list-popover-desktop-props.js';
+import { s as styles, L as ListPopoverDesktop } from '../../list-popover-desktop-380bb61b.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 { m as mobileStyles } from '../../mobile.module-5f7203b5.js';
+import './components/list-mobile/list-bottom-sheet-mobile.js';
+import './components/list-mobile/list-modal-mobile.js';
 
 /* eslint-disable no-nested-ternary */
 const itemToString = (option) => (option ? option.key : '');
@@ -21,7 +23,9 @@ const isItemDisabled = (option) => Boolean(option?.disabled);
 const BaseSelect = forwardRef(
 // TODO: 😭
 // eslint-disable-next-line complexity
-({ dataTestId, className, fieldClassName, optionGroupClassName, 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 = 48, optionsSize = size, error, hint, block, label, labelView, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, searchProps = {}, showSearch = false, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, Search = () => null, updatePopover, zIndexPopover, showEmptyOptionsList = false, visibleOptions, view, isBottomSheet = true, footer, swipeable, modalProps, popoverProps, modalFooterProps, modalHeaderProps, bottomSheetProps, Popover, ModalMobile, BottomSheet, limitDynamicOptionGroupSize, }, ref) => {
+(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 = {}, searchProps = {}, showSearch = false, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, 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);
@@ -262,6 +266,14 @@ const BaseSelect = forwardRef(
             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,
@@ -330,6 +342,8 @@ const BaseSelect = forwardRef(
             searchProps?.componentProps?.onChange?.(event, payload);
         };
         const handleBlur = (event) => {
+            if (!shouldSearchBlurRef.current)
+                return;
             searchProps.componentProps?.onBlur?.(event);
             handleFieldBlur(event);
         };
@@ -366,52 +380,6 @@ const BaseSelect = forwardRef(
                 }), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize }),
             view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
     };
-    const renderInPopover = () => {
-        if (!nativeSelect && 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;
-    };
-    const renderInBottomSheet = () => {
-        if (!nativeSelect && BottomSheet) {
-            return (React.createElement(BottomSheet, { dataTestId: getDataTestId(dataTestId, 'bottom-sheet'), open: open, className: mobileStyles.sheet, contentClassName: mobileStyles.sheetContent, containerClassName: mobileStyles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, initialHeight: showSearch ? 'full' : 'default', ...bottomSheetProps, sheetContainerRef: menuRef, scrollableContainerRef: scrollableContainerRef, onClose: () => {
-                    closeMenu();
-                    bottomSheetProps?.onClose?.();
-                }, transitionProps: {
-                    ...bottomSheetProps?.transitionProps,
-                    onEntered: handleEntered,
-                }, bottomAddons: React.createElement(React.Fragment, null,
-                    renderSearch(),
-                    flatOptions.length > 0 && bottomSheetProps?.bottomAddons), containerProps: {
-                    ...bottomSheetProps?.containerProps,
-                    onScroll,
-                } }, renderOptionsList()));
-        }
-        return null;
-    };
-    const renderInModalMobile = () => {
-        if (!nativeSelect && ModalMobile) {
-            return (React.createElement(ModalMobile, { dataTestId: getDataTestId(dataTestId, 'modal'), open: open, hasCloser: true, ...modalProps, componentRef: menuRef, onClose: (...args) => {
-                    closeMenu();
-                    modalProps?.onClose?.(...args);
-                }, contentClassName: cn(mobileStyles.sheetContent, modalProps?.contentClassName), ref: mergeRefs([
-                    scrollableContainerRef,
-                    modalProps?.ref,
-                ]), wrapperProps: {
-                    ...modalProps?.wrapperProps,
-                    onScroll,
-                }, transitionProps: {
-                    ...modalProps?.transitionProps,
-                    onEntered: handleEntered,
-                } },
-                React.createElement(ModalMobile.Header, { hasCloser: true, sticky: true, ...modalHeaderProps, title: undefined, bottomAddons: React.createElement(React.Fragment, null,
-                        renderSearch(),
-                        flatOptions.length > 0 && modalHeaderProps?.bottomAddons) }, modalHeaderProps?.title || label || placeholder),
-                React.createElement(ModalMobile.Content, { flex: true, className: mobileStyles.modalContent }, renderOptionsList()),
-                modalFooterProps?.children && React.createElement(ModalMobile.Footer, { ...modalFooterProps })));
-        }
-        return null;
-    };
     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, innerProps: {
@@ -428,9 +396,10 @@ const BaseSelect = forwardRef(
                     : undefined,
             }, dataTestId: getDataTestId(dataTestId, 'field'), ...fieldProps }),
         name && !nativeSelect && renderValue(),
-        view === 'desktop' && renderInPopover(),
-        view === 'mobile' && isBottomSheet && renderInBottomSheet(),
-        view === 'mobile' && !isBottomSheet && renderInModalMobile()));
+        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/select/modern/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("../../../../../../../popover").PopoverProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+    popoverProps: Omit<import("../../../../../../../popover").PopoverProps, "className" | "dataTestId" | "anchorElement" | "position" | "preventFlip" | "open" | "update" | "zIndex"> | undefined;
+    popoverPosition: import("../../../../../../../popover").Position;
+    preventFlip: boolean;
+    popperClassName: string | undefined;
+    updatePopover: import("react").MutableRefObject<(() => void) | undefined> | undefined;
+    zIndexPopover: number | undefined;
+};
+export { getListPopoverDesktopProps };

package/select/modern/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/select/modern/components/base-select/components/list-desktop/list-popover-desktop.js

@@ -0,0 +1,3 @@
+import 'react';
+import 'classnames';
+export { L as ListPopoverDesktop } from '../../../../list-popover-desktop-380bb61b.js';

package/select/modern/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/select/modern/components/base-select/components/list-desktop/types/types.js

@@ -0,0 +1 @@
+

package/select/modern/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("../../../../../../../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("../../../../../../../bottom-sheet").BottomSheetProps> | undefined;
+    isBottomSheet: boolean;
+    nativeSelect: boolean;
+    onScroll: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+};
+export { getListBottomSheetMobileProps };

package/select/modern/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/select/modern/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("../../../../../../../modal/shared").ModalHeaderProps>;
+        Footer: import("react").FC<import("../../../../../../../modal/shared").ModalFooterProps>;
+        Content: import("react").FC<import("../../../types/component-types").ContentProps>;
+    }) | undefined;
+    dataTestId: string | undefined;
+    modalProps: Partial<import("../../../../../../../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("../../../../../../../modal/shared").ModalHeaderProps> | undefined;
+    modalFooterProps: Partial<import("../../../../../../../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/select/modern/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/select/modern/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";

package/select/modern/components/base-select/components/list-mobile/helpers/index.js

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

package/select/modern/components/base-select/components/list-mobile/list-bottom-sheet-mobile.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode, RefObject } from 'react';
+import { OptionShape } from "../../../../typings";
+import { ListBottomSheetMobileRestProps } from "./types/types";
+type ListMobileProps = {
+    open: boolean;
+    menuRef: RefObject<HTMLDivElement>;
+    scrollableContainerRef: RefObject<HTMLDivElement>;
+    flatOptions: OptionShape[];
+    closeMenu: () => void;
+    handleEntered: (node: HTMLElement, isAppearing: boolean) => void;
+    renderSearch: () => ReactNode;
+    renderOptionsList: () => ReactNode;
+} & ListBottomSheetMobileRestProps;
+declare const ListBottomSheetMobile: FC<ListMobileProps>;
+export { ListBottomSheetMobile };

package/select/modern/components/base-select/components/list-mobile/list-bottom-sheet-mobile.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { getDataTestId } from '../../../../../../shared/modern';
+import { m as mobileStyles } from '../../../../mobile.module-5f7203b5.js';
+
+const ListBottomSheetMobile = (props) => {
+    const { BottomSheet, dataTestId, open, label, placeholder, footer, swipeable, showSearch, bottomSheetProps, menuRef, scrollableContainerRef, onScroll, flatOptions, closeMenu, handleEntered, renderSearch, renderOptionsList, } = props;
+    if (BottomSheet) {
+        return (React.createElement(BottomSheet, { dataTestId: getDataTestId(dataTestId, 'bottom-sheet'), open: open, className: mobileStyles.sheet, contentClassName: mobileStyles.sheetContent, containerClassName: mobileStyles.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, initialHeight: showSearch ? 'full' : 'default', ...bottomSheetProps, sheetContainerRef: menuRef, scrollableContainerRef: scrollableContainerRef, onClose: () => {
+                closeMenu();
+                bottomSheetProps?.onClose?.();
+            }, transitionProps: {
+                ...bottomSheetProps?.transitionProps,
+                onEntered: handleEntered,
+            }, bottomAddons: React.createElement(React.Fragment, null,
+                renderSearch(),
+                flatOptions.length > 0 && bottomSheetProps?.bottomAddons), containerProps: {
+                ...bottomSheetProps?.containerProps,
+                onScroll,
+            } }, renderOptionsList()));
+    }
+    return null;
+};
+
+export { ListBottomSheetMobile };

package/select/modern/components/base-select/components/list-mobile/list-mobile.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode, RefObject } from 'react';
+import { OptionShape } from "../../../../typings";
+import { ListBottomSheetMobileRestProps, ListModalMobileRestProps } from "./types/types";
+type ListMobileProps = {
+    baseProps: ListBottomSheetMobileRestProps | ListModalMobileRestProps;
+    open: boolean;
+    menuRef: RefObject<HTMLDivElement>;
+    scrollableContainerRef: RefObject<HTMLDivElement>;
+    flatOptions: OptionShape[];
+    closeMenu: () => void;
+    handleEntered: (node: HTMLElement, isAppearing: boolean) => void;
+    renderSearch: () => ReactNode;
+    renderOptionsList: () => ReactNode;
+};
+declare const ListMobile: FC<ListMobileProps>;
+export { ListMobile };

package/select/modern/components/base-select/components/list-mobile/list-mobile.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ListBottomSheetMobile } from './list-bottom-sheet-mobile.js';
+import { ListModalMobile } from './list-modal-mobile.js';
+import '../../../../../../shared/modern';
+import '../../../../mobile.module-5f7203b5.js';
+import 'react-merge-refs';
+import 'classnames';
+
+const ListMobile = (props) => {
+    const { baseProps, ...restProps } = props;
+    const { isBottomSheet, nativeSelect } = baseProps;
+    if (isBottomSheet && !nativeSelect) {
+        return (React.createElement(ListBottomSheetMobile, { ...baseProps, ...restProps }));
+    }
+    if (!isBottomSheet && !nativeSelect) {
+        return React.createElement(ListModalMobile, { ...baseProps, ...restProps });
+    }
+    return null;
+};
+
+export { ListMobile };

package/select/modern/components/base-select/components/list-mobile/list-modal-mobile.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode, RefObject } from 'react';
+import { OptionShape } from "../../../../typings";
+import { ListModalMobileRestProps } from "./types/types";
+type ListModalMobileProps = {
+    open: boolean;
+    menuRef: RefObject<HTMLDivElement>;
+    scrollableContainerRef: RefObject<HTMLDivElement>;
+    flatOptions: OptionShape[];
+    closeMenu: () => void;
+    handleEntered: (node: HTMLElement, isAppearing: boolean) => void;
+    renderSearch: () => ReactNode;
+    renderOptionsList: () => ReactNode;
+} & ListModalMobileRestProps;
+declare const ListModalMobile: FC<ListModalMobileProps>;
+export { ListModalMobile };

package/select/modern/components/base-select/components/list-mobile/list-modal-mobile.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { getDataTestId } from '../../../../../../shared/modern';
+import { m as mobileStyles } from '../../../../mobile.module-5f7203b5.js';
+
+const ListModalMobile = (props) => {
+    const { ModalMobile, dataTestId, open, modalProps, modalHeaderProps, modalFooterProps, menuRef, scrollableContainerRef, label, placeholder, onScroll, flatOptions, closeMenu, handleEntered, renderSearch, renderOptionsList, } = props;
+    if (ModalMobile) {
+        return (React.createElement(ModalMobile, { dataTestId: getDataTestId(dataTestId, 'modal'), open: open, hasCloser: true, ...modalProps, componentRef: menuRef, onClose: (...args) => {
+                closeMenu();
+                modalProps?.onClose?.(...args);
+            }, contentClassName: cn(mobileStyles.sheetContent, modalProps?.contentClassName), ref: mergeRefs([
+                scrollableContainerRef,
+                modalProps?.ref,
+            ]), wrapperProps: {
+                ...modalProps?.wrapperProps,
+                onScroll,
+            }, transitionProps: {
+                ...modalProps?.transitionProps,
+                onEntered: handleEntered,
+            } },
+            React.createElement(ModalMobile.Header, { hasCloser: true, sticky: true, ...modalHeaderProps, title: undefined, bottomAddons: React.createElement(React.Fragment, null,
+                    renderSearch(),
+                    flatOptions.length > 0 && modalHeaderProps?.bottomAddons) }, modalHeaderProps?.title || label || placeholder),
+            React.createElement(ModalMobile.Content, { flex: true, className: mobileStyles.modalContent }, renderOptionsList()),
+            modalFooterProps?.children && React.createElement(ModalMobile.Footer, { ...modalFooterProps })));
+    }
+    return null;
+};
+
+export { ListModalMobile };

package/select/modern/components/base-select/components/list-mobile/types/types.d.ts

@@ -0,0 +1,4 @@
+import { getListBottomSheetMobileProps, getListModalMobileProps } from "../helpers/index";
+type ListBottomSheetMobileRestProps = ReturnType<typeof getListBottomSheetMobileProps>;
+type ListModalMobileRestProps = ReturnType<typeof getListModalMobileProps>;
+export { ListBottomSheetMobileRestProps, ListModalMobileRestProps };

package/select/modern/components/base-select/components/list-mobile/types/types.js

@@ -0,0 +1 @@
+

package/select/modern/components/base-select/index.css

@@ -16,9 +16,11 @@
     /* Hard up */
 } :root {
     --border-radius-m: 8px;
-} :root {
-    --gap-2xs: 4px;
-    --gap-s: 12px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {

package/select/modern/components/base-select/index.js

@@ -9,3 +9,11 @@ import '../../../../shared/modern';
 import '@alfalab/hooks';
 import '../../utils.js';
 import '../native-select/Component.js';
+import './components/list-desktop/helpers/get-list-popover-desktop-props.js';
+import '../../list-popover-desktop-380bb61b.js';
+import './components/list-mobile/helpers/get-list-modal-mobile-props.js';
+import './components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
+import './components/list-mobile/list-mobile.js';
+import './components/list-mobile/list-bottom-sheet-mobile.js';
+import '../../mobile.module-5f7203b5.js';
+import './components/list-mobile/list-modal-mobile.js';

package/select/modern/components/base-select/mobile.css

@@ -11,11 +11,13 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-2xs: 4px;
-    --gap-xs: 8px;
-    --gap-m: 16px;
-    --gap-l: 20px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */
+    --gap-xs: 8px; /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */
+    --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {

package/select/modern/components/base-select/types/component-types.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FC, ForwardRefExoticComponent, RefAttributes } from "react";
+import { BottomSheetProps } from "../../../../../bottom-sheet";
+import { ModalContentProps, ModalFooterProps, ModalHeaderProps } from "../../../../../modal/shared";
+import { BaseModalProps } from "../../../../../base-modal";
+import { PopoverProps } from "../../../../../popover";
+import { AdditionalMobileProps, BaseSelectProps, BottomSheetSelectMobileProps, ModalSelectMobileProps } from "../../../typings";
+type ModalDesktopProps = BaseModalProps & {
+    /**
+     * Ширина модального окна
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
+     */
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | 500 | 600 | 800 | 1140;
+    /**
+     * Растягивает модальное окно на весь экран
+     * @deprecated Используйте размер fullscreen
+     */
+    fullscreen?: boolean;
+    /**
+     * Фиксирует позицию модального окна после открытия,
+     * предотвращая скачки, если контент внутри будет меняться
+     */
+    fixedPosition?: boolean;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
+};
+type ModalMobileProps = Omit<ModalDesktopProps, "size" | "fixedPosition" | "fullscreen">;
+type PopoverType = ForwardRefExoticComponent<PopoverProps & RefAttributes<HTMLDivElement>>;
+type BottomSheetType = React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+type ModalMobileType = ForwardRefExoticComponent<ModalMobileProps & RefAttributes<HTMLDivElement>> & {
+    Header: FC<ModalHeaderProps>;
+    Footer: FC<ModalFooterProps>;
+    Content: FC<ModalContentProps>;
+};
+type ComponentProps = BaseSelectProps & AdditionalMobileProps & BottomSheetSelectMobileProps & ModalSelectMobileProps & {
+    isBottomSheet?: boolean;
+    view: 'desktop' | 'mobile';
+    Popover?: PopoverType;
+    BottomSheet?: BottomSheetType;
+    ModalMobile?: ModalMobileType;
+};
+export { ComponentProps };

package/select/modern/components/base-select/types/component-types.js

@@ -0,0 +1 @@
+

package/select/modern/components/checkmark/index.css

@@ -14,9 +14,11 @@
     /* Hard up */
 } :root {
     --border-radius-circle: 50%;
-} :root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
+} :root { /* deprecated */ /* deprecated */
+    --gap-xs: 8px; /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {

package/select/modern/components/checkmark-mobile/index.css

@@ -11,7 +11,9 @@
 
     /* Hard up */
 } :root {
-} :root {
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {

package/select/modern/components/field/index.css

@@ -14,7 +14,9 @@
 
     /* Hard up */
 } :root {
-} :root {
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
     --focus-color: var(--color-light-status-info);

package/select/modern/components/footer/index.css

@@ -13,8 +13,10 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-m: 16px;
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {

package/select/modern/components/index.js

@@ -18,6 +18,14 @@ import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../utils.js';
 import './native-select/Component.js';
+import './base-select/components/list-desktop/helpers/get-list-popover-desktop-props.js';
+import '../list-popover-desktop-380bb61b.js';
+import './base-select/components/list-mobile/helpers/get-list-modal-mobile-props.js';
+import './base-select/components/list-mobile/helpers/get-list-bottom-sheet-mobile-props.js';
+import './base-select/components/list-mobile/list-mobile.js';
+import './base-select/components/list-mobile/list-bottom-sheet-mobile.js';
+import '../mobile.module-5f7203b5.js';
+import './base-select/components/list-mobile/list-modal-mobile.js';
 import '../consts.js';
 import './checkmark/Component.js';
 import '../../../badge/modern';

package/select/modern/components/optgroup/index.css

@@ -13,10 +13,12 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-2xs: 4px;
-    --gap-s: 12px;
-    --gap-m: 16px;
+} :root { /* deprecated */
+    --gap-2xs: 4px; /* deprecated */ /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
 } :root {

package/select/modern/components/option/index.css

@@ -17,9 +17,11 @@
 
     /* Hard up */
 } :root {
-} :root {
-    --gap-s: 12px;
-    --gap-m: 16px;
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --gap-s: 12px; /* deprecated */ /* deprecated */
+    --gap-m: 16px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+
+    /* новые значения, используйте их */
 } :root {
 } :root {
     --disabled-cursor: not-allowed;