@alfalab/core-components-custom-picker-button 1.0.0

package/esm/component-3885b0d7.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, RefObject, ReactNode } from "react";
+import { NavigationBarProps } from "./index-e81c389f";
+import { SwipeableHandlers } from "react-swipeable";
+import { BackdropProps } from "./index-ebda875c";
+import { BottomSheetProps } from "./types-5e678ff2";
+type HeaderProps = Omit<NavigationBarProps, "view" | "size"> & {
+    headerRef: RefObject<HTMLDivElement>;
+};
+declare const Header: FC<HeaderProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+};
+declare const Footer: FC<FooterProps>;
+type SwipeableBackdropProps = BackdropProps & {
+    /**
+     * Прозрачность бэкдропа
+     */
+    opacity?: number;
+    /**
+     * Обработчики свайпа
+     */
+    handlers?: SwipeableHandlers;
+    /**
+     * Время анимации opacity
+     */
+    opacityTimeout?: number;
+};
+declare const SwipeableBackdrop: FC<SwipeableBackdropProps>;
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
+export { HeaderProps, Header, FooterProps, Footer, SwipeableBackdropProps, SwipeableBackdrop, BottomSheet };

package/esm/consts-f777ba1a.d.ts

@@ -0,0 +1,2 @@
+declare const DEFAULT_VISIBLE_OPTIONS = 5;
+export { DEFAULT_VISIBLE_OPTIONS };

package/esm/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/esm/desktop.js

@@ -0,0 +1,8 @@
+export { CustomPickerButtonDesktop } from './Component.desktop.js';
+import 'tslib';
+import 'react';
+import '@alfalab/core-components-picker-button/esm/desktop';
+import './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/esm';
+import '@alfalab/core-components-picker-button/esm';

package/esm/field/Component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CustomButtonProps } from "@alfalab/core-components-custom-button";
+import { PickerButtonSize, PickerButtonVariant } from "../index-2aef4eba";
+import { FieldProps as BaseFieldProps } from "../typings-5e1b8383";
+type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & CustomButtonProps & {
+    buttonSize?: PickerButtonSize;
+    buttonVariant?: PickerButtonVariant;
+    showArrow?: boolean;
+};
+declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, ...restProps }: FieldProps) => JSX.Element;
+export { Field };

package/esm/field/Component.js

@@ -0,0 +1,23 @@
+import { __rest, __assign } from 'tslib';
+import React, { Fragment } from 'react';
+import cn from 'classnames';
+import { CustomButton } from '@alfalab/core-components-custom-button/esm';
+import { getIcon } from '@alfalab/core-components-picker-button/esm';
+
+var styles = {"iconContainer":"custom-picker-button__iconContainer_z6y60","addonsContainer":"custom-picker-button__addonsContainer_z6y60","showControlIcon":"custom-picker-button__showControlIcon_z6y60","open":"custom-picker-button__open_z6y60"};
+require('./index.css')
+
+var Field = function (_a) {
+    var _b;
+    var _c = _a.buttonSize, buttonSize = _c === void 0 ? 'm' : _c, _d = _a.buttonVariant, buttonVariant = _d === void 0 ? 'default' : _d, backgroundColor = _a.backgroundColor, contentColor = _a.contentColor, stateType = _a.stateType, label = _a.label, open = _a.open, rightAddons = _a.rightAddons, innerProps = _a.innerProps, className = _a.className, _e = _a.showArrow, showArrow = _e === void 0 ? true : _e, restProps = __rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
+    var Icon = getIcon(buttonVariant, buttonSize);
+    var buttonProps = __assign(__assign({}, restProps), innerProps);
+    return (React.createElement(CustomButton, __assign({}, buttonProps, { rightAddons: React.createElement(Fragment, null,
+            rightAddons && (React.createElement("span", { className: cn(styles.addonsContainer, (_b = {},
+                    _b[styles.showControlIcon] = showArrow || buttonVariant === 'compact',
+                    _b)) }, rightAddons)),
+            (showArrow || buttonVariant === 'compact') && (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
+                React.createElement(Icon, { "data-test-id": 'custom-picker-button-icon' })))), block: true, size: buttonSize, backgroundColor: backgroundColor, contentColor: contentColor, stateType: stateType, className: className }), buttonVariant !== 'compact' && label));
+};
+
+export { Field };

package/esm/field/index.css

@@ -0,0 +1,28 @@
+/* hash: 81i0w */
+: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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+} :root {
+} :root {
+    --arrow-transform: rotate(180deg);
+} .custom-picker-button__iconContainer_z6y60 {
+    display: flex;
+    transition: transform 0.15s ease-in-out;
+} .custom-picker-button__addonsContainer_z6y60 {
+    display: flex
+} .custom-picker-button__addonsContainer_z6y60.custom-picker-button__showControlIcon_z6y60 {
+        margin-right: var(--gap-2xs);
+    } .custom-picker-button__open_z6y60 {
+    transform: var(--arrow-transform);
+}

package/esm/field/index.d.ts

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

package/esm/field/index.js

@@ -0,0 +1,6 @@
+export { Field } from './Component.js';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '@alfalab/core-components-custom-button/esm';
+import '@alfalab/core-components-picker-button/esm';

package/esm/hook-3e68f8db.d.ts

@@ -0,0 +1,62 @@
+/// <reference types="react" />
+import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
+type UseSelectWithApplyProps = {
+    /**
+     * Список выбранных пунктов
+     */
+    selected: BaseSelectProps['selected'];
+    /**
+     * Список вариантов выбора
+     */
+    options: BaseSelectProps['options'];
+    /**
+     * Обработчик выбора
+     */
+    onChange: BaseSelectProps['onChange'];
+    /**
+     * Компонент выпадающего меню
+     */
+    OptionsList?: BaseSelectProps['OptionsList'];
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: BaseSelectProps['optionsListProps'];
+    /**
+     * Показывать кнопку очистки
+     */
+    showClear?: boolean;
+    /**
+     * Показывать пункт "Выбрать все"
+     */
+    showSelectAll?: boolean;
+};
+declare const SELECT_ALL_KEY = "select_all";
+declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, }: UseSelectWithApplyProps): {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
+        showClear?: boolean | undefined;
+        onClose?: (() => void) | undefined;
+        selectedDraft?: OptionShape[] | undefined;
+        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined; /**
+         * Пропсы, которые будут прокинуты в компонент списка
+         */
+        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    optionsListProps: {
+        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        showClear: boolean;
+        onClear: () => void;
+        onApply: () => void;
+        onClose: () => void;
+        selectedDraft: OptionShape[];
+    };
+    allowUnselect: boolean;
+    multiple: boolean;
+    options: (OptionShape | import("./index-3e68f8db").GroupShape | {
+        key: string;
+        content: string;
+    })[];
+    onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
+    selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
+};
+export * from "./Component-5e1b8383";
+export { UseSelectWithApplyProps, SELECT_ALL_KEY, useSelectWithApply };

package/esm/index-136acbb1.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FC, ReactNode } from "react";
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+export { stackingOrder, StackingContext, StackProps, Stack };

package/esm/index-2aef4eba.d.ts

@@ -0,0 +1,5 @@
+export * from "./Component.responsive-2aef4eba";
+export { PickerButtonResponsive as PickerButton };
+export type { PickerButtonResponsiveProps as PickerButtonProps };
+export type { PickerButtonDesktopProps, PickerButtonSize, PickerButtonVariant } from "./Component-2aef4eba";
+export { getIcon } from "./index-701e77da";

package/esm/index-3885b0d7.d.ts

@@ -0,0 +1,3 @@
+declare const getDataTestId: (dataTestId?: string, element?: string) => string | undefined;
+declare const isClient: () => boolean;
+export { getDataTestId, isClient };

package/esm/index-3e68f8db.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { FormControlProps } from "./Component-3ebe4754";
+import { BaseSelectProps, OptionProps, OptionShape } from "./typings-5e1b8383";
+type SelectFieldProps = Omit<FormControlProps, "size"> & Record<string, unknown>;
+type SelectProps = Omit<BaseSelectProps, "fieldProps"> & {
+    /**
+     * Пропсы, которые будут прокинуты в компонент поля
+     */
+    fieldProps?: SelectFieldProps;
+};
+declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
+    fieldProps?: SelectFieldProps | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+// 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) => 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) => 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;
+};
+type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+export { SelectFieldProps, SelectProps, Select, useSelectWithLoading, useLazyLoading, SkeletonProps, Skeleton };
+export * from "./index-ebda875c";
+export * from "./Component-3885b0d7";
+export * from "./Component-5e1b8383";
+export * from "./hook-3e68f8db";
+export * from "./typings-5e1b8383";
+export * from "./utils-5e1b8383";

package/esm/index-3ebe4754.d.ts

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

package/esm/index-425c8522.d.ts

@@ -0,0 +1,6 @@
+type BackgroundColorType = 'accent' | 'info' | 'attention-muted' | 'positive-muted' | 'negative-muted' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'specialbg-component' | 'specialbg-component-inverted' | 'specialbg-primary-grouped' | 'specialbg-secondary-grouped' | 'specialbg-tertiary-grouped' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type BorderColorType = 'accent' | 'key' | 'key-inverted' | 'link' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'underline' | 'underline-inverted' | 'graphic-attention' | 'graphic-link' | 'graphic-negative' | 'graphic-positive' | 'specialbg-secondary-transparent' | 'specialbg-secondary-transparent-inverted' | 'specialbg-tertiary-transparent' | 'specialbg-tertiary-transparent-inverted';
+type GraphicColorType = 'accent' | 'link' | 'attention' | 'positive' | 'negative' | 'primary' | 'primary-inverted' | 'secondary' | 'secondary-inverted' | 'tertiary' | 'tertiary-inverted' | 'quaternary' | 'quaternary-inverted' | 'static-light' | 'static-accent' | 'static-dark';
+type ShadowType = 'shadow-xs' | 'shadow-s' | 'shadow-m' | 'shadow-l' | 'shadow-xl' | 'shadow-xs-hard' | 'shadow-s-hard' | 'shadow-m-hard' | 'shadow-l-hard' | 'shadow-xl-hard' | 'shadow-xs-up' | 'shadow-s-up' | 'shadow-m-up' | 'shadow-l-up' | 'shadow-xl-up' | 'shadow-xs-hard-up' | 'shadow-s-hard-up' | 'shadow-m-hard-up' | 'shadow-l-hard-up' | 'shadow-xl-hard-up';
+type GapType = '3xs' | '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';
+export { BackgroundColorType, BorderColorType, GraphicColorType, ShadowType, GapType };

package/esm/index-701e77da.d.ts

@@ -0,0 +1,4 @@
+import { FC, SVGProps } from 'react';
+import { PickerButtonSize, PickerButtonVariant } from "./index-2aef4eba";
+declare const getIcon: (variant: PickerButtonVariant, size: PickerButtonSize) => FC<SVGProps<SVGSVGElement>>;
+export { getIcon };

package/esm/index-bdb4c6b9.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component-ebda875c";
+export * from "./utils-1574ad8b";

package/esm/index-e81c389f.d.ts

@@ -0,0 +1,3 @@
+export * from "./Component-3885b0d7";
+export * from "./index-ebda875c";
+export type { NavigationBarProps } from "./types-ebda875c";

package/esm/index-ebda875c.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+/// <reference types="react-transition-group" />
+import React from "react";
+import { ButtonHTMLAttributes, ElementType, FC } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+export { CloserProps, Closer };
+export * from "./Component-ebda875c";

package/esm/index-f12ee135.d.ts

@@ -0,0 +1,3 @@
+export * from "./component-3885b0d7";
+export type { BottomSheetProps, BottomSheetTitleAlign } from "./types-5e678ff2";
+export { CLOSE_OFFSET, HEADER_OFFSET } from "./utils-b64479aa";

package/esm/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomPickerButtonResponsive as CustomPickerButton } from "./responsive";
+export type { CustomPickerButtonResponsiveProps as CustomPickerButtonProps } from "./responsive";

package/esm/index.js

@@ -0,0 +1,12 @@
+export { CustomPickerButtonResponsive as CustomPickerButton } from './Component.responsive.js';
+import 'tslib';
+import 'react';
+import '@alfalab/core-components-mq/esm';
+import './Component.desktop.js';
+import '@alfalab/core-components-picker-button/esm/desktop';
+import './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/esm';
+import '@alfalab/core-components-picker-button/esm';
+import './Component.mobile.js';
+import '@alfalab/core-components-picker-button/esm/mobile';

package/esm/mobile.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/esm/mobile.js

@@ -0,0 +1,8 @@
+export { CustomPickerButtonMobile } from './Component.mobile.js';
+import 'tslib';
+import 'react';
+import '@alfalab/core-components-picker-button/esm/mobile';
+import './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/esm';
+import '@alfalab/core-components-picker-button/esm';

package/esm/responsive.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.responsive";
+export {};

package/esm/responsive.js

@@ -0,0 +1,12 @@
+export { CustomPickerButtonResponsive } from './Component.responsive.js';
+import 'tslib';
+import 'react';
+import '@alfalab/core-components-mq/esm';
+import './Component.desktop.js';
+import '@alfalab/core-components-picker-button/esm/desktop';
+import './field/Component.js';
+import 'classnames';
+import '@alfalab/core-components-custom-button/esm';
+import '@alfalab/core-components-picker-button/esm';
+import './Component.mobile.js';
+import '@alfalab/core-components-picker-button/esm/mobile';