@alfalab/core-components 42.4.0 → 42.5.1

package/select/hook-9b793700.js

@@ -0,0 +1,122 @@
+var tslib = require('tslib');
+var React = require('react');
+var utils = require('./utils.js');
+var components_optionsList_Component = require('./components/options-list/Component.js');
+var consts = require('./consts.js');
+var presets_useSelectWithApply_optionsListWithApply_footer_Component = require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
+var presets_useSelectWithApply_optionsListWithApply_header_Component = require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var OptionsListWithApply = React.forwardRef(function (_a, ref) {
+    var toggleMenu = _a.toggleMenu, defaultGetOptionProps = _a.getOptionProps, _b = _a.showClear, showClear = _b === void 0 ? true : _b, showHeaderWithSelectAll = _a.showHeaderWithSelectAll, _c = _a.selectedDraft, selectedDraft = _c === void 0 ? [] : _c, _d = _a.flatOptions, flatOptions = _d === void 0 ? [] : _d, _e = _a.OptionsList, OptionsList = _e === void 0 ? components_optionsList_Component.OptionsList : _e, _f = _a.onApply, onApply = _f === void 0 ? function () { return null; } : _f, _g = _a.onClear, onClear = _g === void 0 ? function () { return null; } : _g, _h = _a.onClose, onClose = _h === void 0 ? function () { return null; } : _h, _j = _a.visibleOptions, visibleOptions = _j === void 0 ? consts.DEFAULT_VISIBLE_OPTIONS : _j, _k = _a.Footer, Footer = _k === void 0 ? presets_useSelectWithApply_optionsListWithApply_footer_Component.Footer : _k, _l = _a.Header, Header = _l === void 0 ? presets_useSelectWithApply_optionsListWithApply_header_Component.Header : _l, header = _a.header, headerProps = _a.headerProps, restProps = tslib.__rest(_a, ["toggleMenu", "getOptionProps", "showClear", "showHeaderWithSelectAll", "selectedDraft", "flatOptions", "OptionsList", "onApply", "onClear", "onClose", "visibleOptions", "Footer", "Header", "header", "headerProps"]);
+    var getOptionProps = React.useCallback(function (option, index) {
+        var optionProps = defaultGetOptionProps(option, index);
+        var selected = option.key === SELECT_ALL_KEY
+            ? selectedDraft.length === flatOptions.length - 1
+            : selectedDraft.includes(option);
+        return tslib.__assign(tslib.__assign({}, optionProps), { selected: selected });
+    }, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
+    var handleApply = React.useCallback(function () {
+        onApply();
+        toggleMenu();
+    }, [onApply, toggleMenu]);
+    var handleClear = React.useCallback(function () {
+        onClear();
+        toggleMenu();
+    }, [onClear, toggleMenu]);
+    React.useEffect(function () {
+        var activeElement = document.activeElement;
+        return function () {
+            onClose();
+            if (activeElement) {
+                activeElement.focus();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var renderHeader = function () {
+        if (!showHeaderWithSelectAll && !header)
+            return undefined;
+        return (React__default.default.createElement(React__default.default.Fragment, null,
+            header,
+            showHeaderWithSelectAll && React__default.default.createElement(Header, tslib.__assign({}, headerProps))));
+    };
+    return (React__default.default.createElement(OptionsList, tslib.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), footer: React__default.default.createElement(Footer, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft }) })));
+});
+
+var SELECT_ALL_KEY = 'select_all';
+var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
+function useSelectWithApply(_a) {
+    var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.optionsListProps, optionsListProps = _c === void 0 ? {} : _c, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.showSelectAll, showSelectAll = _e === void 0 ? false : _e, _f = _a.showHeaderWithSelectAll, showHeaderWithSelectAll = _f === void 0 ? false : _f, showSearch = _a.showSearch, _g = _a.searchProps, searchProps = _g === void 0 ? {} : _g;
+    var _h = React.useState(''), search = _h[0], setSearch = _h[1];
+    var accessor = searchProps.accessor || utils.defaultAccessor;
+    var _j = React.useMemo(function () {
+        return utils.processOptions(options, selected, showSearch ? function (option) { return utils.defaultFilterFn(accessor(option), search); } : undefined);
+    }, [accessor, options, search, selected, showSearch]), flatOptions = _j.flatOptions, selectedOptions = _j.selectedOptions;
+    var _k = React.useState(selectedOptions), selectedDraft = _k[0], setSelectedDraft = _k[1];
+    var selectedOptionsRef = React.useRef(selectedOptions);
+    var handleApply = function () {
+        onChange({
+            selected: selectedDraft[0],
+            selectedMultiple: selectedDraft,
+            initiator: null,
+        });
+    };
+    var handleClear = function () {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+        });
+    };
+    var handleToggleAll = function () {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+    var handleChange = function (_a) {
+        var initiator = _a.initiator, restArgs = tslib.__rest(_a, ["initiator"]);
+        if (!initiator) {
+            onChange(tslib.__assign({ initiator: null }, restArgs));
+            return;
+        }
+        var initiatorSelected = selectedDraft.includes(initiator) ||
+            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        }
+        else {
+            setSelectedDraft(initiatorSelected
+                ? selectedDraft.filter(function (o) { return o !== initiator; })
+                : selectedDraft.concat(initiator));
+        }
+    };
+    var handleClose = function () { return setSelectedDraft(selectedOptionsRef.current); };
+    React.useEffect(function () {
+        setSelectedDraft(selectedOptions);
+        selectedOptionsRef.current = selectedOptions;
+    }, [selectedOptions]);
+    var memoizedOptions = React.useMemo(function () { return (showSelectAll ? tslib.__spreadArray([selectAllOption], options, true) : options); }, [options, showSelectAll]);
+    return {
+        OptionsList: OptionsListWithApply,
+        optionsListProps: tslib.__assign(tslib.__assign({}, optionsListProps), { OptionsList: OptionsList, showClear: showClear, onClear: handleClear, onApply: handleApply, onClose: handleClose, selectedDraft: selectedDraft, showHeaderWithSelectAll: showHeaderWithSelectAll, headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            } }),
+        allowUnselect: true,
+        multiple: true,
+        options: memoizedOptions,
+        onChange: handleChange,
+        selected: selected,
+        showSearch: showSearch,
+        searchProps: showSearch
+            ? tslib.__assign(tslib.__assign({}, searchProps), { value: search, onChange: setSearch }) : undefined,
+    };
+}
+
+exports.OptionsListWithApply = OptionsListWithApply;
+exports.SELECT_ALL_KEY = SELECT_ALL_KEY;
+exports.useSelectWithApply = useSelectWithApply;

package/select/index.js

@@ -29,6 +29,9 @@ require('./components/checkmark-mobile/Component.js');
 require('./components/options-list/Component.js');
 require('../scrollbar');
 require('./consts.js');
+require('./components/search/Component.js');
+require('../input');
+require('@alfalab/icons-glyph/MagnifierMIcon');
 require('./Component.mobile.js');
 require('../form-control/mobile');
 require('./components/base-select-mobile/Component.js');
@@ -39,7 +42,7 @@ require('../base-modal');
 require('../button/mobile');
 require('./components/virtual-options-list/Component.js');
 require('react-virtual');
-require('./hook-ac9069cc.js');
+require('./hook-9b793700.js');
 require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('../button/desktop');
 require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');

package/select/mobile.js

@@ -28,12 +28,15 @@ require('./components/checkmark-mobile/Component.js');
 require('./components/options-list/Component.js');
 require('../scrollbar');
 require('./consts.js');
+require('./components/search/Component.js');
+require('../input');
+require('@alfalab/icons-glyph/MagnifierMIcon');
 require('./components/base-select-mobile/footer/Component.js');
 require('../base-modal');
 require('../button/mobile');
 require('./components/virtual-options-list/Component.js');
 require('react-virtual');
-require('./hook-ac9069cc.js');
+require('./hook-9b793700.js');
 require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('../button/desktop');
 require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');

package/select/modern/Component.desktop.js

@@ -6,6 +6,7 @@ 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 'react-merge-refs';
@@ -22,12 +23,14 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
 import '../../scrollbar/modern';
+import '../../input/modern';
+import '@alfalab/icons-glyph/MagnifierMIcon';
 import './utils.js';
 import './consts.js';
 
-const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, Option: Option$1, Field: Field$1, fieldProps: {
+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, Option: Option$1, Field: Field$1, fieldProps: {
         FormControlComponent: FormControlDesktop,
         ...fieldProps,
-    }, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, ...restProps })));
+    }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, ...restProps })));
 
 export { SelectDesktop };

package/select/modern/Component.mobile.d.ts

@@ -2,7 +2,7 @@
 import React from 'react';
 import { ReactNode } from "react";
 import { BottomSheetProps } from "../../bottom-sheet";
-import { UseSelectWithApplyProps } from "./hook-9ea9e32c";
+import { UseSelectWithApplyProps } from "./hook-8abfea97";
 import { BaseSelectProps } from "./typings";
 type AdditionalMobileProps = {
     /**

package/select/modern/Component.mobile.js

@@ -7,8 +7,9 @@ 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 { VirtualOptionsList } from './components/virtual-options-list/Component.js';
-import { u as useSelectWithApply } from './hook-f0d60b8e.js';
+import { u as useSelectWithApply } from './hook-707bbdbf.js';
 import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -27,6 +28,8 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
 import '../../scrollbar/modern';
+import '../../input/modern';
+import '@alfalab/icons-glyph/MagnifierMIcon';
 import 'react-virtual';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/modern/desktop';
@@ -34,15 +37,17 @@ import './utils.js';
 import './consts.js';
 
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
-const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 'm', optionsSize = 'm', fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 'm', optionsSize = 'm', fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
     ? VirtualOptionsList
-    : OptionsList, onChange, bottomSheetProps, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, ...restProps }, ref) => {
+    : OptionsList, onChange, bottomSheetProps, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
     const applyProps = useSelectWithApply({
         optionsListProps: {
             ...optionsListProps,
             Footer,
         },
         OptionsList: OptionsList$1,
+        showSearch,
+        searchProps,
         selected,
         options,
         onChange,
@@ -52,7 +57,7 @@ const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allow
     return (React.createElement(BaseSelectMobile, { ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: {
             FormControlComponent: FormControlMobile,
             ...fieldProps,
-        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, bottomSheetProps: {
+        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, bottomSheetProps: {
             bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true })),
             ...bottomSheetProps,
         }, optionsListProps: optionsListProps, ...restProps, ...(useWithApplyHook && applyProps) }));

package/select/modern/Component.modal.mobile.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ModalMobile } from "./Component.mobile-f1f15074";
-import { UseSelectWithApplyProps } from "./hook-9ea9e32c";
+import { UseSelectWithApplyProps } from "./hook-8abfea97";
 import { BaseSelectProps } from "./typings";
 type SelectModalMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
     /**

package/select/modern/Component.modal.mobile.js

@@ -8,7 +8,7 @@ import { Optgroup } from './components/optgroup/Component.js';
 import { Option } from './components/option/Component.js';
 import { OptionsList } from './components/options-list/Component.js';
 import { VirtualOptionsList } from './components/virtual-options-list/Component.js';
-import { u as useSelectWithApply } from './hook-f0d60b8e.js';
+import { u as useSelectWithApply } from './hook-707bbdbf.js';
 import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -17,6 +17,9 @@ import 'downshift';
 import '../../bottom-sheet/modern';
 import '../../modal/modern/mobile';
 import '../../shared/modern';
+import './components/search/Component.js';
+import '../../input/modern';
+import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../../base-modal/modern';
 import '../../button/modern/mobile';
 import '@alfalab/hooks';
@@ -36,7 +39,7 @@ import './consts.js';
 const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
 const SelectModalMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 'm', optionsSize = 'm', fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
     ? VirtualOptionsList
-    : OptionsList, onChange, showClear = true, showSelectAll, useWithApplyHook = multiple, modalHeaderProps, showHeaderWithSelectAll, ...restProps }, ref) => {
+    : OptionsList, onChange, showClear = true, showSelectAll, useWithApplyHook = multiple, modalHeaderProps, showHeaderWithSelectAll, showSearch, searchProps, ...restProps }, ref) => {
     const applyProps = useSelectWithApply({
         optionsListProps: {
             ...optionsListProps,
@@ -46,6 +49,8 @@ const SelectModalMobile = forwardRef(({ autocomplete = false, multiple = false,
         selected,
         options,
         onChange,
+        showSearch,
+        searchProps,
         showClear,
         showSelectAll,
     });

package/select/modern/Component.responsive.js

@@ -24,6 +24,9 @@ import '@alfalab/icons-glyph/CheckmarkMIcon';
 import './components/checkmark-mobile/Component.js';
 import './components/options-list/Component.js';
 import '../../scrollbar/modern';
+import './components/search/Component.js';
+import '../../input/modern';
+import '@alfalab/icons-glyph/MagnifierMIcon';
 import '../../form-control/modern/mobile';
 import './components/base-select-mobile/Component.js';
 import '../../bottom-sheet/modern';
@@ -33,7 +36,7 @@ import '../../base-modal/modern';
 import '../../button/modern/mobile';
 import './components/virtual-options-list/Component.js';
 import 'react-virtual';
-import './hook-f0d60b8e.js';
+import './hook-707bbdbf.js';
 import './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
 import '../../button/modern/desktop';
 import './presets/useSelectWithApply/options-list-with-apply/header/Component.js';

package/select/modern/components/arrow/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 
-const styles = {"arrow":"select__arrow_o8ep6","open":"select__open_o8ep6"};
+const styles = {"arrow":"select__arrow_50zcs","open":"select__open_50zcs"};
 require('./index.css');
 
 const Arrow = ({ open, className }) => (React.createElement(ChevronDownMIcon, { className: cn(styles.arrow, className, { [styles.open]: open }) }));

package/select/modern/components/arrow/index.css

@@ -1,4 +1,4 @@
-/* hash: 11f6u */
+/* hash: 12ooh */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,13 +26,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_o8ep6 {
+} .select__arrow_50zcs {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_o8ep6 {
+} .select__open_50zcs {
     transform: var(--arrow-transform);
 }

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { Checkbox } from '../../../../checkbox/modern';
 import { CheckmarkMIcon } from '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"checkmark":"select__checkmark_un4k6","single":"select__single_un4k6","selected":"select__selected_un4k6"};
+const styles = {"checkmark":"select__checkmark_3ayn3","single":"select__single_3ayn3","selected":"select__selected_3ayn3"};
 require('./index.css');
 
 const BaseCheckmark = ({ selected, disabled = false, className, multiple, }) => {

package/select/modern/components/base-checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: 16lb3 */
+/* hash: 8n6bs */
 :root {
 } /* 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 */
@@ -23,14 +23,14 @@
     /* checkmark */
 
     /* optgroup */
-} .select__checkmark_un4k6 {
+} .select__checkmark_3ayn3 {
     flex-shrink: 0;
     box-sizing: border-box;
-} .select__single_un4k6 {
+} .select__single_3ayn3 {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0
-} .select__single_un4k6.select__selected_un4k6 {
+} .select__single_3ayn3.select__selected_3ayn3 {
         opacity: 1;
     }

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

@@ -4,7 +4,7 @@ import { BaseCheckmark } from '../base-checkmark/Component.js';
 import '../../../../checkbox/modern';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 
-const styles = {"option":"select__option_ecgc5","disabled":"select__disabled_ecgc5","checkmarkBefore":"select__checkmarkBefore_ecgc5","mobile":"select__mobile_ecgc5","checkmarkAfter":"select__checkmarkAfter_ecgc5","textContent":"select__textContent_ecgc5","selected":"select__selected_ecgc5","highlighted":"select__highlighted_ecgc5","content":"select__content_ecgc5"};
+const styles = {"option":"select__option_1jx22","disabled":"select__disabled_1jx22","checkmarkBefore":"select__checkmarkBefore_1jx22","mobile":"select__mobile_1jx22","checkmarkAfter":"select__checkmarkAfter_1jx22","textContent":"select__textContent_1jx22","selected":"select__selected_1jx22","highlighted":"select__highlighted_1jx22","content":"select__content_1jx22"};
 require('./index.css');
 
 const BaseOption = ({ className, option, children, selected, highlighted, disabled, multiple, Checkmark = BaseCheckmark, checkmarkPosition = multiple ? 'before' : 'after', innerProps, dataTestId, mobile = false, }) => {

package/select/modern/components/base-option/index.css

@@ -1,4 +1,4 @@
-/* hash: 1mfk1 */
+/* hash: 8e5ab */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -43,7 +43,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_ecgc5 {
+} .select__option_1jx22 {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -60,32 +60,32 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height)
-} .select__option_ecgc5:not(.select__disabled_ecgc5):active {
+} .select__option_1jx22:not(.select__disabled_1jx22):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_ecgc5.select__checkmarkBefore_ecgc5 {
+    } .select__option_1jx22.select__checkmarkBefore_1jx22 {
         padding: 0 0 0 var(--gap-s)
-    } .select__option_ecgc5.select__checkmarkBefore_ecgc5.select__mobile_ecgc5 {
+    } .select__option_1jx22.select__checkmarkBefore_1jx22.select__mobile_1jx22 {
             padding-left: var(--gap-m);
-        } .select__option_ecgc5.select__checkmarkAfter_ecgc5 {
+        } .select__option_1jx22.select__checkmarkAfter_1jx22 {
         padding: 0 var(--gap-s) 0 0
-    } .select__option_ecgc5.select__checkmarkAfter_ecgc5.select__mobile_ecgc5 {
+    } .select__option_1jx22.select__checkmarkAfter_1jx22.select__mobile_1jx22 {
             padding-right: var(--gap-l);
-        } .select__option_ecgc5.select__textContent_ecgc5 {
+        } .select__option_1jx22.select__textContent_1jx22 {
         padding: var(--gap-s)
-    } .select__option_ecgc5.select__textContent_ecgc5.select__mobile_ecgc5 {
+    } .select__option_1jx22.select__textContent_1jx22.select__mobile_1jx22 {
             padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
-        } .select__selected_ecgc5 {
+        } .select__selected_1jx22 {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_ecgc5 {
+} .select__highlighted_1jx22 {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_ecgc5 {
+} .select__disabled_1jx22 {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_ecgc5 {
+} .select__content_1jx22 {
     flex: 1;
 }

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

@@ -6,20 +6,29 @@ import { useMultipleSelection, useCombobox } from 'downshift';
 import { Popover } from '../../../../popover/modern';
 import { getDataTestId } from '../../../../shared/modern';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import { processOptions } from '../../utils.js';
+import { defaultAccessor, processOptions, defaultFilterFn } from '../../utils.js';
 import { NativeSelect } from '../native-select/Component.js';
 
-const styles = {"component":"select__component_nw6vl","popoverInner":"select__popoverInner_nw6vl","optionsList":"select__optionsList_nw6vl","optionsListBorder":"select__optionsListBorder_nw6vl","nativeSelect":"select__nativeSelect_nw6vl","block":"select__block_nw6vl"};
+const styles = {"component":"select__component_1wsby","popoverInner":"select__popoverInner_1wsby","optionsList":"select__optionsList_1wsby","optionsListBorder":"select__optionsListBorder_1wsby","nativeSelect":"select__nativeSelect_1wsby","block":"select__block_1wsby","emptySearchPlaceholder":"select__emptySearchPlaceholder_1wsby","search":"select__search_1wsby"};
 require('./index.css');
 
 /* eslint-disable no-nested-ternary */
-const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, 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 = 's', optionsSize = size, error, hint, block, label, labelView, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, updatePopover, zIndexPopover, showEmptyOptionsList = false, visibleOptions, }, ref) => {
+const BaseSelect = forwardRef(
+// TODO: 😭
+// eslint-disable-next-line complexity
+({ dataTestId, className, fieldClassName, 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 = 's', 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, }, ref) => {
     const rootRef = useRef(null);
     const fieldRef = useRef(null);
     const listRef = useRef(null);
     const initiatorRef = useRef(null);
+    const searchRef = useRef(null);
+    const [searchState, setSearchState] = React.useState('');
+    const [search, setSearch] = typeof searchProps?.value === 'string'
+        ? [searchProps.value, searchProps.onChange]
+        : [searchState, setSearchState];
     const itemToString = (option) => (option ? option.key : '');
-    const { flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected), [options, selected]);
+    const accessor = searchProps.accessor || defaultAccessor;
+    const { filteredOptions, flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected, (option) => defaultFilterFn(accessor(option), search)), [accessor, options, search, selected]);
     const useMultipleSelectionProps = {
         itemToString,
         onSelectedItemsChange: (changes) => {
@@ -69,6 +78,16 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
                     });
                 }, 0);
             }
+            if (showSearch) {
+                if (changes.isOpen) {
+                    setTimeout(() => {
+                        searchRef.current?.focus();
+                    }, 0);
+                }
+                else {
+                    setSearch?.('');
+                }
+            }
         },
         stateReducer: (state, actionAndChanges) => {
             const { type, changes } = actionAndChanges;
@@ -212,7 +231,7 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
     useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
-        options,
+        filteredOptions,
         selectedItems,
     ]);
     const renderValue = useCallback(() => selectedItems.map((option) => (React.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key }))), [selectedItems, name]);
@@ -220,9 +239,43 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
         const value = multiple
             ? selectedItems.map((option) => option.key)
             : (selectedItems[0] || {}).key;
-        return (React.createElement(NativeSelect, { ...menuProps, className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options }));
-    }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
-    const needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
+        return (React.createElement(NativeSelect, { ...menuProps, className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: filteredOptions }));
+    }, [
+        multiple,
+        selectedItems,
+        disabled,
+        name,
+        handleNativeSelectChange,
+        filteredOptions,
+        menuProps,
+    ]);
+    const { header, emptyPlaceholder } = optionsListProps;
+    const renderOptionsListHeader = () => {
+        if (!showSearch && !header) {
+            return null;
+        }
+        const handleClear = (event) => {
+            setSearch?.('');
+            searchProps?.componentProps?.onClear?.(event);
+        };
+        const handleChange = (event, payload) => {
+            setSearch?.(payload.value);
+            searchProps?.componentProps?.onChange?.(event, payload);
+        };
+        return (React.createElement(React.Fragment, null,
+            header,
+            showSearch && (React.createElement(Search, { ...searchProps?.componentProps, value: search, onChange: handleChange, dataTestId: getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn(styles.search, searchProps?.componentProps?.className), ref: searchRef }))));
+    };
+    const needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList || showSearch;
+    const renderEmptyPlaceholder = useCallback(() => {
+        if (emptyPlaceholder) {
+            return emptyPlaceholder;
+        }
+        if (showSearch) {
+            return React.createElement("div", { className: styles.emptySearchPlaceholder }, "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C");
+        }
+        return undefined;
+    }, [emptyPlaceholder, showSearch]);
     return (React.createElement("div", { ...getComboboxProps({
             ref: rootRef,
             ...(disabled && { 'aria-disabled': true }),
@@ -244,7 +297,7 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
             }, dataTestId: getDataTestId(dataTestId, 'field'), ...fieldProps }),
         name && !nativeSelect && renderValue(),
         !nativeSelect && (React.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React.createElement("div", { ...menuProps, className: cn(optionsListClassName, styles.optionsList) },
-            React.createElement(OptionsList, { ...optionsListProps, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: options, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list') }),
+            React.createElement(OptionsList, { ...optionsListProps, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), emptyPlaceholder: renderEmptyPlaceholder() }),
             React.createElement("div", { className: styles.optionsListBorder })))))));
 });