@alfalab/core-components-picker-button 11.1.7 → 11.1.9

package/option/Component.js

@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"container":"picker-button__container_vso5b","icon":"picker-button__icon_vso5b","content":"picker-button__content_vso5b"};
+var styles = {"container":"picker-button__container_1tf41","icon":"picker-button__icon_1tf41","content":"picker-button__content_1tf41"};
 require('./index.css')
 
 var Option = function (_a) {

package/option/index.css

@@ -1,4 +1,4 @@
-/* hash: qobkl */
+/* hash: 938l2 */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,13 +15,13 @@
     --gap-s: 12px;
 } :root {
 } :root {
-} .picker-button__container_vso5b {
+} .picker-button__container_1tf41 {
     display: flex;
     align-items: center;
-} .picker-button__icon_vso5b {
+} .picker-button__icon_1tf41 {
     display: flex;
     margin-right: var(--gap-s);
-} .picker-button__content_vso5b {
+} .picker-button__content_1tf41 {
     overflow: hidden;
     flex: 1;
     text-overflow: ellipsis;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-picker-button",
-    "version": "11.1.7",
+    "version": "11.1.9",
     "description": "Picker button component",
     "keywords": [],
     "license": "MIT",
@@ -39,8 +39,8 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^9.0.5",
-        "@alfalab/core-components-select": "^15.2.0",
+        "@alfalab/core-components-button": "^9.0.6",
+        "@alfalab/core-components-select": "^15.2.2",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",

package/shared-4cd3936b.d.ts

@@ -1,7 +1,65 @@
+/// <reference types="react" />
+import React from "react";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-0f4b9bed";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+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;
+type OptionsFetcherResponse = {
+    options: OptionShape[];
+    hasMore: boolean;
+};
+// eslint-disable-next-line @typescript-eslint/naming-convention
+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 * from "./index-ebda875c";
-export * from "./Component-dd8ca091";
-export * from "./hook-ebda875c";
+export * from "./Component-0f4b9bed";
+export { useSelectWithLoading, useLazyLoading };
 export * from "./hook-8abfea97";
-export * from "./typings-dd8ca091";
-export * from "./utils-dd8ca091";
-export type { AdditionalMobileProps } from "./Component.mobile-ade26e99";
+export * from "./typings-0f4b9bed";
+export * from "./utils-0f4b9bed";
+export type { AdditionalMobileProps } from "./Component.mobile-f28cbba0";

package/src/Component.desktop.tsx

@@ -30,6 +30,9 @@ export type PickerButtonDesktopProps = Omit<
     | 'hint'
     | 'allowUnselect'
     | 'options'
+    | 'searchProps'
+    | 'showSearch'
+    | 'Search'
 > &
     Pick<ButtonProps, 'view' | 'loading' | 'leftAddons' | 'rightAddons'> & {
         options: Array<

package/types-67a2d8af.d.ts

@@ -0,0 +1,276 @@
+/// <reference types="react-transition-group" />
+import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import { HandledEvents } from 'react-swipeable/es/types';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { BaseModalProps } from "./index-bdb4c6b9";
+import { NavigationBarProps } from "./index-c76d6398";
+import { BackgroundColorType } from "./index-72dda473";
+type BottomSheetTitleAlign = 'center' | 'left';
+type BottomSheetProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Управление видимостью
+     */
+    open: boolean;
+    /**
+     * Заголовок
+     */
+    title?: ReactNode;
+    /**
+     * Размер заголовка
+     */
+    titleSize?: NavigationBarProps['titleSize'];
+    /**
+     * Подзаголовок.
+     */
+    subtitle?: NavigationBarProps['subtitle'];
+    /**
+     * Кнопка действия (обычно, это кнопка закрытия)
+     */
+    actionButton?: ReactNode;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительные пропсы на контейнер.
+     */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    /**
+     * Дополнительный класс
+     */
+    containerClassName?: string;
+    /**
+     * Цвет фона
+     */
+    backgroundColor?: Extract<BackgroundColorType, 'primary' | 'secondary'>;
+    /**
+     * Дополнительный класс шапки
+     */
+    headerClassName?: string;
+    /**
+     * Дополнительный класс футера
+     */
+    footerClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Дополнительный класс для компонента крестика
+     */
+    closerClassName?: string;
+    /**
+     * Дополнительный класс для компонента стрелки назад
+     */
+    backerClassName?: string;
+    /**
+     * Дополнительный класс для компонента модального окна
+     */
+    modalClassName?: string;
+    /**
+     * Дополнительный класс для обертки модального окна
+     */
+    modalWrapperClassName?: string;
+    /**
+     * Дополнительный класс для маркера
+     */
+    swipeableMarkerClassName?: string;
+    /**
+     * Кастомный маркер
+     */
+    swipeableMarker?: ReactElement;
+    /**
+     * TransitionProps, прокидываются в компонент CSSTransitionProps.
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Будет ли свайпаться шторка
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие компонента стрелки назад
+     */
+    hasBacker?: boolean;
+    /**
+     * Выравнивание заголовка
+     */
+    titleAlign?: BottomSheetTitleAlign;
+    /**
+     * Фиксирует шапку
+     */
+    stickyHeader?: boolean;
+    /**
+     * Фиксирует футер
+     */
+    stickyFooter?: boolean;
+    /**
+     * Высота шторки
+     */
+    initialHeight?: 'default' | 'full';
+    /**
+     * Будет ли виден оверлэй
+     */
+    hideOverlay?: boolean;
+    /**
+     * Будет ли видна шапка
+     */
+    hideHeader?: boolean;
+    /**
+     * Будет ли обрезан заголовок
+     */
+    trimTitle?: boolean;
+    /**
+     * Запретить закрытие шторки кликом на оверлэй
+     */
+    disableOverlayClick?: boolean;
+    /**
+     * Отключает блокировку скролла при открытии модального окна
+     */
+    disableBlockingScroll?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     */
+    disableFocusLock?: boolean;
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Не анимировать шторку при изменении размера вьюпорта
+     */
+    ignoreScreenChange?: boolean;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: BaseModalProps['backdropProps'];
+    /**
+     * Реф на контейнер, в котором происходит скролл
+     */
+    scrollableContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Реф для управления компонентом.
+     */
+    bottomSheetInstanceRef?: RefObject<{
+        scrollToArea: (idx: number) => void;
+    }>;
+    /**
+     * Реф на контейнер, в котором находится шторка
+     */
+    sheetContainerRef?: RefObject<HTMLElement>;
+    /**
+     * Магнитные области видимой высоты шторки.
+     * Можно использовать значения в пикселях - 10(число), либо в процентах - 10%(строка).
+     * По-умолчанию -[0, window.innerHeight - '24px']
+     * массив должен состоять минимум из 2 элементов
+     */
+    magneticAreas?: Array<number | string>;
+    /**
+     * Индекс точки из magneticAreas, к которому нужно примагнититься при первом открытии шторки.
+     */
+    initialActiveAreaIndex?: number;
+    /**
+     * Отключает скролл контентной области.
+     */
+    scrollLocked?: boolean;
+    /**
+     * Скрыть скроллбар внутри шторки
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: (index: number) => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
+    /**
+     * Вызывается в начале свайпа
+     */
+    onSwipeStart?: (event: HandledEvents) => void;
+    /**
+     * Вызывается после окончания свайпа
+     */
+    onSwipeEnd?: (event: HandledEvents | null) => void;
+};
+export { BottomSheetTitleAlign, BottomSheetProps };

package/{modern/typings-dd8ca091.d.ts → typings-0f4b9bed.d.ts}

@@ -459,6 +459,10 @@ type OptionsListProps = {
      * Обработчик отмены изменений
      */
     onClear?: () => void;
+    /**
+     * Указать индекс пункта для hover состояния
+     */
+    setHighlightedIndex?: (index: number) => void;
 };
 type OptgroupProps = {
     /**

package/{cssm/typings-9211a437.d.ts → typings-89f0cb07.d.ts}

@@ -69,6 +69,8 @@ type ComponentProps = {
      * Дочерние элементы.
      */
     children?: ReactNode;
+};
+type PrivateButtonProps = {
     /**
      * Основные стили компонента.
      */
@@ -80,16 +82,12 @@ type ComponentProps = {
      */
     colorStylesMap: StyleColors;
 };
-type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
-type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
-type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
-type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
-type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
 };
-export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/{utils-dd8ca091.d.ts → utils-0f4b9bed.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, RefObject } from 'react';
-import { BaseSelectProps, GroupShape, OptionShape } from "./typings-dd8ca091";
+import { BaseSelectProps, GroupShape, OptionShape } from "./typings-0f4b9bed";
 declare const isGroup: (item: OptionShape | GroupShape) => item is GroupShape;
 declare const isOptionShape: (item: OptionShape | string | null) => item is OptionShape;
 declare const joinOptions: ({ selected, selectedMultiple, }: {

package/utils-1574ad8b.d.ts

@@ -0,0 +1,29 @@
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const getScrollbarSize: () => number;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement) => void;
+export type { SavedStyle };
+export { getModalStore, GlobalStore, isScrolledToTop, isScrolledToBottom, hasScrollbar, getScrollbarSize, restoreContainerStyles, handleContainer };

package/utils-49cc3c24.d.ts

@@ -0,0 +1,8 @@
+declare const TIMEOUT = 500;
+declare const SWIPE_VELOCITY = 0.4;
+declare const MARKER_HEIGHT = 24;
+declare const CLOSE_OFFSET = 0.2;
+declare const SCROLL_OFFSET = 1;
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };