@alfalab/core-components 48.9.0-beta.0 → 48.9.0-beta.1

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

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react';
+type ControlsDesktopProps = {
+    /**
+     * Основной слот
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительный слот
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание элементов футера
+     * @default start
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+declare const ControlsDesktop: FC<ControlsDesktopProps>;
+export { ControlsDesktopProps, ControlsDesktop };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import cn from 'classnames';
+import layoutStyles from '../../footer/desktop/layout.module.css';
+import styles from '../base-controls/index.module.css';
+
+const ControlsDesktop = ({ primary, secondary, gap, layout = 'start', dataTestId, }) => (React.createElement("div", { "data-test-id": dataTestId, className: cn(styles.component, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`]) },
+    primary,
+    secondary));
+
+export { ControlsDesktop };

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

@@ -0,0 +1,7 @@
+export { ControlsResponsive } from "./responsive/Component.responsive";
+export type { ControlsResponsiveProps } from "./responsive/Component.responsive";
+export { ControlsDesktop } from "./desktop/Component.desktop";
+export type { ControlsDesktopProps } from "./desktop/Component.desktop";
+export { ControlsMobile } from "./mobile/Component.mobile";
+export type { ControlsMobileProps } from "./mobile/Component.mobile";
+export {};

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

@@ -0,0 +1,8 @@
+export { ControlsResponsive } from './responsive/Component.responsive.js';
+export { ControlsDesktop } from './desktop/Component.desktop.js';
+export { ControlsMobile } from './mobile/Component.mobile.js';
+import 'react';
+import '../../../../mq/moderncssm';
+import 'classnames';
+import '../footer/desktop/layout.module.css';
+import './base-controls/index.module.css';

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { ReactNode } from "react";
+interface ControlsMobileProps {
+    /**
+     * Основной слот
+     */
+    primary?: ReactNode;
+    /**
+     * Дополнительный слот
+     */
+    secondary?: ReactNode;
+    /**
+     * Выравнивание элементов футера
+     * @default start
+     */
+    layout?: 'start' | 'center' | 'space-between' | 'column';
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+}
+declare const ControlsMobile: React.FC<ControlsMobileProps>;
+export { ControlsMobileProps, ControlsMobile };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import cn from 'classnames';
+import layoutStyles from '../../footer/desktop/layout.module.css';
+import styles from '../base-controls/index.module.css';
+
+const ControlsMobile = ({ primary, secondary, gap, layout = 'start', dataTestId, }) => {
+    const shouldReverse = layout !== 'column';
+    return (React.createElement("div", { "data-test-id": dataTestId, 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 { ControlsMobile };

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ControlsDesktopProps, ControlsMobileProps } from "../index";
+type ControlsResponsiveProps = ControlsDesktopProps | ControlsMobileProps;
+declare const ControlsResponsive: FC<ControlsResponsiveProps>;
+export { ControlsResponsiveProps, ControlsResponsive };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useIsDesktop } from '../../../../../mq/moderncssm';
+import { ControlsDesktop } from '../desktop/Component.desktop.js';
+import { ControlsMobile } from '../mobile/Component.mobile.js';
+import 'classnames';
+import '../../footer/desktop/layout.module.css';
+import '../base-controls/index.module.css';
+
+const ControlsResponsive = ({ ...restProps }) => {
+    const isDesktop = useIsDesktop();
+    if (isDesktop) {
+        return React.createElement(ControlsDesktop, { ...restProps });
+    }
+    return React.createElement(ControlsMobile, { ...restProps });
+};
+
+export { ControlsResponsive };

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

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

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

@@ -0,0 +1,21 @@
+import React, { useContext, useEffect } from 'react';
+import cn from 'classnames';
+import { ModalContext } from '../../../Context.js';
+import styles from './index.module.css';
+import '../../../../../base-modal/moderncssm';
+
+const BaseFooter = ({ children, className, sticky, dataTestId, isHighlighted, }) => {
+    const { setHasFooter } = useContext(ModalContext);
+    useEffect(() => {
+        setHasFooter(true);
+        return () => {
+            setHasFooter(false);
+        };
+    }, [setHasFooter]);
+    return (React.createElement("div", { className: cn(styles.footer, className, {
+            [styles.highlighted]: sticky && isHighlighted,
+            [styles.sticky]: sticky,
+        }), "data-test-id": dataTestId, "data-name": 'modalFooterDesktop' }, children));
+};
+
+export { BaseFooter };

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

@@ -0,0 +1,23 @@
+/* */
+:root {
+    --universal-modal-footer-background: var(--color-light-modal-bg-primary);
+
+    /* 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);
+}
+.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/desktop/Component.desktop.d.ts

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

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

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { FOOTER_MEDIUM_BREAKPOINT } from '../../../desktop/const/index.js';
+import { ResponsiveContext } from '../../../ResponsiveContext.js';
+import { BaseFooter } from '../base-footer/base-footer.js';
+import styles from './desktop.module.css';
+import layoutStyles from './layout.module.css';
+import '../../../Context.js';
+import '../../../../../base-modal/moderncssm';
+import '../base-footer/index.module.css';
+
+const FooterDesktop = ({ className, sticky, layout = 'start', ...restProps }) => {
+    const responsiveContext = useContext(ResponsiveContext);
+    const { modalWidth = 500, modalFooterHighlighted } = responsiveContext || {};
+    return (React.createElement(BaseFooter, { className: cn(layoutStyles[layout], className, {
+            [styles.sticky]: sticky,
+            [layoutStyles.middle]: modalWidth >= FOOTER_MEDIUM_BREAKPOINT,
+        }), sticky: sticky, layout: layout, isHighlighted: modalFooterHighlighted, ...restProps }));
+};
+
+export { FooterDesktop };

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

@@ -0,0 +1,10 @@
+/* */
+
+:root {
+
+    /* scroll */
+}
+
+.sticky {
+    bottom: var(--gap-0);
+}

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

@@ -0,0 +1,45 @@
+/* */
+
+:root {
+
+    /* scroll */
+}
+
+.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/index.d.ts

@@ -0,0 +1,7 @@
+export { FooterResponsive } from "./responsive/Component.responsive";
+export type { FooterResponsiveProps } from "./responsive/Component.responsive";
+export { FooterDesktop } from "./desktop/Component.desktop";
+export type { FooterDesktopProps } from "./desktop/Component.desktop";
+export { FooterMobile } from "./mobile/Component.mobile";
+export type { FooterMobileProps } from "./mobile/Component.mobile";
+export {};

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

@@ -0,0 +1,16 @@
+export { FooterResponsive } from './responsive/Component.responsive.js';
+export { FooterDesktop } from './desktop/Component.desktop.js';
+export { FooterMobile } from './mobile/Component.mobile.js';
+import 'react';
+import '../../../../mq/moderncssm';
+import 'classnames';
+import '../../desktop/const/index.js';
+import '../../ResponsiveContext.js';
+import './base-footer/base-footer.js';
+import '../../Context.js';
+import '../../../../base-modal/moderncssm';
+import './base-footer/index.module.css';
+import './desktop/desktop.module.css';
+import './desktop/layout.module.css';
+import './mobile/layout.mobile.module.css';
+import './mobile/mobile.module.css';

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

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

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

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { ModalContext } from '../../../Context.js';
+import { BaseFooter } from '../base-footer/base-footer.js';
+import layoutStylesMobile from './layout.mobile.module.css';
+import styles from './mobile.module.css';
+import '../../../../../base-modal/moderncssm';
+import '../base-footer/index.module.css';
+
+const FooterMobile = ({ className, sticky, layout = 'start', ...restProps }) => {
+    const { footerHighlighted } = useContext(ModalContext);
+    return (React.createElement(BaseFooter, { className: cn(styles.footer, layoutStylesMobile[layout], className, {
+            [styles.sticky]: sticky,
+        }), sticky: sticky, layout: layout, isHighlighted: footerHighlighted, ...restProps }));
+};
+
+export { FooterMobile };

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

@@ -0,0 +1,41 @@
+/* */
+
+:root {
+
+    /* scroll */
+}
+
+.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/mobile/mobile.module.css

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

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FooterDesktopProps, FooterMobileProps } from "../index";
+type FooterResponsiveProps = FooterDesktopProps | FooterMobileProps;
+declare const FooterResponsive: FC<FooterResponsiveProps>;
+export { FooterResponsiveProps, FooterResponsive };

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useIsDesktop } from '../../../../../mq/moderncssm';
+import { FooterDesktop } from '../desktop/Component.desktop.js';
+import { FooterMobile } from '../mobile/Component.mobile.js';
+import 'classnames';
+import '../../../desktop/const/index.js';
+import '../../../ResponsiveContext.js';
+import '../base-footer/base-footer.js';
+import '../../../Context.js';
+import '../../../../../base-modal/moderncssm';
+import '../base-footer/index.module.css';
+import '../desktop/desktop.module.css';
+import '../desktop/layout.module.css';
+import '../mobile/layout.mobile.module.css';
+import '../mobile/mobile.module.css';
+
+const FooterResponsive = ({ ...restProps }) => {
+    const isDesktop = useIsDesktop();
+    if (isDesktop) {
+        return React.createElement(FooterDesktop, { ...restProps });
+    }
+    return React.createElement(FooterMobile, { ...restProps });
+};
+
+export { FooterResponsive };

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

@@ -0,0 +1,71 @@
+/* */
+
+:root {
+    --universal-modal-header-background: var(--color-light-modal-bg-primary);
+
+    /* 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);
+}
+
+.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/desktop/Component.desktop.d.ts

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

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

@@ -0,0 +1,30 @@
+import React, { useContext, useRef, useEffect } from 'react';
+import cn from 'classnames';
+import { NavigationBarPrivate } from '../../../../../navigation-bar-private/moderncssm';
+import { ModalContext } from '../../../Context.js';
+import { ResponsiveContext } from '../../../ResponsiveContext.js';
+import styles from '../base-header/index.module.css';
+import desktopStyles from './desktop.module.css';
+import '../../../../../base-modal/moderncssm';
+
+const HeaderDesktop = ({ className, children, contentClassName, title, sticky, bigTitle = false, titleClassName, dataTestId, ...restProps }) => {
+    const { setHasHeader, componentRef } = useContext(ModalContext);
+    const { modalHeaderHighlighted } = useContext(ResponsiveContext) || {};
+    const titleRef = useRef(null);
+    const hasContent = Boolean(title || children || restProps.bottomAddons);
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React.createElement(NavigationBarPrivate, { ...restProps, view: 'desktop', dataTestId: dataTestId, dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn(styles.header, className, {
+            [styles.highlighted]: sticky && modalHeaderHighlighted && hasContent,
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+            [desktopStyles.sticky]: sticky,
+        }), contentClassName: cn(desktopStyles.content, contentClassName), bottomAddonsClassName: cn(desktopStyles.bottomAddons, {
+            [desktopStyles.medium]: bigTitle,
+        }), scrollableParentRef: componentRef, titleClassName: cn(desktopStyles.headerTitle, {
+            [desktopStyles.medium]: bigTitle,
+        }), titleRef: titleRef }, children));
+};
+
+export { HeaderDesktop };

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

@@ -0,0 +1,45 @@
+/* */
+
+:root {
+
+    /* scroll */
+}
+
+:root {
+    --universal-modal-header-desktop-font-weight: bold;
+    --universal-modal-header-desktop-font-family: var(--font-family-system);
+}
+
+.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.d.ts

@@ -0,0 +1,7 @@
+export { HeaderResponsive } from "./responsive/Component.responsive";
+export type { HeaderResponsiveProps } from "./responsive/Component.responsive";
+export { HeaderDesktop } from "./desktop/Component.desktop";
+export type { HeaderDesktopProps } from "./desktop/Component.desktop";
+export { HeaderMobile } from "./mobile/Component.mobile";
+export type { HeaderMobileProps } from "./mobile/Component.mobile";
+export {};

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

@@ -0,0 +1,13 @@
+export { HeaderResponsive } from './responsive/Component.responsive.js';
+export { HeaderDesktop } from './desktop/Component.desktop.js';
+export { HeaderMobile } from './mobile/Component.mobile.js';
+import 'react';
+import '../../../../mq/moderncssm';
+import 'classnames';
+import '../../../../navigation-bar-private/moderncssm';
+import '../../Context.js';
+import '../../../../base-modal/moderncssm';
+import '../../ResponsiveContext.js';
+import './base-header/index.module.css';
+import './desktop/desktop.module.css';
+import './mobile/mobile.module.css';

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

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

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

@@ -0,0 +1,24 @@
+import React, { useContext, useRef, useEffect } from 'react';
+import cn from 'classnames';
+import { NavigationBarPrivate } from '../../../../../navigation-bar-private/moderncssm';
+import { ModalContext } from '../../../Context.js';
+import styles from '../base-header/index.module.css';
+import mobileStyles from './mobile.module.css';
+import '../../../../../base-modal/moderncssm';
+
+const HeaderMobile = ({ className, children, contentClassName, title, sticky, titleClassName, dataTestId, ...restProps }) => {
+    const { setHasHeader, headerHighlighted, componentRef } = useContext(ModalContext);
+    const titleRef = useRef(null);
+    const hasContent = Boolean(title || children || restProps.bottomAddons);
+    useEffect(() => {
+        setHasHeader(true);
+    }, [setHasHeader]);
+    return (React.createElement(NavigationBarPrivate, { ...restProps, view: 'mobile', dataTestId: dataTestId, sticky: sticky, title: title, className: cn(styles.header, mobileStyles.header, className, {
+            [styles.highlighted]: sticky && headerHighlighted && hasContent,
+            [styles.sticky]: sticky,
+            [styles.hasContent]: hasContent,
+            [mobileStyles.sticky]: sticky,
+        }), contentClassName: cn(mobileStyles.content, contentClassName), bottomAddonsClassName: mobileStyles.bottomAddons, scrollableParentRef: componentRef, titleRef: titleRef, addonClassName: mobileStyles.addon }, children));
+};
+
+export { HeaderMobile };