@alfalab/core-components 47.15.0-beta.0 → 47.15.0

package/navigation-bar-private/moderncssm/components/closer/Component.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+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 };

package/navigation-bar-private/moderncssm/components/closer/Component.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import { IconButton } from '../../../../icon-button/moderncssm';
+import { CrossHeavyMIcon } from '@alfalab/icons-glyph/CrossHeavyMIcon';
+import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
+import styles from './index.module.css';
+
+const Closer = ({ view, className, sticky, icon = view === 'desktop' ? CrossHeavyMIcon : CrossMIcon, dataTestId, onClose, ...restProps }) => {
+    const handleClick = (event) => {
+        onClose?.(event, 'closerClick');
+    };
+    return (React.createElement("div", { className: cn(styles.closer, className, {
+            [styles.sticky]: sticky,
+        }) },
+        React.createElement(IconButton, { size: view === 'desktop' ? 's' : 'xs', className: cn(styles.button, { [styles.mobile]: view === 'mobile' }), "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', onClick: handleClick, icon: icon, dataTestId: dataTestId, ...restProps })));
+};
+
+export { Closer };

package/navigation-bar-private/moderncssm/components/closer/index.d.ts

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

package/navigation-bar-private/moderncssm/components/closer/index.js

@@ -0,0 +1,7 @@
+export { Closer } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './index.module.css';

package/navigation-bar-private/moderncssm/components/closer/index.module.css

@@ -0,0 +1,33 @@
+/* */
+:root {
+    /* closer-mobile */
+    --navigation-bar-closer-mobile-color: var(--color-light-neutral-translucent-700);
+
+    /* back-arrow */
+}
+.closer {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.button {
+    background: var(--color-light-bg-primary-alpha-40);
+    -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
+    color: var(--color-light-neutral-translucent-1300)
+}
+.button.mobile {
+        background: var(--color-light-neutral-translucent-100);
+        color: var(--navigation-bar-closer-mobile-color);
+    }
+.button.button {
+    border-radius: var(--border-radius-circle);
+}
+.sticky {
+    position: sticky;
+    top: 0;
+}

package/navigation-bar-private/moderncssm/index.d.ts

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

package/navigation-bar-private/moderncssm/index.js

@@ -0,0 +1,18 @@
+export { NavigationBarPrivate } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '../../shared/moderncssm';
+import '@alfalab/hooks';
+import './components/back-arrow-addon/Component.js';
+import '../../button/moderncssm/desktop';
+import '../../typography/moderncssm';
+import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
+import '@alfalab/icons-glyph/ArrowLeftMIcon';
+import './components/back-arrow-addon/index.module.css';
+import './components/closer/Component.js';
+import '../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/icons-glyph/CrossMIcon';
+import './components/closer/index.module.css';
+import './index.module.css';

package/navigation-bar-private/moderncssm/index.module.css

@@ -0,0 +1,131 @@
+/* */
+
+.header {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease
+}
+
+.header.header.backgroundImage {
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+.mainLine {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    z-index: 1;
+    background-color: inherit;
+}
+
+.mainLineSticky {
+    position: sticky;
+    top: 0;
+}
+
+.mainLineWithImageBg {
+    background-color: transparent;
+    background-color: initial;
+}
+
+.content {
+    color: var(--color-light-text-primary);
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    flex-grow: 1;
+    align-self: baseline;
+    box-sizing: border-box;
+    min-height: 48px
+}
+
+.content.withBothAddons,
+    .content.withCompactTitle {
+        font-size: 16px;
+        line-height: 20px;
+        font-weight: 500;
+        align-self: center;
+        padding-top: var(--gap-4);
+        padding-bottom: var(--gap-4)
+    }
+
+.content.withBothAddons > .children,
+        .content.withBothAddons > .title,
+        .content.withCompactTitle > .children,
+        .content.withCompactTitle > .title {
+            -webkit-line-clamp: 1;
+            word-break: break-all;
+        }
+
+.content.contentOnBotDesktop.contentOnBotDesktop {
+        padding-top: var(--gap-12);
+    }
+
+.content.contentOnBotMobile.contentOnBotMobile {
+        padding-top: var(--gap-12);
+    }
+
+.title {
+    word-break: break-word;
+}
+
+.subtitle {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    color: var(--color-light-text-secondary);
+    word-break: break-all;
+}
+
+.addonsWrapper {
+    display: flex;
+}
+
+.rightAddons {
+    margin-left: auto;
+}
+
+.addon {
+    min-width: 48px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    pointer-events: all;
+}
+
+.bottomAddons {
+    pointer-events: all;
+}
+
+.closer {
+    margin-left: auto;
+}
+
+.left {
+    text-align: left;
+}
+
+.center {
+    text-align: center;
+}
+
+.trim {
+    overflow: hidden
+}
+
+.trim .title,
+    .trim .children {
+        -webkit-line-clamp: 2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }

package/navigation-bar-private/moderncssm/shared/index.d.ts

@@ -0,0 +1,2 @@
+export * from "../components/closer/index";
+export * from "../components/back-arrow-addon/index";

package/navigation-bar-private/moderncssm/shared/index.js

@@ -0,0 +1,13 @@
+export { Closer } from '../components/closer/Component.js';
+export { BackArrowAddon } from '../components/back-arrow-addon/Component.js';
+import 'react';
+import 'classnames';
+import '../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/CrossHeavyMIcon';
+import '@alfalab/icons-glyph/CrossMIcon';
+import '../components/closer/index.module.css';
+import '../../../button/moderncssm/desktop';
+import '../../../typography/moderncssm';
+import '@alfalab/icons-glyph/ArrowLeftMediumMIcon';
+import '@alfalab/icons-glyph/ArrowLeftMIcon';
+import '../components/back-arrow-addon/index.module.css';

package/navigation-bar-private/moderncssm/types.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+import { BackArrowAddonProps } from "./components/back-arrow-addon/index";
+import { CloserProps } from "./components/closer/index";
+type NavigationBarPrivateProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Подзаголовок (доступен только в мобильной версии)
+     */
+    subtitle?: ReactNode;
+    /**
+     * Размер заголовка (compact доступен только в мобильной версии)
+     */
+    titleSize?: 'default' | 'compact';
+    /**
+     * Доп. класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Дополнительный класс для closer
+     */
+    closerClassName?: string;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие кнопки "Назад"
+     */
+    hasBackButton?: boolean;
+    /**
+     * Дополнительный класс для правого аддона
+     */
+    backButtonClassName?: string;
+    /**
+     * Дополнительные пропсы для кнопки "Назад"
+     */
+    backButtonProps?: Omit<BackArrowAddonProps, 'view' | 'textOpacity' | 'onClick'>;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для нижнего аддона
+     */
+    bottomAddonsClassName?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: 'left' | 'center';
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
+    /**
+     * Иконка closer.
+     */
+    closerIcon?: React.ElementType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: CloserProps['onClose'];
+    /**
+     * обработчик клика по кнопке "назад"
+     */
+    onBack?: () => void;
+    /**
+     * Вид шапки - мобильный или десктоп
+     */
+    view: 'desktop' | 'mobile';
+    /**
+     * Ссылка на родительскую ноду overflow: auto
+     */
+    scrollableParentRef?: React.RefObject<HTMLDivElement>;
+};
+type ContentParams = {
+    extraClassName?: string;
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    style?: React.CSSProperties;
+    hidden?: boolean;
+};
+export { NavigationBarPrivateProps, ContentParams };

package/navigation-bar-private/moderncssm/types.js

@@ -0,0 +1 @@
+

package/navigation-bar-private/moderncssm/vars.css

@@ -0,0 +1,7 @@
+/* */
+
+:root {
+    /* closer-mobile */
+
+    /* back-arrow */
+}

package/notification/moderncssm/Component.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import React from 'react';
+import { MouseEvent } from "react";
+import { ToastPlateDesktopProps } from "../../toast-plate/desktop";
+type NotificationProps = ToastPlateDesktopProps & {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number;
+    /**
+     * Время до закрытия компонента
+     */
+    autoCloseDelay?: number | null;
+    /**
+     * Использовать портал
+     */
+    usePortal?: boolean;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Позиционирование компонента от верхнего или нижнего края экрана
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
+    onCloseTimeout?: () => void;
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
+    onMouseEnter?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
+    onMouseLeave?: (event?: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик клика вне компонента
+     */
+    onClickOutside?: (event?: MouseEvent<any>) => void;
+};
+declare const Notification: React.ForwardRefExoticComponent<ToastPlateDesktopProps & {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean | undefined;
+    /**
+     * Отступ от верхнего края
+     */
+    offset?: number | undefined;
+    /**
+     * Время до закрытия компонента
+     */
+    autoCloseDelay?: number | null | undefined;
+    /**
+     * Использовать портал
+     */
+    usePortal?: boolean | undefined;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number | undefined;
+    /**
+     * Позиционирование компонента от верхнего или нижнего края экрана
+     */
+    position?: "top" | "bottom" | undefined;
+    /**
+     * Обработчик события истечения времени до закрытия компонента
+     */
+    onCloseTimeout?: (() => void) | undefined;
+    /**
+     * Обработчик события наведения курсора на компонент
+     */
+    onMouseEnter?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Обработчик события снятия курсора с компонента
+     */
+    onMouseLeave?: ((event?: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Обработчик клика вне компонента
+     */
+    onClickOutside?: ((event?: MouseEvent<any>) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { NotificationProps, Notification };

package/notification/moderncssm/Component.js

@@ -0,0 +1,95 @@
+import React, { forwardRef, useRef, useState, useCallback, useEffect, Fragment } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useSwipeable } from 'react-swipeable';
+import cn from 'classnames';
+import elementClosest from 'element-closest';
+import { Portal } from '../../portal/moderncssm';
+import { Stack } from '../../stack/moderncssm';
+import { ToastPlateDesktop } from '../../toast-plate/moderncssm/desktop';
+import { stackingOrder } from '@alfalab/stack-context';
+import { useClickOutside } from './utils/index.js';
+import styles from './index.module.css';
+
+const notificationClassNameSelector = `.${styles.notificationComponent}`;
+const Notification = forwardRef(({ className, actionSectionClassName, children, visible, offset = 108, hasCloser = true, autoCloseDelay = 5000, usePortal = true, zIndex = stackingOrder.TOAST, style, position = 'top', onClose, onCloseTimeout, onMouseEnter, onMouseLeave, onClickOutside, ...restProps }, ref) => {
+    const notificationRef = useRef(null);
+    const autoCloseTimeoutRef = useRef(0);
+    const closeTimeoutRef = useRef(0);
+    const [isClosing, setIsClosing] = useState(false);
+    const startAutoCloseTimer = useCallback(() => {
+        if (autoCloseDelay !== null) {
+            autoCloseTimeoutRef.current = window.setTimeout(() => {
+                if (onCloseTimeout) {
+                    onCloseTimeout();
+                }
+            }, autoCloseDelay);
+        }
+    }, [autoCloseDelay, onCloseTimeout]);
+    const stopAutoCloseTimer = useCallback(() => {
+        clearTimeout(autoCloseTimeoutRef.current);
+    }, []);
+    useEffect(() => () => {
+        clearTimeout(closeTimeoutRef.current);
+    }, []);
+    useEffect(() => {
+        elementClosest(window);
+    }, []);
+    useEffect(() => {
+        if (visible) {
+            startAutoCloseTimer();
+        }
+        return () => {
+            stopAutoCloseTimer();
+        };
+    }, [startAutoCloseTimer, stopAutoCloseTimer, visible]);
+    const handleMouseEnter = useCallback((event) => {
+        stopAutoCloseTimer();
+        if (onMouseEnter) {
+            onMouseEnter(event);
+        }
+    }, [onMouseEnter, stopAutoCloseTimer]);
+    const handleMouseLeave = useCallback((event) => {
+        stopAutoCloseTimer();
+        startAutoCloseTimer();
+        if (onMouseLeave) {
+            onMouseLeave(event);
+        }
+    }, [onMouseLeave, startAutoCloseTimer, stopAutoCloseTimer]);
+    const handleOutsideClick = useCallback((event) => {
+        const isTargetNotification = !!event.target.closest(notificationClassNameSelector);
+        /*
+         * проверка isTargetNotification нужна для предотвращения срабатывания handleOutsideClick
+         * при клике на другие нотификации, если их несколько на странице
+         */
+        if (onClickOutside && visible && !isTargetNotification) {
+            onClickOutside(event);
+        }
+    }, [onClickOutside, visible]);
+    useClickOutside(notificationRef, handleOutsideClick);
+    const swipeableHandlers = useSwipeable({
+        onSwiped: ({ dir }) => {
+            if (onClose && ['Left', 'Right', 'Up'].includes(dir)) {
+                setIsClosing(true);
+                closeTimeoutRef.current = window.setTimeout(() => {
+                    setIsClosing(false);
+                    onClose();
+                }, 100);
+            }
+        },
+        delta: 100,
+    });
+    const Wrapper = usePortal ? Portal : Fragment;
+    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Wrapper, null,
+        React.createElement("div", { ...swipeableHandlers },
+            React.createElement(ToastPlateDesktop, { className: cn(styles.notificationComponent, {
+                    [styles.isVisible]: visible,
+                    [styles.isClosing]: isClosing,
+                }, className), contentClassName: styles.toastContent, actionSectionClassName: cn(actionSectionClassName, styles.actionSection), style: {
+                    [position]: offset,
+                    zIndex: computedZIndex,
+                    ...style,
+                }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: mergeRefs([ref, notificationRef]), role: visible ? 'alert' : undefined, hasCloser: hasCloser, onClose: onClose, ...restProps }, children))))));
+});
+Notification.displayName = 'Notification';
+
+export { Notification };

package/notification/moderncssm/browser-a216f694.d.ts

@@ -0,0 +1,6 @@
+declare function isWebkitBased(): boolean;
+declare const browser: {
+    getScrollbarSize: () => number;
+    isWebkitBased: typeof isWebkitBased;
+};
+export { browser };

package/notification/moderncssm/index.d.ts

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

package/notification/moderncssm/index.js

@@ -0,0 +1,12 @@
+export { Notification } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'react-swipeable';
+import 'classnames';
+import 'element-closest';
+import '../../portal/moderncssm';
+import '../../stack/moderncssm';
+import '../../toast-plate/moderncssm/desktop';
+import '@alfalab/stack-context';
+import './utils/index.js';
+import './index.module.css';

package/notification/moderncssm/index.module.css

@@ -0,0 +1,60 @@
+/* */
+
+:root {
+    --notification-desktop-content-width: 278px;
+}
+
+.notificationComponent {
+    visibility: hidden;
+    right: var(--gap-12);
+    transform: translate(0, -500px);
+    width: calc(100% - var(--gap-24));
+    max-width: calc(100vw - var(--gap-24));
+    -webkit-user-select: none;
+            user-select: none;
+    transition: transform 0.4s ease-out
+}
+
+@media screen and (min-width: 600px) {
+
+.notificationComponent {
+        right: var(--gap-48);
+        width: auto;
+        transform: translate(calc(100% + var(--gap-48)), 0)
+}
+    }
+
+.notificationComponent.isVisible {
+        visibility: visible;
+        transform: translate(0, 0);
+    }
+
+.notificationComponent.isClosing {
+        transition: transform 0.1s ease-out;
+        transform: translate(100vw, 0)
+    }
+
+@media screen and (min-width: 600px) {
+
+.notificationComponent.isClosing {
+            transform: translate(calc(100% + var(--gap-48)), 0)
+    }
+        }
+
+.notificationComponent.notificationComponent {
+    position: fixed;
+}
+
+@media screen and (min-width: 600px) {
+
+.toastContent {
+        width: var(--notification-desktop-content-width)
+}
+    }
+
+.actionSection {
+    min-width: 104px;
+    min-height: 48px;
+    padding: 0 var(--gap-8);
+    margin: var(--gap-12-neg) 0;
+}

package/notification/moderncssm/useCustomWebkitScrollbar-a216f694.d.ts

@@ -0,0 +1,2 @@
+declare function useCustomWebkitScrollbar(): boolean;
+export { useCustomWebkitScrollbar };

package/notification/moderncssm/utils/getNotificationTestIds.d.ts

@@ -0,0 +1,5 @@
+declare function getNotificationTestIds(dataTestId: string): {
+    badge: string;
+    component: string;
+};
+export { getNotificationTestIds };