@alfalab/core-components-modal 9.3.11 → 9.5.0

package/moderncssm/components/content/index.module.css

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

package/moderncssm/components/content/mobile.module.css

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

package/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/moderncssm/components/controls/Component.js

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-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 { view, dataTestId } = useContext(ResponsiveContext);
+    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/moderncssm/components/controls/index.d.ts

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

package/moderncssm/components/controls/index.js

@@ -0,0 +1 @@
+export { Controls } from './Component.js';

package/moderncssm/components/controls/index.module.css

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

package/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';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+export { FooterProps, Footer };

package/moderncssm/components/footer/Component.js

@@ -0,0 +1,29 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
+import { ModalContext } from '../../Context.js';
+import { ResponsiveContext } from '../../ResponsiveContext.js';
+import desktopStyles from './desktop.module.css';
+import styles from './index.module.css';
+import layoutStyles from './layout.module.css';
+import mobileStyles from './mobile.module.css';
+
+const Footer = ({ children, className, sticky, layout = 'start', gap }) => {
+    const { footerHighlighted, setHasFooter } = useContext(ModalContext);
+    const { size, view, dataTestId } = useContext(ResponsiveContext);
+    useEffect(() => {
+        setHasFooter(true);
+    }, [setHasFooter]);
+    return (React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'footer'), className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
+            [styles.highlighted]: sticky && footerHighlighted,
+            [styles.sticky]: sticky,
+            [desktopStyles.footer]: view === 'desktop',
+            [desktopStyles.sticky]: view === 'desktop' && sticky,
+            [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
+            [mobileStyles.footer]: view === 'mobile',
+            [mobileStyles.sticky]: view === 'mobile' && sticky,
+        }) }, children));
+};
+
+export { Footer };

package/moderncssm/components/footer/desktop.module.css

@@ -0,0 +1,40 @@
+/* */
+
+:root {
+    --modal-border-radius: var(--border-radius-12);
+    --modal-vertical-padding: var(--gap-40);
+
+    /* sizes */
+
+    /* paddings */
+    --modal-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.footer {
+    border-bottom-left-radius: var(--modal-border-radius);
+    border-bottom-right-radius: var(--modal-border-radius);
+}
+
+.sticky {
+    bottom: calc(var(--modal-vertical-padding) * -1)
+}
+
+.sticky.fullscreen {
+        bottom: var(--gap-0);
+    }
+
+.size-500,
+.size-600,
+.size-800,
+.size-1140,
+.fullscreen {
+    padding: var(--modal-s-footer-paddings);
+}

package/moderncssm/components/footer/index.module.css

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

package/moderncssm/components/footer/layout.module.css

@@ -0,0 +1,76 @@
+/* */
+
+:root {
+    --modal-footer-default-gap: var(--gap-16);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.column {
+    display: flex;
+    flex-direction: column
+}
+
+.column > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--modal-footer-default-gap);
+    }
+
+.column.gap-16 > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--gap-16);
+    }
+
+.column.gap-24 > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--gap-24);
+    }
+
+.column.gap-32 > *:not(:last-child):not(:only-child) {
+        margin-bottom: var(--gap-32);
+    }
+
+.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(--modal-footer-default-gap);
+    }
+
+.start.gap-16 > *:not(:last-child):not(:only-child), .center.gap-16 > *:not(:last-child):not(:only-child), .space-between.gap-16 > *:not(:last-child):not(:only-child) {
+        margin-right: var(--gap-16);
+    }
+
+.start.gap-24 > *:not(:last-child):not(:only-child), .center.gap-24 > *:not(:last-child):not(:only-child), .space-between.gap-24 > *:not(:last-child):not(:only-child) {
+        margin-right: var(--gap-24);
+    }
+
+.start.gap-32 > *:not(:last-child):not(:only-child), .center.gap-32 > *:not(:last-child):not(:only-child), .space-between.gap-32 > *:not(:last-child):not(:only-child) {
+        margin-right: var(--gap-32);
+    }

package/moderncssm/components/footer/mobile.module.css

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

package/moderncssm/components/header/Component.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavigationBarPrivateProps } from "@alfalab/core-components-navigation-bar-private";
+type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;
+declare const Header: FC<HeaderProps>;
+export { HeaderProps, Header };

package/moderncssm/components/header/Component.js

@@ -0,0 +1,42 @@
+import React, { useContext, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/moderncssm';
+import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
+import { SIZE_TO_CLASSNAME_MAP } from '../../consts.js';
+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';
+
+const Header = ({ className, sticky, title, children, contentClassName, hasCloser = true, onClose: onHeaderClose, ...restProps }) => {
+    const { setHasHeader, headerHighlighted, parentRef, onClose } = useContext(ModalContext);
+    const { view, size, dataTestId } = useContext(ResponsiveContext);
+    const handleClose = useCallback((...params) => {
+        if (onHeaderClose) {
+            onHeaderClose(...params);
+        }
+        if (onClose) {
+            onClose(...params);
+        }
+    }, [onHeaderClose, onClose]);
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    const hasContent = Boolean(title || children);
+    return (React.createElement(NavigationBarPrivate, { dataTestId: getDataTestId(dataTestId, 'header'), ...restProps, scrollableParentRef: parentRef, hasCloser: hasCloser, sticky: sticky, view: view, title: title, onClose: handleClose, className: cn(className, {
+            [styles.highlighted]: hasContent && sticky && headerHighlighted,
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+            [desktopStyles.header]: view === 'desktop',
+            [desktopStyles.sticky]: view === 'desktop' && sticky,
+            [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',
+            [mobileStyles.header]: view === 'mobile',
+            [mobileStyles.sticky]: view === 'mobile' && sticky,
+        }), contentClassName: cn(contentClassName, {
+            [desktopStyles.content]: view === 'desktop',
+            [mobileStyles.content]: view === 'mobile',
+        }) }, children));
+};
+
+export { Header };

package/moderncssm/components/header/desktop.module.css

@@ -0,0 +1,68 @@
+/* */
+
+:root {
+    --modal-border-radius: var(--border-radius-12);
+    --modal-vertical-padding: var(--gap-40);
+
+    /* sizes */
+
+    /* paddings */
+    --modal-s-header-paddings: 28px 28px var(--gap-0);
+
+    /* scroll */
+
+    /* desktop */
+    --modal-s-header-desktop-content-paddings: var(--gap-12);
+    --modal-s-header-desktop-font-size: 22px;
+    --modal-s-header-desktop-line-height: 26px;
+    --modal-l-header-desktop-content-paddings: 6px var(--gap-12) var(--gap-16);
+    --modal-l-header-desktop-font-size: 30px;
+    --modal-l-header-desktop-line-height: 36px;
+    --modal-header-desktop-font-weight: bold;
+    --modal-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.header {
+    border-top-left-radius: var(--modal-border-radius);
+    border-top-right-radius: var(--modal-border-radius);
+}
+
+.content {
+    font-weight: var(--modal-header-desktop-font-weight);
+    font-family: var(--modal-header-desktop-font-family);
+}
+
+.size-500 .content,
+.size-600 .content {
+    padding: var(--modal-s-header-desktop-content-paddings);
+    font-size: var(--modal-s-header-desktop-font-size);
+    line-height: var(--modal-s-header-desktop-line-height);
+}
+
+.size-800 .content,
+.size-1140 .content,
+.fullscreen .content {
+    padding: var(--modal-l-header-desktop-content-paddings);
+    font-size: var(--modal-l-header-desktop-font-size);
+    line-height: var(--modal-l-header-desktop-line-height);
+}
+
+.size-500,
+.size-600,
+.size-800,
+.size-1140,
+.fullscreen {
+    padding: var(--modal-s-header-paddings);
+}
+
+.sticky {
+    top: calc(var(--modal-vertical-padding) * -1)
+}
+
+.sticky.fullscreen {
+        top: var(--gap-0);
+    }

package/moderncssm/components/header/index.module.css

@@ -0,0 +1,33 @@
+/* */
+
+:root {
+    --modal-header-background: var(--color-light-modal-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --modal-header-highlight-background: var(--color-light-modal-bg-primary);
+    --modal-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.highlighted {
+    background: var(--modal-header-highlight-background);
+    box-shadow: var(--modal-header-highlight-box-shadow);
+}
+
+.sticky {
+    position: sticky;
+    z-index: 1
+}
+
+.sticky.hasContent {
+        background: var(--modal-header-background);
+    }

package/moderncssm/components/header/mobile.module.css

@@ -0,0 +1,39 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+    --modal-header-mobile-content-paddings: 10px var(--gap-8);
+    --modal-header-mobile-font-size: 20px;
+    --modal-header-mobile-line-height: 28px;
+    --modal-header-mobile-font-family: var(--font-family-system);
+    --modal-header-mobile-font-weight: 600;
+
+    /* paddings */
+    --modal-header-mobile-paddings: var(--gap-4) var(--gap-8);
+}
+
+.header {
+    padding: var(--modal-header-mobile-paddings);
+}
+
+.sticky {
+    top: var(--gap-0);
+}
+
+.content {
+    font-size: var(--modal-header-mobile-font-size);
+    line-height: var(--modal-header-mobile-line-height);
+    font-family: var(--modal-header-mobile-font-family);
+    font-weight: var(--modal-header-mobile-font-weight);
+
+    padding: var(--modal-header-mobile-content-paddings);
+}

package/moderncssm/consts.d.ts

@@ -0,0 +1,12 @@
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    fullscreen: string;
+    500: string;
+    600: string;
+    800: string;
+    1140: string;
+};
+export { SIZE_TO_CLASSNAME_MAP };

package/moderncssm/consts.js

@@ -0,0 +1,13 @@
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-500',
+    m: 'size-600',
+    l: 'size-800',
+    xl: 'size-1140',
+    fullscreen: 'fullscreen',
+    500: 'size-500',
+    600: 'size-600',
+    800: 'size-800',
+    1140: 'size-1140',
+};
+
+export { SIZE_TO_CLASSNAME_MAP };

package/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import React from 'react';
+import { ControlsProps } from "../components/controls/index";
+import { HeaderProps } from "../components/header/Component";
+declare const ModalDesktop: React.ForwardRefExoticComponent<import("@alfalab/core-components-base-modal").BaseModalProps & {
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | 500 | 600 | 800 | 1140 | undefined;
+    fullscreen?: boolean | undefined;
+    fixedPosition?: boolean | undefined;
+    hasCloser?: boolean | undefined;
+    iOSLock?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("../typings").ContentProps>;
+    Header: React.FC<Omit<HeaderProps, "titleSize" | "subtitle">>;
+    Footer: React.FC<import("../components/footer/Component").FooterProps>;
+    Controls: React.FC<Omit<ControlsProps, "mobileLayout">>;
+};
+export { ModalDesktop };

package/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { Modal } from '../Component.js';
+import { Content } from '../components/content/Component.js';
+import { Controls } from '../components/controls/Component.js';
+import { Footer } from '../components/footer/Component.js';
+import { Header } from '../components/header/Component.js';
+
+const ModalDesktopComponent = forwardRef((props, ref) => (React.createElement(Modal, { ...props, ref: ref, view: 'desktop' })));
+const ModalDesktop = Object.assign(ModalDesktopComponent, {
+    Content,
+    Header: Header,
+    Footer,
+    Controls: Controls,
+});
+
+export { ModalDesktop };

package/moderncssm/desktop/desktop.module.css

@@ -0,0 +1,59 @@
+/* */
+
+:root {
+    --modal-border-radius: var(--border-radius-12);
+    --modal-vertical-padding: var(--gap-40);
+
+    /* sizes */
+    --modal-s-width: 500px;
+    --modal-m-width: 600px;
+    --modal-l-width: 800px;
+    --modal-xl-width: 1140px;
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.wrapper {
+    padding-top: var(--modal-vertical-padding);
+    padding-bottom: var(--modal-vertical-padding);
+}
+
+.component {
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--modal-border-radius);
+}
+
+.fullscreen {
+    padding-top: var(--gap-0);
+    padding-bottom: var(--gap-0)
+}
+
+.fullscreen .component {
+        flex: 1;
+        border-radius: 0;
+    }
+
+.size-500 {
+    width: var(--modal-s-width);
+}
+
+.size-600 {
+    width: var(--modal-m-width);
+}
+
+.size-800 {
+    width: var(--modal-l-width);
+}
+
+.size-1140 {
+    width: var(--modal-xl-width);
+}

package/moderncssm/desktop/index.d.ts

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

package/moderncssm/desktop/index.js

@@ -0,0 +1 @@
+export { ModalDesktop } from './Component.desktop.js';

package/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { ModalResponsive as Modal } from "./Component.responsive";
+export { ModalResponsiveProps as ModalProps } from "./typings";

package/moderncssm/index.js

@@ -0,0 +1 @@
+export { ModalResponsive as Modal } from './Component.responsive.js';