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

package/select/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-279426cb.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-1d3b181c.js');
+var components_baseSelect_Component = require('./Component-f670e03e.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./Component-2e5231ae.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');
@@ -11,7 +11,7 @@ var components_baseOption_Component = require('./components/base-option/Componen
 var presets_useSelectWithLoading_hook = require('./presets/useSelectWithLoading/hook.js');
 var presets_useLazyLoading_hook = require('./presets/useLazyLoading/hook.js');
 var utils = require('./utils.js');
-require('./tslib.es6-4a2c504c.js');
+require('./tslib.es6-febad92e.js');
 require('react');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -33,7 +33,7 @@ require('../bottom-sheet');
 require('../modal/mobile');
 require('react-virtual');
 require('../skeleton');
-require('./intersection-observer-f3839684.js');
+require('./intersection-observer-0f86c9db.js');
 require('../button');
 require('./components/base-checkmark/Component.js');
 require('./components/base-select-mobile/options-list/Component.js');
@@ -56,6 +56,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/modern/{Component-59475d11.js → Component-1d36bace.js}

@@ -5,7 +5,7 @@ import cn from 'classnames';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { Popover } from '../../popover/modern';
 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';
 
 const getDataTestId = (dataTestId, element) => {
@@ -16,7 +16,7 @@ const getDataTestId = (dataTestId, element) => {
 const styles = {"component":"select__component_fvul1","popoverInner":"select__popoverInner_fvul1","optionsList":"select__optionsList_fvul1","nativeSelect":"select__nativeSelect_fvul1","block":"select__block_fvul1"};
 require('./components/base-select/index.css');
 
-const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsListClassName, optionClassName, popperClassName, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, nativeSelect = false, defaultOpen = false, open: openProp, popoverPosition = 'bottom-start', preventFlip = true, optionsListWidth = 'content', name, id, selected, size = 's', optionsSize = size, error, hint, block, label, labelView, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, updatePopover, zIndexPopover, showEmptyOptionsList = false, visibleOptions, }, ref) => {
+const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsListClassName, optionClassName, popperClassName, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, nativeSelect = false, defaultOpen = false, open: openProp, popoverPosition = 'bottom-start', preventFlip = true, optionsListWidth = 'content', name, id, selected, size = 's', optionsSize = size, error, hint, block, label, labelView, placeholder, fieldProps = {}, optionsListProps = {}, optionProps = {}, valueRenderer, onChange, onOpen, onFocus, onBlur, onScroll, Arrow, Field = () => null, OptionsList = () => null, Optgroup = () => null, Option = () => null, updatePopover, zIndexPopover, showEmptyOptionsList = false, visibleOptions, filterProps: { filterFunction, filterValue } = {}, }, ref) => {
     const rootRef = useRef(null);
     const fieldRef = useRef(null);
     const listRef = useRef(null);
@@ -210,10 +210,16 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
             observer.disconnect();
         };
     }, [calcOptionsListWidth, open, optionsListWidth]);
+    const finalOptions = useMemo(() => {
+        if (filterFunction) {
+            return getFilteredOptions(options, filterValue || '', filterFunction);
+        }
+        return options;
+    }, [filterFunction, filterValue, options]);
     useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
         open,
         optionsListWidth,
-        options,
+        finalOptions,
         selectedItems,
     ]);
     const renderValue = useCallback(() => selectedItems.map((option) => (React.createElement("input", { type: 'hidden', name: name, value: option.key, key: option.key }))), [selectedItems, name]);
@@ -221,8 +227,16 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
         const value = multiple
             ? selectedItems.map((option) => option.key)
             : (selectedItems[0] || {}).key;
-        return (React.createElement(NativeSelect, { ...menuProps, className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: options }));
-    }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
+        return (React.createElement(NativeSelect, { ...menuProps, className: styles.nativeSelect, disabled: disabled, multiple: multiple, name: name, value: value, onChange: handleNativeSelectChange, options: finalOptions }));
+    }, [
+        multiple,
+        selectedItems,
+        disabled,
+        name,
+        handleNativeSelectChange,
+        finalOptions,
+        menuProps,
+    ]);
     const needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
     return (React.createElement("div", { ...getComboboxProps({
             ref: rootRef,
@@ -245,7 +259,7 @@ const BaseSelect = forwardRef(({ dataTestId, className, fieldClassName, optionsL
             }, dataTestId: getDataTestId(dataTestId, 'field'), ...fieldProps }),
         name && !nativeSelect && renderValue(),
         !nativeSelect && (React.createElement(Popover, { open: open, withTransition: false, anchorElement: fieldRef.current, position: popoverPosition, preventFlip: preventFlip, popperClassName: cn(styles.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React.createElement("div", { ...menuProps, className: cn(optionsListClassName, styles.optionsList) },
-            React.createElement(OptionsList, { ...optionsListProps, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: options, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: getDataTestId(dataTestId, 'options-list') })))))));
+            React.createElement(OptionsList, { ...optionsListProps, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: 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/modern/{Component-54ff52c0.js → Component-c1d61517.js}

@@ -6,7 +6,7 @@ import { useMultipleSelection, useCombobox } from 'downshift';
 import { BottomSheet } from '../../bottom-sheet/modern';
 import { ModalMobile } from '../../modal/modern/mobile';
 import './Component.js';
-import { g as getDataTestId } from './Component-59475d11.js';
+import { g as getDataTestId } from './Component-1d36bace.js';
 import { Field } from './components/field/Component.js';
 import { Optgroup } from './components/optgroup/Component.js';
 import { Option } from './components/option/Component.js';
@@ -14,10 +14,10 @@ import { OptionsList } from './components/options-list/Component.js';
 import 'react-virtual';
 import '../../scrollbar/modern';
 import '@alfalab/hooks';
-import { processOptions } from './utils.js';
+import { processOptions, getFilteredOptions } from './utils.js';
 import { BaseOption } from './components/base-option/Component.js';
 import '../../skeleton/modern';
-import './intersection-observer-0cd7a6ad.js';
+import './intersection-observer-b8a51493.js';
 import { Button } from '../../button/modern';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '../../form-control/modern';
@@ -150,7 +150,7 @@ function useSelectWithApply({ options, selected, onChange = () => null, OptionsL
 const styles = {"component":"select__component_1pba6","popoverInner":"select__popoverInner_1pba6","sheet":"select__sheet_1pba6","sheetContent":"select__sheetContent_1pba6","sheetContainer":"select__sheetContainer_1pba6","block":"select__block_1pba6","option":"select__option_1pba6","optionGroup":"select__optionGroup_1pba6"};
 require('./components/base-select-mobile/index.css');
 
-const BaseSelectMobile = forwardRef(({ dataTestId, className, fieldClassName, optionsListClassName, optionClassName, optionGroupClassName, optionsListProps, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, name, id, selected, size = 'm', optionsSize = 'm', error, hint, block, label, labelView, placeholder, fieldProps = {}, optionProps = {}, valueRenderer, onChange, onOpen, onFocus, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, OptionsList = OptionsList$1, swipeable, footer, isBottomSheet, bottomSheetProps, }, ref) => {
+const BaseSelectMobile = forwardRef(({ dataTestId, className, fieldClassName, optionsListClassName, optionClassName, optionGroupClassName, optionsListProps, options, autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, name, id, selected, size = 'm', optionsSize = 'm', error, hint, block, label, labelView, placeholder, fieldProps = {}, optionProps = {}, valueRenderer, onChange, onOpen, onFocus, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, OptionsList = OptionsList$1, swipeable, footer, isBottomSheet, bottomSheetProps, filterProps: { filterFunction, filterValue } = {}, }, ref) => {
     const rootRef = useRef(null);
     const fieldRef = useRef(null);
     const listRef = useRef(null);
@@ -339,6 +339,12 @@ const BaseSelectMobile = forwardRef(({ dataTestId, className, fieldClassName, op
         }
         toggleMenu();
     };
+    const finalOptions = useMemo(() => {
+        if (filterFunction) {
+            return getFilteredOptions(options, filterValue || '', filterFunction);
+        }
+        return options;
+    }, [filterFunction, filterValue, options]);
     return (React.createElement("div", { ...getComboboxProps({
             ref: rootRef,
             ...(disabled && { 'aria-disabled': true }),
@@ -359,10 +365,10 @@ const BaseSelectMobile = forwardRef(({ dataTestId, className, fieldClassName, op
         name && renderValue(),
         isBottomSheet ? (React.createElement(BottomSheet, { 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", { ...menuProps, className: optionsListClassName },
-                React.createElement(OptionsListWithApply, { 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, { 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", { ...menuProps, className: optionsListClassName },
-                React.createElement(OptionsListWithApply, { 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, { 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 }))))));
 });
 
 const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 'm', optionsSize = 'm', fieldProps = {}, optionProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, ...restProps }, ref) => (React.createElement(BaseSelectMobile, { ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: fieldProps, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, isBottomSheet: true, ...restProps })));

package/select/modern/Component.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { Arrow } from './components/arrow/Component.js';
-import { B as BaseSelect } from './Component-59475d11.js';
+import { B as BaseSelect } from './Component-1d36bace.js';
 import { Field } from './components/field/Component.js';
 import { Optgroup } from './components/optgroup/Component.js';
 import { Option } from './components/option/Component.js';

package/select/modern/Component.responsive.js

@@ -3,8 +3,8 @@ import { useMedia } from '@alfalab/hooks';
 import { Select } from './Component.js';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
-import './Component-59475d11.js';
-import { S as SelectMobile } from './Component-54ff52c0.js';
+import './Component-1d36bace.js';
+import { S as SelectMobile } from './Component-c1d61517.js';
 import '../../form-control/modern';
 import '../../badge/modern';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
@@ -29,7 +29,7 @@ import '../../modal/modern/mobile';
 import './components/base-option/Component.js';
 import './components/base-checkmark/Component.js';
 import '../../skeleton/modern';
-import './intersection-observer-0cd7a6ad.js';
+import './intersection-observer-b8a51493.js';
 import '../../button/modern';
 import './components/base-select-mobile/options-list/Component.js';
 import '../../base-modal/modern';

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

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

package/select/modern/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/modern/components/base-select/Component.js

@@ -5,6 +5,6 @@ import 'classnames';
 import 'downshift';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
-export { B as BaseSelect } from '../../Component-59475d11.js';
+export { B as BaseSelect } from '../../Component-1d36bace.js';
 import '../native-select/Component.js';
 import '../../utils.js';

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

@@ -1 +1 @@
-export * from "../../Component-59475d11";
+export * from "../../Component-1d36bace";

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

@@ -1,4 +1,4 @@
-export { B as BaseSelect } from '../../Component-59475d11.js';
+export { B as BaseSelect } from '../../Component-1d36bace.js';
 import 'react';
 import 'react-merge-refs';
 import '@juggle/resize-observer';

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

@@ -6,8 +6,8 @@ import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.js';
 import '../arrow/Component.js';
-import '../../Component-59475d11.js';
-export { B as BaseSelectMobile } from '../../Component-54ff52c0.js';
+import '../../Component-1d36bace.js';
+export { B as BaseSelectMobile } from '../../Component-c1d61517.js';
 import '../field/Component.js';
 import '../optgroup/Component.js';
 import '../option/Component.js';
@@ -17,7 +17,7 @@ import '../../../../scrollbar/modern';
 import '@alfalab/hooks';
 import '../base-option/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../base-checkmark/Component.js';
 import './checkmark/Component.js';
 import './options-list/Component.js';

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

@@ -1 +1 @@
-export * from "../../Component-54ff52c0";
+export * from "../../Component-c1d61517";

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

@@ -1,4 +1,4 @@
-export { B as BaseSelectMobile } from '../../Component-54ff52c0.js';
+export { B as BaseSelectMobile } from '../../Component-c1d61517.js';
 import 'react';
 import '../arrow/Component.js';
 import 'classnames';
@@ -8,7 +8,7 @@ import 'downshift';
 import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.js';
-import '../../Component-59475d11.js';
+import '../../Component-1d36bace.js';
 import '@juggle/resize-observer';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
@@ -29,7 +29,7 @@ import 'react-virtual';
 import '../base-option/Component.js';
 import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../../../../button/modern';
 import './options-list/Component.js';
 import '../../../../base-modal/modern';

package/select/modern/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/modern/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/modern/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 {
 

package/select/modern/components/index.js

@@ -1,6 +1,6 @@
 export { Arrow } from './arrow/Component.js';
-export { B as BaseSelect } from '../Component-59475d11.js';
-export { S as SelectMobile, a as SelectModalMobile } from '../Component-54ff52c0.js';
+export { B as BaseSelect } from '../Component-1d36bace.js';
+export { S as SelectMobile, a as SelectModalMobile } from '../Component-c1d61517.js';
 export { Field } from './field/Component.js';
 export { Optgroup } from './optgroup/Component.js';
 export { Option } from './option/Component.js';
@@ -29,7 +29,7 @@ import '../../../checkbox/modern';
 import '../../../scrollbar/modern';
 import 'react-virtual';
 import '../../../skeleton/modern';
-import '../intersection-observer-0cd7a6ad.js';
+import '../intersection-observer-b8a51493.js';
 import '../../../button/modern';
 import './base-checkmark/Component.js';
 import './base-select-mobile/options-list/Component.js';

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

@@ -1,7 +1,7 @@
 /* hash: 5w4c0 */
 :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/modern/components/option/index.css

@@ -2,10 +2,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/modern/components/options-list/Component.js

@@ -14,14 +14,14 @@ const createCounter = () => {
     // eslint-disable-next-line no-plusplus
     return () => count++;
 };
-const OptionsList = forwardRef(({ size = 's', className, optionGroupClassName, Option, getOptionProps, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = 5, onScroll, open, header, footer, optionsListWidth, nativeScrollbar: nativeScrollbarProp, }, ref) => {
+const OptionsList = forwardRef(({ size = 's', className, optionGroupClassName, Option, getOptionProps, options = [], Optgroup: Optgroup$1 = Optgroup, dataTestId, emptyPlaceholder, visibleOptions = 5, onScroll, open, header, footer, optionsListWidth, nativeScrollbar: nativeScrollbarProp, useOptionsIds = false, }, ref) => {
     let [nativeScrollbar] = useMedia([[true, '(max-width: 1023px)']], false);
     nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
     const renderOption = (option, index) => (React.createElement(Option, { key: option.key, ...getOptionProps(option, index) }));
     const listRef = useRef(null);
     const scrollbarRef = useRef(null);
     const counter = createCounter();
-    const renderGroup = (group) => (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map((option) => renderOption(option, counter()))));
+    const renderGroup = (group) => (React.createElement(Optgroup$1, { className: optionGroupClassName, label: group.label, key: group.label, size: size }, group.options.map((option) => renderOption(option, useOptionsIds ? option.id || 0 : counter()))));
     useVisibleOptions({
         ...(!nativeScrollbar && { styleTargetRef: scrollbarRef }),
         visibleOptions,
@@ -33,7 +33,9 @@ const OptionsList = forwardRef(({ size = 's', className, optionGroupClassName, O
         return null;
     }
     const renderListItems = () => (React.createElement(React.Fragment, null,
-        options.map((option) => isGroup(option) ? renderGroup(option) : renderOption(option, counter())),
+        options.map((option) => isGroup(option)
+            ? renderGroup(option)
+            : renderOption(option, useOptionsIds ? option.id || 0 : counter())),
         emptyPlaceholder && options.length === 0 && (React.createElement("div", { className: styles.emptyPlaceholder }, emptyPlaceholder))));
     const renderWithCustomScrollbar = () => {
         const scrollableNodeProps = {

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

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

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

@@ -1,6 +1,6 @@
 import 'react';
 import '../arrow/Component.js';
-export { S as SelectMobile } from '../../Component-54ff52c0.js';
+export { S as SelectMobile } from '../../Component-c1d61517.js';
 import '../field/Component.js';
 import '../optgroup/Component.js';
 import '../option/Component.js';
@@ -11,7 +11,7 @@ import 'downshift';
 import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.js';
-import '../../Component-59475d11.js';
+import '../../Component-1d36bace.js';
 import '@juggle/resize-observer';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
@@ -29,7 +29,7 @@ import 'react-virtual';
 import '../base-option/Component.js';
 import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../../../../button/modern';
 import '../base-select-mobile/options-list/Component.js';
 import '../../../../base-modal/modern';

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

@@ -1 +1 @@
-export * from "../../Component-54ff52c0";
+export * from "../../Component-c1d61517";

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

@@ -1,4 +1,4 @@
-export { S as SelectMobile } from '../../Component-54ff52c0.js';
+export { S as SelectMobile } from '../../Component-c1d61517.js';
 import 'react';
 import '../arrow/Component.js';
 import 'classnames';
@@ -8,7 +8,7 @@ import 'downshift';
 import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.js';
-import '../../Component-59475d11.js';
+import '../../Component-1d36bace.js';
 import '@juggle/resize-observer';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
@@ -29,7 +29,7 @@ import 'react-virtual';
 import '../base-option/Component.js';
 import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../../../../button/modern';
 import '../base-select-mobile/options-list/Component.js';
 import '../../../../base-modal/modern';

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

@@ -1,6 +1,6 @@
 import 'react';
 import '../arrow/Component.js';
-export { a as SelectModalMobile } from '../../Component-54ff52c0.js';
+export { a as SelectModalMobile } from '../../Component-c1d61517.js';
 import '../field/Component.js';
 import '../optgroup/Component.js';
 import '../option/Component.js';
@@ -11,7 +11,7 @@ import 'downshift';
 import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.js';
-import '../../Component-59475d11.js';
+import '../../Component-1d36bace.js';
 import '@juggle/resize-observer';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
@@ -29,7 +29,7 @@ import 'react-virtual';
 import '../base-option/Component.js';
 import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../../../../button/modern';
 import '../base-select-mobile/options-list/Component.js';
 import '../../../../base-modal/modern';

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

@@ -1 +1 @@
-export * from "../../Component-54ff52c0";
+export * from "../../Component-c1d61517";

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

@@ -1,4 +1,4 @@
-export { a as SelectModalMobile } from '../../Component-54ff52c0.js';
+export { a as SelectModalMobile } from '../../Component-c1d61517.js';
 import 'react';
 import '../arrow/Component.js';
 import 'classnames';
@@ -8,7 +8,7 @@ import 'downshift';
 import '../../../../bottom-sheet/modern';
 import '../../../../modal/modern/mobile';
 import '../../Component.js';
-import '../../Component-59475d11.js';
+import '../../Component-1d36bace.js';
 import '@juggle/resize-observer';
 import '../../../../popover/modern';
 import '@alfalab/hooks';
@@ -29,7 +29,7 @@ import 'react-virtual';
 import '../base-option/Component.js';
 import '../base-checkmark/Component.js';
 import '../../../../skeleton/modern';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import '../../../../button/modern';
 import '../base-select-mobile/options-list/Component.js';
 import '../../../../base-modal/modern';

package/select/modern/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/modern/index.js

@@ -1,7 +1,7 @@
 export { Select } from './Component.js';
 export { Arrow } from './components/arrow/Component.js';
-export { B as BaseSelect } from './Component-59475d11.js';
-export { b as SELECT_ALL_KEY, S as SelectMobile, a as SelectModalMobile, u as useSelectWithApply } from './Component-54ff52c0.js';
+export { B as BaseSelect } from './Component-1d36bace.js';
+export { b as SELECT_ALL_KEY, S as SelectMobile, a as SelectModalMobile, u as useSelectWithApply } from './Component-c1d61517.js';
 export { Field } from './components/field/Component.js';
 export { Optgroup } from './components/optgroup/Component.js';
 export { Option } from './components/option/Component.js';
@@ -10,7 +10,7 @@ export { VirtualOptionsList } from './components/virtual-options-list/Component.
 export { BaseOption } from './components/base-option/Component.js';
 export { useSelectWithLoading } from './presets/useSelectWithLoading/hook.js';
 export { useLazyLoading } from './presets/useLazyLoading/hook.js';
-export { isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from './utils.js';
+export { getFilteredOptions, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from './utils.js';
 import 'react';
 import 'classnames';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
@@ -32,7 +32,7 @@ import '../../bottom-sheet/modern';
 import '../../modal/modern/mobile';
 import 'react-virtual';
 import '../../skeleton/modern';
-import './intersection-observer-0cd7a6ad.js';
+import './intersection-observer-b8a51493.js';
 import '../../button/modern';
 import './components/base-checkmark/Component.js';
 import './components/base-select-mobile/options-list/Component.js';

package/select/modern/presets/index.js

@@ -1,6 +1,6 @@
 export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
 export { useLazyLoading } from './useLazyLoading/hook.js';
-export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-54ff52c0.js';
+export { b as SELECT_ALL_KEY, u as useSelectWithApply } from '../Component-c1d61517.js';
 import 'react';
 import '../../../skeleton/modern';
 import '../components/option/Component.js';
@@ -11,7 +11,7 @@ import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/CheckmarkMIcon';
 import '../components/checkmark/Component.js';
 import '../../../checkbox/modern';
-import '../intersection-observer-0cd7a6ad.js';
+import '../intersection-observer-b8a51493.js';
 import '../components/arrow/Component.js';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import 'react-merge-refs';
@@ -19,7 +19,7 @@ import 'downshift';
 import '../../../bottom-sheet/modern';
 import '../../../modal/modern/mobile';
 import '../Component.js';
-import '../Component-59475d11.js';
+import '../Component-1d36bace.js';
 import '@juggle/resize-observer';
 import '../../../popover/modern';
 import '@alfalab/hooks';

package/select/modern/presets/useLazyLoading/hook.js

@@ -1,7 +1,7 @@
 import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Skeleton } from '../../../../skeleton/modern';
 import { Option } from '../../components/option/Component.js';
-import '../../intersection-observer-0cd7a6ad.js';
+import '../../intersection-observer-b8a51493.js';
 import 'classnames';
 import '../../components/base-select-mobile/checkmark/Component.js';
 import '../../../../badge/modern';