npm - @alfalab/core-components - Versions diffs - 37.2.1 → 37.3.0-beta.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2228) hide show

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

@@ -1,4 +1,4 @@
-var tslib_es6 = require('../../tslib.es6-ec34179d.js');
+var tslib_es6 = require('../../tslib.es6-febad92e.js');
 var React = require('react');
 var reactVirtual = require('react-virtual');
 var cn = require('classnames');
@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var styles = {"virtualOptionsList":"select__virtualOptionsList_skr3a","scrollable":"select__scrollable_skr3a","inner":"select__inner_skr3a","virtualRow":"select__virtualRow_skr3a","highlighted":"select__highlighted_skr3a","emptyPlaceholder":"select__emptyPlaceholder_skr3a","l":"select__l_skr3a","xl":"select__xl_skr3a"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_1rykd","scrollable":"select__scrollable_1rykd","inner":"select__inner_1rykd","virtualRow":"select__virtualRow_1rykd","highlighted":"select__highlighted_1rykd","emptyPlaceholder":"select__emptyPlaceholder_1rykd","l":"select__l_1rykd","xl":"select__xl_1rykd"};
 require('./index.css');
 /* eslint-disable react-hooks/exhaustive-deps */

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

@@ -32,27 +32,27 @@
     /* optgroup */
 }
-.select__virtualOptionsList_skr3a {
+.select__virtualOptionsList_1rykd {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
 }
-.select__scrollable_skr3a {
+.select__scrollable_1rykd {
     overflow: auto;
     width: 100%;
 }
-.select__inner_skr3a {
+.select__inner_1rykd {
     position: relative;
     width: 100%;
 }
-.select__virtualRow_skr3a {
+.select__virtualRow_1rykd {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
 }
-.select__virtualRow_skr3a:before {
+.select__virtualRow_1rykd:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -63,18 +63,18 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
     }
-.select__virtualRow_skr3a:first-child:before {
+.select__virtualRow_1rykd:first-child:before {
         display: none;
     }
-.select__highlighted_skr3a:before,
-    .select__highlighted_skr3a + .select__virtualRow_skr3a:before {
+.select__highlighted_1rykd:before,
+    .select__highlighted_1rykd + .select__virtualRow_1rykd:before {
         display: none;
     }
-.select__emptyPlaceholder_skr3a {
+.select__emptyPlaceholder_1rykd {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
 }
-.select__l_skr3a .select__emptyPlaceholder_skr3a,
-.select__xl_skr3a .select__emptyPlaceholder_skr3a {
+.select__l_1rykd .select__emptyPlaceholder_1rykd,
+.select__xl_1rykd .select__emptyPlaceholder_1rykd {
     padding: var(--gap-xl) var(--gap-m);
 }

package/select/components/virtual-options-list/index.js CHANGED Viewed

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

package/select/cssm/{Component-d0e84442.d.ts → Component-246be813.d.ts} RENAMED Viewed

File without changes

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

@@ -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.d.ts → Component-a6199ac9.d.ts} RENAMED Viewed

File without changes

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/base-select/Component.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/select/cssm/components/base-select-mobile/index.js CHANGED Viewed

@@ -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/index.js CHANGED Viewed

@@ -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/options-list/Component.js CHANGED Viewed

@@ -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/select-mobile/Component.js CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/select/cssm/components/select-mobile/index.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/select/cssm/components/select-modal-mobile/index.js CHANGED Viewed

@@ -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/index.js CHANGED Viewed

@@ -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;

package/select/cssm/presets/index.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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/responsive.js CHANGED Viewed

@@ -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');