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

package/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/desktop/components/header/desktop.module.css.js

@@ -2,7 +2,7 @@
 
 require('./desktop.css');
 
-var desktopStyles = {"header":"universal-modal__header_1r7vx","headerTitle":"universal-modal__headerTitle_1r7vx","bottomAddons":"universal-modal__bottomAddons_1r7vx","medium":"universal-modal__medium_1r7vx"};
+var desktopStyles = {"header":"universal-modal__header_1c236","headerTitle":"universal-modal__headerTitle_1c236","bottomAddons":"universal-modal__bottomAddons_1c236","medium":"universal-modal__medium_1c236"};
 
 module.exports = desktopStyles;
 //# sourceMappingURL=desktop.module.css.js.map

package/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/desktop/components/modal-content/modal-content.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
 var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
-var useModalHighlighted = require('../../hooks/use-modal-highlighted.js');
 var useSetScrollbarHeight = require('../../hooks/use-set-scrollbar-height.js');
 var setFooterAndHeaderRefs = require('../../utils/set-footer-and-header-refs.js');
 var modalContent_module = require('./modal-content.module.css.js');
@@ -14,19 +12,15 @@ var modalContent_module = require('./modal-content.module.css.js');
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var ModalContent = function (props) {
     var _a;
     var children = props.children, height = props.height, _b = props.scrollableContainerRef, scrollableContainerRef = _b === void 0 ? null : _b;
-    var scrollableNodeRef = React.useRef(null);
-    var scrollbarContentNodeRef = React.useRef(null);
     var scrollbarRef = React.useRef(null);
     var verticalBarRef = React.useRef(null);
     var headerElementRef = React.useRef(null);
     var footerElementRef = React.useRef(null);
-    var handleScroll = useModalHighlighted.useModalHighlighted({ scrollbarContentNodeRef: scrollbarContentNodeRef, scrollableNodeRef: scrollableNodeRef }).handleScroll;
     var enhancedChildren = setFooterAndHeaderRefs.setFooterAndHeaderRefs({
         children: children,
         headerElementRef: headerElementRef,
@@ -34,14 +28,13 @@ var ModalContent = function (props) {
     }).enhancedChildren;
     useSetScrollbarHeight.useSetScrollbarHeight({ scrollbarRef: scrollbarRef, verticalBarRef: verticalBarRef, headerElementRef: headerElementRef, footerElementRef: footerElementRef });
     return (React__default.default.createElement(coreComponentsScrollbar.Scrollbar, { className: modalContent_module.scrollable, ref: scrollbarRef, verticalBarRef: verticalBarRef, scrollableNodeProps: {
-            ref: mergeRefs__default.default([scrollableNodeRef, scrollableContainerRef]),
+            ref: scrollableContainerRef,
             className: modalContent_module.scrollableNode,
         }, contentNodeProps: {
-            ref: scrollbarContentNodeRef,
             className: cn__default.default(modalContent_module.contentNode, (_a = {},
                 _a[modalContent_module.hugContent] = height === 'hugContent',
                 _a)),
-        }, onContentScroll: handleScroll }, enhancedChildren));
+        } }, enhancedChildren));
 };
 
 exports.ModalContent = ModalContent;

package/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":["useRef","useModalHighlighted","setFooterAndHeaderRefs","useSetScrollbarHeight","React","Scrollbar","styles","mergeRefs","cn"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBO,IAAM,YAAY,GAAc,UAAC,KAAK,EAAA;;AACjC,IAAA,IAAA,QAAQ,GAA4C,KAAK,SAAjD,EAAE,MAAM,GAAoC,KAAK,CAAA,MAAzC,EAAE,EAAA,GAAkC,KAAK,CAAV,sBAAA,EAA7B,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA;AAEvD,IAAA,IAAM,iBAAiB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACtD,IAAA,IAAM,uBAAuB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC5D,IAAA,IAAM,YAAY,GAAGA,YAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAwB,IAAI,CAAC;AAEpD,IAAA,IAAA,YAAY,GAAKC,uCAAmB,CAAC,EAAE,uBAAuB,EAAA,uBAAA,EAAE,iBAAiB,EAAA,iBAAA,EAAE,CAAC,aAAxE;IAEZ,IAAA,gBAAgB,GAAKC,6CAAsB,CAAC;AAChD,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,gBAAgB,EAAA,gBAAA;AAChB,QAAA,gBAAgB,EAAA,gBAAA;AACnB,KAAA,CAAC,iBAJsB;AAMxB,IAAAC,2CAAqB,CAAC,EAAE,YAAY,EAAA,YAAA,EAAE,cAAc,EAAA,cAAA,EAAE,gBAAgB,kBAAA,EAAE,gBAAgB,EAAA,gBAAA,EAAE,CAAC;AAE3F,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,iCAAS,IACN,SAAS,EAAEC,mBAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;YACjB,GAAG,EAAEC,0BAAS,CAAC,CAAC,iBAAiB,EAAE,sBAAsB,CAAC,CAAC;YAC3D,SAAS,EAAED,mBAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,GAAG,EAAE,uBAAuB;AAC5B,YAAA,SAAS,EAAEE,mBAAE,CAACF,mBAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAACA,mBAAM,CAAC,UAAU,CAAG,GAAA,MAAM,KAAK,YAAY;AAC9C,gBAAA,EAAA,EAAA;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":["useRef","setFooterAndHeaderRefs","useSetScrollbarHeight","React","Scrollbar","styles","cn"],"mappings":";;;;;;;;;;;;;;;;AAoBO,IAAM,YAAY,GAAc,UAAC,KAAK,EAAA;;AACjC,IAAA,IAAA,QAAQ,GAA4C,KAAK,SAAjD,EAAE,MAAM,GAAoC,KAAK,CAAA,MAAzC,EAAE,EAAA,GAAkC,KAAK,CAAV,sBAAA,EAA7B,sBAAsB,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,KAAA;AAEvD,IAAA,IAAM,YAAY,GAAGA,YAAM,CAAwB,IAAI,CAAC;AACxD,IAAA,IAAM,cAAc,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACnD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,IAAM,gBAAgB,GAAGA,YAAM,CAAwB,IAAI,CAAC;IAEpD,IAAA,gBAAgB,GAAKC,6CAAsB,CAAC;AAChD,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,gBAAgB,EAAA,gBAAA;AAChB,QAAA,gBAAgB,EAAA,gBAAA;AACnB,KAAA,CAAC,iBAJsB;AAMxB,IAAAC,2CAAqB,CAAC,EAAE,YAAY,EAAA,YAAA,EAAE,cAAc,EAAA,cAAA,EAAE,gBAAgB,kBAAA,EAAE,gBAAgB,EAAA,gBAAA,EAAE,CAAC;AAE3F,IAAA,QACIC,sBAAC,CAAA,aAAA,CAAAC,iCAAS,IACN,SAAS,EAAEC,mBAAM,CAAC,UAAU,EAC5B,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,cAAc,EAC9B,mBAAmB,EAAE;AACjB,YAAA,GAAG,EAAE,sBAAsB;YAC3B,SAAS,EAAEA,mBAAM,CAAC,cAAc;AACnC,SAAA,EACD,gBAAgB,EAAE;AACd,YAAA,SAAS,EAAEC,mBAAE,CAACD,mBAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AAC5B,gBAAA,EAAA,CAACA,mBAAM,CAAC,UAAU,CAAG,GAAA,MAAM,KAAK,YAAY;AAC9C,gBAAA,EAAA,EAAA;SACL,EAEA,EAAA,gBAAgB,CACT;AAEpB;;;;"}

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

@@ -2,7 +2,7 @@
 
 require('./modal-content.css');
 
-var styles = {"scrollable":"universal-modal__scrollable_9k4eh","scrollableNode":"universal-modal__scrollableNode_9k4eh","contentNode":"universal-modal__contentNode_9k4eh","hugContent":"universal-modal__hugContent_9k4eh"};
+var styles = {"scrollable":"universal-modal__scrollable_1uf4k","scrollableNode":"universal-modal__scrollableNode_1uf4k","contentNode":"universal-modal__contentNode_1uf4k","hugContent":"universal-modal__hugContent_1uf4k"};
 
 module.exports = styles;
 //# sourceMappingURL=modal-content.module.css.js.map