@alfalab/core-components 47.11.0 → 47.12.1-beta.0

package/side-panel/moderncssm/components/header/Component.js

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

package/side-panel/moderncssm/components/header/desktop.module.css

@@ -0,0 +1,41 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+    --side-panel-s-header-paddings: 28px 28px 0;
+
+    /* scroll */
+
+    /* desktop */
+    --side-panel-s-header-desktop-content-paddings: 6px var(--gap-s) var(--gap-m);
+    --side-panel-s-header-desktop-font-size: 30px;
+    --side-panel-s-header-desktop-line-height: 36px;
+    --side-panel-header-desktop-font-weight: bold;
+    --side-panel-header-desktop-font-family: var(--font-family-system);
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.content {
+    font-weight: var(--side-panel-header-desktop-font-weight);
+    font-family: var(--side-panel-header-desktop-font-family);
+}
+
+.size-500 .content {
+    padding: var(--side-panel-s-header-desktop-content-paddings);
+    font-size: var(--side-panel-s-header-desktop-font-size);
+    line-height: var(--side-panel-s-header-desktop-line-height);
+}
+
+.size-500 {
+    padding: var(--side-panel-s-header-paddings);
+}
+
+.sticky {
+    top: 0;
+}

package/side-panel/moderncssm/components/header/index.module.css

@@ -0,0 +1,84 @@
+/* */
+
+:root {
+    --side-panel-header-background: var(--color-light-modal-bg-primary);
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+    --side-panel-header-highlight-background: var(--color-light-modal-bg-primary);
+    --side-panel-header-highlight-box-shadow: 0 1px 0 0 var(--color-light-neutral-300);
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.header {
+    width: 100%;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s ease, background 0.2s ease
+}
+
+.header:not(.hasContent) {
+        pointer-events: none;
+    }
+
+.highlighted {
+    background: var(--side-panel-header-highlight-background);
+    box-shadow: var(--side-panel-header-highlight-box-shadow);
+}
+
+.sticky {
+    position: sticky;
+    z-index: 1
+}
+
+.sticky.hasContent {
+        background: var(--side-panel-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/side-panel/moderncssm/components/header/mobile.module.css

@@ -0,0 +1,38 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+    --side-panel-header-mobile-content-paddings: var(--gap-s) var(--gap-xs);
+    --side-panel-header-mobile-font-size: 18px;
+    --side-panel-header-mobile-line-height: 24px;
+    --side-panel-header-mobile-font-family: var(--font-family-system);
+    --side-panel-header-mobile-font-weight: bold;
+
+    /* paddings */
+    --side-panel-header-mobile-paddings: var(--gap-2xs) var(--gap-xs);
+}
+
+.header {
+    padding: var(--side-panel-header-mobile-paddings);
+}
+
+.sticky {
+    top: 0;
+}
+
+.content {
+    font-size: var(--side-panel-header-mobile-font-size);
+    line-height: var(--side-panel-header-mobile-line-height);
+    font-family: var(--side-panel-header-mobile-font-family);
+    font-weight: var(--side-panel-header-mobile-font-weight);
+    padding: var(--side-panel-header-mobile-content-paddings);
+}

package/side-panel/moderncssm/consts.d.ts

@@ -0,0 +1,5 @@
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    500: string;
+};
+export { SIZE_TO_CLASSNAME_MAP };

package/side-panel/moderncssm/consts.js

@@ -0,0 +1,6 @@
+const SIZE_TO_CLASSNAME_MAP = {
+    s: 'size-500',
+    500: 'size-500',
+};
+
+export { SIZE_TO_CLASSNAME_MAP };

package/side-panel/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseModalProps } from "../../../base-modal";
+import { DrawerProps } from "../../../drawer";
+import { ControlsProps } from "../components/controls/index";
+import { HeaderProps } from "../components/header/Component";
+type SidePanelDesktopProps = BaseModalProps & Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: 's' | 500;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+declare const SidePanelDesktop: React.ForwardRefExoticComponent<BaseModalProps & Pick<DrawerProps, "contentTransitionProps" | "nativeScrollbar" | "placement"> & {
+    /**
+     * Ширина модального окна
+     * @default "s"
+     */
+    size?: "s" | 500 | undefined;
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+} & 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 { SidePanelDesktopProps, SidePanelDesktop };

package/side-panel/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,63 @@
+import React, { forwardRef, useContext, useRef, isValidElement, cloneElement } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { Drawer } from '../../../drawer/moderncssm';
+import { ContentDesktop } from '../components/content/Component.desktop.js';
+import { Controls } from '../components/controls/Component.js';
+import { FooterDesktop } from '../components/footer/Component.desktop.js';
+import { Header } from '../components/header/Component.js';
+import { SIZE_TO_CLASSNAME_MAP } from '../consts.js';
+import { ResponsiveContext } from '../ResponsiveContext.js';
+import styles from './desktop.module.css';
+import transitions from './transitions.desktop.module.css';
+import '../components/content/Component.js';
+import '../../../shared/moderncssm';
+import '../Context.js';
+import '../../../base-modal/moderncssm';
+import '../components/content/index.module.css';
+import '../components/content/desktop.module.css';
+import '../components/footer/layout.module.css';
+import '../components/controls/index.module.css';
+import '../components/footer/Component.js';
+import '../components/footer/index.module.css';
+import '../components/footer/desktop.module.css';
+import '../../../navigation-bar-private/moderncssm';
+import '../components/header/desktop.module.css';
+import '../components/header/index.module.css';
+import '../components/header/mobile.module.css';
+
+const SidePanelDesktopComponent = forwardRef(({ size = 500, children, className, wrapperClassName, contentTransitionProps = {}, backdropProps, placement = 'right', dataTestId, ...restProps }, ref) => {
+    const responsiveContext = useContext(ResponsiveContext);
+    const modalRef = useRef(null);
+    const enterCn = cn({
+        [transitions.appearRight]: placement === 'right',
+        [transitions.appearLeft]: placement === 'left',
+    });
+    const exitCn = cn({
+        [transitions.exitActiveRight]: placement === 'right',
+        [transitions.exitActiveLeft]: placement === 'left',
+    });
+    const contextValue = React.useMemo(() => ({ size, view: 'desktop', dataTestId }), [size, dataTestId]);
+    const renderContent = () => (React.createElement(Drawer, { ...restProps, dataTestId: dataTestId, ref: mergeRefs([ref, modalRef]), placement: placement, wrapperClassName: wrapperClassName, className: cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.hidden), backdropProps: backdropProps, contentTransitionProps: {
+            classNames: {
+                appear: enterCn,
+                enter: enterCn,
+                appearActive: transitions.enterActive,
+                enterActive: transitions.enterActive,
+                exit: transitions.exit,
+                exitActive: exitCn,
+                exitDone: exitCn,
+            },
+            ...contentTransitionProps,
+        } }, React.Children.map(children, (child) => isValidElement(child) ? cloneElement(child, { size }) : child)));
+    const renderWithContext = () => (React.createElement(ResponsiveContext.Provider, { value: contextValue }, renderContent()));
+    return responsiveContext ? renderContent() : renderWithContext();
+});
+const SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {
+    Content: ContentDesktop,
+    Header: Header,
+    Footer: FooterDesktop,
+    Controls: Controls,
+});
+
+export { SidePanelDesktop };

package/side-panel/moderncssm/desktop/desktop.module.css

@@ -0,0 +1,25 @@
+/* */
+
+:root {
+
+    /* sizes */
+    --side-panel-s-width: 500px;
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.size-500.size-500 {
+    width: var(--side-panel-s-width);
+}
+
+.hidden {
+    overflow-x: hidden;
+}

package/side-panel/moderncssm/desktop/index.d.ts

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

package/side-panel/moderncssm/desktop/index.js

@@ -0,0 +1,28 @@
+export { SidePanelDesktop } from './Component.desktop.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '../../../drawer/moderncssm';
+import '../components/content/Component.desktop.js';
+import '../consts.js';
+import '../components/content/Component.js';
+import '../../../shared/moderncssm';
+import '../Context.js';
+import '../../../base-modal/moderncssm';
+import '../ResponsiveContext.js';
+import '../components/content/index.module.css';
+import '../components/content/desktop.module.css';
+import '../components/controls/Component.js';
+import '../components/footer/layout.module.css';
+import '../components/controls/index.module.css';
+import '../components/footer/Component.desktop.js';
+import '../components/footer/Component.js';
+import '../components/footer/index.module.css';
+import '../components/footer/desktop.module.css';
+import '../components/header/Component.js';
+import '../../../navigation-bar-private/moderncssm';
+import '../components/header/desktop.module.css';
+import '../components/header/index.module.css';
+import '../components/header/mobile.module.css';
+import './desktop.module.css';
+import './transitions.desktop.module.css';

package/side-panel/moderncssm/desktop/transitions.desktop.module.css

@@ -0,0 +1,32 @@
+.enterRight {
+    opacity: 0;
+    transform: translateX(15px);
+}
+
+.enterLeft {
+    opacity: 0;
+    transform: translateX(-15px);
+}
+
+.enterActive {
+    opacity: 1;
+    transform: translateX(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.exit {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.exitActiveRight {
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transform: translateX(15px);
+}
+
+.exitActiveLeft {
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transform: translateX(-15px);
+}

package/side-panel/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { SidePanelResponsive as SidePanel, SidePanelResponsiveProps as SidePanelProps } from "./Component.responsive";
+export {};

package/side-panel/moderncssm/index.js

@@ -0,0 +1,37 @@
+export { SidePanelResponsive as SidePanel } from './Component.responsive.js';
+import 'react';
+import '../../mq/moderncssm';
+import '../../shared/moderncssm';
+import './components/controls/Component.js';
+import 'classnames';
+import './ResponsiveContext.js';
+import './components/footer/layout.module.css';
+import './components/controls/index.module.css';
+import './components/header/Component.js';
+import '../../navigation-bar-private/moderncssm';
+import './consts.js';
+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 './desktop/Component.desktop.js';
+import 'react-merge-refs';
+import '../../drawer/moderncssm';
+import './components/content/Component.desktop.js';
+import './components/content/Component.js';
+import './components/content/index.module.css';
+import './components/content/desktop.module.css';
+import './components/footer/Component.desktop.js';
+import './components/footer/Component.js';
+import './components/footer/index.module.css';
+import './components/footer/desktop.module.css';
+import './desktop/desktop.module.css';
+import './desktop/transitions.desktop.module.css';
+import './mobile/Component.mobile.js';
+import './components/content/Component.mobile.js';
+import './components/content/mobile.module.css';
+import './components/footer/Component.mobile.js';
+import './components/footer/mobile.module.css';
+import './mobile/mobile.module.css';
+import './mobile/transitions.mobile.module.css';

package/side-panel/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import React from 'react';
+import { BaseModalProps } from "../../../base-modal";
+import { ControlsProps } from "../components/controls/index";
+type SidePanelMobileProps = BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean;
+};
+declare const SidePanelMobile: React.ForwardRefExoticComponent<BaseModalProps & {
+    /**
+     * Управление наличием закрывающего крестика
+     * @default false
+     */
+    hasCloser?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("../components/content/Component").ContentProps>;
+    Header: React.FC<import("../components/header/Component").HeaderProps>;
+    Footer: React.FC<import("../components/footer/Component").FooterProps>;
+    Controls: React.FC<Omit<ControlsProps, "mobileLayout">>;
+};
+export { SidePanelMobileProps, SidePanelMobile };

package/side-panel/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,45 @@
+import React, { forwardRef, useContext, useMemo } from 'react';
+import cn from 'classnames';
+import { BaseModal } from '../../../base-modal/moderncssm';
+import { ContentMobile } from '../components/content/Component.mobile.js';
+import { Controls } from '../components/controls/Component.js';
+import { FooterMobile } from '../components/footer/Component.mobile.js';
+import { Header } from '../components/header/Component.js';
+import { ResponsiveContext } from '../ResponsiveContext.js';
+import styles from './mobile.module.css';
+import transitions from './transitions.mobile.module.css';
+import '../components/content/Component.js';
+import '../../../shared/moderncssm';
+import '../Context.js';
+import '../components/content/index.module.css';
+import '../components/content/mobile.module.css';
+import '../components/footer/layout.module.css';
+import '../components/controls/index.module.css';
+import '../components/footer/Component.js';
+import '../components/footer/index.module.css';
+import '../components/footer/mobile.module.css';
+import '../../../navigation-bar-private/moderncssm';
+import '../consts.js';
+import '../components/header/desktop.module.css';
+import '../components/header/index.module.css';
+import '../components/header/mobile.module.css';
+
+const SidePanelMobileComponent = forwardRef(({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {
+    const responsiveContext = useContext(ResponsiveContext);
+    const contextValue = useMemo(() => ({ size: 500, view: 'mobile', dataTestId }), [dataTestId]);
+    const renderContent = () => (React.createElement(BaseModal, { ...restProps, dataTestId: dataTestId, ref: ref, transitionProps: {
+            classNames: transitions,
+            ...transitionProps,
+        }, className: cn(className, styles.component), scrollHandler: 'content' },
+        React.createElement("div", { className: styles.mobileContent }, children)));
+    const renderWithContext = () => (React.createElement(ResponsiveContext.Provider, { value: contextValue }, renderContent()));
+    return responsiveContext ? renderContent() : renderWithContext();
+});
+const SidePanelMobile = Object.assign(SidePanelMobileComponent, {
+    Content: ContentMobile,
+    Header,
+    Footer: FooterMobile,
+    Controls: Controls,
+});
+
+export { SidePanelMobile };

package/side-panel/moderncssm/mobile/index.d.ts

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

package/side-panel/moderncssm/mobile/index.js

@@ -0,0 +1,26 @@
+export { SidePanelMobile } from './Component.mobile.js';
+import 'react';
+import 'classnames';
+import '../../../base-modal/moderncssm';
+import '../components/content/Component.mobile.js';
+import '../components/content/Component.js';
+import '../../../shared/moderncssm';
+import '../Context.js';
+import '../ResponsiveContext.js';
+import '../components/content/index.module.css';
+import '../components/content/mobile.module.css';
+import '../components/controls/Component.js';
+import '../components/footer/layout.module.css';
+import '../components/controls/index.module.css';
+import '../components/footer/Component.mobile.js';
+import '../components/footer/Component.js';
+import '../components/footer/index.module.css';
+import '../components/footer/mobile.module.css';
+import '../components/header/Component.js';
+import '../../../navigation-bar-private/moderncssm';
+import '../consts.js';
+import '../components/header/desktop.module.css';
+import '../components/header/index.module.css';
+import '../components/header/mobile.module.css';
+import './mobile.module.css';
+import './transitions.mobile.module.css';

package/side-panel/moderncssm/mobile/mobile.module.css

@@ -0,0 +1,37 @@
+/* */
+
+:root {
+
+    /* sizes */
+
+    /* paddings */
+
+    /* scroll */
+
+    /* desktop */
+
+    /* mobile */
+
+    /* paddings */
+}
+
+.component {
+    top: 0;
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-width: 600px;
+}
+
+.component.component {
+    position: fixed;
+    flex: 1;
+}
+
+.mobileContent {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex: 1;
+}

package/side-panel/moderncssm/mobile/transitions.mobile.module.css

@@ -0,0 +1,24 @@
+.appear,
+.enter {
+    opacity: 0;
+    transform: translateY(15px);
+}
+
+.appearActive,
+.enterActive {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 200ms ease-in, transform 200ms ease-in;
+}
+
+.exit {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.exitActive,
+.exitDone {
+    opacity: 0;
+    transform: translateY(15px);
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+}

package/side-panel/moderncssm/shared/index.d.ts

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

package/side-panel/moderncssm/shared/index.js

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

package/side-panel/moderncssm/typings.d.ts

@@ -0,0 +1,7 @@
+type View = 'desktop' | 'mobile';
+type TResponsiveModalContext = {
+    view: View;
+    size: 's' | 500;
+    dataTestId?: string;
+} | null;
+export { View, TResponsiveModalContext };

package/side-panel/moderncssm/typings.js

@@ -0,0 +1 @@
+

package/side-panel/moderncssm/utils.d.ts

@@ -0,0 +1,11 @@
+declare function getSidePanelTestIds(dataTestId: string): {
+    modal: string;
+    content: string;
+    footer: string;
+    controls: string;
+    header: string;
+    title: string;
+    closer: string;
+    backButton: string;
+};
+export { getSidePanelTestIds };

package/side-panel/moderncssm/utils.js

@@ -0,0 +1,16 @@
+import { getDataTestId } from '../../shared/moderncssm';
+
+function getSidePanelTestIds(dataTestId) {
+    return {
+        modal: dataTestId,
+        content: getDataTestId(dataTestId, 'content'),
+        footer: getDataTestId(dataTestId, 'footer'),
+        controls: getDataTestId(dataTestId, 'controls'),
+        header: getDataTestId(dataTestId, 'header'),
+        title: getDataTestId(dataTestId, 'header-title'),
+        closer: getDataTestId(dataTestId, 'header-closer'),
+        backButton: getDataTestId(dataTestId, 'header-back-button'),
+    };
+}
+
+export { getSidePanelTestIds };