@alfalab/core-components-select 17.20.13 → 17.20.14-snapshot-1393ffa

package/src/components/base-select/components/list-mobile/list-modal-mobile.tsx

@@ -2,9 +2,10 @@ import React, { FC, ReactNode, RefObject } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { OptionShape } from '@alfalab/core-components-select/typings';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { OptionShape } from '../../../../typings';
+
 import { ListModalMobileRestProps } from './types/types';
 
 import mobileStyles from '../../mobile.module.css';

package/src/components/base-select/components/list-mobile/types/types.d.ts

@@ -0,0 +1,3 @@
+import { getListBottomSheetMobileProps, getListModalMobileProps } from '../helpers';
+export declare type ListBottomSheetMobileRestProps = ReturnType<typeof getListBottomSheetMobileProps>;
+export declare type ListModalMobileRestProps = ReturnType<typeof getListModalMobileProps>;

package/src/components/base-select/index.d.ts

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

package/src/components/base-select/types/component-types.d.ts

@@ -0,0 +1,21 @@
+import React, { FC, ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { BottomSheetProps } from '@alfalab/core-components-bottom-sheet';
+import type { ModalContentProps, ModalFooterProps, ModalHeaderProps } from '@alfalab/core-components-modal/shared';
+import type { ModalMobileProps } from '@alfalab/core-components-modal/typings';
+import type { PopoverProps } from '@alfalab/core-components-popover';
+import type { AdditionalMobileProps, BaseSelectProps, BottomSheetSelectMobileProps, ModalSelectMobileProps } from '../../../typings';
+declare type PopoverType = ForwardRefExoticComponent<PopoverProps & RefAttributes<HTMLDivElement>>;
+declare type BottomSheetType = React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+declare type ModalMobileType = ForwardRefExoticComponent<ModalMobileProps & RefAttributes<HTMLDivElement>> & {
+    Header: FC<ModalHeaderProps>;
+    Footer: FC<ModalFooterProps>;
+    Content: FC<ModalContentProps>;
+};
+export declare type ComponentProps = BaseSelectProps & AdditionalMobileProps & BottomSheetSelectMobileProps & ModalSelectMobileProps & {
+    isBottomSheet?: boolean;
+    view: 'desktop' | 'mobile';
+    Popover?: PopoverType;
+    BottomSheet?: BottomSheetType;
+    ModalMobile?: ModalMobileType;
+};
+export {};

package/src/components/base-select/types/component-types.ts

@@ -8,12 +8,13 @@ import type {
 } from '@alfalab/core-components-modal/shared';
 import type { ModalMobileProps } from '@alfalab/core-components-modal/typings';
 import type { PopoverProps } from '@alfalab/core-components-popover';
+
 import type {
     AdditionalMobileProps,
     BaseSelectProps,
     BottomSheetSelectMobileProps,
     ModalSelectMobileProps,
-} from '@alfalab/core-components-select/typings';
+} from '../../../typings';
 
 type PopoverType = ForwardRefExoticComponent<PopoverProps & RefAttributes<HTMLDivElement>>;
 type BottomSheetType = React.ForwardRefExoticComponent<

package/src/components/checkmark/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckmarkProps } from '../../typings';
+export declare const Checkmark: ({ selected, disabled, className, multiple, position, }: CheckmarkProps) => React.JSX.Element;

package/src/components/checkmark/index.d.ts

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

package/src/components/checkmark-mobile/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckmarkProps } from '../../typings';
+export declare const Checkmark: ({ selected, className }: CheckmarkProps) => React.JSX.Element;

package/src/components/checkmark-mobile/index.d.ts

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

package/src/components/clear-button/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ClearButtonProps } from '../../typings';
+export declare const ClearButton: ({ disabled, onClick, dataTestId, size }: ClearButtonProps) => React.JSX.Element;

package/src/components/clear-button/index.d.ts

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

package/src/components/field/Component.d.ts

@@ -0,0 +1,11 @@
+import React, { ElementType } from 'react';
+import type { FormControlProps } from '@alfalab/core-components-form-control';
+import { FieldProps as BaseFieldProps } from '../../typings';
+declare type FieldProps = {
+    /**
+     * Компонент FormControl
+     */
+    FormControlComponent?: ElementType;
+};
+export declare const Field: ({ size, open, multiple, error, hint, disabled, label, labelView, placeholder, selectedMultiple, selected, rightAddons, valueRenderer, setSelectedItems, toggleMenu, Arrow, innerProps, dataTestId, fieldClassName, FormControlComponent, clear, onClear, ...restProps }: BaseFieldProps & FormControlProps & FieldProps) => React.JSX.Element;
+export {};

package/src/components/field/index.d.ts

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

package/src/components/footer/Component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type FooterProps = {
+    handleClear?: () => void;
+    handleApply?: () => void;
+    showClear?: boolean;
+    clearText?: string;
+    applyText?: string;
+    dataTestId?: string;
+};
+export declare const Footer: ({ handleApply, handleClear, showClear, clearText, applyText, dataTestId, }: FooterProps) => React.JSX.Element;

package/src/components/footer/index.d.ts

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

package/src/components/index.d.ts

@@ -0,0 +1,9 @@
+export * from './arrow';
+export * from './base-select';
+export * from './field';
+export * from './optgroup';
+export * from './option';
+export * from './options-list';
+export * from './virtual-options-list';
+export * from './base-option';
+export * from './search';

package/src/components/native-select/Component.d.ts

@@ -0,0 +1,22 @@
+import React, { SelectHTMLAttributes } from 'react';
+import { GroupShape, OptionShape } from '../../typings';
+export declare type NativeSelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
+    /**
+     * Список вариантов выбора
+     */
+    options: Array<OptionShape | GroupShape>;
+    /**
+     * Значение селекта
+     */
+    value: string | string[];
+};
+export declare const NativeSelect: React.ForwardRefExoticComponent<React.SelectHTMLAttributes<HTMLSelectElement> & {
+    /**
+     * Список вариантов выбора
+     */
+    options: Array<OptionShape | GroupShape>;
+    /**
+     * Значение селекта
+     */
+    value: string | string[];
+} & React.RefAttributes<HTMLSelectElement>>;

package/src/components/native-select/index.d.ts

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

package/src/components/optgroup/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OptgroupProps } from '../../typings';
+export declare const Optgroup: ({ children, className, label, size }: OptgroupProps) => React.JSX.Element;

package/src/components/optgroup/index.d.ts

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

package/src/components/option/Component.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="@alfalab/core-components-env" />
+import { FC } from 'react';
+import { OptionCommonProps } from '../../typings';
+import type stylesDesktop from './desktop/index.module.css';
+import type stylesMobile from './mobile/index.module.css';
+declare type OptionPrivateProps = {
+    /**
+     * Мобильная версия option.
+     */
+    mobile: boolean;
+    /**
+     * Стили
+     */
+    styles: typeof stylesDesktop | typeof stylesMobile;
+};
+export declare const OptionBase: FC<OptionCommonProps & OptionPrivateProps>;
+export {};

package/src/components/option/Component.responsive.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { OptionProps } from '../../typings';
+export declare const OptionResponsive: ({ mobile, ...props }: OptionProps) => React.JSX.Element;

package/src/components/option/Component.responsive.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import type { OptionProps } from '../../typings';
 
-import { OptionDesktop } from './desktop/Component'
-import { OptionMobile } from './mobile/Component'
+import { OptionDesktop } from './desktop/Component';
+import { OptionMobile } from './mobile/Component';
 
-export const OptionResponsive = ({mobile, ...props}: OptionProps) =>
-    mobile ? <OptionMobile {...props} /> : <OptionDesktop {...props} />
+export const OptionResponsive = ({ mobile, ...props }: OptionProps) =>
+    mobile ? <OptionMobile {...props} /> : <OptionDesktop {...props} />;

package/src/components/option/desktop/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { OptionCommonProps } from '../../../typings';
+export declare const OptionDesktop: ({ Checkmark, ...props }: OptionCommonProps) => React.JSX.Element;

package/src/components/option/index.d.ts

@@ -0,0 +1,3 @@
+export * from './desktop/Component';
+export * from './mobile/Component';
+export { OptionResponsive as Option } from './Component.responsive';

package/src/components/option/mobile/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { OptionCommonProps } from '../../../typings';
+export declare const OptionMobile: ({ Checkmark, ...props }: OptionCommonProps) => React.JSX.Element;

package/src/components/options-list/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OptionsListProps } from '../../typings';
+export declare const OptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;

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

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

package/src/components/search/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchProps } from '../../typings';
+export declare const Search: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/search/index.d.ts

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

package/src/components/virtual-options-list/Component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OptionsListProps } from '../../typings';
+export declare const VirtualOptionsList: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLDivElement>>;

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

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

package/src/consts.d.ts

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

package/src/desktop/Component.desktop.d.ts

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

package/src/desktop/index.d.ts

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

package/src/index.d.ts

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

package/src/mobile/Component.mobile.d.ts

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

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

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

package/src/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/src/presets/index.d.ts

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OptionProps, OptionShape } from '../../typings';
+import 'intersection-observer';
+declare type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+declare 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>;
+};
+export 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 {};

package/src/presets/useSelectWithApply/hook.d.ts

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+import type { BaseSelectProps, OptionShape } from '../../typings';
+export declare type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Дополнительный обработчик клика на чекбокс выбрать все
+     */
+    onSelectAllClick?: (selectedMultiple: OptionShape[]) => void;
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+    /**
+     * Включает отображение поиска
+     */
+    showSearch?: BaseSelectProps['showSearch'];
+    /**
+     *  Настройки поиска
+     */
+    searchProps?: BaseSelectProps['searchProps'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+    /**
+     * Показывать пункт "Выбрать все" в заголовке списка
+     */
+    showHeaderWithSelectAll?: boolean;
+};
+export declare const SELECT_ALL_KEY = "select_all";
+export declare function useSelectWithApply({ options, selected, onChange, onSelectAllClick, 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("./options-list-with-apply/footer/Component").FooterProps> | undefined;
+        Header?: import("react").FC<import("./options-list-with-apply/header/Component").HeaderProps> | undefined;
+        headerProps?: import("./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: any;
+    };
+    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;
+        };
+    };
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { OptionShape, OptionsListProps } from '../../../typings';
+import { FooterProps } from './footer/Component';
+import { HeaderProps } from './header/Component';
+export 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>>;

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

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

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

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

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

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

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

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

package/src/shared/index.d.ts

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