@alfalab/core-components-select 14.3.5 → 15.0.1

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

@@ -0,0 +1,140 @@
+import React, { forwardRef, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import { Scrollbar } from '@alfalab/core-components-scrollbar';
+import { useMedia } from '@alfalab/hooks';
+
+import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
+import { GroupShape, OptionShape, OptionsListProps } from '../../typings';
+import { isGroup, useVisibleOptions } from '../../utils';
+import { Optgroup as DefaultOptgroup } from '../optgroup';
+
+import styles from './index.module.css';
+
+const createCounter = () => {
+    let count = 0;
+
+    // eslint-disable-next-line no-plusplus
+    return () => count++;
+};
+
+export const OptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
+    (
+        {
+            size = 's',
+            className,
+            optionGroupClassName,
+            Option,
+            getOptionProps,
+            options = [],
+            Optgroup = DefaultOptgroup,
+            dataTestId,
+            emptyPlaceholder,
+            visibleOptions = DEFAULT_VISIBLE_OPTIONS,
+            onScroll,
+            open,
+            header,
+            footer,
+            showFooter = true,
+            optionsListWidth,
+            nativeScrollbar: nativeScrollbarProp,
+            flatOptions = [],
+        },
+        ref,
+    ) => {
+        let [nativeScrollbar] = useMedia<boolean>([[true, '(max-width: 1023px)']], false);
+
+        nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+
+        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) => (
+            <Optgroup
+                className={optionGroupClassName}
+                label={group.label}
+                key={group.label}
+                size={size}
+            >
+                {group.options.map((option) => renderOption(option, counter()))}
+            </Optgroup>
+        );
+
+        useVisibleOptions({
+            ...(!nativeScrollbar && { styleTargetRef: scrollbarRef }),
+            visibleOptions,
+            listRef,
+            open,
+            invalidate: options,
+        });
+
+        if (options.length === 0 && !emptyPlaceholder) {
+            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,
+                'data-test-id': dataTestId,
+                ref: ref as React.RefObject<HTMLDivElement>,
+            };
+
+            return (
+                <Scrollbar
+                    className={styles.scrollable}
+                    ref={scrollbarRef}
+                    horizontalAutoStretch={optionsListWidth === 'content'}
+                    scrollableNodeProps={scrollableNodeProps}
+                    contentNodeProps={{ ref: listRef }}
+                >
+                    {renderListItems()}
+                </Scrollbar>
+            );
+        };
+
+        const renderWithNativeScrollbar = () => (
+            <div className={styles.scrollable} ref={mergeRefs([listRef, ref])} onScroll={onScroll}>
+                {renderListItems()}
+            </div>
+        );
+
+        return (
+            <div
+                {...(nativeScrollbar && { 'data-test-id': dataTestId })}
+                className={cn(styles.optionsList, styles[size], className)}
+            >
+                {header && <div className={styles.optionsListHeader}>{header}</div>}
+
+                {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}
+
+                {showFooter && footer && (
+                    <div
+                        className={cn(styles.optionsListFooter, {
+                            [styles.withBorder]:
+                                visibleOptions && flatOptions.length > visibleOptions,
+                        })}
+                    >
+                        {footer}
+                    </div>
+                )}
+            </div>
+        );
+    },
+);

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

@@ -0,0 +1,40 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.optionsList {
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.optionsListHeader {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-light-border-secondary);
+}
+
+.optionsListFooter {
+    position: sticky;
+    bottom: 0;
+    box-sizing: border-box;
+    border-top: 1px solid transparent;
+
+    &.withBorder {
+        border-top: 1px solid var(--color-light-border-secondary);
+    }
+}
+
+.scrollable {
+    overflow: auto;
+    width: 100%;
+}
+
+.emptyPlaceholder {
+    padding: var(--gap-m) var(--gap-s);
+    color: var(--select-options-list-empty-placeholder-color);
+}
+
+.l .emptyPlaceholder,
+.xl .emptyPlaceholder {
+    padding: var(--gap-xl) var(--gap-m);
+}

package/src/components/options-list/index.ts

@@ -0,0 +1 @@
+export * from './Component';

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

@@ -0,0 +1,217 @@
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useVirtual } from 'react-virtual';
+import cn from 'classnames';
+
+import { Scrollbar } from '@alfalab/core-components-scrollbar';
+import { useMedia } from '@alfalab/hooks';
+
+import { DEFAULT_VISIBLE_OPTIONS } from '../../consts';
+import { GroupShape, OptionShape, OptionsListProps } from '../../typings';
+import { isGroup, lastIndexOf, usePrevious, useVisibleOptions } from '../../utils';
+import { Optgroup as DefaultOptgroup } from '../optgroup';
+
+import styles from './index.module.css';
+
+export const VirtualOptionsList = forwardRef<HTMLDivElement, OptionsListProps>(
+    (
+        {
+            size = 's',
+            flatOptions = [],
+            highlightedIndex = -1,
+            className,
+            getOptionProps,
+            Option,
+            open,
+            options = [],
+            Optgroup = DefaultOptgroup,
+            dataTestId,
+            emptyPlaceholder,
+            visibleOptions = DEFAULT_VISIBLE_OPTIONS,
+            header,
+            footer,
+            showFooter = true,
+            optionsListWidth,
+            onScroll,
+            nativeScrollbar: nativeScrollbarProp,
+        },
+        ref,
+    ) => {
+        const listRef = useRef<HTMLDivElement>(null);
+        const parentRef = useRef<HTMLDivElement>(null);
+        const scrollbarRef = useRef<HTMLDivElement>(null);
+        const [visibleOptionsInvalidateKey, setVisibleOptionsInvalidateKey] = useState(0);
+        const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
+
+        let [nativeScrollbar] = useMedia<boolean>([[true, '(max-width: 1023px)']], false);
+
+        const rowVirtualizer = useVirtual({
+            size: flatOptions.length,
+            parentRef: (ref || parentRef) as React.RefObject<HTMLDivElement>,
+            overscan: 15,
+        });
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar);
+
+        // Сколл к выбранному пункту при открытии меню
+        useEffect(() => {
+            if (open) {
+                rowVirtualizer.scrollToIndex(highlightedIndex, { align: 'end' });
+            }
+            // 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]);
+
+        // Циклическая навигация
+        useEffect(() => {
+            const notDisabled = (option: OptionShape) => !option.disabled;
+            const firstNonDisabled = flatOptions.findIndex(notDisabled);
+            const lastNonDisabled = lastIndexOf(flatOptions, notDisabled);
+
+            if (
+                prevHighlightedIndex <= firstNonDisabled &&
+                highlightedIndex === flatOptions.length - 1
+            ) {
+                rowVirtualizer.scrollToIndex(lastNonDisabled);
+            }
+
+            if (prevHighlightedIndex >= lastNonDisabled && highlightedIndex === 0) {
+                rowVirtualizer.scrollToIndex(0);
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [prevHighlightedIndex, highlightedIndex]);
+
+        useEffect(() => {
+            setVisibleOptionsInvalidateKey(
+                /**
+                 * react-virtual может несколько раз отрендерить список с одним элементом,
+                 * поэтому нужно еще раз пересчитать высоту, когда список ВИДИМЫХ пунктов будет отрендерен полностью
+                 * Также, высоту нужно пересчитывать при изменении ОБЩЕГО кол-ва пунктов меню
+                 */
+                rowVirtualizer.virtualItems.length > 1 ? flatOptions.length : 1,
+            );
+        }, [rowVirtualizer.virtualItems.length, flatOptions.length]);
+
+        useVisibleOptions({
+            visibleOptions,
+            invalidate: visibleOptionsInvalidateKey,
+            listRef,
+            styleTargetRef: nativeScrollbar ? parentRef : scrollbarRef,
+            open,
+        });
+
+        // Т.к. рендерится плоский список, необходимо знать индекс, когда начинается новая группа
+        const groupStartIndexes = useMemo(() => {
+            let currentIndex = 0;
+
+            return options.reduce((acc: { [key: number]: number }, option, index) => {
+                if (isGroup(option)) {
+                    acc[currentIndex] = index;
+                    currentIndex += option.options.length;
+                } else {
+                    currentIndex += 1;
+                }
+
+                return acc;
+            }, {});
+        }, [options]);
+
+        const renderList = () =>
+            rowVirtualizer.virtualItems.map((virtualRow) => {
+                const option = flatOptions[virtualRow.index];
+                const group = options[groupStartIndexes[virtualRow.index]] as GroupShape;
+
+                return (
+                    <div
+                        key={virtualRow.index}
+                        ref={virtualRow.measureRef}
+                        className={cn(styles.virtualRow, {
+                            [styles.highlighted]: highlightedIndex === virtualRow.index,
+                        })}
+                        style={{
+                            transform: `translateY(${virtualRow.start}px)`,
+                        }}
+                    >
+                        {group && <Optgroup label={group.label} />}
+                        {!isGroup(option) && (
+                            <Option {...getOptionProps(option, virtualRow.index)} />
+                        )}
+                    </div>
+                );
+            });
+
+        const contentNodeProps = {
+            className: styles.inner,
+            style: { height: `${rowVirtualizer.totalSize}px` },
+            ref: listRef,
+        };
+
+        const renderWithCustomScrollbar = () => (
+            <Scrollbar
+                className={styles.scrollable}
+                ref={scrollbarRef}
+                horizontalAutoStretch={optionsListWidth === 'content'}
+                scrollableNodeProps={{ onScroll, ref: parentRef }}
+                contentNodeProps={contentNodeProps}
+            >
+                {renderList()}
+            </Scrollbar>
+        );
+
+        const renderWithNativeScrollbar = () => {
+            if (visibleOptions) {
+                return (
+                    <div
+                        className={styles.scrollable}
+                        ref={mergeRefs([parentRef, ref])}
+                        onScroll={onScroll}
+                    >
+                        <div {...contentNodeProps}>{renderList()}</div>
+                    </div>
+                );
+            }
+
+            return <div {...contentNodeProps}>{renderList()}</div>;
+        };
+
+        if (options.length === 0 && !emptyPlaceholder) {
+            return null;
+        }
+
+        return (
+            <div
+                className={cn(styles.virtualOptionsList, styles[size], className)}
+                data-test-id={dataTestId}
+            >
+                {header && <div className={styles.virtualOptionsListHeader}>{header}</div>}
+
+                {nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar()}
+
+                {emptyPlaceholder && options.length === 0 && (
+                    <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>
+                )}
+
+                {showFooter && footer && (
+                    <div
+                        className={cn(styles.virtualOptionsListFooter, {
+                            [styles.withBorder]:
+                                visibleOptions && flatOptions.length > visibleOptions,
+                        })}
+                    >
+                        {footer}
+                    </div>
+                )}
+            </div>
+        );
+    },
+);

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

@@ -0,0 +1,76 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '../../vars.css';
+
+.virtualOptionsList {
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    position: sticky;
+}
+
+.virtualOptionsListHeader {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-light-border-secondary);
+}
+
+.virtualOptionsListFooter {
+    position: sticky;
+    bottom: 0;
+    box-sizing: border-box;
+    border-top: 1px solid transparent;
+
+    &.withBorder {
+        border-top: 1px solid var(--color-light-border-secondary);
+    }
+}
+
+.scrollable {
+    position: relative;
+    overflow: auto;
+    width: 100%;
+}
+
+.inner {
+    position: relative;
+    width: 100%;
+}
+
+.virtualRow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    &:before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        left: var(--select-option-left-padding);
+        right: var(--select-option-right-padding);
+        top: 0;
+        height: 1px;
+        background: var(--select-option-divider-background);
+        display: var(--select-option-divider-display);
+    }
+
+    &:first-child:before {
+        display: none;
+    }
+}
+
+.highlighted {
+    &:before,
+    & + .virtualRow:before {
+        display: none;
+    }
+}
+
+.emptyPlaceholder {
+    padding: var(--gap-m) var(--gap-s);
+    color: var(--select-options-list-empty-placeholder-color);
+}
+
+.l .emptyPlaceholder,
+.xl .emptyPlaceholder {
+    padding: var(--gap-xl) var(--gap-m);
+}

package/src/components/virtual-options-list/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/consts.ts

@@ -0,0 +1 @@
+export const DEFAULT_VISIBLE_OPTIONS = 5;

package/src/desktop.ts

@@ -0,0 +1 @@
+export { SelectDesktop, SelectDesktopProps } from './Component.desktop';

package/src/index.ts

@@ -0,0 +1,4 @@
+export {
+    SelectResponsive as Select,
+    SelectResponsiveProps as SelectProps,
+} from './Component.responsive';

package/src/mobile.ts

@@ -0,0 +1,5 @@
+export { SelectMobile } from './Component.mobile';
+export { SelectModalMobile } from './Component.modal.mobile';
+
+export type { SelectMobileProps } from './Component.mobile';
+export type { SelectModalMobileProps } from './Component.modal.mobile';

package/src/presets/index.ts

@@ -0,0 +1,3 @@
+export * from './useSelectWithLoading/hook';
+export * from './useLazyLoading/hook';
+export * from './useSelectWithApply/hook';