@alfalab/core-components 37.3.0-beta-.1 → 37.3.0-beta.10

package/select/cssm/presets/index.js

@@ -1,6 +1,6 @@
 var presets_useSelectWithLoading_hook = require('./useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./useLazyLoading/hook.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../Component-e61bd989.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../Component-a6199ac9.js');
 require('../tslib.es6-0e9bf404.js');
 require('react');
 require('../../../skeleton/cssm');
@@ -26,7 +26,7 @@ require('downshift');
 require('../../../bottom-sheet/cssm');
 require('../../../modal/cssm/mobile');
 require('../Component.js');
-require('../Component-d0e84442.js');
+require('../Component-246be813.js');
 require('@juggle/resize-observer');
 require('../../../popover/cssm');
 require('@alfalab/hooks');

package/select/cssm/presets/useSelectWithApply/hook.js

@@ -4,8 +4,8 @@ require('../../Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('../../components/arrow/index.module.css');
-require('../../Component-d0e84442.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-e61bd989.js');
+require('../../Component-246be813.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-a6199ac9.js');
 require('../../../../form-control/cssm');
 require('@alfalab/hooks');
 require('../../utils.js');

package/select/cssm/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -4,8 +4,8 @@ require('classnames');
 require('../../../../../button/cssm');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('../../../components/arrow/index.module.css');
-require('../../../Component-d0e84442.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-e61bd989.js');
+require('../../../Component-246be813.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-a6199ac9.js');
 require('../../../../../form-control/cssm');
 require('@alfalab/hooks');
 require('../../../components/field/index.module.css');

package/select/cssm/presets/useSelectWithApply/options-list-with-apply/index.d.ts

@@ -1 +1 @@
-export * from "../../../Component-e61bd989";
+export * from "../../../Component-a6199ac9";

package/select/cssm/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -1,4 +1,4 @@
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-e61bd989.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../../Component-a6199ac9.js');
 require('../../../tslib.es6-0e9bf404.js');
 require('react');
 require('../../../components/arrow/Component.js');
@@ -10,7 +10,7 @@ require('downshift');
 require('../../../../../bottom-sheet/cssm');
 require('../../../../../modal/cssm/mobile');
 require('../../../Component.js');
-require('../../../Component-d0e84442.js');
+require('../../../Component-246be813.js');
 require('@juggle/resize-observer');
 require('../../../../../popover/cssm');
 require('@alfalab/hooks');

package/select/cssm/presets/useSelectWithApply/options-list-with-apply/index.module.css

@@ -1,6 +1,6 @@
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb;
+    --color-light-border-secondary: #e7e9eb;
 }
 :root {
 

package/select/cssm/responsive.js

@@ -7,7 +7,7 @@ require('./components/arrow/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
 require('./components/arrow/index.module.css');
-require('./Component-d0e84442.js');
+require('./Component-246be813.js');
 require('react-merge-refs');
 require('@juggle/resize-observer');
 require('downshift');
@@ -33,7 +33,7 @@ require('./components/option/index.module.css');
 require('./components/options-list/Component.js');
 require('../../scrollbar/cssm');
 require('./components/options-list/index.module.css');
-require('./Component-e61bd989.js');
+require('./Component-a6199ac9.js');
 require('../../bottom-sheet/cssm');
 require('../../modal/cssm/mobile');
 require('react-virtual');

package/select/cssm/typings.d.ts

@@ -23,6 +23,10 @@ type OptionShape = {
      * Дополнительные данные
      */
     value?: any;
+    /**
+     * Уникальный id, необходим в случае, если нужно фильтровать / сортировать options
+     */
+    id?: number;
 };
 type GroupShape = {
     /**
@@ -40,6 +44,16 @@ type BaseSelectChangePayload = {
     initiator: OptionShape | null;
     name?: string;
 };
+type FilterProps = {
+    /**
+     * Фильтр функция для переданных options
+     */
+    filterFunction?: (options: Array<OptionShape | GroupShape>, filterValue: string) => Array<OptionShape | GroupShape>;
+    /**
+     * Поисковая строка для фильтра
+     */
+    filterValue?: string;
+};
 type BaseSelectProps = {
     /**
      * Идентификатор для систем автоматизированного тестирования
@@ -245,6 +259,10 @@ type BaseSelectProps = {
      * Показывать OptionsList, если он пустой
      */
     showEmptyOptionsList?: boolean;
+    /**
+     * Возможность фильтровать options внутри select
+     */
+    filterProps?: FilterProps;
 };
 type FieldProps = {
     /**
@@ -442,6 +460,11 @@ type OptionsListProps = {
      * Обработчик отмены изменений
      */
     onClear?: () => void;
+    /**
+     * Использовать поле id из OptionShape в качестве индекса option в OptionList
+     * Необходимо для корректной работы option после сортировки / фильтрации массива options
+     */
+    useOptionsIds?: boolean;
 };
 type OptgroupProps = {
     /**
@@ -551,4 +574,4 @@ type CheckmarkProps = {
      */
     icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
-export { OptionShape, GroupShape, BaseSelectChangePayload, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };
+export { OptionShape, GroupShape, BaseSelectChangePayload, FilterProps, BaseSelectProps, FieldProps, ArrowProps, OptionsListProps, OptgroupProps, OptionProps, CheckmarkProps };

package/select/cssm/utils.d.ts

@@ -10,6 +10,7 @@ declare function processOptions(options: BaseSelectProps['options'], selected?:
     flatOptions: OptionShape[];
     selectedOptions: OptionShape[];
 };
+declare const getFilteredOptions: (options: Array<OptionShape | GroupShape>, filterValue: string, filterFunction: (options: Array<OptionShape | GroupShape>, filterValue: string) => Array<OptionShape | GroupShape>) => Array<OptionShape | GroupShape>;
 type useVisibleOptionsArgs = {
     /**
      * Количество видимых пунктов
@@ -35,4 +36,4 @@ type useVisibleOptionsArgs = {
 declare function useVisibleOptions({ visibleOptions, listRef, styleTargetRef, open, invalidate, }: useVisibleOptionsArgs): void;
 declare function usePrevious<T>(value: T): T | undefined;
 declare const lastIndexOf: <T>(array: T[], predicate: (item: T) => boolean) => number;
-export { isGroup, isOptionShape, joinOptions, processOptions, useVisibleOptions, usePrevious, lastIndexOf };
+export { isGroup, isOptionShape, joinOptions, processOptions, getFilteredOptions, useVisibleOptions, usePrevious, lastIndexOf };

package/select/cssm/utils.js

@@ -47,6 +47,12 @@ function processOptions(options, selected) {
     });
     return { flatOptions: flatOptions, selectedOptions: selectedOptions };
 }
+var getFilteredOptions = function (options, filterValue, filterFunction) {
+    if (!filterFunction || !filterValue) {
+        return options;
+    }
+    return filterFunction(options, filterValue);
+};
 function useVisibleOptions(_a) {
     var visibleOptions = _a.visibleOptions, listRef = _a.listRef, _b = _a.styleTargetRef, styleTargetRef = _b === void 0 ? listRef : _b, open = _a.open, invalidate = _a.invalidate;
     React.useEffect(function () {
@@ -82,6 +88,7 @@ var lastIndexOf = function (array, predicate) {
     return -1;
 };
 
+exports.getFilteredOptions = getFilteredOptions;
 exports.isGroup = isGroup;
 exports.isOptionShape = isOptionShape;
 exports.joinOptions = joinOptions;

package/select/esm/{Component-f90150f9.js → Component-31f76563.js}

@@ -1,4 +1,4 @@
-import { a as __assign, b as __spreadArray } from './tslib.es6-91bf0a4f.js';
+import { a as __assign, b as __spreadArray } from './tslib.es6-0bbcaa10.js';
 import React, { forwardRef, useRef, useMemo, useCallback, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -6,7 +6,7 @@ import cn from 'classnames';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { Popover } from '../../popover/esm';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import { processOptions } from './utils.js';
+import { processOptions, getFilteredOptions } from './utils.js';
 import { NativeSelect } from './components/native-select/Component.js';
 
 var getDataTestId = function (dataTestId, element) {
@@ -19,13 +19,13 @@ require('./components/base-select/index.css');
 
 var BaseSelect = forwardRef(function (_a, ref) {
     var _b;
-    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, popperClassName = _a.popperClassName, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.nativeSelect, nativeSelect = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.popoverPosition, popoverPosition = _l === void 0 ? 'bottom-start' : _l, _m = _a.preventFlip, preventFlip = _m === void 0 ? true : _m, _o = _a.optionsListWidth, optionsListWidth = _o === void 0 ? 'content' : _o, name = _a.name, id = _a.id, selected = _a.selected, _p = _a.size, size = _p === void 0 ? 's' : _p, _q = _a.optionsSize, optionsSize = _q === void 0 ? size : _q, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _r = _a.fieldProps, fieldProps = _r === void 0 ? {} : _r, _s = _a.optionsListProps, optionsListProps = _s === void 0 ? {} : _s, _t = _a.optionProps, optionProps = _t === void 0 ? {} : _t, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, onScroll = _a.onScroll, Arrow = _a.Arrow, _u = _a.Field, Field = _u === void 0 ? function () { return null; } : _u, _v = _a.OptionsList, OptionsList = _v === void 0 ? function () { return null; } : _v, _w = _a.Optgroup, Optgroup = _w === void 0 ? function () { return null; } : _w, _x = _a.Option, Option = _x === void 0 ? function () { return null; } : _x, updatePopover = _a.updatePopover, zIndexPopover = _a.zIndexPopover, _y = _a.showEmptyOptionsList, showEmptyOptionsList = _y === void 0 ? false : _y, visibleOptions = _a.visibleOptions;
+    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, popperClassName = _a.popperClassName, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.nativeSelect, nativeSelect = _j === void 0 ? false : _j, _k = _a.defaultOpen, defaultOpen = _k === void 0 ? false : _k, openProp = _a.open, _l = _a.popoverPosition, popoverPosition = _l === void 0 ? 'bottom-start' : _l, _m = _a.preventFlip, preventFlip = _m === void 0 ? true : _m, _o = _a.optionsListWidth, optionsListWidth = _o === void 0 ? 'content' : _o, name = _a.name, id = _a.id, selected = _a.selected, _p = _a.size, size = _p === void 0 ? 's' : _p, _q = _a.optionsSize, optionsSize = _q === void 0 ? size : _q, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _r = _a.fieldProps, fieldProps = _r === void 0 ? {} : _r, _s = _a.optionsListProps, optionsListProps = _s === void 0 ? {} : _s, _t = _a.optionProps, optionProps = _t === void 0 ? {} : _t, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, onBlur = _a.onBlur, onScroll = _a.onScroll, Arrow = _a.Arrow, _u = _a.Field, Field = _u === void 0 ? function () { return null; } : _u, _v = _a.OptionsList, OptionsList = _v === void 0 ? function () { return null; } : _v, _w = _a.Optgroup, Optgroup = _w === void 0 ? function () { return null; } : _w, _x = _a.Option, Option = _x === void 0 ? function () { return null; } : _x, updatePopover = _a.updatePopover, zIndexPopover = _a.zIndexPopover, _y = _a.showEmptyOptionsList, showEmptyOptionsList = _y === void 0 ? false : _y, visibleOptions = _a.visibleOptions, _z = _a.filterProps, _0 = _z === void 0 ? {} : _z, filterFunction = _0.filterFunction, filterValue = _0.filterValue;
     var rootRef = useRef(null);
     var fieldRef = useRef(null);
     var listRef = useRef(null);
     var initiatorRef = useRef(null);
     var itemToString = function (option) { return (option ? option.key : ''); };
-    var _z = useMemo(function () { return processOptions(options, selected); }, [options, selected]), flatOptions = _z.flatOptions, selectedOptions = _z.selectedOptions;
+    var _1 = useMemo(function () { return processOptions(options, selected); }, [options, selected]), flatOptions = _1.flatOptions, selectedOptions = _1.selectedOptions;
     var useMultipleSelectionProps = {
         itemToString: itemToString,
         onSelectedItemsChange: function (changes) {
@@ -52,8 +52,8 @@ var BaseSelect = forwardRef(function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _0 = useMultipleSelection(useMultipleSelectionProps), selectedItems = _0.selectedItems, addSelectedItem = _0.addSelectedItem, setSelectedItems = _0.setSelectedItems, removeSelectedItem = _0.removeSelectedItem, getDropdownProps = _0.getDropdownProps;
-    var _1 = useCombobox({
+    var _2 = useMultipleSelection(useMultipleSelectionProps), selectedItems = _2.selectedItems, addSelectedItem = _2.addSelectedItem, setSelectedItems = _2.setSelectedItems, removeSelectedItem = _2.removeSelectedItem, getDropdownProps = _2.getDropdownProps;
+    var _3 = useCombobox({
         id: id,
         isOpen: openProp,
         circularNavigation: circularNavigation,
@@ -107,7 +107,7 @@ var BaseSelect = forwardRef(function (_a, ref) {
                     return changes;
             }
         },
-    }), open = _1.isOpen, getMenuProps = _1.getMenuProps, getInputProps = _1.getInputProps, getItemProps = _1.getItemProps, getComboboxProps = _1.getComboboxProps, getLabelProps = _1.getLabelProps, highlightedIndex = _1.highlightedIndex, toggleMenu = _1.toggleMenu, openMenu = _1.openMenu;
+    }), open = _3.isOpen, getMenuProps = _3.getMenuProps, getInputProps = _3.getInputProps, getItemProps = _3.getItemProps, getComboboxProps = _3.getComboboxProps, getLabelProps = _3.getLabelProps, highlightedIndex = _3.highlightedIndex, toggleMenu = _3.toggleMenu, openMenu = _3.openMenu;
     var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
     var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
     var handleFieldFocus = function (event) {
@@ -201,10 +201,16 @@ var BaseSelect = forwardRef(function (_a, ref) {
             observer.disconnect();
         };
     }, [calcOptionsListWidth, open, optionsListWidth]);
+    var finalOptions = useMemo(function () {
+        if (filterFunction) {
+            return getFilteredOptions(options, filterValue || '', filterFunction);
+        }
+        return options;
+    }, [filterFunction, filterValue, options]);
     useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
-        options,
+        finalOptions,
         selectedItems,
     ]);
     var renderValue = useCallback(function () {
@@ -214,8 +220,16 @@ var BaseSelect = forwardRef(function (_a, ref) {
         var value = multiple
             ? selectedItems.map(function (option) { return option.key; })
             : (selectedItems[0] || {}).key;
-        return (React.createElement(NativeSelect, __assign({}, menuProps, { className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options })));
-    }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
+        return (React.createElement(NativeSelect, __assign({}, menuProps, { className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: finalOptions })));
+    }, [
+        multiple,
+        selectedItems,
+        disabled,
+        name,
+        handleNativeSelectChange,
+        finalOptions,
+        menuProps,
+    ]);
     var needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
     return (React.createElement("div", __assign({}, getComboboxProps(__assign(__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn(styles.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
@@ -234,7 +248,7 @@ var BaseSelect = forwardRef(function (_a, ref) {
             }, 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", __assign({}, menuProps, { className: cn(optionsListClassName, styles.optionsList) }),
-            React.createElement(OptionsList, __assign({}, 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, __assign({}, optionsListProps, { optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: finalOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list') }))))))));
 });
 
 export { BaseSelect as B, getDataTestId as g };

package/select/esm/{Component-48869888.js → Component-97b29b7a.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, b as __spreadArray } from './tslib.es6-91bf0a4f.js';
+import { _ as __rest, a as __assign, b as __spreadArray } from './tslib.es6-0bbcaa10.js';
 import React, { forwardRef, useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { Arrow } from './components/arrow/Component.js';
 import mergeRefs from 'react-merge-refs';
@@ -7,7 +7,7 @@ import { useMultipleSelection, useCombobox } from 'downshift';
 import { BottomSheet } from '../../bottom-sheet/esm';
 import { ModalMobile } from '../../modal/esm/mobile';
 import './Component.js';
-import { g as getDataTestId } from './Component-f90150f9.js';
+import { g as getDataTestId } from './Component-31f76563.js';
 import { Field } from './components/field/Component.js';
 import { Optgroup } from './components/optgroup/Component.js';
 import { Option } from './components/option/Component.js';
@@ -15,10 +15,10 @@ import { OptionsList } from './components/options-list/Component.js';
 import 'react-virtual';
 import '../../scrollbar/esm';
 import '@alfalab/hooks';
-import { processOptions } from './utils.js';
+import { processOptions, getFilteredOptions } from './utils.js';
 import { BaseOption } from './components/base-option/Component.js';
 import '../../skeleton/esm';
-import './intersection-observer-0cd7a6ad.js';
+import './intersection-observer-b8a51493.js';
 import { Button } from '../../button/esm';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '../../form-control/esm';
@@ -151,15 +151,15 @@ require('./components/base-select-mobile/index.css');
 
 var BaseSelectMobile = forwardRef(function (_a, ref) {
     var _b;
-    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, optionGroupClassName = _a.optionGroupClassName, optionsListProps = _a.optionsListProps, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.defaultOpen, defaultOpen = _j === void 0 ? false : _j, openProp = _a.open, name = _a.name, id = _a.id, selected = _a.selected, _k = _a.size, size = _k === void 0 ? 'm' : _k, _l = _a.optionsSize, optionsSize = _l === void 0 ? 'm' : _l, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _m = _a.fieldProps, fieldProps = _m === void 0 ? {} : _m, _o = _a.optionProps, optionProps = _o === void 0 ? {} : _o, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, _p = _a.Arrow, Arrow$1 = _p === void 0 ? Arrow : _p, _q = _a.Field, Field$1 = _q === void 0 ? Field : _q, _r = _a.Optgroup, Optgroup$1 = _r === void 0 ? Optgroup : _r, _s = _a.Option, Option$1 = _s === void 0 ? Option : _s, _t = _a.OptionsList, OptionsList = _t === void 0 ? OptionsList$1 : _t, swipeable = _a.swipeable, footer = _a.footer, isBottomSheet = _a.isBottomSheet, bottomSheetProps = _a.bottomSheetProps;
+    var dataTestId = _a.dataTestId, className = _a.className, fieldClassName = _a.fieldClassName, optionsListClassName = _a.optionsListClassName, optionClassName = _a.optionClassName, optionGroupClassName = _a.optionGroupClassName, optionsListProps = _a.optionsListProps, options = _a.options, _c = _a.autocomplete, autocomplete = _c === void 0 ? false : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.allowUnselect, allowUnselect = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.closeOnSelect, closeOnSelect = _g === void 0 ? !multiple : _g, _h = _a.circularNavigation, circularNavigation = _h === void 0 ? false : _h, _j = _a.defaultOpen, defaultOpen = _j === void 0 ? false : _j, openProp = _a.open, name = _a.name, id = _a.id, selected = _a.selected, _k = _a.size, size = _k === void 0 ? 'm' : _k, _l = _a.optionsSize, optionsSize = _l === void 0 ? 'm' : _l, error = _a.error, hint = _a.hint, block = _a.block, label = _a.label, labelView = _a.labelView, placeholder = _a.placeholder, _m = _a.fieldProps, fieldProps = _m === void 0 ? {} : _m, _o = _a.optionProps, optionProps = _o === void 0 ? {} : _o, valueRenderer = _a.valueRenderer, onChange = _a.onChange, onOpen = _a.onOpen, onFocus = _a.onFocus, _p = _a.Arrow, Arrow$1 = _p === void 0 ? Arrow : _p, _q = _a.Field, Field$1 = _q === void 0 ? Field : _q, _r = _a.Optgroup, Optgroup$1 = _r === void 0 ? Optgroup : _r, _s = _a.Option, Option$1 = _s === void 0 ? Option : _s, _t = _a.OptionsList, OptionsList = _t === void 0 ? OptionsList$1 : _t, swipeable = _a.swipeable, footer = _a.footer, isBottomSheet = _a.isBottomSheet, bottomSheetProps = _a.bottomSheetProps, _u = _a.filterProps, _v = _u === void 0 ? {} : _u, filterFunction = _v.filterFunction, filterValue = _v.filterValue;
     var rootRef = useRef(null);
     var fieldRef = useRef(null);
     var listRef = useRef(null);
     var initiatorRef = useRef(null);
     var itemToString = function (option) { return (option ? option.key : ''); };
-    var _u = useMemo(function () { return processOptions(options, selected); }, [options, selected]), flatOptions = _u.flatOptions, selectedOptions = _u.selectedOptions;
+    var _w = useMemo(function () { return processOptions(options, selected); }, [options, selected]), flatOptions = _w.flatOptions, selectedOptions = _w.selectedOptions;
     var selectedOptionsRef = useRef(selectedOptions);
-    var _v = useState(selectedOptions), selectedDraft = _v[0], setSelectedDraft = _v[1];
+    var _x = useState(selectedOptions), selectedDraft = _x[0], setSelectedDraft = _x[1];
     var useMultipleSelectionProps = {
         itemToString: itemToString,
         onSelectedItemsChange: function (changes) {
@@ -186,8 +186,8 @@ var BaseSelectMobile = forwardRef(function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _w = useMultipleSelection(useMultipleSelectionProps), selectedItems = _w.selectedItems, addSelectedItem = _w.addSelectedItem, setSelectedItems = _w.setSelectedItems, removeSelectedItem = _w.removeSelectedItem, getDropdownProps = _w.getDropdownProps;
-    var _x = useCombobox({
+    var _y = useMultipleSelection(useMultipleSelectionProps), selectedItems = _y.selectedItems, addSelectedItem = _y.addSelectedItem, setSelectedItems = _y.setSelectedItems, removeSelectedItem = _y.removeSelectedItem, getDropdownProps = _y.getDropdownProps;
+    var _z = useCombobox({
         id: id,
         isOpen: openProp,
         circularNavigation: circularNavigation,
@@ -250,7 +250,7 @@ var BaseSelectMobile = forwardRef(function (_a, ref) {
                     return changes;
             }
         },
-    }), open = _x.isOpen, getMenuProps = _x.getMenuProps, getInputProps = _x.getInputProps, getItemProps = _x.getItemProps, getComboboxProps = _x.getComboboxProps, getLabelProps = _x.getLabelProps, highlightedIndex = _x.highlightedIndex, toggleMenu = _x.toggleMenu, openMenu = _x.openMenu;
+    }), open = _z.isOpen, getMenuProps = _z.getMenuProps, getInputProps = _z.getInputProps, getItemProps = _z.getItemProps, getComboboxProps = _z.getComboboxProps, getLabelProps = _z.getLabelProps, highlightedIndex = _z.highlightedIndex, toggleMenu = _z.toggleMenu, openMenu = _z.openMenu;
     var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
     var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs([ref, fieldRef]) }));
     useEffect(function () {
@@ -328,6 +328,12 @@ var BaseSelectMobile = forwardRef(function (_a, ref) {
         }
         toggleMenu();
     };
+    var finalOptions = useMemo(function () {
+        if (filterFunction) {
+            return getFilteredOptions(options, filterValue || '', filterFunction);
+        }
+        return options;
+    }, [filterFunction, filterValue, options]);
     return (React.createElement("div", __assign({}, getComboboxProps(__assign(__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn(styles.component, (_b = {}, _b[styles.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
         React.createElement(Field$1, __assign({ selectedMultiple: selectedDraft, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React.createElement("span", __assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow$1 && React.createElement(Arrow$1, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
                 onFocus: disabled ? undefined : handleFieldFocus,
@@ -344,10 +350,10 @@ var BaseSelectMobile = forwardRef(function (_a, ref) {
         name && renderValue(),
         isBottomSheet ? (React.createElement(BottomSheet, __assign({ open: open, onClose: handleClose, className: styles.sheet, contentClassName: styles.sheetContent, containerClassName: styles.sheetContainer, title: placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable }, bottomSheetProps),
             React.createElement("div", __assign({}, menuProps, { className: optionsListClassName }),
-                React.createElement(OptionsListWithApply, __assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: OptionsList, Optgroup: Optgroup$1, Option: Option$1, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn(styles.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear }))))) : (React.createElement(ModalMobile, { open: open, onClose: handleClose, contentClassName: styles.sheetContent, hasCloser: true },
+                React.createElement(OptionsListWithApply, __assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: finalOptions, OptionsList: OptionsList, Optgroup: Optgroup$1, Option: Option$1, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn(styles.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear }))))) : (React.createElement(ModalMobile, { open: open, onClose: handleClose, contentClassName: styles.sheetContent, hasCloser: true },
             React.createElement(ModalMobile.Header, { hasCloser: true, title: placeholder, sticky: true }),
             React.createElement("div", __assign({}, menuProps, { className: optionsListClassName }),
-                React.createElement(OptionsListWithApply, __assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: OptionsList, Optgroup: Optgroup$1, Option: Option$1, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn(styles.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear })))))));
+                React.createElement(OptionsListWithApply, __assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: finalOptions, OptionsList: OptionsList, Optgroup: Optgroup$1, Option: Option$1, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn(styles.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear })))))));
 });
 
 var SelectMobile = forwardRef(function (_a, ref) {

package/select/esm/Component.js

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign } from './tslib.es6-91bf0a4f.js';
+import { _ as __rest, a as __assign } from './tslib.es6-0bbcaa10.js';
 import React, { forwardRef } from 'react';
 import { Arrow } from './components/arrow/Component.js';
-import { B as BaseSelect } from './Component-f90150f9.js';
+import { B as BaseSelect } from './Component-31f76563.js';
 import { Field } from './components/field/Component.js';
 import { Optgroup } from './components/optgroup/Component.js';
 import { Option } from './components/option/Component.js';

package/select/esm/Component.responsive.js

@@ -1,11 +1,11 @@
-import { _ as __rest, a as __assign } from './tslib.es6-91bf0a4f.js';
+import { _ as __rest, a as __assign } from './tslib.es6-0bbcaa10.js';
 import React, { forwardRef } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import { Select } from './Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
-import './Component-f90150f9.js';
-import { S as SelectMobile } from './Component-48869888.js';
+import './Component-31f76563.js';
+import { S as SelectMobile } from './Component-97b29b7a.js';
 import '../../form-control/esm';
 import '../../badge/esm';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
@@ -30,7 +30,7 @@ import '../../modal/esm/mobile';
 import './components/base-option/Component.js';
 import './components/base-checkmark/Component.js';
 import '../../skeleton/esm';
-import './intersection-observer-0cd7a6ad.js';
+import './intersection-observer-b8a51493.js';
 import '../../button/esm';
 import './components/base-select-mobile/options-list/Component.js';
 import '../../base-modal/esm';

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

@@ -1,6 +1,6 @@
 /* hash: 86qtd */
 :root {
-    --color-light-graphic-primary: #000;
+    --color-light-graphic-primary: #0b1f35;
 }
 :root {
 

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

@@ -1,4 +1,4 @@
-import { a as __assign } from '../../tslib.es6-91bf0a4f.js';
+import { a as __assign } from '../../tslib.es6-0bbcaa10.js';
 import React, { isValidElement } from 'react';
 import cn from 'classnames';
 import { BaseCheckmark } from '../base-checkmark/Component.js';

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

@@ -2,9 +2,9 @@
 :root {
     --color-light-bg-primary: #fff;
     --color-light-bg-secondary: #f3f4f5;
-    --color-light-bg-tertiary: #e9e9eb;
-    --color-light-text-primary: #000;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.6);
+    --color-light-bg-tertiary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {
 

package/select/esm/components/base-option/index.js

@@ -4,4 +4,4 @@ import 'classnames';
 import '../base-checkmark/Component.js';
 import '../../../../checkbox/esm';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
-import '../../tslib.es6-91bf0a4f.js';
+import '../../tslib.es6-0bbcaa10.js';

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

@@ -5,7 +5,7 @@ import 'classnames';
 import 'downshift';
 import '../../../../popover/esm';
 import '@alfalab/hooks';
-export { B as BaseSelect } from '../../Component-f90150f9.js';
+export { B as BaseSelect } from '../../Component-31f76563.js';
 import '../native-select/Component.js';
-import '../../tslib.es6-91bf0a4f.js';
+import '../../tslib.es6-0bbcaa10.js';
 import '../../utils.js';

package/select/esm/components/base-select/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-f90150f9";
+export * from "../../Component-31f76563";

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

@@ -1,4 +1,4 @@
-export { B as BaseSelect } from '../../Component-f90150f9.js';
+export { B as BaseSelect } from '../../Component-31f76563.js';
 import 'react';
 import 'react-merge-refs';
 import '@juggle/resize-observer';
@@ -7,5 +7,5 @@ import 'downshift';
 import '../../../../popover/esm';
 import '@alfalab/hooks';
 import '../native-select/Component.js';
-import '../../tslib.es6-91bf0a4f.js';
+import '../../tslib.es6-0bbcaa10.js';
 import '../../utils.js';

package/select/esm/components/base-select-mobile/Component.js

@@ -6,8 +6,8 @@ import '../../../../bottom-sheet/esm';
 import '../../../../modal/esm/mobile';
 import '../../Component.js';
 import '../arrow/Component.js';
-import '../../Component-f90150f9.js';
-export { B as BaseSelectMobile } from '../../Component-48869888.js';
+import '../../Component-31f76563.js';
+export { B as BaseSelectMobile } from '../../Component-97b29b7a.js';
 import '../field/Component.js';
 import '../optgroup/Component.js';
 import '../option/Component.js';
@@ -17,7 +17,7 @@ import '../../../../scrollbar/esm';
 import '@alfalab/hooks';
 import '../base-option/Component.js';
 import '../../../../skeleton/esm';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../base-checkmark/Component.js';
 import './checkmark/Component.js';
 import './options-list/Component.js';
@@ -33,5 +33,5 @@ import '../checkmark/Component.js';
 import '../../../../checkbox/esm';
 import '../../../../button/esm';
 import '../../../../base-modal/esm';
-import '../../tslib.es6-91bf0a4f.js';
+import '../../tslib.es6-0bbcaa10.js';
 import '../../utils.js';

package/select/esm/components/base-select-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-48869888";
+export * from "../../Component-97b29b7a";

package/select/esm/components/base-select-mobile/index.js

@@ -1,4 +1,4 @@
-export { B as BaseSelectMobile } from '../../Component-48869888.js';
+export { B as BaseSelectMobile } from '../../Component-97b29b7a.js';
 import 'react';
 import '../arrow/Component.js';
 import 'classnames';
@@ -8,7 +8,7 @@ import 'downshift';
 import '../../../../bottom-sheet/esm';
 import '../../../../modal/esm/mobile';
 import '../../Component.js';
-import '../../Component-f90150f9.js';
+import '../../Component-31f76563.js';
 import '@juggle/resize-observer';
 import '../../../../popover/esm';
 import '@alfalab/hooks';
@@ -29,9 +29,9 @@ import 'react-virtual';
 import '../base-option/Component.js';
 import '../base-checkmark/Component.js';
 import '../../../../skeleton/esm';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../../../../button/esm';
 import './options-list/Component.js';
 import '../../../../base-modal/esm';
-import '../../tslib.es6-91bf0a4f.js';
+import '../../tslib.es6-0bbcaa10.js';
 import '../../utils.js';

package/select/esm/components/base-select-mobile/options-list/Component.js

@@ -1,4 +1,4 @@
-import { a as __assign } from '../../../tslib.es6-91bf0a4f.js';
+import { a as __assign } from '../../../tslib.es6-0bbcaa10.js';
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../../base-modal/esm';

package/select/esm/components/base-select-mobile/options-list/index.css

@@ -1,8 +1,8 @@
 /* hash: ydq4k */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-primary: #dcdcdd;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.6);
+    --color-light-border-primary: #dbdee1;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {
 

package/select/esm/components/base-select-mobile/options-list/index.js

@@ -4,5 +4,5 @@ import 'classnames';
 import '../../../../../base-modal/esm';
 import '../../../../../button/esm';
 import '../../optgroup/Component.js';
-import '../../../tslib.es6-91bf0a4f.js';
+import '../../../tslib.es6-0bbcaa10.js';
 import '../../../utils.js';

package/select/esm/components/checkmark/index.css

@@ -1,7 +1,7 @@
 /* hash: 1qxbw */
 :root {
     --color-light-graphic-positive: #2fc26e;
-    --color-light-graphic-primary: #000;
+    --color-light-graphic-primary: #0b1f35;
 }
 :root {
 

package/select/esm/components/field/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-91bf0a4f.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-0bbcaa10.js';
 import React, { useState, useRef, useCallback } from 'react';
 import cn from 'classnames';
 import { FormControl } from '../../../../form-control/esm';

package/select/esm/components/field/index.css

@@ -1,7 +1,7 @@
 /* hash: n03r7 */
 :root {
-    --color-light-border-link: #0072ef;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.6);
+    --color-light-border-link: #007aff;
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {