@alfalab/core-components 45.8.0-beta.5 → 45.9.0-beta.0

package/select/cssm/components/options-list/Component.js

@@ -1,81 +1,72 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef, useState, useCallback, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { useMatchMedia } from '../../../../mq/cssm';
+import { Scrollbar } from '../../../../scrollbar/cssm';
+import { isClient } from '../../../../shared/cssm';
+import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
+import { useVisibleOptions, isGroup } from '../../utils.js';
+import { Optgroup } from '../optgroup/Component.js';
+import styles from './index.module.css';
+import '../optgroup/index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-var coreComponentsMq = require('../../../../mq/cssm');
-var coreComponentsScrollbar = require('../../../../scrollbar/cssm');
-var coreComponentsShared = require('../../../../shared/cssm');
-var consts = require('../../consts.js');
-var utils = require('../../utils.js');
-var components_optgroup_Component = require('../optgroup/Component.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-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 createCounter = function () {
-    var count = 0;
+const createCounter = () => {
+    let count = 0;
     // eslint-disable-next-line no-plusplus
-    return function () { return count++; };
+    return () => count++;
 };
-var OptionsList = React.forwardRef(function (_a, ref) {
-    var _b, _c;
-    var _d = _a.size, size = _d === void 0 ? 48 : _d, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _e = _a.options, options = _e === void 0 ? [] : _e, _f = _a.Optgroup, Optgroup = _f === void 0 ? components_optgroup_Component.Optgroup : _f, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _g = _a.visibleOptions, visibleOptions = _g === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _g, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _h = _a.showFooter, showFooter = _h === void 0 ? true : _h, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _j = _a.flatOptions, flatOptions = _j === void 0 ? [] : _j, setHighlightedIndex = _a.setHighlightedIndex;
-    var _k = React.useState(true), scrollTop = _k[0], setScrollTop = _k[1];
-    var _l = React.useState(false), scrollBottom = _l[0], setScrollBottom = _l[1];
-    var query = '(max-width: 1023px)';
-    var nativeScrollbar = coreComponentsMq.useMatchMedia(query, function () {
-        return coreComponentsShared.isClient() ? window.matchMedia(query).matches : true;
-    })[0];
-    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
-    var handleScroll = React.useCallback(function (event) {
-        var scrolledToHeader = event.currentTarget.scrollTop <= 0;
-        var scrolledToFooter = event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
+const OptionsList = forwardRef(({ size = 48, className, optionGroupClassName, scrollbarClassName, Option, getOptionProps, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, onScroll, open, header, footer, showFooter = true, optionsListWidth, nativeScrollbar: nativeScrollbarProp, flatOptions = [], setHighlightedIndex, }, ref) => {
+    const [scrollTop, setScrollTop] = useState(true);
+    const [scrollBottom, setScrollBottom] = useState(false);
+    const query = '(max-width: 1023px)';
+    let [nativeScrollbar] = useMatchMedia(query, () => isClient() ? window.matchMedia(query).matches : true);
+    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+    const handleScroll = useCallback((event) => {
+        const scrolledToHeader = event.currentTarget.scrollTop <= 0;
+        const scrolledToFooter = event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
             event.currentTarget.scrollTop;
         setScrollTop(scrolledToHeader);
         setScrollBottom(scrolledToFooter);
-        onScroll === null || onScroll === void 0 ? void 0 : onScroll(event);
+        onScroll?.(event);
     }, [onScroll]);
-    var renderOption = function (option, index) { return (React__default.default.createElement(Option, tslib.__assign({ key: option.key }, getOptionProps(option, index)))); };
-    var listRef = React.useRef(null);
-    var scrollbarRef = React.useRef(null);
-    var counter = createCounter();
-    var renderGroup = function (group) { return (React__default.default.createElement(Optgroup, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map(function (option) { return renderOption(option, counter()); }))); };
-    utils.useVisibleOptions(tslib.__assign(tslib.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
+    const renderOption = (option, index) => (React.createElement(Option, { key: option.key, ...getOptionProps(option, index) }));
+    const listRef = useRef(null);
+    const scrollbarRef = useRef(null);
+    const counter = createCounter();
+    const renderGroup = (group) => (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map((option) => renderOption(option, counter()))));
+    useVisibleOptions({
+        ...(!nativeScrollbar && { styleTargetRef: scrollbarRef }),
+        visibleOptions,
+        listRef,
+        open,
+        invalidate: options,
+    });
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;
     }
-    var renderListItems = function () { return (React__default.default.createElement(React__default.default.Fragment, null,
-        options.map(function (option) {
-            return utils.isGroup(option) ? renderGroup(option) : renderOption(option, counter());
-        }),
-        emptyPlaceholder && options.length === 0 && (React__default.default.createElement("div", { className: styles__default.default.emptyPlaceholder }, emptyPlaceholder)))); };
-    var renderWithCustomScrollbar = function () {
-        var scrollableNodeProps = {
+    const renderListItems = () => (React.createElement(React.Fragment, null,
+        options.map((option) => isGroup(option) ? renderGroup(option) : renderOption(option, counter())),
+        emptyPlaceholder && options.length === 0 && (React.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder))));
+    const renderWithCustomScrollbar = () => {
+        const scrollableNodeProps = {
             onScroll: handleScroll,
             'data-test-id': dataTestId,
             ref: ref,
         };
-        return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: cn__default.default(styles__default.default.scrollable, scrollbarClassName), ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef } }, renderListItems()));
+        return (React.createElement(Scrollbar, { className: cn(styles.scrollable, scrollbarClassName), ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef } }, renderListItems()));
     };
-    var renderWithNativeScrollbar = function () { return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.scrollable, scrollbarClassName), ref: mergeRefs__default.default([listRef, ref]), onScroll: handleScroll }, renderListItems())); };
-    var resetHighlightedIndex = function () { return setHighlightedIndex === null || setHighlightedIndex === void 0 ? void 0 : setHighlightedIndex(-1); };
-    return (React__default.default.createElement("div", tslib.__assign({}, (nativeScrollbar && { 'data-test-id': dataTestId }), { className: cn__default.default(styles__default.default.optionsList, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], className) }),
-        header && (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.optionsListHeader, (_b = {},
-                _b[styles__default.default.headerHighlighted] = !scrollTop,
-                _b)), onMouseEnter: resetHighlightedIndex }, header)),
+    const renderWithNativeScrollbar = () => (React.createElement("div", { className: cn(styles.scrollable, scrollbarClassName), ref: mergeRefs([listRef, ref]), onScroll: handleScroll }, renderListItems()));
+    const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
+    return (React.createElement("div", { ...(nativeScrollbar && { 'data-test-id': dataTestId }), className: cn(styles.optionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className) },
+        header && (React.createElement("div", { className: cn(styles.optionsListHeader, {
+                [styles.headerHighlighted]: !scrollTop,
+            }), onMouseEnter: resetHighlightedIndex }, header)),
         nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
-        showFooter && footer && (React__default.default.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn__default.default(styles__default.default.optionsListFooter, (_c = {},
-                _c[styles__default.default.withBorder] = visibleOptions &&
+        showFooter && footer && (React.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn(styles.optionsListFooter, {
+                [styles.withBorder]: visibleOptions &&
                     flatOptions.length > visibleOptions &&
                     !scrollBottom,
-                _c)) }, footer))));
+            }) }, footer))));
 });
 
-exports.OptionsList = OptionsList;
+export { OptionsList };

package/select/cssm/components/options-list/index.js

@@ -1,7 +1,12 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_optionsList_Component = require('./Component.js');
-
-
-
-exports.OptionsList = components_optionsList_Component.OptionsList;
+export { OptionsList } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '../../../../mq/cssm';
+import '../../../../scrollbar/cssm';
+import '../../../../shared/cssm';
+import '../../consts.js';
+import '../../utils.js';
+import '../optgroup/Component.js';
+import '../optgroup/index.module.css';
+import './index.module.css';

package/select/cssm/components/search/Component.js

@@ -1,21 +1,9 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import { Input } from '../../../../input/cssm';
+import { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';
+import styles from './index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var cn = require('classnames');
-var coreComponentsInput = require('../../../../input/cssm');
-var MagnifierMIcon = require('@alfalab/icons-glyph/MagnifierMIcon');
-var styles = require('./index.module.css');
+const Search = forwardRef(({ clear = true, placeholder = 'Поиск', className, leftAddons = React.createElement(MagnifierMIcon, { color: '#86868A' }), ...restProps }, ref) => (React.createElement(Input, { ref: ref, className: cn(styles.component, className), placeholder: placeholder, leftAddons: leftAddons, clear: clear, ...restProps })));
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var Search = React.forwardRef(function (_a, ref) {
-    var _b = _a.clear, clear = _b === void 0 ? true : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Поиск' : _c, className = _a.className, _d = _a.leftAddons, leftAddons = _d === void 0 ? React__default.default.createElement(MagnifierMIcon.MagnifierMIcon, { color: '#86868A' }) : _d, restProps = tslib.__rest(_a, ["clear", "placeholder", "className", "leftAddons"]);
-    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({ ref: ref, className: cn__default.default(styles__default.default.component, className), placeholder: placeholder, leftAddons: leftAddons, clear: clear }, restProps)));
-});
-
-exports.Search = Search;
+export { Search };

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

@@ -1,7 +1,6 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_search_Component = require('./Component.js');
-
-
-
-exports.Search = components_search_Component.Search;
+export { Search } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../input/cssm';
+import '@alfalab/icons-glyph/MagnifierMIcon';
+import './index.module.css';

package/select/cssm/components/virtual-options-list/Component.js

@@ -1,65 +1,52 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useVirtual } from 'react-virtual';
+import cn from 'classnames';
+import { useMatchMedia } from '../../../../mq/cssm';
+import { Scrollbar } from '../../../../scrollbar/cssm';
+import { isClient } from '../../../../shared/cssm';
+import { SIZE_TO_CLASSNAME_MAP, DEFAULT_VISIBLE_OPTIONS } from '../../consts.js';
+import { usePrevious, lastIndexOf, useVisibleOptions, isGroup } from '../../utils.js';
+import { Optgroup } from '../optgroup/Component.js';
+import styles from './index.module.css';
+import '../optgroup/index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var reactVirtual = require('react-virtual');
-var cn = require('classnames');
-var coreComponentsMq = require('../../../../mq/cssm');
-var coreComponentsScrollbar = require('../../../../scrollbar/cssm');
-var coreComponentsShared = require('../../../../shared/cssm');
-var consts = require('../../consts.js');
-var utils = require('../../utils.js');
-var components_optgroup_Component = require('../optgroup/Component.js');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-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 VirtualOptionsList = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.size, size = _c === void 0 ? 48 : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.highlightedIndex, highlightedIndex = _e === void 0 ? -1 : _e, optionGroupClassName = _a.optionGroupClassName, className = _a.className, getOptionProps = _a.getOptionProps, Option = _a.Option, open = _a.open, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.Optgroup, Optgroup = _g === void 0 ? components_optgroup_Component.Optgroup : _g, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _h = _a.visibleOptions, visibleOptions = _h === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _h, header = _a.header, footer = _a.footer, _j = _a.showFooter, showFooter = _j === void 0 ? true : _j, optionsListWidth = _a.optionsListWidth, onScroll = _a.onScroll, nativeScrollbarProp = _a.nativeScrollbar, setHighlightedIndex = _a.setHighlightedIndex;
-    var listRef = React.useRef(null);
-    var parentRef = React.useRef(null);
-    var scrollbarRef = React.useRef(null);
-    var _k = React.useState(''), visibleOptionsInvalidateKey = _k[0], setVisibleOptionsInvalidateKey = _k[1];
-    var prevHighlightedIndex = utils.usePrevious(highlightedIndex) || -1;
-    var query = '(max-width: 1023px)';
-    var nativeScrollbar = coreComponentsMq.useMatchMedia(query, function () {
-        return coreComponentsShared.isClient() ? window.matchMedia(query).matches : true;
-    })[0];
-    var rowVirtualizer = reactVirtual.useVirtual({
+const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlightedIndex = -1, optionGroupClassName, className, getOptionProps, Option, open, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = DEFAULT_VISIBLE_OPTIONS, header, footer, showFooter = true, optionsListWidth, onScroll, nativeScrollbar: nativeScrollbarProp, setHighlightedIndex, }, ref) => {
+    const listRef = useRef(null);
+    const parentRef = useRef(null);
+    const scrollbarRef = useRef(null);
+    const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');
+    const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
+    const query = '(max-width: 1023px)';
+    let [nativeScrollbar] = useMatchMedia(query, () => isClient() ? window.matchMedia(query).matches : true);
+    const rowVirtualizer = useVirtual({
         size: flatOptions.length,
         parentRef: (ref || parentRef),
         overscan: 15,
     });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
+    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
     // Сколл к выбранному пункту при открытии меню
-    React.useEffect(function () {
+    useEffect(() => {
         if (open) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     // Скролл к пункту, которого нет на экране
-    React.useEffect(function () {
+    useEffect(() => {
         if (highlightedIndex === -1)
             return;
-        if (!rowVirtualizer.virtualItems.some(function (option) { return option.index === highlightedIndex; })) {
+        if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedIndex]);
     // Циклическая навигация
-    React.useEffect(function () {
-        var notDisabled = function (option) { return !option.disabled; };
-        var firstNonDisabled = flatOptions.findIndex(notDisabled);
-        var lastNonDisabled = utils.lastIndexOf(flatOptions, notDisabled);
+    useEffect(() => {
+        const notDisabled = (option) => !option.disabled;
+        const firstNonDisabled = flatOptions.findIndex(notDisabled);
+        const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);
         if (prevHighlightedIndex <= firstNonDisabled &&
             highlightedIndex === flatOptions.length - 1) {
             rowVirtualizer.scrollToIndex(lastNonDisabled);
@@ -69,7 +56,7 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevHighlightedIndex, highlightedIndex]);
-    React.useEffect(function () {
+    useEffect(() => {
         setVisibleOptionsInvalidateKey(
         /**
          * react-virtual может несколько раз отрендерить список с одним элементом,
@@ -78,22 +65,22 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
          */
         rowVirtualizer.virtualItems
             .slice(0, Math.min(rowVirtualizer.virtualItems.length, visibleOptions + 1))
-            .map(function (item) { return flatOptions[item.index].key; })
+            .map((item) => flatOptions[item.index].key)
             .join('_'));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowVirtualizer.virtualItems.length, flatOptions]);
-    utils.useVisibleOptions({
-        visibleOptions: visibleOptions,
+    useVisibleOptions({
+        visibleOptions,
         invalidate: visibleOptionsInvalidateKey,
-        listRef: listRef,
+        listRef,
         styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,
-        open: open,
+        open,
     });
     // Т.к. рендерится плоский список, необходимо знать индекс, когда начинается новая группа
-    var groupStartIndexes = React.useMemo(function () {
-        var currentIndex = 0;
-        return options.reduce(function (acc, option, index) {
-            if (utils.isGroup(option)) {
+    const groupStartIndexes = useMemo(() => {
+        let currentIndex = 0;
+        return options.reduce((acc, option, index) => {
+            if (isGroup(option)) {
                 acc[currentIndex] = index;
                 currentIndex += option.options.length;
             }
@@ -103,44 +90,41 @@ var VirtualOptionsList = React.forwardRef(function (_a, ref) {
             return acc;
         }, {});
     }, [options]);
-    var renderList = function () {
-        return rowVirtualizer.virtualItems.map(function (virtualRow) {
-            var _a;
-            var option = flatOptions[virtualRow.index];
-            var group = options[groupStartIndexes[virtualRow.index]];
-            return (React__default.default.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn__default.default(styles__default.default.virtualRow, (_a = {},
-                    _a[styles__default.default.highlighted] = highlightedIndex === virtualRow.index,
-                    _a)), style: {
-                    transform: "translateY(".concat(virtualRow.start, "px)"),
-                } },
-                group && (React__default.default.createElement(Optgroup, { label: group.label, size: size, className: optionGroupClassName })),
-                !utils.isGroup(option) && (React__default.default.createElement(Option, tslib.__assign({}, getOptionProps(option, virtualRow.index))))));
-        });
-    };
-    var contentNodeProps = {
-        className: styles__default.default.inner,
-        style: { height: "".concat(rowVirtualizer.totalSize, "px") },
+    const renderList = () => rowVirtualizer.virtualItems.map((virtualRow) => {
+        const option = flatOptions[virtualRow.index];
+        const group = options[groupStartIndexes[virtualRow.index]];
+        return (React.createElement("div", { key: virtualRow.index, ref: virtualRow.measureRef, className: cn(styles.virtualRow, {
+                [styles.highlighted]: highlightedIndex === virtualRow.index,
+            }), style: {
+                transform: `translateY(${virtualRow.start}px)`,
+            } },
+            group && (React.createElement(Optgroup$1, { label: group.label, size: size, className: optionGroupClassName })),
+            !isGroup(option) && (React.createElement(Option, { ...getOptionProps(option, virtualRow.index) }))));
+    });
+    const contentNodeProps = {
+        className: styles.inner,
+        style: { height: `${rowVirtualizer.totalSize}px` },
         ref: listRef,
     };
-    var renderWithCustomScrollbar = function () { return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: styles__default.default.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll: onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList())); };
-    var renderWithNativeScrollbar = function () {
+    const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList()));
+    const renderWithNativeScrollbar = () => {
         if (visibleOptions) {
-            return (React__default.default.createElement("div", { className: styles__default.default.scrollable, ref: mergeRefs__default.default([parentRef, ref]), onScroll: onScroll },
-                React__default.default.createElement("div", tslib.__assign({}, contentNodeProps), renderList())));
+            return (React.createElement("div", { className: styles.scrollable, ref: mergeRefs([parentRef, ref]), onScroll: onScroll },
+                React.createElement("div", { ...contentNodeProps }, renderList())));
         }
-        return React__default.default.createElement("div", tslib.__assign({}, contentNodeProps), renderList());
+        return React.createElement("div", { ...contentNodeProps }, renderList());
     };
-    var resetHighlightedIndex = function () { return setHighlightedIndex === null || setHighlightedIndex === void 0 ? void 0 : setHighlightedIndex(-1); };
+    const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
     if (options.length === 0 && !emptyPlaceholder) {
         return null;
     }
-    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.virtualOptionsList, styles__default.default[consts.SIZE_TO_CLASSNAME_MAP[size]], className), "data-test-id": dataTestId },
-        header && (React__default.default.createElement("div", { className: styles__default.default.virtualOptionsListHeader, onMouseEnter: resetHighlightedIndex }, header)),
+    return (React.createElement("div", { className: cn(styles.virtualOptionsList, styles[SIZE_TO_CLASSNAME_MAP[size]], className), "data-test-id": dataTestId },
+        header && (React.createElement("div", { className: styles.virtualOptionsListHeader, onMouseEnter: resetHighlightedIndex }, header)),
         nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
-        emptyPlaceholder && options.length === 0 && (React__default.default.createElement("div", { className: styles__default.default.emptyPlaceholder }, emptyPlaceholder)),
-        showFooter && footer && (React__default.default.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn__default.default(styles__default.default.virtualOptionsListFooter, (_b = {},
-                _b[styles__default.default.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
-                _b)) }, footer))));
+        emptyPlaceholder && options.length === 0 && (React.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder)),
+        showFooter && footer && (React.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn(styles.virtualOptionsListFooter, {
+                [styles.withBorder]: visibleOptions && flatOptions.length > visibleOptions,
+            }) }, footer))));
 });
 
-exports.VirtualOptionsList = VirtualOptionsList;
+export { VirtualOptionsList };

package/select/cssm/components/virtual-options-list/index.js

@@ -1,7 +1,13 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var components_virtualOptionsList_Component = require('./Component.js');
-
-
-
-exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;
+export { VirtualOptionsList } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'react-virtual';
+import 'classnames';
+import '../../../../mq/cssm';
+import '../../../../scrollbar/cssm';
+import '../../../../shared/cssm';
+import '../../consts.js';
+import '../../utils.js';
+import '../optgroup/Component.js';
+import '../optgroup/index.module.css';
+import './index.module.css';

package/select/cssm/consts.js

@@ -1,7 +1,5 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DEFAULT_VISIBLE_OPTIONS = 5;
-var SIZE_TO_CLASSNAME_MAP = {
+const DEFAULT_VISIBLE_OPTIONS = 5;
+const SIZE_TO_CLASSNAME_MAP = {
     s: 'size-48',
     m: 'size-56',
     l: 'size-64',
@@ -12,5 +10,4 @@ var SIZE_TO_CLASSNAME_MAP = {
     72: 'size-72',
 };
 
-exports.DEFAULT_VISIBLE_OPTIONS = DEFAULT_VISIBLE_OPTIONS;
-exports.SIZE_TO_CLASSNAME_MAP = SIZE_TO_CLASSNAME_MAP;
+export { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP };

package/select/cssm/desktop/Component.desktop.js

@@ -1,24 +1,48 @@
-Object.defineProperty(exports, '__esModule', { value: true });
+import React, { forwardRef } from 'react';
+import { FormControlDesktop } from '../../../form-control/cssm/desktop';
+import { Popover } from '../../../popover/cssm';
+import { Arrow } from '../components/arrow/Component.js';
+import { BaseSelect } from '../components/base-select/Component.js';
+import { Field } from '../components/field/Component.js';
+import { Optgroup } from '../components/optgroup/Component.js';
+import { Option } from '../components/option/Component.js';
+import { OptionsList } from '../components/options-list/Component.js';
+import { Search } from '../components/search/Component.js';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '../components/arrow/index.module.css';
+import 'react-merge-refs';
+import '@juggle/resize-observer';
+import 'compute-scroll-into-view';
+import 'downshift';
+import '../../../shared/cssm';
+import '@alfalab/hooks';
+import '../utils.js';
+import '../components/native-select/Component.js';
+import '../components/base-select/index.module.css';
+import '../components/base-select/mobile.module.css';
+import '../components/field/index.module.css';
+import '../consts.js';
+import '../components/optgroup/index.module.css';
+import '../components/checkmark/Component.js';
+import '../../../badge/cssm';
+import '../../../checkbox/cssm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/checkmark/index.module.css';
+import '../components/checkmark-mobile/Component.js';
+import '../components/checkmark-mobile/index.module.css';
+import '../components/option/index.module.css';
+import '../../../mq/cssm';
+import '../../../scrollbar/cssm';
+import '../components/options-list/index.module.css';
+import '../../../input/cssm';
+import '@alfalab/icons-glyph/MagnifierMIcon';
+import '../components/search/index.module.css';
 
-var tslib = require('tslib');
-var React = require('react');
-var desktop = require('../../../form-control/cssm/desktop');
-var coreComponentsPopover = require('../../../popover/cssm');
-var components_arrow_Component = require('../components/arrow/Component.js');
-var components_baseSelect_Component = require('../components/base-select/Component.js');
-var components_field_Component = require('../components/field/Component.js');
-var components_optgroup_Component = require('../components/optgroup/Component.js');
-var components_option_Component = require('../components/option/Component.js');
-var components_optionsList_Component = require('../components/options-list/Component.js');
-var components_search_Component = require('../components/search/Component.js');
+const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option$1, Field: Field$1, fieldProps: {
+        FormControlComponent: FormControlDesktop,
+        ...fieldProps,
+    }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover, ...restProps })));
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var SelectDesktop = React.forwardRef(function (_a, ref) {
-    var _b = _a.Arrow, Arrow = _b === void 0 ? components_arrow_Component.Arrow : _b, _c = _a.Field, Field = _c === void 0 ? components_field_Component.Field : _c, _d = _a.OptionsList, OptionsList = _d === void 0 ? components_optionsList_Component.OptionsList : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, _f = _a.Option, Option = _f === void 0 ? components_option_Component.Option : _f, _g = _a.Search, Search = _g === void 0 ? components_search_Component.Search : _g, _h = _a.fieldProps, fieldProps = _h === void 0 ? {} : _h, restProps = tslib.__rest(_a, ["Arrow", "Field", "OptionsList", "Optgroup", "Option", "Search", "fieldProps"]);
-    return (React__default.default.createElement(components_baseSelect_Component.BaseSelect, tslib.__assign({ ref: ref, view: 'desktop', Option: Option, Field: Field, fieldProps: tslib.__assign({ FormControlComponent: desktop.FormControlDesktop }, fieldProps), Search: Search, Optgroup: Optgroup, OptionsList: OptionsList, Arrow: Arrow, Popover: coreComponentsPopover.Popover }, restProps)));
-});
-
-exports.SelectDesktop = SelectDesktop;
+export { SelectDesktop };

package/select/cssm/desktop/index.js

@@ -1,7 +1,42 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var desktop_Component_desktop = require('./Component.desktop.js');
-
-
-
-exports.SelectDesktop = desktop_Component_desktop.SelectDesktop;
+export { SelectDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../form-control/cssm/desktop';
+import '../../../popover/cssm';
+import '../components/arrow/Component.js';
+import 'classnames';
+import '@alfalab/icons-glyph/ChevronDownMIcon';
+import '../components/arrow/index.module.css';
+import '../components/base-select/Component.js';
+import 'react-merge-refs';
+import '@juggle/resize-observer';
+import 'compute-scroll-into-view';
+import 'downshift';
+import '../../../shared/cssm';
+import '@alfalab/hooks';
+import '../utils.js';
+import '../components/native-select/Component.js';
+import '../components/base-select/index.module.css';
+import '../components/base-select/mobile.module.css';
+import '../components/field/Component.js';
+import '../components/field/index.module.css';
+import '../components/optgroup/Component.js';
+import '../consts.js';
+import '../components/optgroup/index.module.css';
+import '../components/option/Component.js';
+import '../components/checkmark/Component.js';
+import '../../../badge/cssm';
+import '../../../checkbox/cssm';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/CheckmarkMIcon';
+import '../components/checkmark/index.module.css';
+import '../components/checkmark-mobile/Component.js';
+import '../components/checkmark-mobile/index.module.css';
+import '../components/option/index.module.css';
+import '../components/options-list/Component.js';
+import '../../../mq/cssm';
+import '../../../scrollbar/cssm';
+import '../components/options-list/index.module.css';
+import '../components/search/Component.js';
+import '../../../input/cssm';
+import '@alfalab/icons-glyph/MagnifierMIcon';
+import '../components/search/index.module.css';