@alfalab/core-components 47.20.0-beta.2 → 47.20.0-beta.4

package/universal-modal/modern/mobile/transitions/transitions.mobile.css

@@ -0,0 +1,25 @@
+/* hash: 19uyl */
+.universal-modal__appear_1mnxo,
+.universal-modal__enter_1mnxo {
+    opacity: 0;
+    transform: translateY(15px);
+}
+
+.universal-modal__appearActive_1mnxo,
+.universal-modal__enterActive_1mnxo {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.universal-modal__exit_1mnxo {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.universal-modal__exitActive_1mnxo,
+.universal-modal__exitDone_1mnxo {
+    opacity: 0;
+    transform: translateY(15px);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+}

package/universal-modal/modern/mobile/types/props.d.ts

@@ -0,0 +1,11 @@
+import { BaseModalProps } from "../../../../base-modal";
+type BaseUniversalModalMobileProps = {
+    /**
+     * Хэндлер закрытия модалки
+     */
+    onClose?: () => void;
+    /** Сторона с которой будет появляться модальное окно */
+    appearance?: 'bottom' | 'right';
+};
+type UniversalModalMobileProps = BaseUniversalModalMobileProps & Pick<BaseModalProps, 'children' | 'dataTestId' | 'open' | 'className'>;
+export { BaseUniversalModalMobileProps, UniversalModalMobileProps };

package/universal-modal/modern/mobile/types/props.js

@@ -0,0 +1 @@
+

package/universal-modal/modern/shared/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalContext } from "../Context";
+export { getUniversalModalTestIds } from "../utils";

package/universal-modal/modern/shared/index.js

@@ -0,0 +1,4 @@
+export { ModalContext } from '../Context.js';
+export { getUniversalModalTestIds } from '../utils.js';
+import '../../../base-modal/modern';
+import '../../../shared/modern';

package/universal-modal/modern/typings.d.ts

@@ -0,0 +1,25 @@
+import { UniversalModalDesktopProps } from "./desktop/types/props";
+import { UniversalModalMobileProps } from "./mobile/types/props";
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    dataTestId?: string;
+    modalWidth?: number;
+    modalHeaderHighlighted?: boolean;
+    modalFooterHighlighted?: boolean;
+    setModalWidth?: (width: number) => void;
+    setModalHeaderHighlighted?: (value: boolean) => void;
+    setModalFooterHighlighted?: (value: boolean) => void;
+} | null;
+type UniversalModalResponsiveProps = UniversalModalDesktopProps & UniversalModalMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+export { View, TResponsiveModalContext, UniversalModalResponsiveProps };

package/universal-modal/modern/typings.js

@@ -0,0 +1 @@
+

package/universal-modal/modern/utils/createResponsive.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { FC } from "react";
+declare function createResponsive(desktop: FC, mobile: FC): (props: any) => React.JSX.Element;
+export { createResponsive };

package/universal-modal/modern/utils/createResponsive.js

@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import { ResponsiveContext } from '../ResponsiveContext.js';
+
+function createResponsive(desktop, mobile) {
+    // eslint-disable-next-line
+    function ResponsiveComponent(props) {
+        const { view = 'desktop' } = useContext(ResponsiveContext) || {};
+        const Component = view === 'desktop' ? desktop : mobile;
+        return React.createElement(Component, { ...props });
+    }
+    return ResponsiveComponent;
+}
+
+export { createResponsive };

package/universal-modal/modern/utils.d.ts

@@ -0,0 +1,8 @@
+declare function getUniversalModalTestIds(dataTestId: string): {
+    modal: string;
+    header: string;
+    title: string;
+    content: string;
+    footer: string;
+};
+export { getUniversalModalTestIds };

package/universal-modal/modern/utils.js

@@ -0,0 +1,13 @@
+import { getDataTestId } from '../../shared/modern';
+
+function getUniversalModalTestIds(dataTestId) {
+    return {
+        modal: dataTestId,
+        header: getDataTestId(dataTestId, 'header'),
+        title: getDataTestId(dataTestId, 'header-title'),
+        content: getDataTestId(dataTestId, 'content'),
+        footer: getDataTestId(dataTestId, 'footer'),
+    };
+}
+
+export { getUniversalModalTestIds };

package/universal-modal/moderncssm/Component.responsive.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import React from 'react';
+declare const UniversalModalResponsive: React.ForwardRefExoticComponent<import("./desktop/types/props").BaseUniversalModalProps & Pick<import("../../base-modal").BaseModalProps, "children" | "className" | "open" | "dataTestId"> & import("./mobile/types/props").BaseUniversalModalMobileProps & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.FC<import("./components/header/Component").HeaderProps>;
+    Controls: React.FC<import("./components/controls/index").ControlsProps>;
+    Content: (props: any) => React.JSX.Element;
+    Footer: (props: any) => React.JSX.Element;
+};
+export { UniversalModalResponsive };

package/universal-modal/moderncssm/Component.responsive.js

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '../../mq/moderncssm';
+import { getComponentBreakpoint, isClient } from '../../shared/moderncssm';
+import { Controls } from './components/controls/Component.js';
+import { Header } from './components/header/Component.js';
+import { createResponsive } from './utils/createResponsive.js';
+import { UniversalModalDesktop } from './desktop/Component.desktop.js';
+import { UniversalModalMobile } from './mobile/Component.mobile.js';
+import 'classnames';
+import './ResponsiveContext.js';
+import './components/footer/layout.module.css';
+import './components/controls/index.module.css';
+import '../../navigation-bar-private/moderncssm';
+import './Context.js';
+import '../../base-modal/moderncssm';
+import './components/header/desktop.module.css';
+import './components/header/index.module.css';
+import './components/header/mobile.module.css';
+import './components/content/Component.desktop.js';
+import './components/content/Component.js';
+import './components/content/index.module.css';
+import './components/content/mobile.module.css';
+import './components/footer/Component.desktop.js';
+import './components/footer/Component.js';
+import './desktop/constants/headerPresetTypes.js';
+import './components/footer/index.module.css';
+import './components/footer/layout.mobile.module.css';
+import './components/footer/desktop.module.css';
+import './desktop/components/modal-by-center/modal-by-center.js';
+import './desktop/hooks/useModalHeight.js';
+import './desktop/hooks/useModalMargin.js';
+import './desktop/hooks/useModalWheel.js';
+import './desktop/hooks/useModalWidth.js';
+import './desktop/components/base-universal-modal-content/base-universal-modal-content.js';
+import '../../scrollbar/moderncssm';
+import './desktop/constants/types.js';
+import './desktop/components/base-universal-modal-content/base-universal-modal-content.module.css';
+import './desktop/components/modal-by-center/modal-by-center.module.css';
+import './desktop/components/modal-by-center/transitions-center.module.css';
+import './desktop/components/modal-by-side/modal-by-side.js';
+import 'react-merge-refs';
+import '../../drawer/moderncssm';
+import './desktop/components/modal-by-side/modal-by-side.module.css';
+import './desktop/components/modal-by-side/transitions.desktop.module.css';
+import './components/content/Component.mobile.js';
+import './components/footer/Component.mobile.js';
+import './components/footer/mobile.module.css';
+import './mobile/mobile.module.css';
+import './mobile/transitions/right-side-transitions.mobile.module.css';
+import './mobile/transitions/transitions.mobile.module.css';
+
+const UniversalModal = forwardRef(({ children, breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, dataTestId, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);
+    const Component = isDesktop ? UniversalModalDesktop : UniversalModalMobile;
+    return (React.createElement(Component, { ref: ref, dataTestId: dataTestId, ...restProps }, children));
+});
+const UniversalModalResponsive = Object.assign(UniversalModal, {
+    Header,
+    Controls,
+    Content: createResponsive(UniversalModalDesktop.Content, UniversalModalMobile.Content),
+    Footer: createResponsive(UniversalModalDesktop.Footer, UniversalModalMobile.Footer),
+});
+UniversalModalResponsive.displayName = 'UniversalModalResponsive';
+
+export { UniversalModalResponsive };

package/universal-modal/moderncssm/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "../../base-modal";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/universal-modal/moderncssm/Context.js

@@ -0,0 +1,5 @@
+import { BaseModalContext } from '../../base-modal/moderncssm';
+
+const ModalContext = BaseModalContext;
+
+export { ModalContext };

package/universal-modal/moderncssm/ResponsiveContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { TResponsiveModalContext } from "./typings";
+declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
+export { ResponsiveContext };

package/universal-modal/moderncssm/ResponsiveContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ResponsiveContext = React.createContext(null);
+
+export { ResponsiveContext };

package/universal-modal/moderncssm/components/content/Component.d.ts

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+type ContentProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Content: FC<ContentProps>;
+export { ContentProps, Content };

package/universal-modal/moderncssm/components/content/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentDesktopProps = ContentProps & {
+    /**
+     * Размер (только для desktop версии компонента)
+     */
+    size?: 's' | 500;
+};
+declare const ContentDesktop: FC<ContentDesktopProps>;
+export { ContentDesktopProps, ContentDesktop };

package/universal-modal/moderncssm/components/content/Component.desktop.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import { Content } from './Component.js';
+import '../../../../shared/moderncssm';
+import '../../Context.js';
+import '../../../../base-modal/moderncssm';
+import '../../ResponsiveContext.js';
+import './index.module.css';
+import './mobile.module.css';
+
+const ContentDesktop = ({ className, ...restProps }) => (React.createElement(Content, { className: cn(className), ...restProps }));
+
+export { ContentDesktop };

package/universal-modal/moderncssm/components/content/Component.js

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/moderncssm';
+import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import styles from './index.module.css';
+import stylesMobile from './mobile.module.css';
+import '../../../../base-modal/moderncssm';
+
+const Content = ({ children, className, dataTestId }) => {
+    const { contentRef, hasHeader, hasFooter } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
+    const { view = 'desktop' } = responsiveContext || {};
+    const isMobile = view === 'mobile';
+    return (React.createElement("div", { className: cn(styles.content, className, styles.flex, {
+            [styles.withHeader]: hasHeader,
+            [styles.withFooter]: hasFooter,
+            [stylesMobile.content]: isMobile,
+            [stylesMobile.withFooter]: isMobile,
+        }), ref: contentRef, "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'content') }, children));
+};
+
+export { Content };

package/universal-modal/moderncssm/components/content/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ContentProps } from "./Component";
+type ContentMobileProps = ContentProps;
+declare const ContentMobile: FC<ContentMobileProps>;
+export { ContentMobileProps, ContentMobile };

package/universal-modal/moderncssm/components/content/Component.mobile.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import cn from 'classnames';
+import { Content } from './Component.js';
+import stylesMobile from './mobile.module.css';
+import '../../../../shared/moderncssm';
+import '../../Context.js';
+import '../../../../base-modal/moderncssm';
+import '../../ResponsiveContext.js';
+import './index.module.css';
+
+const ContentMobile = ({ className, ...restProps }) => (React.createElement(Content, { className: cn(className, stylesMobile.content), ...restProps }));
+
+export { ContentMobile };

package/universal-modal/moderncssm/components/content/index.module.css

@@ -0,0 +1,34 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+
+.content {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 0;
+    padding: var(--gap-32) var(--gap-32) var(--gap-32)
+}
+
+.content.withHeader {
+        padding-top: var(--gap-0);
+    }
+
+.content.withFooter {
+        padding-bottom: var(--gap-16);
+    }
+
+.flex {
+    flex: 1 1 auto;
+}

package/universal-modal/moderncssm/components/content/mobile.module.css

@@ -0,0 +1,26 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+
+.content {
+    padding: var(--gap-16) var(--gap-16) var(--gap-0)
+}
+
+.content:last-child {
+        padding-bottom: var(--gap-16);
+    }
+
+.content.withFooter {
+        padding-bottom: var(--gap-20);
+    }

package/universal-modal/moderncssm/components/controls/Component.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+interface ControlsProps {
+    /**
+     * Основной слот
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительный слот
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание элементов футера
+     * @default start
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Выравнивание элементов футера (мобильный view)
+     * @default start
+     */
+    mobileLayout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+}
+declare const Controls: React.FC<ControlsProps>;
+export { ControlsProps, Controls };

package/universal-modal/moderncssm/components/controls/Component.js

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/moderncssm';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import layoutStyles from '../footer/layout.module.css';
+import styles from './index.module.css';
+
+const Controls = ({ primary, secondary, gap, layout: layoutProp = 'start', mobileLayout = layoutProp, }) => {
+    const context = useContext(ResponsiveContext);
+    const { view = 'desktop', dataTestId } = context || {};
+    const layout = view === 'mobile' ? mobileLayout : layoutProp;
+    const shouldReverse = view === 'mobile' && layout !== 'column';
+    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'controls'), className: cn(styles.component, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`]) }, shouldReverse ? (React.createElement(React.Fragment, null,
+        secondary,
+        primary)) : (React.createElement(React.Fragment, null,
+        primary,
+        secondary))));
+};
+
+export { Controls };

package/universal-modal/moderncssm/components/controls/index.d.ts

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

package/universal-modal/moderncssm/components/controls/index.js

@@ -0,0 +1,7 @@
+export { Controls } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../../shared/moderncssm';
+import '../../ResponsiveContext.js';
+import '../footer/layout.module.css';
+import './index.module.css';

package/universal-modal/moderncssm/components/controls/index.module.css

@@ -0,0 +1,3 @@
+.component {
+    width: 100%;
+}

package/universal-modal/moderncssm/components/footer/Component.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const Footer: FC<FooterProps>;
+export { FooterProps, Footer };

package/universal-modal/moderncssm/components/footer/Component.desktop.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+type FooterDesktopProps = FooterProps & {
+    /**
+     * Размер (только для desktop версии компонента)
+     */
+    size?: 's' | 500;
+};
+declare const FooterDesktop: FC<FooterDesktopProps>;
+export { FooterDesktopProps, FooterDesktop };

package/universal-modal/moderncssm/components/footer/Component.desktop.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import { Footer } from './Component.js';
+import styles from './desktop.module.css';
+import '../../../../shared/moderncssm';
+import '../../Context.js';
+import '../../../../base-modal/moderncssm';
+import '../../desktop/constants/headerPresetTypes.js';
+import '../../ResponsiveContext.js';
+import './index.module.css';
+import './layout.mobile.module.css';
+import './layout.module.css';
+
+const FooterDesktop = ({ className, sticky, ...restProps }) => (React.createElement(Footer, { className: cn(className, {
+        [styles.sticky]: sticky,
+    }), sticky: sticky, ...restProps }));
+
+export { FooterDesktop };

package/universal-modal/moderncssm/components/footer/Component.js

@@ -0,0 +1,35 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '../../../../shared/moderncssm';
+import { ModalContext } from '../../Context.js';
+import { FOOTER_MEDIUM_BREAKPOINT } from '../../desktop/constants/headerPresetTypes.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import styles from './index.module.css';
+import layoutStylesMobile from './layout.mobile.module.css';
+import layoutStyles from './layout.module.css';
+import '../../../../base-modal/moderncssm';
+
+const layouts = {
+    desktop: layoutStyles,
+    mobile: layoutStylesMobile,
+};
+const Footer = ({ children, className, sticky, layout = 'start', dataTestId, }) => {
+    const { setHasFooter, footerHighlighted } = useContext(ModalContext);
+    const responsiveContext = useContext(ResponsiveContext);
+    const { modalFooterHighlighted, view = 'desktop', modalWidth = 500 } = responsiveContext || {};
+    useEffect(() => {
+        setHasFooter(true);
+        return () => {
+            setHasFooter(false);
+        };
+    }, [setHasFooter]);
+    // custom scroll ломает highlight логику в base-modal, поэтому для десктопа обрабатываем самостоятельно
+    const isHighlighted = view === 'desktop' ? modalFooterHighlighted : footerHighlighted;
+    return (React.createElement("div", { className: cn(styles.footer, className, layouts[view][layout], {
+            [styles.highlighted]: sticky && isHighlighted,
+            [styles.sticky]: sticky,
+            [layoutStyles.middle]: view === 'desktop' && modalWidth >= FOOTER_MEDIUM_BREAKPOINT,
+        }), "data-test-id": dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer'), "data-name": 'modalFooterDesktop' }, children));
+};
+
+export { Footer };

package/universal-modal/moderncssm/components/footer/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FooterProps } from "./Component";
+type FooterMobileProps = FooterProps;
+declare const FooterMobile: FC<FooterMobileProps>;
+export { FooterMobileProps, FooterMobile };

package/universal-modal/moderncssm/components/footer/Component.mobile.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+import { Footer } from './Component.js';
+import styles from './mobile.module.css';
+import '../../../../shared/moderncssm';
+import '../../Context.js';
+import '../../../../base-modal/moderncssm';
+import '../../desktop/constants/headerPresetTypes.js';
+import '../../ResponsiveContext.js';
+import './index.module.css';
+import './layout.mobile.module.css';
+import './layout.module.css';
+
+const FooterMobile = ({ className, sticky, layout = 'start', ...restProps }) => (React.createElement(Footer, { className: cn(className, styles.footer, {
+        [styles.sticky]: sticky,
+    }), sticky: sticky, layout: layout, ...restProps }));
+
+export { FooterMobile };

package/universal-modal/moderncssm/components/footer/desktop.module.css

@@ -0,0 +1,18 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+}
+
+.sticky {
+    bottom: var(--gap-0);
+}

package/universal-modal/moderncssm/components/footer/index.module.css

@@ -0,0 +1,31 @@
+/* */
+:root {
+    --universal-modal-footer-background: var(--color-light-modal-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --universal-modal-footer-highlight-background: var(--color-light-modal-bg-primary);
+    --universal-modal-footer-highlight-box-shadow: 0 -1px 0 0 var(--color-light-neutral-300);
+
+    /* desktop */
+
+    /* mobile */
+}
+.footer {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease;
+    padding: var(--gap-16) var(--gap-32) var(--gap-32);
+}
+.sticky {
+    background: var(--universal-modal-footer-background);
+    position: sticky;
+    z-index: 1;
+}
+.highlighted {
+    background: var(--universal-modal-footer-highlight-background);
+    box-shadow: var(--universal-modal-footer-highlight-box-shadow);
+}