@alfalab/core-components 45.6.0-beta.1 → 45.6.0-beta.2

package/select/modern-pcss-raw/components/arrow/index.js

@@ -1,4 +0,0 @@
-export { Arrow } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/icons-glyph/ChevronDownMIcon';

package/select/modern-pcss-raw/components/base-checkmark/Component.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { CheckmarkProps } from "../../typings";
-declare const BaseCheckmark: ({ selected, disabled, className, multiple, }: CheckmarkProps) => React.JSX.Element;
-export { BaseCheckmark };

package/select/modern-pcss-raw/components/base-checkmark/Component.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { Checkbox } from '../../../../checkbox/modern-pcss-raw';
-import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
-
-const styles = {"checkmark":"checkmark","single":"single","selected":"selected"};
-require('./index.css');
-
-const BaseCheckmark = ({ selected, disabled = false, className, multiple, }) => {
-    const checkmarkClassNames = cn(styles.checkmark, className, {
-        [styles.single]: !multiple,
-        [styles.selected]: selected,
-    });
-    return multiple ? (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 'm', hiddenInput: true })) : (React.createElement(CheckmarkMIcon, { className: checkmarkClassNames }));
-};
-
-export { BaseCheckmark };

package/select/modern-pcss-raw/components/base-checkmark/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/select/modern-pcss-raw/components/base-checkmark/index.js

@@ -1,5 +0,0 @@
-export { BaseCheckmark } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../../../checkbox/modern-pcss-raw';
-import '@alfalab/icons-glyph/CheckmarkMIcon';

package/select/modern-pcss-raw/components/base-option/Component.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { OptionProps } from "../../typings";
-declare const BaseOption: FC<OptionProps>;
-export { BaseOption };

package/select/modern-pcss-raw/components/base-option/Component.js

@@ -1,34 +0,0 @@
-import React, { isValidElement } from 'react';
-import cn from 'classnames';
-import { BaseCheckmark } from '../base-checkmark/Component.js';
-import '../../../../checkbox/modern-pcss-raw';
-import '@alfalab/icons-glyph/CheckmarkMIcon';
-
-const styles = {"option":"option","disabled":"disabled","checkmarkBefore":"checkmarkBefore","mobile":"mobile","checkmarkAfter":"checkmarkAfter","textContent":"textContent","selected":"selected","highlighted":"highlighted","content":"content"};
-require('./index.css');
-
-const BaseOption = ({ className, option, children, selected, highlighted, disabled, multiple, Checkmark = BaseCheckmark, checkmarkPosition = multiple ? 'before' : 'after', innerProps, dataTestId, mobile = false, }) => {
-    const content = children || option.content || option.key;
-    const { showCheckMark = true } = option;
-    const isTextContent = !isValidElement(content);
-    const renderCheckmark = () => {
-        if (Checkmark && showCheckMark) {
-            return React.createElement(Checkmark, { disabled: disabled, selected: selected, multiple: multiple });
-        }
-        return null;
-    };
-    return (React.createElement("div", { ...innerProps, className: cn(styles.option, className, {
-            [styles.highlighted]: !mobile && highlighted,
-            [styles.selected]: selected,
-            [styles.disabled]: disabled,
-            [styles.textContent]: isTextContent,
-            [styles.mobile]: mobile,
-            [styles.checkmarkAfter]: !isTextContent && checkmarkPosition === 'after',
-            [styles.checkmarkBefore]: !isTextContent && checkmarkPosition === 'before',
-        }), "data-test-id": dataTestId },
-        checkmarkPosition === 'before' && renderCheckmark(),
-        React.createElement("div", { className: cn(styles.content) }, content),
-        checkmarkPosition === 'after' && renderCheckmark()));
-};
-
-export { BaseOption };

package/select/modern-pcss-raw/components/base-option/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/select/modern-pcss-raw/components/base-option/index.js

@@ -1,6 +0,0 @@
-export { BaseOption } from './Component.js';
-import 'react';
-import 'classnames';
-import '../base-checkmark/Component.js';
-import '../../../../checkbox/modern-pcss-raw';
-import '@alfalab/icons-glyph/CheckmarkMIcon';

package/select/modern-pcss-raw/components/base-select/Component.d.ts

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

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

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

package/select/modern-pcss-raw/components/base-select/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

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

@@ -1,11 +0,0 @@
-export { BaseSelect } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import '@juggle/resize-observer';
-import 'classnames';
-import 'compute-scroll-into-view';
-import 'downshift';
-import '../../../../shared/modern-pcss-raw';
-import '@alfalab/hooks';
-import '../../utils.js';
-import '../native-select/Component.js';

package/select/modern-pcss-raw/components/checkmark/Component.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { CheckmarkProps } from "../../typings";
-declare const Checkmark: ({ selected, disabled, className, multiple, position, }: CheckmarkProps) => React.JSX.Element;
-export { Checkmark };

package/select/modern-pcss-raw/components/checkmark/Component.js

@@ -1,22 +0,0 @@
-import React, { useCallback } from 'react';
-import cn from 'classnames';
-import { Badge } from '../../../../badge/modern-pcss-raw';
-import { Checkbox } from '../../../../checkbox/modern-pcss-raw';
-import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import CheckmarkMIcon from '@alfalab/icons-glyph/CheckmarkMIcon';
-
-const styles = {"checkmark":"checkmark","after":"after","single":"single","selected":"selected","before":"before","multiple":"multiple","colorIcon":"colorIcon"};
-require('./index.css');
-
-const Checkmark = ({ selected, disabled = false, className, multiple, position = 'before', }) => {
-    const single = !multiple;
-    const checkmarkClassNames = cn(styles.checkmark, className, styles[position], {
-        [styles.multiple]: !single,
-        [styles.single]: single,
-        [styles.selected]: selected,
-    });
-    const handleCheckboxClick = useCallback((event) => event.stopPropagation(), []);
-    return single ? (React.createElement("div", { className: checkmarkClassNames }, position === 'before' ? (React.createElement(Badge, { className: styles.after, view: 'icon', size: 'm', iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, { className: styles.colorIcon }) })) : (React.createElement(CheckmarkMIcon, { className: cn(styles.displayIcon) })))) : (React.createElement(Checkbox, { checked: selected, disabled: disabled, className: checkmarkClassNames, size: 'm', onClick: handleCheckboxClick }));
-};
-
-export { Checkmark };

package/select/modern-pcss-raw/components/checkmark/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/select/modern-pcss-raw/components/checkmark/index.js

@@ -1,7 +0,0 @@
-export { Checkmark } from './Component.js';
-import 'react';
-import 'classnames';
-import '../../../../badge/modern-pcss-raw';
-import '../../../../checkbox/modern-pcss-raw';
-import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/CheckmarkMIcon';

package/select/modern-pcss-raw/components/checkmark-mobile/Component.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { CheckmarkProps } from "../../typings";
-declare const Checkmark: ({ selected, className }: CheckmarkProps) => React.JSX.Element;
-export { Checkmark };

package/select/modern-pcss-raw/components/checkmark-mobile/Component.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
-
-const styles = {"checkmark":"checkmark","selected":"selected","displayIcon":"displayIcon","displayBadge":"displayBadge"};
-require('./index.css');
-
-const Checkmark = ({ selected, className }) => (React.createElement("div", { className: cn(styles.checkmark, className, {
-        [styles.selected]: selected,
-    }) },
-    React.createElement(CheckmarkMIcon, { className: styles.displayIcon })));
-
-export { Checkmark };

package/select/modern-pcss-raw/components/checkmark-mobile/index.d.ts

@@ -1 +0,0 @@
-export * from "./Component";

package/select/modern-pcss-raw/components/checkmark-mobile/index.js

@@ -1,4 +0,0 @@
-export { Checkmark } from './Component.js';
-import 'react';
-import 'classnames';
-import '@alfalab/icons-glyph/CheckmarkMIcon';

package/select/modern-pcss-raw/components/field/Component.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ElementType } from "react";
-import { FormControlProps } from "../../../../form-control";
-import { FieldProps as BaseFieldProps } from "../../typings";
-type FieldProps = {
-    /**
-     * Компонент FormControl
-     */
-    FormControlComponent?: ElementType;
-};
-declare const Field: ({ size, open, multiple, error, hint, disabled, label, labelView, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, setSelectedItems, toggleMenu, Arrow, innerProps, dataTestId, fieldClassName, FormControlComponent, ...restProps }: BaseFieldProps & FormControlProps & FieldProps) => React.JSX.Element;
-export { Field };