@alfalab/core-components-select 13.2.14 → 13.2.16

package/components/option/index.css

@@ -1,4 +1,4 @@
-/* hash: oe5s1 */
+/* hash: gq5ow */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -6,8 +6,8 @@
     --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 {
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7); /* 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 */
 } :root {
 } :root {
 
@@ -53,7 +53,7 @@
     /* checkmark */
 
     /* optgroup */
-} .select__option_sy4uu {
+} .select__option_1s3gb {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -68,10 +68,10 @@
     box-sizing: border-box;
     position: relative;
     cursor: pointer
-} .select__option_sy4uu:not(.select__disabled_sy4uu):active {
+} .select__option_1s3gb:not(.select__disabled_1s3gb):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_sy4uu:before {
+    } .select__option_1s3gb:before {
         content: '';
         position: absolute;
         left: var(--select-option-left-padding);
@@ -81,46 +81,46 @@
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
         transition: opacity 0.2s ease;
-    } .select__option_sy4uu:first-child:before {
+    } .select__option_1s3gb:first-child:before {
         display: none;
-    } .select__s_sy4uu {
+    } .select__s_1s3gb {
     min-height: var(--size-s-height);
-} .select__m_sy4uu {
+} .select__m_1s3gb {
     min-height: var(--size-m-height);
-} .select__l_sy4uu {
+} .select__l_1s3gb {
     min-height: var(--size-l-height);
-} .select__xl_sy4uu {
+} .select__xl_1s3gb {
     min-height: var(--size-xl-height);
-} .select__l_sy4uu,
-.select__xl_sy4uu {
+} .select__l_1s3gb,
+.select__xl_1s3gb {
     padding-left: var(--select-option-l-left-padding);
     padding-right: var(--select-option-l-right-padding)
-} .select__l_sy4uu:before, .select__xl_sy4uu:before {
+} .select__l_1s3gb:before, .select__xl_1s3gb:before {
         left: var(--select-option-l-left-padding);
         right: var(--select-option-l-right-padding);
-    } .select__selected_sy4uu {
+    } .select__selected_1s3gb {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_sy4uu {
+} .select__highlighted_1s3gb {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color)
-} .select__highlighted_sy4uu:before,
-    .select__highlighted_sy4uu + .select__option_sy4uu:before {
+} .select__highlighted_1s3gb:before,
+    .select__highlighted_1s3gb + .select__option_1s3gb:before {
         opacity: 0;
-    } .select__disabled_sy4uu {
+    } .select__disabled_1s3gb {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__content_sy4uu {
+} .select__content_1s3gb {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;
-} .select__textContent_sy4uu {
+} .select__textContent_1s3gb {
     padding-top: var(--gap-s);
     padding-bottom: var(--gap-s);
 } /* IE min-height fix */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    .select__option_sy4uu:after {
+    .select__option_1s3gb:after {
         min-height: inherit;
         font-size: 0;
         content: '';

package/components/options-list/Component.js

@@ -15,7 +15,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"optionsList":"select__optionsList_1pemo","scrollable":"select__scrollable_1pemo","emptyPlaceholder":"select__emptyPlaceholder_1pemo","l":"select__l_1pemo","xl":"select__xl_1pemo"};
+var styles = {"optionsList":"select__optionsList_piu40","scrollable":"select__scrollable_piu40","emptyPlaceholder":"select__emptyPlaceholder_piu40","l":"select__l_piu40","xl":"select__xl_piu40"};
 require('./index.css')
 
 var createCounter = function () {

package/components/options-list/index.css

@@ -1,8 +1,8 @@
-/* hash: j1m0p */
+/* hash: uad1j */
 :root {
 } /* deprecated */ :root {
-    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-} :root {
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7); /* 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 */
 } :root {
 } :root {
 
@@ -28,18 +28,18 @@
     /* checkmark */
 
     /* optgroup */
-} .select__optionsList_1pemo {
+} .select__optionsList_piu40 {
     overflow: auto;
     width: 100%;
     outline: none;
     box-sizing: border-box;
-} .select__scrollable_1pemo {
+} .select__scrollable_piu40 {
     overflow: auto;
     width: 100%;
-} .select__emptyPlaceholder_1pemo {
+} .select__emptyPlaceholder_piu40 {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_1pemo .select__emptyPlaceholder_1pemo,
-.select__xl_1pemo .select__emptyPlaceholder_1pemo {
+} .select__l_piu40 .select__emptyPlaceholder_piu40,
+.select__xl_piu40 .select__emptyPlaceholder_piu40 {
     padding: var(--gap-xl) var(--gap-m);
 }

package/components/select-mobile/Component.js

@@ -3,7 +3,7 @@
 require('tslib');
 require('react');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-56295912.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-003e987a.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
@@ -14,7 +14,7 @@ require('downshift');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('../../Component.js');
-require('../../Component-5eb2f57b.js');
+require('../../Component-9c3c5101.js');
 require('@juggle/resize-observer');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
@@ -33,7 +33,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-562b226a.js');
+require('../../intersection-observer-cd9b249c.js');
 require('@alfalab/core-components-button');
 require('../base-select-mobile/options-list/Component.js');
 require('@alfalab/core-components-base-modal');

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

@@ -1 +1 @@
-export * from "../../Component-56295912";
+export * from "../../Component-003e987a";

package/components/select-mobile/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-56295912.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-003e987a.js');
 require('tslib');
 require('react');
 require('../arrow/Component.js');
@@ -11,7 +11,7 @@ require('downshift');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('../../Component.js');
-require('../../Component-5eb2f57b.js');
+require('../../Component-9c3c5101.js');
 require('@juggle/resize-observer');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
@@ -33,7 +33,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-562b226a.js');
+require('../../intersection-observer-cd9b249c.js');
 require('@alfalab/core-components-button');
 require('../base-select-mobile/options-list/Component.js');
 require('@alfalab/core-components-base-modal');

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

@@ -3,7 +3,7 @@
 require('tslib');
 require('react');
 require('../arrow/Component.js');
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-56295912.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-003e987a.js');
 require('../field/Component.js');
 require('../optgroup/Component.js');
 require('../option/Component.js');
@@ -14,7 +14,7 @@ require('downshift');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('../../Component.js');
-require('../../Component-5eb2f57b.js');
+require('../../Component-9c3c5101.js');
 require('@juggle/resize-observer');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
@@ -33,7 +33,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-562b226a.js');
+require('../../intersection-observer-cd9b249c.js');
 require('@alfalab/core-components-button');
 require('../base-select-mobile/options-list/Component.js');
 require('@alfalab/core-components-base-modal');

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

@@ -1 +1 @@
-export * from "../../Component-56295912";
+export * from "../../Component-003e987a";

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-56295912.js');
+var presets_useSelectWithApply_optionsListWithApply_Component = require('../../Component-003e987a.js');
 require('tslib');
 require('react');
 require('../arrow/Component.js');
@@ -11,7 +11,7 @@ require('downshift');
 require('@alfalab/core-components-bottom-sheet');
 require('@alfalab/core-components-modal/mobile');
 require('../../Component.js');
-require('../../Component-5eb2f57b.js');
+require('../../Component-9c3c5101.js');
 require('@juggle/resize-observer');
 require('@alfalab/core-components-popover');
 require('@alfalab/hooks');
@@ -33,7 +33,7 @@ require('react-virtual');
 require('../base-option/Component.js');
 require('../base-checkmark/Component.js');
 require('@alfalab/core-components-skeleton');
-require('../../intersection-observer-562b226a.js');
+require('../../intersection-observer-cd9b249c.js');
 require('@alfalab/core-components-button');
 require('../base-select-mobile/options-list/Component.js');
 require('@alfalab/core-components-base-modal');

package/components/virtual-options-list/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 = {"virtualOptionsList":"select__virtualOptionsList_fwirq","scrollable":"select__scrollable_fwirq","inner":"select__inner_fwirq","virtualRow":"select__virtualRow_fwirq","highlighted":"select__highlighted_fwirq","emptyPlaceholder":"select__emptyPlaceholder_fwirq","l":"select__l_fwirq","xl":"select__xl_fwirq"};
+var styles = {"virtualOptionsList":"select__virtualOptionsList_1v5vm","scrollable":"select__scrollable_1v5vm","inner":"select__inner_1v5vm","virtualRow":"select__virtualRow_1v5vm","highlighted":"select__highlighted_1v5vm","emptyPlaceholder":"select__emptyPlaceholder_1v5vm","l":"select__l_1v5vm","xl":"select__xl_1v5vm"};
 require('./index.css')
 
 /* eslint-disable react-hooks/exhaustive-deps */

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

@@ -1,9 +1,9 @@
-/* hash: 1cs8z */
+/* hash: 1a8h7 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-primary: #dbdee1;
-    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
-} :root {
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7); /* 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 */
 } :root {
 } :root {
 
@@ -34,23 +34,23 @@
     /* checkmark */
 
     /* optgroup */
-} .select__virtualOptionsList_fwirq {
+} .select__virtualOptionsList_1v5vm {
     width: 100%;
     outline: none;
     box-sizing: border-box;
     position: relative;
-} .select__scrollable_fwirq {
+} .select__scrollable_1v5vm {
     overflow: auto;
     width: 100%;
-} .select__inner_fwirq {
+} .select__inner_1v5vm {
     position: relative;
     width: 100%;
-} .select__virtualRow_fwirq {
+} .select__virtualRow_1v5vm {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%
-} .select__virtualRow_fwirq:before {
+} .select__virtualRow_1v5vm:before {
         content: '';
         position: absolute;
         z-index: 1;
@@ -60,15 +60,15 @@
         height: 1px;
         background: var(--select-option-divider-background);
         display: var(--select-option-divider-display);
-    } .select__virtualRow_fwirq:first-child:before {
+    } .select__virtualRow_1v5vm:first-child:before {
         display: none;
-    } .select__highlighted_fwirq:before,
-    .select__highlighted_fwirq + .select__virtualRow_fwirq:before {
+    } .select__highlighted_1v5vm:before,
+    .select__highlighted_1v5vm + .select__virtualRow_1v5vm:before {
         display: none;
-    } .select__emptyPlaceholder_fwirq {
+    } .select__emptyPlaceholder_1v5vm {
     padding: var(--gap-m) var(--gap-s);
     color: var(--select-options-list-empty-placeholder-color);
-} .select__l_fwirq .select__emptyPlaceholder_fwirq,
-.select__xl_fwirq .select__emptyPlaceholder_fwirq {
+} .select__l_1v5vm .select__emptyPlaceholder_1v5vm,
+.select__xl_1v5vm .select__emptyPlaceholder_1v5vm {
     padding: var(--gap-xl) var(--gap-m);
 }

package/cssm/Component-3885b0d7.d.ts

@@ -0,0 +1,169 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from "react";
+import { NavigationBarProps } from "./types-ebda875c";
+interface BackArrowAddonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Текст после иконки
+     */
+    text?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Вид компонента
+     */
+    view: "mobile" | "desktop";
+    /**
+     * Прозрачность текста
+     */
+    textOpacity?: number;
+    /**
+     * Обработчик клика
+     */
+    onClick?: () => void;
+}
+declare const BackArrowAddon: React.FC<BackArrowAddonProps>;
+declare const colors: readonly [
+    "tertiary",
+    "disabled",
+    "accent",
+    "primary",
+    "attention",
+    "positive",
+    "secondary",
+    "tertiary-inverted",
+    "primary-inverted",
+    "secondary-inverted",
+    "link",
+    "negative",
+    "static-primary-light",
+    "static-secondary-light",
+    "static-tertiary-light",
+    "static-primary-dark",
+    "static-secondary-dark",
+    "static-tertiary-dark",
+    "static-accent"
+];
+type Color = (typeof colors)[number];
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type NativeProps = HTMLAttributes<HTMLSpanElement>;
+type TextBaseProps = {
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: "primary-large" | "primary-medium" | "primary-small" | "secondary-large" | "secondary-medium" | "secondary-small" | "component" | "caps";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Делает цифры моноширинными
+     */
+    monospaceNumbers?: boolean;
+    /**
+     * HTML тег
+     */
+    tag?: "span" | "div";
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Добавляет отступы к тэгу 'p'
+     */
+    defaultMargins?: never;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TextPTagProps = Omit<TextBaseProps, "tag" | "defaultMargins"> & {
+    tag?: "p";
+    defaultMargins?: boolean;
+};
+type TextProps = Omit<NativeProps, "color"> & (TextBaseProps | TextPTagProps);
+type NativeProps$0 = HTMLAttributes<HTMLHeadingElement>;
+type TitleProps = Omit<NativeProps$0, "color"> & {
+    /**
+     * HTML тег
+     */
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    /**
+     * [Вариант начертания](https://core-ds.github.io/core-components/master/?path=/docs/guidelines-typography--page)
+     */
+    view?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+    /**
+     * Цвет текста
+     */
+    color?: Color;
+    /**
+     * Толщина шрифта
+     */
+    weight?: "regular" | "medium" | "bold";
+    /**
+     * Шрифт текста
+     */
+    font?: "styrene" | "system";
+    /**
+     * Добавляет отступы
+     */
+    defaultMargins?: boolean;
+    /**
+     * Css-класс для стилизации (native prop)
+     */
+    className?: string;
+    /**
+     * Id компонента для тестов
+     */
+    dataTestId?: string;
+    /**
+     * Контент (native prop)
+     */
+    children?: React.ReactNode;
+    /**
+     * Количество строк (не поддерживает IE)
+     */
+    rowLimit?: 1 | 2 | 3;
+};
+type TitleMobileProps = Omit<TitleProps, "defaultMargins">;
+declare const Typography: {
+    Title: FC<TitleProps>;
+    Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElementType>>;
+    TitleResponsive: FC<TitleProps>;
+    TitleMobile: FC<TitleMobileProps>;
+};
+declare const typographyPresets: {
+    mobile: {
+        list: {
+            text: {
+                primary: {
+                    tag: string;
+                    view: string;
+                };
+                secondary: {
+                    tag: string;
+                    color: string;
+                    view: string;
+                };
+            };
+        };
+    };
+};
+declare const TitleResponsive: FC<TitleProps>;
+declare const NavigationBar: FC<NavigationBarProps>;
+export { BackArrowAddonProps, BackArrowAddon, Typography, typographyPresets, TitleResponsive, NavigationBar };
+export type { TitleProps, TextProps, Color };

package/{esm/Component-105eafca.d.ts → cssm/Component-aaa9f3a7.d.ts}

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { BaseSelectProps } from "./typings";
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
 declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<unknown>>;
-export { BaseSelect };
+export { getDataTestId, BaseSelect };

package/cssm/{Component-1481ef6b.js → Component-aaa9f3a7.js}

@@ -159,7 +159,9 @@ var BaseSelect = React.forwardRef(function (_a, ref) {
         }
     };
     var handleNativeSelectChange = React.useCallback(function (event) {
-        setSelectedItems(tslib.__spreadArray([], event.target.options, true).reduce(function (acc, option, index) {
+        setSelectedItems(
+        // eslint-disable-next-line
+        tslib.__spreadArray([], event.target.options, true).reduce(function (acc, option, index) {
             return option.selected ? acc.concat(flatOptions[index]) : acc;
         }, []));
     }, [flatOptions, setSelectedItems]);