@alfalab/core-components-universal-modal 3.0.2 → 3.0.3-alfasans

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

@@ -1,26 +1,22 @@
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/moderncssm';
 import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
-import { ModalContext } from '../../../Context.js';
-import { UniversalModalContext } from '../../../context/universal-modal-context.js';
+import { useBaseHeader } from '../base-header/useBaseHeader.js';
 import styles from '../base-header/index.module.css';
 import desktopStyles from './desktop.module.css';
 
 const HeaderDesktop = forwardRef((props, ref) => {
     const { className, children, title, sticky, bigTitle = false, titleClassName, dataTestId, bottomAddonsClassName, onClose, ...restProps } = props;
-    const { componentRef, onClose: handleCloseByContext } = useContext(ModalContext);
-    const { modalHeaderHighlighted } = useContext(UniversalModalContext);
-    const titleRef = useRef(null);
-    const hasContent = Boolean(title || children || restProps.bottomAddons);
-    const handleClose = (...args) => {
-        if (onClose) {
-            return onClose(...args);
-        }
-        return handleCloseByContext(...args);
-    };
+    const { bottomAddons } = restProps;
+    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({
+        title,
+        children,
+        bottomAddons,
+        onClose,
+    });
     return (React.createElement(NavigationBarPrivate, { ...restProps, ref: ref, view: 'desktop', dataTestId: getDataTestId(dataTestId, 'header'), dataName: 'modalHeaderDesktop', sticky: sticky, title: title, className: cn(styles.header, desktopStyles.header, className, {
-            [styles.highlighted]: sticky && modalHeaderHighlighted && hasContent,
+            [styles.highlighted]: sticky && headerHighlighted && hasContent,
             [styles.sticky]: sticky,
             [styles.hasContent]: hasContent,
             [desktopStyles.medium]: bigTitle,

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

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/header/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useRef } 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 { ModalContext } from '../../../Context';\nimport { UniversalModalContext } from '../../../context/universal-modal-context';\n\nimport styles from '../base-header/index.module.css';\nimport desktopStyles from './desktop.module.css';\n\nexport interface HeaderDesktopProps\n    extends Omit<\n        NavigationBarPrivateProps,\n        'size' | 'view' | 'parentRef' | 'titleSize' | 'subtitle'\n    > {\n    /**\n     * Заголовок в шапке крупного размера\n     * @default false\n     */\n    bigTitle?: boolean;\n}\n\nexport const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((props, ref) => {\n    const {\n        className,\n        children,\n        title,\n        sticky,\n        bigTitle = false,\n        titleClassName,\n        dataTestId,\n        bottomAddonsClassName,\n        onClose,\n        ...restProps\n    } = props;\n\n    const { componentRef, onClose: handleCloseByContext } = useContext(ModalContext);\n    const { modalHeaderHighlighted } = useContext(UniversalModalContext);\n\n    const titleRef = useRef<HTMLDivElement>(null);\n\n    const hasContent = Boolean(title || children || restProps.bottomAddons);\n\n    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {\n        if (onClose) {\n            return onClose(...args);\n        }\n\n        return handleCloseByContext(...args);\n    };\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            ref={ref}\n            view='desktop'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            dataName='modalHeaderDesktop'\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, desktopStyles.header, className, {\n                [styles.highlighted]: sticky && modalHeaderHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n                [desktopStyles.medium]: bigTitle,\n            })}\n            bottomAddonsClassName={cn(desktopStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleClassName={cn(desktopStyles.headerTitle, titleClassName)}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n});\n\nHeaderDesktop.displayName = 'HeaderDesktop';\n"],"names":[],"mappings":";;;;;;;;;AA2Ba,MAAA,aAAa,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,KAAI;IACvF,MAAM,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC;IAChF,MAAM,EAAE,sBAAsB,EAAE,GAAG,UAAU,CAAC,qBAAqB,CAAC;AAEpE,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC;AAEvE,IAAA,MAAM,WAAW,GAAyC,CAAC,GAAG,IAAI,KAAI;AAClE,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,OAAO,CAAC,GAAG,IAAI,CAAC;AAC1B;AAED,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;AACxC,KAAC;IAED,QACI,oBAAC,oBAAoB,EAAA,EAAA,GACb,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,QAAQ,EAAC,oBAAoB,EAC7B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE;YAC1D,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,sBAAsB,IAAI,UAAU;AACpE,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAC/B,YAAA,CAAC,aAAa,CAAC,MAAM,GAAG,QAAQ;AACnC,SAAA,CAAC,EACF,qBAAqB,EAAE,EAAE,CAAC,aAAa,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC5E,mBAAmB,EAAE,YAAY,EACjC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,cAAc,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../../../src/components/header/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef } 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 { useBaseHeader } from '../base-header/useBaseHeader';\n\nimport styles from '../base-header/index.module.css';\nimport desktopStyles from './desktop.module.css';\n\nexport interface HeaderDesktopProps\n    extends Omit<\n        NavigationBarPrivateProps,\n        'size' | 'view' | 'parentRef' | 'titleSize' | 'subtitle'\n    > {\n    /**\n     * Заголовок в шапке крупного размера\n     * @default false\n     */\n    bigTitle?: boolean;\n}\n\nexport const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((props, ref) => {\n    const {\n        className,\n        children,\n        title,\n        sticky,\n        bigTitle = false,\n        titleClassName,\n        dataTestId,\n        bottomAddonsClassName,\n        onClose,\n        ...restProps\n    } = props;\n\n    const { bottomAddons } = restProps;\n\n    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({\n        title,\n        children,\n        bottomAddons,\n        onClose,\n    });\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            ref={ref}\n            view='desktop'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            dataName='modalHeaderDesktop'\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, desktopStyles.header, className, {\n                [styles.highlighted]: sticky && headerHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n                [desktopStyles.medium]: bigTitle,\n            })}\n            bottomAddonsClassName={cn(desktopStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleClassName={cn(desktopStyles.headerTitle, titleClassName)}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n});\n\nHeaderDesktop.displayName = 'HeaderDesktop';\n"],"names":[],"mappings":";;;;;;;;AA0Ba,MAAA,aAAa,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,KAAI;IACvF,MAAM,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS;AAElC,IAAA,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,aAAa,CAAC;QACzF,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,OAAO;AACV,KAAA,CAAC;IAEF,QACI,oBAAC,oBAAoB,EAAA,EAAA,GACb,SAAS,EACb,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,QAAQ,EAAC,oBAAoB,EAC7B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE;YAC1D,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB,IAAI,UAAU;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAC/B,YAAA,CAAC,aAAa,CAAC,MAAM,GAAG,QAAQ;AACnC,SAAA,CAAC,EACF,qBAAqB,EAAE,EAAE,CAAC,aAAa,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC5E,mBAAmB,EAAE,YAAY,EACjC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,cAAc,CAAC,EAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

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

@@ -8,7 +8,8 @@
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.2px;
+        font-family: var(--font-family-alfasans);
         padding: 11px var(--gap-12);
     }
 
@@ -16,7 +17,8 @@
         font-size: 22px;
         line-height: 26px;
         font-weight: 700;
-        font-family: var(--font-family-system);
+        letter-spacing: 0.2px;
+        font-family: var(--font-family-alfasans);
         padding: var(--gap-6) var(--gap-12) var(--gap-16);
     }
 
@@ -24,7 +26,8 @@
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
-            font-family: var(--font-family-system);
+            letter-spacing: 0.1px;
+            font-family: var(--font-family-alfasans);
             padding: var(--gap-6) var(--gap-12) var(--gap-16);
         }
 
@@ -32,5 +35,6 @@
             font-size: 30px;
             line-height: 36px;
             font-weight: 700;
-            font-family: var(--font-family-system);
+            letter-spacing: 0.1px;
+            font-family: var(--font-family-alfasans);
         }

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

@@ -1,27 +1,20 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import React from 'react';
 import cn from 'classnames';
 import { NavigationBarPrivate } from '@alfalab/core-components-navigation-bar-private/moderncssm';
 import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
-import { ModalContext } from '../../../Context.js';
+import { useBaseHeader } from '../base-header/useBaseHeader.js';
 import styles from '../base-header/index.module.css';
 import mobileStyles from './mobile.module.css';
 
-const HeaderMobile = ({ className, children, contentClassName, title, sticky, dataTestId, bottomAddonsClassName, onClose, ...restProps }) => {
-    const { setHasHeader, headerHighlighted, componentRef, onClose: handleCloseByContext, } = useContext(ModalContext);
-    const titleRef = useRef(null);
-    const hasContent = Boolean(title || children || restProps.bottomAddons);
-    const handleClose = (...args) => {
-        if (onClose) {
-            return onClose(...args);
-        }
-        return handleCloseByContext(...args);
-    };
-    useEffect(() => {
-        setHasHeader(true);
-        return () => {
-            setHasHeader(false);
-        };
-    }, [setHasHeader]);
+const HeaderMobile = (props) => {
+    const { className, children, contentClassName, title, sticky, dataTestId, bottomAddonsClassName, onClose, ...restProps } = props;
+    const { bottomAddons } = restProps;
+    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({
+        title,
+        children,
+        bottomAddons,
+        onClose,
+    });
     return (React.createElement(NavigationBarPrivate, { ...restProps, view: 'mobile', dataTestId: getDataTestId(dataTestId, 'header'), sticky: sticky, title: title, className: cn(styles.header, mobileStyles.header, className, {
             [styles.highlighted]: sticky && headerHighlighted && hasContent,
             [styles.sticky]: sticky,

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

@@ -1 +1 @@
-{"version":3,"file":"Component.mobile.js","sources":["../../../../src/components/header/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect, useRef } 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 { ModalContext } from '../../../Context';\n\nimport styles from '../base-header/index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderMobileProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const HeaderMobile: FC<HeaderMobileProps> = ({\n    className,\n    children,\n    contentClassName,\n    title,\n    sticky,\n    dataTestId,\n    bottomAddonsClassName,\n    onClose,\n    ...restProps\n}) => {\n    const {\n        setHasHeader,\n        headerHighlighted,\n        componentRef,\n        onClose: handleCloseByContext,\n    } = useContext(ModalContext);\n\n    const titleRef = useRef<HTMLDivElement>(null);\n\n    const hasContent = Boolean(title || children || restProps.bottomAddons);\n\n    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {\n        if (onClose) {\n            return onClose(...args);\n        }\n\n        return handleCloseByContext(...args);\n    };\n\n    useEffect(() => {\n        setHasHeader(true);\n\n        return () => {\n            setHasHeader(false);\n        };\n    }, [setHasHeader]);\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            view='mobile'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, mobileStyles.header, className, {\n                [styles.highlighted]: sticky && headerHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n            })}\n            contentClassName={cn(mobileStyles.content, contentClassName)}\n            bottomAddonsClassName={cn(mobileStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAgBa,MAAA,YAAY,GAA0B,CAAC,EAChD,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,KAAI;AACD,IAAA,MAAM,EACF,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,OAAO,EAAE,oBAAoB,GAChC,GAAG,UAAU,CAAC,YAAY,CAAC;AAE5B,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAE7C,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,YAAY,CAAC;AAEvE,IAAA,MAAM,WAAW,GAAyC,CAAC,GAAG,IAAI,KAAI;AAClE,QAAA,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,OAAO,CAAC,GAAG,IAAI,CAAC;AAC1B;AAED,QAAA,OAAO,oBAAoB,CAAC,GAAG,IAAI,CAAC;AACxC,KAAC;IAED,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;AAElB,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,oBAAoB,OACb,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,SAAS,EAAE;YACzD,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB,IAAI,UAAU;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAClC,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAC5D,qBAAqB,EAAE,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC3E,mBAAmB,EAAE,YAAY,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../../../src/components/header/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { type FC } 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 { useBaseHeader } from '../base-header/useBaseHeader';\n\nimport styles from '../base-header/index.module.css';\nimport mobileStyles from './mobile.module.css';\n\nexport type HeaderMobileProps = Omit<NavigationBarPrivateProps, 'size' | 'view' | 'parentRef'>;\n\nexport const HeaderMobile: FC<HeaderMobileProps> = (props) => {\n    const {\n        className,\n        children,\n        contentClassName,\n        title,\n        sticky,\n        dataTestId,\n        bottomAddonsClassName,\n        onClose,\n        ...restProps\n    } = props;\n\n    const { bottomAddons } = restProps;\n\n    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({\n        title,\n        children,\n        bottomAddons,\n        onClose,\n    });\n\n    return (\n        <NavigationBarPrivate\n            {...restProps}\n            view='mobile'\n            dataTestId={getDataTestId(dataTestId, 'header')}\n            sticky={sticky}\n            title={title}\n            className={cn(styles.header, mobileStyles.header, className, {\n                [styles.highlighted]: sticky && headerHighlighted && hasContent,\n                [styles.sticky]: sticky,\n                [styles.hasContent]: hasContent,\n            })}\n            contentClassName={cn(mobileStyles.content, contentClassName)}\n            bottomAddonsClassName={cn(mobileStyles.bottomAddons, bottomAddonsClassName)}\n            scrollableParentRef={componentRef}\n            titleRef={titleRef}\n            onClose={handleClose}\n        >\n            {children}\n        </NavigationBarPrivate>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;AAgBa,MAAA,YAAY,GAA0B,CAAC,KAAK,KAAI;IACzD,MAAM,EACF,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,UAAU,EACV,qBAAqB,EACrB,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;AAET,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS;AAElC,IAAA,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,aAAa,CAAC;QACzF,KAAK;QACL,QAAQ;QACR,YAAY;QACZ,OAAO;AACV,KAAA,CAAC;AAEF,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,oBAAoB,OACb,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,QAAQ,CAAC,EAC/C,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,SAAS,EAAE;YACzD,CAAC,MAAM,CAAC,WAAW,GAAG,MAAM,IAAI,iBAAiB,IAAI,UAAU;AAC/D,YAAA,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM;AACvB,YAAA,CAAC,MAAM,CAAC,UAAU,GAAG,UAAU;AAClC,SAAA,CAAC,EACF,gBAAgB,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAC5D,qBAAqB,EAAE,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC3E,mBAAmB,EAAE,YAAY,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,IAEnB,QAAQ,CACU;AAE/B;;;;"}

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

@@ -7,8 +7,9 @@
 .content {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 600;
-    font-family: var(--font-family-system);
+    font-weight: 500;
+    letter-spacing: -0.15px;
+    font-family: var(--font-family-alfasans);
     padding: 0 var(--gap-12);
     min-height: 40px;
     justify-content: center;
@@ -17,7 +18,8 @@
 .bottomAddons {
     font-size: 20px;
     line-height: 28px;
-    font-weight: 600;
-    font-family: var(--font-family-system);
+    font-weight: 500;
+    letter-spacing: -0.15px;
+    font-family: var(--font-family-alfasans);
     padding: var(--gap-6) var(--gap-16);
 }

package/moderncssm/desktop/Component.desktop.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import '@alfalab/core-components-mq/moderncssm';
 import { ContentDesktop } from '../components/content/desktop/Component.desktop.js';
 import 'classnames';
@@ -16,24 +16,16 @@ import { HeaderDesktop } from '../components/header/desktop/Component.desktop.js
 import '@alfalab/core-components-navigation-bar-private/moderncssm';
 import '../components/header/base-header/index.module.css';
 import '../components/header/mobile/mobile.module.css';
-import { UniversalModalContext } from '../context/universal-modal-context.js';
 import { CenterModal } from './components/center-modal/center-modal.js';
 import { SideModal } from './components/side-modal/side-modal.js';
-import { checkHeaderAndFooter } from './utils/check-header-and-footer.js';
+import { UniversalModalContext } from './context/index.js';
 
-const UniversalModalDesktopComponent = forwardRef(({ children, horizontalAlign = 'center', ...restProps }, ref) => {
-    const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState(false);
-    const [modalFooterHighlighted, setModalFooterHighlighted] = useState(false);
-    const { hasHeader, hasFooter } = checkHeaderAndFooter(children);
+const UniversalModalDesktopComponent = forwardRef((props, ref) => {
+    const { children, horizontalAlign = 'center', ...restProps } = props;
+    const { width = 500 } = restProps;
     const contextValue = useMemo(() => ({
-        modalWidth: restProps.width,
-        modalHeaderHighlighted,
-        modalFooterHighlighted,
-        hasHeader,
-        hasFooter,
-        setModalHeaderHighlighted,
-        setModalFooterHighlighted,
-    }), [restProps.width, modalHeaderHighlighted, modalFooterHighlighted, hasHeader, hasFooter]);
+        width,
+    }), [width]);
     const renderModal = () => {
         if (horizontalAlign === 'center') {
             return (React.createElement(CenterModal, { ...restProps, ref: ref, horizontalAlign: horizontalAlign }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useState } from 'react';\n\nimport { ContentDesktop } from '../components/content';\nimport { FooterDesktop } from '../components/footer';\nimport { HeaderDesktop } from '../components/header';\nimport { UniversalModalContext } from '../context/universal-modal-context';\nimport { type UniversalModalContextType } from '../typings';\n\nimport { CenterModal } from './components/center-modal';\nimport { SideModal } from './components/side-modal';\nimport { type UniversalModalDesktopProps } from './types/props';\nimport { checkHeaderAndFooter } from './utils/check-header-and-footer';\n\nexport const UniversalModalDesktopComponent = forwardRef<\n    HTMLDivElement,\n    UniversalModalDesktopProps\n>(({ children, horizontalAlign = 'center', ...restProps }, ref) => {\n    const [modalHeaderHighlighted, setModalHeaderHighlighted] = useState<boolean>(false);\n    const [modalFooterHighlighted, setModalFooterHighlighted] = useState<boolean>(false);\n\n    const { hasHeader, hasFooter } = checkHeaderAndFooter(children);\n\n    const contextValue = useMemo<UniversalModalContextType>(\n        () => ({\n            modalWidth: restProps.width,\n            modalHeaderHighlighted,\n            modalFooterHighlighted,\n            hasHeader,\n            hasFooter,\n            setModalHeaderHighlighted,\n            setModalFooterHighlighted,\n        }),\n        [restProps.width, modalHeaderHighlighted, modalFooterHighlighted, hasHeader, hasFooter],\n    );\n\n    const renderModal = () => {\n        if (horizontalAlign === 'center') {\n            return (\n                <CenterModal {...restProps} ref={ref} horizontalAlign={horizontalAlign}>\n                    {children}\n                </CenterModal>\n            );\n        }\n\n        return (\n            <SideModal {...restProps} ref={ref} horizontalAlign={horizontalAlign}>\n                {children}\n            </SideModal>\n        );\n    };\n\n    return (\n        <UniversalModalContext.Provider value={contextValue}>\n            {renderModal()}\n        </UniversalModalContext.Provider>\n    );\n});\n\nexport const UniversalModalDesktop = Object.assign(UniversalModalDesktopComponent, {\n    Header: HeaderDesktop,\n    Content: ContentDesktop,\n    Footer: FooterDesktop,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAaa,8BAA8B,GAAG,UAAU,CAGtD,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,GAAG,KAAI;IAC9D,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IACpF,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC;IAEpF,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,oBAAoB,CAAC,QAAQ,CAAC;AAE/D,IAAA,MAAM,YAAY,GAAG,OAAO,CACxB,OAAO;QACH,UAAU,EAAE,SAAS,CAAC,KAAK;QAC3B,sBAAsB;QACtB,sBAAsB;QACtB,SAAS;QACT,SAAS;QACT,yBAAyB;QACzB,yBAAyB;AAC5B,KAAA,CAAC,EACF,CAAC,SAAS,CAAC,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,CAAC,CAC1F;IAED,MAAM,WAAW,GAAG,MAAK;QACrB,IAAI,eAAe,KAAK,QAAQ,EAAE;AAC9B,YAAA,QACI,KAAC,CAAA,aAAA,CAAA,WAAW,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,eAAe,IACjE,QAAQ,CACC;AAErB;AAED,QAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,eAAe,IAC/D,QAAQ,CACD;AAEpB,KAAC;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,qBAAqB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAC9C,EAAA,WAAW,EAAE,CACe;AAEzC,CAAC;MAEY,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,8BAA8B,EAAE;AAC/E,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACxB,CAAA;;;;"}
+{"version":3,"file":"Component.desktop.js","sources":["../../src/desktop/Component.desktop.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\n\nimport { ContentDesktop } from '../components/content';\nimport { FooterDesktop } from '../components/footer';\nimport { HeaderDesktop } from '../components/header';\n\nimport { CenterModal } from './components/center-modal';\nimport { SideModal } from './components/side-modal';\nimport { type UniversalModalContextType } from './types/context';\nimport { type UniversalModalDesktopProps } from './types/props';\nimport { UniversalModalContext } from './context';\n\nexport const UniversalModalDesktopComponent = forwardRef<\n    HTMLDivElement,\n    UniversalModalDesktopProps\n>((props, ref) => {\n    const { children, horizontalAlign = 'center', ...restProps } = props;\n    const { width = 500 } = restProps;\n\n    const contextValue = useMemo<UniversalModalContextType>(\n        () => ({\n            width,\n        }),\n        [width],\n    );\n\n    const renderModal = () => {\n        if (horizontalAlign === 'center') {\n            return (\n                <CenterModal {...restProps} ref={ref} horizontalAlign={horizontalAlign}>\n                    {children}\n                </CenterModal>\n            );\n        }\n\n        return (\n            <SideModal {...restProps} ref={ref} horizontalAlign={horizontalAlign}>\n                {children}\n            </SideModal>\n        );\n    };\n\n    return (\n        <UniversalModalContext.Provider value={contextValue}>\n            {renderModal()}\n        </UniversalModalContext.Provider>\n    );\n});\n\nexport const UniversalModalDesktop = Object.assign(UniversalModalDesktopComponent, {\n    Header: HeaderDesktop,\n    Content: ContentDesktop,\n    Footer: FooterDesktop,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,8BAA8B,GAAG,UAAU,CAGtD,CAAC,KAAK,EAAE,GAAG,KAAI;AACb,IAAA,MAAM,EAAE,QAAQ,EAAE,eAAe,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACpE,IAAA,MAAM,EAAE,KAAK,GAAG,GAAG,EAAE,GAAG,SAAS;AAEjC,IAAA,MAAM,YAAY,GAAG,OAAO,CACxB,OAAO;QACH,KAAK;AACR,KAAA,CAAC,EACF,CAAC,KAAK,CAAC,CACV;IAED,MAAM,WAAW,GAAG,MAAK;QACrB,IAAI,eAAe,KAAK,QAAQ,EAAE;AAC9B,YAAA,QACI,KAAC,CAAA,aAAA,CAAA,WAAW,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,eAAe,IACjE,QAAQ,CACC;AAErB;AAED,QAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,EAAK,EAAA,GAAA,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,eAAe,EAAE,eAAe,IAC/D,QAAQ,CACD;AAEpB,KAAC;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,qBAAqB,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAC9C,EAAA,WAAW,EAAE,CACe;AAEzC,CAAC;MAEY,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,8BAA8B,EAAE;AAC/E,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,MAAM,EAAE,aAAa;AACxB,CAAA;;;;"}

package/moderncssm/desktop/context/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const UniversalModalContext: import("react").Context<Required<Pick<import("..").UniversalModalDesktopProps, "width">>>;

package/{modern/context/universal-modal-context.js → moderncssm/desktop/context/index.js}

@@ -1,10 +1,8 @@
 import { createContext } from 'react';
 
 const UniversalModalContext = createContext({
-    modalWidth: 500,
-    hasFooter: false,
-    hasHeader: false,
+    width: 500,
 });
 
 export { UniversalModalContext };
-//# sourceMappingURL=universal-modal-context.js.map
+//# sourceMappingURL=index.js.map

package/moderncssm/desktop/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/desktop/context/index.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { type UniversalModalContextType } from '../types/context';\n\nexport const UniversalModalContext = createContext<UniversalModalContextType>({\n    width: 500,\n});\n"],"names":[],"mappings":";;AAIO,MAAM,qBAAqB,GAAG,aAAa,CAA4B;AAC1E,IAAA,KAAK,EAAE,GAAG;AACb,CAAA;;;;"}

package/moderncssm/desktop/hooks/use-modal-highlighted.js

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react';
-import { UniversalModalContext } from '../../context/universal-modal-context.js';
+import { ModalContext } from '../../Context.js';
 
 /**
  * Расчет overlap состояния
@@ -7,7 +7,7 @@ import { UniversalModalContext } from '../../context/universal-modal-context.js'
  */
 const useModalHighlighted = (params) => {
     const { scrollbarContentNodeRef, scrollableNodeRef } = params;
-    const { setModalHeaderHighlighted, setModalFooterHighlighted } = useContext(UniversalModalContext);
+    const { setHeaderHighlighted: setModalHeaderHighlighted, setFooterHighlighted: setModalFooterHighlighted, } = useContext(ModalContext);
     const handleScroll = (e) => {
         const target = e.target;
         const { scrollTop, scrollHeight, clientHeight } = target;

package/moderncssm/desktop/hooks/use-modal-highlighted.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-modal-highlighted.js","sources":["../../../src/desktop/hooks/use-modal-highlighted.ts"],"sourcesContent":["import { type RefObject, useContext, useEffect } from 'react';\n\nimport { type ScrollbarProps } from '@alfalab/core-components-scrollbar';\n\nimport { UniversalModalContext } from '../../context/universal-modal-context';\n\ninterface Params {\n    scrollbarContentNodeRef: RefObject<HTMLDivElement>;\n    scrollableNodeRef: RefObject<HTMLDivElement>;\n}\n\n/**\n * Расчет overlap состояния\n * Этот функционал есть в base-modal, но так как в desktop версии используется кастомный scroll необходимо обрабатывать это в ручную\n */\nexport const useModalHighlighted = (params: Params) => {\n    const { scrollbarContentNodeRef, scrollableNodeRef } = params;\n\n    const { setModalHeaderHighlighted, setModalFooterHighlighted } =\n        useContext(UniversalModalContext);\n\n    const handleScroll: ScrollbarProps['onContentScroll'] = (e) => {\n        const target = e.target as HTMLDivElement;\n        const { scrollTop, scrollHeight, clientHeight } = target;\n\n        const isElementFullScrolled = scrollHeight - scrollTop === clientHeight;\n\n        if (setModalHeaderHighlighted) {\n            setModalHeaderHighlighted(scrollTop > 0);\n        }\n\n        if (setModalFooterHighlighted) {\n            setModalFooterHighlighted(!isElementFullScrolled);\n        }\n    };\n\n    // Очищаем overlap значения в контексте\n    useEffect(\n        () => () => {\n            if (setModalHeaderHighlighted) {\n                setModalHeaderHighlighted(false);\n            }\n\n            if (setModalFooterHighlighted) {\n                setModalFooterHighlighted(false);\n            }\n        },\n        [setModalHeaderHighlighted, setModalFooterHighlighted],\n    );\n\n    // Расчет overlap футера при resize событии\n    useEffect(() => {\n        const resizeObserver = new ResizeObserver(() => {\n            const contentHeight = scrollbarContentNodeRef.current?.clientHeight || 0;\n            const wrapperHeight = scrollableNodeRef.current?.clientHeight || 0;\n\n            if (setModalFooterHighlighted) {\n                setModalFooterHighlighted(contentHeight > wrapperHeight);\n            }\n        });\n\n        if (scrollbarContentNodeRef.current) {\n            resizeObserver.observe(scrollbarContentNodeRef.current);\n        }\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [setModalFooterHighlighted]);\n\n    return { handleScroll };\n};\n"],"names":[],"mappings":";;;AAWA;;;AAGG;AACU,MAAA,mBAAmB,GAAG,CAAC,MAAc,KAAI;AAClD,IAAA,MAAM,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,GAAG,MAAM;IAE7D,MAAM,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,GAC1D,UAAU,CAAC,qBAAqB,CAAC;AAErC,IAAA,MAAM,YAAY,GAAsC,CAAC,CAAC,KAAI;AAC1D,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAwB;QACzC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM;AAExD,QAAA,MAAM,qBAAqB,GAAG,YAAY,GAAG,SAAS,KAAK,YAAY;AAEvE,QAAA,IAAI,yBAAyB,EAAE;AAC3B,YAAA,yBAAyB,CAAC,SAAS,GAAG,CAAC,CAAC;AAC3C;AAED,QAAA,IAAI,yBAAyB,EAAE;AAC3B,YAAA,yBAAyB,CAAC,CAAC,qBAAqB,CAAC;AACpD;AACL,KAAC;;AAGD,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,IAAI,yBAAyB,EAAE;YAC3B,yBAAyB,CAAC,KAAK,CAAC;AACnC;AAED,QAAA,IAAI,yBAAyB,EAAE;YAC3B,yBAAyB,CAAC,KAAK,CAAC;AACnC;AACL,KAAC,EACD,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,CACzD;;IAGD,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC3C,MAAM,aAAa,GAAG,uBAAuB,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC;YACxE,MAAM,aAAa,GAAG,iBAAiB,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC;AAElE,YAAA,IAAI,yBAAyB,EAAE;AAC3B,gBAAA,yBAAyB,CAAC,aAAa,GAAG,aAAa,CAAC;AAC3D;AACL,SAAC,CAAC;QAEF,IAAI,uBAAuB,CAAC,OAAO,EAAE;AACjC,YAAA,cAAc,CAAC,OAAO,CAAC,uBAAuB,CAAC,OAAO,CAAC;AAC1D;AAED,QAAA,OAAO,MAAK;YACR,cAAc,CAAC,UAAU,EAAE;AAC/B,SAAC;;AAEL,KAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;IAE/B,OAAO,EAAE,YAAY,EAAE;AAC3B;;;;"}
+{"version":3,"file":"use-modal-highlighted.js","sources":["../../../src/desktop/hooks/use-modal-highlighted.ts"],"sourcesContent":["import { type RefObject, useContext, useEffect } from 'react';\n\nimport { type ScrollbarProps } from '@alfalab/core-components-scrollbar';\n\nimport { ModalContext } from '../../Context';\n\ninterface Params {\n    scrollbarContentNodeRef: RefObject<HTMLDivElement>;\n    scrollableNodeRef: RefObject<HTMLDivElement>;\n}\n\n/**\n * Расчет overlap состояния\n * Этот функционал есть в base-modal, но так как в desktop версии используется кастомный scroll необходимо обрабатывать это в ручную\n */\nexport const useModalHighlighted = (params: Params) => {\n    const { scrollbarContentNodeRef, scrollableNodeRef } = params;\n\n    const {\n        setHeaderHighlighted: setModalHeaderHighlighted,\n        setFooterHighlighted: setModalFooterHighlighted,\n    } = useContext(ModalContext);\n\n    const handleScroll: ScrollbarProps['onContentScroll'] = (e) => {\n        const target = e.target as HTMLDivElement;\n        const { scrollTop, scrollHeight, clientHeight } = target;\n\n        const isElementFullScrolled = scrollHeight - scrollTop === clientHeight;\n\n        if (setModalHeaderHighlighted) {\n            setModalHeaderHighlighted(scrollTop > 0);\n        }\n\n        if (setModalFooterHighlighted) {\n            setModalFooterHighlighted(!isElementFullScrolled);\n        }\n    };\n\n    // Очищаем overlap значения в контексте\n    useEffect(\n        () => () => {\n            if (setModalHeaderHighlighted) {\n                setModalHeaderHighlighted(false);\n            }\n\n            if (setModalFooterHighlighted) {\n                setModalFooterHighlighted(false);\n            }\n        },\n        [setModalHeaderHighlighted, setModalFooterHighlighted],\n    );\n\n    // Расчет overlap футера при resize событии\n    useEffect(() => {\n        const resizeObserver = new ResizeObserver(() => {\n            const contentHeight = scrollbarContentNodeRef.current?.clientHeight || 0;\n            const wrapperHeight = scrollableNodeRef.current?.clientHeight || 0;\n\n            if (setModalFooterHighlighted) {\n                setModalFooterHighlighted(contentHeight > wrapperHeight);\n            }\n        });\n\n        if (scrollbarContentNodeRef.current) {\n            resizeObserver.observe(scrollbarContentNodeRef.current);\n        }\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [setModalFooterHighlighted]);\n\n    return { handleScroll };\n};\n"],"names":[],"mappings":";;;AAWA;;;AAGG;AACU,MAAA,mBAAmB,GAAG,CAAC,MAAc,KAAI;AAClD,IAAA,MAAM,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,GAAG,MAAM;AAE7D,IAAA,MAAM,EACF,oBAAoB,EAAE,yBAAyB,EAC/C,oBAAoB,EAAE,yBAAyB,GAClD,GAAG,UAAU,CAAC,YAAY,CAAC;AAE5B,IAAA,MAAM,YAAY,GAAsC,CAAC,CAAC,KAAI;AAC1D,QAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAwB;QACzC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,MAAM;AAExD,QAAA,MAAM,qBAAqB,GAAG,YAAY,GAAG,SAAS,KAAK,YAAY;AAEvE,QAAA,IAAI,yBAAyB,EAAE;AAC3B,YAAA,yBAAyB,CAAC,SAAS,GAAG,CAAC,CAAC;AAC3C;AAED,QAAA,IAAI,yBAAyB,EAAE;AAC3B,YAAA,yBAAyB,CAAC,CAAC,qBAAqB,CAAC;AACpD;AACL,KAAC;;AAGD,IAAA,SAAS,CACL,MAAM,MAAK;AACP,QAAA,IAAI,yBAAyB,EAAE;YAC3B,yBAAyB,CAAC,KAAK,CAAC;AACnC;AAED,QAAA,IAAI,yBAAyB,EAAE;YAC3B,yBAAyB,CAAC,KAAK,CAAC;AACnC;AACL,KAAC,EACD,CAAC,yBAAyB,EAAE,yBAAyB,CAAC,CACzD;;IAGD,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC3C,MAAM,aAAa,GAAG,uBAAuB,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC;YACxE,MAAM,aAAa,GAAG,iBAAiB,CAAC,OAAO,EAAE,YAAY,IAAI,CAAC;AAElE,YAAA,IAAI,yBAAyB,EAAE;AAC3B,gBAAA,yBAAyB,CAAC,aAAa,GAAG,aAAa,CAAC;AAC3D;AACL,SAAC,CAAC;QAEF,IAAI,uBAAuB,CAAC,OAAO,EAAE;AACjC,YAAA,cAAc,CAAC,OAAO,CAAC,uBAAuB,CAAC,OAAO,CAAC;AAC1D;AAED,QAAA,OAAO,MAAK;YACR,cAAc,CAAC,UAAU,EAAE;AAC/B,SAAC;;AAEL,KAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC;IAE/B,OAAO,EAAE,YAAY,EAAE;AAC3B;;;;"}

package/moderncssm/desktop/types/context.d.ts

@@ -0,0 +1,2 @@
+import { type UniversalModalDesktopProps } from './props';
+export declare type UniversalModalContextType = Required<Pick<UniversalModalDesktopProps, 'width'>>;

package/moderncssm/desktop/types/context.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=context.js.map

package/moderncssm/desktop/types/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/moderncssm/index.js

@@ -2,9 +2,8 @@ export { UniversalModal, UniversalModalResponsive } from './Component.responsive
 export { ContentResponsive } from './components/content/responsive/Component.responsive.js';
 import 'react';
 import 'classnames';
-import './context/universal-modal-context.js';
-import '@alfalab/core-components-shared/moderncssm';
 import '@alfalab/core-components-base-modal/moderncssm';
+import '@alfalab/core-components-shared/moderncssm';
 import './components/content/base-content/index.module.css';
 import './components/content/desktop/desktop.module.css';
 import './components/content/mobile/mobile.module.css';

package/moderncssm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/moderncssm/mobile/Component.mobile.js

@@ -2,7 +2,6 @@ import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { BaseModal } from '@alfalab/core-components-base-modal/moderncssm';
 import '@alfalab/core-components-mq/moderncssm';
-import '../context/universal-modal-context.js';
 import '@alfalab/core-components-shared/moderncssm';
 import '../components/content/base-content/index.module.css';
 import '../components/content/desktop/desktop.module.css';

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 } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { ContentMobile } from '../components/content';\nimport { FooterMobile } from '../components/footer';\nimport { HeaderMobile } from '../components/header';\n\nimport { type UniversalModalMobileProps } from './types/props';\n\nimport styles from './mobile.module.css';\nimport rightSideTransitions from './transitions/right-side-transitions.mobile.module.css';\nimport transitions from './transitions/transitions.mobile.module.css';\n\nexport const UniversalModalMobileComponent = forwardRef<HTMLDivElement, UniversalModalMobileProps>(\n    (props, ref) => {\n        const { children, className, dataTestId, appearance = 'bottom', ...restProps } = props;\n\n        return (\n            <BaseModal\n                {...restProps}\n                dataTestId={dataTestId}\n                ref={ref}\n                transitionProps={{\n                    timeout: appearance === 'right' ? 360 : 200,\n                    classNames: appearance === 'right' ? rightSideTransitions : transitions,\n                    ...restProps.transitionProps,\n                }}\n                className={cn(className, styles.component)}\n                scrollHandler='content'\n                contentClassName={styles.content}\n            >\n                {children}\n            </BaseModal>\n        );\n    },\n);\n\nexport const UniversalModalMobile = Object.assign(UniversalModalMobileComponent, {\n    Header: HeaderMobile,\n    Content: ContentMobile,\n    Footer: FooterMobile,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAea,MAAA,6BAA6B,GAAG,UAAU,CACnD,CAAC,KAAK,EAAE,GAAG,KAAI;AACX,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AAEtF,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACF,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,eAAe,EAAE;YACb,OAAO,EAAE,UAAU,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG;YAC3C,UAAU,EAAE,UAAU,KAAK,OAAO,GAAG,oBAAoB,GAAG,WAAW;YACvE,GAAG,SAAS,CAAC,eAAe;SAC/B,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1C,aAAa,EAAC,SAAS,EACvB,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAE/B,EAAA,QAAQ,CACD;AAEpB,CAAC;MAGQ,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,6BAA6B,EAAE;AAC7E,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACvB,CAAA;;;;"}
+{"version":3,"file":"Component.mobile.js","sources":["../../src/mobile/Component.mobile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport cn from 'classnames';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\n\nimport { ContentMobile } from '../components/content';\nimport { FooterMobile } from '../components/footer';\nimport { HeaderMobile } from '../components/header';\n\nimport { type UniversalModalMobileProps } from './types/props';\n\nimport styles from './mobile.module.css';\nimport rightSideTransitions from './transitions/right-side-transitions.mobile.module.css';\nimport transitions from './transitions/transitions.mobile.module.css';\n\nexport const UniversalModalMobileComponent = forwardRef<HTMLDivElement, UniversalModalMobileProps>(\n    (props, ref) => {\n        const { children, className, dataTestId, appearance = 'bottom', ...restProps } = props;\n\n        return (\n            <BaseModal\n                {...restProps}\n                dataTestId={dataTestId}\n                ref={ref}\n                transitionProps={{\n                    timeout: appearance === 'right' ? 360 : 200,\n                    classNames: appearance === 'right' ? rightSideTransitions : transitions,\n                    ...restProps.transitionProps,\n                }}\n                className={cn(className, styles.component)}\n                scrollHandler='content'\n                contentClassName={styles.content}\n            >\n                {children}\n            </BaseModal>\n        );\n    },\n);\n\nexport const UniversalModalMobile = Object.assign(UniversalModalMobileComponent, {\n    Header: HeaderMobile,\n    Content: ContentMobile,\n    Footer: FooterMobile,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAea,MAAA,6BAA6B,GAAG,UAAU,CACnD,CAAC,KAAK,EAAE,GAAG,KAAI;AACX,IAAA,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AAEtF,IAAA,QACI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAA,GACF,SAAS,EACb,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,eAAe,EAAE;YACb,OAAO,EAAE,UAAU,KAAK,OAAO,GAAG,GAAG,GAAG,GAAG;YAC3C,UAAU,EAAE,UAAU,KAAK,OAAO,GAAG,oBAAoB,GAAG,WAAW;YACvE,GAAG,SAAS,CAAC,eAAe;SAC/B,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAC1C,aAAa,EAAC,SAAS,EACvB,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAE/B,EAAA,QAAQ,CACD;AAEpB,CAAC;MAGQ,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,6BAA6B,EAAE;AAC7E,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,MAAM,EAAE,YAAY;AACvB,CAAA;;;;"}

package/moderncssm/mobile/index.js

@@ -8,9 +8,8 @@ export { FooterMobile } from '../components/footer/mobile/Component.mobile.js';
 import 'react';
 import '@alfalab/core-components-mq/moderncssm';
 import 'classnames';
-import '../context/universal-modal-context.js';
-import '@alfalab/core-components-shared/moderncssm';
 import '@alfalab/core-components-base-modal/moderncssm';
+import '@alfalab/core-components-shared/moderncssm';
 import '../components/content/base-content/index.module.css';
 import '../components/content/desktop/desktop.module.css';
 export { ContentMobile } from '../components/content/mobile/Component.mobile.js';

package/moderncssm/mobile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/moderncssm/typings/index.d.ts

@@ -1,14 +1,5 @@
 import { type UniversalModalDesktopProps } from '../desktop';
 import { type UniversalModalMobileProps } from '../mobile';
-export interface UniversalModalContextType {
-    modalWidth: UniversalModalDesktopProps['width'];
-    modalHeaderHighlighted?: boolean;
-    modalFooterHighlighted?: boolean;
-    hasHeader: boolean;
-    hasFooter: boolean;
-    setModalHeaderHighlighted?: (value: boolean) => void;
-    setModalFooterHighlighted?: (value: boolean) => void;
-}
 export interface UniversalModalResponsiveProps extends UniversalModalDesktopProps, UniversalModalMobileProps {
     /**
      * Контрольная точка, с нее начинается desktop версия

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-universal-modal",
-    "version": "3.0.2",
+    "version": "3.0.3-alfasans",
     "description": "UniversalModal component",
     "keywords": [],
     "license": "MIT",
@@ -10,12 +10,12 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
-        "@alfalab/core-components-backdrop": "^5.0.1",
-        "@alfalab/core-components-base-modal": "^7.0.1",
-        "@alfalab/core-components-mq": "^6.0.1",
-        "@alfalab/core-components-navigation-bar-private": "^2.0.1",
-        "@alfalab/core-components-scrollbar": "^5.0.1",
-        "@alfalab/core-components-shared": "^2.0.1",
+        "@alfalab/core-components-backdrop": "5.0.1-alfasans",
+        "@alfalab/core-components-base-modal": "7.1.0-alfasans",
+        "@alfalab/core-components-mq": "6.0.1-alfasans",
+        "@alfalab/core-components-navigation-bar-private": "2.0.2-alfasans",
+        "@alfalab/core-components-scrollbar": "5.0.1-alfasans",
+        "@alfalab/core-components-shared": "2.0.1-alfasans",
         "@types/react-transition-group": "^4.4.12",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
@@ -30,6 +30,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.0.1",
-    "varsVersion": "11.0.1"
+    "themesVersion": "15.0.1-alfasans",
+    "varsVersion": "11.0.1-alfasans"
 }

package/src/Context.ts

@@ -1,3 +1,6 @@
 import { BaseModalContext } from '@alfalab/core-components-base-modal';
 
+/**
+ * @deprecated Некоторые параметры могут не соответствовать реальным состояниям компонента
+ */
 export const ModalContext = BaseModalContext;

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

@@ -1,7 +1,7 @@
 import React, { type FC, useContext } from 'react';
 import cn from 'classnames';
 
-import { UniversalModalContext } from '../../../context/universal-modal-context';
+import { ModalContext } from '../../../Context';
 import { BaseContent, type ContentProps } from '../base-content/base-content';
 
 import styles from './desktop.module.css';
@@ -14,7 +14,7 @@ export interface ContentDesktopProps extends ContentProps {
 }
 
 export const ContentDesktop: FC<ContentDesktopProps> = ({ className, ...restProps }) => {
-    const { hasHeader, hasFooter } = useContext(UniversalModalContext);
+    const { hasHeader, hasFooter } = useContext(ModalContext);
 
     return (
         <BaseContent

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

@@ -1,8 +1,9 @@
 import React, { forwardRef, useContext } from 'react';
 import cn from 'classnames';
 
-import { UniversalModalContext } from '../../../context/universal-modal-context';
+import { ModalContext } from '../../../Context';
 import { FOOTER_MEDIUM_BREAKPOINT } from '../../../desktop/constants';
+import { UniversalModalContext } from '../../../desktop/context';
 import { BaseFooter, type FooterProps } from '../base-footer/base-footer';
 
 import styles from './desktop.module.css';
@@ -17,7 +18,8 @@ export interface FooterDesktopProps extends FooterProps {
 
 export const FooterDesktop = forwardRef<HTMLDivElement, FooterDesktopProps>((props, ref) => {
     const { className, sticky, layout = 'start', ...restProps } = props;
-    const { modalWidth = 500, modalFooterHighlighted } = useContext(UniversalModalContext);
+    const { width: modalWidth } = useContext(UniversalModalContext);
+    const { footerHighlighted: modalFooterHighlighted } = useContext(ModalContext);
 
     const isMiddle = modalWidth === 'fullWidth' || modalWidth >= FOOTER_MEDIUM_BREAKPOINT;
 

package/src/components/header/base-header/useBaseHeader.ts

@@ -0,0 +1,40 @@
+import { useContext, useEffect, useRef } from 'react';
+
+import { type NavigationBarPrivateProps } from '@alfalab/core-components-navigation-bar-private';
+
+import { ModalContext } from '../../../Context';
+
+type Params = Pick<NavigationBarPrivateProps, 'title' | 'children' | 'bottomAddons' | 'onClose'>;
+
+export const useBaseHeader = (params: Params) => {
+    const { title, children, bottomAddons, onClose } = params;
+
+    const {
+        componentRef,
+        headerHighlighted,
+        onClose: handleCloseByContext,
+        setHasHeader,
+    } = useContext(ModalContext);
+
+    const titleRef = useRef<HTMLDivElement>(null);
+
+    const hasContent = Boolean(title || children || bottomAddons);
+
+    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {
+        if (onClose) {
+            return onClose(...args);
+        }
+
+        return handleCloseByContext(...args);
+    };
+
+    useEffect(() => {
+        setHasHeader(true);
+
+        return () => {
+            setHasHeader(false);
+        };
+    }, [setHasHeader]);
+
+    return { headerHighlighted, hasContent, componentRef, titleRef, handleClose };
+};

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
 import {
@@ -7,8 +7,7 @@ import {
 } from '@alfalab/core-components-navigation-bar-private';
 import { getDataTestId } from '@alfalab/core-components-shared';
 
-import { ModalContext } from '../../../Context';
-import { UniversalModalContext } from '../../../context/universal-modal-context';
+import { useBaseHeader } from '../base-header/useBaseHeader';
 
 import styles from '../base-header/index.module.css';
 import desktopStyles from './desktop.module.css';
@@ -39,20 +38,14 @@ export const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((pro
         ...restProps
     } = props;
 
-    const { componentRef, onClose: handleCloseByContext } = useContext(ModalContext);
-    const { modalHeaderHighlighted } = useContext(UniversalModalContext);
+    const { bottomAddons } = restProps;
 
-    const titleRef = useRef<HTMLDivElement>(null);
-
-    const hasContent = Boolean(title || children || restProps.bottomAddons);
-
-    const handleClose: NavigationBarPrivateProps['onClose'] = (...args) => {
-        if (onClose) {
-            return onClose(...args);
-        }
-
-        return handleCloseByContext(...args);
-    };
+    const { headerHighlighted, hasContent, componentRef, titleRef, handleClose } = useBaseHeader({
+        title,
+        children,
+        bottomAddons,
+        onClose,
+    });
 
     return (
         <NavigationBarPrivate
@@ -64,7 +57,7 @@ export const HeaderDesktop = forwardRef<HTMLDivElement, HeaderDesktopProps>((pro
             sticky={sticky}
             title={title}
             className={cn(styles.header, desktopStyles.header, className, {
-                [styles.highlighted]: sticky && modalHeaderHighlighted && hasContent,
+                [styles.highlighted]: sticky && headerHighlighted && hasContent,
                 [styles.sticky]: sticky,
                 [styles.hasContent]: hasContent,
                 [desktopStyles.medium]: bigTitle,