npm - @alfalab/core-components-select - Versions diffs - 18.2.5 → 18.2.7 - Mend

@alfalab/core-components-select 18.2.5 → 18.2.7

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

Files changed (206) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Component.js","sources":["../../../src/components/virtual-options-list/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useVirtual } from 'react-virtual';\nimport cn from 'classnames';\n\nimport { useMatchMedia } from '@alfalab/core-components-mq';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\nimport { isClient } from '@alfalab/core-components-shared';\n\nimport { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';\nimport { isGroup, lastIndexOf, usePrevious, useVirtualVisibleOptions } from '../../utils';\nimport { Optgroup as DefaultOptgroup } from '../optgroup';\n\nimport styles from './index.module.css';\n\nexport const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(\n (\n {\n size = 48,\n flatOptions = [],\n highlightedIndex = -1,\n optionGroupClassName,\n className,\n getOptionProps,\n groupOptionProps = {},\n Option,\n open,\n options = [],\n Optgroup = DefaultOptgroup,\n dataTestId,\n emptyPlaceholder,\n visibleOptions = DEFAULT_VISIBLE_OPTIONS,\n header,\n footer,\n showFooter = true,\n optionsListWidth,\n onScroll,\n nativeScrollbar: nativeScrollbarProp,\n setHighlightedIndex,\n selectedItems,\n setSelectedItems,\n search,\n multiple,\n scrollbarClassName,\n },\n ref,\n ) => {\n const listRef = useRef<HTMLDivElement>(null);\n const parentRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');\n const prevHighlightedIndex = usePrevious(highlightedIndex) \|\| -1;\n\n const query = '(max-width: 1023px)';\n let [nativeScrollbar] = useMatchMedia(query, () =>\n isClient() ? window.matchMedia(query).matches : true,\n );\n\n const rowVirtualizer = useVirtual({\n size: flatOptions.length,\n parentRef: (ref \|\| parentRef) as React.RefObject<HTMLDivElement>,\n overscan: 15,\n });\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);\n\n // Сколл к выбранному пункту при открытии меню\n useEffect(() => {\n if (open) {\n rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n // Скролл к пункту, которого нет на экране\n useEffect(() => {\n if (highlightedIndex === -1) return;\n\n if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {\n rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [highlightedIndex]);\n\n // Циклическая навигация\n useEffect(() => {\n const notDisabled = (option: OptionShape) => !option.disabled;\n const firstNonDisabled = flatOptions.findIndex(notDisabled);\n const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);\n\n if (\n prevHighlightedIndex <= firstNonDisabled &&\n highlightedIndex === flatOptions.length - 1\n ) {\n rowVirtualizer.scrollToIndex(lastNonDisabled);\n }\n\n if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {\n rowVirtualizer.scrollToIndex(0);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [prevHighlightedIndex, highlightedIndex]);\n\n useEffect(() => {\n setVisibleOptionsInvalidateKey(\n /*\n react-virtual может несколько раз отрендерить список с одним элементом,\n * поэтому нужно еще раз пересчитать высоту, когда список ВИДИМЫХ пунктов будет отрендерен полностью\n * Также, высоту нужно пересчитывать при изменении пунктов меню\n */\n rowVirtualizer.virtualItems\n .slice(0, Math.min(rowVirtualizer.virtualItems.length, visibleOptions + 1))\n .map((item) => flatOptions[item.index].key)\n .join('_'),\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rowVirtualizer.virtualItems.length, flatOptions]);\n\n useVirtualVisibleOptions({\n visibleOptions,\n invalidate: visibleOptionsInvalidateKey,\n listRef,\n styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,\n open,\n });\n\n // Т.к. рендерится плоский список, необходимо знать индекс, когда начинается новая группа\n const groupStartIndexes = useMemo(() => {\n let currentIndex = 0;\n\n return options.reduce((acc: { [key: number]: number }, option, index) => {\n if (isGroup(option)) {\n acc[currentIndex] = index;\n currentIndex += option.options.length;\n } else {\n currentIndex += 1;\n }\n\n return acc;\n }, {});\n }, [options]);\n\n const renderList = () =>\n rowVirtualizer.virtualItems.map((virtualRow) => {\n const option = flatOptions[virtualRow.index];\n const renderGroup = () => {\n const group = options[groupStartIndexes[virtualRow.index]] as GroupShape;\n\n if (!group) return null;\n\n const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>\n group.options.some((opt) => opt.key === selectedItemKey),\n );\n const handleSelectedItems = (items: OptionShape[]) => {\n setSelectedItems(\n (\n selectedItems?.filter(\n ({ key: selectedItemKey }) =>\n !group.options.some((opt) => opt.key === selectedItemKey),\n ) ?? []\n ).concat(items),\n );\n };\n\n return (\n <Optgroup\n label={group.label}\n size={size}\n className={optionGroupClassName}\n options={group.options}\n selectedItems={groupSelectedItems}\n setSelectedItems={handleSelectedItems}\n search={search}\n multiple={multiple}\n {...groupOptionProps}\n />\n );\n };\n\n return (\n <div\n key={virtualRow.index}\n ref={virtualRow.measureRef}\n className={cn(styles.virtualRow, {\n [styles.highlighted]: highlightedIndex === virtualRow.index,\n })}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n {renderGroup()}\n {!isGroup(option) && (\n <Option {...getOptionProps(option, virtualRow.index)} />\n )}\n </div>\n );\n });\n\n const contentNodeProps = {\n className: styles.inner,\n style: { height: `${rowVirtualizer.totalSize}px` },\n ref: listRef,\n };\n\n const renderWithCustomScrollbar = () => (\n <Scrollbar\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={scrollbarRef}\n horizontalAutoStretch={optionsListWidth === 'content'}\n scrollableNodeProps={{ onScroll, ref: parentRef }}\n contentNodeProps={contentNodeProps}\n >\n {renderList()}\n </Scrollbar>\n );\n\n const renderWithNativeScrollbar = () => {\n if (visibleOptions) {\n return (\n <div\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={mergeRefs([parentRef, ref])}\n onScroll={onScroll}\n >\n <div {...contentNodeProps}>{renderList()}</div>\n </div>\n );\n }\n\n return <div {...contentNodeProps}>{renderList()}</div>;\n };\n\n const resetHighlightedIndex = () => setHighlightedIndex?.(-1);\n\n if (options.length === 0 && !emptyPlaceholder) {\n return null;\n }\n\n return (\n <div\n className={cn(\n styles.virtualOptionsList,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n className,\n )}\n data-test-id={dataTestId}\n >\n {header && (\n <div\n className={styles.virtualOptionsListHeader}\n onMouseEnter={resetHighlightedIndex}\n >\n {header}\n </div>\n )}\n\n {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}\n\n {emptyPlaceholder && options.length === 0 && (\n <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>\n )}\n\n {showFooter && footer && (\n <div\n onMouseEnter={resetHighlightedIndex}\n className={cn(styles.virtualOptionsListFooter, {\n [styles.withBorder]:\n visibleOptions && flatOptions.length > visibleOptions,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["forwardRef","DefaultOptgroup","DEFAULT_VISIBLE_OPTIONS","useRef","useState","usePrevious","useMatchMedia","isClient","useVirtual","useEffect","lastIndexOf","useVirtualVisibleOptions","useMemo","isGroup","React","cn","styles","__assign","Scrollbar","mergeRefs","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}
1	+ {"version":3,"file":"Component.js","sources":["../../../src/components/virtual-options-list/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { useVirtual } from 'react-virtual';\nimport cn from 'classnames';\n\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { useNativeScrollbar } from '../../hooks/use-native-scrollbar';\nimport { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';\nimport { isGroup, lastIndexOf, usePrevious, useVirtualVisibleOptions } from '../../utils';\nimport { Optgroup as DefaultOptgroup } from '../optgroup';\n\nimport styles from './index.module.css';\n\nexport const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(\n (\n {\n size = 48,\n flatOptions = [],\n highlightedIndex = -1,\n optionGroupClassName,\n className,\n getOptionProps,\n groupOptionProps = {},\n Option,\n open,\n options = [],\n Optgroup = DefaultOptgroup,\n dataTestId,\n emptyPlaceholder,\n visibleOptions = DEFAULT_VISIBLE_OPTIONS,\n header,\n footer,\n showFooter = true,\n optionsListWidth,\n onScroll,\n nativeScrollbar: nativeScrollbarProp,\n setHighlightedIndex,\n selectedItems,\n setSelectedItems,\n search,\n multiple,\n scrollbarClassName,\n client,\n },\n ref,\n ) => {\n const listRef = useRef<HTMLDivElement>(null);\n const parentRef = useRef<HTMLDivElement>(null);\n const scrollbarRef = useRef<HTMLDivElement>(null);\n const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');\n const prevHighlightedIndex = usePrevious(highlightedIndex) \|\| -1;\n\n const rowVirtualizer = useVirtual({\n size: flatOptions.length,\n parentRef: (ref \|\| parentRef) as React.RefObject<HTMLDivElement>,\n overscan: 15,\n });\n\n const nativeScrollbar = useNativeScrollbar({\n nativeScrollbar: nativeScrollbarProp,\n client,\n });\n\n // Сколл к выбранному пункту при открытии меню\n useEffect(() => {\n if (open) {\n rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n // Скролл к пункту, которого нет на экране\n useEffect(() => {\n if (highlightedIndex === -1) return;\n\n if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {\n rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [highlightedIndex]);\n\n // Циклическая навигация\n useEffect(() => {\n const notDisabled = (option: OptionShape) => !option.disabled;\n const firstNonDisabled = flatOptions.findIndex(notDisabled);\n const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);\n\n if (\n prevHighlightedIndex <= firstNonDisabled &&\n highlightedIndex === flatOptions.length - 1\n ) {\n rowVirtualizer.scrollToIndex(lastNonDisabled);\n }\n\n if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {\n rowVirtualizer.scrollToIndex(0);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [prevHighlightedIndex, highlightedIndex]);\n\n useEffect(() => {\n setVisibleOptionsInvalidateKey(\n /*\n react-virtual может несколько раз отрендерить список с одним элементом,\n * поэтому нужно еще раз пересчитать высоту, когда список ВИДИМЫХ пунктов будет отрендерен полностью\n * Также, высоту нужно пересчитывать при изменении пунктов меню\n */\n rowVirtualizer.virtualItems\n .slice(0, Math.min(rowVirtualizer.virtualItems.length, visibleOptions + 1))\n .map((item) => flatOptions[item.index].key)\n .join('_'),\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rowVirtualizer.virtualItems.length, flatOptions]);\n\n useVirtualVisibleOptions({\n visibleOptions,\n invalidate: visibleOptionsInvalidateKey,\n listRef,\n styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,\n open,\n });\n\n // Т.к. рендерится плоский список, необходимо знать индекс, когда начинается новая группа\n const groupStartIndexes = useMemo(() => {\n let currentIndex = 0;\n\n return options.reduce((acc: { [key: number]: number }, option, index) => {\n if (isGroup(option)) {\n acc[currentIndex] = index;\n currentIndex += option.options.length;\n } else {\n currentIndex += 1;\n }\n\n return acc;\n }, {});\n }, [options]);\n\n const renderList = () =>\n rowVirtualizer.virtualItems.map((virtualRow) => {\n const option = flatOptions[virtualRow.index];\n const renderGroup = () => {\n const group = options[groupStartIndexes[virtualRow.index]] as GroupShape;\n\n if (!group) return null;\n\n const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>\n group.options.some((opt) => opt.key === selectedItemKey),\n );\n const handleSelectedItems = (items: OptionShape[]) => {\n setSelectedItems(\n (\n selectedItems?.filter(\n ({ key: selectedItemKey }) =>\n !group.options.some((opt) => opt.key === selectedItemKey),\n ) ?? []\n ).concat(items),\n );\n };\n\n return (\n <Optgroup\n label={group.label}\n size={size}\n className={optionGroupClassName}\n options={group.options}\n selectedItems={groupSelectedItems}\n setSelectedItems={handleSelectedItems}\n search={search}\n multiple={multiple}\n {...groupOptionProps}\n />\n );\n };\n\n return (\n <div\n key={virtualRow.index}\n ref={virtualRow.measureRef}\n className={cn(styles.virtualRow, {\n [styles.highlighted]: highlightedIndex === virtualRow.index,\n })}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n {renderGroup()}\n {!isGroup(option) && (\n <Option {...getOptionProps(option, virtualRow.index)} />\n )}\n </div>\n );\n });\n\n const contentNodeProps = {\n className: styles.inner,\n style: { height: `${rowVirtualizer.totalSize}px` },\n ref: listRef,\n };\n\n const renderWithCustomScrollbar = () => (\n <Scrollbar\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={scrollbarRef}\n horizontalAutoStretch={optionsListWidth === 'content'}\n scrollableNodeProps={{ onScroll, ref: parentRef }}\n contentNodeProps={contentNodeProps}\n >\n {renderList()}\n </Scrollbar>\n );\n\n const renderWithNativeScrollbar = () => {\n if (visibleOptions) {\n return (\n <div\n className={cn(styles.scrollable, scrollbarClassName)}\n ref={mergeRefs([parentRef, ref])}\n onScroll={onScroll}\n >\n <div {...contentNodeProps}>{renderList()}</div>\n </div>\n );\n }\n\n return <div {...contentNodeProps}>{renderList()}</div>;\n };\n\n const resetHighlightedIndex = () => setHighlightedIndex?.(-1);\n\n if (options.length === 0 && !emptyPlaceholder) {\n return null;\n }\n\n return (\n <div\n className={cn(\n styles.virtualOptionsList,\n styles[SIZE_TO_CLASSNAME_MAP[size]],\n className,\n )}\n data-test-id={dataTestId}\n >\n {header && (\n <div\n className={styles.virtualOptionsListHeader}\n onMouseEnter={resetHighlightedIndex}\n >\n {header}\n </div>\n )}\n\n {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}\n\n {emptyPlaceholder && options.length === 0 && (\n <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>\n )}\n\n {showFooter && footer && (\n <div\n onMouseEnter={resetHighlightedIndex}\n className={cn(styles.virtualOptionsListFooter, {\n [styles.withBorder]:\n visibleOptions && flatOptions.length > visibleOptions,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n },\n);\n"],"names":["forwardRef","DefaultOptgroup","DEFAULT_VISIBLE_OPTIONS","useRef","useState","usePrevious","useVirtual","useNativeScrollbar","useEffect","lastIndexOf","useVirtualVisibleOptions","useMemo","isGroup","React","cn","styles","__assign","Scrollbar","mergeRefs","SIZE_TO_CLASSNAME_MAP"],"mappings":"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"}

package/cssm/hooks/use-native-scrollbar.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { type OptionsListProps } from '../typings';
+declare type Params = Pick<OptionsListProps, 'nativeScrollbar' | 'client'>;
+export declare const useNativeScrollbar: (params: Params) => boolean;
+export {};

package/cssm/hooks/use-native-scrollbar.js ADDED Viewed

@@ -0,0 +1,33 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var cssm = require('@alfalab/core-components-mq/cssm');
+var cssm$1 = require('@alfalab/core-components-shared/cssm');
+var useNativeScrollbar = function (params) {
+    var scrollbarByProp = params.nativeScrollbar, client = params.client;
+    var query = '(max-width: 1023px)';
+    var nativeScrollbar = cssm.useMatchMedia(query, function () {
+        return cssm$1.isClient() ? window.matchMedia(query).matches : true;
+    })[0];
+    /**
+     * Условия отображения custom/native scrollbar
+     * 1. Принудительное управление через пропс
+     * 2. Для desktop/mobile выключаем и включаем соответственно
+     * 3. Иначе ориентируемся на медиа-запрос
+     */
+    if (scrollbarByProp) {
+        return scrollbarByProp;
+    }
+    if (client === 'desktop') {
+        return false;
+    }
+    if (client === 'mobile') {
+        return true;
+    }
+    return nativeScrollbar;
+};
+exports.useNativeScrollbar = useNativeScrollbar;
+//# sourceMappingURL=use-native-scrollbar.js.map

package/cssm/hooks/use-native-scrollbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-native-scrollbar.js","sources":["../../src/hooks/use-native-scrollbar.ts"],"sourcesContent":["import { useMatchMedia } from '@alfalab/core-components-mq';\nimport { isClient } from '@alfalab/core-components-shared';\n\nimport { type OptionsListProps } from '../typings';\n\ntype Params = Pick<OptionsListProps, 'nativeScrollbar' | 'client'>;\n\nexport const useNativeScrollbar = (params: Params) => {\n const { nativeScrollbar: scrollbarByProp, client } = params;\n\n const query = '(max-width: 1023px)';\n\n const [nativeScrollbar] = useMatchMedia(query, () =>\n isClient() ? window.matchMedia(query).matches : true,\n );\n\n /**\n * Условия отображения custom/native scrollbar\n * 1. Принудительное управление через пропс\n * 2. Для desktop/mobile выключаем и включаем соответственно\n * 3. Иначе ориентируемся на медиа-запрос\n */\n if (scrollbarByProp) {\n return scrollbarByProp;\n }\n\n if (client === 'desktop') {\n return false;\n }\n\n if (client === 'mobile') {\n return true;\n }\n\n return nativeScrollbar;\n};\n"],"names":["useMatchMedia","isClient"],"mappings":";;;;;;;AAOO,IAAM,kBAAkB,GAAG,UAAC,MAAc,EAAA;IACrC,IAAiB,eAAe,GAAa,MAAM,CAAA,eAAnB,EAAE,MAAM,GAAK,MAAM,CAAA,MAAX;IAEhD,IAAM,KAAK,GAAG,qBAAqB;AAE5B,IAAA,IAAA,eAAe,GAAIA,kBAAa,CAAC,KAAK,EAAE,YAAA;AAC3C,QAAA,OAAAC,eAAQ,EAAE,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI;KAAA,CACvD,GAFqB;AAItB;;;;;AAKG;AACH,IAAA,IAAI,eAAe,EAAE;AACjB,QAAA,OAAO,eAAe;AACzB;IAED,IAAI,MAAM,KAAK,SAAS,EAAE;AACtB,QAAA,OAAO,KAAK;AACf;IAED,IAAI,MAAM,KAAK,QAAQ,EAAE;AACrB,QAAA,OAAO,IAAI;AACd;AAED,IAAA,OAAO,eAAe;AAC1B;;;;"}

package/cssm/presets/useSelectWithApply/hook.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type BaseSelectProps, type OptionShape } from '../../typings';
+import { type AnyObject, type BaseSelectProps, type OptionShape } from '../../typings';
 export declare type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
@@ -57,11 +57,77 @@ export declare type UseSelectWithApplyProps = {
     resetName?: string;
 };
 export declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, applyName, resetName, }: UseSelectWithApplyProps): {
-    OptionsList: import("react").ForwardRefExoticComponent<import("../../typings").OptionsListProps & {
+    OptionsList: import("react").ForwardRefExoticComponent<Pick<import("../../typings").SelectProps, "client"> & {
+        className?: string | undefined;
+        optionGroupClassName?: string | undefined;
+        scrollbarClassName?: string | undefined;
+        footerClassName?: string | undefined;
+        size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+        Option: import("react").ComponentType<import("../../typings").OptionProps>;
+        getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
+        groupOptionProps?: AnyObject | undefined;
+        selectedItems?: OptionShape[] | undefined;
+        setSelectedItems: (selected: OptionShape[]) => void;
+        toggleMenu: () => void;
+        header?: import("react").ReactNode;
+        footer?: import("react").ReactNode;
+        options?: (OptionShape | import("../../typings").GroupShape)[] | undefined;
+        flatOptions?: OptionShape[] | undefined;
+        highlightedIndex?: number | undefined;
+        open?: boolean | undefined;
+        Optgroup?: import("react").ComponentType<import("../../typings").OptgroupProps> | undefined;
+        emptyPlaceholder?: import("react").ReactNode;
+        visibleOptions?: number | undefined;
+        onScroll?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        dataTestId?: string | undefined;
+        inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+        showFooter?: boolean | undefined;
+        nativeScrollbar?: boolean | undefined;
+        optionsListWidth?: "field" | "content" | undefined;
+        onApply?: (() => void) | undefined;
+        onClear?: (() => void) | undefined;
+        setHighlightedIndex?: ((index: number) => void) | undefined;
+        search?: string | undefined;
+        multiple?: boolean | undefined;
+        limitDynamicOptionGroupSize?: boolean | undefined;
+    } & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("../../typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList?: import("react").FC<Pick<import("../../typings").SelectProps, "client"> & {
+            className?: string | undefined;
+            optionGroupClassName?: string | undefined;
+            scrollbarClassName?: string | undefined;
+            footerClassName?: string | undefined;
+            size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+            Option: import("react").ComponentType<import("../../typings").OptionProps>;
+            getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
+            groupOptionProps?: AnyObject | undefined;
+            selectedItems?: OptionShape[] | undefined;
+            setSelectedItems: (selected: OptionShape[]) => void;
+            toggleMenu: () => void;
+            header?: import("react").ReactNode;
+            footer?: import("react").ReactNode;
+            options?: (OptionShape | import("../../typings").GroupShape)[] | undefined;
+            flatOptions?: OptionShape[] | undefined;
+            highlightedIndex?: number | undefined;
+            open?: boolean | undefined;
+            Optgroup?: import("react").ComponentType<import("../../typings").OptgroupProps> | undefined;
+            emptyPlaceholder?: import("react").ReactNode;
+            visibleOptions?: number | undefined;
+            onScroll?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+            dataTestId?: string | undefined;
+            inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+            showFooter?: boolean | undefined;
+            nativeScrollbar?: boolean | undefined;
+            optionsListWidth?: "field" | "content" | undefined;
+            onApply?: (() => void) | undefined;
+            onClear?: (() => void) | undefined;
+            setHighlightedIndex?: ((index: number) => void) | undefined;
+            search?: string | undefined;
+            multiple?: boolean | undefined;
+            limitDynamicOptionGroupSize?: boolean | undefined;
+        } & import("react").RefAttributes<HTMLDivElement>> | undefined;
         Footer?: import("react").FC<import("./options-list-with-apply/footer/Component").FooterProps> | undefined;
         Header?: import("react").FC<import("./options-list-with-apply/header/Component").HeaderProps> | undefined;
         headerProps?: import("./options-list-with-apply/header/Component").HeaderProps | undefined;
@@ -69,7 +135,40 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
         setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").ComponentType<import("../../typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").ComponentType<Pick<import("../../typings").SelectProps, "client"> & {
+            className?: string | undefined;
+            optionGroupClassName?: string | undefined;
+            scrollbarClassName?: string | undefined;
+            footerClassName?: string | undefined;
+            size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+            Option: import("react").ComponentType<import("../../typings").OptionProps>;
+            getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
+            groupOptionProps?: AnyObject | undefined;
+            selectedItems?: OptionShape[] | undefined;
+            setSelectedItems: (selected: OptionShape[]) => void;
+            toggleMenu: () => void;
+            header?: import("react").ReactNode;
+            footer?: import("react").ReactNode;
+            options?: (OptionShape | import("../../typings").GroupShape)[] | undefined;
+            flatOptions?: OptionShape[] | undefined;
+            highlightedIndex?: number | undefined;
+            open?: boolean | undefined;
+            Optgroup?: import("react").ComponentType<import("../../typings").OptgroupProps> | undefined;
+            emptyPlaceholder?: import("react").ReactNode;
+            visibleOptions?: number | undefined;
+            onScroll?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+            dataTestId?: string | undefined;
+            inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+            showFooter?: boolean | undefined;
+            nativeScrollbar?: boolean | undefined;
+            optionsListWidth?: "field" | "content" | undefined;
+            onApply?: (() => void) | undefined;
+            onClear?: (() => void) | undefined;
+            setHighlightedIndex?: ((index: number) => void) | undefined;
+            search?: string | undefined;
+            multiple?: boolean | undefined;
+            limitDynamicOptionGroupSize?: boolean | undefined;
+        } & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -100,7 +199,40 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
         options: (OptionShape | import("../../typings").GroupShape)[];
         selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
         onChange: (payload: import("../../typings").BaseSelectChangePayload) => void;
-        OptionsList: import("react").ComponentType<import("../../typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").ComponentType<Pick<import("../../typings").SelectProps, "client"> & {
+            className?: string | undefined;
+            optionGroupClassName?: string | undefined;
+            scrollbarClassName?: string | undefined;
+            footerClassName?: string | undefined;
+            size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+            Option: import("react").ComponentType<import("../../typings").OptionProps>;
+            getOptionProps: (option: OptionShape, index: number) => import("../../typings").OptionProps;
+            groupOptionProps?: AnyObject | undefined;
+            selectedItems?: OptionShape[] | undefined;
+            setSelectedItems: (selected: OptionShape[]) => void;
+            toggleMenu: () => void;
+            header?: import("react").ReactNode;
+            footer?: import("react").ReactNode;
+            options?: (OptionShape | import("../../typings").GroupShape)[] | undefined;
+            flatOptions?: OptionShape[] | undefined;
+            highlightedIndex?: number | undefined;
+            open?: boolean | undefined;
+            Optgroup?: import("react").ComponentType<import("../../typings").OptgroupProps> | undefined;
+            emptyPlaceholder?: import("react").ReactNode;
+            visibleOptions?: number | undefined;
+            onScroll?: ((event: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+            dataTestId?: string | undefined;
+            inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+            showFooter?: boolean | undefined;
+            nativeScrollbar?: boolean | undefined;
+            optionsListWidth?: "field" | "content" | undefined;
+            onApply?: (() => void) | undefined;
+            onClear?: (() => void) | undefined;
+            setHighlightedIndex?: ((index: number) => void) | undefined;
+            search?: string | undefined;
+            multiple?: boolean | undefined;
+            limitDynamicOptionGroupSize?: boolean | undefined;
+        } & import("react").RefAttributes<HTMLDivElement>> | undefined;
         optionsListProps: unknown;
         showClear: boolean;
         showSelectAll: boolean;

package/cssm/presets/useSelectWithApply/options-list-with-apply/Component.d.ts CHANGED Viewed

@@ -1,12 +1,78 @@
 import React from 'react';
-import { type OptionShape, type OptionsListProps } from '../../../typings';
+import { type OptionShape } from '../../../typings';
 import { type FooterProps } from './footer/Component';
 import { type HeaderProps } from './header/Component';
-export declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+export declare const OptionsListWithApply: React.ForwardRefExoticComponent<Pick<import("../../../typings").SelectProps, "client"> & {
+    className?: string | undefined;
+    optionGroupClassName?: string | undefined;
+    scrollbarClassName?: string | undefined;
+    footerClassName?: string | undefined;
+    size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+    Option: React.ComponentType<import("../../../typings").OptionProps>;
+    getOptionProps: (option: OptionShape, index: number) => import("../../../typings").OptionProps;
+    groupOptionProps?: import("../../../typings").AnyObject | undefined;
+    selectedItems?: OptionShape[] | undefined;
+    setSelectedItems: (selected: OptionShape[]) => void;
+    toggleMenu: () => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    options?: (OptionShape | import("../../../typings").GroupShape)[] | undefined;
+    flatOptions?: OptionShape[] | undefined;
+    highlightedIndex?: number | undefined;
+    open?: boolean | undefined;
+    Optgroup?: React.ComponentType<import("../../../typings").OptgroupProps> | undefined;
+    emptyPlaceholder?: React.ReactNode;
+    visibleOptions?: number | undefined;
+    onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    dataTestId?: string | undefined;
+    inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+    showFooter?: boolean | undefined;
+    nativeScrollbar?: boolean | undefined;
+    optionsListWidth?: "field" | "content" | undefined;
+    onApply?: (() => void) | undefined;
+    onClear?: (() => void) | undefined;
+    setHighlightedIndex?: ((index: number) => void) | undefined;
+    search?: string | undefined;
+    multiple?: boolean | undefined;
+    limitDynamicOptionGroupSize?: boolean | undefined;
+} & {
     showClear?: boolean | undefined;
     onClose?: (() => void) | undefined;
     selectedDraft?: OptionShape[] | undefined;
-    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    OptionsList?: React.FC<Pick<import("../../../typings").SelectProps, "client"> & {
+        className?: string | undefined;
+        optionGroupClassName?: string | undefined;
+        scrollbarClassName?: string | undefined;
+        footerClassName?: string | undefined;
+        size?: "s" | "m" | "l" | "xl" | 40 | 48 | 56 | 64 | 72 | undefined;
+        Option: React.ComponentType<import("../../../typings").OptionProps>;
+        getOptionProps: (option: OptionShape, index: number) => import("../../../typings").OptionProps;
+        groupOptionProps?: import("../../../typings").AnyObject | undefined;
+        selectedItems?: OptionShape[] | undefined;
+        setSelectedItems: (selected: OptionShape[]) => void;
+        toggleMenu: () => void;
+        header?: React.ReactNode;
+        footer?: React.ReactNode;
+        options?: (OptionShape | import("../../../typings").GroupShape)[] | undefined;
+        flatOptions?: OptionShape[] | undefined;
+        highlightedIndex?: number | undefined;
+        open?: boolean | undefined;
+        Optgroup?: React.ComponentType<import("../../../typings").OptgroupProps> | undefined;
+        emptyPlaceholder?: React.ReactNode;
+        visibleOptions?: number | undefined;
+        onScroll?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+        dataTestId?: string | undefined;
+        inputProps?: import("@alfalab/core-components-input").InputProps | undefined;
+        showFooter?: boolean | undefined;
+        nativeScrollbar?: boolean | undefined;
+        optionsListWidth?: "field" | "content" | undefined;
+        onApply?: (() => void) | undefined;
+        onClear?: (() => void) | undefined;
+        setHighlightedIndex?: ((index: number) => void) | undefined;
+        search?: string | undefined;
+        multiple?: boolean | undefined;
+        limitDynamicOptionGroupSize?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>> | undefined;
     Footer?: React.FC<FooterProps> | undefined;
     Header?: React.FC<HeaderProps> | undefined;
     headerProps?: HeaderProps | undefined;

package/cssm/typings.d.ts CHANGED Viewed

@@ -410,7 +410,7 @@ export declare type ArrowProps = {
      */
     size?: BaseSelectProps['size'];
 };
-export declare type OptionsListProps = {
+export declare type OptionsListProps = Pick<SelectProps, 'client'> & {
     /**
      * Дополнительный класс
      */

package/esm/components/arrow/index.css CHANGED Viewed

@@ -6,7 +6,7 @@
 } :root {
     --select-arrow-color: var(--color-light-neutral-translucent-700);
     --select-arrow-disabled-color: var(--color-light-neutral-translucent-500);
-} .select__arrow_1yce3 {
+} .select__arrow_1p3an {
     display: block;
     width: 24px;
     height: 24px;
@@ -15,13 +15,13 @@
     transition:
         transform 0.15s ease-in-out,
         opacity 0.2s ease;
-} .select__arrow_1yce3.select__disabled_1yce3 {
+} .select__arrow_1p3an.select__disabled_1p3an {
         color: var(--select-arrow-disabled-color);
-    } .select__arrow_1yce3.select__size-40_1yce3 {
+    } .select__arrow_1p3an.select__size-40_1p3an {
         width: auto;
         width: initial;
         height: auto;
         height: initial;
-    } .select__open_1yce3 {
+    } .select__open_1p3an {
     transform: var(--arrow-transform);
 }

package/esm/components/arrow/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-var styles = {"arrow":"select__arrow_1yce3","disabled":"select__disabled_1yce3","size-40":"select__size-40_1yce3","open":"select__open_1yce3"};
+var styles = {"arrow":"select__arrow_1p3an","disabled":"select__disabled_1p3an","size-40":"select__size-40_1p3an","open":"select__open_1p3an"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/base-checkmark/index.css CHANGED Viewed

@@ -1,15 +1,15 @@
-.select__checkmark_1vgll {
+.select__checkmark_5okzd {
     flex-shrink: 0;
     box-sizing: border-box;
-} .select__checkmark_1vgll.select__start_1vgll {
+} .select__checkmark_5okzd.select__start_5okzd {
         align-self: start;
-    } .select__checkmark_1vgll.select__center_1vgll {
+    } .select__checkmark_5okzd.select__center_5okzd {
         align-self: center;
-    } .select__single_1vgll {
+    } .select__single_5okzd {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
-} .select__single_1vgll.select__selected_1vgll {
+} .select__single_5okzd.select__selected_5okzd {
         opacity: 1;
     }

package/esm/components/base-checkmark/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-var styles = {"checkmark":"select__checkmark_1vgll","start":"select__start_1vgll","center":"select__center_1vgll","single":"select__single_1vgll","selected":"select__selected_1vgll"};
+var styles = {"checkmark":"select__checkmark_5okzd","start":"select__start_5okzd","center":"select__center_5okzd","single":"select__single_5okzd","selected":"select__selected_5okzd"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/base-option/index.css CHANGED Viewed

@@ -26,7 +26,7 @@
     --select-option-hover-color: var(--color-light-text-primary);
     --select-option-active-color: var(--color-light-text-primary);
     --select-option-disabled-color: var(--color-light-text-secondary);
-} .select__option_y50qw {
+} .select__option_cfbis {
     font-size: 16px;
     line-height: 20px;
     font-weight: 400;
@@ -40,41 +40,41 @@
     position: relative;
     cursor: pointer;
     min-height: var(--size-s-height);
-} .select__option_y50qw:not(.select__disabled_y50qw):active {
+} .select__option_cfbis:not(.select__disabled_cfbis):active {
         background: var(--select-option-active-background);
         color: var(--select-option-active-color);
-    } .select__option_y50qw.select__checkmarkBefore_y50qw {
+    } .select__option_cfbis.select__checkmarkBefore_cfbis {
         padding: var(--gap-0) var(--gap-0) var(--gap-0) var(--gap-12);
-    } .select__option_y50qw.select__checkmarkBefore_y50qw.select__mobile_y50qw {
+    } .select__option_cfbis.select__checkmarkBefore_cfbis.select__mobile_cfbis {
             padding-left: var(--gap-16);
-        } .select__option_y50qw.select__checkmarkAfter_y50qw.select__checkmarkAfter_y50qw {
+        } .select__option_cfbis.select__checkmarkAfter_cfbis.select__checkmarkAfter_cfbis {
         padding: var(--gap-0) var(--gap-12) var(--gap-0) var(--gap-0);
-    } .select__option_y50qw.select__checkmarkAfter_y50qw.select__checkmarkAfter_y50qw.select__size-72_y50qw {
+    } .select__option_cfbis.select__checkmarkAfter_cfbis.select__checkmarkAfter_cfbis.select__size-72_cfbis {
             padding-right: var(--gap-16);
-        } .select__option_y50qw.select__checkmarkAfter_y50qw.select__checkmarkAfter_y50qw.select__mobile_y50qw {
+        } .select__option_cfbis.select__checkmarkAfter_cfbis.select__checkmarkAfter_cfbis.select__mobile_cfbis {
             padding-right: var(--gap-20);
-        } .select__option_y50qw.select__textContent_y50qw {
+        } .select__option_cfbis.select__textContent_cfbis {
         padding: var(--gap-12);
-    } .select__option_y50qw.select__textContent_y50qw.select__size-72_y50qw {
+    } .select__option_cfbis.select__textContent_cfbis.select__size-72_cfbis {
             padding-left: var(--gap-16);
             padding-right: var(--gap-16);
-        } .select__option_y50qw.select__textContent_y50qw.select__mobile_y50qw {
+        } .select__option_cfbis.select__textContent_cfbis.select__mobile_cfbis {
             padding: var(--gap-16) var(--gap-20) var(--gap-16) var(--gap-16);
-        } .select__selected_y50qw {
+        } .select__selected_cfbis {
     background: var(--select-option-selected-background);
     color: var(--select-option-selected-color);
     cursor: default;
-} .select__highlighted_y50qw {
+} .select__highlighted_cfbis {
     background: var(--select-option-hover-background);
     color: var(--select-option-hover-color);
-} .select__disabled_y50qw {
+} .select__disabled_cfbis {
     cursor: var(--disabled-cursor);
     background: var(--select-option-disabled-background);
     color: var(--select-option-disabled-color);
-} .select__checkmarkBeforeContent_y50qw {
+} .select__checkmarkBeforeContent_cfbis {
     margin-right: var(--gap-12);
-} .select__checkmarkAfterContent_y50qw {
+} .select__checkmarkAfterContent_cfbis {
     margin-left: var(--gap-12);
-} .select__content_y50qw {
+} .select__content_cfbis {
     flex: 1;
 }

package/esm/components/base-option/index.module.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import './index.css';
-var styles = {"option":"select__option_y50qw","disabled":"select__disabled_y50qw","checkmarkBefore":"select__checkmarkBefore_y50qw","mobile":"select__mobile_y50qw","checkmarkAfter":"select__checkmarkAfter_y50qw","size-72":"select__size-72_y50qw","textContent":"select__textContent_y50qw","selected":"select__selected_y50qw","highlighted":"select__highlighted_y50qw","checkmarkBeforeContent":"select__checkmarkBeforeContent_y50qw","checkmarkAfterContent":"select__checkmarkAfterContent_y50qw","content":"select__content_y50qw"};
+var styles = {"option":"select__option_cfbis","disabled":"select__disabled_cfbis","checkmarkBefore":"select__checkmarkBefore_cfbis","mobile":"select__mobile_cfbis","checkmarkAfter":"select__checkmarkAfter_cfbis","size-72":"select__size-72_cfbis","textContent":"select__textContent_cfbis","selected":"select__selected_cfbis","highlighted":"select__highlighted_cfbis","checkmarkBeforeContent":"select__checkmarkBeforeContent_cfbis","checkmarkAfterContent":"select__checkmarkAfterContent_cfbis","content":"select__content_cfbis"};
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/base-select/Component.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const BaseSelect: React.ForwardRefExoticComponent<import("../../typings").BaseSelectProps & import("../../typings").AdditionalMobileProps & import("../../typings").BottomSheetSelectMobileProps & import("../../typings").ModalSelectMobileProps & {
     isBottomSheet?: boolean | undefined;
-    view: "mobile" | "desktop";
+    view: "desktop" | "mobile";
     Popover?: React.ForwardRefExoticComponent<import("@alfalab/core-components-popover").PopoverProps & React.RefAttributes<HTMLDivElement>> | undefined;
     BottomSheet?: React.ForwardRefExoticComponent<import("@alfalab/core-components-bottom-sheet").BottomSheetProps & React.RefAttributes<HTMLDivElement>> | undefined;
     ModalMobile?: (React.ForwardRefExoticComponent<import("@alfalab/core-components-modal/typings").ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {

package/esm/components/base-select/Component.js CHANGED Viewed

@@ -363,7 +363,7 @@ function (props, ref) {
         return (React.createElement(Search, __assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps, { onBlur: handleBlur, value: search, onChange: handleChange, dataTestId: getDataTestId(dataTestId, 'search'), onClear: handleClear, className: cn((_b = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _b === void 0 ? void 0 : _b.className, (_a = {},
                 _a[styles.search] = view === 'desktop',
                 _a[mobileStyles.search] = view === 'mobile',
-                _a), size && styles[SIZE_TO_CLASSNAME_MAP[size]]), ref: mergeRefs([searchRef, ((_c = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _c === void 0 ? void 0 : _c.ref) || null]) })));
+                _a), size && styles[SIZE_TO_CLASSNAME_MAP[size]]), ref: mergeRefs([searchRef, ((_c = searchProps === null || searchProps === void 0 ? void 0 : searchProps.componentProps) === null || _c === void 0 ? void 0 : _c.ref) || null]), client: view })));
     };
     var _12 = optionsListProps, header = _12.header, emptyPlaceholder = _12.emptyPlaceholder;
     var renderOptionsListHeader = function () {
@@ -391,7 +391,7 @@ function (props, ref) {
         return (React.createElement("div", __assign({}, menuProps, { ref: view === 'desktop' ? menuRef : undefined, className: cn(optionsListClassName, view === 'mobile' && mobileStyles.optionsListWrapper, view === 'desktop' && styles.optionsListWrapper) }),
             React.createElement(OptionsList, __assign({}, listProps, { ref: view === 'desktop' ? listProps.ref : scrollableContainerRef, setHighlightedIndex: view === 'desktop' ? setHighlightedIndex : undefined, className: cn((_a = {}, _a[mobileStyles.optionsList] = view === 'mobile', _a), listProps.className), scrollbarClassName: cn((_b = {}, _b[mobileStyles.scrollbar] = view === 'mobile', _b), listProps.scrollbarClassName), optionsListWidth: optionsListWidth, flatOptions: flatOptions, highlightedIndex: highlightedIndex, open: open, size: size, options: filteredOptions, Optgroup: Optgroup, Option: Option, selectedItems: selectedItems, setSelectedItems: setSelectedItems, toggleMenu: toggleMenu, groupOptionProps: groupOptionProps, getOptionProps: getOptionProps, visibleOptions: view === 'desktop' ? visibleOptions : 0, dataTestId: getDataTestId(dataTestId, 'options-list'), header: renderOptionsListHeader(), optionGroupClassName: cn(optionGroupClassName, (_c = {},
                     _c[mobileStyles.optionGroup] = view === 'mobile',
-                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize })),
+                    _c)), emptyPlaceholder: renderEmptyPlaceholder(), onScroll: onScroll, search: search, multiple: multiple, limitDynamicOptionGroupSize: limitDynamicOptionGroupSize, client: view })),
             view === 'desktop' && React.createElement("div", { className: styles.optionsListBorder })));
     };
     var renderInPopover = function () {