@alfalab/core-components 47.4.0 → 47.6.0-beta.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_e6vg1","popoverInner":"select__popoverInner_e6vg1","optionsListWrapper":"select__optionsListWrapper_e6vg1","optionsListBorder":"select__optionsListBorder_e6vg1","nativeSelect":"select__nativeSelect_e6vg1","block":"select__block_e6vg1","emptySearchPlaceholder":"select__emptySearchPlaceholder_e6vg1","search":"select__search_e6vg1"};
-require('./index.css');
-
-const mobileStyles = {"sheet":"select__sheet_594wa","sheetContent":"select__sheetContent_594wa","modalContent":"select__modalContent_594wa","sheetContainer":"select__sheetContainer_594wa","optionsListWrapper":"select__optionsListWrapper_594wa","optionsList":"select__optionsList_594wa","scrollbar":"select__scrollbar_594wa","search":"select__search_594wa","option":"select__option_594wa","optionGroup":"select__optionGroup_594wa"};
-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-df379e2f.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-2302e0a0.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-df379e2f.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-2302e0a0.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-2302e0a0.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-2302e0a0.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

@@ -1,4 +1,4 @@
-/* hash: 1g4jh */
+/* hash: m9tu5 */
 :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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
@@ -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 {
@@ -37,21 +39,21 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_e6vg1 {
+} .select__component_y0hjf {
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_e6vg1 {
+} .select__popoverInner_y0hjf {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     background: transparent;
     border-radius: 0;
     position: relative;
-} .select__popoverInner_e6vg1.select__popoverInner_e6vg1 {
+} .select__popoverInner_y0hjf.select__popoverInner_y0hjf {
     box-shadow: none;
     border: none;
-} .select__optionsListWrapper_e6vg1 {
+} .select__optionsListWrapper_y0hjf {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
@@ -60,7 +62,7 @@
     background: var(--select-option-background);
     overflow: hidden;
     will-change: transform;
-} .select__optionsListBorder_e6vg1 {
+} .select__optionsListBorder_y0hjf {
     position: absolute;
     top: 0;
     right: 0;
@@ -69,7 +71,7 @@
     box-shadow: inset 0 0 0 1px var(--color-light-neutral-300);
     border-radius: inherit;
     pointer-events: none;
-} .select__nativeSelect_e6vg1 {
+} .select__nativeSelect_y0hjf {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -82,12 +84,12 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_e6vg1 {
+} .select__block_y0hjf {
     width: 100%;
-} .select__emptySearchPlaceholder_e6vg1 {
+} .select__emptySearchPlaceholder_y0hjf {
     text-align: center;
-} .select__search_e6vg1 {
+} .select__search_y0hjf {
     margin: var(--gap-s) var(--gap-s) 0
-} .select__search_e6vg1:last-child {
+} .select__search_y0hjf:last-child {
         margin-bottom: var(--gap-s);
     }

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-df379e2f.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-2302e0a0.js';
+import './components/list-mobile/list-modal-mobile.js';

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

@@ -1,4 +1,4 @@
-/* hash: 1pcqs */
+/* hash: ljllc */
 :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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */
 } :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 */ /* 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 */ /* 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 */ /* 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 */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -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 {
@@ -27,30 +29,30 @@
     /* checkmark */
 
     /* optgroup */
-} .select__sheet_594wa {
+} .select__sheet_15rrd {
     overflow: hidden;
-} .select__sheetContent_594wa.select__sheetContent_594wa {
+} .select__sheetContent_15rrd.select__sheetContent_15rrd {
     padding: 0
-} .select__sheetContent_594wa.select__sheetContent_594wa .select__modalContent_594wa {
+} .select__sheetContent_15rrd.select__sheetContent_15rrd .select__modalContent_15rrd {
         padding: 0;
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_594wa {
+    } .select__sheetContainer_15rrd {
     padding: 0;
-} .select__optionsListWrapper_594wa {
+} .select__optionsListWrapper_15rrd {
     flex: 1;
-} .select__optionsList_594wa.select__optionsList_594wa {
+} .select__optionsList_15rrd.select__optionsList_15rrd {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_594wa {
+} .select__scrollbar_15rrd {
     flex: 1;
-} .select__search_594wa {
+} .select__search_15rrd {
     padding: var(--gap-xs);
-} .select__option_594wa.select__option_594wa {
+} .select__option_15rrd.select__option_15rrd {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
-} .select__option_594wa.select__option_594wa:before {
+} .select__option_15rrd.select__option_15rrd:before {
         display: none;
-    } .select__optionGroup_594wa.select__optionGroup_594wa {
+    } .select__optionGroup_15rrd.select__optionGroup_15rrd {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }