@alfalab/core-components-universal-modal 3.2.5 → 3.2.6-alfasans

package/modern/desktop/components/header/desktop.css

@@ -5,36 +5,41 @@
     --gap-20: 20px;
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
-.universal-modal__header_1r7vx {
+.universal-modal__header_1c236 {
     padding: var(--gap-20) var(--gap-20) 0;
 }
-.universal-modal__header_1r7vx .universal-modal__headerTitle_1r7vx {
+.universal-modal__header_1c236 .universal-modal__headerTitle_1c236 {
         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);
     }
-.universal-modal__header_1r7vx .universal-modal__bottomAddons_1r7vx {
+.universal-modal__header_1c236 .universal-modal__bottomAddons_1c236 {
         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);
     }
-.universal-modal__header_1r7vx.universal-modal__medium_1r7vx .universal-modal__headerTitle_1r7vx {
+.universal-modal__header_1c236.universal-modal__medium_1c236 .universal-modal__headerTitle_1c236 {
             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);
         }
-.universal-modal__header_1r7vx.universal-modal__medium_1r7vx .universal-modal__bottomAddons_1r7vx {
+.universal-modal__header_1c236.universal-modal__medium_1c236 .universal-modal__bottomAddons_1c236 {
             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/modern/desktop/components/header/desktop.module.css.js

@@ -1,6 +1,6 @@
 import './desktop.css';
 
-const desktopStyles = {"header":"universal-modal__header_1r7vx","headerTitle":"universal-modal__headerTitle_1r7vx","bottomAddons":"universal-modal__bottomAddons_1r7vx","medium":"universal-modal__medium_1r7vx"};
+const desktopStyles = {"header":"universal-modal__header_1c236","headerTitle":"universal-modal__headerTitle_1c236","bottomAddons":"universal-modal__bottomAddons_1c236","medium":"universal-modal__medium_1c236"};
 
 export { desktopStyles as default };
 //# sourceMappingURL=desktop.module.css.js.map

package/modern/desktop/components/modal-content/modal-content.css

@@ -1,15 +1,15 @@
-.universal-modal__scrollable_9k4eh {
+.universal-modal__scrollable_1uf4k {
     height: 100%;
 }
-.universal-modal__scrollable_9k4eh .universal-modal__scrollableNode_9k4eh.universal-modal__scrollableNode_9k4eh {
+.universal-modal__scrollable_1uf4k .universal-modal__scrollableNode_1uf4k.universal-modal__scrollableNode_1uf4k {
         display: flex;
         flex-direction: column;
     }
-.universal-modal__scrollable_9k4eh .universal-modal__scrollableNode_9k4eh.universal-modal__scrollableNode_9k4eh .universal-modal__contentNode_9k4eh {
+.universal-modal__scrollable_1uf4k .universal-modal__scrollableNode_1uf4k.universal-modal__scrollableNode_1uf4k .universal-modal__contentNode_1uf4k {
             display: flex;
 
             flex-direction: column;
         }
-.universal-modal__scrollable_9k4eh .universal-modal__scrollableNode_9k4eh.universal-modal__scrollableNode_9k4eh .universal-modal__contentNode_9k4eh:not(.universal-modal__hugContent_9k4eh) {
+.universal-modal__scrollable_1uf4k .universal-modal__scrollableNode_1uf4k.universal-modal__scrollableNode_1uf4k .universal-modal__contentNode_1uf4k:not(.universal-modal__hugContent_1uf4k) {
                 flex: 1 1 auto;
             }

package/modern/desktop/components/modal-content/modal-content.js

@@ -1,21 +1,16 @@
 import React, { useRef } from 'react';
-import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
-import { useModalHighlighted } from '../../hooks/use-modal-highlighted.js';
 import { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height.js';
 import { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs.js';
 import styles from './modal-content.module.css.js';
 
 const ModalContent = (props) => {
     const { children, height, scrollableContainerRef = null } = props;
-    const scrollableNodeRef = useRef(null);
-    const scrollbarContentNodeRef = useRef(null);
     const scrollbarRef = useRef(null);
     const verticalBarRef = useRef(null);
     const headerElementRef = useRef(null);
     const footerElementRef = useRef(null);
-    const { handleScroll } = useModalHighlighted({ scrollbarContentNodeRef, scrollableNodeRef });
     const { enhancedChildren } = setFooterAndHeaderRefs({
         children,
         headerElementRef,
@@ -23,14 +18,13 @@ const ModalContent = (props) => {
     });
     useSetScrollbarHeight({ scrollbarRef, verticalBarRef, headerElementRef, footerElementRef });
     return (React.createElement(Scrollbar, { className: styles.scrollable, ref: scrollbarRef, verticalBarRef: verticalBarRef, scrollableNodeProps: {
-            ref: mergeRefs([scrollableNodeRef, scrollableContainerRef]),
+            ref: scrollableContainerRef,
             className: styles.scrollableNode,
         }, contentNodeProps: {
-            ref: scrollbarContentNodeRef,
             className: cn(styles.contentNode, {
                 [styles.hugContent]: height === 'hugContent',
             }),
-        }, onContentScroll: handleScroll }, enhancedChildren));
+        } }, enhancedChildren));
 };
 
 export { ModalContent };

package/modern/desktop/components/modal-content/modal-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.js","sources":["../../../../src/desktop/components/modal-content/modal-content.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { useModalHighlighted } from '../../hooks/use-modal-highlighted';\nimport { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs';\n\nimport styles from './modal-content.module.css';\n\ntype PickedBaseModalProps = Pick<BaseModalProps, 'children'>;\ntype PickedUniversalModalDesktopProps = Pick<\n    UniversalModalDesktopProps,\n    'height' | 'scrollableContainerRef'\n>;\n\ntype Props = PickedBaseModalProps & PickedUniversalModalDesktopProps;\n\nexport const ModalContent: FC<Props> = (props) => {\n    const { children, height, scrollableContainerRef = null } = props;\n\n    const scrollableNodeRef = useRef<HTMLDivElement>(null);\n    const scrollbarContentNodeRef = useRef<HTMLDivElement>(null);\n    const scrollbarRef = useRef<HTMLDivElement | null>(null);\n    const verticalBarRef = useRef<HTMLDivElement>(null);\n    const headerElementRef = useRef<HTMLDivElement>(null);\n    const footerElementRef = useRef<HTMLDivElement | null>(null);\n\n    const { handleScroll } = useModalHighlighted({ scrollbarContentNodeRef, scrollableNodeRef });\n\n    const { enhancedChildren } = setFooterAndHeaderRefs({\n        children,\n        headerElementRef,\n        footerElementRef,\n    });\n\n    useSetScrollbarHeight({ scrollbarRef, verticalBarRef, headerElementRef, footerElementRef });\n\n    return (\n        <Scrollbar\n            className={styles.scrollable}\n            ref={scrollbarRef}\n            verticalBarRef={verticalBarRef}\n            scrollableNodeProps={{\n                ref: mergeRefs([scrollableNodeRef, scrollableContainerRef]),\n                className: styles.scrollableNode,\n            }}\n            contentNodeProps={{\n                ref: scrollbarContentNodeRef,\n                className: cn(styles.contentNode, {\n                    [styles.hugContent]: height === 'hugContent',\n                }),\n            }}\n            onContentScroll={handleScroll}\n        >\n            {enhancedChildren}\n        </Scrollbar>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAsBa,MAAA,YAAY,GAAc,CAAC,KAAK,KAAI;IAC7C,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,EAAE,GAAG,KAAK;AAEjE,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC5D,IAAA,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAE5D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,mBAAmB,CAAC,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,CAAC;AAE5F,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,CAAC;QAChD,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;AACnB,KAAA,CAAC;IAEF,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAE3F,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;YACjB,GAAG,EAAE,SAAS,CAAC,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;YAC3D,SAAS,EAAE,MAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,GAAG,EAAE,uBAAuB;AAC5B,YAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,KAAK,YAAY;aAC/C,CAAC;AACL,SAAA,EACD,eAAe,EAAE,YAAY,IAE5B,gBAAgB,CACT;AAEpB;;;;"}
+{"version":3,"file":"modal-content.js","sources":["../../../../src/desktop/components/modal-content/modal-content.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { type BaseModalProps } from '@alfalab/core-components-base-modal';\nimport { Scrollbar } from '@alfalab/core-components-scrollbar';\n\nimport { useSetScrollbarHeight } from '../../hooks/use-set-scrollbar-height';\nimport { type UniversalModalDesktopProps } from '../../types/props';\nimport { setFooterAndHeaderRefs } from '../../utils/set-footer-and-header-refs';\n\nimport styles from './modal-content.module.css';\n\ntype PickedBaseModalProps = Pick<BaseModalProps, 'children'>;\ntype PickedUniversalModalDesktopProps = Pick<\n    UniversalModalDesktopProps,\n    'height' | 'scrollableContainerRef'\n>;\n\ntype Props = PickedBaseModalProps & PickedUniversalModalDesktopProps;\n\nexport const ModalContent: FC<Props> = (props) => {\n    const { children, height, scrollableContainerRef = null } = props;\n\n    const scrollbarRef = useRef<HTMLDivElement | null>(null);\n    const verticalBarRef = useRef<HTMLDivElement>(null);\n    const headerElementRef = useRef<HTMLDivElement>(null);\n    const footerElementRef = useRef<HTMLDivElement | null>(null);\n\n    const { enhancedChildren } = setFooterAndHeaderRefs({\n        children,\n        headerElementRef,\n        footerElementRef,\n    });\n\n    useSetScrollbarHeight({ scrollbarRef, verticalBarRef, headerElementRef, footerElementRef });\n\n    return (\n        <Scrollbar\n            className={styles.scrollable}\n            ref={scrollbarRef}\n            verticalBarRef={verticalBarRef}\n            scrollableNodeProps={{\n                ref: scrollableContainerRef,\n                className: styles.scrollableNode,\n            }}\n            contentNodeProps={{\n                className: cn(styles.contentNode, {\n                    [styles.hugContent]: height === 'hugContent',\n                }),\n            }}\n        >\n            {enhancedChildren}\n        </Scrollbar>\n    );\n};\n"],"names":[],"mappings":";;;;;;;AAoBa,MAAA,YAAY,GAAc,CAAC,KAAK,KAAI;IAC7C,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,sBAAsB,GAAG,IAAI,EAAE,GAAG,KAAK;AAEjE,IAAA,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAwB,IAAI,CAAC;AAE5D,IAAA,MAAM,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,CAAC;QAChD,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;AACnB,KAAA,CAAC;IAEF,qBAAqB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAE3F,IAAA,QACI,KAAC,CAAA,aAAA,CAAA,SAAS,IACN,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;AACjB,YAAA,GAAG,EAAE,sBAAsB;YAC3B,SAAS,EAAE,MAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,UAAU,GAAG,MAAM,KAAK,YAAY;aAC/C,CAAC;SACL,EAEA,EAAA,gBAAgB,CACT;AAEpB;;;;"}

package/modern/desktop/components/modal-content/modal-content.module.css.js

@@ -1,6 +1,6 @@
 import './modal-content.css';
 
-const styles = {"scrollable":"universal-modal__scrollable_9k4eh","scrollableNode":"universal-modal__scrollableNode_9k4eh","contentNode":"universal-modal__contentNode_9k4eh","hugContent":"universal-modal__hugContent_9k4eh"};
+const styles = {"scrollable":"universal-modal__scrollable_1uf4k","scrollableNode":"universal-modal__scrollableNode_1uf4k","contentNode":"universal-modal__contentNode_1uf4k","hugContent":"universal-modal__hugContent_1uf4k"};
 
 export { styles as default };
 //# sourceMappingURL=modal-content.module.css.js.map