@alfalab/core-components-select 19.1.10 → 19.2.0-alfasans

package/moderncssm/utils.js

@@ -1,5 +1,5 @@
 import { useState, isValidElement, cloneElement, useRef, useEffect } from 'react';
-import { useIsMounted, fnUtils, getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { useIsMounted, getElementWindow, fnUtils, getDataTestId } from '@alfalab/core-components-shared/moderncssm';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { DEFAULT_SEPARATOR } from './consts.js';
 
@@ -71,21 +71,21 @@ function processOptions(options, selected = [], filterFn = () => true, filterGro
     return { filteredOptions, flatOptions, selectedOptions };
 }
 // copy-paste of original `useVisibleOptions` before https://github.com/core-ds/core-components/pull/1368
-function useVirtualVisibleOptions({ visibleOptions, listRef, styleTargetRef = listRef, open, invalidate, options, size, actualOptionsCount, }) {
-    useEffect(() => {
+function useVirtualVisibleOptions({ visibleOptions, listRef, open, invalidate, options, size, actualOptionsCount, }) {
+    const [height, setHeight] = useState();
+    useLayoutEffect_SAFE_FOR_SSR(() => {
         const measureOptionHeight = (element) => typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;
         const list = listRef.current;
-        const styleTarget = styleTargetRef.current;
-        if (open && list && styleTarget && visibleOptions > 0) {
+        if (open && list && visibleOptions > 0) {
             const childCount = list.children.length;
             const optionsNodes = [].slice.call(list.children, 0, visibleOptions + 1);
-            let height = optionsNodes
+            let nextHeight = optionsNodes
                 .slice(0, visibleOptions)
                 .reduce((acc, child) => acc + measureOptionHeight(child), 0);
             if (visibleOptions < childCount) {
                 const lastVisibleOptionHeight = measureOptionHeight(optionsNodes[optionsNodes.length - 1]);
                 // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку
-                height += Math.round(childCount - visibleOptions === 1
+                nextHeight += Math.round(childCount - visibleOptions === 1
                     ? lastVisibleOptionHeight
                     : lastVisibleOptionHeight / 2);
             }
@@ -93,24 +93,20 @@ function useVirtualVisibleOptions({ visibleOptions, listRef, styleTargetRef = li
                 actualOptionsCount &&
                 typeof size === 'number') {
                 const actualCount = (options ?? []).reduce((sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0), 0);
-                height =
+                nextHeight =
                     Math.min(actualCount === 0 ? /** empty placeholder */ 1 : actualCount, visibleOptions) * size;
                 if (visibleOptions < actualCount) {
-                    height += size / 2;
+                    nextHeight += size / 2;
                 }
             }
-            styleTarget.style.height = `${height}px`;
+            const win = getElementWindow(list);
+            nextHeight += ['::before', '::after']
+                .map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)
+                .reduce((a, b) => a + b);
+            setHeight(nextHeight);
         }
-    }, [
-        actualOptionsCount,
-        listRef,
-        open,
-        options,
-        size,
-        styleTargetRef,
-        visibleOptions,
-        invalidate,
-    ]);
+    }, [actualOptionsCount, listRef, open, options, size, visibleOptions, invalidate]);
+    return height;
 }
 function useVisibleOptions({ visibleOptions, listRef, open, options, size, actualOptionsCount, }) {
     const [, runIfMounted] = useIsMounted();
@@ -142,6 +138,10 @@ function useVisibleOptions({ visibleOptions, listRef, open, options, size, actua
                     measuredHeight += size / 2;
                 }
             }
+            const win = getElementWindow(list);
+            measuredHeight += ['::before', '::after']
+                .map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)
+                .reduce((a, b) => a + b);
             setHeight(measuredHeight);
             setMeasured(true);
             return () => {
@@ -175,14 +175,6 @@ function usePrevious(value) {
     }, [value]);
     return ref.current;
 }
-// TODO: перенести
-const lastIndexOf = (array, predicate) => {
-    for (let i = array.length - 1; i >= 0; i--) {
-        if (predicate(array[i]))
-            return i;
-    }
-    return -1;
-};
 function getSelectTestIds(dataTestId) {
     return {
         select: dataTestId,
@@ -213,5 +205,5 @@ function getSelectTestIds(dataTestId) {
     };
 }
 
-export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions };
+export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, processOptions, usePrevious, useVirtualVisibleOptions, useVisibleOptions };
 //# sourceMappingURL=utils.js.map

package/moderncssm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import {\n    cloneElement,\n    isValidElement,\n    type ReactNode,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { fnUtils, getDataTestId, useIsMounted } from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { DEFAULT_SEPARATOR } from './consts';\nimport {\n    type BaseSelectProps,\n    type GroupShape,\n    type OptionShape,\n    type OptionsListProps,\n} from './typings';\n\nexport const isGroup = (item: OptionShape | GroupShape): item is GroupShape =>\n    Object.prototype.hasOwnProperty.call(item, 'options');\n\nexport const isOptionShape = (item: OptionShape | string | null): item is OptionShape =>\n    !!item && Object.prototype.hasOwnProperty.call(item, 'key');\n\nexport const joinOptions = ({\n    selected,\n    selectedMultiple,\n    valueSeparator = DEFAULT_SEPARATOR,\n}: {\n    selected?: OptionShape;\n    selectedMultiple?: OptionShape[];\n    valueSeparator?: string;\n}) => {\n    const options = selectedMultiple || (selected ? [selected] : []);\n\n    if (!options.length) return null;\n\n    return options.reduce((acc: Array<ReactNode | string>, option: OptionShape, index: number) => {\n        if (isValidElement(option.content)) {\n            acc.push(cloneElement(option.content, { key: option.key }));\n        } else {\n            acc.push(option.content);\n        }\n\n        if (index < options.length - 1) acc.push(valueSeparator);\n\n        return acc;\n    }, []);\n};\n\n// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу\nexport function processOptions(\n    options: BaseSelectProps['options'],\n    selected: BaseSelectProps['selected'] = [],\n    filterFn: (option: OptionShape | GroupShape) => boolean = () => true,\n    filterGroup = false,\n) {\n    const flatOptions: OptionShape[] = [];\n    const filteredOptions: BaseSelectProps['options'] = [];\n\n    const selectedArray = Array.isArray(selected) ? selected : [selected];\n    const selectedOptions = selectedArray.filter(isOptionShape);\n    const selectedKeys = selectedArray.filter(\n        (option): option is string => typeof option === 'string',\n    );\n\n    const isSelected = (option: OptionShape) => selectedKeys.includes(option.key);\n\n    const process = (option: OptionShape | GroupShape) => {\n        const isGroupOption = isGroup(option);\n\n        if (!isGroupOption && isSelected(option)) {\n            selectedOptions.push(option);\n        }\n\n        if (!filterFn(option)) return false;\n\n        if (isGroupOption) {\n            if (filterGroup) {\n                Array.prototype.push.apply(flatOptions, option.options);\n            }\n        } else {\n            flatOptions.push(option);\n        }\n\n        return true;\n    };\n\n    options.forEach((option) => {\n        if (isGroup(option)) {\n            const group: GroupShape = {\n                ...option,\n                options: [],\n            };\n\n            option.options.forEach((groupOption) => {\n                const matched = process(groupOption);\n\n                if (matched) group.options.push(groupOption);\n            });\n\n            if (group.options.length) {\n                filteredOptions.push(group);\n\n                return;\n            }\n\n            if (!filterGroup) return;\n        }\n        const matched = process(option);\n\n        if (matched) filteredOptions.push(option);\n    });\n\n    return { filteredOptions, flatOptions, selectedOptions };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useVisibleOptionsArgs = {\n    /**\n     * Количество видимых пунктов\n     */\n    visibleOptions: number;\n\n    /**\n     * Реф на контейнер с пунтами меню\n     */\n    listRef: RefObject<HTMLElement>;\n\n    /**\n     * Реф на контейнер, которому нужно установить высоту\n     */\n    styleTargetRef?: RefObject<HTMLElement>;\n\n    /**\n     * Флаг открытия меню\n     */\n    open?: boolean;\n\n    /**\n     * Позволяет вызвать пересчет высоты\n     */\n    invalidate?: unknown;\n\n    /**\n     * Список вариантов выбора\n     */\n    options?: Array<OptionShape | GroupShape>;\n\n    /**\n     * Максимальный размер варианта выбора\n     */\n    size?: Extract<OptionsListProps['size'], number>;\n\n    /**\n     * Учитывать действительное число вариантов выбора\n     */\n    actualOptionsCount?: boolean;\n};\n\n// copy-paste of original `useVisibleOptions` before https://github.com/core-ds/core-components/pull/1368\nexport function useVirtualVisibleOptions({\n    visibleOptions,\n    listRef,\n    styleTargetRef = listRef,\n    open,\n    invalidate,\n    options,\n    size,\n    actualOptionsCount,\n}: useVisibleOptionsArgs) {\n    useEffect(() => {\n        const measureOptionHeight = (element: HTMLElement) =>\n            typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n        const list = listRef.current;\n        const styleTarget = styleTargetRef.current;\n\n        if (open && list && styleTarget && visibleOptions > 0) {\n            const childCount = list.children.length;\n            const optionsNodes = ([] as HTMLElement[]).slice.call(\n                list.children,\n                0,\n                visibleOptions + 1,\n            );\n\n            let height = optionsNodes\n                .slice(0, visibleOptions)\n                .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n            if (visibleOptions < childCount) {\n                const lastVisibleOptionHeight = measureOptionHeight(\n                    optionsNodes[optionsNodes.length - 1],\n                );\n\n                // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n                height += Math.round(\n                    childCount - visibleOptions === 1\n                        ? lastVisibleOptionHeight\n                        : lastVisibleOptionHeight / 2,\n                );\n            } else if (\n                visibleOptions > childCount &&\n                actualOptionsCount &&\n                typeof size === 'number'\n            ) {\n                const actualCount = (options ?? []).reduce(\n                    (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n                    0,\n                );\n\n                height =\n                    Math.min(\n                        actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n                        visibleOptions,\n                    ) * size;\n\n                if (visibleOptions < actualCount) {\n                    height += size / 2;\n                }\n            }\n\n            styleTarget.style.height = `${height}px`;\n        }\n    }, [\n        actualOptionsCount,\n        listRef,\n        open,\n        options,\n        size,\n        styleTargetRef,\n        visibleOptions,\n        invalidate,\n    ]);\n}\n\nexport function useVisibleOptions({\n    visibleOptions,\n    listRef,\n    open,\n    options,\n    size,\n    actualOptionsCount,\n}: useVisibleOptionsArgs) {\n    const [, runIfMounted] = useIsMounted();\n    const [measured, setMeasured] = useState(false);\n    const [height, setHeight] = useState<number | undefined>();\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        const measureOptionHeight = (element: HTMLElement) =>\n            typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n        const list = listRef.current;\n\n        if (open && list && visibleOptions > 0) {\n            const childCount = list.children.length;\n            const optionsNodes = ([] as HTMLElement[]).slice.call(\n                list.children,\n                0,\n                visibleOptions + 1,\n            );\n\n            let measuredHeight = optionsNodes\n                .slice(0, visibleOptions)\n                .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n            if (visibleOptions < childCount) {\n                const lastVisibleOptionHeight = measureOptionHeight(\n                    optionsNodes[optionsNodes.length - 1],\n                );\n\n                // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n                measuredHeight += Math.round(\n                    childCount - visibleOptions === 1\n                        ? lastVisibleOptionHeight\n                        : lastVisibleOptionHeight / 2,\n                );\n            } else if (\n                visibleOptions > childCount &&\n                actualOptionsCount &&\n                typeof size === 'number'\n            ) {\n                const actualCount = (options ?? []).reduce(\n                    (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n                    0,\n                );\n\n                measuredHeight =\n                    Math.min(\n                        actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n                        visibleOptions,\n                    ) * size;\n\n                if (visibleOptions < actualCount) {\n                    measuredHeight += size / 2;\n                }\n            }\n\n            setHeight(measuredHeight);\n\n            setMeasured(true);\n\n            return () => {\n                runIfMounted(() => setMeasured(false));\n            };\n        }\n\n        return fnUtils.noop;\n    }, [actualOptionsCount, listRef, open, options, size, visibleOptions, runIfMounted]);\n\n    return [measured, height] as const;\n}\n\nexport function defaultFilterFn(optionText: string, search: string) {\n    if (!search) return true;\n\n    return optionText.toLowerCase().includes(search.toLowerCase());\n}\n\nexport function defaultGroupAccessor(option: GroupShape) {\n    return option.label;\n}\n\nexport function defaultAccessor(option: OptionShape) {\n    if (typeof option.content === 'string') return option.content;\n    if (typeof option.value === 'string') return option.value;\n\n    return option.key;\n}\n\n// TODO: перенести\nexport function usePrevious<T>(value: T) {\n    const ref = useRef<T>();\n\n    useEffect(() => {\n        ref.current = value;\n    }, [value]);\n\n    return ref.current;\n}\n\n// TODO: перенести\nexport const lastIndexOf = <T>(array: T[], predicate: (item: T) => boolean) => {\n    for (let i = array.length - 1; i >= 0; i--) {\n        if (predicate(array[i])) return i;\n    }\n\n    return -1;\n};\n\nexport function getSelectTestIds(dataTestId: string) {\n    return {\n        select: dataTestId,\n        option: getDataTestId(dataTestId, 'option'),\n        optionsList: getDataTestId(dataTestId, 'options-list'),\n        clearButton: getDataTestId(dataTestId, 'options-list-clear'),\n        applyButton: getDataTestId(dataTestId, 'options-list-apply'),\n        field: getDataTestId(dataTestId, 'field'),\n        fieldFormControl: getDataTestId(dataTestId, 'field-form-control'),\n        fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),\n        fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),\n        fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),\n        fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),\n        fieldClearIcon: getDataTestId(dataTestId, 'field-clear-icon'),\n        searchInput: getDataTestId(dataTestId, 'search'),\n        searchFormControl: getDataTestId(dataTestId, 'search-form-control'),\n        searchInner: getDataTestId(dataTestId, 'search-form-control-inner'),\n        searchLeftAddons: getDataTestId(dataTestId, 'search-form-control-left-addons'),\n        searchRightAddons: getDataTestId(dataTestId, 'search-form-control-right-addons'),\n        searchError: getDataTestId(dataTestId, 'search-form-control-error-message'),\n        searchHint: getDataTestId(dataTestId, 'search-form-control-hint'),\n\n        bottomSheet: getDataTestId(dataTestId, 'bottom-sheet'),\n        bottomSheetHeader: getDataTestId(dataTestId, 'bottom-sheet-header'),\n        bottomSheetContent: getDataTestId(dataTestId, 'bottom-sheet-content'),\n\n        modal: getDataTestId(dataTestId, 'modal'),\n        modalHeader: getDataTestId(dataTestId, 'modal-header'),\n        modalContent: getDataTestId(dataTestId, 'modal-content'),\n    };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import {\n    cloneElement,\n    isValidElement,\n    type ReactNode,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport {\n    fnUtils,\n    getDataTestId,\n    getElementWindow,\n    useIsMounted,\n} from '@alfalab/core-components-shared';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport { DEFAULT_SEPARATOR } from './consts';\nimport {\n    type BaseSelectProps,\n    type GroupShape,\n    type OptionShape,\n    type OptionsListProps,\n} from './typings';\n\nexport const isGroup = (item: OptionShape | GroupShape): item is GroupShape =>\n    Object.prototype.hasOwnProperty.call(item, 'options');\n\nexport const isOptionShape = (item: OptionShape | string | null): item is OptionShape =>\n    !!item && Object.prototype.hasOwnProperty.call(item, 'key');\n\nexport const joinOptions = ({\n    selected,\n    selectedMultiple,\n    valueSeparator = DEFAULT_SEPARATOR,\n}: {\n    selected?: OptionShape;\n    selectedMultiple?: OptionShape[];\n    valueSeparator?: string;\n}) => {\n    const options = selectedMultiple || (selected ? [selected] : []);\n\n    if (!options.length) return null;\n\n    return options.reduce((acc: Array<ReactNode | string>, option: OptionShape, index: number) => {\n        if (isValidElement(option.content)) {\n            acc.push(cloneElement(option.content, { key: option.key }));\n        } else {\n            acc.push(option.content);\n        }\n\n        if (index < options.length - 1) acc.push(valueSeparator);\n\n        return acc;\n    }, []);\n};\n\n// За один проход делает список пунктов меню плоским и находит выбранные пункты по ключу\nexport function processOptions(\n    options: BaseSelectProps['options'],\n    selected: BaseSelectProps['selected'] = [],\n    filterFn: (option: OptionShape | GroupShape) => boolean = () => true,\n    filterGroup = false,\n) {\n    const flatOptions: OptionShape[] = [];\n    const filteredOptions: BaseSelectProps['options'] = [];\n\n    const selectedArray = Array.isArray(selected) ? selected : [selected];\n    const selectedOptions = selectedArray.filter(isOptionShape);\n    const selectedKeys = selectedArray.filter(\n        (option): option is string => typeof option === 'string',\n    );\n\n    const isSelected = (option: OptionShape) => selectedKeys.includes(option.key);\n\n    const process = (option: OptionShape | GroupShape) => {\n        const isGroupOption = isGroup(option);\n\n        if (!isGroupOption && isSelected(option)) {\n            selectedOptions.push(option);\n        }\n\n        if (!filterFn(option)) return false;\n\n        if (isGroupOption) {\n            if (filterGroup) {\n                Array.prototype.push.apply(flatOptions, option.options);\n            }\n        } else {\n            flatOptions.push(option);\n        }\n\n        return true;\n    };\n\n    options.forEach((option) => {\n        if (isGroup(option)) {\n            const group: GroupShape = {\n                ...option,\n                options: [],\n            };\n\n            option.options.forEach((groupOption) => {\n                const matched = process(groupOption);\n\n                if (matched) group.options.push(groupOption);\n            });\n\n            if (group.options.length) {\n                filteredOptions.push(group);\n\n                return;\n            }\n\n            if (!filterGroup) return;\n        }\n        const matched = process(option);\n\n        if (matched) filteredOptions.push(option);\n    });\n\n    return { filteredOptions, flatOptions, selectedOptions };\n}\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\ntype useVisibleOptionsArgs = {\n    /**\n     * Количество видимых пунктов\n     */\n    visibleOptions: number;\n\n    /**\n     * Реф на контейнер с пунтами меню\n     */\n    listRef: RefObject<HTMLElement>;\n\n    /**\n     * Флаг открытия меню\n     */\n    open?: boolean;\n\n    /**\n     * Позволяет вызвать пересчет высоты\n     */\n    invalidate?: unknown;\n\n    /**\n     * Список вариантов выбора\n     */\n    options?: Array<OptionShape | GroupShape>;\n\n    /**\n     * Максимальный размер варианта выбора\n     */\n    size?: Extract<OptionsListProps['size'], number>;\n\n    /**\n     * Учитывать действительное число вариантов выбора\n     */\n    actualOptionsCount?: boolean;\n};\n\n// copy-paste of original `useVisibleOptions` before https://github.com/core-ds/core-components/pull/1368\nexport function useVirtualVisibleOptions({\n    visibleOptions,\n    listRef,\n    open,\n    invalidate,\n    options,\n    size,\n    actualOptionsCount,\n}: useVisibleOptionsArgs) {\n    const [height, setHeight] = useState<number>();\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        const measureOptionHeight = (element: HTMLElement) =>\n            typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n        const list = listRef.current;\n\n        if (open && list && visibleOptions > 0) {\n            const childCount = list.children.length;\n            const optionsNodes = ([] as HTMLElement[]).slice.call(\n                list.children,\n                0,\n                visibleOptions + 1,\n            );\n\n            let nextHeight = optionsNodes\n                .slice(0, visibleOptions)\n                .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n            if (visibleOptions < childCount) {\n                const lastVisibleOptionHeight = measureOptionHeight(\n                    optionsNodes[optionsNodes.length - 1],\n                );\n\n                // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n                nextHeight += Math.round(\n                    childCount - visibleOptions === 1\n                        ? lastVisibleOptionHeight\n                        : lastVisibleOptionHeight / 2,\n                );\n            } else if (\n                visibleOptions > childCount &&\n                actualOptionsCount &&\n                typeof size === 'number'\n            ) {\n                const actualCount = (options ?? []).reduce(\n                    (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n                    0,\n                );\n\n                nextHeight =\n                    Math.min(\n                        actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n                        visibleOptions,\n                    ) * size;\n\n                if (visibleOptions < actualCount) {\n                    nextHeight += size / 2;\n                }\n            }\n\n            const win = getElementWindow(list);\n\n            nextHeight += ['::before', '::after']\n                .map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)\n                .reduce((a, b) => a + b);\n\n            setHeight(nextHeight);\n        }\n    }, [actualOptionsCount, listRef, open, options, size, visibleOptions, invalidate]);\n\n    return height;\n}\n\nexport function useVisibleOptions({\n    visibleOptions,\n    listRef,\n    open,\n    options,\n    size,\n    actualOptionsCount,\n}: useVisibleOptionsArgs) {\n    const [, runIfMounted] = useIsMounted();\n    const [measured, setMeasured] = useState(false);\n    const [height, setHeight] = useState<number | undefined>();\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        const measureOptionHeight = (element: HTMLElement) =>\n            typeof size === 'number' ? Math.min(element.clientHeight, size) : element.clientHeight;\n\n        const list = listRef.current;\n\n        if (open && list && visibleOptions > 0) {\n            const childCount = list.children.length;\n            const optionsNodes = ([] as HTMLElement[]).slice.call(\n                list.children,\n                0,\n                visibleOptions + 1,\n            );\n\n            let measuredHeight = optionsNodes\n                .slice(0, visibleOptions)\n                .reduce((acc, child) => acc + measureOptionHeight(child), 0);\n\n            if (visibleOptions < childCount) {\n                const lastVisibleOptionHeight = measureOptionHeight(\n                    optionsNodes[optionsNodes.length - 1],\n                );\n\n                // Если кол-во опций больше visibleOptions на 1, то показываем все опции, иначе добавляем половинку\n                measuredHeight += Math.round(\n                    childCount - visibleOptions === 1\n                        ? lastVisibleOptionHeight\n                        : lastVisibleOptionHeight / 2,\n                );\n            } else if (\n                visibleOptions > childCount &&\n                actualOptionsCount &&\n                typeof size === 'number'\n            ) {\n                const actualCount = (options ?? []).reduce(\n                    (sum, option) => sum + 1 + (isGroup(option) ? option.options.length : 0),\n                    0,\n                );\n\n                measuredHeight =\n                    Math.min(\n                        actualCount === 0 ? /** empty placeholder */ 1 : actualCount,\n                        visibleOptions,\n                    ) * size;\n\n                if (visibleOptions < actualCount) {\n                    measuredHeight += size / 2;\n                }\n            }\n\n            const win = getElementWindow(list);\n\n            measuredHeight += ['::before', '::after']\n                .map((pseudo) => parseFloat(win.getComputedStyle(list, pseudo).paddingTop) || 0)\n                .reduce((a, b) => a + b);\n\n            setHeight(measuredHeight);\n\n            setMeasured(true);\n\n            return () => {\n                runIfMounted(() => setMeasured(false));\n            };\n        }\n\n        return fnUtils.noop;\n    }, [actualOptionsCount, listRef, open, options, size, visibleOptions, runIfMounted]);\n\n    return [measured, height] as const;\n}\n\nexport function defaultFilterFn(optionText: string, search: string) {\n    if (!search) return true;\n\n    return optionText.toLowerCase().includes(search.toLowerCase());\n}\n\nexport function defaultGroupAccessor(option: GroupShape) {\n    return option.label;\n}\n\nexport function defaultAccessor(option: OptionShape) {\n    if (typeof option.content === 'string') return option.content;\n    if (typeof option.value === 'string') return option.value;\n\n    return option.key;\n}\n\n// TODO: перенести\nexport function usePrevious<T>(value: T) {\n    const ref = useRef<T>();\n\n    useEffect(() => {\n        ref.current = value;\n    }, [value]);\n\n    return ref.current;\n}\n\nexport function getSelectTestIds(dataTestId: string) {\n    return {\n        select: dataTestId,\n        option: getDataTestId(dataTestId, 'option'),\n        optionsList: getDataTestId(dataTestId, 'options-list'),\n        clearButton: getDataTestId(dataTestId, 'options-list-clear'),\n        applyButton: getDataTestId(dataTestId, 'options-list-apply'),\n        field: getDataTestId(dataTestId, 'field'),\n        fieldFormControl: getDataTestId(dataTestId, 'field-form-control'),\n        fieldLeftAddons: getDataTestId(dataTestId, 'field-form-control-left-addons'),\n        fieldRightAddons: getDataTestId(dataTestId, 'field-form-control-right-addons'),\n        fieldError: getDataTestId(dataTestId, 'field-form-control-error-message'),\n        fieldHint: getDataTestId(dataTestId, 'field-form-control-hint'),\n        fieldClearIcon: getDataTestId(dataTestId, 'field-clear-icon'),\n        searchInput: getDataTestId(dataTestId, 'search'),\n        searchFormControl: getDataTestId(dataTestId, 'search-form-control'),\n        searchInner: getDataTestId(dataTestId, 'search-form-control-inner'),\n        searchLeftAddons: getDataTestId(dataTestId, 'search-form-control-left-addons'),\n        searchRightAddons: getDataTestId(dataTestId, 'search-form-control-right-addons'),\n        searchError: getDataTestId(dataTestId, 'search-form-control-error-message'),\n        searchHint: getDataTestId(dataTestId, 'search-form-control-hint'),\n\n        bottomSheet: getDataTestId(dataTestId, 'bottom-sheet'),\n        bottomSheetHeader: getDataTestId(dataTestId, 'bottom-sheet-header'),\n        bottomSheetContent: getDataTestId(dataTestId, 'bottom-sheet-content'),\n\n        modal: getDataTestId(dataTestId, 'modal'),\n        modalHeader: getDataTestId(dataTestId, 'modal-header'),\n        modalContent: getDataTestId(dataTestId, 'modal-content'),\n    };\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-select",
-    "version": "19.1.10",
+    "version": "19.2.0-alfasans",
     "description": "Select component",
     "keywords": [],
     "license": "MIT",
@@ -13,21 +13,20 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "^7.1.6",
-        "@alfalab/core-components-bottom-sheet": "^8.1.10",
-        "@alfalab/core-components-button": "^13.2.0",
-        "@alfalab/core-components-checkbox": "^6.2.2",
-        "@alfalab/core-components-form-control": "^14.0.7",
-        "@alfalab/core-components-input": "^17.1.8",
-        "@alfalab/core-components-modal": "^11.0.13",
-        "@alfalab/core-components-mq": "^6.0.5",
-        "@alfalab/core-components-popover": "^8.0.5",
-        "@alfalab/core-components-scrollbar": "^5.0.4",
-        "@alfalab/core-components-shared": "^2.2.1",
-        "@alfalab/core-components-skeleton": "^7.0.4",
+        "@alfalab/core-components-base-modal": "7.1.7-alfasans",
+        "@alfalab/core-components-bottom-sheet": "8.1.11-alfasans",
+        "@alfalab/core-components-button": "13.2.1-alfasans",
+        "@alfalab/core-components-checkbox": "6.2.3-alfasans",
+        "@alfalab/core-components-form-control": "14.0.8-alfasans",
+        "@alfalab/core-components-input": "17.1.9-alfasans",
+        "@alfalab/core-components-modal": "11.0.14-alfasans",
+        "@alfalab/core-components-mq": "6.0.6-alfasans",
+        "@alfalab/core-components-popover": "8.1.0-alfasans",
+        "@alfalab/core-components-scrollbar-private": "0.0.1-alfasans",
+        "@alfalab/core-components-shared": "2.2.2-alfasans",
+        "@alfalab/core-components-skeleton": "7.0.4-alfasans",
         "@alfalab/hooks": "^1.17.0",
         "@alfalab/icons-glyph": "^2.260.0",
-        "@juggle/resize-observer": "^3.3.1",
         "classnames": "^2.5.1",
         "compute-scroll-into-view": "^3.1.0",
         "downshift": "8.4.0",
@@ -45,6 +44,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.1.0",
-    "varsVersion": "11.1.0"
+    "themesVersion": "15.2.0-alfasans",
+    "varsVersion": "11.1.0-alfasans"
 }

package/presets/useSelectWithApply/hook.d.ts

@@ -94,6 +94,10 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
         search?: string;
         multiple?: boolean;
         limitDynamicOptionGroupSize?: BaseSelectProps["limitDynamicOptionGroupSize"];
+        scrollableNodeClassName?: string;
+        contentNodeClassName?: string;
+        listNodeClassName?: string;
+        ctrlRef?: import("react").Ref<import("../../typings").OptionsListController>;
     } & {
         showClear?: boolean;
         onClose?: () => void;
@@ -139,6 +143,10 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
             search?: string;
             multiple?: boolean;
             limitDynamicOptionGroupSize?: BaseSelectProps["limitDynamicOptionGroupSize"];
+            scrollableNodeClassName?: string;
+            contentNodeClassName?: string;
+            listNodeClassName?: string;
+            ctrlRef?: import("react").Ref<import("../../typings").OptionsListController>;
         } & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
@@ -203,6 +211,10 @@ export declare function useSelectWithApply({ options, selected, onChange, onSele
             search?: string;
             multiple?: boolean;
             limitDynamicOptionGroupSize?: BaseSelectProps["limitDynamicOptionGroupSize"];
+            scrollableNodeClassName?: string;
+            contentNodeClassName?: string;
+            listNodeClassName?: string;
+            ctrlRef?: import("react").Ref<import("../../typings").OptionsListController>;
         } & import("react").RefAttributes<HTMLDivElement>> | undefined;
         optionsListProps: unknown;
         showClear: boolean;

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

@@ -35,6 +35,10 @@ export declare const OptionsListWithApply: React.ForwardRefExoticComponent<Pick<
     search?: string;
     multiple?: boolean;
     limitDynamicOptionGroupSize?: import("../../../typings").BaseSelectProps["limitDynamicOptionGroupSize"];
+    scrollableNodeClassName?: string;
+    contentNodeClassName?: string;
+    listNodeClassName?: string;
+    ctrlRef?: React.Ref<import("../../../typings").OptionsListController>;
 } & {
     showClear?: boolean;
     onClose?: () => void;

package/presets/useSelectWithApply/options-list-with-apply/footer/index.css

@@ -4,22 +4,17 @@
 :root {
     --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-m: 16px;
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
-    --gap-16: var(--gap-m);
 }
 :root {
     --select-option-list-footer-button-gap: var(--gap-8);
 }
-.select__footer_1mxu2 {
+.select__footer_1bdq6 {
     background-color: var(--color-light-base-bg-primary);
     padding: var(--gap-12);
     outline: none;
 }
-.select__footer_1mxu2.select__size-72_1mxu2 {
-        padding: var(--gap-12) var(--gap-16);
-    }
-.select__footer_1mxu2 > .select__button_1mxu2 + .select__button_1mxu2 {
+.select__footer_1bdq6 > .select__button_1bdq6 + .select__button_1bdq6 {
         margin-left: var(--select-option-list-footer-button-gap);
     }

package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"footer":"select__footer_1mxu2","size-72":"select__size-72_1mxu2","button":"select__button_1mxu2"};
+var styles = {"footer":"select__footer_1bdq6","button":"select__button_1bdq6"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.footer {\n    background-color: var(--color-light-base-bg-primary);\n    padding: var(--gap-12);\n    outline: none;\n\n    &.size-72 {\n        padding: var(--gap-12) var(--gap-16);\n    }\n\n    & > .button + .button {\n        margin-left: var(--select-option-list-footer-button-gap);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/footer/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import './vars.css';\n\n.footer {\n    background-color: var(--color-light-base-bg-primary);\n    padding: var(--gap-12);\n    outline: none;\n\n    & > .button + .button {\n        margin-left: var(--select-option-list-footer-button-gap);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,sBAAsB,CAAC;;;;"}

package/presets/useSelectWithApply/options-list-with-apply/header/index.css

@@ -1,21 +1,24 @@
 :root {
     --gap-xs: 8px;
     --gap-s: 12px;
-    --gap-m: 16px;
+    --gap-0: 0px;
     --gap-8: var(--gap-xs);
     --gap-12: var(--gap-s);
-    --gap-16: var(--gap-m);
 }
-.select__desktop_icdp3 {
-    padding: var(--gap-12);
+:root {
+    --select-options-list-top-padding: var(--gap-0);
+    --select-options-list-right-padding: var(--gap-0);
+    --select-options-list-left-padding: var(--gap-0);
+}
+.select__desktop_1h94k {
+    padding: calc(var(--gap-12) + var(--select-options-list-top-padding))
+        calc(var(--gap-12) + var(--select-options-list-right-padding)) var(--gap-12)
+        calc(var(--gap-12) + var(--select-options-list-left-padding));
 }
-.select__desktop_icdp3.select__size-72_icdp3 {
-        padding-left: var(--gap-16);
-    }
-.select__mobile_icdp3 {
+.select__mobile_1h94k {
     padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);
 }
-.select__positionAfter_icdp3 {
+.select__positionAfter_1h94k {
     margin-left: 0;
     margin-left: initial;
 }

package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"desktop":"select__desktop_icdp3","size-72":"select__size-72_icdp3","mobile":"select__mobile_icdp3","positionAfter":"select__positionAfter_icdp3"};
+var styles = {"desktop":"select__desktop_1h94k","mobile":"select__mobile_1h94k","positionAfter":"select__positionAfter_1h94k"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/presets/useSelectWithApply/options-list-with-apply/header/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.desktop {\n    padding: var(--gap-12);\n    &.size-72 {\n        padding-left: var(--gap-16);\n    }\n}\n\n.mobile {\n    padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);\n}\n\n.positionAfter {\n    margin-left: unset;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,SAAS,CAAC,uBAAuB,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,eAAe,CAAC,6BAA6B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../../src/presets/useSelectWithApply/options-list-with-apply/header/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../../../vars.css';\n\n.desktop {\n    padding: calc(var(--gap-12) + var(--select-options-list-top-padding))\n        calc(var(--gap-12) + var(--select-options-list-right-padding)) var(--gap-12)\n        calc(var(--gap-12) + var(--select-options-list-left-padding));\n}\n\n.mobile {\n    padding: var(--gap-12) var(--gap-12) var(--gap-12) var(--gap-8);\n}\n\n.positionAfter {\n    margin-left: unset;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,SAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,sBAAsB,CAAC,eAAe,CAAC,6BAA6B,CAAC;;;;"}

package/presets/useSelectWithLoading/index.css

@@ -1,4 +1,4 @@
-.select__skeleton_11n6n {
+.select__skeleton_gcqox {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

package/presets/useSelectWithLoading/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"skeleton":"select__skeleton_11n6n"};
+var styles = {"skeleton":"select__skeleton_gcqox"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/shared/index.js

@@ -31,7 +31,6 @@ exports.getSelectTestIds = utils.getSelectTestIds;
 exports.isGroup = utils.isGroup;
 exports.isOptionShape = utils.isOptionShape;
 exports.joinOptions = utils.joinOptions;
-exports.lastIndexOf = utils.lastIndexOf;
 exports.processOptions = utils.processOptions;
 exports.usePrevious = utils.usePrevious;
 exports.useVirtualVisibleOptions = utils.useVirtualVisibleOptions;

package/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/src/components/base-select/Component.tsx

@@ -12,7 +12,6 @@ import React, {
     useRef,
 } from 'react';
 import mergeRefs from 'react-merge-refs';
-import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { compute } from 'compute-scroll-into-view';
 import {
@@ -22,12 +21,12 @@ import {
     type UseMultipleSelectionState,
 } from 'downshift';
 
-import { fnUtils, getDataTestId, isClient } from '@alfalab/core-components-shared';
-import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
+import { getDataTestId, isClient } from '@alfalab/core-components-shared';
 
 import {
     type AnyObject,
     type OptionShape,
+    type OptionsListController,
     type OptionsListProps,
     type SearchProps,
 } from '../../typings';
@@ -125,14 +124,13 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             environment = isClient() ? window : undefined,
         } = props;
         const shouldSearchBlurRef = useRef(true);
-        const rootRef = useRef<HTMLDivElement>(null);
         const fieldRef = useRef<HTMLInputElement>(null);
         const listRef = useRef<HTMLDivElement>(null);
         const initiatorRef = useRef<OptionShape | null>(null);
         const searchRef = useRef<HTMLInputElement>(null);
         const scrollableContainerRef = useRef<HTMLDivElement>(null);
         const onOpenRef = useRef(onOpen);
-
+        const optionsListCtrlRef = useRef<OptionsListController>(null);
         const [searchState, setSearchState] = React.useState('');
 
         const [search, setSearch] =
@@ -169,20 +167,29 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
 
         const scrollIntoView = (node: HTMLElement) => {
             if (!node || view === 'mobile') return;
+            const optionsListCtrl = optionsListCtrlRef.current;
 
-            requestAnimationFrame(() => {
-                const actions = compute(node, {
-                    boundary: listRef.current,
-                    block: 'nearest',
-                    scrollMode: 'if-needed',
-                });
+            if (optionsListCtrl) {
+                const dataIndex = node.getAttribute('data-index');
+
+                if (dataIndex) {
+                    optionsListCtrl.scrollToIndex(Number(dataIndex));
+                }
+            } else {
+                requestAnimationFrame(() => {
+                    const actions = compute(node, {
+                        boundary: listRef.current,
+                        block: 'nearest',
+                        scrollMode: 'if-needed',
+                    });
 
-                actions.forEach((action) => {
-                    const { el, top } = action;
+                    actions.forEach((action) => {
+                        const { el, top } = action;
 
-                    el.scrollTop = top;
+                        el.scrollTop = top;
+                    });
                 });
-            });
+            }
         };
 
         const useMultipleSelectionProps: UseMultipleSelectionProps<OptionShape> = {
@@ -459,6 +466,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             ...(optionProps as object),
             mobile: view === 'mobile',
             className: cn(optionClassName, {
+                [styles.option]: view === 'desktop',
                 [mobileStyles.option]: view === 'mobile',
             }),
             innerProps: getItemProps({
@@ -472,6 +480,7 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                     shouldSearchBlurRef.current = true;
                     fieldRef.current?.focus();
                 },
+                'data-index': index,
             }),
             multiple,
             index,
@@ -494,43 +503,6 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
 
-        const calcOptionsListWidth = useCallback(() => {
-            if (view === 'desktop' && listRef.current) {
-                const widthAttr = optionsListWidth === 'field' ? 'width' : 'minWidth';
-
-                const optionsListMinWidth = rootRef.current
-                    ? rootRef.current.getBoundingClientRect().width
-                    : 0;
-
-                listRef.current.removeAttribute('style');
-                listRef.current.style[widthAttr] = `${optionsListMinWidth}px`;
-            }
-        }, [view, optionsListWidth]);
-
-        useEffect(() => {
-            if (view === 'desktop') {
-                const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
-                const observer = new ResizeObserver(calcOptionsListWidth);
-
-                if (rootRef.current) {
-                    observer.observe(rootRef.current);
-                }
-
-                return () => {
-                    observer.disconnect();
-                };
-            }
-
-            return fnUtils.noop;
-        }, [view, calcOptionsListWidth, open, optionsListWidth]);
-
-        useLayoutEffect_SAFE_FOR_SSR(calcOptionsListWidth, [
-            open,
-            optionsListWidth,
-            filteredOptions,
-            selectedItems,
-        ]);
-
         const renderValue = () =>
             selectedItems.map((option) => (
                 <input type='hidden' name={name} value={option.key} key={option.key} />
@@ -641,20 +613,33 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                         optionsListClassName,
                         view === 'mobile' && mobileStyles.optionsListWrapper,
                         view === 'desktop' && styles.optionsListWrapper,
+                        {
+                            [styles.matchContent]:
+                                view === 'desktop' && optionsListWidth === 'content',
+                        },
                     )}
                 >
                     <OptionsList
                         {...listProps}
+                        ctrlRef={optionsListCtrlRef}
                         ref={view === 'desktop' ? listProps.ref : scrollableContainerRef}
                         setHighlightedIndex={view === 'desktop' ? setHighlightedIndex : undefined}
                         className={cn(
-                            { [mobileStyles.optionsList]: view === 'mobile' },
+                            {
+                                [mobileStyles.optionsList]: view === 'mobile',
+                            },
                             listProps.className,
                         )}
                         scrollbarClassName={cn(
-                            { [mobileStyles.scrollbar]: view === 'mobile' },
+                            {
+                                [styles.scrollbar]: view === 'desktop',
+                                [mobileStyles.scrollbar]: view === 'mobile',
+                            },
                             listProps.scrollbarClassName,
                         )}
+                        scrollableNodeClassName={cn({ [styles.scrollable]: view === 'desktop' })}
+                        contentNodeClassName={cn({ [styles.content]: view === 'desktop' })}
+                        listNodeClassName={cn({ [styles.list]: view === 'desktop' })}
                         optionsListWidth={optionsListWidth}
                         flatOptions={flatOptions}
                         highlightedIndex={highlightedIndex}
@@ -699,6 +684,8 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                         popperClassName={cn(styles.popoverInner, popperClassName)}
                         update={updatePopover}
                         zIndex={zIndexPopover}
+                        useAnchorWidth={true}
+                        widthProp={optionsListWidth === 'field' ? 'width' : 'minWidth'}
                     >
                         {renderOptionsList()}
                     </Popover>
@@ -825,7 +812,6 @@ export const BaseSelect = forwardRef<unknown, ComponentProps>(
                 aria-haspopup='listbox'
                 role={inputProps.role}
                 className={cn(styles.component, { [styles.block]: block }, className)}
-                ref={rootRef}
                 onKeyDown={disabled ? undefined : handleFieldKeyDown}
                 tabIndex={-1}
                 data-test-id={getDataTestId(dataTestId)}