@alfalab/core-components-select 19.1.10 → 19.2.0

package/src/components/options-list/Component.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { Scrollbar } from '@alfalab/core-components-scrollbar';
+import { ScrollbarPrivate } from '@alfalab/core-components-scrollbar-private';
 
 import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
 import { useNativeScrollbar } from '../../hooks/use-native-scrollbar';
@@ -40,7 +40,6 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             header,
             footer,
             showFooter = true,
-            optionsListWidth,
             nativeScrollbar: nativeScrollbarProp,
             flatOptions = [],
             setHighlightedIndex,
@@ -50,9 +49,24 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             multiple,
             limitDynamicOptionGroupSize = false,
             client,
+            scrollableNodeClassName,
+            contentNodeClassName,
+            listNodeClassName,
         },
         ref,
     ) => {
+        const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;
+        const listRef = useRef<HTMLDivElement>(null);
+        const scrollableNodeRef = useRef<HTMLDivElement>(null);
+        const [, maxHeight] = useVisibleOptions({
+            visibleOptions,
+            listRef,
+            open,
+            options,
+            actualOptionsCount,
+            size: actualOptionsCount ? size : undefined,
+        });
+        const noOptions = options.length === 0;
         const [scrollTop, setScrollTop] = useState(true);
         const [scrollBottom, setScrollBottom] = useState(false);
 
@@ -61,27 +75,22 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             client,
         });
 
-        const handleScroll = useCallback(
-            (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-                const scrolledToHeader = event.currentTarget.scrollTop <= 0;
-                const scrolledToFooter =
-                    event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
-                    event.currentTarget.scrollTop;
+        const handleScroll: React.MouseEventHandler<HTMLDivElement> = (event) => {
+            const scrolledToHeader = event.currentTarget.scrollTop <= 0;
+            const scrolledToFooter =
+                event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
+                event.currentTarget.scrollTop;
 
-                setScrollTop(scrolledToHeader);
-                setScrollBottom(scrolledToFooter);
+            setScrollTop(scrolledToHeader);
+            setScrollBottom(scrolledToFooter);
 
-                onScroll?.(event);
-            },
-            [onScroll],
-        );
+            onScroll?.(event);
+        };
 
         const renderOption = (option: OptionShape, index: number) => (
             <Option key={option.key} {...getOptionProps(option, index)} />
         );
 
-        const listRef = useRef<HTMLDivElement>(null);
-        const scrollbarRef = useRef<HTMLDivElement>(null);
         const counter = createCounter();
         const renderGroup = (group: GroupShape) => {
             const groupSelectedItems = selectedItems?.filter(({ key: selectedItemKey }) =>
@@ -116,89 +125,10 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             );
         };
 
-        const actualOptionsCount = limitDynamicOptionGroupSize && options.length > 0;
-
-        const [measured, maxHeight] = useVisibleOptions({
-            visibleOptions,
-            listRef,
-            open,
-            options,
-            actualOptionsCount,
-            size: actualOptionsCount
-                ? (() => {
-                      switch (typeof size) {
-                          case 'string':
-                              throw new Error(
-                                  'OptionsList with `limitDynamicOptionGroupSize` enabled needs a `size` with number type',
-                              );
-                          default:
-                              return size;
-                      }
-                  })()
-                : undefined,
-        });
-
         if (options.length === 0 && !emptyPlaceholder && !header && !footer) {
             return null;
         }
 
-        const renderListItems = () => (
-            <React.Fragment>
-                {options.map((option) =>
-                    isGroup(option) ? renderGroup(option) : renderOption(option, counter()),
-                )}
-
-                {emptyPlaceholder && options.length === 0 && (
-                    <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>
-                )}
-            </React.Fragment>
-        );
-
-        const renderWithCustomScrollbar = () => {
-            const scrollableNodeProps = {
-                onScroll: handleScroll,
-                'data-test-id': dataTestId,
-                ref: ref as React.RefObject<HTMLDivElement>,
-            };
-
-            return (
-                <Scrollbar
-                    className={cn(styles.scrollable, scrollbarClassName)}
-                    verticalBarClassName={cn(styles.verticalBar, {
-                        [styles.verticalBarWithHeader]: Boolean(header),
-                        [styles.verticalBarWithFooter]: Boolean(footer),
-                    })}
-                    ref={scrollbarRef}
-                    style={{ maxHeight }}
-                    horizontalAutoStretch={optionsListWidth === 'content'}
-                    scrollableNodeProps={scrollableNodeProps}
-                    contentNodeProps={{ ref: listRef }}
-                    maskProps={{
-                        /*
-                         * Для корректного подсчета высоты опций(иначе для optionsListWidth: 'field'
-                         * высота опции всегда будет равна высоте одной строчки)
-                         */
-                        className: cn({
-                            [styles.mask]: optionsListWidth === 'content' && !measured,
-                        }),
-                    }}
-                >
-                    {renderListItems()}
-                </Scrollbar>
-            );
-        };
-
-        const renderWithNativeScrollbar = () => (
-            <div
-                className={cn(styles.scrollable, scrollbarClassName)}
-                ref={mergeRefs([listRef, ref])}
-                onScroll={handleScroll}
-                style={{ maxHeight }}
-            >
-                {renderListItems()}
-            </div>
-        );
-
         const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
 
         return (
@@ -217,7 +147,34 @@ export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                     </div>
                 )}
 
-                {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}
+                {!noOptions && (
+                    <ScrollbarPrivate
+                        native={nativeScrollbar}
+                        className={scrollbarClassName}
+                        style={{ maxHeight }}
+                        scrollableNodeProps={{
+                            ref: mergeRefs([scrollableNodeRef, ref]),
+                            onScroll: handleScroll,
+                            className: scrollableNodeClassName,
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-expect-error
+                            'data-test-id': nativeScrollbar ? undefined : dataTestId,
+                        }}
+                        contentNodeProps={{ className: contentNodeClassName }}
+                    >
+                        <div className={listNodeClassName} ref={listRef}>
+                            {options.map((option) =>
+                                isGroup(option)
+                                    ? renderGroup(option)
+                                    : renderOption(option, counter()),
+                            )}
+                        </div>
+                    </ScrollbarPrivate>
+                )}
+
+                {emptyPlaceholder && noOptions && (
+                    <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>
+                )}
 
                 {showFooter && footer && (
                     <div

package/src/components/options-list/index.module.css

@@ -6,37 +6,11 @@
     outline: none;
     box-sizing: border-box;
     position: relative;
-
-    & .scrollable {
-        overflow: auto;
-        width: 100%;
-
-        & .verticalBar.verticalBar {
-            top: var(--select-options-list-scrollbar-gap);
-            height: calc(100% - 2 * var(--select-options-list-scrollbar-gap));
-
-            &.verticalBarWithHeader {
-                top: 0;
-                height: calc(100% - var(--select-options-list-scrollbar-gap));
-            }
-
-            &.verticalBarWithFooter {
-                top: var(--select-options-list-scrollbar-gap);
-                height: calc(100% - var(--select-options-list-scrollbar-gap));
-            }
-
-            &.verticalBarWithHeader.verticalBarWithFooter {
-                top: 0;
-                height: 100%;
-            }
-        }
-    }
 }
 
 .optionsListHeader {
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
-    transition: border-color 0.2s ease;
 
     &.headerHighlighted {
         border-bottom-color: var(--color-light-neutral-300);
@@ -48,22 +22,24 @@
     bottom: var(--gap-0);
     box-sizing: border-box;
     border-top: 1px solid transparent;
-    transition: border-color 0.2s ease;
 
     &.withBorder {
         border-top-color: var(--color-light-neutral-300);
     }
 }
 
-.mask {
-    min-width: 4000px;
-}
-
 .emptyPlaceholder {
     padding: var(--gap-16) var(--gap-12);
     color: var(--select-options-list-empty-placeholder-color);
+    flex: 1; /* needed in mobile */
 }
 
+.size-64 .emptyPlaceholder,
 .size-72 .emptyPlaceholder {
     padding: var(--gap-24) var(--gap-16);
 }
+
+.list {
+    will-change: transform;
+    height: auto;
+}

package/src/components/virtual-options-list/Component.tsx

@@ -1,17 +1,24 @@
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import mergeRefs from 'react-merge-refs';
+import React, {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { useVirtual } from 'react-virtual';
 import cn from 'classnames';
 
-import { Scrollbar } from '@alfalab/core-components-scrollbar';
+import { ScrollbarPrivate } from '@alfalab/core-components-scrollbar-private';
+import { getElementWindow } from '@alfalab/core-components-shared';
 
 import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
 import { useNativeScrollbar } from '../../hooks/use-native-scrollbar';
 import { type GroupShape, type OptionShape, type OptionsListProps } from '../../typings';
-import { isGroup, lastIndexOf, usePrevious, useVirtualVisibleOptions } from '../../utils';
+import { isGroup, usePrevious, useVirtualVisibleOptions } from '../../utils';
 import { Optgroup as DefaultOptgroup } from '../optgroup';
 
-import styles from './index.module.css';
+import styles from '../options-list/index.module.css';
 
 export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
     (
@@ -33,7 +40,6 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             header,
             footer,
             showFooter = true,
-            optionsListWidth,
             onScroll,
             nativeScrollbar: nativeScrollbarProp,
             setHighlightedIndex,
@@ -43,18 +49,43 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             multiple,
             scrollbarClassName,
             client,
+            scrollableNodeClassName,
+            contentNodeClassName,
+            listNodeClassName,
+            footerClassName,
+            ctrlRef,
         },
         ref,
     ) => {
         const listRef = useRef<HTMLDivElement>(null);
-        const parentRef = useRef<HTMLDivElement>(null);
-        const scrollbarRef = useRef<HTMLDivElement>(null);
+        const scrollableNodeRef = useRef<HTMLDivElement>(null);
+        const noOptions = options.length === 0;
+        const [scrollTop, setScrollTop] = useState(true);
+        const [scrollBottom, setScrollBottom] = useState(false);
         const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState('');
         const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
 
         const rowVirtualizer = useVirtual({
+            scrollToFn(offset, defaultScrollToFn) {
+                let delta = 0;
+                const list = listRef.current;
+
+                if (list) {
+                    const win = getElementWindow(list);
+
+                    delta = ['::before', '::after']
+                        .map((pseudo) => {
+                            const { paddingTop } = win.getComputedStyle(list, pseudo);
+
+                            return parseFloat(paddingTop) || 0;
+                        })
+                        .reduce((a, b) => a + b);
+                }
+
+                defaultScrollToFn?.(offset === 0 ? offset : offset + delta);
+            },
             size: flatOptions.length,
-            parentRef: (ref || parentRef) as React.RefObject<HTMLDivElement>,
+            parentRef: (ref as React.RefObject<HTMLDivElement>) || scrollableNodeRef,
             overscan: 15,
         });
 
@@ -71,21 +102,13 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [open]);
 
-        // Скролл к пункту, которого нет на экране
-        useEffect(() => {
-            if (highlightedIndex === -1) return;
-
-            if (!rowVirtualizer.virtualItems.some((option) => option.index === highlightedIndex)) {
-                rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
-            }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [highlightedIndex]);
+        useImperativeHandle(ctrlRef, () => rowVirtualizer, [rowVirtualizer]);
 
         // Циклическая навигация
         useEffect(() => {
             const notDisabled = (option: OptionShape) => !option.disabled;
             const firstNonDisabled = flatOptions.findIndex(notDisabled);
-            const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);
+            const lastNonDisabled = flatOptions.findLastIndex(notDisabled);
 
             if (
                 prevHighlightedIndex <= firstNonDisabled &&
@@ -115,11 +138,10 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [rowVirtualizer.virtualItems.length, flatOptions]);
 
-        useVirtualVisibleOptions({
+        const maxHeight = useVirtualVisibleOptions({
             visibleOptions,
             invalidate: visibleOptionsInvalidateKey,
             listRef,
-            styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,
             open,
         });
 
@@ -139,6 +161,18 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
             }, {});
         }, [options]);
 
+        const handleScroll: React.MouseEventHandler<HTMLDivElement> = (event) => {
+            const scrolledToHeader = event.currentTarget.scrollTop <= 0;
+            const scrolledToFooter =
+                event.currentTarget.scrollHeight - event.currentTarget.offsetHeight <=
+                event.currentTarget.scrollTop;
+
+            setScrollTop(scrolledToHeader);
+            setScrollBottom(scrolledToFooter);
+
+            onScroll?.(event);
+        };
+
         const renderList = () =>
             rowVirtualizer.virtualItems.map((virtualRow) => {
                 const option = flatOptions[virtualRow.index];
@@ -177,16 +211,7 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                 };
 
                 return (
-                    <div
-                        key={virtualRow.index}
-                        ref={virtualRow.measureRef}
-                        className={cn(styles.virtualRow, {
-                            [styles.highlighted]: highlightedIndex === virtualRow.index,
-                        })}
-                        style={{
-                            transform: `translateY(${virtualRow.start}px)`,
-                        }}
-                    >
+                    <div key={virtualRow.index} ref={virtualRow.measureRef}>
                         {renderGroup()}
                         {!isGroup(option) && (
                             <Option {...getOptionProps(option, virtualRow.index)} />
@@ -195,72 +220,70 @@ export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
                 );
             });
 
-        const contentNodeProps = {
-            className: styles.inner,
-            style: { height: `${rowVirtualizer.totalSize}px` },
-            ref: listRef,
-        };
-
-        const renderWithCustomScrollbar = () => (
-            <Scrollbar
-                className={cn(styles.scrollable, scrollbarClassName)}
-                ref={scrollbarRef}
-                horizontalAutoStretch={optionsListWidth === 'content'}
-                scrollableNodeProps={{ onScroll, ref: parentRef }}
-                contentNodeProps={contentNodeProps}
-            >
-                {renderList()}
-            </Scrollbar>
-        );
-
-        const renderWithNativeScrollbar = () => {
-            if (visibleOptions) {
-                return (
-                    <div
-                        className={cn(styles.scrollable, scrollbarClassName)}
-                        ref={mergeRefs([parentRef, ref])}
-                        onScroll={onScroll}
-                    >
-                        <div {...contentNodeProps}>{renderList()}</div>
-                    </div>
-                );
-            }
-
-            return <div {...contentNodeProps}>{renderList()}</div>;
-        };
-
         const resetHighlightedIndex = () => setHighlightedIndex?.(-1);
 
         if (options.length === 0 && !emptyPlaceholder) {
             return null;
         }
 
+        const [firstVirualRow] = rowVirtualizer.virtualItems;
+
         return (
             <div
-                className={cn(styles.virtualOptionsList, styles[`size-${size}`], className)}
-                data-test-id={dataTestId}
+                {...(nativeScrollbar && { 'data-test-id': dataTestId })}
+                className={cn(styles.optionsList, styles[`size-${size}`], className)}
             >
                 {header && (
                     <div
-                        className={styles.virtualOptionsListHeader}
+                        className={cn(styles.optionsListHeader, {
+                            [styles.headerHighlighted]: !scrollTop,
+                        })}
                         onMouseEnter={resetHighlightedIndex}
                     >
                         {header}
                     </div>
                 )}
 
-                {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}
+                {!noOptions && (
+                    <ScrollbarPrivate
+                        native={nativeScrollbar}
+                        className={scrollbarClassName}
+                        style={{ maxHeight }}
+                        scrollableNodeProps={{
+                            ref: scrollableNodeRef,
+                            onScroll: handleScroll,
+                            className: scrollableNodeClassName,
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-expect-error
+                            'data-test-id': nativeScrollbar ? undefined : dataTestId,
+                        }}
+                        contentNodeProps={{
+                            className: contentNodeClassName,
+                            style: { minHeight: rowVirtualizer.totalSize },
+                        }}
+                    >
+                        <div
+                            className={cn(styles.list, listNodeClassName)}
+                            ref={listRef}
+                            style={{ transform: `translateY(${firstVirualRow?.start ?? 0}px)` }}
+                        >
+                            {renderList()}
+                        </div>
+                    </ScrollbarPrivate>
+                )}
 
-                {emptyPlaceholder && options.length === 0 && (
+                {emptyPlaceholder && noOptions && (
                     <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>
                 )}
 
                 {showFooter && footer && (
                     <div
                         onMouseEnter={resetHighlightedIndex}
-                        className={cn(styles.virtualOptionsListFooter, {
+                        className={cn(styles.optionsListFooter, footerClassName, {
                             [styles.withBorder]:
-                                visibleOptions && flatOptions.length > visibleOptions,
+                                visibleOptions &&
+                                flatOptions.length > visibleOptions &&
+                                !scrollBottom,
                         })}
                     >
                         {footer}

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

@@ -6,10 +6,6 @@
     padding: var(--gap-12);
     outline: none;
 
-    &.size-72 {
-        padding: var(--gap-12) var(--gap-16);
-    }
-
     & > .button + .button {
         margin-left: var(--select-option-list-footer-button-gap);
     }

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

@@ -1,10 +1,10 @@
 @import '@alfalab/core-components-vars/src/index.css';
+@import '../../../../vars.css';
 
 .desktop {
-    padding: var(--gap-12);
-    &.size-72 {
-        padding-left: var(--gap-16);
-    }
+    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));
 }
 
 .mobile {

package/src/typings.ts

@@ -6,6 +6,7 @@ import {
     type MouseEvent,
     type ReactElement,
     type ReactNode,
+    type Ref,
     type RefAttributes,
     type SVGProps,
 } from 'react';
@@ -155,6 +156,7 @@ export interface BaseSelectProps {
 
     /**
      * Размер пунктов меню
+     * @deprecated Управление размером пунктов меню через отдельный проп не поддерживается дизайн-контрактом. Размер пункта должен определяться его контентом.
      */
     optionsSize?: 40 | 48 | 56 | 64 | 72;
 
@@ -691,6 +693,26 @@ export type OptionsListProps = Pick<SelectProps, 'client'> & {
      * Ограничение динамического размера группы вариантов выбора
      */
     limitDynamicOptionGroupSize?: BaseSelectProps['limitDynamicOptionGroupSize'];
+
+    /**
+     *
+     */
+    scrollableNodeClassName?: string;
+
+    /**
+     *
+     */
+    contentNodeClassName?: string;
+
+    /**
+     *
+     */
+    listNodeClassName?: string;
+
+    /**
+     *
+     */
+    ctrlRef?: Ref<OptionsListController>;
 };
 
 export type OptgroupProps = {
@@ -1003,3 +1025,7 @@ export type ClearButtonProps = {
      */
     size?: FormControlProps['size'];
 };
+
+export interface OptionsListController {
+    scrollToIndex(index: number): void;
+}