@alfalab/core-components-side-panel 6.0.1 → 6.0.3

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 export declare type FooterProps = {
     /**
      * Контент футера

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { FooterProps } from './Component';
+import { type FC } from 'react';
+import { type FooterProps } from './Component';
 export declare type FooterDesktopProps = FooterProps & {
     /**
      * Размер (только для desktop версии компонента)

package/moderncssm/components/footer/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/footer/Component.desktop.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\n\nimport { Footer, FooterProps } from './Component';\n\nimport styles from './desktop.module.css';\n\nexport type FooterDesktopProps = FooterProps & {\n    /**\n     * Размер (только для desktop версии компонента)\n     */\n    size?: 's' | 500;\n};\n\nexport const FooterDesktop: FC<FooterDesktopProps> = ({\n    size = 500,\n    className,\n    sticky,\n    ...restProps\n}) => (\n    <Footer\n        className={cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {\n            [styles.sticky]: sticky,\n        })}\n        sticky={sticky}\n        {...restProps}\n    />\n);\n"],"names":[],"mappings":";;;;;;AAgBa,MAAA,aAAa,GAA2B,CAAC,EAClD,IAAI,GAAG,GAAG,EACV,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACf,MACG,oBAAC,MAAM,EAAA,EACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE;AAClE,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;KAC1B,CAAC,EACF,MAAM,EAAE,MAAM,KACV,SAAS,EAAA,CACf;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../src/components/footer/Component.desktop.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\n\nimport { Footer, type FooterProps } from './Component';\n\nimport styles from './desktop.module.css';\n\nexport type FooterDesktopProps = FooterProps & {\n    /**\n     * Размер (только для desktop версии компонента)\n     */\n    size?: 's' | 500;\n};\n\nexport const FooterDesktop: FC<FooterDesktopProps> = ({\n    size = 500,\n    className,\n    sticky,\n    ...restProps\n}) => (\n    <Footer\n        className={cn(className, size && styles[SIZE_TO_CLASSNAME_MAP[size]], {\n            [styles.sticky]: sticky,\n        })}\n        sticky={sticky}\n        {...restProps}\n    />\n);\n"],"names":[],"mappings":";;;;;;AAgBa,MAAA,aAAa,GAA2B,CAAC,EAClD,IAAI,GAAG,GAAG,EACV,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACf,MACG,oBAAC,MAAM,EAAA,EACH,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE;AAClE,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;KAC1B,CAAC,EACF,MAAM,EAAE,MAAM,KACV,SAAS,EAAA,CACf;;;;"}

package/moderncssm/components/footer/Component.js

@@ -11,6 +11,9 @@ const Footer = ({ children, className, sticky, layout = 'start', gap, dataTestId
     const responsiveContext = useContext(ResponsiveContext);
     useEffect(() => {
         setHasFooter(true);
+        return () => {
+            setHasFooter(false);
+        };
     }, [setHasFooter]);
     return (React.createElement("div", { className: cn(styles.footer, className, layoutStyles[layout], gap && layoutStyles[`gap-${gap}`], {
             [styles.highlighted]: sticky && footerHighlighted,

package/moderncssm/components/footer/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/footer/Component.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport styles from './index.module.css';\nimport layoutStyles from './layout.module.css';\n\nexport type FooterProps = {\n    /**\n     * Контент футера\n     */\n    children?: ReactNode;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Фиксирует футер\n     */\n    sticky?: boolean;\n\n    /**\n     * Выравнивание элементов футера\n     */\n    layout?: 'start' | 'center' | 'space-between' | 'column';\n\n    /**\n     * Отступы между элементами футера\n     */\n    gap?: 16 | 24 | 32;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n};\n\nexport const Footer: FC<FooterProps> = ({\n    children,\n    className,\n    sticky,\n    layout = 'start',\n    gap,\n    dataTestId,\n}) => {\n    const { footerHighlighted, setHasFooter } = useContext(ModalContext);\n    const responsiveContext = useContext(ResponsiveContext);\n\n    useEffect(() => {\n        setHasFooter(true);\n    }, [setHasFooter]);\n\n    return (\n        <div\n            className={cn(\n                styles.footer,\n                className,\n                layoutStyles[layout],\n                gap && layoutStyles[`gap-${gap}`],\n                {\n                    [styles.highlighted]: sticky && footerHighlighted,\n                    [styles.sticky]: sticky,\n                },\n            )}\n            data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer')}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MA2Ca,MAAM,GAAoB,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,GAAG,EACH,UAAU,GACb,KAAI;IACD,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;AACpE,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;IAEvD,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AACtB,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,MAAM,EACb,SAAS,EACT,YAAY,CAAC,MAAM,CAAC,EACpB,GAAG,IAAI,YAAY,CAAC,CAAO,IAAA,EAAA,GAAG,CAAE,CAAA,CAAC,EACjC;AACI,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB;AACjD,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CACJ,EACa,cAAA,EAAA,UAAU,IAAI,aAAa,CAAC,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAA,EAEjF,QAAQ,CACP;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/footer/Component.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport styles from './index.module.css';\nimport layoutStyles from './layout.module.css';\n\nexport type FooterProps = {\n    /**\n     * Контент футера\n     */\n    children?: ReactNode;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Фиксирует футер\n     */\n    sticky?: boolean;\n\n    /**\n     * Выравнивание элементов футера\n     */\n    layout?: 'start' | 'center' | 'space-between' | 'column';\n\n    /**\n     * Отступы между элементами футера\n     */\n    gap?: 16 | 24 | 32;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n};\n\nexport const Footer: FC<FooterProps> = ({\n    children,\n    className,\n    sticky,\n    layout = 'start',\n    gap,\n    dataTestId,\n}) => {\n    const { footerHighlighted, setHasFooter } = useContext(ModalContext);\n    const responsiveContext = useContext(ResponsiveContext);\n\n    useEffect(() => {\n        setHasFooter(true);\n\n        return () => {\n            setHasFooter(false);\n        };\n    }, [setHasFooter]);\n\n    return (\n        <div\n            className={cn(\n                styles.footer,\n                className,\n                layoutStyles[layout],\n                gap && layoutStyles[`gap-${gap}`],\n                {\n                    [styles.highlighted]: sticky && footerHighlighted,\n                    [styles.sticky]: sticky,\n                },\n            )}\n            data-test-id={dataTestId || getDataTestId(responsiveContext?.dataTestId, 'footer')}\n        >\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MA2Ca,MAAM,GAAoB,CAAC,EACpC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,GAAG,EACH,UAAU,GACb,KAAI;IACD,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;AACpE,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;IAEvD,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AAElB,QAAA,OAAO,MAAK;YACR,YAAY,CAAC,KAAK,CAAC;AACvB,SAAC;AACL,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,QACI,KACI,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACT,MAAM,CAAC,MAAM,EACb,SAAS,EACT,YAAY,CAAC,MAAM,CAAC,EACpB,GAAG,IAAI,YAAY,CAAC,CAAO,IAAA,EAAA,GAAG,CAAE,CAAA,CAAC,EACjC;AACI,YAAA,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB;AACjD,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,SAAA,CACJ,EACa,cAAA,EAAA,UAAU,IAAI,aAAa,CAAC,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAA,EAEjF,QAAQ,CACP;AAEd;;;;"}

package/moderncssm/components/footer/Component.mobile.d.ts

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

package/moderncssm/components/footer/Component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/footer/Component.mobile.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { Footer, FooterProps } from './Component';\n\nimport styles from './mobile.module.css';\n\nexport type FooterMobileProps = FooterProps;\n\nexport const FooterMobile: FC<FooterMobileProps> = ({\n    className,\n    sticky,\n    layout = 'start',\n    ...restProps\n}) => (\n    <Footer\n        className={cn(className, styles.footer, {\n            [styles.sticky]: sticky,\n        })}\n        sticky={sticky}\n        layout={layout}\n        {...restProps}\n    />\n);\n"],"names":[],"mappings":";;;;;AASO,MAAM,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACf,MACG,KAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;AACpC,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,KAAA,CAAC,EACF,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACV,GAAA,SAAS,EACf,CAAA;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../../src/components/footer/Component.mobile.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { Footer, type FooterProps } from './Component';\n\nimport styles from './mobile.module.css';\n\nexport type FooterMobileProps = FooterProps;\n\nexport const FooterMobile: FC<FooterMobileProps> = ({\n    className,\n    sticky,\n    layout = 'start',\n    ...restProps\n}) => (\n    <Footer\n        className={cn(className, styles.footer, {\n            [styles.sticky]: sticky,\n        })}\n        sticky={sticky}\n        layout={layout}\n        {...restProps}\n    />\n);\n"],"names":[],"mappings":";;;;;AASO,MAAM,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACf,MACG,KAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE;AACpC,QAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AAC1B,KAAA,CAAC,EACF,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACV,GAAA,SAAS,EACf,CAAA;;;;"}

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

@@ -1,3 +1,5 @@
+
+
 :root {
     --side-panel-s-footer-paddings: var(--gap-24) var(--gap-40) var(--gap-40);
 }

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

@@ -1,3 +1,5 @@
+
+
 :root {
     --side-panel-footer-background: var(--color-light-modal-bg-primary);
     --side-panel-footer-highlight-background: var(--color-light-modal-bg-primary);
@@ -7,7 +9,9 @@
 .footer {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
 }
 
 .sticky {

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

@@ -1,10 +1,12 @@
+
+
 :root {
     --side-panel-footer-default-gap: var(--gap-16);
 }
 
 .column {
     display: flex;
-    flex-direction: column
+    flex-direction: column;
 }
 
 .column > *:not(:last-child):not(:only-child) {
@@ -32,7 +34,7 @@
 }
 
 .space-between {
-    justify-content: space-between
+    justify-content: space-between;
 }
 
 .space-between > * {
@@ -42,7 +44,7 @@
 .start,
 .center,
 .space-between {
-    display: flex
+    display: flex;
 }
 
 .start > *:not(:last-child):not(:only-child), .center > *:not(:last-child):not(:only-child), .space-between > *:not(:last-child):not(:only-child) {

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

@@ -2,11 +2,11 @@
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
 .footer {
-    padding: var(--gap-16)
+    padding: var(--gap-16);
 }
 @media (display-mode: standalone) {
 .footer {
-        padding-bottom: calc(var(--sab) + var(--gap-16))
+        padding-bottom: calc(var(--sab) + var(--gap-16));
 }
     }
 .sticky {

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

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

package/moderncssm/components/header/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/header/Component.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport {\n    NavigationBarPrivate,\n    NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport desktopStyles from './desktop.module.css';\nimport styles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const Header: FC<HeaderProps> = ({\n    className,\n    children,\n    contentClassName,\n    title,\n    sticky,\n    hasCloser = true,\n    ...restProps\n}) => {\n    const { setHasHeader, headerHighlighted, onClose, componentRef } = useContext(ModalContext);\n    const { size = 500, view = 'desktop', dataTestId } = useContext(ResponsiveContext) || {};\n\n    useEffect(() => {\n        setHasHeader(true);\n    }, [setHasHeader]);\n\n    const hasContent = Boolean(title || children);\n\n    return (\n        <NavigationBarPrivate\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            {...restProps}\n            scrollableParentRef={componentRef}\n            view={view}\n            sticky={sticky}\n            title={title}\n            hasCloser={hasCloser}\n            onClose={onClose}\n            className={cn(styles.header, className, {\n                [styles.highlighted]: hasContent && sticky && headerHighlighted,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n                [desktopStyles.sticky]: view === 'desktop' && sticky,\n                [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',\n                [mobileStyles.sticky]: view === 'mobile' && sticky,\n                [mobileStyles.header]: view === 'mobile',\n            })}\n            contentClassName={cn(contentClassName, {\n                [desktopStyles.content]: view === 'desktop',\n                [mobileStyles.content]: view === 'mobile',\n            })}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAmBa,MAAA,MAAM,GAAoB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,GAAG,IAAI,EAChB,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;AAC3F,IAAA,MAAM,EAAE,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG,SAAS,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAE;IAExF,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AACtB,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;IAE7C,QACI,oBAAC,oBAAoB,EAAA,EACjB,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC3C,GAAA,SAAS,EACb,mBAAmB,EAAE,YAAY,EACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;YACpC,CAAC,MAAM,CAAC,WAAW,GAAG,UAAU,IAAI,MAAM,IAAI,iBAAiB;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;YAC/B,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,KAAK,SAAS,IAAI,MAAM;YACpD,CAAC,aAAa,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,KAAK,SAAS;YAChE,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ,IAAI,MAAM;AAClD,YAAA,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;AAC3C,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,EAAE;AACnC,YAAA,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,KAAK,SAAS;AAC3C,YAAA,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,KAAK,QAAQ;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACU;AAE/B;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/header/Component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport {\n    NavigationBarPrivate,\n    type NavigationBarPrivateProps,\n} from '@alfalab/core-components-navigation-bar-private';\nimport { getDataTestId } from '@alfalab/core-components-shared';\n\nimport { SIZE_TO_CLASSNAME_MAP } from '../../consts';\nimport { ModalContext } from '../../Context';\nimport { ResponsiveContext } from '../../ResponsiveContext';\n\nimport desktopStyles from './desktop.module.css';\nimport styles from './index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const Header: FC<HeaderProps> = ({\n    className,\n    children,\n    contentClassName,\n    title,\n    sticky,\n    hasCloser = true,\n    ...restProps\n}) => {\n    const { setHasHeader, headerHighlighted, onClose, componentRef } = useContext(ModalContext);\n    const { size = 500, view = 'desktop', dataTestId } = useContext(ResponsiveContext) || {};\n\n    useEffect(() => {\n        setHasHeader(true);\n    }, [setHasHeader]);\n\n    const hasContent = Boolean(title || children);\n\n    return (\n        <NavigationBarPrivate\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            {...restProps}\n            scrollableParentRef={componentRef}\n            view={view}\n            sticky={sticky}\n            title={title}\n            hasCloser={hasCloser}\n            onClose={onClose}\n            className={cn(styles.header, className, {\n                [styles.highlighted]: hasContent && sticky && headerHighlighted,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n                [desktopStyles.sticky]: view === 'desktop' && sticky,\n                [desktopStyles[SIZE_TO_CLASSNAME_MAP[size]]]: view === 'desktop',\n                [mobileStyles.sticky]: view === 'mobile' && sticky,\n                [mobileStyles.header]: view === 'mobile',\n            })}\n            contentClassName={cn(contentClassName, {\n                [desktopStyles.content]: view === 'desktop',\n                [mobileStyles.content]: view === 'mobile',\n            })}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAmBa,MAAA,MAAM,GAAoB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,SAAS,GAAG,IAAI,EAChB,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;AAC3F,IAAA,MAAM,EAAE,IAAI,GAAG,GAAG,EAAE,IAAI,GAAG,SAAS,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAE;IAExF,SAAS,CAAC,MAAK;QACX,YAAY,CAAC,IAAI,CAAC;AACtB,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;IAElB,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;IAE7C,QACI,oBAAC,oBAAoB,EAAA,EACjB,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC3C,GAAA,SAAS,EACb,mBAAmB,EAAE,YAAY,EACjC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE;YACpC,CAAC,MAAM,CAAC,WAAW,GAAG,UAAU,IAAI,MAAM,IAAI,iBAAiB;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;YAC/B,CAAC,aAAa,CAAC,MAAM,GAAG,IAAI,KAAK,SAAS,IAAI,MAAM;YACpD,CAAC,aAAa,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,KAAK,SAAS;YAChE,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ,IAAI,MAAM;AAClD,YAAA,CAAC,YAAY,CAAC,MAAM,GAAG,IAAI,KAAK,QAAQ;AAC3C,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,gBAAgB,EAAE;AACnC,YAAA,CAAC,aAAa,CAAC,OAAO,GAAG,IAAI,KAAK,SAAS;AAC3C,YAAA,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,KAAK,QAAQ;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACU;AAE/B;;;;"}

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

@@ -1,3 +1,5 @@
+
+
 :root {
     --side-panel-s-header-paddings: 28px 28px var(--gap-0);
     --side-panel-s-header-desktop-content-paddings: 6px var(--gap-12) var(--gap-16);

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

@@ -1,3 +1,5 @@
+
+
 :root {
     --side-panel-header-background: var(--color-light-modal-bg-primary);
     --side-panel-header-highlight-background: var(--color-light-modal-bg-primary);
@@ -7,7 +9,9 @@
 .header {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
 }
 
 .header:not(.hasContent) {
@@ -21,7 +25,7 @@
 
 .sticky {
     position: sticky;
-    z-index: 1
+    z-index: 1;
 }
 
 .sticky.hasContent {
@@ -60,7 +64,7 @@
 }
 
 .trim {
-    overflow: hidden
+    overflow: hidden;
 }
 
 .trim .title {

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

@@ -12,11 +12,11 @@
         var(--gap-4) var(--gap-8);
 }
 .header {
-    padding: var(--side-panel-header-mobile-paddings)
+    padding: var(--side-panel-header-mobile-paddings);
 }
 @media (display-mode: standalone) {
 .header {
-        padding-top: calc(var(--sat) + var(--side-panel-header-mobile-top-padding))
+        padding-top: calc(var(--sat) + var(--side-panel-header-mobile-top-padding));
 }
     }
 .sticky {

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
-import { DrawerProps } from '@alfalab/core-components-drawer/moderncssm';
+import { type BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
+import { type DrawerProps } from '@alfalab/core-components-drawer/moderncssm';
 import { ContentDesktop } from '../components/content/Component.desktop';
-import { ControlsProps } from '../components/controls';
+import { type ControlsProps } from '../components/controls';
 import { FooterDesktop } from '../components/footer/Component.desktop';
-import { HeaderProps } from '../components/header/Component';
+import { type HeaderProps } from '../components/header/Component';
 export declare type SidePanelDesktopProps = BaseModalProps & Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {
     /**
      * Ширина модального окна

package/moderncssm/desktop/Component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Drawer, DrawerProps } from '@alfalab/core-components-drawer';\n\nimport { ContentDesktop } from '../components/content/Component.desktop';\nimport { Controls, ControlsProps } from '../components/controls';\nimport { FooterDesktop } from '../components/footer/Component.desktop';\nimport { Header, HeaderProps } from '../components/header/Component';\nimport { SIZE_TO_CLASSNAME_MAP } from '../consts';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { TResponsiveModalContext } from '../typings';\n\nimport styles from './desktop.module.css';\nimport transitions from './transitions.desktop.module.css';\n\nexport type SidePanelDesktopProps = BaseModalProps &\n    Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {\n        /**\n         * Ширина модального окна\n         * @default \"s\"\n         */\n        size?: 's' | 500;\n\n        /**\n         * Управление наличием закрывающего крестика\n         * @default false\n         */\n        hasCloser?: boolean;\n    };\n\nconst SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopProps>(\n    (\n        {\n            size = 500,\n            children,\n            className,\n            wrapperClassName,\n            contentTransitionProps = {},\n            backdropProps,\n            placement = 'right',\n            dataTestId,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const responsiveContext = useContext(ResponsiveContext);\n        const modalRef = useRef<HTMLElement>(null);\n\n        const enterCn = cn({\n            [transitions.appearRight]: placement === 'right',\n            [transitions.appearLeft]: placement === 'left',\n        });\n\n        const exitCn = cn({\n            [transitions.exitActiveRight]: placement === 'right',\n            [transitions.exitActiveLeft]: placement === 'left',\n        });\n\n        const contextValue = React.useMemo<TResponsiveModalContext>(\n            () => ({ size, view: 'desktop', dataTestId }),\n            [size, dataTestId],\n        );\n\n        const renderContent = () => (\n            <Drawer\n                {...restProps}\n                dataTestId={dataTestId}\n                ref={mergeRefs([ref, modalRef])}\n                placement={placement}\n                wrapperClassName={wrapperClassName}\n                className={cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.hidden)}\n                backdropProps={backdropProps}\n                contentTransitionProps={{\n                    classNames: {\n                        appear: enterCn,\n                        enter: enterCn,\n                        appearActive: transitions.enterActive,\n                        enterActive: transitions.enterActive,\n                        exit: transitions.exit,\n                        exitActive: exitCn,\n                        exitDone: exitCn,\n                    },\n                    ...contentTransitionProps,\n                }}\n            >\n                {React.Children.map(children, (child) =>\n                    isValidElement(child) ? cloneElement(child, { size }) : child,\n                )}\n            </Drawer>\n        );\n\n        const renderWithContext = () => (\n            <ResponsiveContext.Provider value={contextValue}>\n                {renderContent()}\n            </ResponsiveContext.Provider>\n        );\n\n        return responsiveContext ? renderContent() : renderWithContext();\n    },\n);\n\nconst HeaderDesktop = Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>;\nconst ControlsDesktop = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {\n    Content: ContentDesktop,\n    Header: HeaderDesktop,\n    Footer: FooterDesktop,\n    Controls: ControlsDesktop,\n});\n\nexport {\n    SidePanelDesktop,\n    SidePanelDesktopComponent as SidePanelComponentDesktop,\n    ContentDesktop,\n    HeaderDesktop,\n    FooterDesktop,\n    ControlsDesktop,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,yBAAyB,GAAG,UAAU,CACxC,CACI,EACI,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,sBAAsB,GAAG,EAAE,EAC3B,aAAa,EACb,SAAS,GAAG,OAAO,EACnB,UAAU,EACV,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;AACvD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;IAE1C,MAAM,OAAO,GAAG,EAAE,CAAC;AACf,QAAA,CAAC,WAAW,CAAC,WAAW,GAAG,SAAS,KAAK,OAAO;AAChD,QAAA,CAAC,WAAW,CAAC,UAAU,GAAG,SAAS,KAAK,MAAM;AACjD,KAAA,CAAC;IAEF,MAAM,MAAM,GAAG,EAAE,CAAC;AACd,QAAA,CAAC,WAAW,CAAC,eAAe,GAAG,SAAS,KAAK,OAAO;AACpD,QAAA,CAAC,WAAW,CAAC,cAAc,GAAG,SAAS,KAAK,MAAM;AACrD,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAC9B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAC7C,CAAC,IAAI,EAAE,UAAU,CAAC,CACrB;IAED,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,GACC,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,EAC/B,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAC5E,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE;AACpB,YAAA,UAAU,EAAE;AACR,gBAAA,MAAM,EAAE,OAAO;AACf,gBAAA,KAAK,EAAE,OAAO;gBACd,YAAY,EAAE,WAAW,CAAC,WAAW;gBACrC,WAAW,EAAE,WAAW,CAAC,WAAW;gBACpC,IAAI,EAAE,WAAW,CAAC,IAAI;AACtB,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,QAAQ,EAAE,MAAM;AACnB,aAAA;AACD,YAAA,GAAG,sBAAsB;AAC5B,SAAA,EAAA,EAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAChC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,CAChE,CACI,CACZ;AAED,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,iBAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA,EAC1C,aAAa,EAAE,CACS,CAChC;IAED,OAAO,iBAAiB,GAAG,aAAa,EAAE,GAAG,iBAAiB,EAAE;AACpE,CAAC;AAGC,MAAA,aAAa,GAAG;AAChB,MAAA,eAAe,GAAG;AAExB,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,yBAAyB,EAAE;AAC9D,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,QAAQ,EAAE,eAAe;AAC5B,CAAA;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef, isValidElement, useContext, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Drawer, type DrawerProps } from '@alfalab/core-components-drawer';\n\nimport { ContentDesktop } from '../components/content/Component.desktop';\nimport { Controls, type ControlsProps } from '../components/controls';\nimport { FooterDesktop } from '../components/footer/Component.desktop';\nimport { Header, type HeaderProps } from '../components/header/Component';\nimport { SIZE_TO_CLASSNAME_MAP } from '../consts';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { type TResponsiveModalContext } from '../typings';\n\nimport styles from './desktop.module.css';\nimport transitions from './transitions.desktop.module.css';\n\nexport type SidePanelDesktopProps = BaseModalProps &\n    Pick<DrawerProps, 'placement' | 'nativeScrollbar' | 'contentTransitionProps'> & {\n        /**\n         * Ширина модального окна\n         * @default \"s\"\n         */\n        size?: 's' | 500;\n\n        /**\n         * Управление наличием закрывающего крестика\n         * @default false\n         */\n        hasCloser?: boolean;\n    };\n\nconst SidePanelDesktopComponent = forwardRef<HTMLDivElement, SidePanelDesktopProps>(\n    (\n        {\n            size = 500,\n            children,\n            className,\n            wrapperClassName,\n            contentTransitionProps = {},\n            backdropProps,\n            placement = 'right',\n            dataTestId,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const responsiveContext = useContext(ResponsiveContext);\n        const modalRef = useRef<HTMLElement>(null);\n\n        const enterCn = cn({\n            [transitions.appearRight]: placement === 'right',\n            [transitions.appearLeft]: placement === 'left',\n        });\n\n        const exitCn = cn({\n            [transitions.exitActiveRight]: placement === 'right',\n            [transitions.exitActiveLeft]: placement === 'left',\n        });\n\n        const contextValue = React.useMemo<TResponsiveModalContext>(\n            () => ({ size, view: 'desktop', dataTestId }),\n            [size, dataTestId],\n        );\n\n        const renderContent = () => (\n            <Drawer\n                {...restProps}\n                dataTestId={dataTestId}\n                ref={mergeRefs([ref, modalRef])}\n                placement={placement}\n                wrapperClassName={wrapperClassName}\n                className={cn(className, styles[SIZE_TO_CLASSNAME_MAP[size]], styles.hidden)}\n                backdropProps={backdropProps}\n                contentTransitionProps={{\n                    classNames: {\n                        appear: enterCn,\n                        enter: enterCn,\n                        appearActive: transitions.enterActive,\n                        enterActive: transitions.enterActive,\n                        exit: transitions.exit,\n                        exitActive: exitCn,\n                        exitDone: exitCn,\n                    },\n                    ...contentTransitionProps,\n                }}\n            >\n                {React.Children.map(children, (child) =>\n                    isValidElement(child) ? cloneElement(child, { size }) : child,\n                )}\n            </Drawer>\n        );\n\n        const renderWithContext = () => (\n            <ResponsiveContext.Provider value={contextValue}>\n                {renderContent()}\n            </ResponsiveContext.Provider>\n        );\n\n        return responsiveContext ? renderContent() : renderWithContext();\n    },\n);\n\nconst HeaderDesktop = Header as React.FC<Omit<HeaderProps, 'titleSize' | 'subtitle'>>;\nconst ControlsDesktop = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelDesktop = Object.assign(SidePanelDesktopComponent, {\n    Content: ContentDesktop,\n    Header: HeaderDesktop,\n    Footer: FooterDesktop,\n    Controls: ControlsDesktop,\n});\n\nexport {\n    SidePanelDesktop,\n    SidePanelDesktopComponent as SidePanelComponentDesktop,\n    ContentDesktop,\n    HeaderDesktop,\n    FooterDesktop,\n    ControlsDesktop,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,yBAAyB,GAAG,UAAU,CACxC,CACI,EACI,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,sBAAsB,GAAG,EAAE,EAC3B,aAAa,EACb,SAAS,GAAG,OAAO,EACnB,UAAU,EACV,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;AACvD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC;IAE1C,MAAM,OAAO,GAAG,EAAE,CAAC;AACf,QAAA,CAAC,WAAW,CAAC,WAAW,GAAG,SAAS,KAAK,OAAO;AAChD,QAAA,CAAC,WAAW,CAAC,UAAU,GAAG,SAAS,KAAK,MAAM;AACjD,KAAA,CAAC;IAEF,MAAM,MAAM,GAAG,EAAE,CAAC;AACd,QAAA,CAAC,WAAW,CAAC,eAAe,GAAG,SAAS,KAAK,OAAO;AACpD,QAAA,CAAC,WAAW,CAAC,cAAc,GAAG,SAAS,KAAK,MAAM;AACrD,KAAA,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAC9B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAC7C,CAAC,IAAI,EAAE,UAAU,CAAC,CACrB;IAED,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAA,GACC,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,EAC/B,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAC5E,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE;AACpB,YAAA,UAAU,EAAE;AACR,gBAAA,MAAM,EAAE,OAAO;AACf,gBAAA,KAAK,EAAE,OAAO;gBACd,YAAY,EAAE,WAAW,CAAC,WAAW;gBACrC,WAAW,EAAE,WAAW,CAAC,WAAW;gBACpC,IAAI,EAAE,WAAW,CAAC,IAAI;AACtB,gBAAA,UAAU,EAAE,MAAM;AAClB,gBAAA,QAAQ,EAAE,MAAM;AACnB,aAAA;AACD,YAAA,GAAG,sBAAsB;AAC5B,SAAA,EAAA,EAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAChC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,CAChE,CACI,CACZ;AAED,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,iBAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA,EAC1C,aAAa,EAAE,CACS,CAChC;IAED,OAAO,iBAAiB,GAAG,aAAa,EAAE,GAAG,iBAAiB,EAAE;AACpE,CAAC;AAGC,MAAA,aAAa,GAAG;AAChB,MAAA,eAAe,GAAG;AAExB,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,yBAAyB,EAAE;AAC9D,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,QAAQ,EAAE,eAAe;AAC5B,CAAA;;;;"}

package/moderncssm/desktop/desktop.module.css

@@ -1,3 +1,5 @@
+
+
 :root {
     --side-panel-s-width: 500px;
 }

package/moderncssm/desktop/transitions.desktop.module.css

@@ -11,7 +11,9 @@
 .enterActive {
     opacity: 1;
     transform: translateX(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
+    transition:
+        opacity 200ms ease-in,
+        transform 200ms ease-in;
 }
 
 .exit {
@@ -21,12 +23,16 @@
 
 .exitActiveRight {
     opacity: 0;
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out;
     transform: translateX(15px);
 }
 
 .exitActiveLeft {
     opacity: 0;
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out;
     transform: translateX(-15px);
 }

package/moderncssm/mobile/Component.mobile.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
+import { type BaseModalProps } from '@alfalab/core-components-base-modal/moderncssm';
 import { ContentMobile } from '../components/content/Component.mobile';
-import { ControlsProps } from '../components/controls';
+import { type ControlsProps } from '../components/controls';
 import { FooterMobile } from '../components/footer/Component.mobile';
 import { Header } from '../components/header/Component';
 export declare type SidePanelMobileProps = BaseModalProps & {

package/moderncssm/mobile/Component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal, BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport { ContentMobile } from '../components/content/Component.mobile';\nimport { Controls, ControlsProps } from '../components/controls';\nimport { FooterMobile } from '../components/footer/Component.mobile';\nimport { Header } from '../components/header/Component';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { TResponsiveModalContext } from '../typings';\n\nimport styles from './mobile.module.css';\nimport transitions from './transitions.mobile.module.css';\n\nexport type SidePanelMobileProps = BaseModalProps & {\n    /**\n     * Управление наличием закрывающего крестика\n     * @default false\n     */\n    hasCloser?: boolean;\n};\n\nconst SidePanelMobileComponent = forwardRef<HTMLDivElement, SidePanelMobileProps>(\n    ({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {\n        const responsiveContext = useContext(ResponsiveContext);\n        const contextValue = useMemo<TResponsiveModalContext>(\n            () => ({ size: 500, view: 'mobile', dataTestId }),\n            [dataTestId],\n        );\n\n        const renderContent = () => (\n            <BaseModal\n                {...restProps}\n                dataTestId={dataTestId}\n                ref={ref}\n                transitionProps={{\n                    classNames: transitions,\n                    ...transitionProps,\n                }}\n                className={cn(className, styles.component)}\n                scrollHandler='content'\n                contentProps={{\n                    ...restProps.contentProps,\n                    className: cn(styles.content, restProps.contentProps?.className),\n                }}\n            >\n                <div className={styles.mobileContent}>{children}</div>\n            </BaseModal>\n        );\n\n        const renderWithContext = () => (\n            <ResponsiveContext.Provider value={contextValue}>\n                {renderContent()}\n            </ResponsiveContext.Provider>\n        );\n\n        return responsiveContext ? renderContent() : renderWithContext();\n    },\n);\n\nconst ControlsMobile = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelMobile = Object.assign(SidePanelMobileComponent, {\n    Content: ContentMobile,\n    Header,\n    Footer: FooterMobile,\n    Controls: ControlsMobile,\n});\n\nexport {\n    SidePanelMobile,\n    SidePanelMobileComponent as SidePanelComponentMobile,\n    ContentMobile,\n    Header as HeaderMobile,\n    FooterMobile,\n    ControlsMobile,\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAuBM,MAAA,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AACxE,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;IACvD,MAAM,YAAY,GAAG,OAAO,CACxB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EACjD,CAAC,UAAU,CAAC,CACf;IAED,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAC,SAAS,EACF,EAAA,GAAA,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,WAAW;AACvB,YAAA,GAAG,eAAe;AACrB,SAAA,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1C,aAAa,EAAC,SAAS,EACvB,YAAY,EAAE;YACV,GAAG,SAAS,CAAC,YAAY;AACzB,YAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC;AACnE,SAAA,EAAA;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,IAAG,QAAQ,CAAO,CAC9C,CACf;AAED,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,iBAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA,EAC1C,aAAa,EAAE,CACS,CAChC;IAED,OAAO,iBAAiB,GAAG,aAAa,EAAE,GAAG,iBAAiB,EAAE;AACpE,CAAC;AAGC,MAAA,cAAc,GAAG;AAEvB,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,wBAAwB,EAAE;AAC5D,IAAA,OAAO,EAAE,aAAa;IACtB,MAAM;AACN,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,QAAQ,EAAE,cAAc;AAC3B,CAAA;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';\n\nimport { ContentMobile } from '../components/content/Component.mobile';\nimport { Controls, type ControlsProps } from '../components/controls';\nimport { FooterMobile } from '../components/footer/Component.mobile';\nimport { Header } from '../components/header/Component';\nimport { ResponsiveContext } from '../ResponsiveContext';\nimport { type TResponsiveModalContext } from '../typings';\n\nimport styles from './mobile.module.css';\nimport transitions from './transitions.mobile.module.css';\n\nexport type SidePanelMobileProps = BaseModalProps & {\n    /**\n     * Управление наличием закрывающего крестика\n     * @default false\n     */\n    hasCloser?: boolean;\n};\n\nconst SidePanelMobileComponent = forwardRef<HTMLDivElement, SidePanelMobileProps>(\n    ({ children, className, transitionProps, dataTestId, ...restProps }, ref) => {\n        const responsiveContext = useContext(ResponsiveContext);\n        const contextValue = useMemo<TResponsiveModalContext>(\n            () => ({ size: 500, view: 'mobile', dataTestId }),\n            [dataTestId],\n        );\n\n        const renderContent = () => (\n            <BaseModal\n                {...restProps}\n                dataTestId={dataTestId}\n                ref={ref}\n                transitionProps={{\n                    classNames: transitions,\n                    ...transitionProps,\n                }}\n                className={cn(className, styles.component)}\n                scrollHandler='content'\n                contentProps={{\n                    ...restProps.contentProps,\n                    className: cn(styles.content, restProps.contentProps?.className),\n                }}\n            >\n                <div className={styles.mobileContent}>{children}</div>\n            </BaseModal>\n        );\n\n        const renderWithContext = () => (\n            <ResponsiveContext.Provider value={contextValue}>\n                {renderContent()}\n            </ResponsiveContext.Provider>\n        );\n\n        return responsiveContext ? renderContent() : renderWithContext();\n    },\n);\n\nconst ControlsMobile = Controls as React.FC<Omit<ControlsProps, 'mobileLayout'>>;\n\nconst SidePanelMobile = Object.assign(SidePanelMobileComponent, {\n    Content: ContentMobile,\n    Header,\n    Footer: FooterMobile,\n    Controls: ControlsMobile,\n});\n\nexport {\n    SidePanelMobile,\n    SidePanelMobileComponent as SidePanelComponentMobile,\n    ContentMobile,\n    Header as HeaderMobile,\n    FooterMobile,\n    ControlsMobile,\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAuBM,MAAA,wBAAwB,GAAG,UAAU,CACvC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;AACxE,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,iBAAiB,CAAC;IACvD,MAAM,YAAY,GAAG,OAAO,CACxB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EACjD,CAAC,UAAU,CAAC,CACf;IAED,MAAM,aAAa,GAAG,OAClB,KAAA,CAAA,aAAA,CAAC,SAAS,EACF,EAAA,GAAA,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,WAAW;AACvB,YAAA,GAAG,eAAe;AACrB,SAAA,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1C,aAAa,EAAC,SAAS,EACvB,YAAY,EAAE;YACV,GAAG,SAAS,CAAC,YAAY;AACzB,YAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC;AACnE,SAAA,EAAA;QAED,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,IAAG,QAAQ,CAAO,CAC9C,CACf;AAED,IAAA,MAAM,iBAAiB,GAAG,OACtB,oBAAC,iBAAiB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAAA,EAC1C,aAAa,EAAE,CACS,CAChC;IAED,OAAO,iBAAiB,GAAG,aAAa,EAAE,GAAG,iBAAiB,EAAE;AACpE,CAAC;AAGC,MAAA,cAAc,GAAG;AAEvB,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,wBAAwB,EAAE;AAC5D,IAAA,OAAO,EAAE,aAAa;IACtB,MAAM;AACN,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,QAAQ,EAAE,cAAc;AAC3B,CAAA;;;;"}

package/moderncssm/mobile/mobile.module.css

@@ -17,7 +17,7 @@
 @media (display-mode: standalone) {
 .content {
         padding-top: var(--sat);
-        padding-bottom: var(--sab)
+        padding-bottom: var(--sab);
 }
     }
 .mobileContent {

package/moderncssm/mobile/transitions.mobile.module.css

@@ -8,7 +8,9 @@
 .enterActive {
     opacity: 1;
     transform: translateY(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
+    transition:
+        opacity 200ms ease-in,
+        transform 200ms ease-in;
 }
 
 .exit {
@@ -20,5 +22,7 @@
 .exitDone {
     opacity: 0;
     transform: translateY(15px);
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-side-panel",
-    "version": "6.0.1",
+    "version": "6.0.3",
     "description": "SidePanel component",
     "keywords": [],
     "license": "MIT",
@@ -13,7 +13,7 @@
         "@alfalab/core-components-base-modal": "^6.0.1",
         "@alfalab/core-components-drawer": "^6.0.1",
         "@alfalab/core-components-mq": "^5.0.1",
-        "@alfalab/core-components-navigation-bar-private": "^1.0.1",
+        "@alfalab/core-components-navigation-bar-private": "^1.1.0",
         "@alfalab/core-components-shared": "^1.1.0",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
@@ -27,6 +27,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
-    "varsVersion": "10.1.0"
+    "themesVersion": "14.1.3",
+    "varsVersion": "10.1.1"
 }

package/src/Component.responsive.tsx

@@ -1,7 +1,7 @@
-import React, { FC, forwardRef, useContext, useMemo } from 'react';
+import React, { type FC, forwardRef, useContext, useMemo } from 'react';
 
-import { BaseModalProps } from '@alfalab/core-components-base-modal';
-import { DrawerProps } from '@alfalab/core-components-drawer';
+import { type BaseModalProps } from '@alfalab/core-components-base-modal';
+import { type DrawerProps } from '@alfalab/core-components-drawer';
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { Controls } from './components/controls';
@@ -9,7 +9,7 @@ import { Header } from './components/header/Component';
 import { SidePanelDesktop } from './desktop';
 import { SidePanelMobile } from './mobile';
 import { ResponsiveContext } from './ResponsiveContext';
-import { TResponsiveModalContext } from './typings';
+import { type TResponsiveModalContext } from './typings';
 
 export type SidePanelResponsiveProps = BaseModalProps &
     Pick<DrawerProps, 'contentTransitionProps' | 'placement' | 'nativeScrollbar'> & {

package/src/ResponsiveContext.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 
-import type { TResponsiveModalContext } from './typings';
+import { type TResponsiveModalContext } from './typings';
 
 export const ResponsiveContext = React.createContext<TResponsiveModalContext>(null);

package/src/components/content/Component.desktop.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import cn from 'classnames';
 
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 
-import { Content, ContentProps } from './Component';
+import { Content, type ContentProps } from './Component';
 
 import styles from './desktop.module.css';
 

package/src/components/content/Component.mobile.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import cn from 'classnames';
 
-import { Content, ContentProps } from './Component';
+import { Content, type ContentProps } from './Component';
 
 import styles from './mobile.module.css';
 

package/src/components/content/Component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, Ref, useContext } from 'react';
+import React, { type FC, type ReactNode, type Ref, useContext } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';

package/src/components/controls/Component.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext } from 'react';
+import React, { type ReactNode, useContext } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';

package/src/components/footer/Component.desktop.tsx

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import cn from 'classnames';
 
 import { SIZE_TO_CLASSNAME_MAP } from '../../consts';
 
-import { Footer, FooterProps } from './Component';
+import { Footer, type FooterProps } from './Component';
 
 import styles from './desktop.module.css';
 

package/src/components/footer/Component.mobile.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import cn from 'classnames';
 
-import { Footer, FooterProps } from './Component';
+import { Footer, type FooterProps } from './Component';
 
 import styles from './mobile.module.css';
 

package/src/components/footer/Component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useContext, useEffect } from 'react';
+import React, { type FC, type ReactNode, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
@@ -54,6 +54,10 @@ export const Footer: FC<FooterProps> = ({
 
     useEffect(() => {
         setHasFooter(true);
+
+        return () => {
+            setHasFooter(false);
+        };
     }, [setHasFooter]);
 
     return (

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

@@ -3,7 +3,9 @@
 .footer {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
 }
 
 .sticky {

package/src/components/header/Component.tsx

@@ -1,9 +1,9 @@
-import React, { FC, useContext, useEffect } from 'react';
+import React, { type FC, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
 import {
     NavigationBarPrivate,
-    NavigationBarPrivateProps,
+    type NavigationBarPrivateProps,
 } from '@alfalab/core-components-navigation-bar-private';
 import { getDataTestId } from '@alfalab/core-components-shared';
 

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

@@ -3,7 +3,9 @@
 .header {
     width: 100%;
     box-sizing: border-box;
-    transition: box-shadow 0.2s ease, background 0.2s ease;
+    transition:
+        box-shadow 0.2s ease,
+        background 0.2s ease;
 
     &:not(.hasContent) {
         pointer-events: none;

package/src/desktop/Component.desktop.tsx

@@ -2,16 +2,16 @@ import React, { cloneElement, forwardRef, isValidElement, useContext, useRef } f
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
-import { BaseModalProps } from '@alfalab/core-components-base-modal';
-import { Drawer, DrawerProps } from '@alfalab/core-components-drawer';
+import { type BaseModalProps } from '@alfalab/core-components-base-modal';
+import { Drawer, type DrawerProps } from '@alfalab/core-components-drawer';
 
 import { ContentDesktop } from '../components/content/Component.desktop';
-import { Controls, ControlsProps } from '../components/controls';
+import { Controls, type ControlsProps } from '../components/controls';
 import { FooterDesktop } from '../components/footer/Component.desktop';
-import { Header, HeaderProps } from '../components/header/Component';
+import { Header, type HeaderProps } from '../components/header/Component';
 import { SIZE_TO_CLASSNAME_MAP } from '../consts';
 import { ResponsiveContext } from '../ResponsiveContext';
-import { TResponsiveModalContext } from '../typings';
+import { type TResponsiveModalContext } from '../typings';
 
 import styles from './desktop.module.css';
 import transitions from './transitions.desktop.module.css';

package/src/desktop/transitions.desktop.module.css

@@ -1,6 +1,8 @@
 @define-mixin exit-active {
     opacity: 0;
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+        opacity 200ms ease-out,
+        transform 200ms ease-out;
 }
 
 .enterRight {
@@ -16,7 +18,9 @@
 .enterActive {
     opacity: 1;
     transform: translateX(0);
-    transition: opacity 200ms ease-in, transform 200ms ease-in;
+    transition:
+        opacity 200ms ease-in,
+        transform 200ms ease-in;
 }
 
 .exit {

package/src/mobile/Component.mobile.tsx

@@ -1,14 +1,14 @@
 import React, { forwardRef, useContext, useMemo } from 'react';
 import cn from 'classnames';
 
-import { BaseModal, BaseModalProps } from '@alfalab/core-components-base-modal';
+import { BaseModal, type BaseModalProps } from '@alfalab/core-components-base-modal';
 
 import { ContentMobile } from '../components/content/Component.mobile';
-import { Controls, ControlsProps } from '../components/controls';
+import { Controls, type ControlsProps } from '../components/controls';
 import { FooterMobile } from '../components/footer/Component.mobile';
 import { Header } from '../components/header/Component';
 import { ResponsiveContext } from '../ResponsiveContext';
-import { TResponsiveModalContext } from '../typings';
+import { type TResponsiveModalContext } from '../typings';
 
 import styles from './mobile.module.css';
 import transitions from './transitions.mobile.module.css';