@alfalab/core-components 41.9.0 → 41.10.0

package/custom-picker-button/cssm/desktop.d.ts

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

package/custom-picker-button/cssm/desktop.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_desktop = require('./Component.desktop.js');
+require('tslib');
+require('react');
+require('../../picker-button/cssm/desktop');
+require('./field/Component.js');
+require('classnames');
+require('../../custom-button/cssm');
+require('../../picker-button/cssm');
+require('./field/index.module.css');
+
+
+
+exports.CustomPickerButtonDesktop = Component_desktop.CustomPickerButtonDesktop;

package/custom-picker-button/cssm/field/Component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CustomButtonProps } from "../../../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/custom-picker-button/cssm/field/Component.js

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cn = require('classnames');
+var coreComponentsCustomButton = require('../../../custom-button/cssm');
+var coreComponentsPickerButton = require('../../../picker-button/cssm');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+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 = tslib.__rest(_a, ["buttonSize", "buttonVariant", "backgroundColor", "contentColor", "stateType", "label", "open", "rightAddons", "innerProps", "className", "showArrow"]);
+    var Icon = coreComponentsPickerButton.getIcon(buttonVariant, buttonSize);
+    var buttonProps = tslib.__assign(tslib.__assign({}, restProps), innerProps);
+    return (React__default.default.createElement(coreComponentsCustomButton.CustomButton, tslib.__assign({}, buttonProps, { rightAddons: React__default.default.createElement(React.Fragment, null,
+            rightAddons && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.addonsContainer, (_b = {},
+                    _b[styles__default.default.showControlIcon] = showArrow || buttonVariant === 'compact',
+                    _b)) }, rightAddons)),
+            (showArrow || buttonVariant === 'compact') && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.iconContainer, buttonVariant !== 'compact' && open && styles__default.default.open) },
+                React__default.default.createElement(Icon, { "data-test-id": 'custom-picker-button-icon' })))), block: true, size: buttonSize, backgroundColor: backgroundColor, contentColor: contentColor, stateType: stateType, className: className }), buttonVariant !== 'compact' && label));
+};
+
+exports.Field = Field;

package/custom-picker-button/cssm/field/index.d.ts

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

package/custom-picker-button/cssm/field/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var field_Component = require('./Component.js');
+require('tslib');
+require('react');
+require('classnames');
+require('../../../custom-button/cssm');
+require('../../../picker-button/cssm');
+require('./index.module.css');
+
+
+
+exports.Field = field_Component.Field;

package/custom-picker-button/cssm/field/index.module.css

@@ -0,0 +1,27 @@
+: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);
+} .iconContainer {
+    display: flex;
+    transition: transform 0.15s ease-in-out;
+} .addonsContainer {
+    display: flex
+} .addonsContainer.showControlIcon {
+        margin-right: var(--gap-2xs);
+    } .open {
+    transform: var(--arrow-transform);
+}

package/custom-picker-button/cssm/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/custom-picker-button/cssm/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/{tabs/cssm/index-abcc39aa.d.ts → custom-picker-button/cssm/index-2aef4eba.d.ts}

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

package/custom-picker-button/cssm/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/custom-picker-button/cssm/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/custom-picker-button/cssm/index-3ebe4754.d.ts

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

package/custom-picker-button/cssm/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/custom-picker-button/cssm/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/custom-picker-button/cssm/index-bdb4c6b9.d.ts

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

package/custom-picker-button/cssm/index-e81c389f.d.ts

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

package/custom-picker-button/cssm/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/custom-picker-button/cssm/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/custom-picker-button/cssm/index.d.ts

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

package/custom-picker-button/cssm/index.js

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+require('tslib');
+require('react');
+require('../../mq/cssm');
+require('./Component.desktop.js');
+require('../../picker-button/cssm/desktop');
+require('./field/Component.js');
+require('classnames');
+require('../../custom-button/cssm');
+require('../../picker-button/cssm');
+require('./field/index.module.css');
+require('./Component.mobile.js');
+require('../../picker-button/cssm/mobile');
+
+
+
+exports.CustomPickerButton = Component_responsive.CustomPickerButtonResponsive;

package/custom-picker-button/cssm/mobile.d.ts

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

package/custom-picker-button/cssm/mobile.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_mobile = require('./Component.mobile.js');
+require('tslib');
+require('react');
+require('../../picker-button/cssm/mobile');
+require('./field/Component.js');
+require('classnames');
+require('../../custom-button/cssm');
+require('../../picker-button/cssm');
+require('./field/index.module.css');
+
+
+
+exports.CustomPickerButtonMobile = Component_mobile.CustomPickerButtonMobile;

package/custom-picker-button/cssm/responsive.d.ts

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

package/custom-picker-button/cssm/responsive.js

@@ -0,0 +1,19 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+require('tslib');
+require('react');
+require('../../mq/cssm');
+require('./Component.desktop.js');
+require('../../picker-button/cssm/desktop');
+require('./field/Component.js');
+require('classnames');
+require('../../custom-button/cssm');
+require('../../picker-button/cssm');
+require('./field/index.module.css');
+require('./Component.mobile.js');
+require('../../picker-button/cssm/mobile');
+
+
+
+exports.CustomPickerButtonResponsive = Component_responsive.CustomPickerButtonResponsive;