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

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

@@ -1,74 +1,82 @@
-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/cssm';
-import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import { defaultAccessor, defaultFilterFn, processOptions } from '../../utils.js';
-import { NativeSelect } from '../native-select/Component.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"component":"component","popoverInner":"popoverInner","optionsListWrapper":"optionsListWrapper","optionsListBorder":"optionsListBorder","nativeSelect":"nativeSelect","block":"block","emptySearchPlaceholder":"emptySearchPlaceholder","search":"search"};
-require('./index.css');
+var tslib = require('tslib');
+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 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');
 
-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');
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-/* eslint-disable no-nested-ternary */
-const itemToString = (option) => (option ? option.key : '');
-const isItemDisabled = (option) => Boolean(option?.disabled);
-const BaseSelect = forwardRef(
+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
-({ 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'
+function (_a, ref) {
+    var _b;
+    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 ? 48 : _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 scrollableContainerRef = React.useRef(null);
+    var onOpenRef = React.useRef(onOpen);
+    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];
-    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) => {
+        : [searchState, setSearchState], search = _4[0], setSearch = _4[1];
+    var accessor = searchProps.accessor || utils.defaultAccessor;
+    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(() => {
-            const actions = compute(node, {
+        requestAnimationFrame(function () {
+            var actions = computeScrollIntoView.compute(node, {
                 boundary: listRef.current,
                 block: 'nearest',
                 scrollMode: 'if-needed',
             });
-            actions.forEach((action) => {
-                const { el, top } = action;
+            actions.forEach(function (action) {
+                var el = action.el, top = action.top;
                 el.scrollTop = top;
             });
         });
     };
-    const useMultipleSelectionProps = {
-        itemToString,
-        onSelectedItemsChange: (changes) => {
+    var useMultipleSelectionProps = {
+        itemToString: itemToString,
+        onSelectedItemsChange: function (changes) {
             if (onChange) {
-                const { selectedItems = [] } = changes;
+                var _a = changes.selectedItems, selectedItems_1 = _a === void 0 ? [] : _a;
                 onChange({
-                    selectedMultiple: selectedItems,
-                    selected: selectedItems.length ? selectedItems[0] : null,
+                    selectedMultiple: selectedItems_1,
+                    selected: selectedItems_1.length ? selectedItems_1[0] : null,
                     initiator: initiatorRef.current,
-                    name,
+                    name: name,
                 });
                 initiatorRef.current = null;
             }
         },
-        stateReducer: (state, actionAndChanges) => {
-            const { type, changes } = actionAndChanges;
+        stateReducer: function (state, actionAndChanges) {
+            var type = actionAndChanges.type, changes = actionAndChanges.changes;
             if (!allowUnselect &&
-                type === useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace) {
+                type === downshift.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace) {
                 return state;
             }
             return changes;
@@ -78,20 +86,20 @@ const BaseSelect = forwardRef(
         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,
+    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,
         items: flatOptions,
-        itemToString,
-        isItemDisabled,
+        itemToString: itemToString,
+        isItemDisabled: isItemDisabled,
         defaultHighlightedIndex: selectedItems.length === 0 ? -1 : undefined,
-        scrollIntoView,
-        onSelectedItemChange: (changes) => {
-            const selectedItem = changes.selectedItem || initiatorRef.current;
+        scrollIntoView: scrollIntoView,
+        onSelectedItemChange: function (changes) {
+            var selectedItem = changes.selectedItem || initiatorRef.current;
             if (selectedItem && !selectedItem.disabled) {
-                const alreadySelected = selectedItems.includes(selectedItem);
-                const allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
+                var alreadySelected = selectedItems.includes(selectedItem);
+                var allowRemove = allowUnselect || (multiple && selectedItems.length > 1);
                 if (alreadySelected && allowRemove) {
                     removeSelectedItem(selectedItem);
                 }
@@ -105,7 +113,7 @@ const BaseSelect = forwardRef(
                 }
             }
         },
-        onIsOpenChange: (changes) => {
+        onIsOpenChange: function (changes) {
             if (onOpenRef.current) {
                 /**
                  *  Вызываем обработчик асинхронно.
@@ -113,57 +121,55 @@ const BaseSelect = forwardRef(
                  * Иначе при клике вне открытого селекта сначала сработает onOpen, который закроет селект,
                  * А затем сработает onClick кнопки открытия\закрытия с open=false и в итоге селект откроется снова.
                  */
-                setTimeout(() => {
-                    onOpenRef.current?.({
+                setTimeout(function () {
+                    var _a;
+                    (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, {
                         open: changes.isOpen,
-                        name,
+                        name: name,
                     });
                 }, 0);
             }
             if (showSearch) {
                 if (changes.isOpen && view === 'desktop') {
-                    setTimeout(() => {
-                        searchRef.current?.focus();
+                    setTimeout(function () {
+                        var _a;
+                        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                     }, 0);
                 }
                 else {
-                    setSearch?.('');
+                    setSearch === null || setSearch === void 0 ? void 0 : setSearch('');
                 }
             }
         },
-        stateReducer: (state, actionAndChanges) => {
-            const { type, changes } = actionAndChanges;
+        stateReducer: function (state, actionAndChanges) {
+            var type = actionAndChanges.type, changes = actionAndChanges.changes;
             switch (type) {
-                case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
                     if (!circularNavigation && state.highlightedIndex === options.length - 1) {
-                        return { ...changes, highlightedIndex: state.highlightedIndex };
+                        return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
                     }
                     return changes;
-                case useCombobox.stateChangeTypes.InputKeyDownArrowUp:
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
                     if (!circularNavigation && state.highlightedIndex === 0) {
-                        return { ...changes, highlightedIndex: state.highlightedIndex };
+                        return tslib.__assign(tslib.__assign({}, changes), { highlightedIndex: state.highlightedIndex });
                     }
                     return changes;
-                case useCombobox.stateChangeTypes.InputKeyDownEnter:
-                case useCombobox.stateChangeTypes.ItemClick: {
-                    const { selectedItem } = changes;
+                case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+                case downshift.useCombobox.stateChangeTypes.ItemClick: {
+                    var selectedItem = changes.selectedItem;
                     initiatorRef.current = selectedItem || null;
-                    return {
-                        ...changes,
-                        selectedItem: state.selectedItem === selectedItem ? null : selectedItem,
-                        isOpen: !closeOnSelect || (view === 'mobile' && multiple),
+                    return tslib.__assign(tslib.__assign({}, changes), { selectedItem: state.selectedItem === selectedItem ? null : selectedItem, isOpen: !closeOnSelect || (view === 'mobile' && multiple), 
                         // при closeOnSelect === false - сохраняем подсвеченный индекс
                         highlightedIndex: state.isOpen && !closeOnSelect
                             ? state.highlightedIndex
-                            : changes.highlightedIndex,
-                    };
+                            : changes.highlightedIndex });
                 }
                 default:
                     return changes;
             }
         },
-    });
-    useEffect(() => {
+    }), 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;
+    React.useEffect(function () {
         /*
          * При изменении openProp, состояние внутри downshift в useEnhancedReducer не меняется, поэтому меняем его таким способом
          * Скорее всего это исправят в будущих версиях downshift
@@ -177,42 +183,45 @@ const BaseSelect = forwardRef(
             }
         }
     }, [openProp, openMenu, closeMenu]);
-    const inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
-    const { ref: menuRef, ...menuProps } = getMenuProps({ ref: listRef }, { suppressRefError: true });
-    const handleEntered = (node, isAppearing) => {
+    var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
+    var _8 = getMenuProps({ ref: listRef }, { suppressRefError: true }), menuRef = _8.ref, menuProps = tslib.__rest(_8, ["ref"]);
+    var handleEntered = function (node, isAppearing) {
+        var _a, _b, _c, _d, _e;
         if (showSearch)
-            searchRef.current?.focus();
+            (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         if (isBottomSheet) {
-            bottomSheetProps?.transitionProps?.onEntered?.(node, isAppearing);
+            (_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 {
-            modalProps?.transitionProps?.onEntered?.(node, isAppearing);
+            (_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);
         }
     };
-    const handleFieldFocus = (event) => {
+    var handleFieldFocus = function (event) {
         if (onFocus)
             onFocus(event);
         if (autocomplete && !open) {
             openMenu();
         }
     };
-    const handleFieldBlur = (event) => {
+    var handleFieldBlur = function (event) {
+        var _a, _b, _c;
         if (view === 'desktop') {
-            const isNextFocusInsideField = fieldRef.current?.contains((event.relatedTarget || document.activeElement));
-            const isNextFocusInsideList = listRef.current?.contains((event.relatedTarget || document.activeElement));
+            var isNextFocusInsideField = (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.contains((event.relatedTarget || document.activeElement));
+            var isNextFocusInsideList = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.contains((event.relatedTarget || document.activeElement));
             if (!isNextFocusInsideField && !isNextFocusInsideList) {
                 if (onBlur)
                     onBlur(event);
-                inputProps.onBlur?.(event);
+                (_c = inputProps.onBlur) === null || _c === void 0 ? void 0 : _c.call(inputProps, event);
             }
         }
         if (view === 'mobile' && !open && onBlur)
             onBlur(event);
     };
-    const handleFieldKeyDown = (event) => {
-        inputProps.onKeyDown?.(event);
+    var handleFieldKeyDown = function (event) {
+        var _a;
+        (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
         // https://caniuse.com/?search=KeyboardEvent.key
-        const isKeyUnsupported = event.key === 'Unidentified';
+        var isKeyUnsupported = event.key === 'Unidentified';
         if (autocomplete &&
             !open &&
             (isKeyUnsupported || event.key.length === 1 || event.key === 'Backspace')) {
@@ -230,7 +239,7 @@ const BaseSelect = forwardRef(
                 toggleMenu();
         }
     };
-    const handleFieldClick = (event) => {
+    var handleFieldClick = function (event) {
         if (!autocomplete || event.target.tagName !== 'INPUT') {
             toggleMenu();
         }
@@ -238,170 +247,166 @@ const BaseSelect = forwardRef(
             openMenu();
         }
     };
-    const handleNativeSelectChange = useCallback((event) => {
+    var handleNativeSelectChange = React.useCallback(function (event) {
         setSelectedItems(
         // eslint-disable-next-line
-        [...event.target.options].reduce((acc, option, index) => option.selected ? acc.concat(flatOptions[index]) : acc, []));
+        tslib.__spreadArray([], event.target.options, true).reduce(function (acc, option, index) {
+            return 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(() => {
+    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();
     }, [defaultOpen, openMenu]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (openProp) {
             openMenu();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const calcOptionsListWidth = useCallback(() => {
+    var calcOptionsListWidth = React.useCallback(function () {
         if (view === 'desktop' && listRef.current) {
-            const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
-            const optionsListMinWidth = rootRef.current
+            var widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
+            var optionsListMinWidth = rootRef.current
                 ? rootRef.current.getBoundingClientRect().width
                 : 0;
             listRef.current.setAttribute('style', '');
-            listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
+            listRef.current.style[widthAttr] = "".concat(optionsListMinWidth, "px");
         }
     }, [view, optionsListWidth]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (view === 'desktop') {
-            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-            const observer = new ResizeObserver$1(calcOptionsListWidth);
+            var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
+            var observer_1 = new ResizeObserver_1(calcOptionsListWidth);
             if (rootRef.current) {
-                observer.observe(rootRef.current);
+                observer_1.observe(rootRef.current);
             }
-            return () => {
-                observer.disconnect();
+            return function () {
+                observer_1.disconnect();
             };
         }
-        return fnUtils.noop;
+        return coreComponentsShared.fnUtils.noop;
     }, [view, calcOptionsListWidth, open, optionsListWidth]);
-    useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
+    hooks.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)
+    var renderValue = function () {
+        return selectedItems.map(function (option) { return (React__default.default.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key })); });
+    };
+    var renderNativeSelect = function () {
+        var value = multiple
+            ? selectedItems.map(function (option) { return 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 }));
+        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 })));
     };
-    const renderSearch = () => {
+    var renderSearch = function () {
+        var _a;
+        var _b, _c;
         if (!showSearch)
             return null;
-        const handleClear = (event) => {
-            setSearch?.('');
-            searchProps?.componentProps?.onClear?.(event);
+        var handleClear = function (event) {
+            var _a, _b;
+            setSearch === null || setSearch === void 0 ? void 0 : setSearch('');
+            (_b = (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _a === void 0 ? void 0 : _a.onClear) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
-        const handleChange = (event, payload) => {
-            setSearch?.(payload.value);
-            searchProps?.componentProps?.onChange?.(event, payload);
+        var handleChange = function (event, payload) {
+            var _a, _b;
+            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.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]) }));
+        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]) })));
     };
-    const { header, emptyPlaceholder } = optionsListProps;
-    const renderOptionsListHeader = () => {
+    var _9 = optionsListProps, header = _9.header, emptyPlaceholder = _9.emptyPlaceholder;
+    var renderOptionsListHeader = function () {
         if (header || (view === 'desktop' && showSearch)) {
-            return (React.createElement(React.Fragment, null,
+            return (React__default.default.createElement(React__default.default.Fragment, null,
                 header,
                 view === 'desktop' && renderSearch()));
         }
         return null;
     };
-    const renderEmptyPlaceholder = () => {
+    var renderEmptyPlaceholder = function () {
         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 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;
     };
-    const renderOptionsList = () => {
+    var renderOptionsList = function () {
+        var _a, _b, _c;
         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 })));
+        var listProps = optionsListProps;
+        return (React__default.default.createElement("div", tslib.__assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, 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 })));
     };
-    const renderInPopover = () => {
+    var renderInPopover = function () {
         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 (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;
     };
-    const renderInBottomSheet = () => {
+    var renderInBottomSheet = function () {
         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: () => {
+            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, { sheetContainerRef: menuRef, scrollableContainerRef: scrollableContainerRef, onClose: function () {
+                    var _a;
                     closeMenu();
-                    bottomSheetProps?.onClose?.();
-                }, transitionProps: {
-                    ...bottomSheetProps?.transitionProps,
-                    onEntered: handleEntered,
-                }, bottomAddons: React.createElement(React.Fragment, null,
-                    renderSearch(),
-                    bottomSheetProps?.bottomAddons), containerProps: {
-                    ...bottomSheetProps?.containerProps,
-                    onScroll,
-                } }, renderOptionsList()));
+                    (_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;
     };
-    const renderInModalMobile = () => {
+    var renderInModalMobile = function () {
         if (!nativeSelect && ModalMobile) {
-            return (React.createElement(ModalMobile, { dataTestId: getDataTestId(dataTestId, 'modal'), open: open, hasCloser: true, ...modalProps, componentRef: menuRef, onClose: (...args) => {
+            return (React__default.default.createElement(ModalMobile, tslib.__assign({ dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'modal'), open: open, hasCloser: true }, modalProps, { componentRef: menuRef, onClose: function () {
+                    var _a;
+                    var args = [];
+                    for (var _i = 0; _i < arguments.length; _i++) {
+                        args[_i] = arguments[_i];
+                    }
                     closeMenu();
-                    modalProps?.onClose?.(...args);
-                }, contentClassName: cn(mobileStyles.sheetContent, modalProps?.contentClassName), ref: mergeRefs([
+                    (_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?.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 })));
+                    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.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) },
+    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.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: {
+        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,
@@ -413,11 +418,11 @@ const BaseSelect = forwardRef(
                 'aria-autocomplete': autocomplete
                     ? inputProps['aria-autocomplete']
                     : undefined,
-            }, dataTestId: getDataTestId(dataTestId, 'field'), ...fieldProps }),
+            }, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
         view === 'desktop' && renderInPopover(),
         view === 'mobile' && isBottomSheet && renderInBottomSheet(),
         view === 'mobile' && !isBottomSheet && renderInModalMobile()));
 });
 
-export { BaseSelect };
+exports.BaseSelect = BaseSelect;