@alfalab/core-components 42.15.0 → 43.1.0

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

@@ -5,13 +5,14 @@ var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
+var computeScrollIntoView = require('compute-scroll-into-view');
 var downshift = require('downshift');
-var coreComponentsPopover = require('../../../../popover/cssm');
 var coreComponentsShared = require('../../../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var utils = require('../../utils.js');
 var components_nativeSelect_Component = require('../native-select/Component.js');
 var styles = require('./index.module.css');
+var mobileStyles = require('./mobile.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -19,29 +20,45 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var mobileStyles__default = /*#__PURE__*/_interopDefaultCompat(mobileStyles);
 
+var itemToString = function (option) { return (option ? option.key : ''); };
+var isItemDisabled = function (option) { return Boolean(option === null || option === void 0 ? void 0 : option.disabled); };
 var BaseSelect = React.forwardRef(
 // TODO: 😭
 // eslint-disable-next-line complexity
 function (_a, ref) {
     var _b;
-    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, popperClassName = _a.popperClassName, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.nativeSelect, nativeSelect = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.popoverPosition, popoverPosition = _l === void 0 ? 'bottom-start' : _l, _m = _a.preventFlip, preventFlip = _m === void 0 ? true : _m, _o = _a.optionsListWidth, optionsListWidth = _o === void 0 ? 'content' : _o, name = _a.name, id = _a.id, selected = _a.selected, _p = _a.size, size = _p === void 0 ? 's' : _p, _q = _a.optionsSize, optionsSize = _q === void 0 ? size : _q, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _r = _a.fieldProps, fieldProps = _r === void 0 ? {} : _r, _s = _a.optionsListProps, optionsListProps = _s === void 0 ? {} : _s, _t = _a.optionProps, optionProps = _t === void 0 ? {} : _t, _u = _a.searchProps, searchProps = _u === void 0 ? {} : _u, _v = _a.showSearch, showSearch = _v === void 0 ? false : _v, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, onScroll = _a.onScroll, Arrow = _a.Arrow, _w = _a.Field, Field = _w === void 0 ? function () { return null; } : _w, _x = _a.OptionsList, OptionsList = _x === void 0 ? function () { return null; } : _x, _y = _a.Optgroup, Optgroup = _y === void 0 ? function () { return null; } : _y, _z = _a.Option, Option = _z === void 0 ? function () { return null; } : _z, _0 = _a.Search, Search = _0 === void 0 ? function () { return null; } : _0, updatePopover = _a.updatePopover, zIndexPopover = _a.zIndexPopover, _1 = _a.showEmptyOptionsList, showEmptyOptionsList = _1 === void 0 ? false : _1, visibleOptions = _a.visibleOptions;
+    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionGroupClassName = _a.optionGroupClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, popperClassName = _a.popperClassName, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.nativeSelect, nativeSelect = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.popoverPosition, popoverPosition = _l === void 0 ? 'bottom-start' : _l, _m = _a.preventFlip, preventFlip = _m === void 0 ? true : _m, _o = _a.optionsListWidth, optionsListWidth = _o === void 0 ? 'content' : _o, name = _a.name, id = _a.id, selected = _a.selected, _p = _a.size, size = _p === void 0 ? 's' : _p, _q = _a.optionsSize, optionsSize = _q === void 0 ? size : _q, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _r = _a.fieldProps, fieldProps = _r === void 0 ? {} : _r, _s = _a.optionsListProps, optionsListProps = _s === void 0 ? {} : _s, _t = _a.optionProps, optionProps = _t === void 0 ? {} : _t, _u = _a.searchProps, searchProps = _u === void 0 ? {} : _u, _v = _a.showSearch, showSearch = _v === void 0 ? false : _v, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, onScroll = _a.onScroll, Arrow = _a.Arrow, _w = _a.Field, Field = _w === void 0 ? function () { return null; } : _w, _x = _a.OptionsList, OptionsList = _x === void 0 ? function () { return null; } : _x, _y = _a.Optgroup, Optgroup = _y === void 0 ? function () { return null; } : _y, _z = _a.Option, Option = _z === void 0 ? function () { return null; } : _z, _0 = _a.Search, Search = _0 === void 0 ? function () { return null; } : _0, updatePopover = _a.updatePopover, zIndexPopover = _a.zIndexPopover, _1 = _a.showEmptyOptionsList, showEmptyOptionsList = _1 === void 0 ? false : _1, visibleOptions = _a.visibleOptions, view = _a.view, _2 = _a.isBottomSheet, isBottomSheet = _2 === void 0 ? true : _2, footer = _a.footer, swipeable = _a.swipeable, modalProps = _a.modalProps, modalFooterProps = _a.modalFooterProps, modalHeaderProps = _a.modalHeaderProps, bottomSheetProps = _a.bottomSheetProps, Popover = _a.Popover, ModalMobile = _a.ModalMobile, BottomSheet = _a.BottomSheet;
     var rootRef = React.useRef(null);
     var fieldRef = React.useRef(null);
     var listRef = React.useRef(null);
     var initiatorRef = React.useRef(null);
     var searchRef = React.useRef(null);
-    var _2 = React__default.default.useState(''), searchState = _2[0], setSearchState = _2[1];
-    var _3 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
+    var alreadyClickedRef = React.useRef(false);
+    var scrollableContainerRef = React.useRef(null);
+    var _3 = React__default.default.useState(''), searchState = _3[0], setSearchState = _3[1];
+    var _4 = typeof (searchProps === null || searchProps === void 0 ? void 0 : searchProps.value) === 'string'
         ? [searchProps.value, searchProps.onChange]
-        : [searchState, setSearchState], search = _3[0], setSearch = _3[1];
-    var itemToString = function (option) { return (option ? option.key : ''); };
+        : [searchState, setSearchState], search = _4[0], setSearch = _4[1];
     var accessor = searchProps.accessor || utils.defaultAccessor;
-    var _4 = React.useMemo(function () {
-        return utils.processOptions(options, selected, function (option) {
-            return utils.defaultFilterFn(accessor(option), search);
+    var filterFn = searchProps.filterFn || utils.defaultFilterFn;
+    var _5 = React.useMemo(function () { return utils.processOptions(options, selected, function (option) { return filterFn(accessor(option), search); }); }, [filterFn, accessor, options, search, selected]), filteredOptions = _5.filteredOptions, flatOptions = _5.flatOptions, selectedOptions = _5.selectedOptions;
+    var scrollIntoView = function (node) {
+        if (!node || view === 'mobile')
+            return;
+        requestAnimationFrame(function () {
+            var actions = computeScrollIntoView.compute(node, {
+                boundary: listRef.current,
+                block: 'nearest',
+                scrollMode: 'if-needed',
+            });
+            actions.forEach(function (action) {
+                var el = action.el, top = action.top;
+                el.scrollTop = top;
+            });
         });
-    }, [accessor, options, search, selected]), filteredOptions = _4.filteredOptions, flatOptions = _4.flatOptions, selectedOptions = _4.selectedOptions;
+    };
     var useMultipleSelectionProps = {
         itemToString: itemToString,
         onSelectedItemsChange: function (changes) {
@@ -68,14 +85,15 @@ function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _5 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _5.selectedItems, addSelectedItem = _5.addSelectedItem, setSelectedItems = _5.setSelectedItems, removeSelectedItem = _5.removeSelectedItem, getDropdownProps = _5.getDropdownProps;
-    var _6 = downshift.useCombobox({
+    var _6 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _6.selectedItems, addSelectedItem = _6.addSelectedItem, setSelectedItems = _6.setSelectedItems, removeSelectedItem = _6.removeSelectedItem, getDropdownProps = _6.getDropdownProps;
+    var _7 = downshift.useCombobox({
         id: id,
         isOpen: openProp,
-        circularNavigation: circularNavigation,
         items: flatOptions,
         itemToString: itemToString,
+        isItemDisabled: isItemDisabled,
         defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
+        scrollIntoView: scrollIntoView,
         onIsOpenChange: function (changes) {
             if (onOpen) {
                 /**
@@ -92,7 +110,7 @@ function (_a, ref) {
                 }, 0);
             }
             if (showSearch) {
-                if (changes.isOpen) {
+                if (changes.isOpen && view === 'desktop') {
                     setTimeout(function () {
                         var _a;
                         (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -103,14 +121,37 @@ function (_a, ref) {
                 }
             }
         },
+        // eslint-disable-next-line complexity
         stateReducer: function (state, actionAndChanges) {
             var type = actionAndChanges.type, changes = actionAndChanges.changes;
             var selectedItem = changes.selectedItem;
             switch (type) {
+                case downshift.useCombobox.stateChangeTypes.InputBlur:
+                    if (view === 'mobile') {
+                        return state;
+                    }
+                    return changes;
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+                    if (!circularNavigation && state.highlightedIndex === options.length - 1) {
+                        return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
+                    }
+                    return changes;
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+                    if (!circularNavigation && state.highlightedIndex === 0) {
+                        return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
+                    }
+                    return changes;
                 case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
                 case downshift.useCombobox.stateChangeTypes.ItemClick:
-                    initiatorRef.current = selectedItem;
-                    if (selectedItem && !selectedItem.disabled) {
+                    initiatorRef.current = selectedItem || null;
+                    if (selectedItem && !selectedItem.disabled && !alreadyClickedRef.current) {
+                        // TODO!!! Проблема downshift + React 18. ItemClick срабатывает дважды. См https://github.com/downshift-js/downshift/issues/1384
+                        if (view === 'mobile' && React__default.default.version.indexOf('18') === 0) {
+                            alreadyClickedRef.current = true;
+                            setTimeout(function () {
+                                alreadyClickedRef.current = false;
+                            });
+                        }
                         var alreadySelected = selectedItems.includes(selectedItem);
                         var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
                         if (alreadySelected && allowRemove) {
@@ -125,7 +166,7 @@ function (_a, ref) {
                             }
                         }
                     }
-                    return tslib.__assign(tslib.__assign({}, changes), { isOpen: !closeOnSelect, 
+                    return tslib.__assign(tslib.__assign({}, changes), { isOpen: !closeOnSelect || (view === 'mobile' && multiple), 
                         // при closeOnSelect === false - сохраняем подсвеченный индекс
                         highlightedIndex: state.isOpen && !closeOnSelect
                             ? state.highlightedIndex
@@ -134,9 +175,20 @@ function (_a, ref) {
                     return changes;
             }
         },
-    }), open = _6.isOpen, getMenuProps = _6.getMenuProps, getInputProps = _6.getInputProps, getItemProps = _6.getItemProps, getComboboxProps = _6.getComboboxProps, getLabelProps = _6.getLabelProps, highlightedIndex = _6.highlightedIndex, toggleMenu = _6.toggleMenu, openMenu = _6.openMenu, setHighlightedIndex = _6.setHighlightedIndex;
+    }), open = _7.isOpen, getMenuProps = _7.getMenuProps, getInputProps = _7.getInputProps, getItemProps = _7.getItemProps, getLabelProps = _7.getLabelProps, highlightedIndex = _7.highlightedIndex, toggleMenu = _7.toggleMenu, openMenu = _7.openMenu, closeMenu = _7.closeMenu, setHighlightedIndex = _7.setHighlightedIndex;
     var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
     var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
+    var handleEntered = function (node, isAppearing) {
+        var _a, _b, _c, _d, _e;
+        if (showSearch)
+            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (isBottomSheet) {
+            (_c = (_b = bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.transitionProps) === null || _b === void 0 ? void 0 : _b.onEntered) === null || _c === void 0 ? void 0 : _c.call(_b, node, isAppearing);
+        }
+        else {
+            (_e = (_d = modalProps === null || modalProps === void 0 ? void 0 : modalProps.transitionProps) === null || _d === void 0 ? void 0 : _d.onEntered) === null || _e === void 0 ? void 0 : _e.call(_d, node, isAppearing);
+        }
+    };
     var handleFieldFocus = function (event) {
         if (onFocus)
             onFocus(event);
@@ -145,16 +197,21 @@ function (_a, ref) {
         }
     };
     var handleFieldBlur = function (event) {
-        var _a;
-        var isNextFocusInsideList = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains((event.relatedTarget || document.activeElement));
-        if (!isNextFocusInsideList) {
-            if (onBlur)
-                onBlur(event);
-            inputProps.onBlur(event);
+        var _a, _b;
+        if (view === 'desktop') {
+            var isNextFocusInsideList = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.contains((event.relatedTarget || document.activeElement));
+            if (!isNextFocusInsideList) {
+                if (onBlur)
+                    onBlur(event);
+                (_b = inputProps.onBlur) === null || _b === void 0 ? void 0 : _b.call(inputProps, event);
+            }
         }
+        if (view === 'mobile' && !open && onBlur)
+            onBlur(event);
     };
     var handleFieldKeyDown = function (event) {
-        inputProps.onKeyDown(event);
+        var _a;
+        (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         // https://caniuse.com/?search=KeyboardEvent.key
         var isKeyUnsupported = event.key === 'Unidentified';
         if (autocomplete &&
@@ -189,24 +246,19 @@ function (_a, ref) {
             return option.selected ? acc.concat(flatOptions[index]) : acc;
         }, []));
     }, [flatOptions, setSelectedItems]);
-    var getOptionProps = React.useCallback(function (option, index) { return (tslib.__assign(tslib.__assign({}, optionProps), { className: optionClassName, innerProps: getItemProps({
-            index: index,
-            item: option,
-            disabled: option.disabled,
-            onMouseDown: function (event) { return event.preventDefault(); },
-        }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.some(function (_a) {
-            var key = _a.key;
-            return key === option.key;
-        }), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'option') })); }, [
-        dataTestId,
-        getItemProps,
-        highlightedIndex,
-        multiple,
-        optionClassName,
-        optionProps,
-        optionsSize,
-        selectedItems,
-    ]);
+    var getOptionProps = function (option, index) {
+        var _a;
+        return (tslib.__assign(tslib.__assign({}, optionProps), { mobile: view === 'mobile', className: cn__default.default(optionClassName, (_a = {},
+                _a[mobileStyles__default.default.option] = view === 'mobile',
+                _a)), innerProps: getItemProps({
+                index: index,
+                item: option,
+                onMouseDown: function (event) { return event.preventDefault(); },
+            }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.some(function (_a) {
+                var key = _a.key;
+                return key === option.key;
+            }), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'option') }));
+    };
     React.useEffect(function () {
         if (defaultOpen)
             openMenu();
@@ -218,7 +270,7 @@ function (_a, ref) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var calcOptionsListWidth = React.useCallback(function () {
-        if (listRef.current) {
+        if (view === 'desktop' && listRef.current) {
             var widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
             var optionsListMinWidth = rootRef.current
                 ? rootRef.current.getBoundingClientRect().width
@@ -226,46 +278,40 @@ function (_a, ref) {
             listRef.current.setAttribute('style', '');
             listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
         }
-    }, [optionsListWidth]);
+    }, [view, optionsListWidth]);
     React.useEffect(function () {
-        var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
-        var observer = new ResizeObserver(calcOptionsListWidth);
-        if (rootRef.current) {
-            observer.observe(rootRef.current);
+        if (view === 'desktop') {
+            var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
+            var observer_1 = new ResizeObserver_1(calcOptionsListWidth);
+            if (rootRef.current) {
+                observer_1.observe(rootRef.current);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
         }
-        return function () {
-            observer.disconnect();
-        };
-    }, [calcOptionsListWidth, open, optionsListWidth]);
+        return coreComponentsShared.fnUtils.noop;
+    }, [view, calcOptionsListWidth, open, optionsListWidth]);
     hooks.useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
         filteredOptions,
         selectedItems,
     ]);
-    var renderValue = React.useCallback(function () {
+    var renderValue = function () {
         return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
-    }, [selectedItems, name]);
-    var renderNativeSelect = React.useCallback(function () {
+    };
+    var renderNativeSelect = function () {
         var value = multiple
             ? selectedItems.map(function (option) { return option.key; })
             : (selectedItems[0] || {}).key;
         return (React__default.default.createElement(components_nativeSelect_Component.NativeSelect, tslib.__assign({}, menuProps, { className: styles__default.default.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: filteredOptions })));
-    }, [
-        multiple,
-        selectedItems,
-        disabled,
-        name,
-        handleNativeSelectChange,
-        filteredOptions,
-        menuProps,
-    ]);
-    var _7 = optionsListProps, header = _7.header, emptyPlaceholder = _7.emptyPlaceholder;
-    var renderOptionsListHeader = function () {
+    };
+    var renderSearch = function () {
         var _a;
-        if (!showSearch && !header) {
+        var _b, _c;
+        if (!showSearch)
             return null;
-        }
         var handleClear = function (event) {
             var _a, _b;
             setSearch === null || setSearch === void 0 ? void 0 : setSearch('');
@@ -276,12 +322,21 @@ function (_a, ref) {
             setSearch === null || setSearch === void 0 ? void 0 : setSearch(payload.value);
             (_b = (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event, payload);
         };
-        return (React__default.default.createElement(React__default.default.Fragment, null,
-            header,
-            showSearch && (React__default.default.createElement(Search, tslib.__assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: handleChange, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn__default.default(styles__default.default.search, (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.className), ref: searchRef })))));
+        return (React__default.default.createElement(Search, tslib.__assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { value: search, onChange: handleChange, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn__default.default((_b = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _b === void 0 ? void 0 : _b.className, (_a = {},
+                _a[styles__default.default.search] = view === 'desktop',
+                _a[mobileStyles__default.default.search] = view === 'mobile',
+                _a)), ref: mergeRefs__default.default([searchRef, ((_c = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _c === void 0 ? void 0 : _c.ref) || null]) })));
+    };
+    var _8 = optionsListProps, header = _8.header, emptyPlaceholder = _8.emptyPlaceholder;
+    var renderOptionsListHeader = function () {
+        if (header || (view === 'desktop' && showSearch)) {
+            return (React__default.default.createElement(React__default.default.Fragment, null,
+                header,
+                view === 'desktop' && renderSearch()));
+        }
+        return null;
     };
-    var needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList || showSearch;
-    var renderEmptyPlaceholder = React.useCallback(function () {
+    var renderEmptyPlaceholder = function () {
         if (emptyPlaceholder) {
             return emptyPlaceholder;
         }
@@ -289,15 +344,66 @@ function (_a, ref) {
             return React__default.default.createElement("div", { className: styles__default.default.emptySearchPlaceholder }, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C");
         }
         return undefined;
-    }, [emptyPlaceholder, showSearch]);
-    return (React__default.default.createElement("div", tslib.__assign({}, getComboboxProps(tslib.__assign(tslib.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
+    };
+    var renderOptionsList = function () {
+        var _a, _b, _c;
+        if (flatOptions.length === 0 && !showEmptyOptionsList && !showSearch)
+            return null;
+        var listProps = optionsListProps;
+        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, view === 'mobile' && mobileStyles__default.default.optionsListWrapper, view === 'desktop' && styles__default.default.optionsListWrapper) }),
+            React__default.default.createElement(OptionsList, tslib.__assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn__default.default((_a = {}, _a[mobileStyles__default.default.optionsList] = view === 'mobile', _a)), scrollbarClassName: cn__default.default((_b = {}, _b[mobileStyles__default.default.scrollbar] = view === 'mobile', _b)), 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: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn__default.default(optionGroupClassName, (_c = {},
+                    _c[mobileStyles__default.default.optionGroup] = view === 'mobile',
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll })),
+            view === 'desktop' && React__default.default.createElement("div", { className: styles__default.default.optionsListBorder })));
+    };
+    var renderInPopover = function () {
+        if (!nativeSelect && Popover) {
+            return (React__default.default.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles__default.default.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, renderOptionsList()));
+        }
+        return null;
+    };
+    var renderInBottomSheet = function () {
+        if (!nativeSelect && BottomSheet) {
+            return (React__default.default.createElement(BottomSheet, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'bottom-sheet'), open: open, className: mobileStyles__default.default.sheet, contentClassName: mobileStyles__default.default.sheetContent, containerClassName: mobileStyles__default.default.sheetContainer, title: label || placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable, initialHeight: showSearch ? 'full' : 'default' }, bottomSheetProps, { scrollableContainerRef: scrollableContainerRef, onClose: function () {
+                    var _a;
+                    closeMenu();
+                    (_a = bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.onClose) === null || _a === void 0 ? void 0 : _a.call(bottomSheetProps);
+                }, transitionProps: tslib.__assign(tslib.__assign({}, bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.transitionProps), { onEntered: handleEntered }), bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                    renderSearch(), bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 :
+                    bottomSheetProps.bottomAddons), containerProps: tslib.__assign(tslib.__assign({}, bottomSheetProps === null || bottomSheetProps === void 0 ? void 0 : bottomSheetProps.containerProps), { onScroll: onScroll }) }), renderOptionsList()));
+        }
+        return null;
+    };
+    var renderInModalMobile = function () {
+        if (!nativeSelect && ModalMobile) {
+            return (React__default.default.createElement(ModalMobile, tslib.__assign({ open: open, hasCloser: true }, modalProps, { onClose: function () {
+                    var _a;
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
+                    closeMenu();
+                    (_a = modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose) === null || _a === void 0 ? void 0 : _a.call.apply(_a, tslib.__spreadArray([modalProps], args, false));
+                }, contentClassName: cn__default.default(mobileStyles__default.default.sheetContent, modalProps === null || modalProps === void 0 ? void 0 : modalProps.contentClassName), ref: mergeRefs__default.default([
+                    scrollableContainerRef,
+                    modalProps === null || modalProps === void 0 ? void 0 : modalProps.ref,
+                ]), wrapperProps: tslib.__assign(tslib.__assign({}, modalProps === null || modalProps === void 0 ? void 0 : modalProps.wrapperProps), { onScroll: onScroll }), transitionProps: tslib.__assign(tslib.__assign({}, modalProps === null || modalProps === void 0 ? void 0 : modalProps.transitionProps), { onEntered: handleEntered }) }),
+                React__default.default.createElement(ModalMobile.Header, tslib.__assign({ hasCloser: true, sticky: true }, modalHeaderProps, { title: undefined, bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                        renderSearch(), modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 :
+                        modalHeaderProps.bottomAddons) }), (modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 : modalHeaderProps.title) || label || placeholder),
+                React__default.default.createElement(ModalMobile.Content, { flex: true, className: mobileStyles__default.default.modalContent }, renderOptionsList()),
+                (modalFooterProps === null || modalFooterProps === void 0 ? void 0 : modalFooterProps.children) && React__default.default.createElement(ModalMobile.Footer, tslib.__assign({}, modalFooterProps))));
+        }
+        return null;
+    };
+    return (React__default.default.createElement("div", tslib.__assign({}, (disabled && { 'aria-disabled': true }), { "aria-expanded": inputProps['aria-expanded'], "aria-haspopup": 'listbox', role: inputProps.role, className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.block] = block, _b), className), ref: rootRef, onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": coreComponentsShared.getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
         React__default.default.createElement(Field, tslib.__assign({ selectedMultiple: selectedItems, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.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: mergeRefs__default.default([inputProps.ref]),
+                ref: inputProps.ref,
                 id: inputProps.id,
                 'aria-labelledby': inputProps['aria-labelledby'],
                 'aria-controls': inputProps['aria-controls'],
@@ -306,9 +412,9 @@ function (_a, ref) {
                     : undefined,
             }, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
-        !nativeSelect && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles__default.default.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, styles__default.default.optionsList) }),
-            React__default.default.createElement(OptionsList, tslib.__assign({}, optionsListProps, { setHighlightedIndex: setHighlightedIndex, 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: visibleOptions, onScroll: onScroll, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), emptyPlaceholder: renderEmptyPlaceholder() })),
-            React__default.default.createElement("div", { className: styles__default.default.optionsListBorder })))))));
+        view === 'desktop' && renderInPopover(),
+        view === 'mobile' && isBottomSheet && renderInBottomSheet(),
+        view === 'mobile' && !isBottomSheet && renderInModalMobile()));
 });
 
 exports.BaseSelect = BaseSelect;

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

@@ -6,13 +6,14 @@ require('react');
 require('react-merge-refs');
 require('@juggle/resize-observer');
 require('classnames');
+require('compute-scroll-into-view');
 require('downshift');
-require('../../../../popover/cssm');
 require('../../../../shared/cssm');
 require('@alfalab/hooks');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('./index.module.css');
+require('./mobile.module.css');
 
 
 

package/select/cssm/components/base-select/index.module.css

@@ -1,7 +1,7 @@
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-secondary: #e7e8ec; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {
 } :root {
@@ -49,7 +49,7 @@
     background: transparent;
     border-radius: 0;
     position: relative;
-} .optionsList {
+} .optionsListWrapper {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);

package/select/cssm/components/{base-select-mobile/index.module.css → base-select/mobile.module.css}

@@ -26,11 +26,6 @@
     /* checkmark */
 
     /* optgroup */
-} .component {
-    width: max-content;
-    position: relative;
-    outline: 0;
-    max-width: 100%;
 } .sheet {
     overflow: hidden;
 } .sheetContent {
@@ -41,8 +36,6 @@
         flex-direction: column;
     } .sheetContainer {
     padding: 0;
-} .block {
-    width: 100%;
 } .optionsListWrapper {
     flex: 1;
 } .optionsList {
@@ -51,8 +44,6 @@
     flex-direction: column;
 } .scrollbar {
     flex: 1;
-} .emptySearchPlaceholder {
-    text-align: center;
 } .search {
     padding: var(--gap-xs);
 } /* width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

package/select/cssm/components/checkmark/index.module.css

@@ -1,6 +1,6 @@
 :root {
 } /* deprecated */ :root {
-    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-positive: #0cc44d;
     --color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {

package/select/cssm/components/field/index.module.css

@@ -1,8 +1,8 @@
 :root {
 } /* deprecated */ :root {
-    --color-light-border-link: #0072ef;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.66);
-    --color-light-text-tertiary: rgba(60, 60, 67, 0.4); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-link: #2288fa;
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {
 } :root {
@@ -31,8 +31,6 @@
     /* display */
 
     /* управляет видимостью иконки ошибки, если она стоит рядом с другой иконкой */
-
-    /* mobile */
 } :root {
     --select-arrow-hover-opacity: 0.7;
 

package/select/cssm/components/footer/Component.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+    clearText?: string;
+    applyText?: string;
+    dataTestId?: string;
+};
+declare const Footer: ({ handleApply, handleClear, showClear, clearText, applyText, dataTestId, }: FooterProps) => React.JSX.Element;
+export { FooterProps, Footer };

package/select/cssm/components/{base-select-mobile/footer → footer}/Component.js

@@ -2,8 +2,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var coreComponentsBaseModal = require('../../../../../base-modal/cssm');
-var mobile = require('../../../../../button/cssm/mobile');
+var coreComponentsBaseModal = require('../../../../base-modal/cssm');
+var mobile = require('../../../../button/cssm/mobile');
+var coreComponentsShared = require('../../../../shared/cssm');
 var styles = require('./index.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -14,8 +15,8 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var Footer = function (_a) {
     var _b;
-    var handleApply = _a.handleApply, handleClear = _a.handleClear, showClear = _a.showClear;
-    var _c = React.useContext(coreComponentsBaseModal.BaseModalContext), footerHighlighted = _c.footerHighlighted, setHasFooter = _c.setHasFooter;
+    var handleApply = _a.handleApply, handleClear = _a.handleClear, showClear = _a.showClear, _c = _a.clearText, clearText = _c === void 0 ? 'Сбросить' : _c, _d = _a.applyText, applyText = _d === void 0 ? 'Применить' : _d, dataTestId = _a.dataTestId;
+    var _e = React.useContext(coreComponentsBaseModal.BaseModalContext), footerHighlighted = _e.footerHighlighted, setHasFooter = _e.setHasFooter;
     React.useEffect(function () {
         setHasFooter(true);
     }, [setHasFooter]);
@@ -24,8 +25,8 @@ var Footer = function (_a) {
         tabIndex: 0, className: cn__default.default(styles__default.default.footer, (_b = {},
             _b[styles__default.default.highlighted] = footerHighlighted,
             _b)) },
-        showClear && (React__default.default.createElement(mobile.ButtonMobile, { size: 'm', view: 'secondary', className: styles__default.default.button, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")),
-        React__default.default.createElement(mobile.ButtonMobile, { size: 'm', view: 'primary', className: styles__default.default.button, onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C")));
+        showClear && (React__default.default.createElement(mobile.ButtonMobile, { size: 'm', view: 'secondary', className: styles__default.default.button, onClick: handleClear, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'clear') }, clearText)),
+        React__default.default.createElement(mobile.ButtonMobile, { size: 'm', view: 'primary', className: styles__default.default.button, onClick: handleApply, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'apply') }, applyText)));
 };
 
 exports.Footer = Footer;

package/select/cssm/components/footer/index.d.ts

@@ -0,0 +1 @@
+export { Footer } from "./Component";

package/select/cssm/components/footer/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_footer_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('../../../../base-modal/cssm');
+require('../../../../button/cssm/mobile');
+require('../../../../shared/cssm');
+require('./index.module.css');
+
+
+
+exports.Footer = components_footer_Component.Footer;

package/select/cssm/components/{base-select-mobile/footer → footer}/index.module.css

@@ -1,7 +1,7 @@
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-primary: #dcdcdd; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-border-primary: #d5d6dc; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 */
 } :root {
 } :root {