@alfalab/core-components-select 15.1.6 → 15.2.1

package/Component-89f0cb07.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-89f0cb07";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     */
+    size?: "xs" | "s" | "m";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/Component.mobile-ebda875c.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { AnchorButtonProps, NativeButtonProps } from "./typings-9211a437";
-type ButtonMobileProps = Partial<AnchorButtonProps | NativeButtonProps>;
-declare const ButtonMobile: React.ForwardRefExoticComponent<ButtonMobileProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export { ButtonMobileProps, ButtonMobile };
+import { BaseFormControlProps } from "./index-ebda875c";
+type FormControlMobileProps = Omit<BaseFormControlProps, 'styles' | 'colorStyles'>;
+declare const FormControlMobile: React.ForwardRefExoticComponent<FormControlMobileProps & React.RefAttributes<HTMLDivElement>>;
+export { FormControlMobileProps, FormControlMobile };

package/Component.mobile-f1f15074.d.ts

@@ -80,7 +80,7 @@ type NavigationBarProps = {
     /**
      * Подзаголовок (доступен только в мобильной версии)
      */
-    subtitle?: string;
+    subtitle?: ReactNode;
     /**
      * Размер заголовка (compact доступен только в мобильной версии)
      */
@@ -382,18 +382,18 @@ type IconButtonProps = {
      * Набор цветов для компонента
      */
     colors?: "default" | "inverted";
-} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading" | "breakpoint"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "Component" | "href" | "loading" | "breakpoint"> & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "target" | "download">;
 declare const IconButton: React.ForwardRefExoticComponent<{
     icon: ElementType<{
         className?: string;
     }> | ReactElement;
     view?: "primary" | "secondary" | "tertiary" | "negative" | "transparent" | undefined;
-    size?: "s" | "xs" | "xxs" | undefined;
+    size?: "xs" | "s" | "xxs" | undefined;
     className?: string | undefined;
     alignIcon?: "center" | "right" | "left" | undefined;
     dataTestId?: string | undefined;
     colors?: "default" | "inverted" | undefined;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & Pick<ButtonProps, "href" | "Component" | "loading" | "breakpoint"> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download" | "target"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
     Content: React.FC<import("./typings-baf4875b").ContentProps>;
     Header: React.FC<HeaderProps>;

package/Component.mobile.js

@@ -14,7 +14,7 @@ var components_option_Component = require('./components/option/Component.js');
 var components_optionsList_Component = require('./components/options-list/Component.js');
 var components_search_Component = require('./components/search/Component.js');
 var components_virtualOptionsList_Component = require('./components/virtual-options-list/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-e2cb53a7.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-38a2e173.js');
 var presets_useSelectWithApply_optionsListWithApply_header_Component = require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -61,7 +61,7 @@ var SelectMobile = React.forwardRef(function (_a, ref) {
         showClear: showClear,
         showSelectAll: showSelectAll,
     });
-    return (React__default.default.createElement(components_baseSelectMobile_Component.BaseSelectMobile, tslib.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: tslib.__assign({ FormControlComponent: mobile.FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, Search: Search, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, bottomSheetProps: tslib.__assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, bottomSheetProps), optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
+    return (React__default.default.createElement(components_baseSelectMobile_Component.BaseSelectMobile, tslib.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: tslib.__assign({ FormControlComponent: mobile.FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, Search: Search, isBottomSheet: true, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, showSearch: showSearch, searchProps: searchProps, bottomSheetProps: tslib.__assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, bottomSheetProps), optionsListProps: optionsListProps }, restProps, (useWithApplyHook && applyProps))));
 });
 
 exports.SelectMobile = SelectMobile;

package/Component.modal.mobile.js

@@ -13,7 +13,7 @@ var components_optgroup_Component = require('./components/optgroup/Component.js'
 var components_option_Component = require('./components/option/Component.js');
 var components_optionsList_Component = require('./components/options-list/Component.js');
 var components_virtualOptionsList_Component = require('./components/virtual-options-list/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-e2cb53a7.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('./hook-38a2e173.js');
 var presets_useSelectWithApply_optionsListWithApply_header_Component = require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');
 require('classnames');
 require('@alfalab/icons-glyph/ChevronDownMIcon');
@@ -61,7 +61,7 @@ var SelectModalMobile = React.forwardRef(function (_a, ref) {
         showClear: showClear,
         showSelectAll: showSelectAll,
     });
-    return (React__default.default.createElement(components_baseSelectMobile_Component.BaseSelectMobile, tslib.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: tslib.__assign({ FormControlComponent: mobile.FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, optionsListProps: optionsListProps, modalHeaderProps: tslib.__assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, modalHeaderProps) }, restProps, (useWithApplyHook && applyProps))));
+    return (React__default.default.createElement(components_baseSelectMobile_Component.BaseSelectMobile, tslib.__assign({ ref: ref, autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: tslib.__assign({ FormControlComponent: mobile.FormControlMobile }, fieldProps), optionProps: optionProps, Arrow: Arrow, Field: Field, Optgroup: Optgroup, Option: Option, isBottomSheet: false, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList, optionsListProps: optionsListProps, showSearch: showSearch, searchProps: searchProps, modalHeaderProps: tslib.__assign({ bottomAddons: useWithApplyHook && showHeaderWithSelectAll && (React__default.default.createElement(presets_useSelectWithApply_optionsListWithApply_header_Component.Header, tslib.__assign({}, applyProps.optionsListProps.headerProps, { mobile: true }))) }, modalHeaderProps) }, restProps, (useWithApplyHook && applyProps))));
 });
 
 exports.SelectModalMobile = SelectModalMobile;

package/Component.responsive.js

@@ -43,7 +43,7 @@ require('@alfalab/core-components-base-modal');
 require('@alfalab/core-components-button/mobile');
 require('./components/virtual-options-list/Component.js');
 require('react-virtual');
-require('./hook-e2cb53a7.js');
+require('./hook-38a2e173.js');
 require('./presets/useSelectWithApply/options-list-with-apply/footer/Component.js');
 require('@alfalab/core-components-button/desktop');
 require('./presets/useSelectWithApply/options-list-with-apply/header/Component.js');

package/components/arrow/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"arrow":"select__arrow_8xwu5","open":"select__open_8xwu5"};
+var styles = {"arrow":"select__arrow_1auoj","open":"select__open_1auoj"};
 require('./index.css')
 
 var Arrow = function (_a) {

package/components/arrow/index.css

@@ -1,4 +1,4 @@
-/* hash: qiim6 */
+/* hash: 1o7y2 */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -26,13 +26,13 @@
     /* checkmark */
 
     /* optgroup */
-} .select__arrow_8xwu5 {
+} .select__arrow_1auoj {
     display: block;
     width: 24px;
     height: 24px;
     color: var(--select-arrow-color);
 
     transition: transform 0.15s ease-in-out, opacity 0.2s ease;
-} .select__open_8xwu5 {
+} .select__open_1auoj {
     transform: var(--arrow-transform);
 }

package/components/base-checkmark/Component.js

@@ -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 = {"checkmark":"select__checkmark_77w4f","single":"select__single_77w4f","selected":"select__selected_77w4f"};
+var styles = {"checkmark":"select__checkmark_w0puj","single":"select__single_w0puj","selected":"select__selected_w0puj"};
 require('./index.css')
 
 var BaseCheckmark = function (_a) {

package/components/base-checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: y309i */
+/* hash: 1lc5k */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -23,14 +23,14 @@
     /* checkmark */
 
     /* optgroup */
-} .select__checkmark_77w4f {
+} .select__checkmark_w0puj {
     flex-shrink: 0;
     box-sizing: border-box;
-} .select__single_77w4f {
+} .select__single_w0puj {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0
-} .select__single_77w4f.select__selected_77w4f {
+} .select__single_w0puj.select__selected_w0puj {
         opacity: 1;
     }

package/components/base-option/Component.js

@@ -14,7 +14,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"option":"select__option_1pz3c","disabled":"select__disabled_1pz3c","checkmarkBefore":"select__checkmarkBefore_1pz3c","mobile":"select__mobile_1pz3c","checkmarkAfter":"select__checkmarkAfter_1pz3c","textContent":"select__textContent_1pz3c","selected":"select__selected_1pz3c","highlighted":"select__highlighted_1pz3c","content":"select__content_1pz3c"};
+var styles = {"option":"select__option_xjoaa","disabled":"select__disabled_xjoaa","checkmarkBefore":"select__checkmarkBefore_xjoaa","mobile":"select__mobile_xjoaa","checkmarkAfter":"select__checkmarkAfter_xjoaa","textContent":"select__textContent_xjoaa","selected":"select__selected_xjoaa","highlighted":"select__highlighted_xjoaa","content":"select__content_xjoaa"};
 require('./index.css')
 
 var BaseOption = function (_a) {

package/components/base-option/index.css

@@ -1,4 +1,4 @@
-/* hash: 1cpc2 */
+/* hash: fs4mc */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -43,7 +43,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_1pz3c {
+} .select__option_xjoaa {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -60,32 +60,32 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height)
-} .select__option_1pz3c:not(.select__disabled_1pz3c):active {
+} .select__option_xjoaa:not(.select__disabled_xjoaa):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_1pz3c.select__checkmarkBefore_1pz3c {
+    } .select__option_xjoaa.select__checkmarkBefore_xjoaa {
         padding: 0 0 0 var(--gap-s)
-    } .select__option_1pz3c.select__checkmarkBefore_1pz3c.select__mobile_1pz3c {
+    } .select__option_xjoaa.select__checkmarkBefore_xjoaa.select__mobile_xjoaa {
             padding-left: var(--gap-m);
-        } .select__option_1pz3c.select__checkmarkAfter_1pz3c {
+        } .select__option_xjoaa.select__checkmarkAfter_xjoaa {
         padding: 0 var(--gap-s) 0 0
-    } .select__option_1pz3c.select__checkmarkAfter_1pz3c.select__mobile_1pz3c {
+    } .select__option_xjoaa.select__checkmarkAfter_xjoaa.select__mobile_xjoaa {
             padding-right: var(--gap-l);
-        } .select__option_1pz3c.select__textContent_1pz3c {
+        } .select__option_xjoaa.select__textContent_xjoaa {
         padding: var(--gap-s)
-    } .select__option_1pz3c.select__textContent_1pz3c.select__mobile_1pz3c {
+    } .select__option_xjoaa.select__textContent_xjoaa.select__mobile_xjoaa {
             padding: var(--gap-m) var(--gap-l) var(--gap-m) var(--gap-m);
-        } .select__selected_1pz3c {
+        } .select__selected_xjoaa {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_1pz3c {
+} .select__highlighted_xjoaa {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_1pz3c {
+} .select__disabled_xjoaa {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_1pz3c {
+} .select__content_xjoaa {
     flex: 1;
 }

package/components/base-select/Component.js

@@ -20,7 +20,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"select__component_gbv9e","popoverInner":"select__popoverInner_gbv9e","optionsList":"select__optionsList_gbv9e","optionsListBorder":"select__optionsListBorder_gbv9e","nativeSelect":"select__nativeSelect_gbv9e","block":"select__block_gbv9e","emptySearchPlaceholder":"select__emptySearchPlaceholder_gbv9e","search":"select__search_gbv9e"};
+var styles = {"component":"select__component_1c54p","popoverInner":"select__popoverInner_1c54p","optionsList":"select__optionsList_1c54p","optionsListBorder":"select__optionsListBorder_1c54p","nativeSelect":"select__nativeSelect_1c54p","block":"select__block_1c54p","emptySearchPlaceholder":"select__emptySearchPlaceholder_1c54p","search":"select__search_1c54p"};
 require('./index.css')
 
 var BaseSelect = React.forwardRef(
@@ -137,7 +137,7 @@ function (_a, ref) {
                     return changes;
             }
         },
-    }), open = _6.isOpen, getMenuProps = _6.getMenuProps, getInputProps = _6.getInputProps, getItemProps = _6.getItemProps, getComboboxProps = _6.getComboboxProps, getLabelProps = _6.getLabelProps, highlightedIndex = _6.highlightedIndex, toggleMenu = _6.toggleMenu, openMenu = _6.openMenu;
+    }), open = _6.isOpen, getMenuProps = _6.getMenuProps, getInputProps = _6.getInputProps, getItemProps = _6.getItemProps, getComboboxProps = _6.getComboboxProps, getLabelProps = _6.getLabelProps, highlightedIndex = _6.highlightedIndex, toggleMenu = _6.toggleMenu, openMenu = _6.openMenu, setHighlightedIndex = _6.setHighlightedIndex;
     var menuProps = getMenuProps({ ref: listRef }, { suppressRefError: true });
     var inputProps = getInputProps(getDropdownProps({ ref: mergeRefs__default.default([ref, fieldRef]) }));
     var handleFieldFocus = function (event) {
@@ -193,7 +193,10 @@ function (_a, ref) {
             item: option,
             disabled: option.disabled,
             onMouseDown: function (event) { return event.preventDefault(); },
-        }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.includes(option), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'option') })); }, [
+        }), multiple: multiple, index: index, option: option, size: optionsSize, disabled: option.disabled, highlighted: index === highlightedIndex, selected: selectedItems.some(function (_a) {
+            var key = _a.key;
+            return key === option.key;
+        }), dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'option') })); }, [
         dataTestId,
         getItemProps,
         highlightedIndex,
@@ -303,7 +306,7 @@ function (_a, ref) {
             }, dataTestId: coreComponentsShared.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.popoverInner, popperClassName), update: updatePopover, zIndex: zIndexPopover }, needRenderOptionsList && (React__default.default.createElement("div", tslib.__assign({}, menuProps, { className: cn__default.default(optionsListClassName, styles.optionsList) }),
-            React__default.default.createElement(OptionsList, tslib.__assign({}, optionsListProps, { optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), emptyPlaceholder: renderEmptyPlaceholder() })),
+            React__default.default.createElement(OptionsList, tslib.__assign({}, optionsListProps, { setHighlightedIndex: setHighlightedIndex, optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, getOptionProps: getOptionProps, visibleOptions: visibleOptions, onScroll: onScroll, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), emptyPlaceholder: renderEmptyPlaceholder() })),
             React__default.default.createElement("div", { className: styles.optionsListBorder })))))));
 });
 

package/components/base-select/index.css

@@ -1,4 +1,4 @@
-/* hash: tld19 */
+/* hash: vma3q */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -37,12 +37,12 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_gbv9e {
+} .select__component_1c54p {
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__popoverInner_gbv9e {
+} .select__popoverInner_1c54p {
     padding-top: var(--select-options-list-offset);
     padding-bottom: var(--select-options-list-offset);
     box-shadow: none;
@@ -50,7 +50,7 @@
     background: transparent;
     border-radius: 0;
     position: relative;
-} .select__optionsList_gbv9e {
+} .select__optionsList_1c54p {
     position: relative;
     padding-top: var(--select-options-list-top-padding);
     padding-bottom: var(--select-options-list-bottom-padding);
@@ -59,7 +59,7 @@
     background: var(--select-option-background);
     overflow: hidden;
     will-change: transform;
-} .select__optionsListBorder_gbv9e {
+} .select__optionsListBorder_1c54p {
     position: absolute;
     top: 0;
     right: 0;
@@ -68,7 +68,7 @@
     box-shadow: inset 0 0 0 1px var(--color-light-border-secondary);
     border-radius: inherit;
     pointer-events: none;
-} .select__nativeSelect_gbv9e {
+} .select__nativeSelect_1c54p {
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -81,16 +81,16 @@
     height: 100%;
     cursor: pointer;
     z-index: 1;
-} .select__block_gbv9e {
+} .select__block_1c54p {
     width: 100%;
-} .select__emptySearchPlaceholder_gbv9e {
+} .select__emptySearchPlaceholder_1c54p {
     text-align: center;
-} .select__search_gbv9e {
+} .select__search_1c54p {
     margin: var(--gap-s) var(--gap-s) 0
-} .select__search_gbv9e:last-child {
+} .select__search_1c54p:last-child {
         margin-bottom: var(--gap-s);
     } /* width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_gbv9e {
+    .select__component_1c54p {
         float: left;
         clear: left;
     }

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

@@ -36,7 +36,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"select__component_9ghsq","sheet":"select__sheet_9ghsq","sheetContent":"select__sheetContent_9ghsq","modalContent":"select__modalContent_9ghsq","sheetContainer":"select__sheetContainer_9ghsq","block":"select__block_9ghsq","optionsListWrapper":"select__optionsListWrapper_9ghsq","optionsList":"select__optionsList_9ghsq","scrollbar":"select__scrollbar_9ghsq","emptySearchPlaceholder":"select__emptySearchPlaceholder_9ghsq","search":"select__search_9ghsq","option":"select__option_9ghsq","optionGroup":"select__optionGroup_9ghsq"};
+var styles = {"component":"select__component_1af9j","sheet":"select__sheet_1af9j","sheetContent":"select__sheetContent_1af9j","modalContent":"select__modalContent_1af9j","sheetContainer":"select__sheetContainer_1af9j","block":"select__block_1af9j","optionsListWrapper":"select__optionsListWrapper_1af9j","optionsList":"select__optionsList_1af9j","scrollbar":"select__scrollbar_1af9j","emptySearchPlaceholder":"select__emptySearchPlaceholder_1af9j","search":"select__search_1af9j","option":"select__option_1af9j","optionGroup":"select__optionGroup_1af9j"};
 require('./index.css')
 
 var BaseSelectMobile = React.forwardRef(function (_a, ref) {
@@ -207,7 +207,10 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
         }
     };
     var getOptionProps = function (option, index) {
-        var selectedItem = selectedItems.includes(option);
+        var selectedItem = selectedItems.some(function (_a) {
+            var key = _a.key;
+            return key === option.key;
+        });
         return tslib.__assign(tslib.__assign({}, optionProps), { mobile: true, className: cn__default.default(styles.option, optionClassName), innerProps: getItemProps({
                 index: index,
                 item: option,
@@ -279,7 +282,9 @@ var BaseSelectMobile = React.forwardRef(function (_a, ref) {
                 scrollableContainerRef,
                 modalProps === null || modalProps === void 0 ? void 0 : modalProps.ref,
             ]) }),
-            React__default.default.createElement(mobile.ModalMobile.Header, tslib.__assign({ hasCloser: true, sticky: true, bottomAddons: renderSearch() }, modalHeaderProps), label || placeholder),
+            React__default.default.createElement(mobile.ModalMobile.Header, tslib.__assign({ hasCloser: true, sticky: true }, modalHeaderProps, { bottomAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                    renderSearch(), modalHeaderProps === null || modalHeaderProps === void 0 ? void 0 :
+                    modalHeaderProps.bottomAddons) }), label || placeholder),
             React__default.default.createElement(mobile.ModalMobile.Content, { flex: true, className: styles.modalContent }, renderOptionsList()),
             (modalFooterProps === null || modalFooterProps === void 0 ? void 0 : modalFooterProps.children) && React__default.default.createElement(mobile.ModalMobile.Footer, tslib.__assign({}, modalFooterProps))))));
 });

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

@@ -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 = {"footer":"select__footer_19g58","button":"select__button_19g58","highlighted":"select__highlighted_19g58"};
+var styles = {"footer":"select__footer_b81t1","button":"select__button_b81t1","highlighted":"select__highlighted_b81t1"};
 require('./index.css')
 
 var Footer = function (_a) {

package/components/base-select-mobile/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: fc7fh */
+/* hash: 119kd */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -26,17 +26,17 @@
     /* checkmark */
 
     /* optgroup */
-} .select__footer_19g58 {
+} .select__footer_b81t1 {
     display: flex;
     box-sizing: border-box;
     width: 100%;
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-bg-primary)
-} .select__footer_19g58 .select__button_19g58:first-of-type {
+} .select__footer_b81t1 .select__button_b81t1:first-of-type {
         margin-right: var(--gap-m);
-    } .select__button_19g58 {
+    } .select__button_b81t1 {
     width: 50%;
-} .select__highlighted_19g58 {
+} .select__highlighted_b81t1 {
     border-top: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
 }

package/components/base-select-mobile/index.css

@@ -1,4 +1,4 @@
-/* hash: 13pt7 */
+/* hash: 13v03 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,7 +14,6 @@
 } :root {
     --gap-2xs: 4px;
     --gap-xs: 8px;
-    --gap-s: 12px;
     --gap-m: 16px;
     --gap-l: 20px;
 } :root {
@@ -28,44 +27,44 @@
     /* checkmark */
 
     /* optgroup */
-} .select__component_9ghsq {
+} .select__component_1af9j {
     width: max-content;
     position: relative;
     outline: 0;
     max-width: 100%;
-} .select__sheet_9ghsq {
+} .select__sheet_1af9j {
     overflow: hidden;
-} .select__sheetContent_9ghsq {
+} .select__sheetContent_1af9j {
     padding: 0
-} .select__sheetContent_9ghsq .select__modalContent_9ghsq {
+} .select__sheetContent_1af9j .select__modalContent_1af9j {
         padding: 0;
         display: flex;
         flex-direction: column;
-    } .select__sheetContainer_9ghsq {
+    } .select__sheetContainer_1af9j {
     padding: 0;
-} .select__block_9ghsq {
+} .select__block_1af9j {
     width: 100%;
-} .select__optionsListWrapper_9ghsq {
+} .select__optionsListWrapper_1af9j {
     flex: 1;
-} .select__optionsList_9ghsq {
+} .select__optionsList_1af9j {
     height: 100%;
     display: flex;
     flex-direction: column;
-} .select__scrollbar_9ghsq {
+} .select__scrollbar_1af9j {
     flex: 1;
-} .select__emptySearchPlaceholder_9ghsq {
+} .select__emptySearchPlaceholder_1af9j {
     text-align: center;
-} .select__search_9ghsq {
-    padding: var(--gap-m) var(--gap-xs) var(--gap-s);
+} .select__search_1af9j {
+    padding: var(--gap-xs);
 } /* width: max-content; fix for IE */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__component_9ghsq {
+    .select__component_1af9j {
         float: left;
         clear: left;
     }
-} .select__option_9ghsq {
+} .select__option_1af9j {
     padding: var(--gap-2xs) var(--gap-l) var(--gap-2xs) var(--gap-m)
-} .select__option_9ghsq:before {
+} .select__option_1af9j:before {
         display: none;
-    } .select__optionGroup_9ghsq {
+    } .select__optionGroup_1af9j {
     padding: var(--gap-m) var(--gap-m) var(--gap-xs);
 }

package/components/checkmark/Component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var CheckmarkMIcon__default = /*#__PURE__*/_interopDefaultCompat(CheckmarkMIcon);
 
-var styles = {"checkmark":"select__checkmark_1q7ea","after":"select__after_1q7ea","single":"select__single_1q7ea","selected":"select__selected_1q7ea","before":"select__before_1q7ea","multiple":"select__multiple_1q7ea","colorIcon":"select__colorIcon_1q7ea"};
+var styles = {"checkmark":"select__checkmark_18zj3","after":"select__after_18zj3","single":"select__single_18zj3","selected":"select__selected_18zj3","before":"select__before_18zj3","multiple":"select__multiple_18zj3","colorIcon":"select__colorIcon_18zj3"};
 require('./index.css')
 
 var Checkmark = function (_a) {

package/components/checkmark/index.css

@@ -1,4 +1,4 @@
-/* hash: a7wqj */
+/* hash: 1cbtc */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-positive: #2fc26e;
@@ -39,12 +39,12 @@
     --select-checkmark-border-radius: var(--border-radius-circle);
 
     /* optgroup */
-} .select__checkmark_1q7ea {
+} .select__checkmark_18zj3 {
     flex-shrink: 0;
     margin: var(--select-checkmark-margin)
-} .select__checkmark_1q7ea.select__after_1q7ea {
+} .select__checkmark_18zj3.select__after_18zj3 {
         margin: var(--select-checkmark-margin-after);
-    } .select__single_1q7ea {
+    } .select__single_18zj3 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -54,17 +54,17 @@
     border-radius: var(--select-checkmark-border-radius);
     width: var(--select-checkmark-size);
     height: var(--select-checkmark-size)
-} .select__single_1q7ea.select__selected_1q7ea {
+} .select__single_18zj3.select__selected_18zj3 {
         opacity: 1;
-    } .select__before_1q7ea {
+    } .select__before_18zj3 {
     display: var(--select-checkmark-before-display)
-} .select__before_1q7ea.select__multiple_1q7ea {
+} .select__before_18zj3.select__multiple_18zj3 {
         margin-right: var(--gap-s);
         display: var(--select-checkmark-before-display-multiple);
-    } .select__after_1q7ea {
+    } .select__after_18zj3 {
     display: var(--select-checkmark-after-display)
-} .select__after_1q7ea.select__single_1q7ea {
+} .select__after_18zj3.select__single_18zj3 {
         display: var(--select-checkmark-after-display-single);
-    } .select__colorIcon_1q7ea {
+    } .select__colorIcon_18zj3 {
     color: var(--color-light-graphic-positive);
 }

package/components/checkmark-mobile/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"checkmark":"select__checkmark_8rzne","selected":"select__selected_8rzne","displayIcon":"select__displayIcon_8rzne","displayBadge":"select__displayBadge_8rzne"};
+var styles = {"checkmark":"select__checkmark_z2bpr","selected":"select__selected_z2bpr","displayIcon":"select__displayIcon_z2bpr","displayBadge":"select__displayBadge_z2bpr"};
 require('./index.css')
 
 var Checkmark = function (_a) {