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

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

@@ -1,5 +1,5 @@
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-1d3b181c.js');
-require('../../tslib.es6-4a2c504c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-2e5231ae.js');
+require('../../tslib.es6-febad92e.js');
 require('react');
 require('../arrow/Component.js');
 require('classnames');
@@ -9,7 +9,7 @@ require('downshift');
 require('../../../bottom-sheet');
 require('../../../modal/mobile');
 require('../../Component.js');
-require('../../Component-279426cb.js');
+require('../../Component-f670e03e.js');
 require('@juggle/resize-observer');
 require('../../../popover');
 require('@alfalab/hooks');
@@ -31,7 +31,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('../../../skeleton');
-require('../../intersection-observer-f3839684.js');
+require('../../intersection-observer-0f86c9db.js');
 require('../../../button');
 require('../base-select-mobile/options-list/Component.js');
 require('../../../base-modal');

package/select/components/select-modal-mobile/Component.js

@@ -1,7 +1,7 @@
-require('../../tslib.es6-4a2c504c.js');
+require('../../tslib.es6-febad92e.js');
 require('react');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-1d3b181c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-2e5231ae.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
@@ -12,7 +12,7 @@ require('downshift');
 require('../../../bottom-sheet');
 require('../../../modal/mobile');
 require('../../Component.js');
-require('../../Component-279426cb.js');
+require('../../Component-f670e03e.js');
 require('@juggle/resize-observer');
 require('../../../popover');
 require('@alfalab/hooks');
@@ -31,7 +31,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('../../../skeleton');
-require('../../intersection-observer-f3839684.js');
+require('../../intersection-observer-0f86c9db.js');
 require('../../../button');
 require('../base-select-mobile/options-list/Component.js');
 require('../../../base-modal');

package/select/components/select-modal-mobile/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-1d3b181c";
+export * from "../../Component-2e5231ae";

package/select/components/select-modal-mobile/index.js

@@ -1,5 +1,5 @@
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-1d3b181c.js');
-require('../../tslib.es6-4a2c504c.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-2e5231ae.js');
+require('../../tslib.es6-febad92e.js');
 require('react');
 require('../arrow/Component.js');
 require('classnames');
@@ -9,7 +9,7 @@ require('downshift');
 require('../../../bottom-sheet');
 require('../../../modal/mobile');
 require('../../Component.js');
-require('../../Component-279426cb.js');
+require('../../Component-f670e03e.js');
 require('@juggle/resize-observer');
 require('../../../popover');
 require('@alfalab/hooks');
@@ -31,7 +31,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('../../../skeleton');
-require('../../intersection-observer-f3839684.js');
+require('../../intersection-observer-0f86c9db.js');
 require('../../../button');
 require('../base-select-mobile/options-list/Component.js');
 require('../../../base-modal');

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

@@ -1,4 +1,4 @@
-var tslib_es6 = require('../../tslib.es6-4a2c504c.js');
+var tslib_es6 = require('../../tslib.es6-febad92e.js');
 var React = require('react');
 var reactVirtual = require('react-virtual');
 var cn = require('classnames');

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

@@ -1,7 +1,7 @@
 /* hash: 9gwji */
 :root {
-    --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/components/virtual-options-list/index.js

@@ -1,5 +1,5 @@
 var components_virtualOptionsList_Component = require('./Component.js');
-require('../../tslib.es6-4a2c504c.js');
+require('../../tslib.es6-febad92e.js');
 require('react');
 require('react-virtual');
 require('classnames');

package/select/cssm/{Component-d0e84442.js → Component-246be813.js}

@@ -24,13 +24,13 @@ var getDataTestId = function (dataTestId, element) {
 
 var BaseSelect = React.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 = React.useRef(null);
     var fieldRef = React.useRef(null);
     var listRef = React.useRef(null);
     var initiatorRef = React.useRef(null);
     var itemToString = function (option) { return (option ? option.key : ''); };
-    var _z = React.useMemo(function () { return utils.processOptions(options, selected); }, [options, selected]), flatOptions = _z.flatOptions, selectedOptions = _z.selectedOptions;
+    var _1 = React.useMemo(function () { return utils.processOptions(options, selected); }, [options, selected]), flatOptions = _1.flatOptions, selectedOptions = _1.selectedOptions;
     var useMultipleSelectionProps = {
         itemToString: itemToString,
         onSelectedItemsChange: function (changes) {
@@ -57,8 +57,8 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _0 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _0.selectedItems, addSelectedItem = _0.addSelectedItem, setSelectedItems = _0.setSelectedItems, removeSelectedItem = _0.removeSelectedItem, getDropdownProps = _0.getDropdownProps;
-    var _1 = downshift.useCombobox({
+    var _2 = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _2.selectedItems, addSelectedItem = _2.addSelectedItem, setSelectedItems = _2.setSelectedItems, removeSelectedItem = _2.removeSelectedItem, getDropdownProps = _2.getDropdownProps;
+    var _3 = downshift.useCombobox({
         id: id,
         isOpen: openProp,
         circularNavigation: circularNavigation,
@@ -112,7 +112,7 @@ var BaseSelect = React.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__default.default([ref, fieldRef]) }));
     var handleFieldFocus = function (event) {
@@ -206,10 +206,16 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
             observer.disconnect();
         };
     }, [calcOptionsListWidth, open, optionsListWidth]);
+    var finalOptions = React.useMemo(function () {
+        if (filterFunction) {
+            return utils.getFilteredOptions(options, filterValue || '', filterFunction);
+        }
+        return options;
+    }, [filterFunction, filterValue, options]);
     hooks.useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
-        options,
+        finalOptions,
         selectedItems,
     ]);
     var renderValue = React.useCallback(function () {
@@ -219,8 +225,16 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
         var value = multiple
             ? selectedItems.map(function (option) { return option.key; })
             : (selectedItems[0] || {}).key;
-        return (React__default.default.createElement(components_nativeSelect_Component.NativeSelect, tslib_es6.__assign({}, menuProps, { className: styles__default.default.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options })));
-    }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
+        return (React__default.default.createElement(components_nativeSelect_Component.NativeSelect, tslib_es6.__assign({}, menuProps, { className: styles__default.default.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__default.default.createElement("div", tslib_es6.__assign({}, getComboboxProps(tslib_es6.__assign(tslib_es6.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles__default.default.component, (_b = {}, _b[styles__default.default.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": getDataTestId(dataTestId) }),
         nativeSelect && renderNativeSelect(),
@@ -239,7 +253,7 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
             }, dataTestId: getDataTestId(dataTestId, 'field') }, fieldProps)),
         name && !nativeSelect && renderValue(),
         !nativeSelect && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn__default.default(styles__default.default.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, styles__default.default.optionsList) }),
-            React__default.default.createElement(OptionsList, tslib_es6.__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__default.default.createElement(OptionsList, tslib_es6.__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') }))))))));
 });
 
 exports.BaseSelect = BaseSelect;

package/select/cssm/{Component-e61bd989.js → Component-a6199ac9.js}

@@ -7,7 +7,7 @@ var downshift = require('downshift');
 var coreComponentsBottomSheet = require('../../bottom-sheet/cssm');
 var mobile = require('../../modal/cssm/mobile');
 require('./Component.js');
-var components_baseSelect_Component = require('./Component-d0e84442.js');
+var components_baseSelect_Component = require('./Component-246be813.js');
 var components_field_Component = require('./components/field/Component.js');
 var components_optgroup_Component = require('./components/optgroup/Component.js');
 var components_option_Component = require('./components/option/Component.js');
@@ -161,15 +161,15 @@ function useSelectWithApply(_a) {
 
 var BaseSelectMobile = React.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 = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, _t = _a.OptionsList, OptionsList = _t === void 0 ? components_baseSelectMobile_optionsList_Component.OptionsList : _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 = _p === void 0 ? components_arrow_Component.Arrow : _p, _q = _a.Field, Field = _q === void 0 ? components_field_Component.Field : _q, _r = _a.Optgroup, Optgroup = _r === void 0 ? components_optgroup_Component.Optgroup : _r, _s = _a.Option, Option = _s === void 0 ? components_option_Component.Option : _s, _t = _a.OptionsList, OptionsList = _t === void 0 ? components_baseSelectMobile_optionsList_Component.OptionsList : _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 = React.useRef(null);
     var fieldRef = React.useRef(null);
     var listRef = React.useRef(null);
     var initiatorRef = React.useRef(null);
     var itemToString = function (option) { return (option ? option.key : ''); };
-    var _u = React.useMemo(function () { return utils.processOptions(options, selected); }, [options, selected]), flatOptions = _u.flatOptions, selectedOptions = _u.selectedOptions;
+    var _w = React.useMemo(function () { return utils.processOptions(options, selected); }, [options, selected]), flatOptions = _w.flatOptions, selectedOptions = _w.selectedOptions;
     var selectedOptionsRef = React.useRef(selectedOptions);
-    var _v = React.useState(selectedOptions), selectedDraft = _v[0], setSelectedDraft = _v[1];
+    var _x = React.useState(selectedOptions), selectedDraft = _x[0], setSelectedDraft = _x[1];
     var useMultipleSelectionProps = {
         itemToString: itemToString,
         onSelectedItemsChange: function (changes) {
@@ -196,8 +196,8 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
     if (selected !== undefined) {
         useMultipleSelectionProps.selectedItems = selectedOptions;
     }
-    var _w = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _w.selectedItems, addSelectedItem = _w.addSelectedItem, setSelectedItems = _w.setSelectedItems, removeSelectedItem = _w.removeSelectedItem, getDropdownProps = _w.getDropdownProps;
-    var _x = downshift.useCombobox({
+    var _y = downshift.useMultipleSelection(useMultipleSelectionProps), selectedItems = _y.selectedItems, addSelectedItem = _y.addSelectedItem, setSelectedItems = _y.setSelectedItems, removeSelectedItem = _y.removeSelectedItem, getDropdownProps = _y.getDropdownProps;
+    var _z = downshift.useCombobox({
         id: id,
         isOpen: openProp,
         circularNavigation: circularNavigation,
@@ -260,7 +260,7 @@ var BaseSelectMobile = React.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__default.default([ref, fieldRef]) }));
     React.useEffect(function () {
@@ -338,6 +338,12 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
         }
         toggleMenu();
     };
+    var finalOptions = React.useMemo(function () {
+        if (filterFunction) {
+            return utils.getFilteredOptions(options, filterValue || '', filterFunction);
+        }
+        return options;
+    }, [filterFunction, filterValue, options]);
     return (React__default.default.createElement("div", tslib_es6.__assign({}, getComboboxProps(tslib_es6.__assign(tslib_es6.__assign({ ref: rootRef }, (disabled && { 'aria-disabled': true })), { className: cn__default.default(styles__default$1.default.component, (_b = {}, _b[styles__default$1.default.block] = block, _b), className) })), { onKeyDown: disabled ? undefined : handleFieldKeyDown, tabIndex: -1, "data-test-id": components_baseSelect_Component.getDataTestId(dataTestId) }),
         React__default.default.createElement(Field, tslib_es6.__assign({ selectedMultiple: selectedDraft, selected: selectedItems[0], setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, multiple: multiple, open: open, disabled: disabled, size: size, placeholder: placeholder, label: label && React__default.default.createElement("span", tslib_es6.__assign({}, getLabelProps()), label), labelView: labelView, Arrow: Arrow && React__default.default.createElement(Arrow, { open: open }), error: error, hint: hint, valueRenderer: valueRenderer, className: fieldClassName, innerProps: {
                 onFocus: disabled ? undefined : handleFieldFocus,
@@ -354,10 +360,10 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
         name && renderValue(),
         isBottomSheet ? (React__default.default.createElement(coreComponentsBottomSheet.BottomSheet, tslib_es6.__assign({ open: open, onClose: handleClose, className: styles__default$1.default.sheet, contentClassName: styles__default$1.default.sheetContent, containerClassName: styles__default$1.default.sheetContainer, title: placeholder, actionButton: footer, stickyHeader: true, hasCloser: true, swipeable: swipeable }, bottomSheetProps),
             React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
-                React__default.default.createElement(OptionsListWithApply, tslib_es6.__assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles__default$1.default.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear }))))) : (React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, contentClassName: styles__default$1.default.sheetContent, hasCloser: true },
+                React__default.default.createElement(OptionsListWithApply, tslib_es6.__assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: finalOptions, OptionsList: OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles__default$1.default.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear }))))) : (React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, contentClassName: styles__default$1.default.sheetContent, hasCloser: true },
             React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: placeholder, sticky: true }),
             React__default.default.createElement("div", tslib_es6.__assign({}, menuProps, { className: optionsListClassName }),
-                React__default.default.createElement(OptionsListWithApply, tslib_es6.__assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: options, OptionsList: OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles__default$1.default.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear })))))));
+                React__default.default.createElement(OptionsListWithApply, tslib_es6.__assign({ showFooter: multiple }, optionsListProps, { flatOptions: flatOptions, highlightedIndex: highlightedIndex, size: size, options: finalOptions, OptionsList: OptionsList, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, dataTestId: components_baseSelect_Component.getDataTestId(dataTestId, 'options-list'), optionGroupClassName: cn__default.default(styles__default$1.default.optionGroup, optionGroupClassName), onApply: handleApply, onClear: handleClear })))))));
 });
 
 var SelectMobile = React.forwardRef(function (_a, ref) {

package/select/cssm/Component.js

@@ -1,7 +1,7 @@
 var tslib_es6 = require('./tslib.es6-0e9bf404.js');
 var React = require('react');
 var components_arrow_Component = require('./components/arrow/Component.js');
-var components_baseSelect_Component = require('./Component-d0e84442.js');
+var components_baseSelect_Component = require('./Component-246be813.js');
 var components_field_Component = require('./components/field/Component.js');
 var components_optgroup_Component = require('./components/optgroup/Component.js');
 var components_option_Component = require('./components/option/Component.js');

package/select/cssm/Component.responsive.js

@@ -5,8 +5,8 @@ var Component = 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('./components/field/index.module.css');
 require('./components/optgroup/index.module.css');

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

@@ -1,5 +1,5 @@
 :root {
-    --color-light-graphic-primary: #000;
+    --color-light-graphic-primary: #0b1f35;
 }
 :root {
 

package/select/cssm/components/base-option/index.module.css

@@ -1,9 +1,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/cssm/components/base-select/Component.js

@@ -6,7 +6,7 @@ require('classnames');
 require('downshift');
 require('../../../../popover/cssm');
 require('@alfalab/hooks');
-var components_baseSelect_Component = require('../../Component-d0e84442.js');
+var components_baseSelect_Component = require('../../Component-246be813.js');
 require('../../utils.js');
 require('../native-select/Component.js');
 require('./index.module.css');

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

@@ -1 +1 @@
-export * from "../../Component-d0e84442";
+export * from "../../Component-246be813";

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

@@ -1,4 +1,4 @@
-var components_baseSelect_Component = require('../../Component-d0e84442.js');
+var components_baseSelect_Component = require('../../Component-246be813.js');
 require('../../tslib.es6-0e9bf404.js');
 require('react');
 require('react-merge-refs');

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

@@ -7,8 +7,8 @@ require('../../../../bottom-sheet/cssm');
 require('../../../../modal/cssm/mobile');
 require('../../Component.js');
 require('../arrow/Component.js');
-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('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');

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

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

package/select/cssm/components/base-select-mobile/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('../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/components/base-select-mobile/options-list/index.module.css

@@ -1,7 +1,7 @@
 :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/cssm/components/checkmark/index.module.css

@@ -1,6 +1,6 @@
 :root {
     --color-light-graphic-positive: #2fc26e;
-    --color-light-graphic-primary: #000;
+    --color-light-graphic-primary: #0b1f35;
 }
 :root {
 

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

@@ -1,6 +1,6 @@
 :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 {
 

package/select/cssm/components/index.js

@@ -1,6 +1,6 @@
 var components_arrow_Component = require('./arrow/Component.js');
-var components_baseSelect_Component = require('../Component-d0e84442.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../Component-e61bd989.js');
+var components_baseSelect_Component = require('../Component-246be813.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../Component-a6199ac9.js');
 var components_field_Component = require('./field/Component.js');
 var components_optgroup_Component = require('./optgroup/Component.js');
 var components_option_Component = require('./option/Component.js');

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

@@ -1,6 +1,6 @@
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.6);
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {
 

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

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

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

@@ -22,21 +22,25 @@ var createCounter = function () {
     return function () { return count++; };
 };
 var OptionsList = React.forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, optionGroupClassName = _a.optionGroupClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.Optgroup, Optgroup = _d === void 0 ? components_optgroup_Component.Optgroup : _d, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _e = _a.visibleOptions, visibleOptions = _e === void 0 ? 5 : _e, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar;
+    var _b = _a.size, size = _b === void 0 ? 's' : _b, className = _a.className, optionGroupClassName = _a.optionGroupClassName, Option = _a.Option, getOptionProps = _a.getOptionProps, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.Optgroup, Optgroup = _d === void 0 ? components_optgroup_Component.Optgroup : _d, dataTestId = _a.dataTestId, emptyPlaceholder = _a.emptyPlaceholder, _e = _a.visibleOptions, visibleOptions = _e === void 0 ? 5 : _e, onScroll = _a.onScroll, open = _a.open, header = _a.header, footer = _a.footer, optionsListWidth = _a.optionsListWidth, nativeScrollbarProp = _a.nativeScrollbar, _f = _a.useOptionsIds, useOptionsIds = _f === void 0 ? false : _f;
     var nativeScrollbar = hooks.useMedia([[true, '(max-width: 1023px)']], false)[0];
     nativeScrollbar = Boolean(nativeScrollbarProp !== null && nativeScrollbarProp !== void 0 ? nativeScrollbarProp : nativeScrollbar);
     var renderOption = function (option, index) { return (React__default.default.createElement(Option, tslib_es6.__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()); }))); };
+    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, useOptionsIds ? option.id || 0 : counter());
+    }))); };
     utils.useVisibleOptions(tslib_es6.__assign(tslib_es6.__assign({}, (!nativeScrollbar && { styleTargetRef: scrollbarRef })), { visibleOptions: visibleOptions, listRef: listRef, open: open, invalidate: options }));
     if (options.length === 0 && !emptyPlaceholder) {
         return null;
     }
     var renderListItems = function () { return (React__default.default.createElement(React__default.default.Fragment, null,
         options.map(function (option) {
-            return utils.isGroup(option) ? renderGroup(option) : renderOption(option, counter());
+            return utils.isGroup(option)
+                ? renderGroup(option)
+                : renderOption(option, useOptionsIds ? option.id || 0 : counter());
         }),
         emptyPlaceholder && options.length === 0 && (React__default.default.createElement("div", { className: styles__default.default.emptyPlaceholder }, emptyPlaceholder)))); };
     var renderWithCustomScrollbar = function () {

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

@@ -1,5 +1,5 @@
 :root {
-    --color-light-text-secondary: rgba(60, 60, 67, 0.6);
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
 }
 :root {
 

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

@@ -1,7 +1,7 @@
 require('../../tslib.es6-0e9bf404.js');
 require('react');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-e61bd989.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-a6199ac9.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
@@ -13,7 +13,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/components/select-mobile/index.d.ts

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

package/select/cssm/components/select-mobile/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('../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/components/select-modal-mobile/Component.js

@@ -1,7 +1,7 @@
 require('../../tslib.es6-0e9bf404.js');
 require('react');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-e61bd989.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-a6199ac9.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
@@ -13,7 +13,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/components/select-modal-mobile/index.d.ts

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

package/select/cssm/components/select-modal-mobile/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('../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/components/virtual-options-list/index.module.css

@@ -1,6 +1,6 @@
 :root {
-    --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/cssm/index.js

@@ -1,7 +1,7 @@
 var Component = require('./Component.js');
 var components_arrow_Component = require('./components/arrow/Component.js');
-var components_baseSelect_Component = require('./Component-d0e84442.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-e61bd989.js');
+var components_baseSelect_Component = require('./Component-246be813.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-a6199ac9.js');
 var components_field_Component = require('./components/field/Component.js');
 var components_optgroup_Component = require('./components/optgroup/Component.js');
 var components_option_Component = require('./components/option/Component.js');
@@ -72,6 +72,7 @@ exports.VirtualOptionsList = components_virtualOptionsList_Component.VirtualOpti
 exports.BaseOption = components_baseOption_Component.BaseOption;
 exports.useSelectWithLoading = presets_useSelectWithLoading_hook.useSelectWithLoading;
 exports.useLazyLoading = presets_useLazyLoading_hook.useLazyLoading;
+exports.getFilteredOptions = utils.getFilteredOptions;
 exports.isGroup = utils.isGroup;
 exports.isOptionShape = utils.isOptionShape;
 exports.joinOptions = utils.joinOptions;