@alfalab/core-components-select 17.10.1 → 17.12.0

package/moderncssm/mobile/Component.modal.mobile.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import React from 'react';
+declare const SelectModalMobile: React.ForwardRefExoticComponent<Omit<import("../typings").BaseSelectProps, "Checkmark"> & import("../typings").AdditionalMobileProps & import("../typings").ModalSelectMobileProps & React.RefAttributes<unknown>>;
+export { SelectModalMobile };

package/moderncssm/mobile/Component.modal.mobile.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+import { SelectMobile } from './Component.mobile.js';
+
+const SelectModalMobile = forwardRef((props, ref) => (React.createElement(SelectMobile, { ...props, isBottomSheet: false, ref: ref })));
+
+export { SelectModalMobile };

package/moderncssm/mobile/index.d.ts

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

package/moderncssm/mobile/index.js

@@ -0,0 +1,2 @@
+export { SelectMobile } from './Component.mobile.js';
+export { SelectModalMobile } from './Component.modal.mobile.js';

package/moderncssm/presets/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useSelectWithLoading/hook";
+export * from "./useLazyLoading/hook";
+export * from "../hook-8c561f14";

package/moderncssm/presets/index.js

@@ -0,0 +1,3 @@
+export { useSelectWithLoading } from './useSelectWithLoading/hook.js';
+export { useLazyLoading } from './useLazyLoading/hook.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-a8bc7fe8.js';

package/moderncssm/presets/useLazyLoading/hook.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionProps, OptionShape } from "../../typings";
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+type useLazyLoadingProps = {
+    /** Количество элементов на "странице" */
+    limit?: number;
+    /** Начальный номер "страницы" */
+    initialOffset?: number;
+    /** Скелетон загружаемых элементов */
+    skeleton?: React.ReactNode;
+    /** Компонент пункта меню */
+    Option?: React.FC<OptionProps>;
+    /**
+     * Функция-загрузчик опций.
+     * @param offset - текущая страница
+     * @param limit - количество элементов на странице
+     * @param queryString - строчные данные, пробрасываемые для поиска из кастомного инпута, расположенного в заголовке OptionsList
+     * @returns Promise<{
+     *  options - список опций следующей "страницы". Они аппендятся к предыдущим
+     *  hasMore - указывает, есть ли еще незагруженные элементы (в случае false перестает загружать "следующую страницу")
+     * }>
+     */
+    optionsFetcher(offset: number, limit: number, queryString?: string): Promise<OptionsFetcherResponse>;
+};
+declare function useLazyLoading({ limit, initialOffset, optionsFetcher, skeleton, Option, }: useLazyLoadingProps): {
+    optionsProps: {
+        Option: (props: OptionProps) => React.JSX.Element;
+        options: OptionShape[];
+        optionsListProps: {
+            ref: React.RefObject<HTMLDivElement>;
+            inputProps: {
+                onChange: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+                    value: string;
+                }) => void;
+                value: string;
+            };
+        };
+        onOpen: (payload: {
+            open?: boolean;
+        }) => void;
+    };
+    reset: () => void;
+};
+export { useLazyLoading };

package/moderncssm/presets/useLazyLoading/hook.js

@@ -0,0 +1,215 @@
+import React, { useReducer, useRef, useCallback, useEffect, useMemo } from 'react';
+import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
+import { Option } from '../../components/option/Component.js';
+import 'intersection-observer';
+
+const DEBOUNCE_TIMEOUT = 300;
+const actions = {
+    fetchOptionsStart() {
+        return { type: 'FETCH_OPTIONS_START' };
+    },
+    fetchOptionsBreak() {
+        return { type: 'FETCH_OPTIONS_BREAK' };
+    },
+    fetchOptionsSuccess(payload) {
+        return { type: 'FETCH_OPTIONS_SUCCESS', payload };
+    },
+    setIsOpened(opened) {
+        return { type: 'SET_IS_OPENED', payload: opened };
+    },
+    setQueryString(qs) {
+        return { type: 'SET_QUERY_STRING', payload: qs };
+    },
+    reset() {
+        return { type: 'RESET' };
+    },
+};
+const skeletonStyle = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    height: '16px',
+    width: '50%',
+};
+function useLazyLoading({ limit = 10, initialOffset = 0, optionsFetcher, skeleton = React.createElement(Skeleton, { style: skeletonStyle, visible: true }), Option: Option$1 = Option, }) {
+    const initialOptions = [];
+    const initialLoading = false;
+    const lazyLoadingInitialState = {
+        opened: false,
+        offset: initialOffset,
+        options: initialOptions,
+        loading: initialLoading,
+        allOptionsLoaded: false,
+        queryString: '',
+    };
+    const lazyLoadingReducer = (state, action) => {
+        switch (action.type) {
+            case 'FETCH_OPTIONS_START': {
+                return {
+                    ...state,
+                    loading: true,
+                };
+            }
+            case 'FETCH_OPTIONS_BREAK': {
+                return {
+                    ...state,
+                    loading: false,
+                };
+            }
+            case 'FETCH_OPTIONS_SUCCESS': {
+                return {
+                    ...state,
+                    options: [...state.options, ...action.payload.options],
+                    offset: state.offset + (action.payload.options.length ? 1 : 0),
+                    allOptionsLoaded: !action.payload.hasMore,
+                    loading: false,
+                };
+            }
+            case 'SET_IS_OPENED': {
+                return {
+                    ...state,
+                    opened: action.payload,
+                };
+            }
+            case 'SET_QUERY_STRING': {
+                return {
+                    // Изменение queryString подразумевает сброс текущих опций.
+                    ...lazyLoadingInitialState,
+                    opened: state.opened,
+                    loading: true,
+                    queryString: action.payload,
+                };
+            }
+            case 'RESET': {
+                return {
+                    ...lazyLoadingInitialState,
+                };
+            }
+            default: {
+                return state;
+            }
+        }
+    };
+    const [{ opened, offset, options, loading, allOptionsLoaded, queryString }, dispatch] = useReducer(lazyLoadingReducer, lazyLoadingInitialState);
+    const abortFetchingOptionsRef = useRef();
+    const fetchNextOffsetOptions = useCallback(() => {
+        dispatch(actions.fetchOptionsStart());
+        new Promise((resolve, reject) => {
+            // eslint-disable-next-line no-unused-expressions
+            abortFetchingOptionsRef.current?.();
+            abortFetchingOptionsRef.current = reject;
+            optionsFetcher(offset, limit, queryString).then((res) => {
+                resolve(res);
+            });
+        })
+            .then((res) => {
+            dispatch(actions.fetchOptionsSuccess(res));
+            abortFetchingOptionsRef.current = undefined;
+        })
+            .catch(
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        () => { });
+    }, [optionsFetcher, offset, limit, queryString]);
+    const listRef = useRef(null);
+    useEffect(() => {
+        let observer;
+        if (opened && !loading && !allOptionsLoaded) {
+            observer = new IntersectionObserver(([entry]) => {
+                if (entry.isIntersecting) {
+                    if (observer) {
+                        observer.disconnect();
+                    }
+                    fetchNextOffsetOptions();
+                }
+            }, {
+                root: listRef.current,
+            });
+            /*
+             * Обсервим пересечение последней опции с контейнером.
+             * Таким образом, загрузка следующей "страницы" начнется когда юзер доскроллит список
+             * до верхнего края последней опции, что обеспечивает плавность
+             */
+            const optionList = listRef.current?.querySelectorAll('[role="option"]');
+            const lastOption = optionList?.[optionList.length - 1];
+            if (lastOption) {
+                observer.observe(lastOption);
+            }
+        }
+        return () => {
+            if (observer) {
+                observer.disconnect();
+            }
+        };
+    }, [offset, fetchNextOffsetOptions, opened, allOptionsLoaded, initialOffset, loading]);
+    const onOpen = useCallback((payload) => {
+        if (payload.open) {
+            if (options.length === initialOptions.length) {
+                fetchNextOffsetOptions();
+            }
+        }
+        else {
+            // eslint-disable-next-line no-unused-expressions
+            abortFetchingOptionsRef.current?.();
+            dispatch(actions.fetchOptionsBreak());
+        }
+        dispatch(actions.setIsOpened(payload.open ?? false));
+    }, [initialOptions.length, fetchNextOffsetOptions, options.length]);
+    const fetchNextOptionsRef = useRef();
+    const fetchNextOptionsTimerRef = useRef();
+    useEffect(() => {
+        fetchNextOptionsRef.current = fetchNextOffsetOptions;
+    }, [fetchNextOffsetOptions]);
+    const onQueryStringChange = useCallback((_, payload) => {
+        dispatch(actions.setQueryString(payload.value));
+        /* eslint-disable no-unused-expressions */
+        /*
+         * Если во время загрузки опций юзер ввел новый текст в инпут,
+         * нужно прервать текущую загрузку, чтобы неактуальные опции не попали в выдачу
+         */
+        abortFetchingOptionsRef.current?.();
+        listRef.current?.scrollTo({ top: 0 });
+        /* Дебаунсим ввод текста, чтобы не отправлять запрос к новым опциям на каждый чих */
+        if (fetchNextOptionsTimerRef.current) {
+            clearTimeout(fetchNextOptionsTimerRef.current);
+        }
+        fetchNextOptionsTimerRef.current = setTimeout(() => {
+            /*
+             * После дебаунса необходимо вызвать функцию-загрузчик,
+             * содержащую актуальные на данный момент данные оффсета и queryString.
+             * Поэтому мы не можем обратиться напрямую к функции fetchNextOptions,
+             * так как она будет замкнута на старые значения, актуальные на момент вызова хэндлера,
+             * так что берем ее из обновляемого рефа
+             */
+            fetchNextOptionsRef.current?.();
+        }, DEBOUNCE_TIMEOUT);
+        /* eslint-enable */
+    }, []);
+    const renderOption = (props) => (React.createElement(Option$1, { ...props, highlighted: loading ? false : props.highlighted }));
+    const skeletonOptions = useMemo(() => Array(loading ? limit : 0)
+        .fill(0)
+        .map((_, key) => ({
+        key: `loading-${key}`,
+        disabled: true,
+        content: skeleton,
+    })), [loading, limit, skeleton]);
+    const reset = useCallback(() => {
+        dispatch(actions.reset());
+    }, []);
+    return {
+        optionsProps: {
+            Option: renderOption,
+            options: [...options, ...skeletonOptions],
+            optionsListProps: {
+                ref: listRef,
+                inputProps: {
+                    onChange: onQueryStringChange,
+                    value: queryString,
+                },
+            },
+            onOpen,
+        },
+        reset,
+    };
+}
+
+export { useLazyLoading };

package/moderncssm/presets/useSelectWithApply/hook.js

@@ -0,0 +1,4 @@
+import 'react';
+import 'deep-equal';
+import '../../utils.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../../hook-a8bc7fe8.js';

package/moderncssm/presets/useSelectWithApply/options-list-with-apply/Component.js

@@ -0,0 +1,6 @@
+import 'react';
+import '../../../components/options-list/Component.js';
+import '../../../consts.js';
+export { O as OptionsListWithApply } from '../../../hook-a8bc7fe8.js';
+import './footer/Component.js';
+import './header/Component.js';

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionShape } from "../../../../typings";
+type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+    selectedDraft?: OptionShape[];
+    dataTestId?: string;
+};
+declare const Footer: ({ handleApply, handleClear, showClear, selectedDraft, dataTestId, }: FooterProps) => React.JSX.Element;
+export { FooterProps, Footer };

package/moderncssm/presets/useSelectWithApply/options-list-with-apply/footer/Component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ButtonDesktop } from '@alfalab/core-components-button/moderncssm/desktop';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import styles from './index.module.css';
+
+const Footer = ({ handleApply, handleClear, showClear, selectedDraft = [], dataTestId, }) => (React.createElement("div", { 
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    tabIndex: 0, className: styles.footer },
+    React.createElement(ButtonDesktop, { size: 32, view: 'primary', onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'apply'), className: styles.button }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
+    showClear && selectedDraft.length > 0 && (React.createElement(ButtonDesktop, { size: 32, view: 'secondary', onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'clear'), className: styles.button }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))));
+
+export { Footer };

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

@@ -0,0 +1,12 @@
+/* */
+:root {
+    --select-option-list-footer-button-gap: var(--gap-8);
+}
+.footer {
+    background-color: var(--color-light-base-bg-primary);
+    padding: var(--gap-12);
+    outline: none
+}
+.footer > .button + .button {
+        margin-left: var(--select-option-list-footer-button-gap);
+    }

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import React from 'react';
+import { CheckboxProps } from "@alfalab/core-components-checkbox";
+type HeaderProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: CheckboxProps['onChange'];
+    mobile?: boolean;
+};
+declare const Header: React.FC<HeaderProps>;
+export { HeaderProps, Header };

package/moderncssm/presets/useSelectWithApply/options-list-with-apply/header/Component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import cn from 'classnames';
+import { Checkbox } from '@alfalab/core-components-checkbox/moderncssm';
+import styles from './index.module.css';
+
+const Header = ({ onChange, checked, indeterminate, mobile }) => (React.createElement("div", { className: cn({ [styles.desktop]: !mobile, [styles.mobile]: mobile }) },
+    React.createElement(Checkbox, { block: true, indeterminate: indeterminate, size: 'm', onChange: onChange, checked: checked, label: '\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435' })));
+
+export { Header };

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

@@ -0,0 +1,9 @@
+/* */
+
+.desktop {
+    padding: var(--gap-12);
+}
+
+.mobile {
+    padding: var(--gap-12) var(--gap-8);
+}

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

@@ -0,0 +1 @@
+export * from "../../../hook-a8bc7fe8";

package/moderncssm/presets/useSelectWithApply/options-list-with-apply/index.js

@@ -0,0 +1 @@
+export { O as OptionsListWithApply } from '../../../hook-a8bc7fe8.js';

package/moderncssm/presets/useSelectWithLoading/hook.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseSelectProps, OptionProps, OptionShape } from "../../typings";
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps['visibleOptions'];
+    Option?: React.FC<OptionProps>;
+};
+declare function useSelectWithLoading({ loading, visibleOptions, Option, }: useSelectWithLoadingProps): {
+    Option: (props: OptionProps) => React.JSX.Element;
+    options: OptionShape[];
+} | null;
+export { useSelectWithLoading };

package/moderncssm/presets/useSelectWithLoading/hook.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Skeleton } from '@alfalab/core-components-skeleton/moderncssm';
+import { Option } from '../../components/option/Component.js';
+import styles from './index.module.css';
+
+function useSelectWithLoading({ loading = false, visibleOptions = 6, Option: Option$1 = Option, }) {
+    const renderOption = (props) => (React.createElement(Option$1, { ...props, Checkmark: null, highlighted: loading ? false : props.highlighted }));
+    const options = Array(visibleOptions)
+        .fill(0)
+        .map((_, key) => ({
+        key: `loading-${key}`,
+        disabled: true,
+        content: React.createElement(Skeleton, { className: styles.skeleton, visible: true }),
+    }));
+    if (!loading)
+        return null;
+    return {
+        Option: renderOption,
+        options,
+    };
+}
+
+export { useSelectWithLoading };

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

@@ -0,0 +1,7 @@
+.skeleton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 16px;
+    width: 50%;
+}

package/moderncssm/shared/index.d.ts

@@ -0,0 +1,13 @@
+export * from "../presets/index";
+export * from "../typings";
+export * from "../utils";
+export * from "../components/option/index";
+export * from "../components/base-option/index";
+export * from "../components/options-list/index";
+export * from "../components/virtual-options-list/index";
+export * from "../components/field/index";
+export * from "../components/arrow/index";
+export * from "../components/base-select/index";
+export * from "../components/optgroup/index";
+export * from "../components/footer/index";
+export * from "../components/search/index";

package/moderncssm/shared/index.js

@@ -0,0 +1,14 @@
+export { useSelectWithLoading } from '../presets/useSelectWithLoading/hook.js';
+export { useLazyLoading } from '../presets/useLazyLoading/hook.js';
+export { S as SELECT_ALL_KEY, u as useSelectWithApply } from '../hook-a8bc7fe8.js';
+export { defaultAccessor, defaultFilterFn, defaultGroupAccessor, getSelectTestIds, isGroup, isOptionShape, joinOptions, lastIndexOf, processOptions, usePrevious, useVisibleOptions } from '../utils.js';
+export { Option } from '../components/option/Component.js';
+export { BaseOption } from '../components/base-option/Component.js';
+export { OptionsList } from '../components/options-list/Component.js';
+export { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
+export { Field } from '../components/field/Component.js';
+export { Arrow } from '../components/arrow/Component.js';
+export { BaseSelect } from '../components/base-select/Component.js';
+export { Optgroup } from '../components/optgroup/Component.js';
+export { Footer } from '../components/footer/Component.js';
+export { Search } from '../components/search/Component.js';