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

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

@@ -1,29 +0,0 @@
-/// <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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,25 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,31 +0,0 @@
-/* */
-: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);
-}

package/universal-modal/moderncssm/components/footer/layout.mobile.module.css

@@ -1,49 +0,0 @@
-/* */
-
-:root {
-
-    /* sizes */
-
-    /* paddings */
-
-    /* scroll */
-
-    /* desktop */
-
-    /* mobile */
-}
-
-.column {
-    display: flex;
-    flex-direction: column
-}
-
-.column > *:not(:last-child):not(:only-child) {
-        margin-bottom: var(--gap-16);
-    }
-
-.start {
-    justify-content: flex-start;
-}
-
-.center {
-    justify-content: center;
-}
-
-.space-between {
-    justify-content: space-between
-}
-
-.space-between > * {
-        flex: 1;
-    }
-
-.start,
-.center,
-.space-between {
-    display: flex
-}
-
-.start > *:not(:last-child):not(:only-child), .center > *:not(:last-child):not(:only-child), .space-between > *:not(:last-child):not(:only-child) {
-        margin-right: var(--gap-16);
-    }

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

@@ -1,53 +0,0 @@
-/* */
-
-:root {
-
-    /* sizes */
-
-    /* paddings */
-
-    /* scroll */
-
-    /* desktop */
-
-    /* mobile */
-}
-
-.column {
-    display: flex;
-    flex-direction: column
-}
-
-.column > *:not(:last-child):not(:only-child) {
-        margin-bottom: var(--gap-8);
-    }
-
-.column.middle > *:not(:last-child):not(:only-child) {
-            margin-bottom: var(--gap-12);
-        }
-
-.start {
-    justify-content: flex-start;
-}
-
-.center {
-    justify-content: center;
-}
-
-.space-between {
-    justify-content: space-between
-}
-
-.space-between > * {
-        flex: 1;
-    }
-
-.start,
-.center,
-.space-between {
-    display: flex
-}
-
-.start > *:not(:last-child):not(:only-child), .center > *:not(:last-child):not(:only-child), .space-between > *:not(:last-child):not(:only-child) {
-        margin-right: var(--gap-16);
-    }

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

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

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

@@ -1,11 +0,0 @@
-import { FC } from 'react';
-import { NavigationBarPrivateProps } from "../../../../navigation-bar-private";
-type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'> & {
-    /**
-     * Заголовок в шапке крупного размера
-     * @default false
-     */
-    bigTitle?: boolean;
-};
-declare const Header: FC<HeaderProps>;
-export { HeaderProps, Header };

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

@@ -1,49 +0,0 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import cn from 'classnames';
-import { NavigationBarPrivate } from '../../../../navigation-bar-private/moderncssm';
-import { getDataTestId } from '../../../../shared/moderncssm';
-import { ModalContext } from '../../Context.js';
-import { ResponsiveContext } from '../../ResponsiveContext.js';
-import desktopStyles from './desktop.module.css';
-import styles from './index.module.css';
-import mobileStyles from './mobile.module.css';
-import '../../../../base-modal/moderncssm';
-
-const Header = ({ className, children, contentClassName, title, sticky, bigTitle = false, titleClassName, ...restProps }) => {
-    const { setHasHeader, headerHighlighted, componentRef } = useContext(ModalContext);
-    const { view = 'desktop', dataTestId, modalHeaderHighlighted, setModalHeaderHighlighted, } = useContext(ResponsiveContext) || {};
-    const titleRef = useRef(null);
-    const hasContent = Boolean(title || children || restProps.bottomAddons);
-    // custom scroll ломает highlight логику в base-modal, поэтому для десктопа обрабатываем самостоятельно
-    const isHighlighted = view === 'desktop' ? modalHeaderHighlighted : headerHighlighted;
-    useEffect(() => {
-        setHasHeader(true);
-    }, [setHasHeader]);
-    useEffect(() => {
-        if (view === 'mobile' && setModalHeaderHighlighted) {
-            setModalHeaderHighlighted(Boolean(headerHighlighted));
-        }
-    }, [headerHighlighted, setModalHeaderHighlighted, view]);
-    return (React.createElement(NavigationBarPrivate, { view: view, dataTestId: getDataTestId(dataTestId, 'header'), dataName: 'modalHeaderDesktop', ...restProps, sticky: sticky, title: title, className: cn(styles.header, className, {
-            [styles.highlighted]: sticky && isHighlighted && hasContent,
-            [styles.sticky]: sticky,
-            [styles.hasContent]: hasContent,
-            [desktopStyles.sticky]: view === 'desktop' && sticky,
-            [mobileStyles.sticky]: view === 'mobile' && sticky,
-            [mobileStyles.header]: view === 'mobile',
-        }), contentClassName: cn(contentClassName, {
-            [desktopStyles.content]: view === 'desktop',
-            [mobileStyles.content]: view === 'mobile',
-        }), bottomAddonsClassName: cn({
-            [desktopStyles.bottomAddons]: view === 'desktop',
-            [desktopStyles.medium]: view === 'desktop' && bigTitle,
-            [mobileStyles.bottomAddons]: view === 'mobile',
-        }), scrollableParentRef: componentRef, titleClassName: cn({
-            [desktopStyles.headerTitle]: view === 'desktop',
-            [desktopStyles.medium]: bigTitle,
-        }), titleRef: titleRef, addonClassName: cn({
-            [mobileStyles.addon]: view === 'mobile',
-        }) }, children));
-};
-
-export { Header };

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

@@ -1,50 +0,0 @@
-/* */
-
-:root {
-
-    /* sizes */
-
-    /* paddings */
-
-    /* scroll */
-
-    /* desktop */
-    --universal-modal-header-desktop-font-weight: bold;
-    --universal-modal-header-desktop-font-family: var(--font-family-system);
-
-    /* mobile */
-}
-
-.content {
-    font-weight: var(--universal-modal-header-desktop-font-weight);
-    font-family: var(--universal-modal-header-desktop-font-family);
-}
-
-.sticky {
-    top: var(--gap-0);
-}
-
-.bottomAddons,
-.headerTitle {
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 700
-}
-
-.bottomAddons.medium, .headerTitle.medium {
-        font-size: 30px;
-        line-height: 36px;
-        font-weight: 700;
-    }
-
-.headerTitle {
-    padding: 11px var(--gap-12)
-}
-
-.headerTitle.medium {
-        padding: 6px var(--gap-12) var(--gap-16);
-    }
-
-.bottomAddons {
-    padding: 6px var(--gap-12) var(--gap-16);
-}

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

@@ -1,79 +0,0 @@
-/* */
-
-:root {
-    --universal-modal-header-background: var(--color-light-modal-bg-primary);
-
-    /* sizes */
-
-    /* paddings */
-
-    /* scroll */
-    --universal-modal-header-highlight-background: var(--color-light-modal-bg-primary);
-    --universal-modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
-
-    /* desktop */
-
-    /* mobile */
-}
-
-.header {
-    width: 100%;
-    box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
-    padding: var(--gap-20) var(--gap-20) 0;
-}
-
-.highlighted {
-    background: var(--universal-modal-header-highlight-background);
-    box-shadow: var(--universal-modal-header-highlight-box-shadow);
-}
-
-.sticky {
-    position: sticky;
-    z-index: 1
-}
-
-.sticky.hasContent {
-        background: var(--universal-modal-header-background);
-    }
-
-.header.backgroundImage {
-    background: center no-repeat;
-    background-size: cover;
-}
-
-.content {
-    flex-grow: 1;
-}
-
-.title {
-    word-break: break-word;
-}
-
-.addon {
-    min-width: 48px;
-    height: 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: all;
-}
-
-.closer {
-    margin-left: auto;
-}
-
-.right {
-    justify-content: flex-end;
-    text-align: right;
-}
-
-.trim {
-    overflow: hidden
-}
-
-.trim .title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }

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

@@ -1,41 +0,0 @@
-/* */
-:root {
-
-    /* sizes */
-
-    /* paddings */
-
-    /* scroll */
-
-    /* desktop */
-
-    /* mobile */
-    --universal-modal-header-mobile-font-size: 20px;
-    --universal-modal-header-mobile-line-height: 28px;
-    --universal-modal-header-mobile-font-family: var(--font-family-system);
-    --universal-modal-header-mobile-font-weight: 600;
-}
-.header {
-    padding: var(--gap-8) var(--gap-4);
-}
-.sticky {
-    top: var(--gap-0);
-}
-.content {
-    font-size: var(--universal-modal-header-mobile-font-size);
-    line-height: var(--universal-modal-header-mobile-line-height);
-    font-family: var(--universal-modal-header-mobile-font-family);
-    font-weight: var(--universal-modal-header-mobile-font-weight);
-    padding: 0 var(--gap-12);
-    min-height: 40px;
-    justify-content: center;
-}
-.bottomAddons {
-    font-size: 20px;
-    line-height: 28px;
-    font-weight: 600;
-    padding: 6px var(--gap-16);
-}
-.addon {
-    height: 40px;
-}

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ControlsProps } from "../components/controls/index";
-import { HeaderProps } from "../components/header/Component";
-declare const UniversalModalDesktop: React.ForwardRefExoticComponent<import("./types/props").BaseUniversalModalProps & Pick<import("../../../base-modal").BaseModalProps, "children" | "className" | "open" | "dataTestId"> & React.RefAttributes<HTMLDivElement>> & {
-    Content: React.FC<import("../components/content/Component.desktop").ContentDesktopProps>;
-    Header: React.FC<Omit<HeaderProps, "titleSize" | "subtitle">>;
-    Footer: React.FC<import("../components/footer/Component.desktop").FooterDesktopProps>;
-    Controls: React.FC<Omit<ControlsProps, "mobileLayout">>;
-};
-export { UniversalModalDesktop };