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

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

@@ -1,73 +1,67 @@
-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';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"optionsList":"optionsList","optionsListHeader":"optionsListHeader","headerHighlighted":"headerHighlighted","optionsListFooter":"optionsListFooter","withBorder":"withBorder","scrollable":"scrollable","emptyPlaceholder":"emptyPlaceholder","size-64":"size-64","size-72":"size-72"};
-require('./index.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');
 
-const createCounter = () => {
-    let count = 0;
+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;
     // eslint-disable-next-line no-plusplus
-    return () => count++;
+    return function () { return count++; };
 };
-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?.(event);
-    }, [onScroll]);
-    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,
-    });
+var OptionsList = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.size, size = _c === void 0 ? 48 : _c, className = _a.className, optionGroupClassName = _a.optionGroupClassName, scrollbarClassName = _a.scrollbarClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.Optgroup, Optgroup = _e === void 0 ? components_optgroup_Component.Optgroup : _e, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _f = _a.visibleOptions, visibleOptions = _f === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _f, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, _g = _a.showFooter, showFooter = _g === void 0 ? true : _g, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _h = _a.flatOptions, flatOptions = _h === void 0 ? [] : _h, setHighlightedIndex = _a.setHighlightedIndex;
+    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 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 }));
     if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
         return null;
     }
-    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,
+    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 = {
+            onScroll: onScroll,
             'data-test-id': dataTestId,
             ref: ref,
         };
-        return (React.createElement(Scrollbar, { className: cn(styles.scrollable, scrollbarClassName), ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: scrollableNodeProps, contentNodeProps: { ref: listRef } }, renderListItems()));
+        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()));
     };
-    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)),
+    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: onScroll }, 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: styles__default.default.optionsListHeader, onMouseEnter: resetHighlightedIndex }, header)),
         nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
-        showFooter && footer && (React.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn(styles.optionsListFooter, {
-                [styles.withBorder]: visibleOptions &&
-                    flatOptions.length > visibleOptions &&
-                    !scrollBottom,
-            }) }, footer))));
+        showFooter && footer && (React__default.default.createElement("div", { onMouseEnter: resetHighlightedIndex, className: cn__default.default(styles__default.default.optionsListFooter, (_b = {},
+                _b[styles__default.default.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
+                _b)) }, footer))));
 });
 
-export { OptionsList };
+exports.OptionsList = OptionsList;

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

@@ -1,10 +1,7 @@
-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';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_optionsList_Component = require('./Component.js');
+
+
+
+exports.OptionsList = components_optionsList_Component.OptionsList;

package/select/cssm/components/options-list/index.module.css

@@ -0,0 +1,55 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-neutral-300: #e7e8eb;
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+} :root {
+} :root {
+} :root {
+
+    /* options list */
+    --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
+
+    /* option */
+
+    /* checkmark */
+
+    /* optgroup */
+} .optionsList {
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    position: relative;
+} .optionsListHeader {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-light-neutral-300);
+} .optionsListFooter {
+    position: sticky;
+    bottom: 0;
+    box-sizing: border-box;
+    border-top: 1px solid transparent
+} .optionsListFooter.withBorder {
+        border-top: 1px solid var(--color-light-neutral-300);
+    } .scrollable {
+    overflow: auto;
+    width: 100%;
+} .emptyPlaceholder {
+    padding: var(--gap-m) var(--gap-s);
+    color: var(--select-options-list-empty-placeholder-color);
+} .size-64 .emptyPlaceholder,
+.size-72 .emptyPlaceholder {
+    padding: var(--gap-xl) var(--gap-m);
+}

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

@@ -1,11 +1,21 @@
-import React, { forwardRef } from 'react';
-import cn from 'classnames';
-import { Input } from '../../../../input/cssm';
-import { MagnifierMIcon } from '@alfalab/icons-glyph/MagnifierMIcon';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"component":"component"};
-require('./index.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 }; }
 
-export { Search };
+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;

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

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

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

@@ -0,0 +1,27 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :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 {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+
+    /* options list */
+
+    /* option */
+
+    /* checkmark */
+
+    /* optgroup */
+} .component.component {
+    width: auto;
+}

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

@@ -1,53 +1,65 @@
-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';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"virtualOptionsList":"virtualOptionsList","virtualOptionsListHeader":"virtualOptionsListHeader","virtualOptionsListFooter":"virtualOptionsListFooter","withBorder":"withBorder","scrollable":"scrollable","inner":"inner","virtualRow":"virtualRow","highlighted":"highlighted","emptyPlaceholder":"emptyPlaceholder","size-64":"size-64","size-72":"size-72"};
-require('./index.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');
 
-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({
+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({
         size: flatOptions.length,
         parentRef: (ref || parentRef),
         overscan: 15,
     });
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+    nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     // Сколл к выбранному пункту при открытии меню
-    useEffect(() => {
+    React.useEffect(function () {
         if (open) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
     // Скролл к пункту, которого нет на экране
-    useEffect(() => {
+    React.useEffect(function () {
         if (highlightedIndex === -1)
             return;
-        if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {
+        if (!rowVirtualizer.virtualItems.some(function (option) { return option.index === highlightedIndex; })) {
             rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [highlightedIndex]);
     // Циклическая навигация
-    useEffect(() => {
-        const notDisabled = (option) => !option.disabled;
-        const firstNonDisabled = flatOptions.findIndex(notDisabled);
-        const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);
+    React.useEffect(function () {
+        var notDisabled = function (option) { return !option.disabled; };
+        var firstNonDisabled = flatOptions.findIndex(notDisabled);
+        var lastNonDisabled = utils.lastIndexOf(flatOptions, notDisabled);
         if (prevHighlightedIndex <= firstNonDisabled &&
             highlightedIndex === flatOptions.length - 1) {
             rowVirtualizer.scrollToIndex(lastNonDisabled);
@@ -57,7 +69,7 @@ const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlighte
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [prevHighlightedIndex, highlightedIndex]);
-    useEffect(() => {
+    React.useEffect(function () {
         setVisibleOptionsInvalidateKey(
         /**
          * react-virtual может несколько раз отрендерить список с одним элементом,
@@ -66,22 +78,22 @@ const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlighte
          */
         rowVirtualizer.virtualItems
             .slice(0, Math.min(rowVirtualizer.virtualItems.length, visibleOptions + 1))
-            .map((item) => flatOptions[item.index].key)
+            .map(function (item) { return flatOptions[item.index].key; })
             .join('_'));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [rowVirtualizer.virtualItems.length, flatOptions]);
-    useVisibleOptions({
-        visibleOptions,
+    utils.useVisibleOptions({
+        visibleOptions: visibleOptions,
         invalidate: visibleOptionsInvalidateKey,
-        listRef,
+        listRef: listRef,
         styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,
-        open,
+        open: open,
     });
     // Т.к. рендерится плоский список, необходимо знать индекс, когда начинается новая группа
-    const groupStartIndexes = useMemo(() => {
-        let currentIndex = 0;
-        return options.reduce((acc, option, index) => {
-            if (isGroup(option)) {
+    var groupStartIndexes = React.useMemo(function () {
+        var currentIndex = 0;
+        return options.reduce(function (acc, option, index) {
+            if (utils.isGroup(option)) {
                 acc[currentIndex] = index;
                 currentIndex += option.options.length;
             }
@@ -91,41 +103,44 @@ const VirtualOptionsList = forwardRef(({ size = 48, flatOptions = [], highlighte
             return acc;
         }, {});
     }, [options]);
-    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` },
+    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") },
         ref: listRef,
     };
-    const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, horizontalAutoStretch: optionsListWidth === 'content', scrollableNodeProps: { onScroll, ref: parentRef }, contentNodeProps: contentNodeProps }, renderList()));
-    const renderWithNativeScrollbar = () => {
+    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 () {
         if (visibleOptions) {
-            return (React.createElement("div", { className: styles.scrollable, ref: mergeRefs([parentRef, ref]), onScroll: onScroll },
-                React.createElement("div", { ...contentNodeProps }, renderList())));
+            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", { ...contentNodeProps }, renderList());
+        return React__default.default.createElement("div", tslib.__assign({}, contentNodeProps), renderList());
     };
-    const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
+    var resetHighlightedIndex = function () { return setHighlightedIndex === null || setHighlightedIndex === void 0 ? void 0 : setHighlightedIndex(-1); };
     if (options.length === 0 && !emptyPlaceholder) {
         return null;
     }
-    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)),
+    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)),
         nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar(),
-        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))));
+        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))));
 });
 
-export { VirtualOptionsList };
+exports.VirtualOptionsList = VirtualOptionsList;

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

@@ -1,11 +1,7 @@
-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';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_virtualOptionsList_Component = require('./Component.js');
+
+
+
+exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOptionsList;

package/select/cssm/components/virtual-options-list/index.module.css

@@ -0,0 +1,85 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-border-primary: #d5d6dc;
+    --color-light-neutral-300: #e7e8eb;
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* 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 {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-s: 12px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+} :root {
+} :root {
+} :root {
+
+    /* options list */
+    --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
+    --select-option-divider-display: none;
+    --select-option-divider-background: var(--color-light-border-primary);
+
+    /* option */
+
+    --select-option-left-padding: var(--gap-s);
+    --select-option-right-padding: var(--gap-s);
+
+    /* checkmark */
+
+    /* optgroup */
+} .virtualOptionsList {
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    position: sticky;
+} .virtualOptionsListHeader {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-light-neutral-300);
+} .virtualOptionsListFooter {
+    position: sticky;
+    bottom: 0;
+    box-sizing: border-box;
+    border-top: 1px solid transparent
+} .virtualOptionsListFooter.withBorder {
+        border-top: 1px solid var(--color-light-neutral-300);
+    } .scrollable {
+    position: relative;
+    overflow: auto;
+    width: 100%;
+} .inner {
+    position: relative;
+    width: 100%;
+} .virtualRow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%
+} .virtualRow:before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        left: var(--select-option-left-padding);
+        right: var(--select-option-right-padding);
+        top: 0;
+        height: 1px;
+        background: var(--select-option-divider-background);
+        display: var(--select-option-divider-display);
+    } .virtualRow:first-child:before {
+        display: none;
+    } .highlighted:before,
+    .highlighted + .virtualRow:before {
+        display: none;
+    } .emptyPlaceholder {
+    padding: var(--gap-m) var(--gap-s);
+    color: var(--select-options-list-empty-placeholder-color);
+} .size-64 .emptyPlaceholder,
+.size-72 .emptyPlaceholder {
+    padding: var(--gap-xl) var(--gap-m);
+}