@alfalab/core-components-select 17.10.1 → 17.11.0

package/moderncssm/components/virtual-options-list/index.d.ts

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

package/moderncssm/components/virtual-options-list/index.js

@@ -0,0 +1 @@
+export { VirtualOptionsList } from './Component.js';

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

@@ -0,0 +1,79 @@
+/* */
+:root {
+
+    /* options list */
+    --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
+    --select-option-divider-display: none;
+    --select-option-divider-background: var(--color-light-neutral-400);
+
+    /* option */
+
+    --select-option-left-padding: var(--gap-12);
+    --select-option-right-padding: var(--gap-12);
+
+    /* checkmark */
+
+    /* optgroup */
+}
+.virtualOptionsList {
+    width: 100%;
+    outline: none;
+    box-sizing: border-box;
+    position: sticky;
+    justify-content: space-between;
+}
+.virtualOptionsListHeader {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-light-neutral-300);
+}
+.virtualOptionsListFooter {
+    position: sticky;
+    bottom: 0;
+    box-sizing: border-box;
+    border-top: 1px solid transparent
+}
+.virtualOptionsListFooter.withBorder {
+        border-top: 1px solid var(--color-light-neutral-300);
+    }
+.scrollable {
+    position: relative;
+    overflow: auto;
+    width: 100%;
+}
+.inner {
+    position: relative;
+    width: 100%;
+}
+.virtualRow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%
+}
+.virtualRow: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);
+    }
+.virtualRow:first-child:before {
+        display: none;
+    }
+.highlighted:before,
+    .highlighted + .virtualRow:before {
+        display: none;
+    }
+.emptyPlaceholder {
+    padding: var(--gap-16) var(--gap-12);
+    color: var(--select-options-list-empty-placeholder-color);
+    flex: 1;
+}
+.size-64 .emptyPlaceholder,
+.size-72 .emptyPlaceholder {
+    padding: var(--gap-24) var(--gap-16);
+}

package/moderncssm/consts.d.ts

@@ -0,0 +1,12 @@
+declare const DEFAULT_VISIBLE_OPTIONS = 5;
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    48: string;
+    56: string;
+    64: string;
+    72: string;
+};
+export { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP };

package/moderncssm/consts.js

@@ -0,0 +1,13 @@
+const DEFAULT_VISIBLE_OPTIONS = 5;
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+
+export { DEFAULT_VISIBLE_OPTIONS, SIZE_TO_CLASSNAME_MAP };

package/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+declare const SelectDesktop: React.ForwardRefExoticComponent<Omit<import("../typings").BaseSelectProps, "fieldProps"> & {
+    fieldProps?: import("../typings").SelectFieldProps | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { SelectDesktop };

package/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { FormControlDesktop } from '@alfalab/core-components-form-control/moderncssm/desktop';
+import { Popover } from '@alfalab/core-components-popover/moderncssm';
+import { Arrow } from '../components/arrow/Component.js';
+import { BaseSelect } from '../components/base-select/Component.js';
+import { Field } from '../components/field/Component.js';
+import { Optgroup } from '../components/optgroup/Component.js';
+import { Option } from '../components/option/Component.js';
+import { OptionsList } from '../components/options-list/Component.js';
+import { Search } from '../components/search/Component.js';
+
+const SelectDesktop = forwardRef(({ Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, OptionsList: OptionsList$1 = OptionsList, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, fieldProps = {}, ...restProps }, ref) => (React.createElement(BaseSelect, { ref: ref, view: 'desktop', Option: Option$1, Field: Field$1, fieldProps: {
+        FormControlComponent: FormControlDesktop,
+        ...fieldProps,
+    }, Search: Search$1, Optgroup: Optgroup$1, OptionsList: OptionsList$1, Arrow: Arrow$1, Popover: Popover, ...restProps })));
+
+export { SelectDesktop };

package/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectDesktop } from "./Component.desktop";
+export type { SelectDesktopProps } from "../typings";

package/moderncssm/desktop/index.js

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

package/moderncssm/hook-8c561f14.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./typings";
+type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+    /**
+     * Включает отображение поиска
+     */
+    showSearch?: BaseSelectProps['showSearch'];
+    /**
+     *  Настройки поиска
+     */
+    searchProps?: BaseSelectProps['searchProps'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
+};
+declare const SELECT_ALL_KEY = "select_all";
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, showSearch, searchProps, }: UseSelectWithApplyProps): {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings").OptionsListProps & {
+        showClear?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        /**
+         * Обработчик выбора
+         */
+        selectedDraft?: OptionShape[] | undefined;
+        OptionsList?: import("react").FC<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/footer/Component").FooterProps> | undefined;
+        Header?: import("react").FC<import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps> | undefined;
+        headerProps?: import("./presets/useSelectWithApply/options-list-with-apply/header/Component").HeaderProps | undefined;
+        showHeaderWithSelectAll?: boolean | undefined;
+        setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    optionsListProps: {
+        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        showClear: boolean;
+        onClear: () => void;
+        onApply: () => void;
+        onClose: () => void;
+        selectedDraft: OptionShape[];
+        setSelectedDraft: import("react").Dispatch<import("react").SetStateAction<OptionShape[]>>;
+        showHeaderWithSelectAll: boolean;
+        headerProps: {
+            indeterminate: boolean;
+            checked: boolean;
+            onChange: () => void;
+        };
+    };
+    allowUnselect: boolean;
+    multiple: boolean;
+    options: (OptionShape | import("./typings").GroupShape | {
+        key: string;
+        content: string;
+    })[];
+    onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
+    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+    showSearch: boolean;
+    searchProps: {
+        value: string;
+        onChange: ((value: string) => void) | undefined;
+        componentProps?: import("./typings").SearchProps | undefined;
+        accessor?: ((option: OptionShape) => string) | undefined;
+        filterFn?: ((optionText: string, search: string) => boolean) | undefined;
+        filterGroup?: boolean | undefined;
+        groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
+    } | undefined;
+    originalProps: {
+        options: (OptionShape | import("./typings").GroupShape)[];
+        selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+        onChange: (payload: import("./typings").BaseSelectChangePayload) => void;
+        OptionsList: import("react").ComponentType<import("./typings").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        optionsListProps: unknown;
+        showClear: boolean;
+        showSelectAll: boolean;
+        showHeaderWithSelectAll: boolean;
+        showSearch: boolean;
+        searchProps: {
+            componentProps?: import("./typings").SearchProps | undefined;
+            accessor?: ((option: OptionShape) => string) | undefined;
+            filterFn?: ((optionText: string, search: string) => boolean) | undefined;
+            value?: string | undefined;
+            onChange?: ((value: string) => void) | undefined;
+            filterGroup?: boolean | undefined;
+            groupAccessor?: ((group: import("./typings").GroupShape) => string | undefined) | undefined;
+        };
+    };
+};
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/moderncssm/hook-a8bc7fe8.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import React from 'react';
+import { OptionShape, OptionsListProps } from "./typings";
+import { FooterProps } from "./presets/useSelectWithApply/options-list-with-apply/footer/Component";
+import { HeaderProps } from "./presets/useSelectWithApply/options-list-with-apply/header/Component";
+declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
+    showClear?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    selectedDraft?: OptionShape[] | undefined;
+    OptionsList?: React.FC<OptionsListProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    Footer?: React.FC<FooterProps> | undefined;
+    Header?: React.FC<HeaderProps> | undefined;
+    headerProps?: HeaderProps | undefined;
+    showHeaderWithSelectAll?: boolean | undefined;
+    setSelectedDraft?: ((selectedDraft: OptionShape[]) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { OptionsListWithApply };

package/moderncssm/hook-a8bc7fe8.js

@@ -0,0 +1,169 @@
+import React, { forwardRef, useCallback, useEffect, useState, useMemo, useRef } from 'react';
+import deepEqual from 'deep-equal';
+import { defaultAccessor, defaultFilterFn, defaultGroupAccessor, processOptions, isGroup } from './utils.js';
+import { OptionsList } from './components/options-list/Component.js';
+import { DEFAULT_VISIBLE_OPTIONS } from './consts.js';
+import { Footer } from './presets/useSelectWithApply/options-list-with-apply/footer/Component.js';
+import { Header } from './presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+
+const OptionsListWithApply = forwardRef(({ toggleMenu, getOptionProps: defaultGetOptionProps, showClear = true, showHeaderWithSelectAll, selectedDraft = [], flatOptions = [], OptionsList: OptionsList$1 = OptionsList, onApply = () => null, onClear = () => null, onClose = () => null, visibleOptions = DEFAULT_VISIBLE_OPTIONS, Footer: Footer$1 = Footer, Header: Header$1 = Header, header, headerProps, setSelectedDraft, ...restProps }, ref) => {
+    const getOptionProps = useCallback((option, index) => {
+        const optionProps = defaultGetOptionProps(option, index);
+        const selected = option.key === SELECT_ALL_KEY
+            ? selectedDraft.length === flatOptions.length - 1
+            : selectedDraft.some(({ key }) => key === option.key);
+        return {
+            ...optionProps,
+            selected,
+        };
+    }, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
+    const handleApply = useCallback(() => {
+        onApply();
+        toggleMenu();
+    }, [onApply, toggleMenu]);
+    const handleClear = useCallback(() => {
+        onClear();
+        toggleMenu();
+    }, [onClear, toggleMenu]);
+    const handleSelectedItems = useCallback((items) => {
+        setSelectedDraft?.(items);
+    }, [setSelectedDraft]);
+    useEffect(() => {
+        const activeElement = document.activeElement;
+        return () => {
+            onClose();
+            if (activeElement) {
+                activeElement.focus();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const renderHeader = () => {
+        if (!showHeaderWithSelectAll && !header)
+            return undefined;
+        return (React.createElement(React.Fragment, null,
+            header,
+            showHeaderWithSelectAll && flatOptions.length > 0 && (React.createElement(Header$1, { ...headerProps }))));
+    };
+    return (React.createElement(OptionsList$1, { ...restProps, ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, onApply: handleApply, onClear: handleClear, header: renderHeader(), selectedItems: selectedDraft, setSelectedItems: handleSelectedItems, footer: React.createElement(Footer$1, { handleApply: handleApply, handleClear: handleClear, showClear: showClear, selectedDraft: selectedDraft, dataTestId: restProps?.dataTestId }) }));
+});
+
+const SELECT_ALL_KEY = 'select_all';
+const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
+function useSelectWithApply({ options, selected, onChange = () => null, OptionsList, optionsListProps = {}, showClear = true, showSelectAll = false, showHeaderWithSelectAll = false, showSearch = false, searchProps = {}, }) {
+    const [searchState, setSearchState] = useState('');
+    const [search, setSearch] = typeof searchProps?.value === 'string'
+        ? [searchProps.value, searchProps.onChange]
+        : [searchState, setSearchState];
+    const accessor = searchProps.accessor || defaultAccessor;
+    const filterFn = searchProps.filterFn || defaultFilterFn;
+    const groupAccessor = searchProps.groupAccessor ?? defaultGroupAccessor;
+    const filterGroup = searchProps.filterGroup ?? false;
+    const { flatOptions, filteredOptions, selectedOptions } = useMemo(() => processOptions(options, selected, showSearch
+        ? (option) => {
+            if (isGroup(option)) {
+                const groupAccessorValue = groupAccessor(option);
+                return (typeof groupAccessorValue === 'string' &&
+                    filterFn(groupAccessorValue, search));
+            }
+            return filterFn(accessor(option), search);
+        }
+        : undefined, filterGroup), [options, selected, showSearch, filterGroup, filterFn, accessor, search, groupAccessor]);
+    const [selectedDraft, setSelectedDraft] = useState(selectedOptions);
+    const selectedOptionsRef = useRef(selectedOptions);
+    const handleApply = () => {
+        onChange({
+            selected: selectedDraft[0],
+            selectedMultiple: selectedDraft,
+            initiator: null,
+        });
+    };
+    const handleClear = () => {
+        setSelectedDraft([]);
+        onChange({
+            selected: null,
+            selectedMultiple: [],
+            initiator: null,
+        });
+    };
+    const handleToggleAll = () => {
+        setSelectedDraft(flatOptions.length === selectedDraft.length ? [] : flatOptions);
+    };
+    const handleChange = ({ initiator, ...restArgs }) => {
+        if (!initiator) {
+            onChange({
+                initiator: null,
+                ...restArgs,
+            });
+            return;
+        }
+        const initiatorSelected = selectedDraft.includes(initiator) ||
+            (initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
+        if (initiator.key === SELECT_ALL_KEY) {
+            setSelectedDraft(initiatorSelected ? [] : flatOptions);
+        }
+        else {
+            setSelectedDraft(initiatorSelected
+                ? selectedDraft.filter((o) => o !== initiator)
+                : selectedDraft.concat(initiator));
+        }
+    };
+    const handleClose = () => setSelectedDraft(selectedOptionsRef.current);
+    useEffect(() => {
+        // устанавливать selectedDraft если selectedOptions изменились
+        if (!deepEqual(selectedOptionsRef.current, selectedOptions)) {
+            setSelectedDraft(selectedOptions);
+        }
+        selectedOptionsRef.current = selectedOptions;
+    }, [selectedOptions]);
+    const memoizedOptions = useMemo(() => filteredOptions.length && showSelectAll
+        ? [selectAllOption, ...filteredOptions]
+        : filteredOptions, [filteredOptions, showSelectAll]);
+    return {
+        OptionsList: OptionsListWithApply,
+        optionsListProps: {
+            ...optionsListProps,
+            OptionsList,
+            showClear,
+            onClear: handleClear,
+            onApply: handleApply,
+            onClose: handleClose,
+            selectedDraft,
+            setSelectedDraft,
+            showHeaderWithSelectAll,
+            headerProps: {
+                indeterminate: !!selectedDraft.length && selectedDraft.length < flatOptions.length,
+                checked: selectedDraft.length === flatOptions.length,
+                onChange: handleToggleAll,
+            },
+        },
+        allowUnselect: true,
+        multiple: true,
+        options: memoizedOptions,
+        onChange: handleChange,
+        selected,
+        showSearch,
+        searchProps: showSearch
+            ? {
+                ...searchProps,
+                value: search,
+                onChange: setSearch,
+            }
+            : undefined,
+        /* Костыль для респонсив селекта. В мобильную версию хук уже зашит, и это единственный передать в мобилку оригинальные пропсы */
+        originalProps: {
+            options,
+            selected,
+            onChange,
+            OptionsList,
+            optionsListProps,
+            showClear,
+            showSelectAll,
+            showHeaderWithSelectAll,
+            showSearch,
+            searchProps,
+        },
+    };
+}
+
+export { OptionsListWithApply as O, SELECT_ALL_KEY as S, useSelectWithApply as u };

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectResponsive as Select } from "./Component.responsive";
+export type { SelectProps } from "./typings";

package/moderncssm/index.js

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { SelectMobileProps } from "../typings";
+declare const SelectMobile: React.ForwardRefExoticComponent<SelectMobileProps & React.RefAttributes<unknown>>;
+export { SelectMobile };

package/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,54 @@
+import React, { forwardRef } from 'react';
+import { BottomSheet } from '@alfalab/core-components-bottom-sheet/moderncssm';
+import { FormControlMobile } from '@alfalab/core-components-form-control/moderncssm/mobile';
+import { ModalMobile } from '@alfalab/core-components-modal/moderncssm/mobile';
+import { Arrow } from '../components/arrow/Component.js';
+import { BaseSelect } from '../components/base-select/Component.js';
+import { Field } from '../components/field/Component.js';
+import { Footer } from '../components/footer/Component.js';
+import { Optgroup } from '../components/optgroup/Component.js';
+import { Option } from '../components/option/Component.js';
+import { OptionsList } from '../components/options-list/Component.js';
+import { Search } from '../components/search/Component.js';
+import { VirtualOptionsList } from '../components/virtual-options-list/Component.js';
+import { u as useSelectWithApply } from '../hook-a8bc7fe8.js';
+import { Header } from '../presets/useSelectWithApply/options-list-with-apply/header/Component.js';
+
+const VIRTUAL_OPTIONS_LIST_THRESHOLD = 30;
+const SelectMobile = forwardRef(({ autocomplete = false, multiple = false, allowUnselect = false, disabled = false, closeOnSelect = !multiple, circularNavigation = false, defaultOpen = false, open: openProp, size = 56, optionsSize = 56, fieldProps = {}, optionProps = {}, optionsListProps = {}, Arrow: Arrow$1 = Arrow, Field: Field$1 = Field, Optgroup: Optgroup$1 = Optgroup, Option: Option$1 = Option, Search: Search$1 = Search, selected, options, OptionsList: OptionsList$1 = options.length > VIRTUAL_OPTIONS_LIST_THRESHOLD
+    ? VirtualOptionsList
+    : OptionsList, onChange, showClear = true, showSelectAll, showHeaderWithSelectAll, useWithApplyHook = multiple, showSearch, searchProps, ...restProps }, ref) => {
+    const applyProps = useSelectWithApply({
+        optionsListProps: {
+            ...optionsListProps,
+            Footer,
+        },
+        OptionsList: OptionsList$1,
+        showSearch,
+        searchProps,
+        selected,
+        options,
+        onChange,
+        showClear,
+        showSelectAll,
+    });
+    const bottomAddons = useWithApplyHook && showHeaderWithSelectAll && (React.createElement(Header, { ...applyProps.optionsListProps.headerProps, mobile: true }));
+    return (React.createElement(BaseSelect, { ref: ref, view: 'mobile', autocomplete: autocomplete, multiple: multiple, allowUnselect: allowUnselect, disabled: disabled, closeOnSelect: closeOnSelect, circularNavigation: circularNavigation, defaultOpen: defaultOpen, open: openProp, size: size, optionsSize: optionsSize, fieldProps: {
+            FormControlComponent: FormControlMobile,
+            ...fieldProps,
+        }, optionProps: optionProps, Arrow: Arrow$1, Field: Field$1, Optgroup: Optgroup$1, Option: Option$1, Search: Search$1, options: options, selected: selected, onChange: onChange, OptionsList: OptionsList$1, showSearch: showSearch, searchProps: searchProps, BottomSheet: BottomSheet, ModalMobile: ModalMobile, optionsListProps: optionsListProps, ...restProps, ...(restProps.isBottomSheet === false
+            ? {
+                modalHeaderProps: {
+                    bottomAddons,
+                    ...restProps.modalHeaderProps,
+                },
+            }
+            : {
+                bottomSheetProps: {
+                    bottomAddons,
+                    ...restProps.bottomSheetProps,
+                },
+            }), ...(useWithApplyHook && applyProps) }));
+});
+
+export { SelectMobile };

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 };